/* historygrapher.net - Evolved-Minimal Bento Time Machine */

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

:root{
    --obsidian:#0E0E1A;
    --charcoal:#1A1B2F;
    --coral:#E8634A;
    --teal:#3ECFB4;
    --gold:#D4A843;
    --silver:#B8BDD1;
    --nebula:#6B7394;
    --faint:#2A2C42;
    --plasma:#F0EDF6;
}

html{scroll-behavior:smooth}

body{
    background:var(--obsidian);
    color:var(--silver);
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:clamp(0.875rem,1.1vw,1.05rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Fixed grid-lines background */
.grid-lines{
    position:fixed;
    inset:0;
    z-index:0;
    background-image:
        linear-gradient(90deg,var(--faint) 1px,transparent 1px),
        linear-gradient(180deg,var(--faint) 1px,transparent 1px);
    background-size:48px 48px;
    opacity:0.4;
    pointer-events:none;
}

/* Epoch navigation strip */
.epoch-nav{
    position:fixed;
    top:0;left:0;right:0;
    height:28px;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(16px,4vw,40px);
    background:rgba(14,14,26,0.85);
    transition:opacity 300ms ease;
}

.epoch-nav.hidden{
    opacity:0;
    pointer-events:none;
}

.epoch-sq{
    width:14px;height:14px;
    border:1.5px solid var(--nebula);
    background:transparent;
    display:block;
    transition:background 200ms ease,border-color 200ms ease;
    text-decoration:none;
}

.epoch-sq.active{
    background:var(--coral);
    border-color:var(--coral);
}

/* Epoch container with scroll-snap */
.epoch-container{
    scroll-snap-type:y mandatory;
    overflow-y:auto;
    height:100vh;
    position:relative;
    z-index:1;
}

/* Base epoch */
.epoch{
    min-height:100vh;
    scroll-snap-align:start;
    position:relative;
    padding:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* Epoch watermark */
.epoch-watermark{
    position:absolute;
    bottom:-5vh;right:-2vw;
    font-family:'Jost',sans-serif;
    font-weight:700;
    font-size:clamp(30vw,40vw,50vw);
    color:var(--charcoal);
    line-height:1;
    pointer-events:none;
    z-index:0;
}

/* Bento grids */
.bento-grid{
    display:grid;
    gap:2px;
    width:100%;
    max-width:1100px;
    position:relative;
    z-index:1;
}

/* Hero grid: 2x2 */
.grid-hero{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
}

.cell-title-left,.cell-title-right{
    display:flex;
    align-items:flex-end;
    padding:clamp(24px,3vw,40px);
}

.cell-title-right{
    align-items:flex-start;
    padding-top:clamp(32px,4vw,60px);
}

.hero-word{
    font-family:'Jost',sans-serif;
    font-weight:700;
    font-size:clamp(6rem,15vw,12rem);
    letter-spacing:0.02em;
    line-height:0.9;
    color:var(--plasma);
}

.cell-illustration{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.cell-tagline{
    display:flex;
    align-items:center;
    padding:clamp(24px,3vw,40px);
}

.hero-tagline{
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.5vw,1.2rem);
    color:var(--silver);
    line-height:1.5;
}

/* Bento cells */
.bento-cell{
    background:var(--charcoal);
    padding:clamp(16px,2vw,32px);
    position:relative;
    border:1px solid var(--faint);
    transition:transform 250ms cubic-bezier(0.25,0.46,0.45,0.94),border-color 250ms ease;
    opacity:0;
    transform:translateY(12px);
}

.bento-cell.revealed{
    opacity:1;
    transform:translateY(0);
    transition:opacity 400ms ease-out,transform 400ms ease-out,border-color 250ms ease;
}

.epoch-coral .bento-cell:hover{border-color:var(--coral)}
.epoch-teal .bento-cell:hover{border-color:var(--teal)}
.epoch-gold .bento-cell:hover{border-color:var(--gold)}
.epoch-coral-outline .bento-cell:hover{border-color:var(--coral)}
.epoch-multi .bento-cell:hover{border-color:var(--teal)}

/* Method grid: 5 narrow columns */
.grid-method{
    grid-template-columns:repeat(5,1fr);
}

.cell-heading{
    grid-column:1/6;
}

.cell-narrow{
    min-height:120px;
}

/* Specimen grid: 2 col */
.grid-specimen{
    grid-template-columns:2fr 1fr;
}

.cell-wide{grid-column:1}
.cell-side{grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Connections: micro-grid */
.grid-connections{
    grid-template-columns:repeat(4,1fr);
    grid-auto-flow:dense;
}

.cell-micro{
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cell-center-text{
    grid-column:2/4;
    grid-row:2/4;
}

/* Invitation grid */
.grid-invitation{
    grid-template-columns:2fr 1fr;
    grid-template-rows:auto auto;
}

.cell-invite-main{
    grid-row:1/3;
}

.cell-invite-small{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Epoch titles */
.epoch-title{
    font-family:'Jost',sans-serif;
    font-weight:600;
    font-size:clamp(1.6rem,3.5vw,2.4rem);
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--plasma);
    margin-bottom:0.75rem;
}

.epoch-num{
    font-family:'Space Mono',monospace;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    color:var(--nebula);
    letter-spacing:0.06em;
    display:block;
    margin-bottom:0.5rem;
}

/* Cell body text */
.cell-body{
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:clamp(0.875rem,1.1vw,1.05rem);
    line-height:1.65;
    color:var(--silver);
    max-width:65ch;
}

/* Cell meta labels */
.cell-meta{
    font-family:'Space Mono',monospace;
    font-size:clamp(0.65rem,0.8vw,0.75rem);
    letter-spacing:0.06em;
    color:var(--nebula);
    text-transform:uppercase;
}

/* Cell captions */
.cell-caption{
    font-family:'Inter',sans-serif;
    font-weight:500;
    font-size:clamp(0.85rem,1vw,1rem);
    color:var(--plasma);
}

/* Line illustrations */
.line-illustration{
    width:100%;
    max-width:200px;
    height:auto;
}

.draw-line{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    transition:stroke-dashoffset 600ms cubic-bezier(0.25,0.46,0.45,0.94);
}

.epoch.visible .draw-line{
    stroke-dashoffset:0;
}

/* Responsive */
@media(max-width:768px){
    .epoch-container{
        scroll-snap-type:y proximity;
    }
    .epoch{
        padding:16px;
        min-height:auto;
        padding-top:48px;
        padding-bottom:48px;
    }
    .bento-grid{
        grid-template-columns:1fr !important;
    }
    .cell-heading,.cell-center-text,.cell-invite-main{
        grid-column:1 !important;
        grid-row:auto !important;
    }
    .bento-cell{
        border-left:3px solid var(--faint);
    }
    .epoch-coral .bento-cell{border-left-color:var(--coral)}
    .epoch-teal .bento-cell{border-left-color:var(--teal)}
    .epoch-gold .bento-cell{border-left-color:var(--gold)}
    .epoch-watermark{
        font-size:15vw;
        top:8px;left:8px;
        bottom:auto;right:auto;
    }
    .hero-word{
        font-size:clamp(3rem,12vw,6rem);
    }
    .grid-lines{
        background-size:24px 24px;
    }
    .cell-micro{min-height:40px}
}