/* Hallmark · macrostructure: Photographic · tone: documentary, raw · anchor hue: thumbnail yellow 104 on warm black 70
 * nav: N9 edge-aligned + full-screen menu · footer: Ft5 statement · fonts: Saira italic (logo face), Archivo caption bars, Public Sans body, Martian Mono labels
 * Bike's pick from round 1 (Look B Raw Footage, 2026-10-29) */
@font-face{font-family:"Saira";src:url(fonts/saira-italic-latin.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:50% 125%;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-normal-latin.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-normal-latin.woff2) format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-italic-latin.woff2) format("woff2");font-style:italic;font-weight:100 900;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(fonts/martian-mono-normal-latin.woff2) format("woff2");font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap}

@font-face{font-family:"Public Sans Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Roboto");font-weight:400;size-adjust:104.5%;ascent-override:90.9%;descent-override:21.5%;line-gap-override:0%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");font-weight:600 900;size-adjust:100%;ascent-override:94%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Saira Fallback";src:local("Arial Bold Italic"),local("Arial-BoldItalicMT"),local("Helvetica Neue Bold Italic"),local("Roboto Bold Italic");font-style:italic;font-weight:100 900;size-adjust:63%;ascent-override:180.1%;descent-override:69.6%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");font-weight:100 900;size-adjust:100.1%;ascent-override:87.7%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Martian Mono Fallback";src:local("Consolas"),local("Menlo"),local("Courier New");font-weight:100 900;size-adjust:127.3%;ascent-override:78.5%;descent-override:15.7%;line-gap-override:0%}
:root{
  --color-black:oklch(14% 0.008 70);
  --color-black-2:oklch(18.5% 0.01 70);
  --color-black-3:oklch(23% 0.012 70);
  --color-line:oklch(31% 0.012 70);
  --color-line-2:oklch(40% 0.014 70);
  --color-text:oklch(95% 0.008 90);
  --color-text-dim:oklch(80% 0.012 85);
  --color-text-faint:oklch(68% 0.012 85);
  --color-yellow:oklch(91% 0.19 104);
  --color-yellow-deep:oklch(85% 0.185 100);
  --color-ink:oklch(15% 0.01 90);
  --color-ink-2:oklch(32% 0.02 90);
  --color-rec:oklch(62% 0.23 28);
  --color-ok:oklch(80% 0.17 150);
  --color-focus:oklch(91% 0.19 104);
  --font-display:"Saira","Saira Fallback","Arial Narrow",sans-serif;
  --font-caption:"Archivo","Archivo Fallback",Arial,sans-serif;
  --font-body:"Public Sans","Public Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Martian Mono","Martian Mono Fallback",ui-monospace,"Cascadia Mono",monospace;
  --space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;
  --gutter:clamp(1rem,4vw,3.25rem);
  --measure:44rem;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in:cubic-bezier(.5,0,.75,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:.15s;--dur:.22s;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5rem}
html,body{margin:0;overflow-x:clip}
body{background:var(--color-black);color:var(--color-text);font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.skip{position:absolute;left:var(--space-md);top:-4rem;z-index:100;background:var(--color-yellow);color:var(--color-ink);padding:.6rem 1rem;font-weight:800;text-decoration:none}
.skip:focus{top:var(--space-md)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}

/* header (N9 edge-aligned) */
.head{position:relative;z-index:20;display:flex;align-items:center;gap:var(--space-lg);padding:clamp(.9rem,2.2vw,1.5rem) var(--gutter);max-width:1440px;margin:0 auto}
.head-home{position:absolute;inset:0 0 auto 0;max-width:none}
.head-page{border-bottom:1px solid var(--color-line)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
.brand .wm{height:clamp(24px,2.3vw,30px);color:var(--color-text);flex:none}
.brand .wm svg{height:100%;width:auto}
.fan{font-family:var(--font-mono);font-size:.6rem;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);border-left:1px solid var(--color-line-2);padding-left:.7rem;white-space:nowrap}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem)}
.nav a{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding:.35rem 0;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow var(--dur-fast) var(--ease-out)}
.nav a:hover,.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--color-yellow)}
.menu-btn{flex:none;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--color-ink);background:var(--color-yellow);border:0;padding:.62rem .95rem;cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.menu-btn:hover{background:var(--color-yellow-deep)}
.menu-btn:active{transform:translateY(1px)}
.menu{position:fixed;inset:0;z-index:50;background:var(--color-black);display:flex;flex-direction:column;padding:clamp(.9rem,2.2vw,1.5rem) var(--gutter) var(--space-xl);overflow-y:auto}
.menu[hidden]{display:none}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.menu-list{list-style:none;margin:var(--space-2xl) 0 var(--space-xl);padding:0;display:grid;gap:.2rem}
.menu-list a{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:72%;font-size:clamp(2.3rem,8vw,4.4rem);line-height:1.02;text-decoration:none;display:inline-block}
.menu-list a:hover,.menu-list a[aria-current="page"]{color:var(--color-yellow)}
.menu-foot{margin-top:auto;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint);display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.menu-foot a{text-decoration:none}

/* home hero */
.frame{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.frame>picture,.frame>picture img{position:absolute;inset:0;width:100%;height:100%}
.frame>picture img{object-fit:cover;object-position:62% 40%;filter:contrast(1.06) saturate(1.05)}
.frame::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,oklch(14% 0.008 70 / .7) 0%,transparent 20%),
  linear-gradient(0deg,oklch(14% 0.008 70 / .97) 0%,oklch(14% 0.008 70 / .74) 36%,transparent 68%),
  linear-gradient(90deg,oklch(14% 0.008 70 / .84) 0%,transparent 60%)}
.grain{position:absolute;inset:0;z-index:2;opacity:.15;mix-blend-mode:overlay;pointer-events:none;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.frame-copy{position:relative;z-index:3;margin-top:auto;padding:7rem var(--gutter) clamp(2rem,5vw,3.75rem);max-width:1000px}
.frame-credit{position:absolute;right:var(--gutter);bottom:clamp(2rem,5vw,3.75rem);z-index:3;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint);writing-mode:vertical-rl;transform:rotate(180deg);max-height:60vh}
.rec{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-dim);margin:0 0 var(--space-md)}
.rec .dot{display:inline-flex;align-items:center;gap:.45rem;color:var(--color-text);font-weight:700}
.rec .dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--color-rec);animation:rec 1.6s steps(1,end) infinite}
@keyframes rec{0%,60%{opacity:1}61%,100%{opacity:.25}}
.h-mega{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:70%;font-size:clamp(3.7rem,10.5vw,9.6rem);line-height:.86;margin:0 0 var(--space-md);letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}
.bar{display:inline;background:var(--color-yellow);color:var(--color-ink);font-family:var(--font-caption);font-weight:800;font-stretch:96%;line-height:1.32;padding:.16em .42em .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bar-l{font-size:clamp(1.3rem,2.5vw,2.1rem)}
.bar-m{font-size:clamp(1.05rem,1.7vw,1.35rem)}
.bar-wrap{margin:0 0 var(--space-lg);max-width:34ch}
.frame .bar-wrap{max-width:none}
.lede{max-width:62ch;color:var(--color-text-dim);font-size:1.1rem;margin:0 0 var(--space-xl)}
.lede strong{color:var(--color-text);font-weight:700}
.play{display:inline-flex;align-items:center;gap:.9rem;text-decoration:none;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text);white-space:nowrap}
.play i{flex:none;width:58px;height:58px;border-radius:50%;border:2px solid var(--color-yellow);display:grid;place-items:center;transition:background var(--dur-fast) var(--ease-out)}
.play i svg{width:20px;height:20px;color:var(--color-yellow);margin-left:3px}
.play:hover i{background:var(--color-yellow)}.play:hover i svg{color:var(--color-black)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg) var(--space-xl)}
.tlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--color-yellow);text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
.tlink:hover{color:var(--color-yellow)}

/* page heroes */
.phero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--color-line)}
.phero>picture,.phero>picture img{position:absolute;inset:0;width:100%;height:100%}
.phero>picture img{object-fit:cover}
.phero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,oklch(14% 0.008 70 / .97) 0%,oklch(14% 0.008 70 / .66) 45%,oklch(14% 0.008 70 / .25) 100%),linear-gradient(90deg,oklch(14% 0.008 70 / .8) 0%,transparent 65%)}
.phero-in{position:relative;z-index:3;max-width:1440px;margin:0 auto;padding:clamp(7rem,20vw,15rem) var(--gutter) clamp(2rem,4vw,3.25rem)}
.shero{border-bottom:1px solid var(--color-line);background:radial-gradient(120% 90% at 85% 10%,var(--color-black-3) 0%,var(--color-black) 60%)}
.shero-in{max-width:1440px;margin:0 auto;padding:clamp(2rem,5vw,4rem) var(--gutter) clamp(2rem,4vw,3.25rem);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.shero figure{margin:0;justify-self:end;width:100%;max-width:30rem}
.shero figure img{width:100%;height:auto;max-height:72vh;object-fit:cover;border:1px solid var(--color-line)}
.shero figcaption{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:var(--color-text-faint);margin-top:.6rem;line-height:1.5}
.thero{border-bottom:1px solid var(--color-line)}
.thero-in{max-width:1440px;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) var(--gutter) clamp(2rem,4vw,3rem)}
.h-page{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:72%;font-size:clamp(2.6rem,6.2vw,5.6rem);line-height:.92;letter-spacing:-.008em;margin:0 0 var(--space-md);max-width:18ch;overflow-wrap:anywhere;min-width:0}
.h-page.h-long{font-size:clamp(2.2rem,4.4vw,4.1rem);max-width:22ch}
.crumbs{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);margin:0 0 var(--space-md);display:flex;flex-wrap:wrap;gap:.3rem .6rem}
.crumbs a{text-decoration:none;color:var(--color-text-dim)}
.crumbs a:hover{color:var(--color-yellow)}
.crumbs span[aria-hidden]{opacity:.6}
.byline{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint);margin:var(--space-lg) 0 0;display:flex;flex-wrap:wrap;gap:.35rem 1.2rem}
.byline a{color:var(--color-text-dim)}
.credit{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:var(--color-text-faint);margin:var(--space-md) 0 0}
.credit a{color:var(--color-text-faint)}

/* article */
.page-grid{max-width:1440px;margin:0 auto;padding:clamp(2.25rem,5vw,4rem) var(--gutter) var(--space-3xl);display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,19rem);gap:clamp(2rem,5vw,5rem);justify-content:start}
.page-grid.solo{grid-template-columns:minmax(0,var(--measure))}
.rail{position:sticky;top:var(--space-lg);align-self:start;display:grid;gap:var(--space-lg)}
.rail-box{border:1px solid var(--color-line);background:var(--color-black-2);padding:var(--space-lg)}
.fh{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600;margin:0 0 var(--space-sm)}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.toc a{display:block;text-decoration:none;font-size:.92rem;line-height:1.35;padding:.32rem 0;color:var(--color-text-dim)}
.toc a:hover{color:var(--color-yellow)}
.prose{font-size:1.125rem;line-height:1.72;min-width:0}
.prose>*:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 1.15rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin:0 0 .45rem}
.prose li::marker{color:var(--color-yellow)}
.prose a{text-decoration:underline;text-decoration-color:var(--color-yellow);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color var(--dur-fast) var(--ease-out)}
.prose a:hover{color:var(--color-yellow)}
.prose strong{font-weight:700;color:var(--color-text)}
.prose h2{font-family:var(--font-display);font-style:italic;font-weight:850;font-stretch:74%;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.005em;margin:3.25rem 0 1rem;scroll-margin-top:5rem}
.prose h3{font-family:var(--font-caption);font-weight:800;font-stretch:94%;font-size:1.28rem;line-height:1.25;margin:2.1rem 0 .65rem;scroll-margin-top:5rem}
.prose blockquote{margin:2rem 0;padding:0 0 0 1.25rem;border-left:4px solid var(--color-yellow)}
.prose blockquote p{font-family:var(--font-caption);font-weight:700;font-stretch:96%;font-size:1.3rem;line-height:1.4;margin:0 0 .5rem}
.prose blockquote cite{display:block;font-family:var(--font-mono);font-style:normal;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint)}
.prose hr{border:0;border-top:1px solid var(--color-line);margin:2.5rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0 2rem;font-size:.98rem}
.prose th,.prose td{text-align:left;padding:.65rem .75rem;border-bottom:1px solid var(--color-line);vertical-align:top}
.prose th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600}
.table-scroll{overflow-x:auto;margin:1.5rem 0 2rem}
.table-scroll table{margin:0;min-width:34rem}
.prose figure{margin:2rem 0}
.prose figure img{width:100%;height:auto}
.prose figcaption,.prose .figcap{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;color:var(--color-text-faint);margin-top:.6rem;line-height:1.5}
.answer{font-size:1.24rem;line-height:1.6;color:var(--color-text);margin:0 0 1.5rem}
.facts{margin:1.75rem 0 2.25rem;border-top:2px solid var(--color-yellow);display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr)}
.facts dt,.facts dd{margin:0;padding:.7rem 0;border-bottom:1px solid var(--color-line)}
.facts dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);padding-right:1rem;padding-top:.92rem}
.facts dd{font-size:1rem;line-height:1.5}
.note{background:var(--color-black-2);border:1px solid var(--color-line);border-left:4px solid var(--color-yellow);padding:1rem 1.2rem;margin:1.75rem 0;font-size:1rem}
.note p:last-child{margin-bottom:0}
.sources{font-size:.92rem;line-height:1.55;color:var(--color-text-dim);padding-left:1.6rem}
.sources li{margin-bottom:.6rem}
.sources li::marker{font-family:var(--font-mono);font-size:.78em;color:var(--color-text-faint)}
.updated{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint);margin-top:2rem}

/* video facade */
.yt{position:relative;display:block;aspect-ratio:16/9;background:var(--color-black-2);overflow:hidden;margin:2rem 0 .6rem;cursor:pointer;border:0;padding:0;width:100%;text-decoration:none}
.yt img{width:100%;height:100%;object-fit:cover;transition:opacity var(--dur) var(--ease-out)}
.yt .yt-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:var(--color-yellow);display:grid;place-items:center;box-shadow:0 10px 40px oklch(10% 0 0 / .5);transition:transform var(--dur-fast) var(--ease-out)}
.yt .yt-btn svg{width:28px;height:28px;color:var(--color-ink);margin-left:4px}
.yt:hover .yt-btn{transform:translate(-50%,-50%) scale(1.06)}
.yt:hover img{opacity:.86}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-cap{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-faint);margin:0 0 2rem}

/* home sections */
.band{border-top:1px solid var(--color-line)}
.band-in{max-width:1440px;margin:0 auto;padding:clamp(3.25rem,7vw,6rem) var(--gutter)}
.h-sec{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:72%;font-size:clamp(2.3rem,5vw,4.2rem);line-height:.92;margin:0 0 var(--space-md);letter-spacing:-.005em;max-width:20ch}
.sec-lede{max-width:64ch;color:var(--color-text-dim);margin:0 0 var(--space-2xl);font-size:1.08rem}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.portrait{margin:0;position:relative}
.portrait img{width:100%;height:auto;aspect-ratio:4/4.6;object-fit:cover;object-position:74% 20%}
.portrait figcaption{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:var(--color-text-faint);margin-top:.6rem}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}
.card{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:var(--space-lg);background:var(--color-black-2);border:1px solid var(--color-line);text-decoration:none;min-height:15rem;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.card:hover{border-color:var(--color-yellow);background:var(--color-black-3)}
.card .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint)}
.card .t{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:72%;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:.95}
.card .d{color:var(--color-text-dim);font-size:.98rem;line-height:1.55;margin-top:auto}
.card .go{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-yellow)}
.card .bar{font-size:1.02rem;align-self:flex-start}
.tl{list-style:none;margin:0;padding:0;border-top:2px solid var(--color-yellow)}
.tl li{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--space-lg);padding:1.05rem 0;border-bottom:1px solid var(--color-line)}
.tl time{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--color-yellow);font-weight:600;padding-top:.2rem}
.tl .ev{font-size:1.04rem;line-height:1.55}
.tl .ev b{font-weight:700}
.tl .src{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-faint);margin-top:.35rem}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
.q{margin:0;padding:var(--space-lg) var(--space-lg) var(--space-lg) 1.4rem;border-left:4px solid var(--color-yellow);background:var(--color-black-2)}
.q p{font-family:var(--font-caption);font-weight:700;font-stretch:96%;font-size:1.22rem;line-height:1.4;margin:0 0 .8rem}
.q footer{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint)}
.q footer a{color:var(--color-text-dim)}
.faq-list{display:grid;gap:0;border-top:1px solid var(--color-line)}
.faq-item{padding:1.4rem 0;border-bottom:1px solid var(--color-line)}
.faq-item h3{font-family:var(--font-caption);font-weight:800;font-stretch:94%;font-size:1.22rem;line-height:1.3;margin:0 0 .5rem}
.faq-item p{margin:0;color:var(--color-text-dim);max-width:70ch}
.faq-item a{text-decoration-color:var(--color-yellow);text-underline-offset:3px}
.follow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md)}
.follow a{display:flex;flex-direction:column;gap:.35rem;padding:var(--space-lg);border:1px solid var(--color-line);text-decoration:none;background:var(--color-black-2);transition:border-color var(--dur-fast) var(--ease-out)}
.follow a:hover{border-color:var(--color-yellow)}
.follow b{font-family:var(--font-caption);font-weight:800;font-size:1.15rem}
.follow span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--color-text-faint)}
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.posts li{border-bottom:1px solid var(--color-line)}
.posts a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 2rem;align-items:baseline;padding:1.15rem 0;text-decoration:none}
.posts a:hover .pt{color:var(--color-yellow)}
.posts .pt{font-family:var(--font-caption);font-weight:800;font-stretch:94%;font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.3;transition:color var(--dur-fast) var(--ease-out)}
.posts .pd{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint);white-space:nowrap}
.posts .px{grid-column:1/-1;color:var(--color-text-dim);font-size:.98rem;line-height:1.55;max-width:80ch}

/* signup */
.signup{background:var(--color-yellow);color:var(--color-ink)}
.signup-in{max-width:1440px;margin:0 auto;padding:clamp(2.75rem,6vw,4.5rem) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.signup h2{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:72%;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:.92;margin:0 0 .6rem}
.signup p{margin:0;font-size:1.05rem;color:var(--color-ink-2);max-width:48ch}
.sform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem}
.sform label{grid-column:1/-1;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.sform input[type=email]{width:100%;min-width:0;background:oklch(98% 0.03 104);border:2px solid var(--color-ink);padding:.9rem 1rem;font-size:1.05rem;color:var(--color-ink);border-radius:0}
.sform input[type=email]::placeholder{color:oklch(45% 0.03 100)}
.sform input[type=email]:focus-visible{outline:3px solid var(--color-ink);outline-offset:2px}
.sform input[aria-invalid="true"]{border-color:var(--color-rec)}
.sform button{background:var(--color-ink);color:var(--color-yellow);border:2px solid var(--color-ink);padding:.9rem 1.3rem;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out)}
.sform button:hover{background:oklch(25% 0.01 90)}
.sform button:active{transform:translateY(1px)}
.sform button:focus-visible{outline:3px solid var(--color-ink);outline-offset:2px}
.sform button[disabled]{opacity:.6;cursor:progress}
.sform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sform .msg{grid-column:1/-1;margin:.2rem 0 0;font-size:.95rem;min-height:1.5em;font-weight:600}
.sform .msg[data-state="error"]{color:oklch(42% 0.2 28)}
.fine{grid-column:1/-1;font-size:.8rem !important;color:var(--color-ink-2) !important}

/* footer (Ft5 statement) */
.foot{border-top:1px solid var(--color-line)}
.foot-in{max-width:1440px;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) var(--gutter) var(--space-xl)}
.foot-statement{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:72%;font-size:clamp(2rem,5vw,4.4rem);line-height:.94;margin:0 0 var(--space-xl);max-width:22ch}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:var(--space-xl);padding-top:var(--space-xl);border-top:1px solid var(--color-line)}
.foot-grid p{margin:0 0 .8rem;color:var(--color-text-dim);font-size:.95rem;max-width:52ch}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.foot-grid ul a{text-decoration:none;color:var(--color-text-dim);font-size:.95rem;display:inline-block;padding:.22rem 0;white-space:nowrap}
.foot-grid ul a:hover{color:var(--color-yellow)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;margin-top:var(--space-2xl);font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint)}
.foot-base a{color:var(--color-text-faint)}

/* 404 */
.lost{min-height:70vh;display:grid;align-content:center}

@media (max-width:1100px){
  .page-grid{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .rail .toc-box{display:none}
  .follow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav{display:none}
  .head .menu-btn{margin-left:auto}
  .split{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .signup-in{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-grid>div:first-child{grid-column:1/-1}
  .frame-credit{display:none}
  .shero-in{grid-template-columns:minmax(0,1fr)}
  .shero figure{justify-self:stretch;max-width:none}
  .shero figure img{max-height:46vh;width:100%}
  .frame>picture img{object-position:68% 30%}
}
@media (min-width:901px){.head .menu-btn{display:none}}
@media (max-width:560px){
  .fan{display:none}
  .h-mega{font-size:clamp(3.4rem,17vw,4.7rem)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts dt{padding-bottom:0;border-bottom:0}
  .facts dd{padding-top:.2rem}
  .tl li{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .follow{grid-template-columns:minmax(0,1fr)}
  .posts a{grid-template-columns:minmax(0,1fr)}
  .sform{grid-template-columns:minmax(0,1fr)}
  .play .pl{display:none}
  .play .ps{display:inline}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}
.play .ps{display:none}
@media (max-width:560px){.play .ps{display:inline}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}
