/* ============================================================
   NOIDMERCH — v3 "THE ZINE"
   An oversized poster-zine: dark paper stock, pale ink, ONE
   orange ink (never light). Flyers are pasted-up light paper.
   Scroll = page turns (tear-off fwd / paste-down back).
   ============================================================ */

@font-face{
  font-family:'Ugocranis';
  src:url('assets/fonts/ugocranis.woff2') format('woff2');
  font-display:swap;
}

:root{
  --board:#111110;
  --paper:#1B1A18; --paper2:#211F1C;
  --ink:#DEDEDE; --ink2:#B9B7B0; --mut:#8B8B8B; --dim:#888681;
  /* --dim = dimmest TEXT tier; keeps the zine's warm/olive cast (R>G>B, same deltas
     as the old #55534E) while clearing WCAG AA on the board + paper stocks:
     #111110 → 5.19:1, #1B1A18 → 4.78:1, #211F1C → 4.52:1 (was #55534E = 2.46:1).
     Verified: no --dim text ever renders on the LIGHT flyer (#DEDEDE) — every
     --dim node sits on the dark board — so lightening cannot invert any pairing. */
  --decor:#55534E;
  --acc:#F25623; --accd:#C8451C;
  /* STAMP INK — the brand orange is a SCREEN light; pressed into the zine's light
     paper (#DEDEDE) it must read as INK: deeper and legible. 5.22:1 vs the screen
     orange's 2.55:1, which failed even the large-text bar. */
  --stamp:#9E3614;
  --flyer:#DEDEDE; --flyer2:#D8D5CC; --fink:#171717;
  --hair:rgba(222,222,222,.09);
  --disp:'Ugocranis','Space Grotesk',sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  /* rough rubber-stamp inking mask (luminance noise) */
  --rough:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.3' intercept='.42'/%3E%3CfeFuncG type='linear' slope='1.3' intercept='.42'/%3E%3CfeFuncB type='linear' slope='1.3' intercept='.42'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--board);color:var(--ink)}
body{
  font-family:var(--body);font-size:15px;line-height:1.55;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:#171717}
.mono{font-family:var(--mono)}

#grain{
  position:fixed;inset:-40px;z-index:40;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- nav ---------------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,3.4vw,48px);
  pointer-events:none;
}
#nav a,#nav .nav-name,#nav button{pointer-events:auto}
.brand{font-family:var(--disp);font-size:21px;letter-spacing:.08em}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-name{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--mut)}
.nav-cta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  border:1px solid var(--hair);padding:8px 14px;color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.nav-cta:hover{border-color:var(--acc);background:var(--acc);color:#171717}

/* language switcher — inked page tabs (live .lang-btn pattern, zine-styled) */
.lang-selector{display:flex;gap:4px}
.lang-btn{
  font-size:9.5px;letter-spacing:.14em;color:var(--dim);
  border:1px solid transparent;padding:6px 9px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.lang-btn:hover,.lang-btn:focus-visible{color:var(--ink);outline:none}
.lang-btn.active{color:var(--acc);border-color:rgba(242,86,35,.4)}

/* SOUND toggle (sound.js mounts it) — retuned to the zine's nav.
   The module already reads --acc/--mut/--mono/--ease from :root, so it
   inherits the palette; these few lines only match .lang-btn's metrics
   so it reads as a page tab, not a widget bolted onto the masthead. */
#sound-mount{display:flex;align-items:center}
#sound-mount .noid-snd{
  font-size:9.5px;letter-spacing:.14em;padding:6px 8px;
  color:var(--dim);
}
#sound-mount .noid-snd:hover{color:var(--ink)}
#sound-mount .noid-snd svg{width:13px;height:13px}
#sound-mount .noid-snd[aria-pressed="true"]{color:var(--acc);border-color:rgba(242,86,35,.4)}

/* CONNECT — a rubber stamp that happens to be a button (NoID SSO modal) */
.nav-connect{
  font-size:10px;font-weight:700;letter-spacing:.2em;
  color:var(--acc);border:2px double var(--acc);padding:7px 13px;
  -webkit-mask-image:var(--rough);mask-image:var(--rough);
  -webkit-mask-size:220px 220px;mask-size:220px 220px;
  mask-mode:luminance;-webkit-mask-mode:luminance;
  transform:rotate(-2deg);
  transition:color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.nav-connect:hover,.nav-connect:focus-visible{
  background:var(--acc);color:#171717;transform:rotate(0deg);outline:none;
}

/* ---------------- stage & pages ---------------- */
#stage{position:fixed;inset:0;overflow:hidden;z-index:1}
#stage::after{ /* roller shadow passing during a turn */
  content:'';position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:linear-gradient(178deg,transparent 34%,rgba(0,0,0,.3) 49%,rgba(0,0,0,.06) 53%,transparent 68%);
  transform:translateY(-102%);
}
#stage.turning::after{animation:roller .72s linear both}
@keyframes roller{from{transform:translateY(-102%);opacity:1}to{transform:translateY(102%);opacity:1}}

.pg{
  position:absolute;inset:0;visibility:hidden;overflow:hidden;
  background:
    radial-gradient(120vw 90vh at 50% 30%,var(--paper2) 0%,var(--paper) 58%,#161513 100%);
  z-index:1;
}
.pg.cur{visibility:visible;z-index:2}
.pg.show{visibility:visible}

/* page-turn choreography */
.pg.out-f{
  z-index:5;
  animation:tearOff .74s cubic-bezier(.55,.06,.35,1) both;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));
}
@keyframes tearOff{
  0%{clip-path:polygon(0% 0%,100% 0%,100% 97.6%,91% 99.4%,82% 98%,73% 100%,64% 98.4%,55% 100%,46% 98%,37% 99.6%,28% 98%,19% 100%,10% 98.4%,0% 100%);
     transform:none;opacity:1}
  88%{opacity:1}
  100%{clip-path:polygon(0% 0%,100% 0%,100% 1%,91% 7%,82% 2%,73% 8.4%,64% 3%,55% 9%,46% 2.4%,37% 7%,28% 2%,19% 8%,10% 3%,0% 6%);
     transform:translateY(-5.5%) rotate(-1.1deg);opacity:0}
}
.pg.in-f{animation:settleUnder .74s var(--ease) both}
@keyframes settleUnder{from{transform:scale(.986);filter:brightness(.86)}to{transform:none;filter:brightness(1)}}
.pg.in-b{
  z-index:6;
  animation:pasteDown .62s cubic-bezier(.22,1.18,.36,1) both;
}
@keyframes pasteDown{
  0%{transform:translateY(-4.5%) rotate(-2.4deg) scale(1.06);filter:drop-shadow(0 30px 34px rgba(0,0,0,.6))}
  62%{transform:translateY(.2%) rotate(.5deg) scale(1.006);filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
  100%{transform:none;filter:none}
}
.pg.out-b{z-index:2;animation:dimUnder .62s linear both}
@keyframes dimUnder{from{filter:brightness(1)}40%{filter:brightness(.8)}to{filter:brightness(1)}}

/* zine center fold on spreads (desktop) */
.pg-spread::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:80px;margin-left:-40px;
  background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.24) 46%,rgba(0,0,0,.4) 50%,rgba(222,222,222,.028) 53%,transparent 100%);
  pointer-events:none;
}

/* huge ghost word behind spreads */
.ghostword{
  position:absolute;left:-1.5vw;bottom:-4vw;z-index:0;pointer-events:none;
  font-family:var(--disp);font-size:clamp(140px,24vw,360px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(222,222,222,.07);
  letter-spacing:.02em;user-select:none;
}
.gw-2{left:auto;right:-2vw;bottom:auto;top:8vw}
.gw-3{right:-2vw;left:auto;bottom:-5vw;-webkit-text-stroke:1.5px rgba(242,86,35,.1)}

/* crop marks (cover) */
.crop{position:absolute;width:26px;height:26px;z-index:3;opacity:.4}
.crop::before,.crop::after{content:'';position:absolute;background:var(--mut)}
.crop::before{width:100%;height:1px}
.crop::after{width:1px;height:100%}
.crop.tl{top:64px;left:16px}.crop.tr{top:64px;right:16px;transform:scaleX(-1)}
.crop.bl{bottom:16px;left:16px;transform:scaleY(-1)}.crop.br{bottom:16px;right:16px;transform:scale(-1)}
.crop.tl::before,.crop.bl::before{left:0;top:0}.crop.tl::after,.crop.bl::after{left:0;top:0}
.crop.tr::before,.crop.br::before{left:0;top:0}.crop.tr::after,.crop.br::after{left:0;top:0}

/* ============================================================
   PG 01 — COVER
   ============================================================ */
.cv-issue{
  position:absolute;top:70px;left:0;right:0;z-index:2;
  font-size:10px;letter-spacing:.3em;color:var(--mut);
  padding:9px clamp(18px,3.4vw,48px);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}

/* halftone ink field — dots, not glow */
.cv-ht{
  position:absolute;right:-6vw;top:12vh;width:56vw;height:78vh;z-index:0;
  background-image:radial-gradient(circle,rgba(242,86,35,.5) 26%,transparent 30%);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(70% 70% at 62% 42%,#000 0%,rgba(0,0,0,.4) 45%,transparent 72%);
  mask-image:radial-gradient(70% 70% at 62% 42%,#000 0%,rgba(0,0,0,.4) 45%,transparent 72%);
  opacity:.5;
}

.mast{
  position:absolute;left:clamp(18px,4vw,60px);top:21vh;z-index:2;
  display:flex;flex-direction:column;
}
.m-line{
  font-family:var(--disp);
  font-size:clamp(96px,15.5vw,222px);
  line-height:.82;letter-spacing:.01em;
  opacity:0;
}
html.born .m-line{opacity:1;transition:opacity .4s var(--ease)}
.m-out{color:transparent;-webkit-text-stroke:2.5px var(--ink)}
.m-ink{
  color:transparent;
  background-image:
    radial-gradient(circle,rgba(23,23,23,.34) 24%,transparent 27%),
    linear-gradient(var(--acc),var(--acc));
  background-size:6px 6px,100% 100%;
  -webkit-background-clip:text;background-clip:text;
}
#hs{position:absolute;inset:-90px -130px;width:calc(100% + 260px);height:calc(100% + 180px);pointer-events:none;z-index:3}
html.born #hs{opacity:0;transition:opacity .35s linear}
html.pose #hs,html.rm #hs{display:none}

.cv-vol{position:absolute;left:clamp(18px,4vw,60px);top:calc(21vh + clamp(180px,26.5vw,380px));z-index:2;display:flex;flex-direction:column;gap:10px}
.vol-strip{
  align-self:flex-start;
  font-family:var(--disp);font-size:clamp(17px,1.8vw,26px);letter-spacing:.14em;
  background:var(--ink);color:var(--fink);padding:7px 16px 5px;
  transform:rotate(-.6deg);
  box-shadow:4px 5px 0 rgba(0,0,0,.45);
}
.vol-sub{font-size:9.5px;letter-spacing:.26em;color:var(--mut)}

/* pasted tracklist flyer */
.flyer{
  position:relative;background:var(--flyer);color:var(--fink);
  box-shadow:0 14px 30px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.4);
}
.flyer::after{ /* paper tooth */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(23,23,23,.05) 20%,transparent 22%);
  background-size:4px 4px;
}
.tracklist{
  position:absolute;right:clamp(16px,6.5vw,110px);top:23vh;z-index:2;
  width:clamp(240px,21vw,308px);padding:20px 22px 16px;
  --rot:2.4deg;transform:rotate(var(--rot));
}
.fl-kick{font-size:8.5px;letter-spacing:.22em;color:#3c3a36;border-bottom:1.5px solid var(--fink);padding-bottom:8px;margin-bottom:12px}
.tl-list{list-style:none}
.tl-list li{display:flex;align-items:baseline;gap:10px;font-size:12.5px;letter-spacing:.1em;padding:7px 0;border-bottom:1px dotted rgba(23,23,23,.35)}
.tl-list li:last-child{border-bottom:0}
.tl-list i{font-style:normal;color:#5f5c55;font-size:10px}
.tl-list b{font-family:var(--disp);font-weight:400;font-size:19px;letter-spacing:.05em}
.tl-list s{flex:1;text-decoration:none;border-bottom:1px dotted rgba(23,23,23,.3);transform:translateY(-3px)}
.tl-list em{font-style:normal;font-weight:700}
.tl-foot{font-size:8.5px;letter-spacing:.24em;color:#5f5c55;margin-top:12px}

/* tape strips */
.tape{
  position:absolute;width:92px;height:26px;z-index:4;
  background:rgba(222,222,222,.24);
  box-shadow:inset 0 0 6px rgba(23,23,23,.12),0 2px 4px rgba(0,0,0,.18);
  clip-path:polygon(3% 0,97% 6%,100% 30%,98% 100%,4% 96%,0 66%);
  backdrop-filter:none;
}
.tp-l{top:-13px;left:-24px;transform:rotate(-38deg)}
.tp-r{top:-11px;right:-26px;transform:rotate(32deg)}
.tp-c{top:-14px;left:50%;margin-left:-46px;transform:rotate(-3deg)}

/* rubber stamps */
.stamp{
  position:absolute;font-family:var(--mono);font-weight:700;
  letter-spacing:.16em;color:var(--stamp);
  border:3px double var(--stamp);padding:6px 12px;
  -webkit-mask-image:var(--rough);mask-image:var(--rough);
  -webkit-mask-size:220px 220px;mask-size:220px 220px;
  mask-mode:luminance;-webkit-mask-mode:luminance;
  white-space:nowrap;pointer-events:none;
}
.st-run{right:10px;bottom:-13px;transform:rotate(-7deg);font-size:11px}
.st-first{
  top:16vh;right:clamp(16px,7vw,120px);transform:rotate(7deg);z-index:3;
  font-size:12px;color:var(--ink2);border-color:var(--ink2);opacity:.85;
}
.st-au{position:static;display:inline-block;transform:rotate(-6deg);font-size:11px;margin-top:14px}

/* ---- THE HONEST DROP STATE ----------------------------------
   There is no drop date published in the shop's source, so there is
   no countdown on this page. This is a printed notice, not a timer:
   it states the absence, and hands you the only real action there is.
   It hangs off the cover's base strip, so it tracks any viewport
   height and can never collide with the pasted tracklist above it. */
.dropcard{
  position:absolute;bottom:calc(100% + 16px);
  right:clamp(16px,6.5vw,110px);
  width:clamp(240px,21vw,308px);
  z-index:2;padding:12px 0 0;
  border-top:1px solid rgba(242,86,35,.45);
  text-align:left;
}
.dc-h{
  font-size:8.5px;letter-spacing:.3em;color:var(--acc);font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.dc-h::after{content:'';flex:1;height:1px;background:var(--hair)}
.dc-state{
  font-family:var(--disp);font-size:clamp(24px,2.1vw,31px);
  line-height:1;letter-spacing:.05em;color:var(--ink);
  margin:6px 0 6px;
}
.dc-note{font-size:8px;letter-spacing:.14em;color:var(--mut);line-height:1.5;white-space:nowrap}
.dc-go{
  display:inline-block;margin-top:9px;
  font-size:9px;letter-spacing:.2em;font-weight:700;color:var(--ink2);
  border-bottom:1px solid var(--acc);padding-bottom:2px;
  transition:color .25s var(--ease);
}
.dc-go:hover,.dc-go:focus-visible{color:var(--acc);outline:none}

/* cover base strip */
.cv-base{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px clamp(18px,3.4vw,48px) 58px;
  border-top:1px solid var(--hair);
}
.barcode{display:flex;flex-direction:column;gap:5px}
.barcode i{
  display:block;width:132px;height:30px;
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 9px);
}
.barcode .mono{font-size:8.5px;letter-spacing:.34em;color:var(--mut)}
.cv-claims{font-size:10px;letter-spacing:.26em;color:var(--ink2)}
.cv-cue{display:flex;align-items:center;gap:10px;font-size:9.5px;letter-spacing:.26em;color:var(--mut)}
.cue-tick{width:7px;height:7px;background:var(--acc);display:inline-block}
html.live .cue-tick{animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ============================================================
   PG 02/03 — SPREADS
   ============================================================ */
.sp-head{position:absolute;left:clamp(18px,4vw,60px);top:16vh;z-index:2;max-width:42vw}
.sp-over{font-size:10px;letter-spacing:.3em;color:var(--mut);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.sp-over .idx{color:var(--acc);font-weight:700}
.sp-title{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(44px,4.6vw,66px);line-height:.94;letter-spacing:.01em;
}
.sp-title .ink{color:var(--acc)}
.sp-sub{max-width:360px;margin-top:20px;font-size:13.5px;font-weight:300;color:var(--ink2)}
.sp-sub b{color:var(--ink);font-weight:600}

.sp-flyers{
  position:absolute;right:clamp(14px,4vw,64px);top:14vh;z-index:2;
  display:flex;gap:clamp(18px,2.4vw,36px);align-items:flex-start;
}
.flyer.product{
  width:clamp(240px,22.5vw,330px);padding:18px 18px 56px;
  --rot:-1.6deg;transform:rotate(var(--rot));
}
.sp-flyers .flyer.product:nth-child(2){--rot:1.8deg;margin-top:34px}

/* POINTER LIFE — a flyer picks itself off the board when you reach for it.
   Composes with each flyer's own paste-up angle via --rot. Pointer-only:
   no rAF, no JS, and reduced-motion/pose kill the transition outright. */
.flyer.product,.flyer.tracklist{
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
  will-change:transform;
}
@media(hover:hover){
  .flyer.product:hover{
    transform:rotate(var(--rot)) translateY(-5px) scale(1.012);
    box-shadow:0 24px 46px rgba(0,0,0,.62),0 4px 10px rgba(0,0,0,.45);
  }
  .flyer.tracklist:hover{
    transform:rotate(var(--rot)) translateY(-3px);
    box-shadow:0 20px 38px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.42);
  }
}
.fl-art{position:relative;margin:4px 0 10px;border:1.5px solid rgba(23,23,23,.8)}
.fl-art svg{display:block;width:100%;height:auto;background:var(--flyer2);
  filter:drop-shadow(1.5px 1.5px 0 rgba(242,86,35,.24)); /* misregistered orange pass */
}
.fl-name{
  font-family:var(--disp);font-weight:400;font-size:clamp(40px,3.4vw,54px);
  line-height:.9;letter-spacing:.015em;color:var(--fink);
}
.fl-specs{list-style:none;margin:10px 0 12px}
.fl-specs li{font-size:9px;letter-spacing:.14em;color:#3c3a36;padding:4px 0;border-bottom:1px dotted rgba(23,23,23,.3)}
.fl-specs li:last-child{border-bottom:0}
.fl-go{font-size:9.5px;letter-spacing:.18em;font-weight:700;color:var(--fink);border-bottom:2px solid var(--acc);padding-bottom:2px}
.fl-go:hover{color:var(--accd)}

/* size run — inked size boxes, sold-out sizes struck (real stock) */
.fl-run{display:flex;gap:4px;margin:0 0 8px}
.fl-run i{
  font-style:normal;font-size:8px;font-weight:700;letter-spacing:.08em;
  color:var(--fink);border:1px solid rgba(23,23,23,.55);
  padding:2px 0;flex:1;text-align:center;
}
.fl-run i.out{
  color:rgba(23,23,23,.4);border-style:dashed;border-color:rgba(23,23,23,.3);
  text-decoration:line-through;
}
/* edition line — the print-run credit */
.fl-ed{font-size:7.5px;letter-spacing:.14em;color:#5f5c55;margin:0 0 10px}

/* price-gun label */
.pricegun{
  position:absolute;top:-14px;right:-18px;z-index:5;
  background:#EFECE4;color:var(--fink);
  padding:8px 12px 12px;transform:rotate(-5deg);
  box-shadow:0 6px 14px rgba(0,0,0,.45);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),94% 100%,88% calc(100% - 6px),82% 100%,76% calc(100% - 6px),70% 100%,64% calc(100% - 6px),58% 100%,52% calc(100% - 6px),46% 100%,40% calc(100% - 6px),34% 100%,28% calc(100% - 6px),22% 100%,16% calc(100% - 6px),10% 100%,4% calc(100% - 6px),0 100%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.pricegun b{font-family:var(--mono);font-weight:700;font-size:21px;letter-spacing:.04em}
.pricegun i{font-style:normal;font-family:var(--mono);font-size:7px;letter-spacing:.22em;color:#5f5c55}

.st-stock{right:10px;bottom:12px;transform:rotate(-8deg);font-size:10.5px}

.folio-note{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px clamp(18px,3.4vw,48px) 56px;
  font-size:9px;letter-spacing:.26em;color:var(--mut);
  border-top:1px solid var(--hair);
}

/* pasted cut-out quote (spread 2) */
.cutout{
  position:absolute;left:clamp(18px,4vw,60px);bottom:11vh;z-index:2;
  max-width:min(460px,38vw);
  background:var(--acc);color:#171717;
  padding:20px 24px;transform:rotate(-1.2deg);
  box-shadow:5px 7px 0 rgba(0,0,0,.5);
}
.cutout p{font-family:var(--disp);font-size:clamp(15px,1.5vw,21px);line-height:1.2;letter-spacing:.04em}
.cutout cite{display:block;font-style:normal;font-size:8.5px;letter-spacing:.26em;margin-top:10px;color:rgba(23,23,23,.72)}

/* ============================================================
   PG 04 — THE RULE (sold out stamp)
   ============================================================ */
.rl-head{position:absolute;left:clamp(18px,4vw,60px);top:15vh;z-index:2;max-width:44vw}
.rl-title{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(56px,6.6vw,96px);line-height:.9;letter-spacing:.01em;
  margin:20px 0 26px;
}
.rl-title .ink{color:var(--acc)}
.rl-line{max-width:420px;font-size:14.5px;font-weight:300;color:var(--ink2)}
.rl-line b{color:var(--acc);font-family:var(--mono);font-weight:700}

.rl-scene{
  position:absolute;right:clamp(16px,5vw,80px);top:12vh;z-index:2;
  display:flex;gap:clamp(24px,3vw,48px);align-items:flex-start;
}
.ghostflyer{
  width:clamp(250px,23vw,330px);padding:18px 18px 46px;
  transform:rotate(-1.5deg);
  background:#7E7C76;color:rgba(23,23,23,.55);
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.ghostflyer .fl-kick{color:rgba(23,23,23,.45);border-color:rgba(23,23,23,.45)}
.ghostflyer .fl-art{border-color:rgba(23,23,23,.4)}
.ghostflyer .fl-art svg{background:#8B8983;filter:none}
.ghostflyer .fl-name{color:rgba(23,23,23,.5)}
.gh-count{font-size:9px;letter-spacing:.2em;margin-top:8px;color:rgba(23,23,23,.5)}

.stamp-big{
  position:absolute;left:50%;top:42%;z-index:6;
  transform:translate(-50%,-50%) rotate(-14deg);
  font-family:var(--disp);font-size:clamp(50px,5.2vw,74px);
  letter-spacing:.08em;color:var(--acc);
  border:6px double var(--acc);padding:12px 30px 7px;
  -webkit-mask-image:var(--rough);mask-image:var(--rough);
  -webkit-mask-size:260px 260px;mask-size:260px 260px;
  mask-mode:luminance;-webkit-mask-mode:luminance;
  white-space:nowrap;pointer-events:none;
  text-shadow:0 0 1px var(--acc);
}
html.live .pg-rule:not(.slam) .stamp-big{opacity:0}
.pg-rule.slam .stamp-big{animation:slam .5s .5s cubic-bezier(.34,1.3,.4,1) both}
@keyframes slam{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-11deg) scale(2.6)}
  55%{opacity:1;transform:translate(-50%,-50%) rotate(-13.4deg) scale(.92)}
  78%{transform:translate(-50%,-50%) rotate(-14.4deg) scale(1.05)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}
}
/* the zh twin — 售罄, a SECOND stamp slammed after the first.
   Bilingual punk: both inks stay on the page in every language. */
.stamp-big-zh{
  left:55%;top:66%;
  transform:translate(-50%,-50%) rotate(8deg);
  font-family:'Noto Sans CJK SC','Source Han Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-weight:900;
  font-size:clamp(34px,3.4vw,48px);
  letter-spacing:.28em;
  padding:10px 8px 10px 22px;
  border-width:5px;
  -webkit-mask-position:60px 40px;mask-position:60px 40px;
}
.pg-rule.slam .stamp-big-zh{animation:slamZh .5s .84s cubic-bezier(.34,1.3,.4,1) both}
@keyframes slamZh{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(4deg) scale(2.4)}
  55%{opacity:1;transform:translate(-50%,-50%) rotate(8.8deg) scale(.93)}
  78%{transform:translate(-50%,-50%) rotate(7.4deg) scale(1.05)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(8deg) scale(1)}
}
.pg-rule.slam .ghostflyer{animation:thud .45s .62s ease-out both}
@keyframes thud{
  0%,100%{transform:rotate(-1.5deg)}
  30%{transform:rotate(-2.7deg) translateY(4px)}
  60%{transform:rotate(-.9deg) translateY(-2px)}
}
.st-retire{
  left:50%;bottom:10px;transform:translateX(-50%) rotate(3.5deg);
  font-size:9.5px;color:rgba(23,23,23,.7);border-color:rgba(23,23,23,.7);
}

.standard{list-style:none;width:clamp(240px,20vw,300px);margin-top:4vh}
.standard li{
  display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;
  column-gap:12px;padding:15px 0;border-bottom:1px solid var(--hair);
}
.standard li:first-child{border-top:1px solid var(--hair)}
.std-idx{grid-row:1/3;font-size:11px;color:var(--acc);font-weight:700;padding-top:3px}
.standard b{font-family:var(--disp);font-weight:400;font-size:19px;letter-spacing:.05em}
.standard span:last-child{font-size:11.5px;font-weight:300;color:var(--mut)}

/* ============================================================
   PG 05 — THE SMALL PRINT (launch info layer — catalog index,
   shipping / returns / drop policy, all from the live shop)
   ============================================================ */
.gw-4{left:auto;right:-2vw;bottom:auto;top:5vw}
.prt-inner{
  position:absolute;left:clamp(18px,4vw,60px);right:clamp(18px,4vw,60px);
  top:12vh;bottom:9vh;z-index:3;   /* the pasted slips sit OVER the printed folio line */
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,3.4vw,56px);
  align-items:start;
}
/* short screens: the page is a fixed sheet, so the sheet gets tighter, not clipped */
@media (max-height:860px){
  .prt-inner{top:9vh;bottom:6vh}
  .prt-head{margin-bottom:2vh}
  .prt-title{font-size:clamp(32px,3.4vw,46px)}
  .indexcard{padding:14px 18px 24px}
  .idx-tbl td{padding:6px 8px 6px 0}
  .coupon{margin-top:12px;padding:12px 16px 11px}
}
.prt-head{margin-bottom:3.5vh}
.prt-title{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(38px,4.2vw,60px);line-height:.92;letter-spacing:.01em;
  margin-top:16px;
}
.prt-title .ink{color:var(--acc)}

/* the index card — the full catalog as a pasted spec table */
.indexcard{padding:18px 20px 30px;transform:rotate(-1deg);max-width:660px}
.idx-tbl{width:100%;border-collapse:collapse;font-size:9px;letter-spacing:.06em}
.idx-tbl th{
  font-size:7.5px;letter-spacing:.2em;color:#5f5c55;text-align:left;
  padding:0 8px 6px 0;border-bottom:1.5px solid var(--fink);
}
.idx-tbl td{
  padding:8px 8px 8px 0;border-bottom:1px dotted rgba(23,23,23,.35);
  vertical-align:top;color:#3c3a36;
}
.idx-tbl tr:last-child td{border-bottom:0}
.idx-tbl td a{
  font-family:var(--disp);font-size:15px;letter-spacing:.05em;
  color:var(--fink);border-bottom:2px solid var(--acc);
}
.idx-tbl td a:hover{color:var(--accd)}
.idx-tbl s{text-decoration:line-through;color:rgba(23,23,23,.4)}
.idx-tbl td:last-child{font-weight:700;color:var(--fink);white-space:nowrap}
.idx-foot{
  font-size:7.5px;letter-spacing:.14em;color:#5f5c55;
  margin-top:10px;border-top:1.5px solid var(--fink);padding-top:8px;
}
.st-idx{right:12px;bottom:-12px;transform:rotate(-6deg);font-size:10px}

/* THE COUPON — the drop-alert capture, set as a clip-out slip.
   Paper stock (.flyer), a dashed cut line, one field, one button.
   Posts to /api/notify — the same endpoint the shop has always used. */
.coupon{
  margin-top:18px;max-width:660px;
  padding:14px 18px 13px;transform:rotate(.55deg);
}
.coupon .fl-kick{padding-bottom:6px;margin-bottom:9px}
.cp-cut{
  position:absolute;left:0;right:0;top:-1px;height:0;
  border-top:2px dashed rgba(23,23,23,.28);
}
.cp-cut::before{
  content:'\2702';position:absolute;left:14px;top:-9px;
  font-size:13px;line-height:1;color:#5f5c55;background:var(--flyer);padding:0 4px;
}
.cp-p{font-size:10.5px;line-height:1.55;color:#3c3a36;max-width:66ch}
.cp-p b{font-weight:700;color:var(--fink)}
.cp-form{display:flex;gap:0;margin-top:11px;max-width:440px}
.cp-form input{
  flex:1;min-width:0;
  background:transparent;color:var(--fink);
  border:1.5px solid var(--fink);border-right:0;
  padding:9px 12px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
}
.cp-form input::placeholder{color:#8a877f;letter-spacing:.18em}
.cp-form input:focus{outline:none;background:rgba(242,86,35,.07);border-color:var(--accd)}
.cp-form button{
  flex:none;cursor:pointer;
  background:var(--fink);color:var(--flyer);
  border:1.5px solid var(--fink);
  padding:9px 15px;font-size:9px;letter-spacing:.2em;font-weight:700;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.cp-form button:hover,.cp-form button:focus-visible{background:var(--acc);border-color:var(--acc);color:#171717;outline:none}
.cp-form button[disabled]{opacity:.55;cursor:default}
.cp-status{
  min-height:12px;margin-top:7px;
  font-size:8px;letter-spacing:.16em;color:#3c3a36;
}
.cp-status.err{color:var(--accd);font-weight:700}
.cp-status.ok{color:var(--fink);font-weight:700}

/* visually hidden — for the coupon's field label */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* the smallprint columns — classified-ads grammar */
.prt-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,2vw,30px);
  border-top:1px solid var(--hair);align-content:start;
}
.prt-sec{padding:14px 0 12px;border-bottom:1px solid var(--hair)}
.prt-sec h3{
  font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  color:var(--acc);font-weight:700;margin-bottom:7px;
}
.prt-sec p{font-size:11px;font-weight:300;line-height:1.6;color:var(--ink2)}
.prt-sec b{color:var(--ink);font-weight:600}
.prt-go{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;font-weight:700;
  color:var(--ink);border-bottom:1px solid var(--acc);padding-bottom:1px;white-space:nowrap;
}
.prt-go:hover{color:var(--acc)}

/* ============================================================
   PG 06 — BACK COVER
   ============================================================ */
.pg-back{display:flex;align-items:center;justify-content:center}
.bk-inner{
  width:min(1020px,92vw);padding:84px 0 60px;
  display:flex;flex-direction:column;gap:26px;
}
.bk-cta{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--acc);color:#171717;
  padding:clamp(20px,3.2vh,34px) clamp(22px,3vw,44px);
  box-shadow:6px 8px 0 rgba(0,0,0,.5);
  transform:translate(var(--mx,0px),var(--my,0px)) rotate(-.4deg);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  position:relative;overflow:hidden;
}
.bk-cta::after{ /* halftone bite on the right edge */
  content:'';position:absolute;top:0;bottom:0;right:0;width:34%;
  background-image:radial-gradient(circle,#171717 26%,transparent 30%);
  background-size:8px 8px;opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 85%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 85%);
}
.bk-cta:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px)) rotate(0deg);box-shadow:8px 12px 0 rgba(0,0,0,.55)}
/* MAGNETIC PULL — zine.js writes --mx/--my from the pointer (no rAF, no
   allocation). .mag shortens the spring so the block trails the hand
   instead of lagging behind it. Reduced motion never sets the vars. */
.bk-cta.mag{transition:transform .2s var(--ease),box-shadow .3s var(--ease)}
.bk-cta-big{font-family:var(--disp);font-size:clamp(40px,5.4vw,74px);line-height:.88;letter-spacing:.02em}
.bk-cta-arr{
  font-family:var(--disp);font-size:clamp(44px,5.4vw,72px);
  transform:translateX(calc(var(--mx,0px) * .4));   /* the arrow leads the pull */
  transition:transform .2s var(--ease);
}
.bk-meta{font-size:9.5px;letter-spacing:.3em;color:var(--mut)}

.bk-cols{
  display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:clamp(22px,3.4vw,52px);
  border-top:1px solid var(--hair);padding-top:24px;
}
.bk-h{font-size:9px;letter-spacing:.3em;color:var(--acc);margin-bottom:12px;font-weight:700}
.bk-col a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--disp);font-size:clamp(19px,1.7vw,24px);letter-spacing:.04em;
  padding:8px 0;border-bottom:1px dotted rgba(222,222,222,.18);
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}
.bk-col a:hover{color:var(--acc);padding-left:6px}
.bk-col a .mono{font-size:8.5px;letter-spacing:.22em;color:var(--dim)}
.bk-note{font-size:12.5px;font-weight:300;color:var(--ink2);max-width:300px}
.bk-colophon{position:relative}

.bk-base{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  border-top:1px solid var(--hair);padding-top:18px;
}
.bk-base .mono{font-size:9px;letter-spacing:.24em;color:var(--ink2)}
.bk-base .dim{color:var(--dim)}
.bc-bk i{width:110px;height:24px}

/* ============================================================
   PAGER CHROME
   ============================================================ */
#pager{
  position:fixed;left:50%;bottom:0;z-index:31;transform:translateX(-50%);
  display:flex;align-items:center;gap:18px;
  padding:10px 18px 12px;
}
.pgr-btn{
  font-family:var(--disp);font-size:22px;line-height:1;color:var(--mut);
  padding:4px 10px;border:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.pgr-btn:hover,.pgr-btn:focus-visible{color:var(--ink);border-color:var(--hair);outline:none}
.pgr-tabs{display:flex;gap:4px}
.tab{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--dim);
  padding:7px 10px;border:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.tab:hover,.tab:focus-visible{color:var(--ink);outline:none}
.tab[aria-selected="true"]{color:var(--acc);border-color:rgba(242,86,35,.4)}
.pgr-folio{font-size:9px;letter-spacing:.24em;color:var(--mut)}
.pgr-folio b{color:var(--ink);font-weight:700}

/* ============================================================
   POSES — deterministic stills (?pose=1..4)
   ============================================================ */
html.pose *,html.pose *::before,html.pose *::after{
  animation:none!important;transition:none!important;
}

/* ============================================================
   REDUCED MOTION — the whole zine, laid flat, scrollable
   ============================================================ */
html.rm body{overflow:auto}
html.rm #stage{position:static;overflow:visible}
html.rm .pg{position:relative;visibility:visible;min-height:100vh;z-index:auto}
html.rm #pager{display:none}
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}

/* ============================================================
   MOBILE 390x844 — art-directed
   ============================================================ */
@media(max-width:700px){
  .nav-name{display:none}

  /* cover */
  .cv-issue{top:60px;font-size:8.5px;letter-spacing:.2em}
  .mast{top:14vh}
  .m-line{font-size:clamp(84px,23.5vw,120px)}
  .m-out{-webkit-text-stroke-width:2px}
  .cv-ht{right:-20vw;top:6vh;width:100vw;height:60vh}
  .cv-vol{top:calc(14vh + 50vw)}
  .vol-strip{font-size:15px;letter-spacing:.1em}
  .vol-sub{font-size:8px;letter-spacing:.18em;max-width:80vw}
  .tracklist{right:14px;top:auto;bottom:27vh;width:228px;padding:16px 18px 12px;--rot:2.8deg}
  /* the honest drop state — a printed strip, full width, above the base rule */
  .dropcard{left:18px;right:18px;width:auto;bottom:calc(100% + 10px);padding-top:9px}
  .dc-h{font-size:7.5px;letter-spacing:.22em}
  .dc-state{font-size:21px;margin:4px 0 4px}
  .dc-note{font-size:7px;letter-spacing:.1em;white-space:normal}
  .dc-go{font-size:8px;margin-top:6px}
  #sound-mount .noid-snd{padding:5px 6px}
  #sound-mount .noid-snd svg{width:12px;height:12px}
  .tl-list b{font-size:16px}
  .tl-list li{padding:5px 0;font-size:11px}
  .st-first{top:12vh;right:14px;font-size:10px}
  .cv-base{flex-wrap:wrap;gap:10px;padding:12px 18px 50px}
  .cv-claims{font-size:8px;letter-spacing:.18em;order:3;width:100%}
  .cv-cue{display:none}
  .barcode i{width:96px;height:22px}

  /* spreads */
  .pg-spread::before{display:none}
  .sp-head{top:10vh;max-width:88vw}
  .sp-title{font-size:clamp(30px,9vw,40px)}
  .sp-over{margin-bottom:12px;font-size:8.5px}
  .sp-sub{display:none}
  .sp-flyers{right:auto;left:50%;transform:translateX(-50%);top:21vh;flex-direction:column;gap:0}
  .flyer.product{width:min(272px,72vw);padding:10px 12px 24px}
  .sp-flyers .flyer.product:nth-child(2){margin-top:-26px;margin-left:52px;--rot:2.6deg}
  .fl-kick{font-size:7.5px;padding-bottom:5px;margin-bottom:7px}
  .fl-art svg{height:88px;width:100%}
  .fl-name{font-size:26px}
  .fl-specs{margin:5px 0 7px}
  .fl-specs li{font-size:7.5px;letter-spacing:.1em;padding:2.5px 0}
  .fl-run{gap:3px;margin-bottom:5px}
  .fl-run i{font-size:7px;padding:1px 0}
  .fl-ed{font-size:6.3px;letter-spacing:.1em;margin-bottom:6px}
  .fl-go{font-size:8.5px}
  .pricegun{top:-12px;right:-10px;padding:6px 10px 10px}
  .pricegun b{font-size:17px}
  .st-stock{font-size:8.5px;bottom:6px;right:8px}
  /* spread 2 pulls its stack up so the pasted quote never buries
     STATIC's size run / edition / shop line */
  .pg-s2 .fl-art svg{height:70px}
  .pg-s2 .sp-flyers .flyer.product:nth-child(2){margin-top:-34px}
  .cutout{left:16px;right:16px;bottom:3.5vh;max-width:none;padding:10px 14px}
  .cutout p{font-size:11.5px}
  .cutout cite{font-size:7.5px;margin-top:6px}
  .folio-note{display:none}
  .ghostword{font-size:38vw}

  /* rule */
  .rl-head{top:10vh;max-width:90vw}
  .rl-title{font-size:clamp(40px,12vw,54px);margin:14px 0 12px}
  .rl-line{font-size:12.5px;max-width:86vw}
  .rl-scene{right:auto;left:50%;transform:translateX(-50%);top:42vh;flex-direction:column;gap:18px;align-items:center}
  .ghostflyer{width:min(280px,74vw);padding:14px 14px 36px}
  .stamp-big{font-size:38px;border-width:4px;padding:8px 18px 5px}
  .stamp-big-zh{font-size:25px;border-width:3.5px;padding:7px 6px 7px 15px;top:64%}
  .standard{display:none}

  /* the small print */
  .gw-4{font-size:44vw;top:12vw}
  .prt-inner{left:16px;right:16px;top:9vh;bottom:auto;display:block}
  .prt-head{margin-bottom:12px}
  .prt-title{font-size:30px;margin-top:8px}
  .indexcard{padding:12px 12px 14px;max-width:none}
  .idx-tbl{font-size:8px;letter-spacing:.03em}
  .idx-tbl .wide{display:none} /* materials live on the flyers — spreads 01/02 */
  .idx-tbl th{font-size:6.5px;padding-bottom:4px}
  .idx-tbl td{padding:6px 6px 6px 0}
  .idx-tbl td a{font-size:13px}
  .idx-foot{font-size:6.5px;margin-top:8px;padding-top:6px}
  .st-idx{display:none}
  .prt-cols{margin-top:16px;gap:0 14px}
  .prt-sec{padding:9px 0 8px}
  .prt-sec h3{font-size:7.5px;letter-spacing:.2em;margin-bottom:4px}
  .prt-sec p{font-size:9.5px;line-height:1.5}
  .prt-go{font-size:7.5px}

  /* back cover */
  .bk-inner{width:88vw;padding:72px 0 74px;gap:18px}
  .bk-cta{transform:rotate(-.8deg)}
  .bk-cta-big{font-size:44px}
  .bk-cta-arr{font-size:40px}
  .bk-meta{font-size:8px;letter-spacing:.2em}
  .bk-cols{grid-template-columns:1fr 1fr;gap:18px;padding-top:18px}
  .bk-colophon{grid-column:1/3}
  .bk-col a{font-size:17px;padding:6px 0}
  .bk-note{max-width:none;font-size:11.5px}
  .st-au{margin-top:10px;font-size:10px}
  .bk-base{flex-direction:column;align-items:flex-start;gap:8px;padding-top:14px}

  /* pager — sticky-visible: solid inked bar, never lost against the art */
  #pager{
    gap:2px;width:100%;justify-content:center;
    padding:7px 6px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(17,17,16,.94);
    border-top:1px solid var(--hair);
    box-shadow:0 -10px 24px rgba(0,0,0,.35);
  }
  .pgr-btn{padding:4px 7px;font-size:18px}
  .tab{padding:6px 4px;font-size:6.8px;letter-spacing:.1em}
  .pgr-folio{display:none}

  /* connect stamp stays reachable next to SHOP */
  .nav-links{gap:12px}
  .nav-connect{font-size:9px;padding:6px 10px}
  .lang-btn{padding:5px 6px;font-size:9px}
}

/* ============================================================
   zh-CN — CJK fallback stacks + per-selector display retune.
   Ugocranis carries the Latin glyphs; CJK falls to Noto/Han.
   The zine's type is the tightest in the family — every tight
   line-height/letter-spacing gets a zh-specific loosening so
   full-height CJK glyphs never clip or crowd.
   ============================================================ */
html[lang^="zh"]{
  --disp:'Ugocranis','Noto Sans CJK SC','PingFang SC','Hiragino Sans GB','Source Han Sans SC','Microsoft YaHei',sans-serif;
  --body:'Space Grotesk','Noto Sans CJK SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --mono:'JetBrains Mono','Noto Sans Mono CJK SC','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',ui-monospace,monospace;
}
/* nav */
html[lang^="zh"] .nav-name{letter-spacing:.16em}
html[lang^="zh"] .nav-cta{letter-spacing:.12em}
html[lang^="zh"] .nav-connect{letter-spacing:.1em}
/* cover */
html[lang^="zh"] .cv-issue{letter-spacing:.16em}
html[lang^="zh"] .vol-strip{letter-spacing:.1em;padding:6px 14px;line-height:1.25}
html[lang^="zh"] .vol-sub{letter-spacing:.15em}
html[lang^="zh"] .fl-kick{letter-spacing:.1em}
html[lang^="zh"] .cv-claims{letter-spacing:.16em}
html[lang^="zh"] .cv-cue{letter-spacing:.16em}
html[lang^="zh"] .stamp{letter-spacing:.1em}
/* spreads */
html[lang^="zh"] .sp-over{letter-spacing:.16em}
html[lang^="zh"] .sp-title{line-height:1.16;letter-spacing:.05em;font-size:clamp(38px,4vw,56px)}
html[lang^="zh"] .sp-sub{line-height:1.85}
html[lang^="zh"] .fl-specs li{font-size:9.5px;letter-spacing:.05em}
html[lang^="zh"] .fl-ed{letter-spacing:.06em;font-size:8px}
html[lang^="zh"] .cutout p{line-height:1.55;letter-spacing:.03em}
html[lang^="zh"] .cutout cite{letter-spacing:.16em}
/* the rule */
html[lang^="zh"] .rl-title{line-height:1.12;letter-spacing:.04em;font-size:clamp(46px,5.4vw,78px)}
html[lang^="zh"] .rl-line{line-height:1.85}
html[lang^="zh"] .ghostflyer .fl-name{line-height:1.08;font-size:clamp(32px,2.8vw,44px)}
html[lang^="zh"] .gh-count{letter-spacing:.1em}
html[lang^="zh"] .standard b{letter-spacing:.04em}
html[lang^="zh"] .standard span:last-child{line-height:1.6}
html[lang^="zh"] .folio-note{letter-spacing:.15em}
/* the small print */
html[lang^="zh"] .prt-title{line-height:1.14;letter-spacing:.03em;font-size:clamp(32px,3.5vw,50px)}
html[lang^="zh"] .idx-tbl th{letter-spacing:.08em;font-size:8.5px}
html[lang^="zh"] .idx-tbl td{letter-spacing:.02em;line-height:1.55}
html[lang^="zh"] .idx-foot{letter-spacing:.06em;line-height:1.6;font-size:8px}
html[lang^="zh"] .prt-sec h3{letter-spacing:.15em}
html[lang^="zh"] .prt-sec p{line-height:1.8;font-size:11.5px}
/* back cover */
html[lang^="zh"] .bk-cta-big{line-height:1.14;letter-spacing:.05em;font-size:clamp(32px,4.4vw,60px)}
html[lang^="zh"] .bk-meta{letter-spacing:.16em}
html[lang^="zh"] .bk-h{letter-spacing:.18em}
html[lang^="zh"] .bk-col a .mono{letter-spacing:.1em}
html[lang^="zh"] .bk-note{line-height:1.75}
html[lang^="zh"] .bk-base .mono{letter-spacing:.12em}
/* pager */
html[lang^="zh"] .tab{letter-spacing:.1em;font-size:9.5px}

/* zh × mobile — retighten against the 700px art direction */
@media(max-width:700px){
  html[lang^="zh"] .cv-issue{font-size:8.5px;letter-spacing:.1em}
  html[lang^="zh"] .vol-strip{font-size:14px}
  html[lang^="zh"] .vol-sub{letter-spacing:.1em}
  html[lang^="zh"] .sp-title{font-size:clamp(26px,7.6vw,34px)}
  html[lang^="zh"] .fl-specs li{font-size:8px;letter-spacing:.04em}
  html[lang^="zh"] .fl-ed{font-size:6.8px}
  html[lang^="zh"] .rl-title{font-size:clamp(32px,9.6vw,44px)}
  html[lang^="zh"] .ghostflyer .fl-name{font-size:28px}
  html[lang^="zh"] .prt-title{font-size:26px}
  html[lang^="zh"] .idx-tbl{font-size:8.5px}
  html[lang^="zh"] .idx-tbl th{font-size:7px}
  html[lang^="zh"] .prt-sec p{font-size:10px;line-height:1.65}
  html[lang^="zh"] .bk-cta-big{font-size:34px}
  html[lang^="zh"] .tab{font-size:8px;letter-spacing:.04em;padding:6px 3px}
  html[lang^="zh"] .cutout p{font-size:11px}
}

/* ── A11Y: visible keyboard focus ───────────────────────────────────────────
   The :hover,:focus-visible rules above were copy-pasted from :hover and
   carry `outline:none`, which left NoidMerch as the only family site with no
   keyboard focus ring at all. Restore the house indicator (matches the 1–2px
   accent ring used on noid.gg / NGENT / Iron Clad / NoidAuth). Declared last
   so it wins over the earlier equal-specificity `outline:none`. Mouse hover
   is untouched — :focus-visible only fires for keyboard/AT focus. */
.lang-btn:focus-visible,
.nav-connect:focus-visible,
.dc-go:focus-visible,
.pgr-btn:focus-visible,
.tab:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
  border-radius:2px;
}