/* WILD ORIGIN CULTURES  v2
   bone paper ground, coloured dark bands (moss, mud, red dust), hi-vis orange as the one loud accent.
   Display lettering is baked vector (gen_type.py). Heads: Big Shoulders. Body: Barlow. Labels: JetBrains Mono.
   Product images are rendered specimens (render/) with a matching contour "scan" layer. */

@font-face{font-family:"WO Stencil";src:url(/assets/fonts/bigshoulders-stencil.v3.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"WO Head";src:url(/assets/fonts/bigshoulders.v3.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-500.v3.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-600.v3.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-700.v3.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"WO Mono";src:url(/assets/fonts/jetbrains-mono.v3.woff2) format("woff2");font-weight:500 700;font-display:swap}
/* metric-matched fallbacks: text set in the local font takes the same space, so nothing jumps when the webfont lands */
@font-face{font-family:"WO Head FBN";src:local("Arial Narrow"),local("ArialNarrow"),local("Liberation Sans Narrow");ascent-override:98.5%;descent-override:21.5%;line-gap-override:0%;size-adjust:92.8%}
@font-face{font-family:"WO Head FB";src:local("Arial"),local("Liberation Sans"),local("Helvetica"),local("Roboto");ascent-override:98.5%;descent-override:21.5%;line-gap-override:0%;size-adjust:76.1%}
@font-face{font-family:"Barlow FB";src:local("Arial"),local("Liberation Sans"),local("Helvetica"),local("Roboto");ascent-override:100%;descent-override:20%;line-gap-override:0%;size-adjust:96.8%}
@font-face{font-family:"WO Mono FB";src:local("Courier New"),local("Liberation Mono"),local("Menlo"),local("Consolas");ascent-override:102%;descent-override:30%;line-gap-override:0%;size-adjust:100.0%}

:root{
  --bone:#EAE3D0; --paper:#F5F0E3; --ink:#1E1710; --ink-2:#4B4034; --ink-3:#665A4C;
  --mud:#4A3320; --mud-d:#2A1E13;
  --moss:#1F3A26; --moss-d:#152A1B; --lichen:#D4E157;
  --hot:#FF5A1F; --hot-ink:#A93408;
  --dust:#AD4019; --dust-d:#5E2110; --sun:#FFB45C;
  --rule:rgba(30,23,16,.2);
  --disp:"WO Stencil","WO Head","WO Head FBN","WO Head FB",Impact,sans-serif;
  --head:"WO Head","WO Head FBN","WO Head FB",Impact,sans-serif;
  --body:"Barlow","Barlow FB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"WO Mono","WO Mono FB",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gut:clamp(18px,4.8vw,28px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --scan-ease:cubic-bezier(.55,.06,.3,1);
  --cut:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
  --nav-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px);-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html.locked,html.locked body{overflow:hidden}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55;font-weight:500;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::before{content:"";position:fixed;inset:0;background:url(/assets/grain.png);pointer-events:none;z-index:60;opacity:.3}
img,canvas,svg{display:block}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;border-radius:0}
input{border-radius:0}
::selection{background:var(--hot);color:var(--ink)}
.defs{position:absolute}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-70px;background:var(--ink);color:var(--bone);padding:12px 16px;z-index:99;font-family:var(--mono);font-size:.8rem;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square;stroke-linejoin:miter;flex:none}
.ic.flip{transform:scaleX(-1)}

/* ---------- shared type ---------- */
.kicker{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hot-ink)}
.kicker i,.eyebrow i,.status i{font-style:normal;opacity:.45;margin:0 .45em}
.huge{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(2.7rem,7.4vw,6.4rem);line-height:.9;letter-spacing:-.005em;text-wrap:balance}
.huge em{font-style:normal;color:var(--hot)}
.sec{padding:clamp(76px,10.5vw,150px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head .kicker{margin-bottom:14px}
.sec-sub{max-width:25rem;font-size:1.12rem;color:var(--ink-2);text-wrap:pretty}
.w{display:block;width:auto;fill:currentColor;overflow:visible}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;font-family:var(--head);font-weight:800;font-size:1.22rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;line-height:1;padding:16px 26px 15px;border:0;cursor:pointer;clip-path:var(--cut);transition:background .16s,color .16s,transform .16s;user-select:none;-webkit-user-select:none}
.btn .ic{transition:transform .2s var(--ease)}
.btn.hot{background:var(--hot);color:var(--ink)}
.btn.line{background:var(--ink);color:var(--bone)}
.btn:active{transform:translateY(2px)}
.btn.sm{min-height:44px;font-size:1.02rem;padding:12px 18px 11px}
.btn[disabled]{opacity:.6;cursor:progress}
@media (hover:hover){
  .btn.hot:hover{background:var(--ink);color:var(--bone)}
  .btn.line:hover{background:var(--hot);color:var(--ink)}
  .btn:hover .ic{transform:translateX(4px)}
}

/* ---------- stamps (baked lettering) ---------- */
.stamp{display:block;fill:var(--hot);pointer-events:none;user-select:none;-webkit-user-select:none;overflow:visible}
.st-100{aspect-ratio:2176/739}.st-wild{aspect-ratio:1255/720}.st-archive{aspect-ratio:1776/725}.st-more{aspect-ratio:2497/1105}.st-onlist{aspect-ratio:2286/725}

/* ---------- tape ---------- */
.tape{background:var(--hot);color:var(--ink);overflow:hidden;border-bottom:2px solid var(--ink);padding-top:env(safe-area-inset-top)}
.tape-run{display:flex;width:max-content;animation:tape 40s linear infinite}
.tape span{font-family:var(--head);font-weight:800;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;padding:9px 0 8px}
.tape b{font-weight:800;opacity:.5;margin:0 .7em}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--bone);border-bottom:2px solid var(--ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px}
.mark{width:38px;height:38px;color:var(--ink);transition:transform .5s var(--ease)}
.mark-dot{fill:var(--hot)}
.brand:hover .mark{transform:rotate(90deg)}
.brand-name{font-family:var(--disp);font-weight:900;font-size:1.7rem;line-height:.86;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.brand-name small{display:block;font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.42em;margin-top:5px;color:var(--ink-2)}
.links{display:flex;align-items:center;gap:clamp(16px,2.2vw,28px)}
.links a:not(.btn){font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.links a:not(.btn):hover,.links a[aria-current="true"]{border-color:var(--hot)}
.links a em,.links-note{display:none}
.menu{display:none}
.progress{position:absolute;left:0;right:0;bottom:-2px;height:2px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--hot);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(22px,3.2vw,46px) 0 clamp(190px,27vw,390px)}
.hero-contours{position:absolute;inset:0;background:var(--mud);opacity:.1;-webkit-mask:url(/assets/contours-a3.svg) center/cover no-repeat;mask:url(/assets/contours-a3.svg) center/cover no-repeat}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(22px,4vw,64px);align-items:start}
.hero-copy{min-width:0}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--hot);margin-right:10px;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.mega{--fixed:421px;--hh:clamp(64px,min(12.2vw,calc((100vh - var(--fixed))/2.955)),184px);display:flex;flex-direction:column;align-items:flex-start;margin-left:calc(var(--hh)*-.03)}
.mega .w{height:var(--hh)}
.mega .w+.w{margin-top:calc(var(--hh)*-.045)}
.w-raw{color:var(--hot)}
.w-bar{display:block;fill:var(--hot);width:calc(var(--hh)*3.1);height:calc(var(--hh)*.12);margin-top:calc(var(--hh)*-.075)}
@supports (width:1cqi){
  .hero-copy{container-type:inline-size}
  .mega{--hh:max(64px,min(184px,calc(100cqi/3.21),calc((100vh - var(--fixed))/2.955)))}
  @supports (height:1svh){.mega{--hh:max(64px,min(184px,calc(100cqi/3.21),calc((100svh - var(--fixed))/2.955)))}}
}
.lede{max-width:35rem;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.45;margin-top:clamp(18px,2.4vw,28px);color:var(--ink);text-wrap:pretty}
.lede strong{font-weight:700;background:var(--ink);color:var(--bone);padding:0 .3em;white-space:nowrap}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,2.4vw,26px)}

.hero-file{position:relative;justify-self:end;width:100%;max-width:392px;background:var(--paper);border:2px solid var(--ink);box-shadow:9px 9px 0 var(--ink);transform:rotate(2.2deg);margin-top:26px}
.file-top{display:flex;gap:14px;font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:11px 14px;border-bottom:2px solid var(--ink)}
.file-top .count{color:var(--hot-ink)}
.hero-tile{aspect-ratio:1/1.02}
.scan-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);text-align:left}
.scan-cap b{color:var(--lichen)}
.hero-tile[data-tone=au] .scan-cap b{color:var(--sun)}
.rec{width:8px;height:8px;border-radius:50%;background:var(--hot);animation:blink 1s steps(2) infinite}
.pips{display:flex;gap:4px;padding:9px 14px;border-top:2px solid var(--ink);background:var(--bone)}
.pips i{flex:1;height:5px;background:rgba(30,23,16,.18);transition:background .3s}
.pips i.on{background:var(--hot)}
.pips i.was{background:var(--ink)}
.file-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.file-stats div{padding:12px 14px 10px}
.file-stats div+div{border-left:2px solid var(--ink)}
.file-stats dt{font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);line-height:1.25;min-height:2.5em}
.file-stats dd{font-family:var(--disp);font-weight:900;font-size:3.1rem;line-height:.95}
.s-hero{position:absolute;right:-26px;top:-36px;width:170px;transform:rotate(9deg);background:var(--bone)}

.terrain{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(240px,35vw,460px);z-index:1;-webkit-mask:linear-gradient(to bottom,transparent 0,#000 34%);mask:linear-gradient(to bottom,transparent 0,#000 34%)}

/* ---------- specimen tile: rendered image + contour scan ---------- */
.tile{position:relative;display:block;width:100%;aspect-ratio:1/.9;margin:0;padding:0;border:0;overflow:hidden;cursor:pointer;isolation:isolate;background-color:var(--moss);--glow:rgba(212,225,87,.16);
  background-image:radial-gradient(62% 40% at 50% 88%,var(--glow),transparent 72%),linear-gradient(rgba(234,227,208,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(234,227,208,.055) 1px,transparent 1px);
  background-size:100% 100%,32px 32px,32px 32px;background-position:center}
.tile[data-tone=au]{background-color:var(--dust-d);--glow:rgba(255,180,92,.2)}
.tile img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;transform:scale(1.1);-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.tile .spec{z-index:1;transition:opacity .28s,filter .28s,transform .5s var(--ease);transform:scale(1.1) translate3d(calc(var(--px,0)*-7px),calc(var(--py,0)*-5px),0)}
.tile .scan{z-index:3;opacity:0;mix-blend-mode:screen;transition:opacity .28s}
.tile .xband{position:absolute;left:0;right:0;top:0;height:26%;z-index:2;background:linear-gradient(to bottom,transparent,rgba(12,24,16,.74) 30%,rgba(12,24,16,.74) 70%,transparent);opacity:0;transform:translateY(540%);pointer-events:none}
.tile[data-tone=au] .xband{background:linear-gradient(to bottom,transparent,rgba(40,12,5,.74) 30%,rgba(40,12,5,.74) 70%,transparent)}
.tile .sweep{position:absolute;left:0;right:0;top:0;height:100%;z-index:4;background:linear-gradient(to top,rgba(255,90,31,.55) 0,var(--hot) 2px,rgba(255,90,31,.45) 4px,rgba(255,90,31,.12) 12px,transparent 22px);opacity:0;pointer-events:none;will-change:transform}
.tile .code{position:absolute;left:14px;top:12px;z-index:5;font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.12em;color:var(--bone)}
.tile .land{position:absolute;right:12px;top:10px;z-index:5;font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:var(--lichen);color:var(--ink);padding:4px 9px}
.tile[data-tone=au] .land{background:var(--sun)}
.corner{position:absolute;width:20px;height:20px;border:2px solid var(--bone);opacity:.7;z-index:5;pointer-events:none}
.corner.tl{left:12px;top:12px;border-right:0;border-bottom:0}
.corner.tr{right:12px;top:12px;border-left:0;border-bottom:0}
.corner.bl{left:12px;bottom:12px;border-right:0;border-top:0}
.corner.br{right:12px;bottom:12px;border-left:0;border-top:0}
.hero-tile .corner.bl,.hero-tile .corner.br{bottom:40px}

/* armed: only the scan shows. in: the sweep develops the specimen. done: an x-ray band drifts through now and then.
   The armed specimen is hidden with opacity, never clip-path: Chromium will not lazy-load an image clipped to nothing.
   The failsafe only runs if app.js never starts (it adds .live), so a broken script cannot leave tiles blank. */
.js .tile.arm .spec{opacity:0;transition:none}
.js .tile.arm .scan{opacity:.95}
.js:not(.live) .tile.arm .spec{animation:wo-failsafe-spec .01s 6s forwards}
.js:not(.live) .tile.arm .scan{animation:wo-failsafe-scan .01s 6s forwards}
.js .tile.arm.in .spec{animation:wo-develop 1.3s var(--scan-ease) both}
.js .tile.arm.in .scan{animation:wo-unscan 1.3s var(--scan-ease) both}
.js .tile.arm.in .sweep{animation:wo-sweep 1.3s var(--scan-ease) both}
@keyframes wo-failsafe-spec{to{opacity:1}}
@keyframes wo-failsafe-scan{to{opacity:0}}
@keyframes wo-develop{from{clip-path:inset(100% 0 0 0);opacity:1}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes wo-unscan{from{clip-path:inset(0 0 0 0);opacity:.95}to{clip-path:inset(0 0 100% 0);opacity:.95}}
@keyframes wo-sweep{0%{transform:translateY(0);opacity:1}90%{opacity:1}100%{transform:translateY(-100%);opacity:0}}
.js .tile.done .scan{opacity:1;-webkit-mask:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent) no-repeat 0 140%/100% 26%;mask:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent) no-repeat 0 140%/100% 26%;animation:wo-band 16s linear var(--d,2s) infinite}
.js .tile.done .xband{animation:wo-xband 16s linear var(--d,2s) infinite}
.js .tile.done .sweep{animation:wo-idle 16s linear var(--d,2s) infinite}
@keyframes wo-band{0%{-webkit-mask-position:0 140%;mask-position:0 140%}14%,100%{-webkit-mask-position:0 -40%;mask-position:0 -40%}}
@keyframes wo-xband{0%{transform:translateY(398%);opacity:1}14%{transform:translateY(-114%);opacity:1}14.1%,100%{transform:translateY(-114%);opacity:0}}
@keyframes wo-idle{0%{transform:translateY(16.6%);opacity:.9}14%{transform:translateY(-116.6%);opacity:.9}14.1%,100%{transform:translateY(-116.6%);opacity:0}}
/* x-ray: hover on desktop, the button in the file sheet on touch */
.tile.is-xray .spec{opacity:.2;filter:saturate(.3)}
.js .tile.is-xray .scan{opacity:1;-webkit-mask:none;mask:none;animation:none}
.tile.is-xray .xband,.tile.is-xray .sweep{animation:none;opacity:0}
@media (hover:hover) and (pointer:fine){
  .wild .tile.done:hover .spec{opacity:.2;filter:saturate(.3)}
  .js .wild .tile.done:hover .scan{opacity:1;-webkit-mask:none;mask:none;animation:none}
  .wild .tile.done:hover .xband,.wild .tile.done:hover .sweep{animation:none;opacity:0}
}

/* ---------- bands + torn edges ---------- */
.band{position:relative;background:var(--band);color:var(--bone);padding:clamp(76px,10.5vw,150px) 0}
.band.moss{--band:var(--moss)}
.band.mudd{--band:var(--mud-d)}
.band.ink{--band:var(--ink)}
.band.torn-t::before,.band.torn-b::after{content:"";position:absolute;left:0;right:0;height:28px;background:var(--band);z-index:3;pointer-events:none}
.band.torn-t::before{bottom:calc(100% - 1px);-webkit-mask:url(/assets/torn-a.svg) repeat-x left bottom/1400px 28px;mask:url(/assets/torn-a.svg) repeat-x left bottom/1400px 28px}
.band.torn-b::after{top:calc(100% - 1px);transform:scaleY(-1);-webkit-mask:url(/assets/torn-b.svg) repeat-x left bottom/1400px 28px;mask:url(/assets/torn-b.svg) repeat-x left bottom/1400px 28px}
.contour-bg{position:absolute;inset:0;background:var(--lichen);opacity:.11;-webkit-mask:url(/assets/contours-b3.svg) center/cover no-repeat;mask:url(/assets/contours-b3.svg) center/cover no-repeat;pointer-events:none}
.band .wrap{position:relative;z-index:2}

/* ---------- the code ---------- */
.code .kicker{color:var(--lichen);margin-bottom:16px}
.code .huge em{color:var(--lichen)}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:clamp(40px,5.4vw,64px)}
.rules li{border-top:3px solid var(--bone);padding-top:18px}
.no{display:block;font-family:var(--disp);font-weight:900;font-size:3.6rem;line-height:.9;color:var(--hot);font-variant-numeric:tabular-nums}
.rules h3{font-family:var(--head);font-weight:900;font-size:1.75rem;line-height:1;text-transform:uppercase;margin:12px 0 10px}
.rules p{color:rgba(234,227,208,.88);font-size:1.02rem}

/* ---------- the wilds ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(22px,3vw,30px)}
.chip{min-height:44px;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:2px solid var(--ink);padding:9px 16px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.chip span{opacity:.55;margin-left:.5em}
.chip.on{background:var(--ink);color:var(--bone)}
@media (hover:hover){.chip:not(.on):hover{background:rgba(30,23,16,.08)}}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
.wild{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--paper);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.wild[hidden]{display:none}
.wild>.tile{border-bottom:2px solid var(--ink)}
.s-card{position:absolute;right:14px;bottom:13px;z-index:5;width:86px;opacity:0;transform:rotate(-11deg) scale(1.5);transition:opacity .18s,transform .24s cubic-bezier(.2,1.6,.4,1)}
.s-card.st-archive{width:118px;fill:var(--bone)}
.plate{display:flex;flex-direction:column;flex:1;padding:20px 22px 20px}
.plate h3{font-family:var(--head);font-weight:900;font-size:2.15rem;line-height:.95;text-transform:uppercase;text-wrap:balance}
.latin{font-style:italic;color:var(--ink-2);margin-top:4px}
.blurb{margin-top:12px;margin-bottom:18px;font-size:1.02rem;text-wrap:pretty}
.specs{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:2px dashed var(--rule)}
.specs dt,.notes dt{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.specs dd{font-weight:700;font-size:1.02rem;white-space:nowrap}
.specs dd::after{content:"";display:block;height:4px;margin-top:7px;background:rgba(30,23,16,.16)}
.specs .sub dd::after{background:var(--mud)}
.specs .sub[data-sub=straw] dd::after{background:repeating-linear-gradient(90deg,#B98A12 0 6px,transparent 6px 9px)}
.specs .temp dd::after{background:linear-gradient(var(--hot),var(--hot)) calc((var(--lo) - 5)/(25 - (var(--hi) - var(--lo)))*100%) 0/calc((var(--hi) - var(--lo))*4%) 100% no-repeat,rgba(30,23,16,.16)}
.specs .lvl dd::after{width:54px;background:linear-gradient(90deg,var(--ink) calc(var(--n)/3*100%),rgba(30,23,16,.16) 0);-webkit-mask:repeating-linear-gradient(90deg,#000 0 16px,transparent 16px 19px);mask:repeating-linear-gradient(90deg,#000 0 16px,transparent 16px 19px)}
.plate-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px}
.status{font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;background:var(--hot);color:var(--ink);padding:5px 10px;white-space:nowrap}
.status.held{background:repeating-linear-gradient(-45deg,var(--ink) 0 6px,var(--mud) 6px 12px);color:var(--bone)}
.open{display:inline-flex;align-items:center;gap:.45em;min-height:44px;font-family:var(--head);font-weight:800;font-size:1.12rem;letter-spacing:.06em;text-transform:uppercase;background:none;border:0;padding:0;cursor:pointer;box-shadow:inset 0 -3px 0 var(--ink);transition:box-shadow .2s,color .2s}
.open .ic{color:var(--hot-ink);transition:transform .2s var(--ease)}
.first{font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hot-ink);margin-bottom:10px}
@media (hover:hover){
  .wild:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
  .wild:hover .s-card,.wild:focus-within .s-card{opacity:1;transform:rotate(-11deg) scale(1)}
  .open:hover{box-shadow:inset 0 -3px 0 var(--hot);color:var(--hot-ink)}
  .open:hover .ic{transform:translateX(4px)}
}
.wild.wide{grid-column:1/-1;flex-direction:row}
.wild.wide>.tile{flex:0 0 46%;width:46%;aspect-ratio:auto;min-height:420px;border-bottom:0;border-right:2px solid var(--ink)}
.wild.wide .plate{padding:34px 38px;justify-content:center}
.wild.wide .plate h3{font-size:clamp(2.4rem,4.6vw,4.2rem)}
.wild.wide .blurb{font-size:1.14rem;max-width:34rem}
.wild.wide .specs{justify-content:flex-start;gap:10px 46px;margin-top:0}
.wild.wide .plate-foot{margin-top:26px}
.guide-note{margin-top:30px;max-width:60rem;font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.03em;line-height:1.6;color:var(--ink-3)}

/* ---------- mud + dust ---------- */
.ground{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.land-panel{position:relative;overflow:hidden;color:var(--bone);padding:clamp(56px,8vw,110px) clamp(22px,5vw,80px)}
.gb-panel{background:var(--moss)}
.au-panel{background:var(--dust);border-left:2px solid var(--ink)}
.au-panel .contour-bg{background:var(--sun);opacity:.2;-webkit-mask-image:url(/assets/contours-a3.svg);mask-image:url(/assets/contours-a3.svg)}
.land-in{position:relative;z-index:2;max-width:34rem}
.gb-panel .kicker{color:var(--lichen)}
.au-panel .kicker{color:var(--bone)}
.giant{margin:12px 0 0;--gh:clamp(110px,14.5vw,232px)}
.giant .w{height:var(--gh);margin-left:calc(var(--gh)*-.03)}
.gb-panel .giant{color:var(--lichen)}
.au-panel .giant{color:var(--ink)}
.land-name{font-family:var(--head);font-weight:900;font-size:2.3rem;text-transform:uppercase;line-height:1;margin-top:14px}
.land-copy{font-size:1.14rem;margin-top:10px;max-width:27rem;text-wrap:pretty}
.land-list{margin-top:26px;border-top:2px solid currentColor}
.land-list li{border-bottom:1px solid rgba(234,227,208,.3)}
.land-list button,.land-list .tba{display:grid;grid-template-columns:48px 6.4em minmax(0,1fr) 20px;align-items:center;gap:14px;width:100%;min-height:60px;padding:6px 6px 6px 0;background:none;border:0;text-align:left;font-weight:600;cursor:pointer;transition:background .18s,padding .22s var(--ease)}
.land-list img,.land-list .slot{width:48px;height:48px;object-fit:contain;background:rgba(0,0,0,.2)}
.au-panel .land-list img,.au-panel .slot{background:rgba(60,18,6,.35)}
.land-list .slot{display:block;border:1px dashed rgba(234,227,208,.45);background:none}
.land-list b{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.1em}
.land-list .ic{opacity:.55;transition:transform .2s var(--ease),opacity .2s}
.land-list .tba{cursor:default;opacity:.62;font-style:italic}
@media (hover:hover){
  .land-list button:hover{background:rgba(234,227,208,.09);padding-left:8px}
  .land-list button:hover .ic{transform:translateX(4px);opacity:1}
}
.s-land{width:230px;margin-top:40px;fill:var(--ink);transform:rotate(-5deg)}

/* ---------- the cut ---------- */
.cut{background:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);border:2px solid var(--ink);background:var(--bone)}
.steps li{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"no ic" "tx tx";gap:14px 10px;align-content:start;padding:24px 22px 28px}
.steps li+li{border-left:2px solid var(--ink)}
.steps .no{grid-area:no;font-size:4.2rem}
.step-ic{grid-area:ic;width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square;margin-top:6px;opacity:.9}
.step-ic .fill{fill:currentColor;stroke:none}
.steps li>div{grid-area:tx}
.steps h3{font-family:var(--head);font-weight:900;font-size:2rem;text-transform:uppercase;line-height:1;margin:0 0 8px}
.steps p{font-size:1rem;color:var(--ink-2)}
.steps .hot-step{background:var(--ink);color:var(--bone)}
.steps .hot-step p{color:rgba(234,227,208,.86)}

/* ---------- drop list ---------- */
.drop{text-align:center}
.hyphae{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.drop-in{max-width:820px}
.drop-in::before{content:"";position:absolute;inset:-50px 0;background:radial-gradient(closest-side,var(--band) 62%,transparent);z-index:-1}
.drop .kicker{color:var(--hot);margin-bottom:16px}
.drop-copy{font-size:1.2rem;max-width:33rem;margin:22px auto 0;color:rgba(234,227,208,.92);text-wrap:pretty}
.drop-form{max-width:620px;margin:30px auto 0}
.field{display:flex;gap:12px}
.field input[type=email]{flex:1;min-width:0;min-height:54px;font:600 1.1rem var(--body);color:var(--ink);background:var(--bone);border:0;padding:14px 18px;clip-path:var(--cut);outline-offset:4px}
.field input[type=email]::placeholder{color:#857a6b}
.field input[aria-invalid=true]{background:#F7D9C8}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (hover:hover){.drop-form .btn.hot:hover{background:var(--bone);color:var(--ink)}}
.watch{display:inline-flex;align-items:center;gap:10px;margin:0 auto 14px;padding:6px 6px 6px 12px;border:2px solid var(--lichen);font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lichen)}
.watch[hidden]{display:none}
.watch b{color:var(--bone);font-weight:700}
.watch button{min-height:32px;background:var(--lichen);color:var(--ink);border:0;padding:4px 10px;font:inherit;letter-spacing:.08em;cursor:pointer}
.drop-msg{min-height:1.6em;margin-top:14px;font-family:var(--mono);font-weight:700;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lichen)}
.drop-msg.err{color:var(--sun)}
.ticket{margin:34px auto 0;max-width:520px}
.ticket[hidden]{display:none}
.ticket .stamp{width:min(330px,82%);margin:0 auto;fill:var(--lichen);transform:rotate(-5deg)}
.ticket.pop .stamp{animation:stamp .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes stamp{from{opacity:0;transform:rotate(-5deg) scale(2.2)}to{opacity:1;transform:rotate(-5deg) scale(1)}}
.ticket p{margin-top:26px;font-size:1.2rem;color:var(--bone);text-wrap:balance}
.drop-small{margin-top:10px;font-size:.92rem;color:rgba(234,227,208,.72)}

/* ---------- questions ---------- */
.faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,6vw,90px);align-items:start}
.faq .kicker{margin-bottom:14px}
.faq-head{position:sticky;top:calc(var(--nav-h) + 30px)}
.qa details{border-top:2px solid var(--ink)}
.qa details:last-child{border-bottom:2px solid var(--ink)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:64px;cursor:pointer;list-style:none;font-family:var(--head);font-weight:800;font-size:1.6rem;line-height:1.1;text-transform:uppercase;padding:16px 0;transition:color .15s}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:22px;height:22px;background:linear-gradient(var(--hot-ink),var(--hot-ink)) center/100% 4px no-repeat,linear-gradient(var(--hot-ink),var(--hot-ink)) center/4px 100% no-repeat;transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(135deg)}
@media (hover:hover){.qa summary:hover{color:var(--hot-ink)}}
.ans{overflow:hidden}
.ans p{padding:0 44px 24px 0;font-size:1.08rem;color:var(--ink-2);text-wrap:pretty}

/* ---------- foot ---------- */
.foot{padding:clamp(70px,9vw,120px) 0 34px;overflow-x:hidden;overflow-x:clip}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.foot-brand{min-width:0}
.foot-mega{--fh:clamp(60px,10.6vw,150px);display:flex;flex-wrap:wrap;gap:0 calc(var(--fh)*.14);color:var(--hot);margin-left:calc(var(--fh)*-.03)}
.foot-mega .w{height:var(--fh)}
@supports (width:1cqi){
  .foot-brand{container-type:inline-size}
  .foot-mega{--fh:min(150px,max(60px,calc(100cqi/5.65)))}
}
.foot-tag{font-family:var(--head);font-weight:800;font-size:1.7rem;text-transform:uppercase;letter-spacing:.04em;margin-top:16px}
.foot-cols{display:flex;gap:56px}
.foot-cols .kicker{color:var(--hot);margin-bottom:12px}
.foot-cols a,.foot-cols p:not(.kicker){display:block;font-family:var(--mono);font-weight:500;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:5px 0;color:rgba(234,227,208,.86)}
.foot-cols a:hover{color:var(--hot)}
.foot-base{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(234,227,208,.25);padding-top:18px}
.foot-legal{font-family:var(--mono);font-weight:500;font-size:.76rem;letter-spacing:.05em;color:rgba(234,227,208,.68)}
.to-top{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--bone)}
.to-top .ic{transform:rotate(-90deg);color:var(--hot)}
.to-top:hover{color:var(--hot)}

/* ---------- phone dock ---------- */
.dock{display:none}

/* ---------- file sheet ---------- */
.sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(30,23,16,.8);opacity:0;transition:opacity .28s}
.sheet.is-open .sheet-scrim{opacity:1}
.sheet-panel{position:relative;display:flex;flex-direction:column;width:min(1060px,calc(100% - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:12px 12px 0 var(--hot);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .24s,transform .36s var(--ease);outline:0}
.sheet.is-open .sheet-panel{opacity:1;transform:none}
.sheet-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border-bottom:2px solid var(--ink);background:var(--bone)}
.grip{display:none}
.sheet-id{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.sheet-id span{background:var(--lichen);padding:3px 9px;font-size:.7rem}
.sheet.au .sheet-id span{background:var(--sun)}
.sheet-id em{font-style:normal;color:var(--ink-3)}
.sheet-nav{display:flex;gap:6px}
.sq{display:grid;place-items:center;width:44px;height:44px;background:var(--ink);color:var(--bone);border:0;cursor:pointer;transition:background .15s,color .15s}
.sq .ic{width:20px;height:20px}
.sq.x span{position:relative;width:20px;height:20px}
.sq.x span::before,.sq.x span::after{content:"";position:absolute;left:-2px;right:-2px;top:8px;height:4px;background:currentColor;transform:rotate(45deg)}
.sq.x span::after{transform:rotate(-45deg)}
@media (hover:hover){.sq:hover{background:var(--hot);color:var(--ink)}}
.sheet-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100%}
.file-tile{aspect-ratio:auto;min-height:540px;cursor:default;border-right:2px solid var(--ink)}
.file-tile img{transform:scale(1.06)}
.file-tile .spec{transform:scale(1.06)}
.xray-btn{position:absolute;left:24px;bottom:24px;z-index:6;min-height:40px;font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--bone);border:2px solid var(--bone);padding:8px 14px 8px 34px;cursor:pointer;transition:background .15s,color .15s}
.xray-btn::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:12px;margin-top:-6px;border:2px solid currentColor;border-radius:50%}
.xray-btn[aria-pressed=true]{background:var(--lichen);color:var(--ink);border-color:var(--lichen)}
.sheet.au .xray-btn[aria-pressed=true]{background:var(--sun);border-color:var(--sun)}
.xray-btn[aria-pressed=true]::before{background:currentColor}
.file-body{padding:36px 36px 34px}
.file-body h2{font-family:var(--head);font-weight:900;font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:.92;text-transform:uppercase;text-wrap:balance}
.file-body .blurb{font-size:1.1rem}
.file-body .specs{justify-content:flex-start;gap:10px 34px;margin-top:0}
.notes{margin-top:18px;padding-top:6px;border-top:2px dashed var(--rule)}
.notes div{padding:10px 0}
.notes dd{margin-top:2px}
.file-body .status{display:inline-block;margin-top:14px}
.sheet-foot{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:12px 18px;border-top:2px solid var(--ink);background:var(--bone)}
.sheet-foot .btn[hidden]{display:none}
.sheet-foot p{margin-right:auto;font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (hover:hover){.js .wild.reveal.in:hover{transform:translate(-3px,-3px)}}
::view-transition-group(*){animation-duration:.36s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  .links a[data-spy=questions]{display:none}
}
@media (max-width:1080px){
  .rules{grid-template-columns:repeat(2,1fr);gap:26px 30px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr;max-width:760px}
  .steps li{grid-template-columns:86px minmax(0,1fr) auto;grid-template-areas:"no tx ic";align-items:start;gap:0 14px;padding:20px 22px 22px}
  .steps li+li{border-left:0;border-top:2px solid var(--ink)}
  .steps .no{font-size:3.6rem}
  .step-ic{margin-top:2px}
  .faq-head{position:static}
}
@media (max-width:920px){
  :root{--nav-h:60px}
  .menu{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--bone);border:0;padding:0 14px;cursor:pointer}
  .bars{position:relative;width:18px;height:12px}
  .bars i{position:absolute;left:0;right:0;height:3px;background:currentColor;transition:transform .28s var(--ease),top .28s var(--ease)}
  .bars i:first-child{top:0}
  .bars i:last-child{top:9px}
  .menu[aria-expanded=true] .bars i{top:4.5px}
  .menu[aria-expanded=true] .bars i:first-child{transform:rotate(45deg)}
  .menu[aria-expanded=true] .bars i:last-child{transform:rotate(-45deg)}
  .menu[aria-expanded=true]{background:var(--hot);color:var(--ink)}
  .links{position:fixed;left:0;right:0;top:var(--nav-bottom,60px);bottom:0;z-index:39;flex-direction:column;align-items:stretch;gap:0;background:var(--bone);padding:10px var(--gut) max(22px,env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .22s,transform .3s var(--ease),visibility 0s .3s}
  .links.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .22s,transform .3s var(--ease),visibility 0s}
  .links a[data-spy=questions]{display:flex}
  .links a:not(.btn){display:flex;align-items:baseline;gap:16px;font-family:var(--head);font-weight:900;font-size:clamp(2.3rem,10vw,3.4rem);letter-spacing:0;line-height:1;padding:17px 0 14px;border-bottom:2px solid var(--ink)}
  .links a:not(.btn):hover,.links a[aria-current="true"]{border-color:var(--ink)}
  .links a[aria-current="true"]{color:var(--hot-ink)}
  .links a em{display:inline;font-family:var(--mono);font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.12em;color:var(--hot-ink)}
  .links .btn{margin-top:26px;min-height:58px;font-size:1.3rem}
  .links-note{display:block;margin-top:auto;padding-top:26px;font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .js .links a,.js .links .btn{opacity:0;transform:translateY(14px);transition:opacity .3s,transform .4s var(--ease)}
  .js .links.is-open a,.js .links.is-open .btn{opacity:1;transform:none}
  .js .links.is-open a:nth-child(2){transition-delay:.04s}.js .links.is-open a:nth-child(3){transition-delay:.08s}.js .links.is-open a:nth-child(4){transition-delay:.12s}.js .links.is-open a:nth-child(5){transition-delay:.16s}.js .links.is-open a:nth-child(6){transition-delay:.2s}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
  .faq-in{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .wild.wide{flex-direction:column}
  .wild.wide>.tile{flex:none;width:100%;aspect-ratio:1/.62;min-height:0;border-right:0;border-bottom:2px solid var(--ink)}
  .wild.wide .plate{padding:24px 26px}
}
@media (max-width:860px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px}
  .hero-file{margin-top:8px}
  .s-hero{width:140px;right:-14px;top:-30px}
  .file-stats dd{font-size:2.5rem}
  .ground{grid-template-columns:1fr}
  .au-panel{border-left:0;border-top:2px solid var(--ink)}
  .land-in{max-width:none}
  .giant{--gh:clamp(96px,24vw,190px)}
  /* file sheet becomes a bottom sheet */
  .sheet{place-items:end center}
  .sheet-panel{width:100%;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-width:2px 0 0;box-shadow:0 -10px 0 var(--hot);opacity:1;transform:translateY(102%);transition:transform .42s var(--ease)}
  .sheet-bar{position:relative;padding:14px 8px 8px 16px}
  .grip{display:block;position:absolute;left:50%;top:5px;width:44px;height:4px;margin-left:-22px;background:rgba(30,23,16,.3)}
  .sheet-grid{grid-template-columns:1fr;min-height:0}
  .file-tile{min-height:0;aspect-ratio:1/.8;border-right:0;border-bottom:2px solid var(--ink)}
  .file-body{padding:24px var(--gut) 26px}
  .sheet-foot{padding:10px var(--gut) max(10px,env(safe-area-inset-bottom))}
  .sheet-foot .btn{width:100%}
  /* dock */
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:38;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:var(--bone);border-top:2px solid var(--hot);padding:9px var(--gut) max(9px,env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .34s var(--ease);visibility:hidden}
  .dock.on{transform:none;visibility:visible}
  .dock p{min-width:0;line-height:1.15}
  .dock b{display:block;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hot)}
  .dock span{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock .btn{flex:none}
}
@media (max-width:700px){
  body{font-size:1rem}
  .tape span{font-size:.86rem;padding:7px 0 6px}
  .brand-name{font-size:1.45rem}
  .mark{width:32px;height:32px}
  .hero{padding-top:20px;padding-bottom:clamp(150px,44vw,230px)}
  .hero-in{grid-template-columns:1fr;gap:34px}
  /* phones: fit the first screen, but never let the headline drop under 82% of the column */
  .mega{--fixed:350px}
  @supports (width:1cqi){.mega{--hh:max(64px,calc(100cqi/3.21*.82),min(calc(100cqi/3.21),calc((100vh - var(--fixed))/2.955)))}}
  @supports (width:1cqi) and (height:1svh){.mega{--hh:max(64px,calc(100cqi/3.21*.82),min(calc(100cqi/3.21),calc((100svh - var(--fixed))/2.955)))}}
  .eyebrow{font-size:.72rem;letter-spacing:.1em;margin-bottom:12px}
  .xs-hide{display:none}
  .dot{width:8px;height:8px;margin-right:8px}
  .cta-row{flex-direction:column;gap:10px}
  .cta-row .btn{width:100%}
  .hero-file{justify-self:stretch;max-width:none;margin-top:0;transform:none;box-shadow:6px 6px 0 var(--ink)}
  .hero-tile{aspect-ratio:1/.86}
  .s-hero{width:132px;right:-8px;top:-28px}
  .terrain{height:clamp(190px,56vw,280px)}
  .rules{grid-template-columns:1fr;gap:0;margin-top:34px}
  .rules li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 12px;padding:18px 0 20px;border-top:2px solid rgba(234,227,208,.9)}
  .rules .no{font-size:2.9rem;padding-top:2px}
  .rules h3{margin:0 0 8px;font-size:1.6rem}
  .filters{flex-wrap:nowrap;gap:8px}
  .chip{flex:1 1 auto;padding:9px 10px;font-size:.74rem;letter-spacing:.07em;text-align:center}
  .grid{grid-template-columns:1fr;gap:24px}
  .wild{box-shadow:5px 5px 0 var(--ink)}
  .wild>.tile,.wild.wide>.tile{aspect-ratio:1/.84}
  .wild.wide .plate{padding:20px 20px 20px}
  .wild.wide .plate h3{font-size:2.3rem}
  .wild.wide .blurb{font-size:1.02rem}
  .wild.wide .specs{justify-content:space-between;gap:10px;margin-top:auto}
  .wild.wide .plate-foot{margin-top:0}
  .plate{padding:18px 20px 16px}
  .plate h3{font-size:2.05rem}
  .s-card{opacity:1;transform:rotate(-11deg) scale(1);width:70px;right:12px;bottom:11px}
  .s-card.st-archive{width:98px}
  .land-panel{padding:52px var(--gut) 56px}
  .land-list button,.land-list .tba{grid-template-columns:44px 5.8em minmax(0,1fr) 18px;gap:12px}
  .land-list img,.land-list .slot{width:44px;height:44px}
  .s-land{width:200px;margin-top:34px}
  .steps li{grid-template-columns:62px minmax(0,1fr) auto;padding:18px 16px 20px}
  .steps .no{font-size:2.9rem}
  .steps h3{font-size:1.7rem}
  .step-ic{width:34px;height:34px}
  .field{flex-direction:column}
  .field .btn{width:100%}
  .drop-copy{font-size:1.08rem}
  .qa summary{font-size:1.32rem;min-height:60px}
  .ans p{padding-right:0;font-size:1.02rem}
  .foot{padding-bottom:26px}
  .foot-mega{--fh:clamp(60px,26vw,150px);gap:0}
  @supports (width:1cqi){.foot-mega{--fh:min(150px,calc(100cqi/3.12))}}
  .foot-mega .w+.w{margin-top:calc(var(--fh)*-.05)}
  .foot-cols{gap:44px}
  .foot-tag{font-size:1.4rem}
  .foot-base{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:380px){
  .brand-name small{letter-spacing:.34em}
  .chip span{display:none}
  .mega{--fixed:395px}
  .specs dd{font-size:.96rem}
  .plate h3{font-size:1.9rem}
  .dock span{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  .links a:not(.btn){font-size:1.8rem;padding:10px 0 8px}
  .file-tile{aspect-ratio:1/.5}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tape-run,.dot,.rec{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .tile.arm .spec{opacity:1;animation:none}
  .js .tile.arm .scan,.js .tile.done .scan{opacity:0;animation:none}
  .js .tile.done .xband,.js .tile.done .sweep{animation:none}
  .sheet-panel,.sheet-scrim,.links,.dock{transition:none}
}

/* =====================================================================
   HERO: dark top like the footer (orange lettering, bone text), light ground underneath.
   The dark ends just under the buttons. Desktop: the dark band holds the copy and the file card.
   Phones: the dark holds the copy only, the file card sits on the light ground below.
   Full-bleed is done with a huge box-shadow clipped top and bottom, so the grid itself stays in the wrap.
   ===================================================================== */
.hero{padding-top:0}
.hero-in,.hero-copy{isolation:isolate}
.hero-in{padding-top:clamp(22px,3.2vw,46px);padding-bottom:clamp(52px,5.2vw,76px);background:var(--ink);color:var(--bone);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
.hero-in::before,.hero-in::after{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;pointer-events:none}
.hero-in::before{top:0;bottom:0;z-index:-1;background:var(--bone);opacity:.06;-webkit-mask:url(/assets/contours-a3.svg) center/cover no-repeat;mask:url(/assets/contours-a3.svg) center/cover no-repeat}
.hero-in::after{bottom:-1px;height:28px;background:var(--bone);-webkit-mask:url(/assets/torn-a.svg) repeat-x left bottom/1400px 28px;mask:url(/assets/torn-a.svg) repeat-x left bottom/1400px 28px}
.hero .eyebrow,.hero .lede{color:var(--bone)}
.hero .lede strong{background:var(--hot);color:var(--ink)}
.w-wild,.w-uncut{color:var(--hot)}
.w-raw{color:var(--bone)}
.w-bar{fill:var(--bone)}
.hero .btn.line{background:var(--bone);color:var(--ink)}
.hero-file{color:var(--ink);box-shadow:9px 9px 0 var(--hot)}
@media (hover:hover){
  .hero .btn.hot:hover{background:var(--bone);color:var(--ink)}
  .hero .btn.line:hover{background:var(--hot);color:var(--ink)}
}
@media (max-width:700px){
  .hero-in{padding-top:0;padding-bottom:0;gap:40px;background:none;color:inherit;box-shadow:none;clip-path:none}
  .hero-in::before,.hero-in::after{content:none}
  .hero-copy{position:relative;padding:20px 0 46px;background:var(--ink);color:var(--bone);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
  .hero-copy::before,.hero-copy::after{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;pointer-events:none}
  .hero-copy::before{top:0;bottom:0;z-index:-1;background:var(--bone);opacity:.06;-webkit-mask:url(/assets/contours-a3.svg) center/cover no-repeat;mask:url(/assets/contours-a3.svg) center/cover no-repeat}
  .hero-copy::after{bottom:-1px;height:28px;background:var(--bone);-webkit-mask:url(/assets/torn-a.svg) repeat-x left bottom/1400px 28px;mask:url(/assets/torn-a.svg) repeat-x left bottom/1400px 28px}
  .hero-file{box-shadow:6px 6px 0 var(--ink)}
}

/* =====================================================================
   V2.0 EXTREME: entering the wild
   ===================================================================== */
:root{--ink-lit:#2B2117;--peat:#120D09;--khaki:#DDD4BC}

/* ---------- arrival overlay (html.enter is set in the head once per visit, cleared by app.js) ---------- */
.entrance{display:none}
.enter .entrance{display:grid;position:fixed;inset:0;z-index:95;place-items:center;background:var(--ink) url(/assets/grain.png);color:var(--bone);pointer-events:none;animation:wo-ent-out .32s ease 480ms both}
@keyframes wo-ent-out{to{opacity:0;visibility:hidden}}
.ent-in{display:grid;justify-items:center;gap:18px;translate:0 -4vh}
.ent-mark{width:74px;height:74px;fill:none;stroke:var(--hot);stroke-width:6;stroke-linecap:square;overflow:visible}
.ent-mark .ring{stroke-dasharray:94.3;stroke-dashoffset:94.3;transform:rotate(-90deg);transform-origin:50% 50%;animation:wo-ring .4s var(--ease) 40ms both}
.ent-mark .ticks{opacity:0;animation:wo-fade .2s ease 280ms both}
.ent-mark .dot{fill:var(--bone);stroke:none;transform:scale(0);transform-origin:50% 50%;animation:wo-pop .28s cubic-bezier(.2,1.6,.4,1) 340ms both}
.ent-text{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em;opacity:0;animation:wo-track .5s var(--ease) 140ms both}
.ent-bar{display:block;width:120px;height:3px;background:var(--hot);transform:scaleX(0);transform-origin:0 50%;animation:wo-draw .45s var(--ease) 120ms both}
@keyframes wo-ring{to{stroke-dashoffset:0}}
@keyframes wo-fade{to{opacity:1}}
@keyframes wo-pop{to{transform:scale(1)}}
@keyframes wo-track{from{opacity:0;letter-spacing:.7em}to{opacity:1;letter-spacing:.42em}}
@keyframes wo-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the hero assembles as the overlay lifts: each word is stamped on, the bar is drawn, the rest rises */
.enter .hero .eyebrow{animation:wo-rise .45s var(--ease) 440ms both}
.enter .mega .w{transform-origin:0 70%;will-change:transform,opacity;animation:wo-stamp .36s cubic-bezier(.2,1.35,.3,1) both}
.enter .w-wild{animation-delay:470ms}
.enter .w-raw{animation-delay:560ms}
.enter .w-uncut{animation-delay:650ms}
.enter .w-bar{transform-origin:0 50%;animation:wo-draw .45s var(--ease) 760ms both}
.enter .lede{animation:wo-rise .45s var(--ease) 800ms both}
.enter .cta-row .btn:nth-child(1){animation:wo-rise .45s var(--ease) 850ms both}
.enter .cta-row .btn:nth-child(2){animation:wo-rise .45s var(--ease) 900ms both}
.enter .hero-file{animation:wo-rise .55s var(--ease) 780ms both}
@keyframes wo-stamp{from{opacity:0;transform:scale(1.22) rotate(-1.6deg)}55%{opacity:1}to{opacity:1;transform:none}}
@keyframes wo-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* ---------- the air in the hero: mycelium creeping in, spores drifting, dusk light ---------- */
.hero-in{--hpt:clamp(22px,3.2vw,46px);--hpb:clamp(52px,5.2vw,76px)}
.wildair,.motes{position:absolute;left:0;top:calc(var(--hpt)*-1);width:100vw;height:calc(100% + var(--hpt) + var(--hpb));z-index:-1;pointer-events:none}
@media (min-width:701px){.hero-copy{align-self:stretch}}
.wildair{-webkit-mask:radial-gradient(ellipse 62% 58% at 50% 46%,rgba(0,0,0,.3),#000 100%);mask:radial-gradient(ellipse 62% 58% at 50% 46%,rgba(0,0,0,.3),#000 100%)}
.wildair{background:
  radial-gradient(70% 55% at 18% 8%,rgba(255,90,31,.13),transparent 62%),
  radial-gradient(60% 50% at 88% 96%,rgba(31,58,38,.55),transparent 66%),
  radial-gradient(120% 80% at 50% 50%,transparent 60%,rgba(12,8,5,.45) 100%)}
.hero-copy{position:relative}
.hero-copy>*:not(canvas){position:relative;z-index:1}

/* ---------- depth on every band: lit from within, edges left flat so the torn pieces match ---------- */
.band{background-image:radial-gradient(70% 58% at 50% 42%,rgba(255,255,255,.045),transparent 72%)}
.band.mudd{background-image:radial-gradient(60% 50% at 50% 38%,rgba(255,90,31,.12),transparent 70%)}
.gb-panel{background-image:radial-gradient(80% 60% at 30% 40%,rgba(212,225,87,.07),transparent 70%)}
.au-panel{background-image:radial-gradient(80% 60% at 30% 40%,rgba(255,180,92,.14),transparent 70%)}
.tile{background-image:radial-gradient(120% 95% at 50% 50%,transparent 52%,rgba(0,0,0,.42) 100%),radial-gradient(62% 40% at 50% 88%,var(--glow),transparent 72%),linear-gradient(rgba(234,227,208,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(234,227,208,.055) 1px,transparent 1px);background-size:100% 100%,100% 100%,32px 32px,32px 32px}
.wild .tile,.hero-tile{cursor:url(/assets/cursor.svg) 16 16,crosshair}

/* ---------- buttons: a sheen crosses on hover ---------- */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:-2px;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.26) 50%,transparent 68%);transform:translateX(-130%);transition:transform .6s var(--ease);pointer-events:none}
@media (hover:hover){.btn:hover::before{transform:translateX(130%)}}

/* ---------- hero file card: tags, readout, specimen strip ---------- */
.hero-tile .code,.hero-tile .land{top:12px}
.hero-tile .corner.tl,.hero-tile .corner.tr{display:none}
.hero-tile .corner.bl,.hero-tile .corner.br{bottom:58px}
.scan-sub{flex-basis:100%;margin-top:2px;color:rgba(234,227,208,.7);letter-spacing:.08em;font-weight:500}
.scan-sub i{font-style:normal;opacity:.5;margin:0 .35em}
.thumbs{display:flex;gap:4px;padding:8px 10px;border-top:2px solid var(--ink);background:var(--bone)}
.thumbs button{flex:1 1 0;min-width:0;aspect-ratio:1;padding:0;border:2px solid transparent;background:var(--moss);cursor:pointer;opacity:.6;transition:opacity .25s,border-color .25s,transform .25s var(--ease)}
.thumbs button[data-tone=au]{background:var(--dust-d)}
.thumbs button img{width:100%;height:100%;object-fit:contain;transform:scale(1.18)}
.thumbs button.on{opacity:1;border-color:var(--hot)}
@media (hover:hover){.thumbs button:hover{opacity:1;transform:translateY(-2px)}}
.file-stats dd{font-variant-numeric:tabular-nums}

/* ---------- mud + dust: the land itself ---------- */
.map{position:absolute;top:50%;right:-4%;width:min(46%,520px);translate:0 -50%;background:var(--lichen);opacity:.13;-webkit-mask:url(/assets/map-gb.svg) center/contain no-repeat;mask:url(/assets/map-gb.svg) center/contain no-repeat;pointer-events:none;z-index:1}
.map-gb{aspect-ratio:539/1002;width:min(30%,330px);right:4%}
.map-au{aspect-ratio:1002/909;background:var(--sun);opacity:.16;-webkit-mask-image:url(/assets/map-au.svg);mask-image:url(/assets/map-au.svg)}
.land-note{display:flex;align-items:center;gap:0;margin-top:14px;font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,227,208,.72)}
.land-note .dot{width:8px;height:8px;margin-right:10px;animation:none}
.au-panel .land-note{color:rgba(234,227,208,.86)}
.au-panel .land-note .dot{background:var(--ink)}

/* ---------- headings wipe in ---------- */
.js .wipe{clip-path:inset(0 100% -10% 0);transition:clip-path .9s var(--ease)}
.js .wipe.in{clip-path:inset(0 -2% -10% 0)}

/* ---------- desktop nav numbers ---------- */
@media (min-width:921px){
  .links a em{display:inline;font-style:normal;font-size:.62rem;margin-right:.5em;color:var(--hot-ink);vertical-align:.12em}
}

/* ---------- share + toast ---------- */
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:96;translate:-50% 0;background:var(--ink);color:var(--bone);font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:12px 18px;border-left:4px solid var(--hot);box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .3s var(--ease)}
.toast[hidden]{display:none}
.toast.on{opacity:1;transform:none}

/* ---------- scroll-driven depth where the browser has it ---------- */
@supports (animation-timeline: view()) {
  .live:not(.enter) .terrain{animation:wo-par-terrain linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes wo-par-terrain{from{translate:0 6%}to{translate:0 -10%}}
  .live:not(.enter) .w-wild{animation:wo-par-l linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .live:not(.enter) .w-raw{animation:wo-par-r linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .live:not(.enter) .w-uncut{animation:wo-par-l linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes wo-par-l{to{translate:-6% 0}}
  @keyframes wo-par-r{to{translate:6% 0}}
  .live .contour-bg,.live .map{animation:wo-par-bg linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes wo-par-bg{from{translate:0 -4%}to{translate:0 4%}}
  .live .map{animation-name:wo-par-map}
  @keyframes wo-par-map{from{translate:0 -56%}to{translate:0 -44%}}
}

/* ---------- phone menu goes dark ---------- */
@media (max-width:920px){
  .links{background:var(--ink) url(/assets/grain.png);color:var(--bone)}
  .links a:not(.btn){border-bottom-color:rgba(234,227,208,.22)}
  .links a:not(.btn):hover,.links a[aria-current="true"]{border-color:rgba(234,227,208,.22)}
  .links a[aria-current="true"]{color:var(--hot)}
  .links a em{color:var(--hot)}
  .links-note{color:rgba(234,227,208,.55)}
}
@media (max-width:860px){
  .map{right:-6%;width:min(44%,340px);top:46%}
  .map-gb{width:min(26%,200px);right:6%}
}
@media (max-width:700px){
  .hero-in{--hpt:0px;--hpb:0px}
  .map{right:-10%;width:52%;top:32%;opacity:.1}
  .map-gb{width:30%;right:4%;top:34%;opacity:.11}
  .map-au{opacity:.13}
  .thumbs{gap:3px;padding:7px 8px}
  .scan-sub{font-size:.68rem}
  .ent-mark{width:62px;height:62px}
}
@media (prefers-reduced-motion:reduce){
  .enter .entrance,.enter .hero .eyebrow,.enter .mega .w,.enter .w-bar,.enter .lede,.enter .cta-row .btn,.enter .hero-file{animation:none}
  .enter .entrance{display:none}
  .js .wipe{clip-path:none;transition:none}
  .btn::before{display:none}
  .toast{transition:none}
}

/* =====================================================================
   V3.0: photographic specimens. The photo carries its own studio backdrop and fades out at the edges into
   the tile; the grid now sits ABOVE the photo so the field-file look survives, and cover fills the frame.
   ===================================================================== */
.tile img{object-fit:cover;transform:scale(1.04)}
.tile .spec{transform:scale(1.04) translate3d(calc(var(--px,0)*-6px),calc(var(--py,0)*-4px),0)}
.tile::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(234,227,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(234,227,208,.05) 1px,transparent 1px);background-size:32px 32px;background-position:center;-webkit-mask:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 38%,#000 85%);mask:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 38%,#000 85%)}
.file-tile img,.file-tile .spec{transform:none}
/* a full-frame photo is busy behind the tags and the readout: soft dark bands keep them legible */
.tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(10,16,12,.55),transparent 22%),linear-gradient(to top,rgba(10,16,12,.6),transparent 30%)}
.tile[data-tone=au]::before{background:linear-gradient(to bottom,rgba(40,12,5,.55),transparent 22%),linear-gradient(to top,rgba(40,12,5,.6),transparent 30%)}
.wild>.tile::before{background:linear-gradient(to bottom,rgba(10,16,12,.5),transparent 20%),linear-gradient(to top,rgba(10,16,12,.35),transparent 18%)}
.wild.au>.tile::before{background:linear-gradient(to bottom,rgba(40,12,5,.5),transparent 20%),linear-gradient(to top,rgba(40,12,5,.35),transparent 18%)}
.wild.wide>.tile img{object-position:50% 55%}
.thumbs button img{transform:none}