:root{ --bg:#060a12; --s1:#0c1422; --s2:#101c30; --s3:#15243c; --ink:#eef2fb; --muted:#9fb0cc; --faint:#8595ad; --gold:#e8a33d; --gold2:#c47d2a; --teal:#37d6b0; --teal-dim:#1d8d77; --violet:#9d7bff; --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13); --maxw:1200px; } *{box-sizing:border-box;margin:0;padding:0} /* scroll-padding-top keeps anchor targets clear of the 68px fixed header. Without it every #hash landing sits flush under the bar with its kicker and heading hidden. */ html{scroll-behavior:smooth;scroll-padding-top:88px} body{ background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* premium fixed backdrop: aurora mesh + film grain (no per-frame cost) */ body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(620px circle at 12% 8%, rgba(55,214,176,.13), transparent 60%), radial-gradient(680px circle at 88% 42%, rgba(224,164,74,.11), transparent 62%), radial-gradient(520px circle at 60% 100%, rgba(157,123,255,.09), transparent 60%);} body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} ::selection{background:var(--gold);color:#0a0a0a} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .serif{font-family:'Fraunces',serif} .mono{font-family:'JetBrains Mono',monospace} /* skip link + focus */ .skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--gold);color:#160d02; padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;font-size:14px} .skip:focus{left:0} :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px} /* section-anchored backdrop art — absolute inside each section, scrolls with content */ .bg-art{position:absolute;z-index:-1;pointer-events:none;user-select:none;max-width:none;height:auto} #bg-cip{left:-12.6vw;top:78px;width:43.4vw;opacity:.4;filter:grayscale(60%)} #bg-cellar{left:27.6vw;top:-235px;width:80.8vw;opacity:.4;filter:grayscale(60%)} #bg-still{left:-25.9vw;top:65px;width:140vw;opacity:.4;filter:grayscale(60%)} #bg-rig{left:-10.4vw;top:120px;width:44.7vw;opacity:.32;filter:grayscale(60%)} #bg-tanks{left:57vw;top:44px;width:42vw;opacity:.4;filter:grayscale(60%)} #bg-filtration{left:44.5vw;top:-46px;width:81vw;opacity:.4;filter:grayscale(60%)} @media(max-width:760px){ #bg-cip{left:0;top:78px;width:85vw;opacity:.4} #bg-cellar{left:10vw;top:-235px;width:95vw;opacity:.4} #bg-still{left:-10vw;top:277px;width:113vw;opacity:.17} #bg-rig{left:5vw;top:120px;width:85vw;opacity:.32} #bg-tanks{left:20vw;top:-150px;width:80vw;opacity:.4} #bg-filtration{left:10vw;top:-6px;width:95vw;opacity:.4} } /* yeast→network canvas — the only cell layer. Density was roughly doubled 2026-07-25 and the cells given granular cytoplasm + visible nutrient packets, so opacity comes down to compensate: twice the cells at the old .6 would have been far too bright behind copy. */ #cells{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity .8s ease;pointer-events:none} #cells.on{opacity:.45} /* scroll progress */ #prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:60; background:linear-gradient(90deg,var(--gold),var(--teal),var(--violet));box-shadow:0 0 12px rgba(55,214,176,.5)} /* nav */ header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s} header.scrolled{background:rgba(7,11,20,.94);border-bottom:1px solid var(--line)} /* Scoped to the header on purpose. Unscoped, this caught every