*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F2EDE4;color:#2C2A27;font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(0.95rem,1.1vw,1.1rem);line-height:1.65;overflow-x:hidden}

/* Sticky Header */
.sticky-header{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 clamp(16px,4vw,48px);background:rgba(242,237,228,0.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:#2C2A27}
.header-link{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase;color:#6B6560;text-decoration:none;transition:color 0.3s}
.header-link:hover{color:#C4786B}

/* Cover Hero */
.cover-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:clamp(16px,4vw,48px)}
.cover-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(4rem,12vw,10rem);color:#2C2A27;letter-spacing:-0.02em;line-height:1.08}
.cover-subtitle{font-family:'IBM Plex Mono',monospace;font-size:0.85rem;color:#6B6560;letter-spacing:0.04em;margin-top:1rem}
.hero-bubble{width:clamp(80px,15vw,160px);height:clamp(80px,15vw,160px);border-radius:50%;background:radial-gradient(circle at 40% 35%,transparent 0%,rgba(184,216,214,0.15) 60%,rgba(91,140,138,0.25) 90%,transparent 100%);position:absolute;bottom:15%;left:50%;transform:translateX(-50%);box-shadow:inset 0 -2px 6px rgba(30,40,50,0.08);animation:heroDrift 12s ease-in-out infinite alternate}
.hero-bubble .bubble-highlight{position:absolute;top:15%;left:20%;width:40%;height:40%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.4) 0%,transparent 70%)}
@keyframes heroDrift{0%{transform:translateX(-50%) translateY(0)}100%{transform:translateX(-30%) translateY(-20px)}}
.scroll-cue{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:#6B6560;letter-spacing:0.04em;text-transform:uppercase;position:absolute;bottom:clamp(24px,4vh,48px);animation:fadePulse 2s ease-in-out infinite}
@keyframes fadePulse{0%,100%{opacity:0.3}50%{opacity:0.7}}

/* Section Elements */
.section-rule{width:clamp(100px,30%,300px);height:1px;background:rgba(107,101,96,0.3);margin-bottom:1rem}
.section-rule--light{background:rgba(242,237,228,0.3)}
.section-num{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:#C9A84C;letter-spacing:0.04em;text-transform:uppercase;display:block;margin-bottom:0.5rem}
.section-num--light{color:#C9A84C}
.section-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,4.5rem);color:#2C2A27;letter-spacing:-0.02em;line-height:1.08;margin-bottom:1em}
.section-title--light{color:#F2EDE4}

/* Margin Annotations */
.margin-annotation{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:#6B6560;letter-spacing:0.04em;text-transform:uppercase;position:absolute;left:clamp(8px,2vw,24px);writing-mode:vertical-rl;text-orientation:mixed;display:flex;gap:8px}
.fig-label{color:#C9A84C}
.fig-desc{color:#6B6560}

/* Editorial Introduction */
.editorial-intro{position:relative;max-width:1000px;margin:0 auto;padding:clamp(4rem,8vh,8rem) clamp(48px,6vw,80px)}
.intro-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,48px);align-items:start}
.intro-text p{max-width:58ch;margin-bottom:1em;color:#2C2A27}

/* Bubbles */
.bubble{border-radius:50%;background:radial-gradient(circle at 40% 35%,transparent 0%,rgba(184,216,214,0.15) 60%,rgba(91,140,138,0.25) 90%,transparent 100%);box-shadow:inset 0 -2px 6px rgba(30,40,50,0.08);position:absolute}
.bubble .bubble-highlight{position:absolute;top:15%;left:20%;width:40%;height:40%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.4) 0%,transparent 70%)}
.intro-bubbles{position:relative;min-height:300px}
.b1{width:60px;height:60px;top:10%;left:20%}
.b2{width:40px;height:40px;top:30%;left:60%}
.b3{width:80px;height:80px;top:50%;left:10%}
.b4{width:30px;height:30px;top:15%;left:80%}
.b5{width:50px;height:50px;top:65%;left:50%}
.b6{width:25px;height:25px;top:45%;left:35%}
.b7{width:45px;height:45px;top:75%;left:75%}

/* Plates */
.plate{min-height:100vh;background:#1E2832;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:clamp(24px,4vw,48px)}
.plate-caption{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:rgba(242,237,228,0.6);letter-spacing:0.04em;text-transform:uppercase;position:relative;z-index:2}

/* Particles */
.particle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(184,216,214,0.6) 0%,transparent 70%);pointer-events:none}
.p1{width:2px;height:2px;top:20%;left:15%;animation:particleDrift 25s linear infinite}
.p2{width:3px;height:3px;top:40%;left:45%;animation:particleDrift 30s linear infinite 3s}
.p3{width:1px;height:1px;top:60%;left:70%;animation:particleDrift 20s linear infinite 7s}
.p4{width:2px;height:2px;top:80%;left:25%;animation:particleDrift 35s linear infinite 2s}
.p5{width:3px;height:3px;top:10%;left:85%;animation:particleDrift 28s linear infinite 5s}
.p6{width:1px;height:1px;top:50%;left:55%;animation:particleDrift 22s linear infinite 10s}
.p7{width:2px;height:2px;top:70%;left:35%;animation:particleDrift 32s linear infinite 8s}
.p8{width:2px;height:2px;top:30%;left:90%;animation:particleDrift 27s linear infinite 1s}
.p9{width:1px;height:1px;top:25%;left:60%;animation:particleDrift 33s linear infinite 4s}
.p10{width:3px;height:3px;top:55%;left:20%;animation:particleDrift 24s linear infinite 6s}
.p11{width:2px;height:2px;top:85%;left:75%;animation:particleDrift 29s linear infinite 9s}
.p12{width:1px;height:1px;top:15%;left:40%;animation:particleDrift 26s linear infinite 12s}
@keyframes particleDrift{0%{transform:translate(0,0);opacity:0}10%{opacity:0.6}90%{opacity:0.6}100%{transform:translate(20px,-100vh);opacity:0}}

/* Rising Bubbles */
.rising-bubble{border-radius:50%;background:radial-gradient(circle at 40% 35%,transparent 0%,rgba(184,216,214,0.15) 60%,rgba(91,140,138,0.25) 90%,transparent 100%);box-shadow:inset 0 -2px 6px rgba(30,40,50,0.08);position:absolute}
.rising-bubble .bubble-highlight{position:absolute;top:15%;left:20%;width:40%;height:40%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,transparent 70%)}
.rb1{width:40px;height:40px;bottom:-50px;left:15%;animation:rise 14s ease-in infinite}
.rb2{width:60px;height:60px;bottom:-70px;left:35%;animation:rise 18s ease-in infinite 3s}
.rb3{width:30px;height:30px;bottom:-40px;left:55%;animation:rise 12s ease-in infinite 6s}
.rb4{width:50px;height:50px;bottom:-60px;left:75%;animation:rise 16s ease-in infinite 2s}
.rb5{width:25px;height:25px;bottom:-35px;left:45%;animation:rise 20s ease-in infinite 8s}
.rb6{width:35px;height:35px;bottom:-45px;left:85%;animation:rise 15s ease-in infinite 5s}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:0.7}85%{opacity:0.7}100%{transform:translateY(-110vh) translateX(15px);opacity:0}}

/* Plankton */
.plankton-svg{position:absolute;width:clamp(80px,15vw,200px);top:30%;right:15%;opacity:0.25;animation:planktonDrift 25s ease-in-out infinite alternate}
.plankton-body{fill:rgba(184,216,214,0.3);stroke:rgba(91,140,138,0.4);stroke-width:1}
.plankton-trail{fill:none;stroke:rgba(91,140,138,0.2);stroke-width:1}
@keyframes planktonDrift{0%{transform:translate(0,0)}100%{transform:translate(-30px,20px)}}

/* Feature Article */
.feature-article{position:relative;max-width:1000px;margin:0 auto;padding:clamp(4rem,8vh,8rem) clamp(48px,6vw,80px)}
.article-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,48px)}
.article-main p{max-width:58ch;margin-bottom:1em}

/* Pull Quote */
.pull-quote{margin:2rem 0;padding:clamp(12px,2vw,24px);padding-left:clamp(16px,2vw,24px)}
.pull-quote p{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1.5rem,3vw,2.5rem);color:#C4786B;line-height:1.3}

/* Figure Blocks */
.figure-block{margin-bottom:clamp(16px,3vw,32px)}
.fig-viz{background:#F2EDE4;border:1px solid rgba(107,101,96,0.15);padding:clamp(16px,2vw,24px);margin-bottom:8px}
.dot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:200px;margin:0 auto}
.dot{width:12px;height:12px;border-radius:50%;background:rgba(107,101,96,0.15)}
.dot.active{background:#5B8C8A}
.bubble-cluster{position:relative;min-height:100px}
.bc1{width:50px;height:50px;top:10px;left:20px}
.bc2{width:35px;height:35px;top:30px;left:60px}
.bc3{width:45px;height:45px;top:5px;left:90px}

/* Marginalia Index */
.marginalia-index{max-width:800px;margin:0 auto;padding:clamp(4rem,8vh,8rem) clamp(16px,4vw,48px);background:#1E2832;color:#F2EDE4}
.index-columns{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem 2rem;margin-bottom:clamp(24px,4vh,48px)}
.index-item{font-family:'IBM Plex Mono',monospace;font-size:0.8rem;color:rgba(242,237,228,0.7);text-decoration:none;padding:8px 0;border-bottom:1px solid rgba(242,237,228,0.1);transition:color 0.3s;display:block;position:relative}
.index-item::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:#C4786B;transition:width 0.3s ease}
.index-item:hover{color:#C4786B}
.index-item:hover::after{width:100%}

/* Colophon */
.colophon{text-align:center;padding-top:clamp(24px,4vh,48px);border-top:1px solid rgba(242,237,228,0.15)}
.colophon p{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:rgba(242,237,228,0.4);line-height:1.8}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.6s cubic-bezier(0.23,1,0.32,1),transform 0.6s cubic-bezier(0.23,1,0.32,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
  .intro-grid,.article-grid{grid-template-columns:1fr}
  .index-columns{grid-template-columns:1fr}
  .margin-annotation{display:none}
  .intro-bubbles{min-height:200px}
}