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

:root{
    --polar-midnight:#0e1a2b;
    --alabaster:#f0ebe3;
    --thesis-gold:#d4a843;
    --oxidized-teal:#2a7f7a;
    --marble-vein:#8b6f5c;
    --reading-ink:#e8e2d8;
    --graphite:#1c1c1c;
    --fjord-gray:#6b7a8d;
    --column-width:clamp(480px,55vw,720px);
}

html{scroll-behavior:smooth}
body{
    background:var(--polar-midnight);
    overflow-x:hidden;
    font-family:'Source Serif 4',serif;
}

/* NAV */
.top-bar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 40px;
    mix-blend-mode:difference;
}
.wordmark{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:1.2rem;
    color:#fff;
    letter-spacing:0.04em;
}
.nav-toggle{
    background:none;border:none;cursor:pointer;
    display:flex;flex-direction:column;gap:5px;
    padding:8px;
}
.toggle-line{
    display:block;
    height:2px;
    background:#fff;
    transition:width 0.3s ease;
}
.line-1{width:28px}
.line-2{width:22px}
.line-3{width:16px}

/* NAV OVERLAY */
.nav-overlay{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    z-index:999;
    background:var(--polar-midnight);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.5s ease;
}
.nav-overlay.active{
    opacity:1;
    pointer-events:all;
}
.nav-overlay-content{
    display:flex;
    flex-direction:column;
    gap:48px;
}
.nav-item{
    text-decoration:none;
    display:block;
}
.nav-title{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(4rem,10vw,8rem);
    color:var(--reading-ink);
    display:block;
    line-height:1.1;
}
.nav-abstract{
    font-family:'Source Serif 4',serif;
    font-size:1rem;
    color:var(--fjord-gray);
    display:block;
    margin-top:8px;
}

/* PLATES */
.plate{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:15vh;
    overflow:hidden;
}
.plate-dark{
    background:var(--polar-midnight);
    color:var(--reading-ink);
    border-bottom:4px solid var(--thesis-gold);
}
.plate-light{
    background:var(--alabaster);
    color:var(--graphite);
    border-bottom:4px solid var(--thesis-gold);
}
.plate-content{
    width:var(--column-width);
    max-width:90vw;
    position:relative;
}

/* PLATE 1 - HERO */
.hero-title{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(4rem,12vw,9rem);
    letter-spacing:0.08em;
    line-height:1.08;
    margin-bottom:32px;
}
.thesis-statement{
    font-family:'Source Serif 4',serif;
    font-size:clamp(1.05rem,1.2vw,1.25rem);
    line-height:1.72;
    letter-spacing:0.005em;
    opacity:0;
    transition:opacity 1s ease 0.5s;
}
.thesis-statement.revealed{opacity:1}
.gold-divider{
    position:absolute;
    bottom:40px;
    left:0;
    height:4px;
    background:var(--thesis-gold);
    width:0;
    transition:width 2s ease 1.5s;
}
.gold-divider.animate{width:100%}

/* CIRCUIT TRACE */
.circuit-trace{
    position:absolute;
    left:0;top:0;
    width:40px;
    height:100%;
    opacity:0.2;
}
.circuit-trace svg{width:100%;height:100%}

/* MARBLE THRESHOLDS */
.marble-threshold{
    position:relative;
    height:clamp(120px,15vh,200px);
    overflow:hidden;
}
.marble-surface{
    position:absolute;
    inset:0;
    filter:contrast(1.1) saturate(0.9);
}
.marble-surface-1{
    background:
        radial-gradient(ellipse at 20% 50%,rgba(139,111,92,0.2) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 30%,rgba(139,111,92,0.15) 0%,transparent 40%),
        radial-gradient(ellipse at 50% 80%,rgba(212,168,67,0.08) 0%,transparent 35%),
        radial-gradient(ellipse at 85% 60%,rgba(139,111,92,0.18) 0%,transparent 45%),
        radial-gradient(ellipse at 30% 20%,rgba(139,111,92,0.12) 0%,transparent 50%),
        var(--alabaster);
    background-size:200% 200%;
    animation:marble-drift 60s linear infinite;
}
.marble-surface-2{
    background:
        radial-gradient(ellipse at 40% 60%,rgba(139,111,92,0.25) 0%,transparent 45%),
        radial-gradient(ellipse at 80% 20%,rgba(139,111,92,0.2) 0%,transparent 40%),
        radial-gradient(ellipse at 15% 40%,rgba(42,127,122,0.05) 0%,transparent 35%),
        radial-gradient(ellipse at 60% 80%,rgba(212,168,67,0.08) 0%,transparent 40%),
        radial-gradient(ellipse at 90% 50%,rgba(139,111,92,0.15) 0%,transparent 50%),
        linear-gradient(135deg,rgba(42,127,122,0.03) 0%,transparent 50%),
        var(--alabaster);
    background-size:200% 200%;
    animation:marble-drift 60s linear infinite reverse;
}
@keyframes marble-drift{
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}
.fractal-noise{
    position:absolute;inset:0;
    opacity:0.04;
    background:
        conic-gradient(from 45deg at 25% 25%,#8b6f5c,transparent,#8b6f5c),
        conic-gradient(from 120deg at 75% 75%,#6b7a8d,transparent,#6b7a8d),
        conic-gradient(from 200deg at 50% 50%,#8b6f5c,transparent,#8b6f5c);
    background-size:100px 100px,150px 150px,80px 80px;
}
.circuit-trace-band{
    position:absolute;inset:0;
    display:flex;align-items:center;
}
.circuit-trace-band svg{width:100%;height:100%}
.dot-matrix{
    position:absolute;inset:0;
    background-image:radial-gradient(circle 1px at center,rgba(212,168,67,0.1) 1px,transparent 1px);
    background-size:16px 16px;
}

/* PLATE 2 */
.watermark-numeral{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(6rem,15vw,12rem);
    color:var(--thesis-gold);
    opacity:0.08;
    pointer-events:none;
}
.margin-note{
    position:absolute;
    left:-180px;top:0;
    width:140px;
}
.margin-label{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(0.75rem,0.9vw,0.875rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--fjord-gray);
    display:block;
    margin-bottom:8px;
}
.margin-text{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.75rem,0.9vw,0.875rem);
    color:var(--fjord-gray);
    line-height:1.5;
}
.body-text{
    font-family:'Source Serif 4',serif;
    font-size:clamp(1.05rem,1.2vw,1.25rem);
    line-height:1.72;
    letter-spacing:0.005em;
    margin-bottom:1.5em;
}
.body-text .semibold{font-weight:600}
.fade-up{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease-out,transform 0.6s ease-out;
}
.fade-up.visible{
    opacity:1;
    transform:translateY(0);
}

/* PLATE 3 - EVIDENCE */
.evidence-block{
    display:flex;
    flex-direction:column;
    gap:48px;
}
.evidence-item{
    display:flex;
    gap:24px;
    align-items:flex-start;
    clip-path:inset(0 100% 0 0);
    transition:clip-path 0.8s ease;
    transition-delay:var(--delay);
}
.evidence-item.revealed{
    clip-path:inset(0 0 0 0);
}
.notation-glyph{
    font-family:'Libre Baskerville',serif;
    font-size:2rem;
    color:var(--thesis-gold);
    flex-shrink:0;
    line-height:1.72;
}

/* PLATE 4 - PULL QUOTE */
.pull-quote-container{
    position:relative;
    padding:60px 0;
    margin-bottom:48px;
}
.quote-mark{
    font-family:'Libre Baskerville',serif;
    font-size:clamp(4rem,8vw,8rem);
    color:var(--thesis-gold);
    opacity:0.4;
    position:absolute;
    line-height:1;
}
.quote-open{top:0;left:-20px}
.quote-close{bottom:0;right:-20px}
.pull-quote{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(1.6rem,3.5vw,2.8rem);
    line-height:1.3;
    letter-spacing:0.15em;
    transition:letter-spacing 1s ease;
    color:var(--graphite);
}
.pull-quote.compressed{
    letter-spacing:-0.02em;
}
.concluding-text{
    color:var(--graphite);
}

/* PLATE 5 - COLOPHON */
#plate-5{align-items:center;padding-top:0}
.colophon-content{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.circuit-trace-full{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
}
.circuit-trace-full svg{width:100%;height:100%}
.colophon-domain{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.04em;
    color:var(--reading-ink);
}
.colophon-gold-line{
    width:120px;
    height:2px;
    background:var(--thesis-gold);
    margin:24px 0;
}
.colophon-meta{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(0.75rem,0.9vw,0.875rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--fjord-gray);
}

/* NOTATION MARKS */
.notation-decoration{
    position:absolute;
    font-family:'Libre Baskerville',serif;
    font-size:1.2rem;
    color:var(--fjord-gray);
    opacity:0.15;
}

/* RESPONSIVE */
@media(max-width:768px){
    .plate-content{max-width:90vw;width:clamp(320px,90vw,480px)}
    .margin-note{display:none}
    .marble-threshold{height:80px}
    .circuit-trace{display:none}
    .circuit-trace-full{display:none}
    .top-bar{padding:16px 20px}
    .nav-title{font-size:clamp(2rem,8vw,4rem)}
}