/* historygrapher.com - Pixelated Pastoral Chronoscope */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --frost:#E6EEF5;
    --slate:#2A3142;
    --ice:#7EB8D4;
    --gold:#D4A96A;
    --green:#8BA888;
    --rose:#C4929A;
    --parchment:#F5EDE0;
    --midnight:#181D28;
}

html{scroll-behavior:smooth}

body{
    background:var(--green);
    color:var(--slate);
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Pixel landscape background */
.pixel-landscape{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    background:linear-gradient(180deg,#8BA888 0%,#7A9B78 20%,#6E8F6C 40%,#5C7A5A 60%,#4A6648 80%,#3A4556 100%);
    image-rendering:pixelated;
}

.land-row{
    height:14.28%;
    width:100%;
    position:relative;
}

/* CSS pixel pattern backgrounds for landscape rows */
.hills-1{
    background:
        repeating-linear-gradient(90deg,#7A9B78 0px,#7A9B78 4px,#8BA888 4px,#8BA888 8px),
        repeating-linear-gradient(180deg,transparent 0px,transparent 4px,rgba(0,0,0,0.03) 4px,rgba(0,0,0,0.03) 8px);
    background-size:8px 8px;
}

.village{
    background:
        repeating-linear-gradient(90deg,#6E8F6C 0px,#6E8F6C 4px,#8BA888 4px,#8BA888 8px),
        repeating-linear-gradient(180deg,transparent 0px,transparent 4px,rgba(196,146,106,0.08) 4px,rgba(196,146,106,0.08) 8px);
    background-size:8px 8px;
}

.hills-2{
    background:
        repeating-linear-gradient(90deg,#5C7A5A 0px,#5C7A5A 4px,#7A9B78 4px,#7A9B78 8px);
    background-size:8px 4px;
}

.river{
    background:
        repeating-linear-gradient(90deg,#5C7A5A 0px,#5C7A5A 4px,#7EB8D4 4px,#7EB8D4 8px,#5C7A5A 8px,#5C7A5A 12px);
    background-size:12px 4px;
    animation:riverFlow 2s steps(3) infinite;
}

@keyframes riverFlow{
    0%{background-position:0 0}
    100%{background-position:12px 0}
}

.city{
    background:
        repeating-linear-gradient(90deg,#4A6648 0px,#4A6648 4px,#3A4556 4px,#3A4556 8px,#4A6648 8px,#4A6648 12px,#3A4556 12px,#3A4556 16px);
    background-size:16px 8px;
}

.industry{
    background:
        repeating-linear-gradient(90deg,#3A4556 0px,#3A4556 4px,#2A3142 4px,#2A3142 8px);
    background-size:8px 4px;
}

.modern{
    background:var(--midnight);
    background-image:
        repeating-linear-gradient(90deg,transparent 0px,transparent 4px,rgba(126,184,212,0.05) 4px,rgba(126,184,212,0.05) 8px);
    background-size:8px 8px;
}

/* Geometric overlay */
.geo-overlay{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.geo-shape{
    position:absolute;
    width:clamp(80px,15vw,200px);
    height:auto;
}

.shape-triangle{
    top:15%;left:10%;
    animation:geoDrift1 30s ease-in-out infinite;
}

.shape-circle{
    top:45%;right:8%;
    animation:geoDrift2 25s ease-in-out infinite;
}

.shape-hexagon{
    bottom:20%;left:20%;
    animation:geoDrift3 35s ease-in-out infinite;
}

@keyframes geoDrift1{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(20px,-15px)}
}

@keyframes geoDrift2{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(-15px,20px)}
}

@keyframes geoDrift3{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(10px,10px)}
}

/* Top navigation bar */
.top-bar{
    position:sticky;
    top:0;
    z-index:100;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(16px,3vw,32px);
    background:rgba(230,238,245,0.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--ice);
}

.nav-domain{
    font-family:'Silkscreen',cursive;
    font-size:12px;
    color:var(--slate);
    letter-spacing:0.02em;
}

.nav-shapes{
    display:flex;
    gap:16px;
    align-items:center;
}

.nav-shape{
    width:24px;height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ice);
    transition:color 200ms ease,transform 150ms ease-out;
    text-decoration:none;
}

.nav-shape:hover{
    color:var(--gold);
    transform:scale(1.15);
}

.nav-shape.active{
    color:var(--gold);
    filter:drop-shadow(0 0 6px rgba(126,184,212,0.5));
}

.nav-shape svg{
    width:100%;height:100%;
}

/* HUD container */
.hud-container{
    position:relative;
    z-index:10;
    padding:0 clamp(16px,4vw,48px);
    max-width:1200px;
    margin:0 auto;
}

/* Frost panels */
.frost-panel{
    background:rgba(230,238,245,0.72);
    backdrop-filter:blur(8px) saturate(1.2);
    -webkit-backdrop-filter:blur(8px) saturate(1.2);
    padding:clamp(24px,3vw,40px);
    border:1px solid transparent;
    transition:backdrop-filter 200ms ease,background 200ms ease,border-color 200ms ease;
    position:relative;
}

.frost-panel:hover{
    backdrop-filter:blur(12px) saturate(1.3);
    -webkit-backdrop-filter:blur(12px) saturate(1.3);
    background:rgba(230,238,245,0.82);
    border-color:var(--ice);
}

.frost-panel.warm{
    background:rgba(245,237,224,0.65);
}

.frost-panel.warm:hover{
    background:rgba(245,237,224,0.78);
}

/* Panel cluster layouts */
.panel-cluster{
    margin-bottom:0;
}

.hero-cluster{
    padding:clamp(80px,15vh,160px) 0;
}

.hero-panel{
    max-width:600px;
}

.hero-title{
    font-family:'Commissioner',sans-serif;
    font-weight:800;
    font-size:clamp(2.8rem,7vw,5rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--slate);
    margin-bottom:0.75rem;
}

.hero-sub{
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(1rem,1.8vw,1.2rem);
    color:var(--slate);
    opacity:0.7;
}

/* Cluster layouts */
.cluster-layout{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.cluster-layout.reverse{
    flex-direction:row-reverse;
}

.panel-large{
    flex:60;
    min-width:0;
}

.panel-side{
    flex:35;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}

.panel-wide{
    width:100%;
}

.panel-small{
    flex:1;
}

/* Watermark shape */
.watermark-shape{
    position:absolute;
    top:10px;right:20px;
    font-size:clamp(8rem,20vw,14rem);
    color:var(--ice);
    opacity:0.06;
    line-height:1;
    pointer-events:none;
}

/* Era titles */
.era-title{
    font-family:'Commissioner',sans-serif;
    font-weight:600;
    font-size:clamp(1.6rem,3.5vw,2.4rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--slate);
    margin-bottom:0.75rem;
}

/* Pixel labels */
.pixel-label{
    font-family:'Silkscreen',cursive;
    font-size:12px;
    color:var(--ice);
    display:block;
    margin-bottom:1rem;
    letter-spacing:0.05em;
}

/* Body text */
.era-body{
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    line-height:1.7;
    color:var(--slate);
    margin-bottom:1rem;
    max-width:65ch;
}

/* Panel notes */
.panel-note{
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.85rem,1.2vw,0.95rem);
    line-height:1.6;
    color:var(--slate);
    opacity:0.8;
}

/* Tile strip dividers */
.tile-strip{
    height:64px;
    margin:clamp(24px,4vh,48px) 0;
    background-size:64px 64px;
    image-rendering:pixelated;
}

.tile-hedge{
    background:
        repeating-linear-gradient(90deg,
            #6E8F6C 0px,#6E8F6C 8px,
            #8BA888 8px,#8BA888 16px,
            #5C7A5A 16px,#5C7A5A 24px,
            #8BA888 24px,#8BA888 32px
        );
    background-size:32px 64px;
    opacity:0.6;
}

.tile-stone{
    background:
        repeating-linear-gradient(90deg,
            #3A4556 0px,#3A4556 8px,
            #4A5568 8px,#4A5568 16px,
            #2A3142 16px,#2A3142 24px,
            #4A5568 24px,#4A5568 32px
        );
    background-size:32px 64px;
    opacity:0.5;
}

.tile-river{
    background:
        repeating-linear-gradient(90deg,
            #5C8FA8 0px,#5C8FA8 8px,
            #7EB8D4 8px,#7EB8D4 16px,
            #4A7A94 16px,#4A7A94 24px,
            #7EB8D4 24px,#7EB8D4 32px
        );
    background-size:32px 64px;
    opacity:0.5;
    animation:riverFlow 2s steps(4) infinite;
}

.tile-fence{
    background:
        repeating-linear-gradient(90deg,
            #D4A96A 0px,#D4A96A 4px,
            transparent 4px,transparent 12px,
            #D4A96A 12px,#D4A96A 16px,
            transparent 16px,transparent 24px
        );
    background-size:24px 64px;
    opacity:0.4;
}

/* Reveal animations */
.reveal{
    opacity:0;
    transform:translateY(12px);
    transition:opacity 400ms ease-out,transform 400ms ease-out;
}

.reveal.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Era cluster entrance */
.era-cluster{
    padding:clamp(40px,6vh,80px) 0;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 500ms ease-out,transform 500ms ease-out;
}

.era-cluster.visible{
    opacity:1;
    transform:translateY(0);
}

/* Footer */
.footer-cluster{
    padding:clamp(60px,10vh,120px) 0;
}

.panel-footer{
    text-align:center;
    background:rgba(24,29,40,0.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.footer-text{
    font-family:'Commissioner',sans-serif;
    font-weight:800;
    font-size:clamp(1.5rem,3vw,2.4rem);
    color:var(--frost);
    margin-bottom:0.5rem;
}

.footer-text+.pixel-label{
    color:var(--gold);
}

/* Responsive */
@media(max-width:768px){
    .cluster-layout,.cluster-layout.reverse{
        flex-direction:column;
    }
    .panel-large,.panel-side{
        flex:auto;
        width:100%;
    }
    .geo-overlay{display:none}
    .tile-strip{height:32px}
}