/* DERP Productions — site styles
   Palette pulled from the brand posters: burnt-orange ember on raw black steel,
   with the logo's blue arc used only for radio / software content. */

@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-800-italic.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --black:#050506;
  --plate:#121315;
  --plate-2:#1a1c1f;
  --line:#2b2e33;
  --line-hot:#4a3424;
  --bone:#efe9e0;
  --ash:#a29b92;
  --ash-dim:#6f6a64;
  --ember:#e8742a;
  --molten:#ff9b3d;
  --gold:#d8a13a;
  --signal:#4cb4ff;
  --signal-dim:#1d4d72;

  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Segoe UI",system-ui,sans-serif;

  --wrap:1240px;
  --gutter:clamp(20px,4vw,48px);
  --r-sm:3px;
  --r-md:6px;
  --slant:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--black);color:var(--bone);font:400 1.0625rem/1.6 var(--body);
  background-image:linear-gradient(180deg,#0b0b0c 0,var(--black) 600px);min-height:100vh;display:flex;flex-direction:column}
main{flex:1;display:block}
img{max-width:100%;display:block}
a{color:var(--molten);text-underline-offset:3px}
a:hover{color:#ffc07a}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;font-style:italic;line-height:.95;letter-spacing:-.005em;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(3rem,7.4vw,6.4rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1}
h4{font-size:1.25rem;font-style:normal;font-weight:700}
:focus-visible{outline:2px solid var(--molten);outline-offset:3px}
::selection{background:var(--ember);color:#000}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.lede{font-size:clamp(1.1rem,1.4vw,1.25rem);color:#d6cfc5;max-width:58ch}
.muted{color:var(--ash)}
.small{font-size:.9rem}
.skip{position:absolute;left:-999px;top:8px;background:var(--ember);color:#000;padding:8px 14px;z-index:100;font-weight:600}
.skip:focus{left:8px}

/* Kicker: small condensed line that names the thing the section is about */
.kicker{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.02em;color:var(--molten);margin:0 0 .7rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";width:28px;height:2px;background:currentColor;transform:skewX(-30deg)}
.radio .kicker,.kicker.radio{color:var(--signal)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background-color:#060607;border-bottom:1px solid #1b1c1f}
.site-header .wrap{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone);flex-shrink:0}
.brand img{height:50px;width:auto;margin:-4px 0}
.brand span{white-space:nowrap;font-family:var(--display);font-weight:800;font-style:italic;font-size:1.45rem;letter-spacing:.01em;line-height:1}
.brand span b{color:var(--ember);font-weight:800}
.nav{margin-left:auto;display:flex;gap:2px}
.nav a{font-family:var(--display);font-weight:700;font-size:1.08rem;color:#cfc8be;text-decoration:none;padding:10px 14px;border-radius:var(--r-sm);position:relative}
.nav a:hover{color:#fff;background:#16171a}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--ember);transform:skewX(-30deg)}
.nav a.radio[aria-current="page"]::after{background:var(--signal)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.1rem;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-sm)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--ember);color:var(--molten)}
.menu:not([open]) nav{display:none}
.menu nav{position:fixed;left:0;right:0;top:72px;max-height:calc(100vh - 72px);overflow:auto;background:#08080a;border-bottom:1px solid var(--line);padding:8px var(--gutter) 20px;display:grid}
.menu nav a{font-family:var(--display);font-weight:700;font-size:1.6rem;font-style:italic;color:var(--bone);text-decoration:none;padding:10px 0;border-bottom:1px solid #18191c}
.menu nav a[aria-current="page"]{color:var(--molten)}
@media (max-width:900px){.nav{display:none}.menu{display:block}}
@media (max-width:400px){.brand span{font-size:1.2rem}.brand img{height:40px}}

/* ---------- Buttons ---------- */
.btn{--bg:var(--ember);--fg:#120800;display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-style:italic;font-size:1.25rem;letter-spacing:.01em;
  padding:14px 30px 14px 22px;background:var(--bg);color:var(--fg);text-decoration:none;border:0;cursor:pointer;clip-path:var(--slant);transition:background .15s, transform .15s}
.btn:hover{--bg:var(--molten);color:var(--fg)}
.btn:active{transform:translateY(1px)}
.btn.radio{--bg:var(--signal);--fg:#00131f}
.btn.radio:hover{--bg:#8fd0ff}
.btn.ghost{--bg:transparent;--fg:var(--bone);box-shadow:inset 0 0 0 1.5px #3a3d43;clip-path:none;border-radius:var(--r-sm);padding:13px 22px}
.btn.ghost:hover{--bg:#16171a;box-shadow:inset 0 0 0 1.5px #5a5e66}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-note{font-size:.9rem;color:var(--ash);margin-top:12px}

/* ---------- Sections ---------- */
.section{padding:clamp(72px,10vw,128px) 0}
.section.tight{padding:clamp(48px,6vw,80px) 0}
.section + .section.join{padding-top:0}
.rule{border:0;border-top:1px solid #1b1c1f;margin:0}
.head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.head p{color:#cfc8be}

/* Blueprint dimension line — borrowed from the poster callouts */
.dim{position:relative;height:18px;margin:0 0 28px;color:var(--ash-dim);font:600 .82rem/1 var(--display);letter-spacing:.06em}
.dim::before{content:"";position:absolute;left:0;right:0;top:8px;border-top:1px solid #34373c}
.dim::after{content:"";position:absolute;left:0;right:0;top:3px;height:11px;border-left:1px solid #34373c;border-right:1px solid #34373c}
.dim span{position:relative;background:var(--black);padding:0 10px;margin-left:24px;z-index:1}

/* ---------- HERO (CB fork, home) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid #15171a;isolation:isolate}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:min(820px,calc(100vh - 72px));padding-top:56px;padding-bottom:72px}
.hero-copy{position:relative;z-index:3}
.hero h1{margin-bottom:.25em;font-size:clamp(3rem,5.8vw,5.4rem)}
.hero h1 .line2{display:block;color:var(--signal);font-size:.62em;line-height:1;margin-top:.12em}
.hero .lede{margin-bottom:30px}
.version-tag{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:22px;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ash)}
.version-tag strong{font-size:1.5rem;font-style:italic;color:var(--bone);font-weight:800;padding:2px 12px 2px 8px;background:var(--signal-dim);clip-path:var(--slant)}

/* waterfall background */
.waterfall{position:absolute;inset:0 0 0 38%;z-index:0;pointer-events:none}
.waterfall canvas{width:100%;height:100%;display:block;opacity:.7}
.waterfall{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.waterfall::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--black) 0%,rgba(5,5,6,0) 30%)}
.freq-ruler{position:absolute;left:0;right:0;top:0;height:26px;z-index:2;border-bottom:1px solid rgba(76,180,255,.25);display:flex;justify-content:space-between;padding:0 8% 0 5%;font:600 .78rem/26px var(--display);color:rgba(140,200,255,.6);letter-spacing:.05em}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:64px}.waterfall{inset:0;-webkit-mask-image:none;mask-image:none}.waterfall::before{background:linear-gradient(0deg,var(--black) 10%,rgba(5,5,6,.75) 60%,rgba(5,5,6,.55))}}

/* app window frame for screenshots */
.app-window{position:relative;z-index:2;background:#0d0f12;border:1px solid #2b3440;border-radius:var(--r-md);box-shadow:0 30px 80px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),0 0 60px -10px rgba(76,180,255,.18);overflow:hidden}
.app-window .bar{display:flex;align-items:center;gap:10px;height:32px;padding:0 12px;background:linear-gradient(#1b2028,#14181e);border-bottom:1px solid #263040;font:600 .85rem/1 var(--display);color:#9fb6cc}
.app-window .bar i{width:10px;height:10px;border-radius:50%;background:#2f3a47}
.app-window .bar i:first-child{background:var(--ember)}
.app-window .bar span{margin-left:6px}
.app-window img{width:100%;height:auto}
.hero .app-window{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);transform-origin:left center}
@media (max-width:900px){.hero .app-window{transform:none}}

/* Screenshot slot: hidden online when the image is missing; shows a drop-in hint locally */
.shot{position:relative}
.shot.missing{display:none}
.is-local .shot.missing{display:block}
.shot.missing img{display:none}
.shot .hint{display:none}
.is-local .shot.missing .hint{display:grid;place-content:center;gap:6px;text-align:center;aspect-ratio:16/10;padding:24px;color:#8fb7da;font-size:.95rem;
  background:repeating-linear-gradient(135deg,#0f141a 0 12px,#0c1015 12px 24px)}
.shot .hint code{color:#fff;font-size:.9rem;background:#000;padding:2px 6px;border-radius:3px}
.shot .hint b{font-family:var(--display);font-size:1.3rem;font-style:italic;color:#cfe6ff}

/* ---------- Fact strip ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,36px) clamp(28px,3vw,40px) 0}
.fact + .fact{padding-left:clamp(20px,2.4vw,36px);border-left:1px solid var(--line)}
.fact h3{color:var(--bone);margin-bottom:.45em}
.fact p{color:var(--ash);margin:0;max-width:40ch}
.fact .glyph{width:34px;height:34px;color:var(--signal);margin-bottom:16px}
@media (max-width:820px){.facts{grid-template-columns:1fr}.fact,.fact+.fact{padding:26px 0;border-left:0}.fact+.fact{border-top:1px solid var(--line)}}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gallery .shot:first-child{grid-column:1/-1}
.gallery button{all:unset;cursor:zoom-in;display:block;width:100%}
.gallery button:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.gallery figcaption{margin-top:10px;color:var(--ash);font-size:.95rem}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}}@media (max-width:520px){.gallery{grid-template-columns:1fr}}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(1400px,94vw);max-height:92vh}
dialog.lightbox::backdrop{background:rgba(0,0,0,.88)}
dialog.lightbox img{max-height:88vh;width:auto;margin:auto;border:1px solid #2b3440}
dialog.lightbox form{position:absolute;top:-6px;right:-6px}
dialog.lightbox button{font:700 1rem var(--display);background:var(--bone);color:#000;border:0;padding:8px 14px;cursor:pointer}

/* ---------- Credits / licence panel ---------- */
.credit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.credit .panel{background:var(--plate);border:1px solid var(--line);border-left:3px solid var(--signal);padding:clamp(22px,3vw,34px);border-radius:0 var(--r-md) var(--r-md) 0}
.credit .panel p{color:#d4cdc3;overflow-wrap:anywhere}
.credit .panel p:last-child{margin:0}
@media (max-width:820px){.credit{grid-template-columns:1fr}}

/* ---------- Hardware teaser ---------- */
.forge{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid #1e1712}
.forge::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(90deg,rgba(5,5,6,.96) 0%,rgba(5,5,6,.78) 45%,rgba(5,5,6,.55) 100%),linear-gradient(0deg,var(--black) 0%,rgba(5,5,6,0) 40%),url(../img/bg/bg-hardware.jpg),radial-gradient(ellipse at 80% 30%,#3a1d0a,transparent 60%);
  background-size:cover;background-position:center}
.forge .split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.forge h2{max-width:14ch}
.poster-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-color:var(--ember) #16171a}
.poster-rail a{flex:0 0 clamp(170px,19vw,230px);scroll-snap-align:start;display:block;border:1px solid #2a2420;transition:border-color .15s, transform .2s}
.poster-rail a:hover{border-color:var(--ember);transform:translateY(-3px)}
.poster-rail img{aspect-ratio:4/5;object-fit:cover;width:100%}
@media (max-width:900px){.forge .split{grid-template-columns:1fr}}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #17181b;padding:clamp(72px,10vw,130px) 0 clamp(56px,7vw,90px)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;
  background-image:linear-gradient(90deg,rgba(5,5,6,.97) 10%,rgba(5,5,6,.7) 60%,rgba(5,5,6,.5)),linear-gradient(0deg,var(--black),rgba(5,5,6,0) 50%),var(--hero-img,none),radial-gradient(ellipse at 85% 10%,rgba(232,116,42,.22),transparent 55%)}
.page-hero.radio::before{background-image:linear-gradient(90deg,rgba(5,5,6,.97) 10%,rgba(5,5,6,.7) 60%,rgba(5,5,6,.5)),linear-gradient(0deg,var(--black),rgba(5,5,6,0) 50%),var(--hero-img,none),radial-gradient(ellipse at 85% 10%,rgba(76,180,255,.2),transparent 55%)}
.page-hero[data-bg=cb-fork]{--hero-img:url(../img/bg/bg-cb-fork.jpg)}
.page-hero[data-bg=hardware]{--hero-img:url(../img/bg/bg-hardware.jpg)}
.page-hero[data-bg=engineering]{--hero-img:url(../img/bg/bg-engineering.jpg)}
.page-hero[data-bg=shipping]{--hero-img:url(../img/bg/bg-shipping.jpg)}
.page-hero[data-bg=contact]{--hero-img:url(../img/bg/bg-contact.jpg)}
.page-hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem);max-width:15ch}
.page-hero .lede{margin-bottom:0}
.page-hero .btn-row{margin-top:30px}

/* ---------- Download panel ---------- */
.dl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
.dl-main{background:linear-gradient(160deg,#0f1823,#0b0e12 60%);border:1px solid #233142;border-radius:var(--r-md);padding:clamp(24px,3.4vw,40px)}
.dl-main h2{margin-bottom:.2em}
.dl-meta{display:flex;flex-wrap:wrap;gap:6px 22px;color:#8ea6bd;margin:0 0 24px;font-size:.95rem}
.dl-meta:empty{display:none}
.older{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.older li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.older b{font-family:var(--display);font-size:1.3rem;font-style:italic}
.older span{color:var(--ash);font-size:.92rem}
@media (max-width:820px){.dl{grid-template-columns:1fr}}

/* Steps — a real sequence, so numbered */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-style:italic;font-size:2.6rem;line-height:.9;color:var(--ember)}
.radio .steps li::before{color:var(--signal)}
.steps h4{margin:2px 0 4px}
.steps p{margin:0;color:var(--ash)}

/* two-col text block */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px)}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid #1d1f23;color:#d6cfc5}
.ticks li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:2px;background:var(--ember);transform:skewX(-30deg)}
.radio .ticks li::before{background:var(--signal)}

/* ---------- Hardware lineups ---------- */
.notice{display:flex;gap:14px;align-items:flex-start;background:#140d08;border:1px solid var(--line-hot);border-radius:var(--r-md);padding:18px 22px;color:#e8d4c2;max-width:820px}
.notice svg{flex-shrink:0;width:22px;height:22px;color:var(--molten);margin-top:2px}
.notice p{margin:0}
.lineup-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.lineup-nav a{font-family:var(--display);font-weight:700;font-style:italic;font-size:1.15rem;color:var(--bone);text-decoration:none;padding:8px 18px 8px 14px;background:#141518;clip-path:var(--slant)}
.lineup-nav a:hover{background:var(--ember);color:#120800}

.lineup{padding:clamp(64px,8vw,104px) 0;border-top:1px solid #18191c}
.lineup-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:36px}
.lineup-head h2{font-size:clamp(3rem,7vw,5.6rem);margin:0;line-height:.85}
.lineup-head h2 small{display:block;font-size:.34em;color:var(--molten);font-style:italic;margin-top:.3em;line-height:1.1}
.lineup-head p{color:var(--ash);max-width:52ch;margin:0}
.lineup-label{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ash);border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-sm);white-space:nowrap}
@media (max-width:700px){.lineup-head{grid-template-columns:1fr}.lineup-label{justify-self:start}}
.lineup-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,56px);align-items:start}
.lineup-body.no-poster{grid-template-columns:1fr}
.lineup-poster{position:sticky;top:96px}
.lineup-poster img{border:1px solid #2a2420}
@media (max-width:900px){.lineup-body{grid-template-columns:1fr}.lineup-poster{position:static;max-width:200px;order:-1}}

.product{border-top:1px solid var(--line)}
.product:last-child{border-bottom:1px solid var(--line)}
.product summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:16px;align-items:center;padding:20px 4px}
.product summary::-webkit-details-marker{display:none}
.product summary:hover h3{color:var(--molten)}
.product summary h3{margin:0;font-size:clamp(1.45rem,2.2vw,1.85rem);transition:color .12s}
.product summary .focus{grid-column:1/2;color:var(--ash);font-size:.97rem;margin-top:4px}
.product summary .tw{display:flex;flex-direction:column}
.status{font-family:var(--display);font-weight:700;font-size:.95rem;color:#e6c79a;background:#1d150d;border:1px solid #3d2a17;padding:4px 10px;border-radius:var(--r-sm);white-space:nowrap}
.chev{width:22px;height:22px;color:var(--ash);transition:transform .2s}
.product[open] .chev{transform:rotate(180deg);color:var(--molten)}
.product-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:4px 4px 28px}
.product-body.with-img{grid-template-columns:200px minmax(0,1.2fr) minmax(0,1fr)}
.product-body img{border:1px solid #2a2420}
.product-body p{color:#d6cfc5;margin:0}
.product-body .ticks li{padding:7px 0 7px 24px;font-size:.97rem}
.product-body .ticks li::before{top:16px}
@media (max-width:760px){.product summary{grid-template-columns:1fr 28px}.product summary .status{grid-column:1;justify-self:start;grid-row:2}.product summary .chev{grid-row:1;grid-column:2}.product-body,.product-body.with-img{grid-template-columns:1fr}.product-body img{max-width:220px}}

/* ---------- Engineering ---------- */
.eng{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,88px);padding:clamp(56px,7vw,88px) 0;border-top:1px solid #18191c}
.eng:first-child{border-top:0}
.eng h2{font-size:clamp(2rem,3.6vw,3rem)}
.eng .body p{color:#d6cfc5}
@media (max-width:820px){.eng{grid-template-columns:1fr}}
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;counter-reset:s}
.loop div{counter-increment:s;padding:22px 20px 22px 0;border-top:2px solid var(--ember);position:relative}
.loop div + div{padding-left:20px}
.loop div::before{content:counter(s);display:block;font-family:var(--display);font-weight:800;font-style:italic;font-size:2.2rem;color:var(--ember);line-height:1;margin-bottom:8px}
.loop h4{margin:0 0 4px}
.loop p{margin:0;color:var(--ash);font-size:.95rem}
@media (max-width:820px){.loop{grid-template-columns:1fr 1fr}.loop div:nth-child(3){padding-left:0}}

/* ---------- Forms (shipping + contact) ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.form-grid .full{grid-column:1/-1}
label{display:grid;gap:6px;font-family:var(--display);font-weight:700;font-size:1.02rem;color:#d6cfc5}
input,select,textarea{font:400 1rem/1.4 var(--body);color:var(--bone);background:#0d0e10;border:1px solid #33363c;border-radius:var(--r-sm);padding:12px 14px;width:100%;color-scheme:dark}
input:hover,select:hover,textarea:hover{border-color:#4a4e55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(232,116,42,.22)}
select option{background:#0d0e10;color:var(--bone)}
textarea{min-height:150px;resize:vertical}
.check{display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:500;font-size:1rem}
.check input{width:18px;height:18px;accent-color:var(--ember)}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}

.calc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
.calc-out{position:sticky;top:96px;background:var(--plate);border:1px solid var(--line);border-top:3px solid var(--ember);border-radius:0 0 var(--r-md) var(--r-md);padding:28px}
.calc-out .price{font-family:var(--display);font-weight:800;font-style:italic;font-size:clamp(3rem,6vw,4.4rem);line-height:1;margin:6px 0 4px}
.calc-out dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:22px 0;padding-top:18px;border-top:1px solid var(--line)}
.calc-out dt{color:var(--ash)}
.calc-out dd{margin:0;font-weight:600;text-align:right}
@media (max-width:860px){.calc{grid-template-columns:1fr}.calc-out{position:static}}

.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.contact-info dl{margin:24px 0 0;display:grid;gap:18px}
.contact-info dt{font-family:var(--display);font-weight:700;color:var(--ash);font-size:1rem}
.contact-info dd{margin:2px 0 0;font-size:1.1rem;word-break:break-word}
.form-status{margin-top:14px;min-height:1.6em;color:var(--ash)}
.form-status.ok{color:#9ee3a8}
.form-status.err{color:#ff8f7a}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid #1b1c1f;background:#030304;padding:56px 0 36px;margin-top:auto}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.site-footer img{height:54px;width:auto;margin-bottom:14px}
.site-footer p{color:var(--ash);font-size:.95rem;max-width:42ch}
.site-footer h4{font-size:1.1rem;color:var(--ash);margin-bottom:10px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer a{color:#d6cfc5;text-decoration:none;overflow-wrap:anywhere}
.site-footer a:hover{color:var(--molten)}
.site-footer .legal{grid-column:1/-1;border-top:1px solid #16171a;padding-top:22px;margin-top:8px;color:var(--ash-dim);font-size:.88rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
@media (max-width:760px){.site-footer .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.site-footer .wrap > div:first-child{grid-column:1/-1}}

/* ---------- Load moment: hero only ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > *:nth-child(2){animation-delay:.06s}
  .hero-copy > *:nth-child(3){animation-delay:.12s}
  .hero-copy > *:nth-child(4){animation-delay:.18s}
  .hero .app-window{animation:slide .9s .15s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}}
  @keyframes slide{from{opacity:0;transform:perspective(1600px) rotateY(-14deg) translateX(40px)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- v2 additions ---------- */
figure.shot{margin:0}
.notice.radio{background:#0a1520;border-color:#1f4262;color:#d5e6f5}
.notice.radio svg{color:var(--signal)}
.notice strong{color:#fff}

.credit{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.credits-list{margin:0 0 22px;border-top:1px solid var(--line)}
.credits-list > div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.credits-list dt{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.35rem;line-height:1.1;color:var(--bone)}
.credits-list dd{margin:0;color:#d6cfc5}
.credits-list .links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px;font-size:.95rem}
.credits-list .links a{color:var(--signal)}
.credits-list .links a:hover{color:#9fd6ff}
@media (max-width:520px){.credits-list > div{grid-template-columns:1fr;gap:4px}}

.notes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.notes h3{color:var(--signal);font-size:1.6rem}
.notes .ticks li{padding:12px 0 12px 26px}
.notes .ticks li::before{top:22px}
.notes strong{color:#fff;font-weight:600}
@media (max-width:820px){.notes{grid-template-columns:1fr}}

code{font-family:Consolas,"Cascadia Mono",monospace;font-size:.88em;background:#0d1117;border:1px solid #232a33;padding:1px 6px;border-radius:3px;color:#cfe6ff}

details.release{border-top:1px solid var(--line)}
details.release:last-child{border-bottom:1px solid var(--line)}
details.release summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 2px}
details.release summary::-webkit-details-marker{display:none}
details.release summary b{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.5rem}
details.release summary:hover b{color:var(--signal)}
details.release[open] .chev{transform:rotate(180deg);color:var(--signal)}
details.release .ticks{padding-bottom:18px}
details.release .ticks li{font-size:.98rem}

.page-hero.has-logo .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center}
.hero-logo{width:100%;max-width:520px;height:auto;justify-self:end;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
@media (max-width:900px){.page-hero.has-logo .wrap{grid-template-columns:1fr}.hero-logo{justify-self:start;max-width:340px;order:-1;margin-bottom:8px}}

.site-footer img.footer-logo{height:auto;width:240px;max-width:100%;margin:0 0 10px -8px}
.gallery .shot:not(:first-child) img{aspect-ratio:4/3;object-fit:cover;object-position:left top;width:100%;border:1px solid #1f2a36;background:#0d0f12}
.gallery .shot:first-child img{border:1px solid #1f2a36}

/* ---------- v3: restored pieces ---------- */
.top-bar{background:#020203;border-bottom:1px solid #141518;font-size:.88rem;color:var(--ash)}
.top-bar .wrap{display:flex;align-items:center;gap:26px;height:34px}
.top-bar a,.top-bar .loc{display:inline-flex;align-items:center;gap:7px;color:var(--ash);text-decoration:none}
.top-bar a:hover{color:var(--molten)}
.top-bar svg{width:14px;height:14px;flex-shrink:0}
.top-bar .tag{margin-left:auto;font-family:var(--display);font-weight:700;font-style:italic;color:var(--ember);font-size:.98rem}
@media (max-width:720px){.top-bar .loc,.top-bar .tag{display:none}.top-bar a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

.header-cta{flex-shrink:0;font-family:var(--display);font-weight:800;font-style:italic;font-size:1.05rem;color:var(--molten);text-decoration:none;padding:8px 18px 8px 14px;box-shadow:inset 0 0 0 1.5px var(--ember);clip-path:var(--slant);margin-left:6px}
.header-cta:hover{background:var(--ember);color:#120800}
@media (max-width:900px){.header-cta{margin-left:auto}.menu{margin-left:10px}}
@media (max-width:420px){.header-cta{display:none}.menu{margin-left:auto}}

.footer-tag{color:var(--bone);font-family:var(--display);font-style:italic;font-weight:800;font-size:1.1rem;display:block;margin-bottom:4px}

.small-btn{font-size:1rem;padding:9px 16px;margin-top:18px}
.product-body > div p{margin:0}

.stance{border-top:1px solid #18191c}
.stance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ember)}
.stance-grid article{padding:26px 28px 6px 0}
.stance-grid article + article{padding-left:28px;border-left:1px solid var(--line)}
.stance-grid h3{margin-bottom:.45em}
.stance-grid p{color:var(--ash);margin:0}
@media (max-width:820px){.stance-grid{grid-template-columns:1fr}.stance-grid article,.stance-grid article+article{padding:22px 0;border-left:0}.stance-grid article+article{border-top:1px solid var(--line)}}

.about-cta{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center;border-top:1px solid #18191c;padding-top:clamp(48px,6vw,80px)}
.about-cta img{width:100%;max-width:520px;height:auto}
@media (max-width:820px){.about-cta{grid-template-columns:1fr}.about-cta img{max-width:340px}}

/* light streak + glow from the original hero design */
.page-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-6%;top:12%;width:min(820px,70vw);height:130px;
  background:linear-gradient(90deg,transparent,rgba(232,116,42,.55) 40%,rgba(255,214,154,.65) 55%,transparent);filter:blur(28px);opacity:.3;transform:rotate(-24deg)}
.page-hero.radio::after{background:linear-gradient(90deg,transparent,rgba(76,180,255,.45) 40%,rgba(190,230,255,.5) 55%,transparent)}

/* new backgrounds: lighter overlay so the artwork shows */
.page-hero[data-bg=contact]::before{background-image:linear-gradient(90deg,rgba(5,5,6,.82) 0%,rgba(5,5,6,.5) 50%,rgba(5,5,6,.05) 100%),linear-gradient(0deg,var(--black),rgba(5,5,6,0) 45%),url(../img/bg/bg-contact.jpg);background-position:center 40%}
.page-hero[data-bg=engineering]::before{background-image:linear-gradient(90deg,rgba(5,5,6,.86) 0%,rgba(5,5,6,.55) 55%,rgba(5,5,6,.15) 100%),linear-gradient(0deg,var(--black),rgba(5,5,6,0) 45%),url(../img/bg/bg-engineering.jpg)}
.page-hero[data-bg=contact],.page-hero[data-bg=engineering]{min-height:min(560px,70vh);display:flex;align-items:center}
.page-hero[data-bg=contact] .wrap,.page-hero[data-bg=engineering] .wrap{width:100%}
.page-hero[data-bg=contact]::after,.page-hero[data-bg=engineering]::after,.page-hero[data-bg=hardware]::after{display:none}
.header-cta{clip-path:none;border-radius:var(--r-sm);padding:8px 16px}
.page-hero[data-bg=engineering]::before{background-image:linear-gradient(90deg,rgba(5,5,6,.74) 0%,rgba(5,5,6,.5) 55%,rgba(5,5,6,.1) 100%),linear-gradient(0deg,var(--black),rgba(5,5,6,0) 40%),url(../img/bg/bg-engineering.jpg)}
.head p.kicker{color:var(--molten)}
.radio .head p.kicker,.head p.kicker.radio{color:var(--signal)}
.page-hero[data-bg=about]{--hero-img:url(../img/bg/bg-about.jpg)}

/* ---------- v4: CB Fork first, Performance Parts as its own section ---------- */
.header-cta{display:inline-flex;align-items:center;gap:8px;color:#00131f;background:var(--signal);box-shadow:none;font-size:1.02rem;padding:8px 16px}
.header-cta svg{width:17px;height:17px}
.header-cta:hover{background:#8fd0ff;color:#00131f}
@media (max-width:1100px) and (min-width:901px){.nav a{padding:10px 10px}}
@media (max-width:520px){.header-cta [data-dl-label]{font-size:0}.header-cta [data-dl-label]::after{content:"Download";font-size:1rem}}
@media (max-width:420px){.header-cta{display:inline-flex;padding:8px 10px;margin-left:auto}.header-cta [data-dl-label]{display:none}.menu{margin-left:8px}}

.subnav{background:#0c0806;border-bottom:1px solid var(--line-hot);position:sticky;top:72px;z-index:40}
.subnav .wrap{display:flex;align-items:center;gap:4px;height:46px;overflow-x:auto}
.subnav span{font-family:var(--display);font-weight:800;font-style:italic;color:var(--ember);margin-right:14px;white-space:nowrap}
.subnav a{font-family:var(--display);font-weight:700;color:#cfc8be;text-decoration:none;padding:6px 12px;border-radius:var(--r-sm);white-space:nowrap}
.subnav a:hover{background:#1a120c;color:#fff}
.subnav a[aria-current="page"]{color:#120800;background:var(--ember)}
@media (max-width:520px){.subnav span{display:none}}
html.has-subnav{scroll-padding-top:130px}
.subnav ~ main .lineup-poster,.subnav ~ main .calc-out{top:136px}

.services{margin:0;border-top:1px solid var(--line)}
.services > div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.services dt{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.5rem;line-height:1.05;color:var(--molten)}
.services dd{margin:0;color:#d6cfc5}
@media (max-width:520px){.services > div{grid-template-columns:1fr;gap:4px}}

.support-band{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:32px;align-items:end;border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px)}
.support-band .btn-row{justify-content:flex-end}
@media (max-width:820px){.support-band{grid-template-columns:1fr}.support-band .btn-row{justify-content:flex-start}}

.site-footer .wrap{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
@media (max-width:900px){.site-footer .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.site-footer .wrap > div:first-child{grid-column:1/-1}}
@media (max-width:480px){.site-footer .wrap{grid-template-columns:1fr}}
.support-band,.about-cta{border-top:0;padding-top:0}

/* ---------- Locked Performance Parts ---------- */
.locked{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;color:#55524e;cursor:not-allowed;user-select:none;padding:10px 14px}
.locked small{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#7a746c;border:1px solid #33312e;border-radius:3px;padding:1px 6px;font-style:normal}
.nav .locked{font-size:1.08rem}
.menu nav .locked{font-size:1.6rem;font-style:italic;padding:10px 0;border-bottom:1px solid #18191c}
.site-footer .locked{padding:0;font-family:var(--body);font-weight:400}
.locked-btn{--bg:#1a1a1b;--fg:#5d5953;cursor:not-allowed;pointer-events:none;box-shadow:inset 0 0 0 1px #2c2c2e}
.derp-letters dt{font-size:1.6rem;color:var(--bone)}
.derp-letters dt b{color:var(--ember);font-weight:800;font-size:1.25em}
.stat-line{font-size:1.05rem;color:#d6cfc5;border-left:3px solid var(--signal);padding:4px 0 4px 14px;margin-top:20px}
.stat-line strong{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.8rem;color:var(--signal);margin-right:6px;vertical-align:-2px}
.eng .body p:not(.lede){color:#cfc8be}

/* =========================================================
   v5: SOUL PASS — grit, embers, story, rhythm
   ========================================================= */

/* film grain over everything, like the posters */
body::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;pointer-events:none;opacity:.35;background-image:url(../img/brand/grain.png)}

/* brushed steel on panels */
.dl-main,.credit .panel,.calc-out,.notice,.app-window .bar,.site-header,.top-bar,.subnav{
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(transparent,transparent)}
.site-footer{background:#030304 repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px)}

/* embers */
canvas.embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero canvas.embers{z-index:1;opacity:.85}

/* decode readout over the waterfall */
.decodes{position:absolute;right:clamp(16px,4vw,56px);bottom:28px;z-index:2;width:min(440px,40vw);font:500 .82rem/1.55 Consolas,"Cascadia Mono","DejaVu Sans Mono",monospace;color:#bcd9f2;
  background:rgba(4,10,16,.9);border:1px solid #1d3b57;border-radius:var(--r-sm);padding:10px 12px}
.decodes .dhead,.decodes li{display:grid;grid-template-columns:62px 34px 34px 42px 1fr;gap:8px;white-space:nowrap}
.decodes .dhead{color:#5f86a8;border-bottom:1px solid #1d3b57;padding-bottom:4px;margin-bottom:4px}
.decodes ol{list-style:none;margin:0;padding:0;min-height:calc(1.55em * 4)}
.decodes li{overflow:hidden}
.decodes li span:last-child{overflow:hidden;text-overflow:ellipsis}
.decodes li.cq span:last-child{color:#ffd8a8}
.decodes li.new{animation:decIn .5s ease-out}
@keyframes decIn{from{background:rgba(255,155,61,.35)}}
@media (max-width:900px){.decodes{display:none}}

/* story band */
.story{position:relative;isolation:isolate;overflow:hidden;padding:clamp(88px,12vw,160px) 0;
  background:radial-gradient(ellipse at 85% 60%,rgba(232,116,42,.28),transparent 55%),radial-gradient(ellipse at 10% 120%,rgba(160,40,10,.35),transparent 50%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),#080605;border-top:1px solid #2a1a10;border-bottom:1px solid #2a1a10}
.story .wrap{position:relative;z-index:2}
.story-mark{position:absolute;z-index:0;right:-6%;bottom:-14%;width:min(760px,62vw);height:auto;opacity:.5;transform:rotate(-8deg);pointer-events:none}
.story-line{font-size:clamp(3rem,8vw,7.2rem);line-height:.9;max-width:12ch;margin-bottom:.35em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.story-line .num{color:var(--molten);text-shadow:0 0 40px rgba(255,155,61,.45)}
.story .lede{max-width:52ch;color:#e8ddd0}
.story .sig{margin-top:28px;font-family:var(--display);font-weight:800;font-style:italic;font-size:1.5rem;color:var(--bone);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline}
.story .sig::before{content:"";width:34px;height:2px;background:var(--ember);transform:skewX(-30deg) translateY(-6px)}
.story .sig a{font-family:var(--body);font-style:normal;font-weight:500;font-size:1rem}
@media (max-width:700px){.story-mark{opacity:.25;width:90vw;bottom:-6%}}

/* what's new with a giant version number */
.newrel{overflow:hidden}
.newrel-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.big-ver{font-family:var(--display);font-weight:800;font-style:italic;font-size:clamp(7rem,19vw,17rem);line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:2px rgba(76,180,255,.55);margin-left:-.06em;white-space:nowrap;
  background:linear-gradient(180deg,rgba(76,180,255,.18),rgba(76,180,255,0) 75%);-webkit-background-clip:text;background-clip:text}
.newrel h2{font-size:clamp(2rem,3.6vw,3rem)}
@media (max-width:820px){.newrel-grid{grid-template-columns:1fr}.big-ver{font-size:32vw}}

/* blueprint frame on the main screenshot */
.gallery .shot.blueprint{padding:30px 0 0 34px;position:relative}
.blueprint .dim-h,.blueprint .dim-v{position:absolute;color:#4f7394;font:600 .78rem/1 var(--display);letter-spacing:.08em}
.blueprint .dim-h{left:34px;right:0;top:6px;height:12px;border-left:1px solid #2f4a63;border-right:1px solid #2f4a63}
.blueprint .dim-h::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid #2f4a63}
.blueprint .dim-h i{position:absolute;left:50%;top:-1px;transform:translateX(-50%);background:var(--black);padding:0 10px;font-style:normal}
.blueprint .dim-v{left:6px;top:30px;width:12px;height:calc(100% - 30px - 40px);border-top:1px solid #2f4a63;border-bottom:1px solid #2f4a63}
.blueprint .dim-v::before{content:"";position:absolute;top:0;bottom:0;left:6px;border-left:1px solid #2f4a63}
.blueprint .dim-v i{position:absolute;top:50%;left:6px;transform:translate(-50%,-50%) rotate(-90deg);background:var(--black);padding:0 8px;font-style:normal}
.blueprint .bp-tag{position:absolute;right:0;bottom:-4px;text-align:right;font:600 .74rem/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#4f7394}
@media (max-width:620px){.gallery .shot.blueprint{padding:0}.blueprint .dim-h,.blueprint .dim-v,.blueprint .bp-tag{display:none}}

/* About: D.E.R.P. as four giant letters */
.derp-name{padding:clamp(72px,9vw,120px) 0;border-top:1px solid #18191c;border-bottom:1px solid #18191c;
  background:radial-gradient(ellipse at 50% 120%,rgba(232,116,42,.16),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.derp-name-head{max-width:680px;margin-bottom:clamp(36px,5vw,64px)}
.derp-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ember)}
.derp-row > div{padding:10px 24px 0 0}
.derp-row > div + div{padding-left:24px;border-left:1px solid var(--line)}
.derp-row .L{display:block;font-family:var(--display);font-weight:800;font-style:italic;font-size:clamp(6rem,13vw,11rem);line-height:.9;
  background:linear-gradient(180deg,#f6efe6 0%,#b9b1a6 45%,#6b645c 52%,#d8d0c4 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(232,116,42,.25))}
.derp-row b{display:block;font-family:var(--display);font-weight:800;font-style:italic;font-size:1.6rem;color:var(--molten);margin:6px 0 6px}
.derp-row p{color:var(--ash);margin:0;max-width:26ch}
@media (max-width:820px){.derp-row{grid-template-columns:1fr 1fr}.derp-row > div:nth-child(3){padding-left:0;border-left:0}.derp-row > div:nth-child(n+3){border-top:1px solid var(--line);margin-top:20px;padding-top:10px}}
.story-line{max-width:17ch;font-size:clamp(3rem,7vw,6.4rem)}
.story-mark{bottom:-4%;right:-3%}
/* drop-in hero art: save as assets/img/bg/bg-home.jpg (16:9, subject on the right) */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center right;
  background-image:linear-gradient(90deg,rgba(5,5,6,.95) 0%,rgba(5,5,6,.7) 40%,rgba(5,5,6,.35) 100%),url(../img/bg/bg-home.jpg)}
.patch-note{margin:0 0 32px;max-width:none}
.newrel .patch-note{margin:22px 0 0}