/* Self-hosted fonts (SIL Open Font License, see assets/fonts/licenses). No third-party requests. */
@font-face{font-family:"Anton";src:url(fonts/anton.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-italic.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

/*
  Palette (locked): pit #1C1C1C · ink #161514 · asphalt #4A4A4A · concrete #827F7A · bone #E6E5D7 · fog #D6E0DA · coral #EB5E69
  Type: Source Serif 4 display (the name; closest free match to Anthropic Serif) · Anton (posters, labels) · Newsreader (editorial reading + headlines) · Archivo extended italic (F1 labels) · Figtree (UI)
  Layout: a pinned photo hero whose start lights run with the scroll, then two columns: chapter nav left, story right.
*/
:root{
  --pit:#1C1C1C; --ink:#161514; --asphalt:#4A4A4A; --concrete:#827F7A; --bone:#E6E5D7; --fog:#D6E0DA; --coral:#EB5E69;
  --text:#BAB8AC; --line:rgba(230,229,215,.12); --line2:rgba(230,229,215,.2);
  --poster:"Anton","Impact","Arial Narrow",sans-serif;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --wide:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Figtree","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--pit);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font:400 18.5px/1.7 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  background:radial-gradient(60% 45% at 100% 0%,rgba(235,94,105,.09),transparent 70%),radial-gradient(70% 50% at 0% 100%,rgba(214,224,218,.05),transparent 70%),radial-gradient(110% 70% at 0% 0%,#2F302F,var(--pit) 55%,var(--ink) 100%) fixed}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='5' seed='7' result='n'/><feDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='2.2' result='l'><feDistantLight azimuth='225' elevation='40'/></feDiffuseLighting><feColorMatrix in='l' type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>")}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
#spot{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(620px circle at var(--x,30%) var(--y,20%),var(--c1,rgba(235,94,105,.06)),transparent 70%),radial-gradient(900px circle at var(--x2,75%) var(--y2,85%),var(--c2,rgba(214,224,218,.04)),transparent 70%)}
img{max-width:100%}
a{color:var(--bone);text-decoration:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
strong{color:var(--bone);font-weight:500}
::selection{background:rgba(235,94,105,.35);color:var(--bone)}
.link{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(235,94,105,.6);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .2s ease,text-decoration-color .2s ease}
.link:hover{color:var(--coral);text-decoration-color:var(--coral)}

/* Buttons: elevated, crisp, pressable */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 20px;border-radius:999px;font:600 15px/1 var(--sans);letter-spacing:-.005em;cursor:pointer;border:0;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none}
.btn.main{color:#2A0E12;background:linear-gradient(180deg,#F17A83,#EB5E69 55%,#DE4F5B);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.45),0 10px 24px -10px rgba(235,94,105,.75)}
.btn.main:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.45),0 16px 30px -12px rgba(235,94,105,.85)}
.btn.ghost{color:var(--bone);background:linear-gradient(180deg,rgba(230,229,215,.08),rgba(230,229,215,.03));box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.4)}
.btn.ghost:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(235,94,105,.6),inset 0 1px 0 rgba(255,255,255,.1),0 8px 20px -12px rgba(0,0,0,.8)}
.btn.sm{min-height:36px;padding:0 15px;font-size:14px}

/* ───────── HERO ───────── */
.hero{position:relative;z-index:2;height:210svh}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:min(58vw,820px);z-index:-1;will-change:opacity,transform;
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent),linear-gradient(to top,transparent,#000 30%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 55%,transparent),linear-gradient(to top,transparent,#000 30%);mask-composite:intersect}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:contrast(1.04)}
.hero-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 10%,rgba(235,94,105,.16),transparent 70%);mix-blend-mode:screen}
.topbar{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 22px) clamp(16px,5vw,64px) 0}
.sf{font:italic 900 22px/1 var(--wide);font-stretch:125%;color:var(--bone);letter-spacing:-.01em}
.sf span{color:var(--coral)}
.topbar nav{display:flex;gap:8px;align-items:center}
.hero-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(16px,5vw,64px) clamp(40px,8vh,88px);max-width:1360px;margin:0 auto}
.startrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,3vh,30px)}
.lights{display:flex;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(22,21,20,.85);box-shadow:inset 0 0 0 1px var(--line),0 10px 30px -12px rgba(0,0,0,.9)}
.lights i{width:15px;height:15px;border-radius:50%;background:#2A2A2A;box-shadow:inset 0 0 0 2px #343434;transition:background .12s ease,box-shadow .12s ease}
.lights i.on{background:var(--coral);box-shadow:0 0 16px 3px rgba(235,94,105,.6),inset 0 -2px 0 rgba(0,0,0,.2)}
.startlbl{font:italic 800 12px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete);transition:color .2s ease}
.startlbl.go{color:var(--coral)}
.lockup{margin:0;line-height:.8}
.lockup .first{display:block;font:600 clamp(110px,19vw,290px)/.82 "Source Serif 4","Newsreader",Georgia,serif;font-optical-sizing:auto;font-variation-settings:"opsz" 60;color:var(--bone);letter-spacing:-.045em}
.lockup .last{display:block;margin:-.18em 0 0 1.1em;font:italic 300 clamp(50px,8.4vw,128px)/1 var(--serif);letter-spacing:-.03em;color:var(--coral);text-shadow:0 4px 30px rgba(28,28,28,.6)}
.hero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(20px,3.4vh,34px)}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--bone);color:var(--bone);font:600 15.5px/1 var(--sans)}
.hero-line{max-width:46ch;margin:16px 0 0;font-size:clamp(17px,1.5vw,19px);color:var(--text)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cue{position:absolute;right:clamp(16px,5vw,64px);bottom:clamp(110px,16vh,150px);display:flex;flex-direction:column;align-items:center;gap:10px;font:italic 800 11px/1 var(--wide);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--concrete);writing-mode:vertical-rl}
.cue::after{content:"";width:1px;height:56px;background:linear-gradient(var(--concrete),transparent)}
@media (max-width:760px){
  .hero{height:190svh}
  .hero-photo{width:100%;-webkit-mask-image:linear-gradient(to top,transparent 8%,#000 60%);mask-image:linear-gradient(to top,transparent 8%,#000 60%);opacity:.75}
  .hero-photo img{object-position:50% 15%}
  .cue{display:none}
  .topbar .btn.ghost{display:none}
}

/* ───────── PAGE ───────── */
.page{position:relative;z-index:2;max-width:1260px;margin:0 auto;padding-inline:clamp(16px,5vw,64px);display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,6vw,96px)}
.left{position:sticky;top:0;height:100svh;padding-block:clamp(48px,8vh,88px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.wm{margin:0;font:italic 900 clamp(26px,2.6vw,36px)/.95 var(--wide);font-stretch:125%;color:var(--bone);text-transform:uppercase;letter-spacing:-.01em}
.role{margin:14px 0 0;font:italic 700 14.5px/1.4 var(--wide);font-stretch:110%;color:var(--coral)}
.intro{margin:12px 0 0;max-width:32ch;font-size:17px}
.chapters{margin:clamp(28px,5vh,48px) 0 0;display:grid;gap:2px;list-style:none;padding:0}
.chapters a{display:flex;align-items:center;gap:14px;padding-block:6px;font:italic 700 11.5px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete);transition:color .2s ease}
.chapters a::before{content:"";height:1px;width:28px;background:var(--concrete);transition:width .25s var(--ease),background .25s ease}
.chapters a:hover,.chapters a.on{color:var(--bone)}
.chapters a:hover::before,.chapters a.on::before{width:58px;background:var(--coral)}
.social{display:flex;gap:16px;align-items:center}
.social a{color:var(--concrete);transition:color .2s ease}.social a:hover{color:var(--coral)}
.social svg{width:20px;height:20px;display:block}
.right{padding-block:clamp(48px,8vh,88px) 40px;min-width:0}
.ch{padding-block:clamp(56px,7vw,96px);scroll-margin-top:24px}
.ch:first-child{padding-top:0}
.lap{display:inline-flex;align-items:center;gap:10px;font:italic 800 12px/1 var(--wide);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--coral)}
.lap::before{content:"";width:26px;height:3px;transform:skewX(-20deg);background:var(--coral)}
h2{margin:14px 0 24px;font:400 clamp(36px,4.2vw,56px)/1.04 var(--serif);letter-spacing:-.022em;color:var(--bone);text-wrap:balance}
h2 i{font-style:italic;font-weight:300;color:var(--fog)}
h3{margin:0;font:500 20px/1.3 var(--serif);color:var(--bone);letter-spacing:-.01em}
.ch p{margin:0;max-width:60ch}
.ch p+p{margin-top:16px}
.big{font:italic 300 clamp(28px,3vw,40px)/1.18 var(--serif)!important;letter-spacing:-.018em;color:var(--bone);margin:0 0 28px!important;max-width:22ch!important;text-wrap:balance}
.big em{color:var(--coral)}
.kicker{font:italic 800 11px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete)}
.lead{font-size:20px;color:var(--bone)}

/* 35mm frame */
.neg{float:right;margin:4px 0 24px 34px;width:clamp(160px,16vw,200px);padding:0 9px;border-radius:3px;position:relative;transform:rotate(2.5deg);transition:transform .4s var(--ease);
  background:linear-gradient(90deg,rgba(235,94,105,.06),transparent 30%,transparent 70%,rgba(235,94,105,.06)),#161514;box-shadow:0 26px 50px -24px rgba(0,0,0,.9),inset 0 0 0 1px rgba(230,229,215,.06)}
.neg:hover{transform:rotate(0deg) translateY(-3px)}
.neg::before,.neg::after{content:"";position:absolute;left:4px;right:4px;height:9px;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(230,229,215,.82) 5px 13px,transparent 13px 19px);border-radius:2px}
.neg::before{top:7px}.neg::after{bottom:7px}
.neg .edge{display:flex;justify-content:space-between;padding:22px 2px 6px;font:italic 800 8.5px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.neg .edge:last-child{padding:6px 2px 22px}
.neg .ph{border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.neg .ph img{display:block;width:100%;height:auto}

/* experience */
.rows{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:4px}
.rowi{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;padding:20px;margin-inline:-20px;border-radius:14px;transition:background .25s ease,opacity .25s ease}
@media (hover:hover){.rows:hover .rowi{opacity:.5}.rows .rowi:hover{opacity:1;background:rgba(230,229,215,.035)}}
.when{font:700 11px/1.9 var(--wide);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;color:var(--concrete)}
.rowi h3 .at{color:var(--text);font-weight:400}
.rowi p{margin-top:8px!important;font-size:16.5px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;list-style:none}
.tags li{padding:3px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(214,224,218,.22);color:var(--fog);font:500 12.5px/1.6 var(--sans);background:rgba(214,224,218,.03)}
@media (max-width:560px){.rowi{grid-template-columns:1fr;gap:4px;margin-inline:0;padding-inline:0}}
.telemetry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:30px;border-block:1px solid var(--line)}
.telemetry div{padding:18px 16px 18px 0}
.telemetry div+div{padding-left:18px;border-left:1px solid var(--line)}
.telemetry b{display:block;font:400 clamp(34px,3.4vw,46px)/1 var(--poster);color:var(--bone);font-variant-numeric:tabular-nums}
.telemetry span{display:block;margin-top:6px;font:400 13.5px/1.4 var(--sans)}
@media (max-width:480px){.telemetry{grid-template-columns:1fr}.telemetry div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
blockquote{margin:30px 0 0;padding-left:20px;border-left:3px solid var(--coral);color:var(--bone);font:italic 300 21px/1.5 var(--serif);max-width:52ch}
blockquote cite{display:block;margin-top:12px;font:italic 700 11px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete);font-style:normal}
.agents{margin-top:34px;padding:22px 24px;border-radius:18px;background:linear-gradient(180deg,rgba(230,229,215,.05),rgba(230,229,215,.015));box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.agents p{max-width:44ch!important;color:var(--bone);font-style:italic;font-weight:300;font-size:19px}

/* europe */
.origin{margin-top:6px;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,rgba(235,94,105,.10),rgba(214,224,218,.04));box-shadow:inset 0 0 0 1px var(--line)}
.origin p{color:var(--bone)}
.follow{margin-top:30px}
.follow-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.follow-grid a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(230,229,215,.02);transition:background .2s ease,box-shadow .2s ease,transform .2s var(--ease)}
.follow-grid a:hover{background:rgba(230,229,215,.05);box-shadow:inset 0 0 0 1px rgba(235,94,105,.5);transform:translateY(-1px)}
.follow-grid b{font:600 14.5px/1.3 var(--sans);color:var(--bone)}
.follow-grid span{font:500 12.5px/1.3 var(--sans);color:var(--concrete)}
.follow-grid .me b{color:var(--coral)}

/* posters */
.poster{margin:30px 0 0;border-radius:8px;overflow:hidden;position:relative;background:var(--ink);box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 0 0 1px var(--line)}
.poster svg{display:block;width:100%;height:auto}
.poster::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
.poster figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--fog);color:var(--ink);font:italic 800 11px/1.2 var(--wide);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase}
.poster figcaption b{color:var(--coral)}
.pl circle.lamp{transition:fill .12s ease}
.pl.off circle.lamp{fill:#2A2A2A}.pl.off circle.halo,.pl.off circle.spec{opacity:0}
.heat{animation:heat 1.6s ease-in-out infinite alternate}
@keyframes heat{to{transform:translateY(-4px);opacity:.25}}
.titlepulse{transition:fill .3s ease}

/* journey */
.journey{margin-top:30px;padding:22px 22px 8px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(22,21,20,.4)}
.journey svg{display:block;width:100%;height:auto;overflow:visible}
.stops{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stops li{display:grid;gap:4px;padding:14px 0;border-top:2px solid var(--line2)}
.stops li.done{border-top-color:var(--coral)}
.stops li.next{border-top-style:dashed}
.stops small{font:italic 800 10.5px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete)}
.stops b{font:400 19px/1.08 var(--poster);text-transform:uppercase;color:var(--bone);font-weight:400;letter-spacing:.01em}
.stops span{font:400 14px/1.45 var(--sans);color:var(--text)}
.stops li.done small{color:var(--coral)}
@media (max-width:640px){.stops{grid-template-columns:repeat(2,minmax(0,1fr))}}
#track-prog{transition:stroke-dashoffset 2.4s var(--ease)}

/* coffee */
.gear{margin-top:30px;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:radial-gradient(80% 70% at 70% 0%,rgba(235,94,105,.08),transparent 70%),rgba(22,21,20,.55)}
.gear svg{display:block;width:100%;height:auto}
.gear text{font-family:"Archivo",Arial,sans-serif;font-style:italic;font-weight:800;font-stretch:125%;letter-spacing:.12em}
#crank{transform-origin:86px 104px}
.gear.go #crank{animation:crank 2.4s linear infinite}
@keyframes crank{to{transform:rotate(360deg)}}
#stream{stroke-dasharray:6 7;animation:flow .6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-13}}
.steam path{animation:rise 3s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1s}.steam path:nth-child(3){animation-delay:2s}
@keyframes rise{0%{opacity:0;transform:translateY(6px)}40%{opacity:.7}100%{opacity:0;transform:translateY(-14px)}}
.menu{margin-top:28px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;background:rgba(22,21,20,.35)}
.menu-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.menu-head h3{font:400 24px/1 var(--poster);text-transform:uppercase;letter-spacing:.01em}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:999px;background:rgba(230,229,215,.06);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{min-height:32px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--text);font:600 13px/1 var(--sans);cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--bone);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.beans{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--asphalt) transparent}
.bean{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--line)}
.bean:last-child{border-bottom:0}
.bean .n{font:italic 800 11px/1.6 var(--wide);font-stretch:125%;color:var(--concrete)}
.bean h4{margin:0;font:500 18.5px/1.3 var(--serif);color:var(--bone)}
.bean p{margin:3px 0 0!important;font:400 13.5px/1.45 var(--sans);color:var(--text)}
.bean .where{font:500 12px/1.4 var(--sans);color:var(--concrete);text-align:right;white-space:nowrap}
.bean .where b{display:block;color:var(--fog);font-weight:600}
.bean.home h4::after{content:"Home";margin-left:8px;padding:1px 8px;border-radius:999px;background:rgba(235,94,105,.16);color:var(--coral);font:700 10.5px/1.6 var(--sans);vertical-align:3px}
@media (max-width:560px){.bean{grid-template-columns:22px minmax(0,1fr)}.bean .where{grid-column:2;text-align:left}}
.share{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-top:1px solid var(--line);background:rgba(230,229,215,.03)}
.share p{margin:0!important;font-size:16px;color:var(--bone)}
.mailchip{font:500 14.5px/1 var(--sans);color:var(--bone);user-select:all}
.pottery{margin-top:22px;display:flex;gap:16px;align-items:flex-start}
.pottery svg{flex:none;width:44px;height:44px}

/* watch */
.instr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;margin-top:30px}
.dial{width:100%;max-width:420px;justify-self:center;filter:drop-shadow(0 34px 40px rgba(0,0,0,.65))}
.dial svg{width:100%;height:auto;display:block;overflow:visible}
.dial .push{cursor:pointer}
.readout{display:grid;gap:14px;min-width:0}
.readout .ph{font:italic 800 12px/1 var(--wide);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--coral)}
.readout .t{display:flex;align-items:baseline;gap:14px;font:400 clamp(54px,6vw,76px)/1 var(--poster);color:var(--bone);font-variant-numeric:tabular-nums}
.readout .t small{font:400 clamp(22px,2.2vw,28px)/1 var(--poster);color:var(--concrete)}
.spec{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.spec div{padding:10px 14px}
.spec div+div{border-left:1px solid var(--line)}
.spec small{display:block;font:italic 800 9.5px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete)}
.spec b{display:block;margin-top:6px;font:400 17px/1 var(--poster);white-space:nowrap;color:var(--bone);font-weight:400}
.phases{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.phases li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font:400 14.5px/1.4 var(--sans);transition:color .3s ease}
.phases li b{font:italic 700 11px/1.7 var(--wide);font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete)}
.phases li.on{color:var(--bone)}.phases li.on b{color:var(--coral)}
.pushers{display:flex;gap:10px}
@media (max-width:760px){.instr{grid-template-columns:1fr}}

/* off the clock tabs */
.tabs{margin-top:26px}
.tablist{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(230,229,215,.06);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.tablist::-webkit-scrollbar{display:none}
.tablist button{flex:none;min-height:36px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:var(--text);font:600 13.5px/1 var(--sans);cursor:pointer;transition:background .2s ease,color .2s ease}
.tablist button:not([aria-selected="true"]):hover,.seg button:not([aria-pressed="true"]):not([aria-selected="true"]):hover{color:var(--bone);background:rgba(230,229,215,.08)}
.panel{margin-top:18px;padding:24px 26px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);background:linear-gradient(180deg,rgba(230,229,215,.04),rgba(230,229,215,.01));animation:fade .35s var(--ease)}
@keyframes fade{from{transform:translateY(6px)}to{transform:none}}
.panel h3{font:400 26px/1.05 var(--poster);text-transform:uppercase;letter-spacing:.01em;margin-bottom:12px}
.panel p{font-size:17.5px}
.panel .q{margin-top:18px;padding-left:16px;border-left:2px solid var(--coral);font-style:italic;font-weight:300;color:var(--bone);font-size:19px}
.panel .q small{display:block;margin-top:6px;font:500 12.5px/1.4 var(--sans);font-style:normal;color:var(--concrete)}
.meter{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:14px;max-width:440px}
.meter i{display:block;height:100%;width:8%;border-radius:6px;background:var(--coral)}
.meter-l{display:flex;justify-content:space-between;max-width:440px;margin-top:8px;font:500 13px/1 var(--sans);color:var(--concrete);font-variant-numeric:tabular-nums}
.minilist{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.minilist li{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:2px}
.minilist b{font:400 19px/1.1 var(--poster);text-transform:uppercase;color:var(--bone);font-weight:400}
.minilist span{font:400 15px/1.45 var(--sans)}
@media (max-width:560px){.minilist{grid-template-columns:1fr}}
.spotify{display:flex;align-items:center;gap:16px;margin-top:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* contact */
.mail{display:inline-block;margin-top:22px;font:400 clamp(20px,2.4vw,26px)/1.3 var(--serif);color:var(--bone);user-select:all;overflow-wrap:anywhere;border-bottom:1px dashed rgba(230,229,215,.35);padding-bottom:2px}
.copied{font:500 14px/1 var(--sans);color:var(--coral);margin-left:10px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chequer{height:22px;margin-top:64px;opacity:.8;background:conic-gradient(var(--bone) 0 25%,transparent 0 50%,var(--bone) 0 75%,transparent 0) 0 0/22px 22px;-webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent)}
.livery{height:5px;margin-top:14px;width:160px;transform:skewX(-20deg);background:linear-gradient(90deg,var(--coral) 0 55%,transparent 55% 62%,var(--fog) 62%)}
.band{position:relative;z-index:2;background:var(--fog);color:var(--ink)}
.band .in{max-width:1260px;margin:0 auto;padding:22px clamp(16px,5vw,64px) calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px}
.band .bwm{font:italic 900 19px/1 var(--wide);font-stretch:125%;text-transform:uppercase;color:var(--coral)}
.band .bwm span{color:var(--ink)}
.band small{font:500 14.5px/1.3 var(--sans)}
.band .mono{margin-left:auto;padding-left:22px;border-left:2px solid var(--ink);font:italic 900 24px/1 var(--wide);font-stretch:125%;color:var(--coral)}

/* template sheet */
.tpl-btn{transition:opacity .25s ease,transform .25s ease;position:fixed;right:clamp(12px,3vw,28px);bottom:calc(clamp(12px,3vw,28px) + env(safe-area-inset-bottom,0px));z-index:40}
.sheet-wrap{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;padding:16px;background:rgba(10,10,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet{width:min(640px,100%);max-height:min(86svh,820px);overflow:auto;border-radius:24px;background:linear-gradient(180deg,#262626,#1C1C1C);box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -30px rgba(0,0,0,.9);padding:26px;animation:sheet .35s var(--ease)}
@keyframes sheet{from{transform:translateY(24px)}to{transform:none}}
.sheet .sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sheet h2{font:400 32px/1 var(--poster);text-transform:uppercase;margin:6px 0 0;letter-spacing:.01em}
.sheet p{font-size:16px;margin:12px 0 0}
.sheet h4{margin:24px 0 10px;font:italic 800 11px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sheet li a,.sheet li span.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);font:500 14.5px/1.3 var(--sans);color:var(--bone);transition:background .2s ease}
.sheet li a:hover{background:rgba(230,229,215,.05)}
.sheet li a small,.sheet li span small{color:var(--concrete);font-weight:500}
.sw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sw button{display:grid;gap:6px;padding:0;border:0;background:none;cursor:pointer;color:var(--text);font:500 10.5px/1.2 var(--sans);text-align:left}
.sw button i{display:block;aspect-ratio:1;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line2)}
@media (max-width:520px){.sw{grid-template-columns:repeat(4,minmax(0,1fr))}}
.x{flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:rgba(230,229,215,.08);color:var(--bone);font:500 18px/1 var(--sans);box-shadow:inset 0 0 0 1px var(--line)}
.give{margin-top:40px}
.give-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;margin-top:14px}
.gcard{padding:24px 26px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);background:linear-gradient(180deg,rgba(230,229,215,.04),rgba(230,229,215,.01))}
.gcard h3{font:400 24px/1.05 var(--poster);text-transform:uppercase;letter-spacing:.01em;margin-bottom:12px}
.gcard p{font-size:17px}
.minilist.one{grid-template-columns:1fr}
.drop{display:flex;align-items:center;gap:14px;margin-top:16px}
.drop svg{width:64px;height:64px;flex:none}
.drop b{font:400 30px/1 var(--poster);color:var(--bone);font-weight:400}
.drop small{color:var(--concrete);font:500 13px/1 var(--sans)}
@media (max-width:760px){.give-grid{grid-template-columns:1fr}}
.deck{position:relative;flex:none;width:132px;height:112px;border-radius:14px;background:linear-gradient(180deg,#2A2A2A,#1C1C1C);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px -14px rgba(0,0,0,.9)}
.deck .vinyl{position:absolute;left:10px;top:10px;width:92px;height:92px;border-radius:50%;
  background:repeating-radial-gradient(circle,#111 0 1.4px,#1E1E1E 1.4px 2.8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),inset 0 0 18px rgba(0,0,0,.8);animation:spin 3.6s linear infinite}
.deck .vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 12%,rgba(255,255,255,.12) 16%,transparent 22% 62%,rgba(255,255,255,.08) 66%,transparent 72%)}
.deck .lbl{position:absolute;inset:31px;border-radius:50%;background:var(--coral);display:grid;place-items:center;font:italic 900 9px/1 var(--wide);font-stretch:125%;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(0,0,0,.15)}
.deck .arm{position:absolute;right:14px;top:14px;width:6px;height:70px;border-radius:3px;background:linear-gradient(180deg,#D9D8CE,#827F7A);transform-origin:3px 3px;transform:rotate(24deg)}
.deck .arm::before{content:"";position:absolute;top:-5px;left:-5px;width:16px;height:16px;border-radius:50%;background:#4A4A4A;box-shadow:inset 0 0 0 3px #827F7A}
.deck .arm::after{content:"";position:absolute;bottom:-6px;left:-3px;width:12px;height:12px;border-radius:2px;background:#E6E5D7}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
.door{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);background:linear-gradient(180deg,rgba(230,229,215,.05),rgba(230,229,215,.015));transition:transform .2s var(--ease),box-shadow .2s ease,background .2s ease}
.door:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(235,94,105,.55),0 18px 30px -20px rgba(0,0,0,.9);background:linear-gradient(180deg,rgba(235,94,105,.08),rgba(230,229,215,.015))}
.door small{font:italic 800 10.5px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;color:var(--coral)}
.door b{font:400 22px/1.05 var(--poster);text-transform:uppercase;color:var(--bone);font-weight:400;letter-spacing:.01em}
.door span{font:400 14.5px/1.45 var(--sans);color:var(--text)}
.door i{margin-top:auto;padding-top:8px;font:600 13.5px/1 var(--sans);font-style:normal;color:var(--coral)}
@media (max-width:760px){.doors{grid-template-columns:1fr}}
.nowline{display:flex;align-items:center;gap:10px;margin-top:26px;font:500 14.5px/1.4 var(--sans);color:var(--text)}
.nowline b{color:var(--bone);font-variant-numeric:tabular-nums}
.nowline .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#EB5E69;box-shadow:0 0 0 4px rgba(235,94,105,.2)}
.mail{margin-top:10px!important}
.versions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:500 13.5px/1.3 var(--sans)}
.versions a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(235,94,105,.8);text-underline-offset:3px}
.versions em{font-style:normal;color:#4A4A4A}

/* about opener: quote, then a full-width at-a-glance strip */
.opener{display:grid;gap:26px;margin-bottom:30px}
.opener .big{margin:0!important;max-width:24ch!important}
.glance{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(230,229,215,.05),rgba(230,229,215,.015));box-shadow:inset 0 0 0 1px var(--line)}
.glance div{display:grid;gap:6px;align-content:start;padding:16px 18px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.glance div:nth-child(-n+3){border-top:0}
.glance div:nth-child(3n+1){border-left:0}
.glance dt{font:italic 800 10.5px/1 var(--wide);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.glance dd{margin:0;font:500 14.5px/1.45 var(--sans);color:var(--bone)}
@media (max-width:640px){.glance{grid-template-columns:repeat(2,minmax(0,1fr))}.glance div{border-top:1px solid var(--line)!important;border-left:1px solid var(--line)!important}.glance div:nth-child(-n+2){border-top:0!important}.glance div:nth-child(odd){border-left:0!important}}
/* tablet & phone: the hero already carries the name, so the sidebar collapses to its links */
@media (max-width:1020px){.left{padding-block:28px 0}.left .wm,.left .role,.left .intro{display:none}}
.band .legal{display:flex;gap:14px;font:500 13.5px/1 var(--sans)}
.band .legal a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(22,21,20,.35);text-underline-offset:3px}
.band .legal a:hover{text-decoration-color:var(--coral)}

@media (max-width:1020px){.page{grid-template-columns:1fr;gap:0}.left{position:relative;height:auto;padding-bottom:0}.left .chapters{display:none}.right{padding-top:28px}}
@media (max-width:560px){.neg{width:142px;margin-left:16px}body{font-size:17.5px}}
@media (max-width:760px){.tpl-btn{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* legal and 404 pages */
.doc{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 56px) clamp(16px,5vw,40px) 72px}
.doc .back{display:inline-flex;margin-bottom:36px}
.doc h1{margin:0 0 8px;font:400 clamp(40px,6vw,64px)/1 var(--poster);text-transform:uppercase;color:var(--bone);letter-spacing:.01em}
.doc h2{margin:40px 0 12px;font:400 26px/1.15 var(--serif)}
.doc p,.doc li{max-width:64ch}
.doc ul{padding-left:20px}
.doc .meta{font:500 13.5px/1.4 var(--sans);color:var(--concrete)}
.doc .todo{padding:14px 16px;border-radius:12px;background:rgba(235,94,105,.12);box-shadow:inset 0 0 0 1px rgba(235,94,105,.5);color:var(--bone)}