/** Shopify CDN: Minification failed

Line 582:34 Unexpected "}"

**/

:root{
  --ink:#100F0B; --paper:#FCFBF6; --sepia:#2A2318;
  --bg:#8FD14F; --fg:#17300A; --chip:#F4FFE2; --deep:#0F2A02;
  --shell:min(1180px,92vw); --dur:.55s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{padding-top:var(--hdr,78px);font-family:'Instrument Sans',system-ui,sans-serif;background:var(--bg);color:var(--fg);
  transition:background-color var(--dur) ease,color var(--dur) ease;-webkit-font-smoothing:antialiased}
.d{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 112;font-weight:800;letter-spacing:-.035em;line-height:.92;text-transform:uppercase}
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:.72}
.shell{width:var(--shell);margin:0 auto}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99;border-radius:6px}
img{max-width:100%}

header{position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--paper);color:var(--ink);border-bottom:1px solid rgba(0,0,0,.09);
  transition:box-shadow .25s ease}
header.stuck{box-shadow:0 6px 22px rgba(0,0,0,.12)}
header.stuck{box-shadow:0 6px 22px rgba(0,0,0,.12)}
.nav{display:flex;align-items:center;height:78px;gap:1rem}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;line-height:0}
.brand-logo{display:block;width:auto;height:clamp(36px,4.4vw,50px);max-width:100%;
  transition:opacity .14s ease}
footer .brand-logo{height:clamp(42px,5vw,58px)}
.navlinks{display:flex;gap:2.4rem;margin:0 auto}
.nav a.lk{text-decoration:none;font-size:.98rem;font-weight:500;opacity:.85;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a.lk:hover{opacity:1}
.nav a.lk.on{opacity:1;border-bottom-color:var(--bg)}
.navend{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.iconbtn{background:none;border:0;color:inherit;width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative}
.iconbtn:hover{background:rgba(0,0,0,.06)}
.iconbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cbadge{position:absolute;top:3px;right:2px;min-width:18px;height:18px;border-radius:99px;background:var(--bg);color:var(--fg);
  font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;
  transition:background-color var(--dur) ease,color var(--dur) ease}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;width:42px;height:42px;align-items:center;justify-content:center}
.burger svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}

.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:.7rem 0}
.ticker.flip{background:var(--bg);color:var(--fg);transition:background-color var(--dur) ease,color var(--dur) ease}
.tk{display:flex;width:max-content;animation:slide 45s linear infinite}
.tk span{font-family:'Archivo';font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;padding:0 1.4rem;white-space:nowrap}
.tk i{font-style:normal;opacity:.45}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.stage{position:relative;background:var(--ink);overflow:hidden;
  display:flex;flex-direction:column;align-items:center}
/* full-bleed poster, with its height capped so the hero and its controls
   still land inside one screen on any display */
.slides{position:relative;width:100%;
  height:min(calc(100svh - var(--hdr,72px)), 56.25vw);
  min-height:230px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide .bd{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(44px) brightness(.55) saturate(1.15);transform:scale(1.18)}
.slide img{position:relative;width:100%;height:100%;object-fit:contain;display:block}
.shoplink{position:absolute;inset:0;text-indent:-9999px;overflow:hidden}
.cbar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;
  gap:clamp(.4rem,1.4vw,.7rem);padding:.55rem clamp(.8rem,3vw,2.2rem);flex-wrap:nowrap;
  background:linear-gradient(transparent,rgba(0,0,0,.72) 45%)}
.dot{width:26px;height:5px;flex:none;border-radius:99px;border:0;background:rgba(255,255,255,.42);cursor:pointer;padding:0;transition:background .25s}
.dot.on{background:#fff}
.arrow:hover{background:rgba(0,0,0,.65)}
.pausebtn{background:rgba(255,255,255,.14);color:#fff;border:0;height:34px;padding:0 13px;flex:none;border-radius:99px;font:inherit;font-size:.78rem;cursor:pointer}

.strip{padding:1rem 0 1.4rem}
.stripin{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.6rem);flex-wrap:nowrap}
.rail{display:flex;gap:clamp(.4rem,1.2vw,.7rem);align-items:center;flex:none}
.marble{position:relative;width:clamp(38px,4.2vw,52px);height:clamp(38px,4.2vw,52px);flex:none;border-radius:50%;border:0;cursor:pointer;padding:0;
  box-shadow:inset 0 -7px 12px rgba(0,0,0,.32),inset 0 6px 10px rgba(255,255,255,.5),0 5px 12px rgba(0,0,0,.22);
  transition:transform .28s cubic-bezier(.3,1.5,.5,1),box-shadow .28s}
.marble::after{content:"";position:absolute;top:10px;left:12px;width:16px;height:11px;border-radius:50%;background:rgba(255,255,255,.72);transform:rotate(-22deg)}
.marble:hover{transform:translateY(-5px)}
.marble.on{transform:translateY(-9px) scale(1.1);box-shadow:inset 0 -7px 12px rgba(0,0,0,.32),inset 0 6px 10px rgba(255,255,255,.55),0 10px 20px rgba(0,0,0,.3),0 0 0 3px var(--fg)}
.marble.drop{animation:drop .45s cubic-bezier(.4,1.7,.5,1)}
@keyframes drop{0%{transform:translateY(-30px) scale(1.1)}55%{transform:translateY(2px) scale(1.16,.88)}100%{transform:translateY(-9px) scale(1.1)}}
.nowname{font-family:'Archivo';font-weight:800;font-size:clamp(1.1rem,2.6vw,1.7rem);letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.nowdesc{font-size:clamp(.8rem,1.4vw,.9rem);opacity:.8;max-width:34ch;line-height:1.45;margin-top:.25rem}
.facts{display:flex;gap:.45rem;margin-left:auto;flex:none}
.fact{background:var(--chip);color:var(--deep);border-radius:10px;padding:.5rem .7rem;transition:background-color var(--dur) ease,color var(--dur) ease}
.fact b{display:block;font-family:'Archivo';font-weight:800;font-size:clamp(.95rem,1.8vw,1.2rem);line-height:1;letter-spacing:-.03em}
.fact i{font-style:normal;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;opacity:.75}

.band{background:var(--paper);color:var(--ink);padding:clamp(3rem,7vw,5rem) 0}
.band.ink{background:var(--ink);color:var(--paper)}
.band.sepia{background:var(--sepia);color:#EFE6D2}
h2.sec{font-size:clamp(1.85rem,4.2vw,3rem);margin-bottom:.6rem}
.sub{opacity:.66;max-width:46ch;line-height:1.55;margin-bottom:2.4rem}

/* ---------- flavour spotlight (zevia-style) ---------- */
.spotouter{width:min(1560px,94vw);margin:0 auto;position:relative}
.spotwrap{position:relative}
.spotview{overflow:hidden;border-radius:26px}
.spottrack{display:flex;gap:22px;transition:transform .65s cubic-bezier(.32,.9,.26,1)}
.spotcard{flex:0 0 95%;border-radius:26px;padding:clamp(1.4rem,2.4vw,2.4rem);
  min-height:clamp(340px,40vw,560px);max-height:82svh;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.4rem,3.4vw,3.4rem);align-items:center}
.spotpic{border-radius:18px;overflow:hidden;aspect-ratio:1/1;
  background-color:rgba(0,0,0,.06);background-position:center;background-repeat:no-repeat;background-size:contain}
.spotbody{padding-right:clamp(0rem,3vw,2.6rem)}
.spotbody h3{font-family:'Archivo';font-weight:800;font-variation-settings:'wdth' 90;
  font-size:clamp(2.4rem,5.6vw,4.6rem);letter-spacing:-.02em;line-height:.92;text-transform:uppercase}
.spotbody p{font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.65;margin:1.2rem 0 1.6rem;max-width:46ch;opacity:.88}
.spotmeta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.9rem}
.spotmeta span{border:1.5px solid currentColor;border-radius:999px;padding:7px 15px;font-size:.74rem;
  letter-spacing:.09em;text-transform:uppercase;font-weight:600;opacity:.75}
.spotbuy{display:inline-flex;align-items:center;gap:.6rem;border:0;font:inherit;font-weight:600;font-size:.95rem;
  padding:17px 38px;border-radius:999px;cursor:pointer}
.spotbuy.done{opacity:.75}
.spotarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.25);background:var(--paper);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer}
.spotarrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.spotarrow.p{left:-18px}
.spotarrow.n{right:-18px}
.spotdots{display:flex;gap:.5rem;justify-content:center;margin-top:1.6rem}
.sdot{width:38px;height:6px;border-radius:99px;border:0;padding:0;background:rgba(0,0,0,.18);cursor:pointer;transition:background .25s}
.sdot.on{background:var(--ink)}


.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.split img{width:100%;height:auto;border-radius:16px;display:block}
.wide img{width:100%;border-radius:18px;display:block}
.wide .bgimg{display:block;width:100%;aspect-ratio:1180/787;border-radius:18px;
  background-position:center;background-repeat:no-repeat;background-size:contain}

.popbox{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.8rem}
.popbtn{width:88px;height:88px;border-radius:50%;border:0;cursor:pointer;background:#3E7A2E;position:relative;transition:transform .12s;
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.4),inset 0 9px 14px rgba(255,255,255,.42),0 8px 18px rgba(0,0,0,.35)}
.popbtn::after{content:"";position:absolute;top:16px;left:19px;width:24px;height:16px;border-radius:50%;background:rgba(255,255,255,.7);transform:rotate(-22deg)}
.popbtn:active{transform:scale(.9)}
.popbtn.pressed{animation:popa .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes popa{0%{transform:scale(.86)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.poptext{font-family:'Archivo';font-weight:800;font-size:clamp(1.2rem,3vw,1.9rem);text-transform:uppercase;letter-spacing:-.02em}

.bundles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.bundle{border:1px solid rgba(0,0,0,.13);border-radius:16px;padding:1.4rem;background:#fff;display:flex;flex-direction:column;color:var(--ink)}
.bundle.best{border:2px solid var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.09);
  transition:border-color var(--dur) ease}
.bundle.best .p{color:var(--deep);transition:color var(--dur) ease}
.lineup4{display:flex;gap:.25rem;align-items:flex-end;justify-content:center;margin-bottom:.9rem;
  background:var(--chip);border-radius:12px;padding:.5rem .6rem;
  transition:background-color var(--dur) ease}
/* single packshot of all four cans */
.lineup4 .lineupim{display:block;width:100%;height:auto;max-height:170px;object-fit:contain}
/* legacy four-tile variant */
.lineup4 .lc{height:104px;flex:1;background:center bottom/contain no-repeat}
/* ---------- flavour picker on a case card ---------- */
.fcase{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin:.2rem 0 .7rem}
.fc{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:var(--chip);border:1.5px solid transparent;border-radius:12px;
  padding:.5rem .25rem .4rem;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .16s,background-color .16s,transform .12s}
.fc:hover{transform:translateY(-2px)}
.fc.on{border-color:var(--deep);background:#fff}
.fc:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.fc-can{width:100%;height:52px;background:center bottom/contain no-repeat}
.fc-n{font-size:.62rem;line-height:1.25;text-align:center;font-weight:600;min-height:2.5em;display:flex;align-items:center;
  letter-spacing:.01em;opacity:.75}
.fc.on .fc-n{opacity:1}
.fc.out{opacity:.5}
.fc.out .fc-can{filter:grayscale(.7)}
.pdphint{grid-column:1;font-size:.72rem;line-height:1.45;margin-top:.7rem;padding:.55rem .7rem;border-radius:8px;background:rgba(0,0,0,.06);opacity:.85}
.ci-p{display:block;font-style:normal;font-size:.74rem;opacity:.65;margin-top:.15rem}
.pdpflav-h{font-size:.82rem;font-weight:600;margin:.2rem 0 .5rem}
.pdpflav-h .sf-hint{font-weight:400;opacity:.6}
.fnote{font-size:.83rem;line-height:1.5;opacity:.75;margin:0 0 .9rem;min-height:2.5em}
.fhint{font-size:.75rem;line-height:1.45;margin-top:.7rem;padding:.55rem .7rem;
  border-radius:8px;background:rgba(0,0,0,.05);opacity:.8}

.tag{align-self:flex-start;background:var(--bg);color:var(--fg);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:999px;margin-bottom:.8rem;transition:background-color var(--dur) ease,color var(--dur) ease}
.bundle h3{font-family:'Archivo';font-weight:800;font-size:1.3rem;text-transform:uppercase}
.bundle .p{font-family:'Archivo';font-weight:800;font-size:2rem;letter-spacing:-.03em;margin:.5rem 0 .1rem}
.bundle .u{font-size:.78rem;opacity:.6;margin-bottom:1rem}
.bundle ul{list-style:none;font-size:.87rem;line-height:1.9;margin-bottom:1.3rem;flex:1}
.bundle li::before{content:"—";opacity:.4;margin-right:.5rem}
.btn{display:inline-block;text-align:center;background:var(--ink);color:var(--paper);border:0;font:inherit;font-weight:600;font-size:.9rem;padding:12px 22px;border-radius:999px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:currentColor;border:1.5px solid currentColor}

.ledger{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.ledger h3{font-family:'Archivo';font-weight:800;font-size:1.05rem;text-transform:uppercase;padding-bottom:.7rem;border-bottom:2px solid currentColor;margin-bottom:.4rem}
.ledger li{list-style:none;padding:.72rem 0;border-bottom:1px solid rgba(128,128,128,.24);font-size:.95rem}
.ledger .no{opacity:.42;text-decoration:line-through}

.story{max-width:62ch;font-size:1.08rem;line-height:1.75}
.story p{margin-bottom:1.2rem}

.signup{display:flex;gap:.6rem;max-width:440px;margin-top:1.4rem}
.signup input{flex:1;margin:0}
.newsnote{font-size:.8rem;opacity:.6;margin-top:.8rem;max-width:44ch;line-height:1.5}

.cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:start}
label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:.4rem;opacity:.75}
input,select,textarea{width:100%;font:inherit;font-size:.95rem;padding:12px 14px;border:1.5px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;color:#100F0B;margin-bottom:1rem}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#100F0B;outline:none}
.err{color:#B3261E;font-size:.8rem;margin:-.7rem 0 .9rem;display:none}
.err.show{display:block}
.bad{border-color:#B3261E}
.ok{background:#E9F6EC;border:1px solid #1E7B3C;color:#14532A;padding:1rem 1.1rem;border-radius:12px;font-size:.92rem;margin-bottom:1rem;display:none}
.ok.show{display:block}
.info{background:var(--ink);color:var(--paper);border-radius:16px;padding:1.6rem;text-align:center}
.info .ccan{display:block;width:100%;max-width:150px;height:190px;margin:0 auto 1.2rem;background:center/contain no-repeat}
.info h3{font-family:'Archivo';font-weight:800;text-transform:uppercase;font-size:1.05rem;margin-bottom:1rem}
.info dl{text-align:left}
.info dt{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;opacity:.55;margin-top:1rem}
.info dd{font-size:.95rem;line-height:1.5;margin-top:.2rem}
.info a{color:var(--bg);transition:color var(--dur) ease}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:none}
.scrim.open{display:block}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(390px,90vw);background:var(--paper);color:var(--ink);z-index:61;padding:1.5rem;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer h3{font-family:'Archivo';font-weight:800;text-transform:uppercase;font-size:1.2rem;margin-bottom:1.2rem}
.ci{display:flex;gap:.8rem;align-items:center;padding:.8rem 0;border-bottom:1px solid rgba(0,0,0,.1);font-size:.9rem}
.ci .n{flex:1}
.ci button{background:none;border:1px solid rgba(0,0,0,.2);width:26px;height:26px;border-radius:6px;cursor:pointer;font:inherit}
.empty{opacity:.55;font-size:.92rem;padding:2rem 0}
.tot{display:flex;font-family:'Archivo';font-weight:800;font-size:1.25rem;padding:1.1rem 0;margin-top:auto;border-top:2px solid var(--ink)}
.tot span:last-child{margin-left:auto}
.close{position:absolute;top:1.1rem;right:1.2rem;background:none;border:0;font-size:1.5rem;cursor:pointer;line-height:1}

footer{background:var(--ink);color:var(--paper);padding:3rem 0 2rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
footer h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:.9rem;font-weight:600}
footer li{list-style:none;margin-bottom:.5rem}
footer a{font-size:.9rem;opacity:.8;text-decoration:none}
footer a:hover{opacity:1}
.legal{border-top:1px solid rgba(255,255,255,.14);padding-top:1.4rem;display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.8rem;opacity:.55}

/* ---------- our story (zevia-style) ---------- */
.ourstory{background:var(--paper);color:var(--ink);padding:clamp(3.2rem,7vw,5.5rem) 0}
.osgrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.osgrid h2{font-size:clamp(2.1rem,5vw,3.4rem);margin:.55rem 0 1.4rem}
.osgrid p{font-size:1.02rem;line-height:1.72;margin-bottom:1.1rem;opacity:.82;max-width:52ch}
.osgrid p:last-of-type{margin-bottom:0}
.thenstage{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1180/787;
  background:var(--bg);transition:background-color var(--dur) ease}
.thenstage .thenslide{position:absolute;inset:0;display:block;background-size:contain;background-repeat:no-repeat;background-position:center;
  opacity:0;transition:opacity .32s ease}
.thenstage .thenslide.on{opacity:1}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2.4rem,5vw,3.4rem);
  border-top:1px solid rgba(0,0,0,.12);padding-top:2rem}
.badge{text-align:center}
.badge .ic{width:54px;height:54px;margin:0 auto .7rem;border-radius:50%;background:var(--bg);color:var(--fg);
  display:flex;align-items:center;justify-content:center;transition:background-color var(--dur) ease,color var(--dur) ease}
.badge .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.badge b{display:block;font-family:'Archivo';font-weight:800;font-size:.92rem;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2}
.badge span{display:block;font-size:.8rem;opacity:.6;margin-top:.25rem;line-height:1.45}
@media(max-width:860px){
  .osgrid{grid-template-columns:1fr}
  .badges{grid-template-columns:1fr 1fr;gap:1.6rem}
}

/* ---------- "we deserve better" statement band ---------- */
.deserve{background:var(--paper);color:var(--ink);padding:clamp(3rem,7vw,5rem) 0 clamp(2.6rem,6vw,4rem);overflow:hidden}
.dsv{width:min(1500px,96vw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,clamp(220px,22vw,340px)) minmax(0,1fr);
  align-items:stretch;gap:clamp(.7rem,1.8vw,1.8rem);overflow:hidden}
.dsvword{container-type:inline-size;padding-block:clamp(.4rem,1.6vw,1.4rem);
  font-family:'Archivo';font-weight:900;font-variation-settings:'wdth' 112;
  font-size:clamp(2rem,min(6.6vw,17svh),7rem);line-height:.85;letter-spacing:-.05em;text-transform:uppercase;
  color:var(--deep);display:flex;transition:color var(--dur) ease}
.dsvword.a{align-items:flex-start;justify-content:flex-end;padding-right:.05em}
.dsvword.b{align-items:flex-end;justify-content:flex-start;padding-left:.05em}
.dsvpic{position:relative;border-radius:26px;align-self:center;aspect-ratio:3/4;max-height:62svh;background:var(--bg);overflow:hidden;transition:background-color var(--dur) ease}
.dsvstack{position:absolute;inset:0}
.dsvstack .dsvslide{position:absolute;inset:0;display:block;background-size:cover;background-position:center;
  opacity:0;transition:opacity .32s ease}
.dsvstack .dsvslide.on{opacity:1}
.callout{position:absolute;z-index:3;display:flex;align-items:center;gap:.45rem;max-width:74%;
  background:rgba(255,255,255,.94);color:#100F0B;border-radius:999px;
  padding:7px 14px;font-size:.7rem;font-weight:600;letter-spacing:.045em;text-transform:uppercase;line-height:1.25;
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.callout i{width:8px;height:8px;border-radius:50%;background:var(--bg);flex:none;transition:background-color var(--dur) ease}
.co1{top:6%;left:5%}
.co2{top:26%;right:5%}
.co3{bottom:19%;left:5%}
.co4{bottom:6%;right:5%}
.dsvfoot{width:min(900px,92vw);margin:clamp(2.2rem,5vw,3.4rem) auto 0;text-align:center}
.dsvfoot p{font-size:clamp(1rem,1.6vw,1.16rem);line-height:1.7;opacity:.78}
.dsvchips{display:none;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.4rem}
.dsvchips span{border:1.5px solid var(--deep);color:var(--deep);border-radius:999px;padding:7px 14px;
  font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;transition:color var(--dur) ease,border-color var(--dur) ease}
@media(max-width:980px){
  .dsv{grid-template-columns:1fr;gap:.2rem;text-align:center}
  .dsvword{justify-content:center}
  .dsvword>span{font-size:min(clamp(2.8rem,17vw,6.5rem),15svh)}
  .dsvword.a{order:1}.dsvpic{order:2;margin:.4rem auto}.dsvword.b{order:3}
  .callout{font-size:.66rem;padding:6px 12px}
  .dsvpic{width:min(420px,86vw)}
}

/* ---------- play band ---------- */
.playband{background:var(--ink);color:var(--paper);padding:clamp(3rem,7vw,5rem) 0}
.playcards{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.playcard{position:relative;border-radius:20px;padding:clamp(1.5rem,3vw,2.2rem);text-align:left;
  border:0;font:inherit;cursor:pointer;color:var(--fg);background:var(--bg);
  transition:background-color var(--dur) ease,color var(--dur) ease,transform .25s;overflow:hidden}
.playcard:hover{transform:translateY(-5px)}
.playcard h3{font-family:'Archivo';font-weight:800;font-size:clamp(1.5rem,3.2vw,2.1rem);
  text-transform:uppercase;letter-spacing:-.03em;line-height:1;margin-bottom:.6rem}
.playcard p{font-size:.95rem;line-height:1.55;opacity:.85;max-width:34ch;margin-bottom:1.2rem}
.playcard .go{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;
  background:var(--deep);color:var(--bg);padding:10px 20px;border-radius:999px;transition:all var(--dur) ease}
.playcard .art{position:absolute;right:-10px;bottom:-18px;font-size:5.5rem;opacity:.17;line-height:1;pointer-events:none}

/* ---------- game modal ---------- */
.gscrim{position:fixed;inset:0;background:rgba(8,8,6,.82);z-index:80;display:none;align-items:center;justify-content:center;padding:1rem}
.gscrim.open{display:flex}
.gbox{width:min(760px,96vw);background:var(--paper);color:var(--ink);border-radius:22px;overflow:hidden;position:relative}
.gtop{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;background:var(--ink);color:var(--paper)}
.gtop b{font-family:'Archivo';font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:1.05rem;margin-right:auto}
.gstat{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8;white-space:nowrap}
.gclose{background:none;border:0;color:inherit;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
.gcanvas{display:block;width:100%;height:auto;background:#2A2318;touch-action:none;cursor:pointer}
.gfoot{padding:.9rem 1.2rem 1.2rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;min-height:64px}
.gmsg{font-size:.95rem;line-height:1.5;flex:1;min-width:180px}
.gmsg b{font-family:'Archivo';font-weight:800;text-transform:uppercase}
.gbtn{background:var(--ink);color:var(--paper);border:0;font:inherit;font-weight:600;font-size:.88rem;
  padding:11px 22px;border-radius:999px;cursor:pointer}
.gbtn.alt{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.gcode{font-family:'Archivo';font-weight:800;letter-spacing:.12em;background:var(--bg);color:var(--fg);
  padding:9px 16px;border-radius:8px;font-size:1rem;transition:background-color var(--dur) ease,color var(--dur) ease}
@media(max-width:760px){.playcards{grid-template-columns:1fr}}
@media(max-width:700px){
  .gscrim{padding:.4rem}
  .gbox{width:100%;max-height:96svh}
  .gcanvas{max-height:none}
  .gtop{padding:.7rem .9rem}
  .gtop b{font-size:.95rem}
  .gstat{font-size:.7rem}
  .gfoot{padding:.7rem .9rem .9rem;gap:.5rem;min-height:0}
  .gmsg{font-size:.86rem;min-width:100%}
  .gbtn{padding:9px 16px;font-size:.82rem;flex:1}
}

.slide .heroTall{display:none}
@media(max-width:860px){
  /* .slide img sets display:block, so this selector has to match its specificity */
  .slide img.heroWide{display:none}
  .slide .heroTall{display:block;position:absolute;inset:0;
    background-size:cover;background-position:center;z-index:2}
}

/* hero scrubber */
.scrub{position:relative;flex:1;min-width:90px;max-width:300px;height:34px;margin:0 .45rem;display:flex;align-items:center}
.scrub::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:99px;background:rgba(255,255,255,.26)}
.scrubfill{position:absolute;left:0;height:4px;border-radius:99px;background:#fff;width:0;transition:width .12s linear}
.scrubknob{position:absolute;left:0;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.45);margin-left:-8px;pointer-events:none;transition:left .12s linear}
.scrub.drag .scrubfill,.scrub.drag .scrubknob{transition:none}
.scrubin{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:ew-resize}
@media(max-width:620px){.scrub{max-width:none;margin:0 .3rem}.pausebtn{display:none}}

/* hero play badge */
.heroplay{position:absolute;top:clamp(.8rem,2.2vw,1.4rem);right:clamp(.8rem,2.2vw,1.4rem);z-index:6;
  display:flex;align-items:center;gap:.7rem;text-decoration:none;
  background:rgba(16,15,11,.72);backdrop-filter:blur(8px);color:#fff;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:.55rem 1rem .55rem .6rem;box-shadow:0 8px 26px rgba(0,0,0,.4);
  transition:background-color .25s,transform .25s}
.heroplay:hover{background:rgba(16,15,11,.9);transform:translateY(-2px)}
.hp-marble{width:26px;height:26px;border-radius:50%;flex:none;background:var(--bg);position:relative;
  box-shadow:inset 0 -5px 8px rgba(0,0,0,.4),inset 0 4px 6px rgba(255,255,255,.6);
  transition:background-color var(--dur) ease;animation:hpbob 2.6s ease-in-out infinite}
.hp-marble::after{content:"";position:absolute;top:5px;left:6px;width:8px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.8);transform:rotate(-22deg)}
@keyframes hpbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.hp-txt{line-height:1.2}
.hp-txt b{display:block;font-family:'Archivo';font-weight:800;font-size:.86rem;letter-spacing:-.01em}
.hp-txt{font-size:.72rem;opacity:.75}
.hp-go{font-weight:700;opacity:.6;flex:none}
@media(max-width:620px){
  .heroplay{padding:.45rem .8rem .45rem .5rem;gap:.5rem}
  .hp-txt b{font-size:.76rem}
  .hp-txt{font-size:0}
  .hp-txt b{font-size:.76rem}
}

/* highlighted nav item */
.nav a.lk.hot{position:relative;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--bg);color:var(--fg);border-radius:999px;padding:7px 15px;
  font-weight:600;opacity:1;border-bottom:0;white-space:nowrap;
  transition:background-color var(--dur) ease,color var(--dur) ease,transform .2s}
.nav a.lk.hot:hover{transform:translateY(-1px)}
.nav a.lk.hot.on{border-bottom:0}
.nav a.lk.hot::after{content:"";position:absolute;inset:0;border-radius:999px;
  border:2px solid var(--bg);animation:hotpulse 2.4s ease-out infinite;pointer-events:none;
  transition:border-color var(--dur) ease}
@keyframes hotpulse{
  0%{transform:scale(1);opacity:.65}
  70%{transform:scale(1.28);opacity:0}
  100%{transform:scale(1.28);opacity:0}
}
.nav a.lk.hot .nd{width:15px;height:15px;border-radius:50%;flex:none;background:var(--deep);position:relative;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.45),inset 0 2px 4px rgba(255,255,255,.5);
  transition:background-color var(--dur) ease}
.nav a.lk.hot .nd::after{content:"";position:absolute;top:3px;left:3px;width:5px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.85);transform:rotate(-22deg)}
@media(max-width:860px){
  .nav.open .lk.hot{align-self:flex-start;width:auto;padding:9px 16px;margin:.35rem 0}
}
@media(prefers-reduced-motion:reduce){.nav a.lk.hot::after{animation:none;opacity:0}}

/* ---------- shop page ---------- */

.shopnote{margin-top:2rem;font-size:.9rem;opacity:.62}
.shopnote a{text-decoration:underline}

.shopcta{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.shopcta>div{flex:1;min-width:240px}
@media(max-width:600px){.shopcta{gap:1.2rem}}

.page.live{animation:pagein .34s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.page.live{animation:none}}

/* ---------- shop: product detail page ---------- */
.pdp{background:var(--chip);color:var(--deep);padding:1.2rem 0 clamp(2.5rem,6vw,4rem);
  transition:background-color var(--dur) ease,color var(--dur) ease}
.crumb{display:flex;gap:.5rem;font-size:.82rem;opacity:.6;margin-bottom:1.4rem}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.pdpgrid{display:grid;grid-template-columns:78px minmax(0,1fr) minmax(320px,.85fr);
  grid-template-rows:max-content auto;   /* row 1 hugs the image; row 2 takes the slack */
  gap:clamp(1rem,2.6vw,2rem);align-items:start}
.thumbs{grid-column:1;grid-row:1}
/* image and claims live in one column so the taller buy column can't
   stretch a gap between them */
.pdpmain{grid-column:2;grid-row:1;display:flex;flex-direction:column}
.pdpinfo{grid-column:3;grid-row:1}
.thumbs{display:flex;flex-direction:column;gap:.6rem}
.thumb{width:78px;height:78px;border-radius:12px;border:2px solid transparent;cursor:pointer;padding:0;
  background-color:var(--tile,rgba(255,255,255,.55));background-size:auto 74%;background-position:center;background-repeat:no-repeat;
  transition:border-color .2s,transform .2s}
.thumb:hover{transform:translateY(-2px)}
.thumb.on{border-color:var(--deep)}
.mainimg{border-radius:18px;aspect-ratio:1/1;max-height:70svh;background-color:var(--tile,var(--bg));background-position:center;background-repeat:no-repeat;background-size:contain;
  transition:background-color var(--dur) ease}
.pdpinfo{padding-top:.2rem}
.pdpinfo h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:.95;margin-bottom:.7rem}
.pdpsub{font-size:1rem;line-height:1.6;opacity:.8;margin-bottom:1.3rem;max-width:40ch}
.pdprow{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1rem}
.pdpprice{font-family:'Archivo';font-weight:800;font-size:1.9rem;letter-spacing:-.03em}
.pdpsize{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.pdpbuy{width:100%;background:var(--deep);color:var(--chip);border:0;font:inherit;font-weight:700;
  font-size:1.02rem;padding:17px;border-radius:999px;cursor:pointer;
  transition:background-color var(--dur) ease,color var(--dur) ease,transform .15s}
.pdpbuy:active{transform:scale(.99)}
.pdpbuy.done{opacity:.8}
.pdpalt{display:block;text-align:center;font-size:.85rem;opacity:.62;margin:.8rem 0 1.6rem;text-decoration:underline}
.selflav{background:rgba(255,255,255,.5);border-radius:16px;padding:1.1rem;margin-bottom:1.5rem}
.sf-h{font-size:.9rem;font-weight:600;margin-bottom:.8rem}
.sfgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.sf{background:rgba(255,255,255,.75);border:2px solid transparent;border-radius:12px;padding:.5rem .3rem .55rem;
  cursor:pointer;font:inherit;font-size:.7rem;line-height:1.2;color:inherit;text-align:center;
  transition:border-color .2s,transform .2s}
.sf:hover{transform:translateY(-2px)}
.sf.on{border-color:var(--deep)}
.sf-im{display:block;height:clamp(44px,7vw,58px);margin-bottom:.35rem;background:center/contain no-repeat}
.acc{border-top:1px solid rgba(0,0,0,.14)}
.acc summary{cursor:pointer;padding:.95rem 0;font-weight:600;font-size:.98rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:'Archivo';font-weight:800;font-size:1.2rem;opacity:.5}
.acc[open] summary::after{content:"\2212"}
.acc p{font-size:.92rem;line-height:1.65;opacity:.78;padding-bottom:1rem;max-width:46ch}
@media(max-width:980px){
  .pdpgrid{grid-template-columns:70px minmax(0,1fr)}
  .thumbs{grid-column:1;grid-row:1}
  .pdpmain{grid-column:2;grid-row:1}
  .pdpinfo{grid-column:1 / -1;grid-row:2;padding-top:1.2rem}
}
@media(max-width:560px){
  /* one column: clear the explicit placement, then order them */
  .pdpgrid{grid-template-columns:1fr}
  .thumbs,.pdpmain,.pdpinfo{grid-column:1 / -1;grid-row:auto}
  .pdpmain{order:1}
  .thumbs{flex-direction:row;order:2;overflow-x:auto;gap:.5rem;padding-bottom:.2rem;
    scrollbar-width:none}
  .thumbs::-webkit-scrollbar{display:none}
  .thumb{width:60px;height:60px;flex:none}
  .pdpinfo{order:3;padding-top:1rem}
  .sfgrid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- shop: product listing ---------- */
.listing{background:var(--paper);color:var(--ink);padding:clamp(2rem,5vw,3.4rem) 0 clamp(2.5rem,6vw,4rem)}
.listhead{font-size:clamp(2rem,5vw,3.2rem);margin:.4rem 0 2rem}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.cat{text-decoration:none;color:inherit;display:block}
.cat-im{display:block;background:var(--tile);border-radius:14px;aspect-ratio:1/1;
  background-size:auto 74%;background-position:center;background-repeat:no-repeat;
  transition:transform .28s,box-shadow .28s}
.cat:hover .cat-im{transform:translateY(-6px);box-shadow:0 18px 34px rgba(0,0,0,.16)}
.cat b{display:block;font-family:'Archivo';font-weight:800;font-size:1.02rem;margin-top:.85rem;text-align:center}
.cat i{display:block;font-style:normal;font-size:.78rem;opacity:.6;margin-top:.2rem;text-align:center}
.cat-four{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:14%}
.cat-four span{background:center/contain no-repeat}
@media(max-width:820px){.catgrid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.catgrid{grid-template-columns:1fr 1fr;gap:.8rem}.cat b{font-size:.9rem}}

/* ---------- responsive guards ---------- */
:root{--hdr:78px;--cbarH:86px}
@media(max-width:860px){:root{--hdr:70px;--cbarH:74px}body{padding-top:70px}}
html{max-width:100%}
/* clip, not hidden — `hidden` makes body a scroll container and breaks
   position:sticky on the header */
body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){ body{overflow-x:hidden} }
img,svg,video,canvas{max-width:100%}
*{min-width:0}
.shell,.spotouter,.dsv{max-width:100%}
/* long words must never force a sideways scroll */
h1,h2,h3,.d{overflow-wrap:break-word}
/* the game canvas scales with its box on every screen */
.gcanvas{width:100%;height:auto;aspect-ratio:76/50;max-height:66svh;display:block}
.gbox{max-height:94svh;overflow:auto}
@media(max-width:520px){
  .cbar{flex-wrap:wrap;justify-content:center;gap:.5rem}
  }

/* the two words scale to their own grid column, so they can never overflow */
@supports (font-size:1cqi){
  /* cqi on the container itself resolves against the viewport, so it goes on the child */
  .dsvword>span{font-size:min(22cqi, 19svh)}
}
.dsvword>span{display:block;white-space:nowrap;max-width:100%}

/* ---------- legacy: five chapters in one section ---------- */
.legacy{padding-top:clamp(1.3rem,2.6vw,2rem);padding-bottom:clamp(.9rem,1.8vw,1.3rem)}
.legacy>.shell:first-child .sub{margin-bottom:0}
.legacy>.shell:first-child h2.sec{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.4rem}
.legwrap{position:relative;margin-top:clamp(.7rem,1.6vw,1rem)}
/* only the visible chapter is in flow, so the section is exactly as tall as it */
.legstage{position:relative;min-height:clamp(280px,34svh,420px);
  transition:height .38s cubic-bezier(.32,.9,.26,1);overflow:hidden}
.legslide{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s ease}
.legslide.on{position:relative;opacity:1;visibility:visible;pointer-events:auto}
.legh{font-size:clamp(1.25rem,2.6vw,1.9rem);margin-bottom:.45rem;max-width:22ch}
.legslide .eyebrow{margin-bottom:.15rem}
.legslide .sub{margin-bottom:clamp(1rem,2vw,1.4rem);max-width:52ch}
.legslide p{margin-bottom:.7rem}
.legslide .split{gap:clamp(1rem,2.4vw,2rem);align-items:center}
.legslide .legslide .legslide .legslide .legslide .legslide .legslide .story{font-size:.98rem;line-height:1.6;max-width:56ch}
.legslide /* real <img> can be capped by height; the background-image spans need a width cap
   instead, or width:auto collapses them to nothing */
.legslide .legslide .popbox{margin-top:1.1rem}
.legslide .popbtn{width:66px;height:66px}
.legslide 
.legslide 
.legslide 
.legslide 
.legarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  color:var(--paper);font-size:1.2rem;line-height:1;cursor:pointer}
.legarrow:hover{background:var(--paper);color:var(--ink)}
.legarrow.p{left:max(.4rem,calc((100vw - var(--shell))/2 - 52px))}
.legarrow.n{right:max(.4rem,calc((100vw - var(--shell))/2 - 52px))}
.legbar{display:flex;align-items:center;gap:1rem}
.legdots{display:flex;gap:.5rem;flex-wrap:wrap}

.legpause{margin-left:auto;background:transparent;border:1.5px solid rgba(255,255,255,.28);color:var(--paper);
  font:inherit;font-size:.78rem;padding:7px 15px;border-radius:999px;cursor:pointer;flex:none}
.legpause:hover{background:var(--paper);color:var(--ink)}
@media(max-width:860px){
  .legarrow{width:36px;height:36px;font-size:1rem}
  .legarrow.p{left:.2rem}.legarrow.n{right:.2rem}
  .legslide .wide img,  .legslide }

.crickpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1.4vw,.9rem);
  max-width:min(100%,860px);margin:0 auto;align-items:center}
/* these spans sit outside .wide, so they need their own box rules or they collapse */
.crickpair .bgimg{display:block;width:100%;height:auto;border-radius:14px;
  background-position:center;background-repeat:no-repeat;background-size:cover}
.crickpair #cricketImg{aspect-ratio:1180/787}
.crickpair #cricketPop{aspect-ratio:1402/1122}
.crickcopy{max-width:64ch;margin:clamp(.9rem,2vw,1.3rem) auto 0;text-align:center;
  font-size:clamp(.86rem,1.5vw,.98rem);line-height:1.6;opacity:.82}
@media(max-width:560px){
  .crickpair{max-width:100%;gap:.4rem;grid-template-columns:1fr}
  .crickpair #cricketImg{aspect-ratio:1180/560}
  .crickpair #cricketPop{aspect-ratio:1402/900}
  .crickcopy{font-size:.82rem;text-align:left}
}

/* chapter tabs: numbered, named, with a progress fill */
.legdots{display:flex;gap:.4rem;flex-wrap:wrap;flex:1}
.legdot{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:.5rem .7rem .62rem;cursor:pointer;color:var(--paper);text-align:left;
  font:inherit;overflow:hidden;transition:background .25s,border-color .25s;flex:1 1 120px;min-width:0}
.legdot:hover{background:rgba(255,255,255,.14)}
.legdot.on{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.lg-n{display:block;font-family:'Archivo';font-weight:800;font-size:.68rem;letter-spacing:.12em;opacity:.5}
.lg-t{display:block;font-size:.8rem;font-weight:500;line-height:1.25;margin-top:.12rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.lg-bar i{display:block;height:100%;width:0;background:var(--bg);transition:background-color var(--dur) ease}
.legdot.on .lg-bar i{width:var(--p,0%)}
.legpop{display:flex;align-items:center;gap:1rem;margin-top:clamp(1rem,2vw,1.4rem)}
.legpop .popbtn{width:56px;height:56px}
.legpop .poptext{font-size:clamp(1rem,2.2vw,1.35rem)}
.popnote{font-size:.8rem;opacity:.55;margin-top:.2rem}
.legstage{touch-action:pan-y}
@media(max-width:720px){
  .legdots{gap:.3rem}
  .legdot{flex:1 1 60px;padding:.36rem .4rem .5rem;text-align:center}
  .lg-t{display:none}
  .lg-n{font-size:.72rem;opacity:.8}
  .legpop .popbtn{width:46px;height:46px}
}

/* chapter 04: the occasions poster, with click to enlarge */
.belongs{display:block;width:100%;max-width:1100px;margin:0 auto;padding:0;border:0;background:none;
  cursor:zoom-in;position:relative;border-radius:14px;overflow:hidden;line-height:0}
.belongs img{width:100%;height:auto;display:block;
  max-height:min(52svh,470px);object-fit:contain}
.belongs-zoom{position:absolute;right:.7rem;bottom:.7rem;background:rgba(8,8,6,.72);color:#fff;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;line-height:1;
  padding:7px 12px;border-radius:999px;opacity:0;transition:opacity .25s;backdrop-filter:blur(6px)}
.belongs:hover .belongs-zoom,.belongs:focus-visible .belongs-zoom{opacity:1}
@media(hover:none){.belongs-zoom{opacity:.85}}

/* lightbox */
.lbox{position:fixed;inset:0;z-index:90;background:rgba(8,8,6,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(.5rem,2vw,2rem)}
.lbox.open{display:flex}
.lbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px}
.lbox-close{position:absolute;top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem);
  width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.lbox-close:hover{background:#fff;color:#111}
.lbox-hint{position:absolute;left:0;right:0;bottom:clamp(.5rem,2vw,1.2rem);text-align:center;
  color:rgba(255,255,255,.55);font-size:.78rem}
@media(max-width:860px){
  .belongs img{max-height:min(40svh,320px)}
}

/* claims sit on the product image, so nothing extra is added to the page height */
.mainimg{position:relative}

/* clicking the big shot advances the gallery, so it needs to read as clickable */
.mainimg.tappable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mainimg.tappable:focus-visible{outline:3px solid var(--deep);outline-offset:3px}

/* the claims sit with the picture, not at the foot of the page */
.pdpbens{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;
  margin-top:clamp(.8rem,1.6vw,1.1rem)}
.pb{display:flex;align-items:flex-start;gap:.6rem;background:rgba(255,255,255,.5);
  border-radius:12px;padding:.7rem .8rem}
.pb-wide{grid-column:1 / -1}
.pb b{display:block;font-family:'Archivo';font-weight:800;font-size:.82rem;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.15}
.pb div span{display:block;font-size:.72rem;opacity:.65;margin-top:.18rem;line-height:1.35}
.pb-ic{width:32px;height:32px;border-radius:50%;flex:none;background:var(--bg);color:var(--fg);
  display:flex;align-items:center;justify-content:center;
  transition:background-color var(--dur) ease,color var(--dur) ease}
.pb-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:560px){
  .pdpbens{order:3;grid-template-columns:1fr 1fr;gap:.5rem}
  .pb{flex-direction:column;gap:.4rem;padding:.6rem}
  .pb b{font-size:.75rem}
  .pb div span{font-size:.68rem}
  .pdpinfo{order:4}
}


/* ---------- us versus them ---------- */
.vsband{background:var(--paper);color:var(--ink)}
.vstable{border:1px solid rgba(0,0,0,.14);border-radius:16px;overflow:hidden;max-width:820px}
.vsrow{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;
  border-top:1px solid rgba(0,0,0,.1)}
.vsrow:first-child{border-top:0}
.vsrow>span{padding:.85rem 1rem;font-size:.92rem}
.vsrow>span:first-child{font-weight:600}
.vsrow>span:not(:first-child){text-align:center;border-left:1px solid rgba(0,0,0,.1)}
.vshead{background:var(--chip);transition:background-color var(--dur) ease}
.vshead>span{padding:1rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.vshead b{font-family:'Archivo';font-weight:800;font-size:.88rem;text-transform:uppercase;letter-spacing:-.01em}
.vs-can{width:44px;height:62px;background:center/contain no-repeat}
.vs-blank{width:30px;height:58px;border-radius:5px 5px 4px 4px;
  background:linear-gradient(90deg,#b9bcc0,#e6e8ea 40%,#c9ccd0 70%,#a9adb2);
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.18)}
.vsrow .y,.vsrow .n{font-size:0}
.vsrow .y::before,.vsrow .n::before{content:"";display:inline-block;width:26px;height:26px;border-radius:50%;
  background-repeat:no-repeat;background-position:center;background-size:15px}
.vsrow .y::before{background-color:#2E8B4F;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")}
.vsrow .n::before{background-color:#C4433A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E")}
.vsrow .num{font-family:'Archivo';font-weight:800;font-size:1.02rem}
.vsrow .num.bad{color:#C4433A}
.vsnote{font-size:.78rem;opacity:.55;margin-top:.9rem;max-width:60ch}
@media(max-width:560px){
  .vsrow{grid-template-columns:1.35fr .8fr .8fr}
  .vsrow>span{padding:.7rem .55rem;font-size:.82rem}
  .vshead b{font-size:.74rem}
  .vs-can{width:34px;height:48px}
  .vs-blank{width:24px;height:45px}
  .vsrow .y::before,.vsrow .n::before{width:22px;height:22px;background-size:13px}
}


/* tabs sit above the chapter and stay put while a long one scrolls,
   so it is always obvious there are more */
.legbar{position:sticky;top:calc(var(--hdr,72px) + 2px);z-index:20;
  background:var(--ink);padding:.55rem 0 .7rem;margin-top:clamp(.9rem,2vw,1.3rem)}
.legbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}

.thennow-img{display:block;width:100%;height:auto;border-radius:18px;
  max-height:min(46svh,420px);object-fit:contain;margin:0 auto}
@media(max-width:860px){.thennow-img{max-height:min(32svh,280px)}}


/* hero arrows, pinned to the edges of the poster */
.heroarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:7;
  width:clamp(40px,4.4vw,54px);height:clamp(40px,4.4vw,54px);border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(12,11,8,.42);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:background-color .2s,border-color .2s,transform .2s,opacity .2s;opacity:.85}
.heroarrow:hover{background:#fff;color:#100F0B;border-color:#fff;opacity:1;
  transform:translateY(-50%) scale(1.06)}
.heroarrow:active{transform:translateY(-50%) scale(.96)}
.heroarrow:focus-visible{outline:3px solid var(--bg);outline-offset:3px}
.heroarrow svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.heroarrow.prev{left:clamp(.5rem,1.6vw,1.4rem)}
.heroarrow.next{right:clamp(.5rem,1.6vw,1.4rem)}
@media(max-width:620px){
  .heroarrow{width:38px;height:38px;opacity:.8}
  .heroarrow.prev{left:.35rem}.heroarrow.next{right:.35rem}
}
@media(hover:none){.heroarrow{opacity:.9}}


/* section header and the POP share one row, so the chapter starts sooner */
.leghead{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap}
.leghead-t{flex:1;min-width:min(100%,260px)}
.leghead .eyebrow{margin-bottom:.15rem}
.leghead h2.sec{font-size:clamp(1.6rem,4vw,2.6rem);margin:0}
.legpop{display:flex;align-items:center;gap:.7rem;flex:none;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.5rem 1.1rem .5rem .55rem;color:var(--paper);font:inherit;
  transition:background-color .2s,transform .18s}
.legpop:hover{background:rgba(255,255,255,.15)}
.legpop:active{transform:scale(.97)}
.legpop-marble{width:38px;height:38px;border-radius:50%;flex:none;background:var(--marble,#3E7A2E);
  position:relative;box-shadow:inset 0 -5px 8px rgba(0,0,0,.42),inset 0 4px 6px rgba(255,255,255,.5);
  transition:background-color var(--dur) ease}
.legpop-marble::after{content:"";position:absolute;top:8px;left:9px;width:10px;height:7px;
  border-radius:50%;background:rgba(255,255,255,.75);transform:rotate(-20deg)}
.legpop-t{text-align:left;line-height:1.15}
.legpop-t b{display:block;font-family:'Archivo';font-weight:800;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.02em}
.legpop-t i{display:block;font-style:normal;font-size:.7rem;opacity:.55;margin-top:.1rem}
@media(max-width:600px){
  .leghead{gap:.8rem}
  .leghead h2.sec{font-size:clamp(1.35rem,6vw,1.8rem)}
  .legpop{padding:.4rem .9rem .4rem .45rem}
  .legpop-marble{width:32px;height:32px}
  .legpop-marble::after{top:7px;left:8px;width:8px;height:6px}
  .legpop-t b{font-size:.76rem}
  .legpop-t i{display:none}
}

.page{display:none}
.page.live{display:block}

@media(max-width:860px){
  .slides{width:100%;height:min(calc(100svh - var(--hdr,66px)), 150vw)}
  .cgrid,.ledger,.split{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr 1fr}
  .stripin{flex-wrap:wrap;gap:.8rem}
  .facts{margin-left:0;flex-wrap:wrap;width:100%;order:3}
  .rail{order:1}
  .stripin>div:not(.rail):not(.facts){order:2;flex:1;min-width:150px}
  .spotcard{grid-template-columns:1fr;gap:1.3rem;min-height:0;flex-basis:92%}
  .spotpic{aspect-ratio:4/3}
  .spotbody{padding-right:0}
  .spotarrow.p{left:4px}
  .spotarrow.n{right:4px}
  .navlinks{display:none}
  .nav.open{height:auto;flex-wrap:wrap;padding-bottom:.8rem}
  .nav.open .navlinks{display:flex;flex-direction:column;gap:0;width:100%;order:3;margin:0;
    border-top:1px solid rgba(0,0,0,.09);padding-top:.5rem}
  .nav.open .lk{padding:.7rem 0;border-bottom:0}
  .burger{display:flex}
  .navlinks{margin-left:auto}
  .lineup4 .lineupim{max-height:130px}
  .lineup4 .lc{height:76px}
  .signup{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ---------- quantity stepper ---------- */
.buyrow{display:flex;align-items:stretch;gap:.65rem}

.qty{display:flex;align-items:stretch;flex:none;border-radius:999px;overflow:hidden;
  border:1.5px solid var(--deep);background:transparent;
  transition:border-color var(--dur) ease,box-shadow .18s}
.qty:focus-within{box-shadow:0 0 0 3px rgba(0,0,0,.10)}

.qbtn{width:46px;border:0;padding:0;margin:0;background:none;cursor:pointer;
  color:var(--deep);display:flex;align-items:center;justify-content:center;
  transition:background-color .16s,opacity .16s}
.qbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.qbtn:hover{background:rgba(0,0,0,.075)}
.qbtn:active{background:rgba(0,0,0,.13)}
.qbtn:disabled{opacity:.28;cursor:default;background:none}
.qbtn:focus-visible{outline:2px solid var(--deep);outline-offset:-4px;border-radius:50%}

.qnum{width:40px;border:0;padding:0;margin:0;background:none;color:var(--deep);
  font-family:'Archivo';font-weight:800;font-size:1rem;text-align:center;
  line-height:1;-moz-appearance:textfield;align-self:center}
.qnum::-webkit-outer-spin-button,.qnum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qnum:focus{outline:none}

.buyrow .pdpbuy{flex:1;width:auto}

@media(max-width:420px){
  .buyrow{gap:.5rem}
  .qbtn{width:42px}
  .qnum{width:34px}
}

/* ---------- add-to-cart toast ---------- */
.gtoast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,140%);z-index:70;
  display:flex;align-items:center;gap:.9rem;max-width:calc(100vw - 2rem);
  background:var(--ink);color:var(--paper);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.7rem 1rem .7rem 1.3rem;font-size:.88rem;
  box-shadow:0 12px 34px rgba(0,0,0,.34);opacity:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.32,.9,.26,1),opacity .32s}
.gtoast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.gtoast>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtoast-a{flex:none;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:700;
  font-size:.78rem;padding:7px 14px;border-radius:999px;transition:background-color var(--dur) ease}
.gtoast-a.alt{background:transparent;color:var(--paper);border:1px solid rgba(255,255,255,.3)}
.gtoast-a.alt:hover{background:var(--paper);color:var(--ink)}
@media(max-width:520px){
  .gtoast{left:.6rem;right:.6rem;transform:translateY(140%);max-width:none;
    border-radius:16px;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:.8rem}
  .gtoast.show{transform:translateY(0)}
  .gtoast>span{width:100%;text-align:center;white-space:normal}
}
.cartact{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.sf-hint{font-weight:400;opacity:.55;font-size:.8rem}
@media(max-width:420px){.sf-hint{display:none}}

.casesnote{grid-column:1/-1;background:rgba(0,0,0,.04);border:1px dashed rgba(0,0,0,.18);
  border-radius:16px;padding:1.4rem 1.6rem;max-width:60ch}
.casesnote p{font-size:.92rem;line-height:1.6;opacity:.8;margin-bottom:.6rem}
.casesnote p:last-child{margin-bottom:0}
.casesnote a{text-decoration:underline;font-weight:600}