/* =====================================================================
   KAIJU COFFEE CO. · landing page
   Remix of the Apocalypse Coffee breakdown (claude/01-apocalypse-coffee)
   Motion rule: smooth eases for space, steps() for character.
   ===================================================================== */

:root {
  /* ink + paper */
  --ink: #0e0e0c;
  --d0: #121210;
  --d1: #171714;
  --d2: #1d1d1a;
  --card: #1a1a17;
  --paper: #f1ebdf;
  --paper-2: #e6dccb;
  --paper-mut: #57524a;
  --paper-soft: #9a948a;
  --on-dark: #bdb8ad;

  /* atomic accents */
  --lime: #c8f23a;
  --lime-deep: #a6d41c;
  --leaf: #4f8a10;
  --red: #ee3b2b;
  --teal: #1fa39c;
  --pink: #ff4fa3;
  --yellow: #ffd23a;
  --violet: #9b5cff;
  --blue: #2f5bff;
  --orange: #ff7a1a;

  /* type */
  --f-display: "Anton", "Bebas Neue", Impact, sans-serif;
  --f-script: "Permanent Marker", "Marker Felt", cursive;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
  --f-jp: "Dela Gothic One", var(--f-display);

  /* shape */
  --sq: 1.6;
  --r-xs: calc(6px * var(--sq));
  --r-s: calc(8px * var(--sq));
  --r-m: calc(10px * var(--sq));
  --r-l: calc(16px * var(--sq));
  --r-xl: calc(27.5px * var(--sq));
  --sh: var(--ink);

  /* motion */
  --ease-ui: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-over: cubic-bezier(.34, 1.4, .4, 1);

  --menu-w: clamp(28rem, 34vw, 34rem);
  --cart-w: min(460px, 92vw);
  --torn-h: 104px;
  --gutter: clamp(20px, 3.6vw, 52px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
/* two-tone ring (ink band on lime) so focus shows on paper, ink and lime alike */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 9px var(--lime); }

/* ---------- texture layers ---------- */
.grain::after {
  content: "";
  position: fixed;
  inset: -18vh 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .11;
  mix-blend-mode: overlay;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px;
}
.dust {
  position: fixed;
  inset: -18vh 0;
  z-index: 9990;
  pointer-events: none;
  background: url("assets/img/film-dust.png") 0 0 / 1200px repeat;
  opacity: .55;
  mix-blend-mode: screen;
  animation: dust-jump 1.2s steps(3) infinite;
}
@keyframes dust-jump {
  0% { background-position: 0 0; }
  33% { background-position: -340px 180px; }
  66% { background-position: 260px -420px; }
}
@media (max-width: 767px) { .grain::after, .dust { display: none; } }

/* ---------- type primitives ---------- */
.display {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: .92;
}
.script {
  display: inline-block;
  font-family: var(--f-script);
  color: var(--sc, var(--lime));
  text-transform: none;
  letter-spacing: 0;
  word-spacing: .12em;
  line-height: 1;
  animation: wiggle .3s steps(2, end) infinite, boil .42s steps(1) infinite;
}
/* line boil: the outline itself redraws, three hand-drawn frames on a loop */
.boil { animation: boil .42s steps(1) infinite; }
@keyframes boil { 0% { filter: url(#boil-0); } 33.33% { filter: url(#boil-1); } 66.66% { filter: url(#boil-2); } }
/* comic outline for script words on paper */
.script--stroke {
  -webkit-text-stroke: .055em var(--ink);
  paint-order: stroke fill;
  text-shadow: .06em .07em 0 var(--ink);
}
.script--paper { --sc: var(--paper); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .06em .07em 0 var(--ink); }
@keyframes wiggle { 0% { rotate: 2deg; } 100% { rotate: -2deg; } }
.wiggle { animation: wiggle .35s steps(2, end) infinite; }
.wiggle-slow { animation: wiggle .7s steps(2, end) infinite; }

.eyebrow {
  font-family: var(--f-ui);
  font-stretch: 125%;
  font-weight: 650;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red);
}
.on-dark .eyebrow { color: var(--lime); }
.eyebrow--sm { font-size: 11px; letter-spacing: .22em; }
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(44px, 4.9vw, 72px);
  line-height: .95;
  letter-spacing: .02em;
}
.h2 .script { font-size: 1.04em; text-transform: none; }
.on-dark { color: var(--paper); }
.mono { font-family: var(--f-mono); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.65; color: var(--paper-mut); letter-spacing: .02em; }
.on-dark .mono { color: var(--on-dark); }
.katakana { font-family: var(--f-jp); }

.sec-head { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 0 var(--gutter); }

/* split reveal */
.sr-mask { display: inline-block; overflow: clip; overflow-clip-margin: .35em; vertical-align: bottom; padding: .18em .08em .04em; margin: -.18em -.08em -.04em; }
.sr-word { display: inline-block; translate: 0 110%; transition: translate .9s var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
.is-revealed .sr-word { translate: 0 0; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.chips--dark .chip { border-color: #4a4740; background: transparent; color: var(--paper); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.dot--lime { background: var(--lime); } .dot--red { background: var(--red); } .dot--teal { background: var(--teal); }
.chips--dark .dot { box-shadow: none; }

/* ---------- boiling button ---------- */
.btn {
  --btn-bg: var(--lime);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 56px;
  padding: 0 34px;
  text-decoration: none;
  color: var(--btn-fg);
  font-family: var(--f-ui);
  font-stretch: 125%;
  font-weight: 750;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn.has-shadow { filter: drop-shadow(6px 6px 0 var(--sh)); }
.on-dark .btn.has-shadow { --sh: #000; }
.btn__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; color: var(--btn-bg); transition: scale .4s var(--ease-ui), rotate .4s var(--ease-ui); }
.btn__sprite { position: absolute; inset: 0 auto auto 0; width: 300%; height: 100%; }
.btn__sprite path { fill: currentColor; stroke: var(--ink); stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.btn__text { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.btn--lg { min-height: 64px; padding: 0 44px; font-size: 18px; }
.btn--block { width: 100%; }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--lime); }
.btn--paper { --btn-bg: var(--paper); }
.btn--red { --btn-bg: var(--red); --btn-fg: var(--paper); }
.btn--teal { --btn-bg: var(--teal); --btn-fg: var(--paper); }
.btn--leaf { --btn-bg: var(--lime); }
.btn--menu { min-height: 50px; padding: 0 24px 0 20px; font-size: 14px; }
.btn--square { min-height: 52px; width: 56px; padding: 0; --btn-bg: var(--paper); }
@keyframes btn-sprite { to { translate: -66.6667% 0; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:is(:hover, :focus-visible) .btn__bg { scale: 1.035; rotate: -1deg; }
  .btn:is(:hover, :focus-visible) .btn__sprite { animation: btn-sprite .45s steps(2, jump-none) infinite; }
  .btn:is(:hover, :focus-visible) .btn__text { animation: wiggle .3s steps(2, end) infinite; }
}

/* link styles */
.link-arrow {
  font-family: var(--f-ui); font-stretch: 125%; font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 3px; white-space: nowrap;
}
.link-arrow span { display: inline-block; transition: translate .3s var(--ease-ui); }
.link-arrow:hover span { translate: 5px 0; }
.link-arrow--sm { font-size: 13px; }

.arrow {
  position: absolute; top: 50%; z-index: 1200; translate: 0 -50%;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--paper-2); border-radius: var(--r-s); corner-shape: squircle;
  font-size: 22px; transition: background .2s, scale .2s;
}
.arrow:hover { background: var(--lime); }
.arrow:hover { animation: wiggle .3s steps(2, end) infinite; }
.arrow--prev { left: 0; } .arrow--next { right: 0; }
.arrow--dark { background: #2a2a26; color: var(--paper); }
.arrow--dark:hover { color: var(--ink); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font-size: 16px; }

/* ---------- torn edges ---------- */
section, footer { position: relative; }
.torn { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--torn-h); z-index: 40; pointer-events: none; color: var(--torn-c); }
.torn svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.torn path, .torn rect { fill: currentColor; }
/* the pale fibre that shows along a real tear */
.torn .torn__fibre { fill: color-mix(in srgb, var(--torn-c) 78%, #fffdf6); }
/* three frames of the same tear, a few px apart, stepped like stop-motion */
.torn__f1, .torn__f2 { opacity: 0; }
.torn__f0 { animation: tear-f0 .75s steps(1) infinite; }
.torn__f1 { animation: tear-f1 .75s steps(1) infinite; }
.torn__f2 { animation: tear-f2 .75s steps(1) infinite; }
@keyframes tear-f0 { 0% { opacity: 1; } 33.33% { opacity: 0; } }
@keyframes tear-f1 { 0% { opacity: 0; } 33.33% { opacity: 1; } 66.66% { opacity: 0; } }
@keyframes tear-f2 { 0% { opacity: 0; } 66.66% { opacity: 1; } }
@media (max-width: 767px) { :root { --torn-h: 56px; } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px var(--gutter);
  pointer-events: none;
  transition: translate .55s var(--ease-ui), transform .7s var(--ease-ui);
}
.nav > * { pointer-events: auto; }
.nav [data-cart-toggle] { justify-self: end; }
.nav [data-menu-toggle] { justify-self: start; }
.nav.is-tucked { translate: 0 -130%; }
.seal { position: relative; width: 104px; height: 104px; display: block; transition: rotate .6s var(--ease-over); }
.seal:hover { rotate: -12deg; }
.seal__spin { position: absolute; inset: 0; animation: seal-spin 40s linear infinite; will-change: transform; }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__bg { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.seal__line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.seal text { font-family: var(--f-ui); font-stretch: 125%; font-weight: 800; font-size: 15.5px; letter-spacing: 1.6px; fill: var(--ink); }
.seal__mascot { position: absolute; width: 58%; left: 21%; top: 19%; }
@keyframes seal-spin { to { rotate: 360deg; } }

.burger { display: inline-grid; gap: 4px; width: 18px; }
.burger i { display: block; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-over), opacity .2s; }
.menu-open .burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-open .burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-open .burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.cart-badge {
  position: absolute; top: -10px; right: -12px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px; background: var(--red); color: var(--paper); border: 2px solid var(--ink);
  font: 700 12px/20px var(--f-mono); text-align: center;
}
.cart-badge.hop { animation: cart-hop .5s var(--ease-over); }
@keyframes cart-hop { 0% { scale: 1; } 30% { scale: 1.5 .7; } 60% { scale: .85 1.25; } 100% { scale: 1; } }

/* =====================================================================
   UNDERLAY MENU + CART
   ===================================================================== */
[data-main] {
  position: relative; z-index: 2; display: block;
  background: var(--ink);
  transition: transform .7s var(--ease-ui);
}
.main__dim { position: fixed; inset: 0; z-index: 5000; background: rgba(14,14,12,.45); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.menu-open .main__dim, .cart-open .main__dim { opacity: 1; visibility: visible; cursor: pointer; }
.menu-open [data-main], .menu-open .nav { transform: translateX(var(--menu-w)); }
.cart-open [data-main], .cart-open .nav { transform: translateX(calc(var(--cart-w) * -1)); }

.menu, .cart { position: fixed; top: 0; bottom: 0; z-index: 1; visibility: hidden; transition: visibility 0s .7s; }
.menu-open .menu, .cart-open .cart { visibility: visible; transition: none; }
.menu { left: 0; width: var(--menu-w); background: var(--lime); }
.menu__inner { height: 100%; overflow-y: auto; padding: 130px 44px 36px 40px; display: flex; flex-direction: column; gap: 26px; }
.menu__eyebrow { color: var(--ink); opacity: .7; }
.menu__links { display: grid; gap: 2px; }
.menu__links a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--f-display); text-transform: uppercase; font-size: 44px; line-height: 1.1; letter-spacing: .02em;
  text-decoration: none; padding: 2px 14px; border-radius: var(--r-s); corner-shape: squircle;
  transition: background .15s steps(2), color .15s steps(2);
}
.menu__links a span { font: 500 13px var(--f-mono); letter-spacing: .1em; }
.menu__links a.is-active, .menu__links a:hover { background: var(--ink); color: var(--lime); }
.menu__links a:hover { animation: wiggle .3s steps(2, end) infinite; }
.menu__app { display: flex; gap: 14px; align-items: center; background: var(--ink); color: var(--paper); padding: 14px 18px; border-radius: var(--r-m); corner-shape: squircle; margin-top: auto; }
.menu__app img { width: 54px; }
.menu__app strong { display: block; font: 400 24px/1 var(--f-display); text-transform: uppercase; color: var(--lime); }
.menu__app span { font-size: 13px; color: var(--on-dark); }
.menu__account { border: 2px solid var(--ink); padding: 14px 18px; border-radius: var(--r-m); corner-shape: squircle; text-decoration: none; font: 700 14px var(--f-ui); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; }
.menu__tear { position: absolute; top: 0; bottom: 0; left: 100%; width: 34px; height: 100%; color: var(--lime); }
.menu__tear path, .cart__tear path { fill: currentColor; }

.cart { right: 0; width: var(--cart-w); background: var(--paper); }
.cart__tear { position: absolute; top: 0; bottom: 0; right: 100%; width: 34px; height: 100%; color: var(--paper); }
.cart__inner { height: 100%; display: flex; flex-direction: column; padding: 34px 32px; gap: 22px; overflow-y: auto; }
.cart__head { display: flex; justify-content: space-between; align-items: center; }
.cart__title { font: 400 40px/1 var(--f-display); text-transform: uppercase; display: flex; gap: 12px; align-items: center; }
.cart__count { font: 700 14px/30px var(--f-mono); min-width: 30px; height: 30px; text-align: center; border-radius: 50%; background: var(--ink); color: var(--lime); }
.cart__empty { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 16px; }
.cart__empty img { width: 190px; }
.cart__empty-title { font: 400 30px/1 var(--f-display); text-transform: uppercase; }
.cart__empty .mono { max-width: 30ch; font-size: 14px; }
.cart__empty .btn { margin-top: 10px; }
.cart__lines { display: grid; gap: 14px; }
.cart__lines:empty { display: none; }
.cart-line { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; background: #fff8; border: 1.5px solid var(--ink); border-radius: var(--r-m); corner-shape: squircle; padding: 10px 14px 10px 10px; }
.cart-line.is-new { animation: line-in .55s var(--ease-over); }
.cart-line img { width: 70px; height: 84px; object-fit: contain; }
.cart-line h4 { margin: 0; font: 400 22px/1 var(--f-display); text-transform: uppercase; }
.cart-line p { font-size: 12px; color: var(--paper-mut); }
.qty { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 14px; }
.qty button { font-size: 16px; width: 18px; }
@keyframes line-in { from { opacity: 0; translate: 30px 0; } }
.cart__foot { margin-top: auto; display: grid; gap: 12px; border-top: 2px dashed var(--ink); padding-top: 18px; }
.cart__foot[hidden] { display: none; }
.cart__subtotal { display: flex; justify-content: space-between; font: 400 26px var(--f-display); text-transform: uppercase; }
.cart__note { font-size: 13px; }

/* cart: free-shipping meter */
.ship { display: grid; gap: 10px; }
.ship[hidden] { display: none; }
.ship .mono { font-size: 13px; color: var(--ink); }
.ship__track { position: relative; height: 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff8; }
.ship__bar {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--lime) 0 8px, var(--lime-deep) 8px 16px);
  transition: width .6s var(--ease-over);
  animation: ship-stripes .5s steps(2) infinite;
}
@keyframes ship-stripes { to { background-position: 22px 0; } }
.ship__kaiju { position: absolute; top: 50%; width: 34px; translate: -50% -60%; left: var(--k, 0%); transition: left .6s var(--ease-over); }
.ship__track:has(.ship__bar) .ship__kaiju { left: min(100%, var(--k, 0%)); }
.ship.is-done .ship__kaiju { animation: wiggle .3s steps(2, end) infinite; }

.cart-line { position: relative; }
.cart-line::before { content: ""; position: absolute; left: -1.5px; top: 14px; bottom: 14px; width: 5px; border-radius: 0 4px 4px 0; background: var(--c); }
.cart-line__end { display: grid; justify-items: end; gap: 6px; }
.cart-line__x { font: 400 11px var(--f-mono); text-decoration: underline; color: var(--paper-mut); }
.cart-line__x:hover { color: var(--red); }
.qty > span { min-width: 14px; text-align: center; }

.cart__extras { display: grid; gap: 12px; }
.cart__extras[hidden] { display: none; }
.club { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 2px dashed var(--ink); border-radius: var(--r-m); corner-shape: squircle; transition: background .2s steps(2); }
.club.is-on { background: var(--lime); border-style: solid; }
.club strong { display: block; font: 400 20px/1 var(--f-display); text-transform: uppercase; }
.club .mono { font-size: 12px; line-height: 1.4; }
.switch { flex: none; position: relative; width: 54px; height: 30px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper-2); }
.switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: translate .3s var(--ease-over); }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"] i { translate: 24px 0; background: var(--lime); }
.rec { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-m); corner-shape: squircle; background: var(--ink); color: var(--paper); }
.rec[hidden] { display: none; }
.rec img { width: 48px; height: 60px; object-fit: contain; }
.rec .eyebrow { color: var(--c); }
.rec h4 { margin: 2px 0 0; font: 400 20px/1 var(--f-display); text-transform: uppercase; }
.rec p { font-size: 11px; color: var(--on-dark); }
.rec-add { padding: 8px 12px; border-radius: 999px; background: var(--c); color: var(--ink); font: 700 12px var(--f-ui); font-stretch: 125%; letter-spacing: .06em; border: 2px solid var(--ink); white-space: nowrap; }
.rec-add:hover { animation: wiggle .3s steps(2, end) infinite; }
.cart__row { display: flex; justify-content: space-between; font: 500 14px var(--f-mono); color: var(--leaf); }
.cart__row[hidden] { display: none; }
.cart__count { overflow: hidden; }

/* bean pop burst (add to cart) */
.bean-pop {
  position: fixed; z-index: 9600; width: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); pointer-events: none;
  filter: drop-shadow(2px 3px 0 var(--ink));
  animation: bean-pop .75s steps(6) forwards;
}
@keyframes bean-pop {
  0% { translate: 0 0; rotate: 0deg; scale: .4; opacity: 1; }
  60% { opacity: 1; }
  100% { translate: var(--dx) calc(var(--dy) + 60px); rotate: var(--rot); scale: 1; opacity: 0; }
}

/* page curtain */
.curtain { position: fixed; inset: 0; z-index: 9200; background: var(--lime); pointer-events: none; visibility: hidden; transform: scaleX(0); transform-origin: 0 50%; display: grid; place-items: center; }
.curtain.is-in { visibility: visible; pointer-events: auto; animation: pt-stretch .7s cubic-bezier(.75, 0, .2, 1) forwards; }
.curtain.is-out { transform-origin: 100% 50%; animation: pt-shut .8s cubic-bezier(.75, 0, .2, 1) forwards; }
@keyframes pt-stretch { 0% { transform: scaleX(0) skewX(0); } 65% { transform: scaleX(1.06) skewX(-4deg); } 100% { transform: scaleX(1) skewX(0); } }
@keyframes pt-shut { 0% { transform: scaleX(1); } 30% { transform: scaleX(1.04) skewX(3deg); } 100% { transform: scaleX(0); } }
.curtain__tear { position: absolute; top: 0; height: 100%; width: 34px; color: var(--lime); }
.curtain__tear path { fill: currentColor; }
.curtain__tear--l { right: 100%; } .curtain__tear--r { left: 100%; }
.curtain__title { font: 400 clamp(64px, 11vw, 180px)/.9 var(--f-display); text-transform: uppercase; color: var(--ink); text-align: center; padding: 0 var(--gutter); }
.curtain.is-titled .sr-word { translate: 0 0; }
.curtain__kaiju { position: absolute; width: 120px; bottom: 9vh; left: 50%; margin-left: -60px; opacity: 0; scale: .5; transition: opacity .2s steps(2), scale .2s steps(2); }
.curtain.is-titled .curtain__kaiju { opacity: 1; scale: 1; animation: wiggle .3s steps(2, end) infinite; }

@media (max-width: 767px) {
  .menu-open [data-main], .menu-open .nav { transform: none; }
  .menu { width: 100%; bottom: auto; height: 100dvh; z-index: 6000; translate: 0 -100%; visibility: visible; transition: translate .6s var(--ease-ui); }
  .menu-open .menu { translate: 0 0; }
  .menu-open .nav { z-index: 7000; }
  .menu__tear { display: none; }
  .menu__inner { padding: 120px 24px 28px; }
  .menu__links a { font-size: 36px; }
  .cart-open [data-main], .cart-open .nav { transform: translateX(calc(var(--cart-w) * -1)); }
}

/* =====================================================================
   01 HERO
   ===================================================================== */
.hero { background: var(--paper); min-height: max(100svh, 860px); padding: 150px var(--gutter) calc(var(--torn-h) + 40px); overflow: clip; }
.hero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 3vw; align-items: center; max-width: 1500px; margin: 0 auto; }
.hero__copy { display: grid; gap: 28px; justify-items: start; }
.hero__title { display: grid; gap: .1em; }
.hero__title .script { font-size: clamp(52px, 5.8vw, 96px); --sc: var(--lime); }
.hero__title .display { font-size: clamp(62px, 6.6vw, 104px); }
.hero__lede { max-width: 50ch; }
.hero__ctas { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; margin-top: 6px; }
.katakana--hero {
  position: absolute; right: calc(var(--gutter) * .4); top: 150px; z-index: 2;
  writing-mode: vertical-rl; font-size: 22px; letter-spacing: .3em; color: var(--ink); opacity: .9;
}

/* lazy susan */
.susan { position: relative; height: clamp(580px, 72vh, 740px); --bag-w: clamp(210px, min(19vw, 30vh), 300px); }
.susan__stage { position: absolute; inset: 0 60px 150px; perspective: 1200px; }
.susan-bag {
  position: absolute; left: 50%; top: 50%; width: var(--bag-w); margin-left: calc(var(--bag-w) / -2);
  translate: 0 -50%;
  will-change: transform;
  cursor: grab;
  filter: drop-shadow(10px 12px 0 rgba(14,14,12,.18));
  user-select: none; -webkit-user-drag: none;
}
.susan-bag img { width: 100%; pointer-events: none; }
.susan.is-dragging .susan-bag { cursor: grabbing; }
.susan__caption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 4px; text-align: center; transition: opacity .35s, translate .35s; }
.susan__caption.is-moving { opacity: 0; translate: 0 6px; }
.susan__caption .rank { position: absolute; }
.susan__name { font: 400 clamp(34px, 3.2vw, 46px)/1 var(--f-display); text-transform: uppercase; display: inline-flex; gap: 12px; align-items: center; }
.rank { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--lime); font: 500 14px var(--f-mono); }
.susan__caption { grid-template-columns: auto auto; column-gap: 14px; justify-content: center; }
.susan__caption .rank { position: static; }
.susan__notes { grid-column: 1 / -1; font-size: 14px; display: flex; gap: 14px; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.susan__notes a { color: var(--ink); }

/* bean fields */
.bean-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bean {
  position: absolute; width: var(--s); rotate: var(--r);
  filter: drop-shadow(4px 5px 0 var(--bsh));
  scale: .45; opacity: 0;
  transition: scale .16s steps(2), opacity .16s steps(2);
}
.bean.is-on { scale: 1; opacity: 1; }

/* =====================================================================
   02 REVIEWS
   ===================================================================== */
.reviews { background: var(--d0); padding: 120px 0 calc(var(--torn-h) + 40px); display: grid; gap: 56px; justify-items: center; overflow: clip; }
.marquee { width: 100%; overflow: hidden; cursor: grab; touch-action: pan-y; }
.marquee__track { display: flex; gap: 22px; width: max-content; padding: 8px 0 18px; will-change: transform; }
.review {
  width: clamp(300px, 27vw, 400px); flex: none;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-xl); corner-shape: squircle;
  padding: 30px 30px 28px; display: grid; gap: 16px; align-content: start;
  box-shadow: 8px 8px 0 #000;
}
.review:nth-child(3n+2) { rotate: .8deg; } .review:nth-child(3n) { rotate: -.7deg; }
.review p { font-family: var(--f-mono); font-size: 15px; line-height: 1.6; color: #2e2b26; }
.review > span { font: 700 12px var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; }
.stars { font-size: 22px; letter-spacing: 3px; color: var(--lime); -webkit-text-stroke: 1.4px var(--ink); paint-order: stroke fill; }
.link-scribble { position: relative; text-decoration: none; font: 700 clamp(13px, 1.1vw, 16px) var(--f-ui); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 10px; text-align: center; margin: 0 var(--gutter); }
.link-scribble svg { position: absolute; left: -2%; width: 104%; bottom: -4px; height: 14px; }
.link-scribble path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-ui); }
.link-scribble:hover path { animation: scribble .7s steps(4) forwards; }
@keyframes scribble { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }

/* =====================================================================
   03 VALUES
   ===================================================================== */
.values { background: var(--d0); padding: 60px var(--gutter) calc(var(--torn-h) + 120px); display: grid; gap: 64px; }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1240px; width: 100%; margin: 0 auto; }
.value-card {
  background: var(--card); border-radius: var(--r-xl); corner-shape: squircle;
  padding: 48px 36px 44px; display: grid; gap: 14px; align-content: start;
  border: 1px solid #262622;
  transition: translate .4s var(--ease-ui), border-color .2s;
}
.value-card:hover { translate: 0 -6px; border-color: var(--ic); }
.value-icon { width: 76px; height: 76px; margin-bottom: 10px; }
.value-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.value-icon .f { fill: var(--ic); stroke: none; translate: 4px 4px; }
.value-card:hover .value-icon { animation: wiggle .35s steps(2, end) infinite; }
.value-card h3 { font: 400 clamp(28px, 2.1vw, 34px)/1 var(--f-display); text-transform: uppercase; color: var(--paper); letter-spacing: .02em; }
.value-card .mono { font-size: 14px; }

/* =====================================================================
   04 SEARCHLIGHT CAROUSEL
   ===================================================================== */
.sl { background: var(--ink); padding: 110px 0 calc(var(--torn-h) + 50px); overflow: clip; --beam: var(--lime); }
.sl .sec-head { position: relative; z-index: 30; }
.sl__stars { position: absolute; inset: 0; opacity: .45; background:
  radial-gradient(1.2px 1.2px at 40px 60px, #fff, transparent),
  radial-gradient(1px 1px at 180px 220px, #fff, transparent),
  radial-gradient(1.5px 1.5px at 300px 90px, #fff, transparent),
  radial-gradient(1px 1px at 90px 330px, #fff, transparent),
  radial-gradient(1.2px 1.2px at 250px 300px, #fff, transparent),
  radial-gradient(1px 1px at 360px 180px, #fff, transparent);
  background-size: 400px 400px; animation: twinkle 2.4s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
.sl__sweep { position: absolute; bottom: 120px; width: 160px; height: 120vh; transform-origin: 50% 100%; z-index: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--paper) 16%, transparent), transparent 85%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); }
.sl__sweep--a { left: 8%; animation: sweep 9s ease-in-out infinite alternate; }
.sl__sweep--b { right: 8%; animation: sweep 11s ease-in-out infinite alternate-reverse; }
@keyframes sweep { from { rotate: -28deg; } to { rotate: 22deg; } }

.sl__stage { position: relative; z-index: 10; height: clamp(440px, 56vh, 600px); margin-top: 10px; --u: 1; }
.sl__beam {
  /* one pre-rendered halftone cone (tools/make_beam.py) used as a mask: re-tinting is
     a background-color change and swaying is a plain composited rotate */
  position: absolute; left: 50%; bottom: 0; width: min(520px, 76vw); aspect-ratio: 1040 / 1240; max-height: 112%;
  translate: -50% 0;
  background-color: var(--beam);
  -webkit-mask: url("assets/img/beam-mask.webp") 50% 100% / 100% 100% no-repeat;
  mask: url("assets/img/beam-mask.webp") 50% 100% / 100% 100% no-repeat;
  transition: background-color .4s;
  will-change: transform;
  opacity: .95;
}
.sl__spot { position: absolute; left: 50%; bottom: 8px; width: 380px; height: 54px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle, var(--beam) 40%, transparent 44%) 0 0 / 8px 8px; opacity: .8;
  -webkit-mask: radial-gradient(closest-side, #000 50%, transparent); mask: radial-gradient(closest-side, #000 50%, transparent); }
.sl__particles { position: absolute; left: 50%; bottom: 0; width: 420px; height: 100%; translate: -50% 0; overflow: visible; pointer-events: none; }
.sl__particles i { position: absolute; border-radius: 50%; background: var(--beam); animation: beam-particle var(--d) linear infinite; animation-delay: var(--delay); opacity: 0; will-change: transform, opacity; }
.sl-bag.is-front img, .sl-bag.is-front .price-tag { animation: bag-float 8.8s ease-in-out infinite; }
@keyframes bag-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes beam-particle {
  0% { opacity: 0; translate: 0 0; }
  15% { opacity: .9; }
  80% { opacity: .5; }
  100% { opacity: 0; translate: var(--drift) -560px; }
}
.sl__bags { position: absolute; inset: 0; }
.sl-bag {
  position: absolute; left: 50%; bottom: 8%;
  height: var(--h); width: auto; aspect-ratio: 760 / 1396;
  transform: translate(calc(-50% + var(--x)), calc(var(--y) + var(--float, 0px)));
  opacity: var(--o); filter: blur(var(--b)) drop-shadow(var(--shd) var(--shd) 0 #000);
  z-index: var(--z);
  transition: transform .32s cubic-bezier(.2,.8,.25,1), height .32s cubic-bezier(.2,.8,.25,1), opacity .25s, filter .25s;
  cursor: pointer;
}
.sl-bag img { height: 100%; width: auto; max-width: none; }
.sl-bag.is-hidden { pointer-events: none; }
.price-tag {
  position: absolute; left: -16%; top: 6%; rotate: -8deg;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  padding: 8px 16px 6px; border-radius: 8px; box-shadow: 4px 4px 0 #000;
  font: 500 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-align: center;
  opacity: 0; scale: .7; transition: opacity .2s steps(2), scale .2s steps(2);
}
.price-tag b { display: block; font: 400 28px/1 var(--f-display); letter-spacing: .02em; }
.sl-bag.is-front .price-tag { opacity: 1; scale: 1; }

.skyline { position: absolute; left: 0; right: 0; bottom: calc(var(--torn-h) - 20px); width: 100%; height: 190px; z-index: 5; pointer-events: none; }
.skyline .b { fill: #1b1b18; }
.skyline .w { fill: var(--beam); opacity: .0; transition: fill .4s; }
.skyline .w.on { opacity: .75; }

.sl__detail { position: relative; z-index: 30; display: grid; justify-items: center; gap: 16px; text-align: center; padding: 26px var(--gutter) 0; }
.sl__detail.is-anim > * { animation: detail-in .6s var(--ease-out) both; }
.sl__detail.is-anim > *:nth-child(2) { animation-delay: .05s; } .sl__detail.is-anim > *:nth-child(3) { animation-delay: .1s; } .sl__detail.is-anim > *:nth-child(4) { animation-delay: .15s; }
@keyframes detail-in { from { opacity: 0; translate: 0 8px; } }
.sl__notes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sl__notes li { border: 1.5px solid #3e3c36; border-radius: 999px; padding: 5px 14px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); display: flex; gap: 8px; align-items: center; }
.sl__notes li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--beam); transition: background .4s; }
.sl__name { font: 400 clamp(48px, 5vw, 76px)/.95 var(--f-display); text-transform: uppercase; color: var(--paper); }
.sl__meta { display: flex; gap: 14px; align-items: center; }
.sl__meta .eyebrow { color: var(--on-dark); }
.meter { display: inline-flex; gap: 6px; }
.meter i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--paper); }
.meter i.on { background: var(--beam); border-color: var(--beam); }
.sl__ctas { display: flex; gap: 32px; align-items: center; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.sl .btn { --btn-bg: var(--beam); }
.sl .link-arrow { color: var(--paper); }

/* cursor pop */
.pop {
  position: fixed; left: 0; top: 0; z-index: 9000; pointer-events: none;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 16px; border-radius: 999px;
  font: 700 12px var(--f-ui); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; scale: .6; transition: opacity .15s steps(2), scale .15s steps(2);
}
.pop.is-on { opacity: 1; scale: 1; }
@media (pointer: coarse) { .pop { display: none; } }

/* =====================================================================
   05 PILLARS · sticky steps
   ===================================================================== */
.pillars { background: var(--paper); display: grid; grid-template-columns: 54% 46%; padding: 0 var(--gutter); }
.pillars__text { display: grid; row-gap: 30dvh; padding: calc(50dvh - 9em) 4vw calc(50dvh - 9em) 0; }
.pillar { display: grid; gap: 24px; justify-items: start; }
.pillar .eyebrow { color: var(--pc); }
.pillar__title { display: grid; gap: .08em; }
.pillar__title .script { font-size: clamp(56px, 6vw, 104px); justify-self: start; }
.pillar__title .display { font-size: clamp(56px, 7.4vw, 128px); line-height: .9; }
.pillar .mono { max-width: 52ch; }
.pillar__img-m { display: none; }
.pillars__media { position: sticky; top: 0; height: 100dvh; display: grid; place-items: center; }
.pillars__frame { position: relative; width: min(100%, 560px); aspect-ratio: 4 / 5; }
.pillars__img { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease-in-out, visibility .5s; }
.pillars__img::before { content: ""; position: absolute; inset: 0; translate: 16px 16px; background: var(--pc); clip-path: url(#wobble-clip); }
.pillars__img img { position: relative; width: 100%; height: 100%; object-fit: cover; clip-path: url(#wobble-clip); }
.pillars__img.is-active { opacity: 1; visibility: visible; }
.pillars__img.is-active img { animation: img-pop .5s steps(3); }
@keyframes img-pop { 0% { scale: .96; rotate: -1deg; } 50% { scale: 1.02; rotate: .6deg; } 100% { scale: 1; rotate: 0deg; } }

/* =====================================================================
   06 TIMELINE · pinned horizontal
   ===================================================================== */
.tl { height: 300vh; background: var(--d1); }
.tl__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tl__bg { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 2.334; will-change: transform; }
.tl__bg img { width: 100%; height: 100%; object-fit: cover; }
.tl__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,14,12,.92) 8%, rgba(14,14,12,.55) 34%, rgba(14,14,12,.3) 60%, rgba(14,14,12,.6)); }
.tl__head { position: absolute; top: 13vh; left: var(--gutter); z-index: 3; color: var(--paper); display: grid; gap: 10px; }
.tl__head .eyebrow { color: var(--lime); }
.tl__track { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 6vw; padding: 18vh 10vw 0 calc(var(--gutter) + 38vw); will-change: transform; }
.tl-card {
  flex: none; width: max(28vw, 340px); max-width: 420px;
  background: var(--paper); border-radius: var(--r-xl); corner-shape: squircle; padding: 24px 28px 26px;
  display: grid; gap: 8px; box-shadow: 10px 10px 0 var(--ink); border: 2px solid var(--ink);
}
.tl-card:nth-of-type(odd) { translate: 0 -5vh; rotate: -1.2deg; } .tl-card:nth-of-type(even) { translate: 0 6vh; rotate: 1deg; }
.tl-card img { height: 170px; width: 100%; object-fit: contain; margin-bottom: 6px; }
.tl-card__year { font: 700 14px var(--f-ui); font-stretch: 125%; letter-spacing: .24em; color: var(--red); }
.tl-card h3 { font: 400 36px/1 var(--f-display); text-transform: uppercase; }
.tl-card p { font: 400 15px/1.5 var(--f-ui); color: #3b3832; }
.tl-card__cap { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--paper-soft); }

/* =====================================================================
   07 CTA · bean pit
   ===================================================================== */
.cta { background: var(--paper); min-height: 760px; display: grid; place-items: center; overflow: clip; padding: 140px var(--gutter) calc(var(--torn-h) + 120px); }
.cta__pit { position: absolute; inset: 0; z-index: 6; }
.cta__pit canvas { display: block; width: 100%; height: 100%; }
.cta__kaiju { position: absolute; z-index: 7; pointer-events: none; width: min(520px, 46vw); right: 3vw; bottom: calc(var(--torn-h) - 14px); animation: kaiju-bob 1.4s steps(2) infinite; transform-origin: 50% 100%; }
@keyframes kaiju-bob { 0% { rotate: -1.4deg; } 100% { rotate: 1.4deg; } }
.cta__inner { position: relative; z-index: 8; display: grid; justify-items: center; gap: 28px; text-align: center; pointer-events: none; }
.cta__inner > * { pointer-events: auto; }
.cta__title { font-size: clamp(52px, 6.2vw, 96px); max-width: 14ch; }
.cta__strip { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
.cta__strip li { display: flex; gap: 8px; align-items: center; }
.cta__strip svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.cta__hint { font-size: 12px; color: var(--paper-soft); rotate: -2deg; }

/* =====================================================================
   08 APP
   ===================================================================== */
.app { background: var(--d0); padding: 90px var(--gutter) calc(var(--torn-h) + 80px); overflow: clip; }
.app__panel {
  position: relative; z-index: 3; max-width: 1240px; margin: 0 auto;
  background: var(--d2); border-radius: var(--r-xl); corner-shape: squircle; border: 1px solid #2a2a26;
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; padding: 70px 70px 0;
}
.app__copy { display: grid; gap: 24px; justify-items: start; padding-bottom: 70px; }
.app__phone { align-self: end; }
.app__phone img { width: min(380px, 100%); margin: -120px auto 0; rotate: 8deg; filter: drop-shadow(16px 18px 0 #000); }
.store-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.sq-btn {
  display: grid; text-decoration: none; padding: 12px 22px; border-radius: 6px; border: 2px solid var(--ink);
  font: 400 24px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink);
  box-shadow: 5px 5px 0 #000; transition: translate .15s steps(2), box-shadow .15s steps(2);
}
.sq-btn small { font: 500 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.sq-btn--lime { background: var(--lime); } .sq-btn--paper { background: var(--paper); }
.sq-btn:hover { translate: 3px 3px; box-shadow: 2px 2px 0 #000; }

/* =====================================================================
   09 SUBSCRIBE
   ===================================================================== */
.sub { background: var(--lime); padding: 90px var(--gutter) calc(var(--torn-h) + 70px); }
.sub .eyebrow { color: var(--ink); }
.sub__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.sub__copy { display: grid; gap: 24px; justify-items: start; }
.sub__copy .mono { color: #2f3a10; max-width: 44ch; }
.sub__card { background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-xl); corner-shape: squircle; box-shadow: 14px 14px 0 var(--ink); padding: 14px 30px; rotate: 1.2deg; }
.sub__card li { display: flex; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1.5px dashed #b8ae9a; }
.sub__card li:last-child { border-bottom: 0; }
.sub__card strong { display: block; font: 400 24px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.sub__card .mono { font-size: 13px; }
.sub__ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font: 700 20px var(--f-mono); }
.sub__card li:hover .sub__ic { animation: wiggle .3s steps(2, end) infinite; }

/* =====================================================================
   10 FOOTER
   ===================================================================== */
.footer { background: var(--ink); padding: 90px var(--gutter) 40px; overflow: clip; }
.footer__kanji { position: absolute; right: -2vw; bottom: -4vw; font: 400 clamp(120px, 20vw, 320px)/1 var(--f-jp); color: #1a1a17; pointer-events: none; white-space: nowrap; }
.footer__grid { position: relative; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; max-width: 1240px; margin: 0 auto; }
.footer__brand { display: grid; gap: 12px; align-content: start; }
.footer__name { font: 400 clamp(40px, 4vw, 60px)/.95 var(--f-display); text-transform: uppercase; }
.footer__brand .script { font-size: 26px; justify-self: start; }
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col a { font: 400 15px var(--f-mono); color: var(--on-dark); text-decoration: none; justify-self: start; }
.footer__col a:hover { color: var(--lime); animation: wiggle .3s steps(2, end) infinite; }
.footer__base { position: relative; max-width: 1240px; margin: 70px auto 0; padding-top: 22px; border-top: 1px solid #2a2a26; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__base .eyebrow { color: var(--on-dark); }
.socials { display: flex; gap: 12px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid #3a3a35; border-radius: 50%; color: var(--paper); }
.socials a:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* =====================================================================
   FIRST-VISIT POPUP
   ===================================================================== */
.fvp { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 20px; }
.fvp[hidden] { display: none; }
.fvp__backdrop { position: absolute; inset: 0; background: rgba(14,14,12,.6); animation: fade-in .3s; }
.fvp__card {
  position: relative; width: min(560px, 100%); background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-xl); corner-shape: squircle;
  box-shadow: 14px 14px 0 var(--lime), 14px 14px 0 2.5px var(--ink); padding: 54px 40px 34px; text-align: center;
  animation: card-in .55s var(--ease-over);
}
@keyframes card-in { from { opacity: 0; scale: .8; rotate: -3deg; } }
@keyframes fade-in { from { opacity: 0; } }
.fvp__x { position: absolute; top: 16px; right: 16px; }
.fvp__mascot { position: absolute; width: 110px; left: 50%; top: -76px; margin-left: -55px; }
.fvp__step { display: none; gap: 18px; justify-items: center; }
.fvp__step.is-active { display: grid; animation: detail-in .5s var(--ease-out); }
.fvp__title { font-size: clamp(36px, 5vw, 52px); }
.fvp__blends { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 6px; }
.fvp__blends button { display: grid; justify-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: var(--r-m); corner-shape: squircle; padding: 18px 10px; font: 400 24px var(--f-display); text-transform: uppercase; background: #fff6; transition: background .15s steps(2), translate .15s steps(2); }
.fvp__blends button:hover { background: var(--lime); translate: -2px -2px; box-shadow: 4px 4px 0 var(--ink); }
.beans-n { height: 18px; width: calc(var(--n) * 14px + 14px); background: radial-gradient(ellipse 5px 7px at 7px 9px, #5a3a22 90%, transparent) 0 0 / 14px 18px repeat-x; display: block; }
.beans-n[style*="--n:0"] { width: 18px; background: none; }
.beans-n[style*="--n:0"]::before { content: "?"; font: 700 18px/18px var(--f-mono); }
.fvp__decline { font: 400 13px var(--f-mono); text-decoration: underline; color: var(--paper-mut); margin-top: 4px; }
.field { display: grid; gap: 6px; width: 100%; text-align: left; }
.field span { font: 700 11px var(--f-ui); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; }
.field input { font: 400 16px var(--f-mono); padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--r-s); background: #fff; }
.field input:focus { outline: none; box-shadow: 4px 4px 0 var(--lime), 4px 4px 0 2px var(--ink); }
.fvp-chip {
  position: fixed; left: 0; top: 50%; z-index: 800; translate: 0 -50%;
  writing-mode: vertical-rl; rotate: 180deg;
  background: var(--lime); border: 2px solid var(--ink); border-left: 0; border-radius: 0 10px 10px 0;
  padding: 18px 10px; font: 700 13px var(--f-ui); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase;
  transition: translate .4s var(--ease-ui);
}
.fvp-chip { border-radius: 10px 0 0 10px; border-left: 2px solid var(--ink); border-right: 0; }
.fvp-chip.is-tucked { translate: -110% -50%; }
.code-copy { display: inline-flex; align-items: center; gap: 10px; border: 2px dashed var(--ink); border-radius: 10px; padding: 10px 16px; font: 500 20px var(--f-mono); letter-spacing: .14em; background: #fff8; }
.code-copy small { font: 700 10px var(--f-ui); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--soft-ink); }
.code-copy:hover { background: var(--lime); border-style: solid; }
.code-copy.is-copied small { color: var(--leaf-ink); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1023px) {
  .hero { padding-top: 130px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { order: 2; }
  .susan { order: 1; height: 600px; --bag-w: clamp(170px, 34vw, 240px); }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; padding: 90px var(--gutter) 140px; }
  .pillars__media { display: none; }
  .pillars__text { padding: 0; row-gap: 0; }
  .pillar {
    position: sticky; top: 90px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-xl); corner-shape: squircle;
    padding: 30px 26px; margin-bottom: 40px; box-shadow: 8px 8px 0 var(--pc);
    animation: ss-out linear both; animation-timeline: view(); animation-range: exit 0% exit 70%;
  }
  .pillar__img-m { display: block; width: 100%; border-radius: var(--r-l); clip-path: url(#wobble-clip); aspect-ratio: 4/3; object-fit: cover; }
  .app__panel { grid-template-columns: 1fr; padding: 50px 30px 0; }
  .app__copy { padding-bottom: 0; }
  .app__phone img { margin-top: 0; width: min(300px, 80%); }
  .sub__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@keyframes ss-out { to { scale: .88; opacity: 0; } }

@media (max-width: 767px) {
  .nav { padding: 14px 16px; }
  .seal { width: 78px; height: 78px; }
  .btn--menu .burger__label { display: none; }
  .btn--menu { padding: 0 18px; }
  .katakana--hero { display: none; }
  .hero { padding: 96px 0 calc(var(--torn-h) + 10px); min-height: 0; }
  .susan { height: 380px; margin: 0 16px; --bag-w: clamp(150px, 40vw, 190px); }
  .susan__stage { inset: 0 30px 92px; }
  .susan__name { font-size: 30px; }
  .susan__notes { font-size: 12px; gap: 6px 12px; }
  .hero__copy {
    position: relative; background: var(--lime); padding: 64px 22px 48px; margin-top: 20px; gap: 22px;
  }
  .hero__copy::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 40px; background: var(--paper);
    clip-path: polygon(0 0,100% 0,100% 40%,94% 70%,88% 45%,80% 80%,72% 50%,63% 75%,55% 40%,46% 72%,38% 48%,29% 82%,20% 50%,12% 70%,5% 42%,0 65%); }
  .hero__copy .chip { background: transparent; }
  .hero__copy .mono { color: #2f3a10; }
  .hero__title .script { --sc: var(--paper); }
  .hero__copy .btn { --btn-bg: var(--ink); --btn-fg: var(--lime); }
  .reviews { padding-top: 80px; gap: 40px; }
  .values { padding-top: 30px; gap: 40px; }
  .values__grid { grid-template-columns: 1fr; }
  .value-card { padding: 34px 26px; }
  .sl { padding-top: 80px; }
  .sl__stage { height: 440px; }
  .sl__beam { width: 300px; }
  .sl__spot { width: 240px; }
  .sl__sweep { display: none; }
  .skyline { height: 110px; }
  .price-tag { left: -24%; scale: .8; }
  .tl-card { width: 78vw; min-width: 0; }
  .tl-card img { height: 130px; }
  .tl__track { padding-left: 16px; padding-top: 16vh; gap: 10vw; }
  .tl__head { top: 11vh; }
  .cta { min-height: 640px; padding-top: 110px; }
  .cta__kaiju { width: 70vw; right: -6vw; }
  .app { padding-top: 60px; }
  .app__panel { padding: 40px 22px 0; }
  .sub__card { padding: 8px 20px; rotate: 0deg; box-shadow: 8px 8px 0 var(--ink); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .fvp__card { padding: 50px 22px 26px; }
}

/* =====================================================================
   ROUND 2 · system additions
   ===================================================================== */
:root {
  /* text-safe accents on paper (AA at body sizes) */
  --red-ink: #c4291b;
  --leaf-ink: #3d6d0a;
  --teal-ink: #116f6a;
  --soft-ink: #6e685e;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { color: var(--red-ink); }
.on-dark .eyebrow { color: var(--lime); }
.cta__hint, .tl-card__cap { color: var(--soft-ink); }
.tl-card__year { color: var(--red-ink); }
.btn--teal { --btn-fg: var(--ink); }
.btn--red { --btn-bg: var(--red-ink); }
.pillar[data-step="0"] { --pt: var(--leaf-ink); } .pillar[data-step="1"] { --pt: var(--red-ink); } .pillar[data-step="2"] { --pt: var(--teal-ink); }
.pillar .eyebrow { color: var(--pt); }

/* sections far from the viewport skip rendering; heights are measured first */
.cv { content-visibility: auto; contain-intrinsic-size: auto var(--cis, 900px); }
/* CSS loops pause while their section is off screen */
[data-section]:not(.in-view) *, [data-section]:not(.in-view)::before, footer:not(.in-view) * { animation-play-state: paused !important; }

/* ---------- page transitions: the page tears open ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-old .9s cubic-bezier(.75, 0, .2, 1) both; }
::view-transition-new(root) { animation: vt-tear .9s cubic-bezier(.75, 0, .2, 1) both; }
::view-transition-group(kj-bag) { animation-duration: .85s; animation-timing-function: cubic-bezier(.6, 0, 0, 1); z-index: 10; }
::view-transition-image-pair(kj-bag) { isolation: auto; }
::view-transition-old(kj-bag), ::view-transition-new(kj-bag) { animation-duration: .85s; mix-blend-mode: normal; height: 100%; object-fit: contain; }
@keyframes vt-old { to { scale: .96; filter: brightness(.55); } }
@keyframes vt-tear {
  from { clip-path: polygon(0% 0%, -9.1% 0.0%, -10.2% 6.2%, -7.0% 12.5%, -10.7% 18.8%, -7.8% 25.0%, -8.9% 31.2%, -10.8% 37.5%, -8.0% 43.8%, -11.0% 50.0%, -8.4% 56.2%, -10.8% 62.5%, -10.6% 68.8%, -8.5% 75.0%, -5.9% 81.2%, -10.4% 87.5%, -9.8% 93.8%, -7.2% 100.0%, 0% 100%); }
  to { clip-path: polygon(0% 0%, 110.9% 0.0%, 109.8% 6.2%, 113.0% 12.5%, 109.3% 18.8%, 112.2% 25.0%, 111.1% 31.2%, 109.2% 37.5%, 112.0% 43.8%, 109.0% 50.0%, 111.6% 56.2%, 109.2% 62.5%, 109.4% 68.8%, 111.5% 75.0%, 114.1% 81.2%, 109.6% 87.5%, 110.2% 93.8%, 112.8% 100.0%, 0% 100%); }
}

/* ---------- nav: sound toggle ---------- */
.nav__right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.snd {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink);
}
.snd svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snd .snd__spk { fill: currentColor; }
.snd .snd__w1, .snd .snd__w2, .snd__bars { display: none; }
.snd.is-on { background: var(--lime); }
.snd.is-on .snd__x { display: none; }
.snd.is-on .snd__w1, .snd.is-on .snd__w2 { display: block; }
.snd.is-on svg { animation: wiggle .3s steps(2, end) infinite; }
.snd:hover { animation: wiggle .3s steps(2, end) infinite; }
.snd-hint {
  position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%; white-space: nowrap;
  background: var(--ink); color: var(--paper); font: 500 12px var(--f-mono); letter-spacing: .04em; padding: 7px 12px; border-radius: 8px;
  animation: hint-in .35s steps(3) both, hint-out .3s steps(2) 4.9s forwards; pointer-events: none;
}
.snd-hint::after { content: ""; position: absolute; left: 100%; top: 50%; translate: 0 -50%; border: 6px solid transparent; border-left-color: var(--ink); }
@keyframes hint-in { from { opacity: 0; translate: 10px -50%; } }
@keyframes hint-out { to { opacity: 0; } }

/* ---------- hero: footprints, intro drop, stomp ---------- */
.hero__prints { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.print { position: absolute; width: clamp(150px, 15vw, 230px); aspect-ratio: 200 / 250; fill: #e3d8c3; }
.print--1 { left: 47%; top: -40px; rotate: 162deg; opacity: .45; width: clamp(110px, 10vw, 160px); }
.print--2 { left: 30%; bottom: 4%; rotate: 18deg; opacity: .7; width: clamp(120px, 11vw, 170px); }
.print--3 { right: 11%; top: 44%; rotate: -14deg; }
.is-printed .print--3 { scale: 1; }
.hero.is-stomped .print--3 { animation: print-stamp .45s steps(3) both, boil .42s steps(1) infinite; }
@keyframes print-stamp { 0% { scale: 1.6; opacity: 0; } 40% { scale: .92; opacity: 1; } 100% { scale: 1; } }
.hero.is-stomped .hero__grid, .hero.is-stomped .bean-field { animation: shake .5s steps(6) both; }
@keyframes shake { 0% { translate: 0 0; } 17% { translate: -7px 5px; } 33% { translate: 6px -4px; } 50% { translate: -4px 3px; } 67% { translate: 3px -2px; } 83% { translate: -1px 1px; } 100% { translate: 0 0; } }
.susan-bag img.drop-in { animation: bag-drop .62s cubic-bezier(.5, 0, .9, .4) var(--dd, 0ms) both, bag-land .3s steps(3) calc(var(--dd, 0ms) + .62s) both; }
.susan-bag img.slam-in { transform-origin: 50% 100%; animation: bag-slam .34s cubic-bezier(.7, 0, .9, .5) var(--dd, 0ms) both, bag-land .3s steps(3) calc(var(--dd, 0ms) + .34s) both; }
@keyframes bag-slam { from { translate: 0 -46px; scale: 1.12; rotate: -3deg; } to { translate: 0 0; scale: 1; rotate: 0deg; } }
@keyframes bag-drop { from { translate: 0 -120vh; rotate: -8deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes bag-land { 0% { scale: 1.08 .86; transform-origin: 50% 100%; } 50% { scale: .96 1.05; } 100% { scale: 1; } }

/* ---------- lazy susan: turntable disc, arrows by the caption ---------- */
.susan-bag { top: 42%; }
/* the disc is a flat circle tipped back in 3D; JS only turns it */
.susan__disc { position: absolute; left: 50%; top: calc(42% + var(--bag-w) * .918); width: calc(var(--bag-w) * 2.05); aspect-ratio: 1; translate: -50% -50%; z-index: 0; pointer-events: none; perspective: 1400px; }
.susan__disc::before { content: ""; position: absolute; left: 4%; right: 2%; top: 50%; height: 26%; translate: 0 -38%; border-radius: 50%; background: rgba(14, 14, 12, .14); }
.susan__face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotateX(78deg); will-change: transform; }
.susan__face .d-top { fill: var(--paper-2); stroke: var(--ink); stroke-width: 5; }
.susan__face .d-ring { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 3 11; opacity: .5; }
.susan__face .d-tick { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.susan-bag.is-side { filter: drop-shadow(10px 12px 0 rgba(14,14,12,.18)) brightness(.9); }
.susan .arrow { top: auto; bottom: 22px; translate: none; }
.susan .arrow--prev { left: 4%; } .susan .arrow--next { right: 4%; }
.susan__caption { padding: 0 70px; }

/* ---------- reviews ---------- */
.review { position: relative; }
.review__stamp {
  position: absolute; right: 22px; top: 26px; rotate: 9deg;
  font: 700 10px/1 var(--f-ui); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-ink); border: 2px solid currentColor; border-radius: 6px; padding: 6px 8px 5px; opacity: .9; mix-blend-mode: multiply;
}
.marquee.is-dragging { cursor: grabbing; }

/* ---------- values: dossier cards ---------- */
.value-card { position: relative; transition: translate .4s var(--ease-ui), rotate .4s var(--ease-ui), border-color .2s, box-shadow .25s steps(2); }
.value-card:hover { rotate: -1.2deg; box-shadow: 10px 10px 0 var(--ic); }
.value-card:nth-child(even):hover { rotate: 1.2deg; }
.value-no { position: absolute; right: 26px; top: 26px; font: 500 12px var(--f-mono); letter-spacing: .14em; color: #8b867c; }
.value-card:hover .value-no { color: var(--ic); }

/* ---------- searchlight: lamp, sway, flicker ---------- */
.sl { --sway: 0deg; }
.sl { padding-top: 84px; }
.sl__stage { height: clamp(470px, 60vh, 660px); }
.sl-bag { bottom: 96px; }
.sl__beam { transform-origin: 50% 100%; rotate: var(--sway); transition: background-color .4s, rotate .9s var(--ease-ui); bottom: 60px; }
.sl__particles { transform-origin: 50% 100%; rotate: var(--sway); transition: rotate .9s var(--ease-ui); bottom: 60px; }
@media (max-width: 767px) {
  .sl__stage { height: 460px; }
  .sl-bag { bottom: 66px; }
  .sl__beam, .sl__particles { bottom: 40px; }
}
.sl__lamp { position: absolute; left: 50%; bottom: -26px; width: 170px; translate: -50% 0; z-index: 9; overflow: visible; color: var(--beam); }
.sl__lamp .lamp__drum { fill: #2a2a26; stroke: #000; stroke-width: 3; transform-origin: 100px 104px; rotate: calc(var(--sway) * .5); transition: rotate .9s var(--ease-ui); }
.sl__lamp .lamp__louvre { fill: none; stroke: #45443e; stroke-width: 3; }
.sl__lamp .lamp__lens { fill: var(--beam); stroke: #000; stroke-width: 3; transition: fill .4s; }
.sl__lamp .lamp__shine { fill: #fff; opacity: .7; }
.sl__lamp .lamp__yoke { fill: none; stroke: #3a3934; stroke-width: 9; stroke-linecap: round; }
.sl__lamp .lamp__base { fill: #2a2a26; stroke: #000; stroke-width: 3; }
.sl__lamp .lamp__glow { opacity: .55; }
.sl__stage:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 9px var(--lime); }
.sl.is-switching .sl__beam, .sl.is-switching .lamp__lens, .sl.is-switching .sl__particles { animation: beam-flicker .36s steps(1) both; }
@keyframes beam-flicker { 0% { opacity: 0; } 22% { opacity: .8; } 40% { opacity: .05; } 62% { opacity: 1; } 78% { opacity: .4; } 100% { opacity: 1; } }
.sl__count { font-size: 12px; letter-spacing: .3em; color: var(--on-dark); }
.sl .btn { font-size: 19px; }
.sl-bag.is-front { cursor: zoom-in; }

/* ---------- pillars: progress dots ---------- */
.pillars__media { grid-template-rows: auto 1fr; align-content: center; gap: 22px; }
.pillars__dots { display: flex; gap: 8px; justify-content: center; }
.pillars__dots li { font: 700 11px var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 999px; transition: background .2s steps(2), color .2s steps(2); }
.pillars__dots li.is-on { background: var(--ink); color: var(--paper); }

/* ---------- timeline: legible head, pins, yarn, year counter ---------- */
.tl__veil { background:
  radial-gradient(ellipse 60% 48% at 18% 12%, rgba(14,14,12,.9), transparent 70%),
  linear-gradient(to bottom, rgba(14,14,12,.86) 6%, rgba(14,14,12,.5) 34%, rgba(14,14,12,.3) 60%, rgba(14,14,12,.62)); }
.tl__head { text-shadow: 0 3px 0 var(--ink), 0 0 28px rgba(0,0,0,.6); }
.tl__track { overflow: visible; }
.tl__yarn { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 3; }
.tl__yarn path { fill: none; stroke: #e0291c; stroke-width: 3.5; stroke-linecap: round; }
.tl__yarn .yarn-shadow { stroke: rgba(0,0,0,.35); translate: 2px 4px; }
.tl-card__pin { z-index: 4; }
.tl-card { position: relative; z-index: 1; transition: box-shadow .3s steps(2); }
.tl-card.is-now { box-shadow: 10px 10px 0 var(--lime), 10px 10px 0 2px var(--ink); }
.tl-card__pin { position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 32%, #ff8a7d 0 18%, #e0291c 22% 62%, #8f140c 100%); border: 2px solid var(--ink); box-shadow: 3px 4px 0 rgba(0,0,0,.4); }
.tl__hud { position: absolute; right: var(--gutter); top: 12vh; z-index: 3; display: grid; gap: 10px; justify-items: end; color: var(--paper); }
.tl__year { font: 400 clamp(64px, 8vw, 120px)/.9 var(--f-display); -webkit-text-stroke: 2px var(--paper); color: transparent; letter-spacing: .02em; }
.tl__bar { width: min(260px, 40vw); height: 6px; border-radius: 3px; background: rgba(241,235,223,.2); overflow: hidden; }
.tl__bar i { display: block; height: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- CTA: a pokeable kaiju, shockwaves ---------- */
.cta__poke { position: absolute; z-index: 7; width: min(520px, 46vw); right: 3vw; bottom: calc(var(--torn-h) - 14px); padding: 0; cursor: pointer; border-radius: 40% 40% 8px 8px; }
.cta__poke .cta__kaiju { position: static; width: 100%; pointer-events: none; }
.cta__poke:hover .cta__kaiju { animation-duration: .5s; }
.cta__poke:focus-visible { outline-offset: -20px; }
.cta.is-stomped .cta__kaiju { animation: kaiju-stomp .55s steps(4) both; }
@keyframes kaiju-stomp { 0% { scale: 1; translate: 0 0; } 25% { scale: 1.04 .9; translate: 0 12px; } 50% { scale: .96 1.1; translate: 0 -26px; } 75% { scale: 1.06 .92; translate: 0 6px; } 100% { scale: 1; translate: 0 0; } }
.cta.is-stomped .cta__inner { animation: shake .5s steps(6) both; }
.shock-ring { position: fixed; z-index: 9500; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--ink); pointer-events: none; animation: ring-out .55s steps(5) forwards; }
@keyframes ring-out { to { scale: 13; opacity: 0; border-width: 1px; } }

/* ---------- cart polish ---------- */
.cart-line h3 { margin: 0; font: 400 22px/1 var(--f-display); text-transform: uppercase; }
.cart-line h3 a { text-decoration: none; }
.cart-line h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cart-line__mid { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.rec h3 { margin: 2px 0 0; font: 400 20px/1 var(--f-display); text-transform: uppercase; }
.qty button { width: 26px; height: 26px; display: grid; place-items: center; }
@media (max-width: 767px) {
  .cart__inner { padding: 26px 18px; gap: 18px; }
  .cart-line { grid-template-columns: 52px 1fr auto; gap: 10px; padding: 8px 10px 8px 8px; }
  .cart-line img { width: 52px; height: 66px; }
  .cart-line h3 { font-size: 19px; }
  .club { padding: 12px; } .club strong { font-size: 18px; }
  .rec { grid-template-columns: 40px 1fr auto; }
  .nav__right { gap: 10px; }
  .snd { width: 40px; height: 40px; }
  .snd-hint { display: none; }
  .print--3 { right: 4%; top: 6%; width: 120px; }
  .print--2 { display: none; }
  .susan__disc { width: calc(var(--bag-w) * 2); }
  .susan { height: 430px; }
  .susan__stage { inset: 0 24px 104px; }
  .susan__caption { padding: 0 50px; }
  .susan__name { font-size: 26px; white-space: nowrap; }
  .susan__caption .rank { width: 32px; height: 32px; font-size: 12px; }
  .susan .arrow { width: 44px; height: 44px; bottom: 14px; }
  .susan .arrow--prev { left: 0; } .susan .arrow--next { right: 0; }
  .sl__lamp { width: 130px; }
  .tl__hud { top: auto; bottom: 2.5vh; right: 16px; }
  .tl__year { font-size: 44px; }
  .cta__poke { width: 70vw; right: -6vw; }
  .value-no { right: 22px; top: 22px; }
  .review__stamp { right: 18px; top: 22px; }
}

/* =====================================================================
   ROAST PAGES (roast-<id>.html)
   ===================================================================== */
.vt-hero { view-transition-name: kj-bag; }
.vt-hero.vt-off { view-transition-name: none; }
.pdp { --fg: var(--ink); --c-bg: var(--c); }
.pdp.on-paper { --fg: var(--paper); --c-bg: color-mix(in srgb, var(--c) 82%, #000); }

.pdp-hero {
  background: radial-gradient(circle, color-mix(in srgb, var(--fg) 14%, transparent) 30%, transparent 34%) 0 0 / 14px 14px, var(--c-bg);
  color: var(--fg); min-height: max(100svh, 820px); padding: 140px var(--gutter) calc(var(--torn-h) + 60px); overflow: clip;
}
.pdp-hero__ghost {
  position: absolute; left: 0; top: 52%; translate: 0 -50%; z-index: 0; white-space: nowrap; pointer-events: none;
  font: 400 clamp(160px, 24vw, 380px)/.8 var(--f-display); text-transform: uppercase; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--fg) 22%, transparent);
  animation: ghost-drift 38s linear infinite;
}
@keyframes ghost-drift { from { translate: 0 -50%; } to { translate: -50% -50%; } }
.pdp-hero__grid { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.pdp-hero__copy { display: grid; gap: 22px; justify-items: start; }
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.crumbs a { text-decoration: none; border-bottom: 1.5px solid currentColor; }
.crumbs a:hover { animation: wiggle .3s steps(2, end) infinite; }
.pdp-hero .eyebrow { color: var(--fg); }
.pdp-title { font: 400 clamp(64px, 7.4vw, 128px)/.88 var(--f-display); text-transform: uppercase; letter-spacing: .01em; text-shadow: .045em .05em 0 color-mix(in srgb, var(--ink) 30%, transparent); }
.pdp-tag { --sc: var(--paper); font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; max-width: 16ch; rotate: -2deg; }
.on-paper .pdp-tag { --sc: var(--paper); }
.pdp .pdp-notes .chip { border-color: var(--fg); background: color-mix(in srgb, var(--paper) 22%, transparent); color: var(--fg); }
.pdp-notes .dot { background: var(--fg); box-shadow: none; }
.pdp-meter { display: flex; gap: 14px; align-items: center; }
.pdp-meter .eyebrow { color: var(--fg); }
.pdp-meter .mono { color: var(--fg); }
.pdp-meter .meter i { border-color: var(--fg); }
.pdp-meter .meter i.on { background: var(--fg); border-color: var(--fg); }

.pdp-hero__bag { position: relative; display: flex; align-items: center; justify-content: center; height: min(70vh, 620px); }
.pdp-bag-wrap { position: relative; height: 90%; aspect-ratio: 760 / 1396; transform-style: preserve-3d; will-change: transform; }
.pdp-bag { height: 100%; width: 100%; object-fit: contain; filter: drop-shadow(16px 18px 0 var(--ink)); }
.pdp-tag-price { opacity: 1; scale: 1; left: -18%; top: 9%; }
.pdp-hero__ring { position: absolute; width: 118%; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; z-index: -1; overflow: visible; animation: seal-spin 46s linear infinite; }
.pdp-hero__ring text { font: 800 15px var(--f-ui); font-stretch: 125%; letter-spacing: 3px; fill: color-mix(in srgb, var(--fg) 55%, transparent); }

.buy {
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: var(--r-xl); corner-shape: squircle;
  box-shadow: 12px 12px 0 var(--ink); padding: 26px 26px 22px; display: grid; gap: 16px; rotate: .6deg;
}
.buy__price { display: flex; align-items: baseline; gap: 12px; }
.buy__price .eyebrow { color: var(--soft-ink); }
.buy__price strong { font: 400 46px/1 var(--f-display); letter-spacing: .02em; display: inline-block; }
.buy__was { text-decoration: line-through; font-size: 15px; }
.seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.seg legend { width: 100%; padding: 0; margin-bottom: 8px; font: 700 11px var(--f-ui); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border: 2px solid var(--ink); border-radius: 999px; font: 500 14px var(--f-mono); transition: background .15s steps(2), translate .15s steps(2), box-shadow .15s steps(2); }
.seg small { font-size: 12px; opacity: .7; }
.seg label:hover span { translate: -2px -2px; box-shadow: 3px 3px 0 var(--ink); }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 9px var(--lime); }
.seg--grind span { font-size: 13px; padding: 8px 13px; }
.buy__row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.qty--lg { padding: 4px 8px; gap: 6px; font-size: 18px; }
.qty--lg button { width: 32px; height: 32px; font-size: 20px; border-radius: 50%; }
.qty--lg button:hover { background: var(--ink); color: var(--paper); }
.qty--lg output { min-width: 22px; text-align: center; font: 500 17px var(--f-mono); }
.buy__club { display: flex; gap: 10px; align-items: center; cursor: pointer; font: 400 17px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; position: relative; }
.buy__club small { display: block; font: 400 11px var(--f-mono); text-transform: none; letter-spacing: .02em; color: var(--paper-mut); margin-top: 3px; }
.buy__club input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.buy__box { flex: none; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 6px; display: grid; place-items: center; background: #fff; }
.buy__club input:checked + .buy__box { background: var(--ink); }
.buy__club input:checked + .buy__box::after { content: ""; width: 11px; height: 6px; border: 3px solid var(--lime); border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -2px; }
.buy__club input:focus-visible + .buy__box { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 9px var(--lime); }
.buy__add { --btn-bg: var(--ink); --btn-fg: var(--c); font-size: 19px; }
.buy__note { font-size: 12px; text-align: center; }
.btn.is-added .btn__text { animation: none; }
.btn .btn__ok { display: none; }
.btn.is-added .btn__ok { display: inline-flex; animation: ok-in .3s steps(3) both; }
.btn.is-added .btn__label { display: none; }
@keyframes ok-in { from { scale: 1.4; opacity: 0; } }

/* field report */
.pdp-field { background: var(--paper); padding: 120px var(--gutter) calc(var(--torn-h) + 110px); overflow: clip; }
.pdp-field__grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.pdp-field__copy { display: grid; gap: 24px; justify-items: start; }
.pdp-story { max-width: 48ch; }
.pdp-quote { margin: 10px 0 0; background: var(--ink); color: var(--paper); border-radius: var(--r-l); corner-shape: squircle; padding: 22px 24px; display: grid; gap: 10px; rotate: -1deg; box-shadow: 8px 8px 0 var(--c); max-width: 440px; }
.pdp-quote blockquote { margin: 0; font: 400 15px/1.55 var(--f-mono); }
.pdp-quote figcaption { font: 700 11px var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark); }
.pdp-quote .stars { -webkit-text-stroke: 0; color: var(--c); }
.on-paper .pdp-quote .stars { color: color-mix(in srgb, var(--c) 62%, #fff); }
.pdp-field__media { position: relative; padding-bottom: 90px; }
.pdp-origin { position: relative; margin: 0; aspect-ratio: 1440 / 956; }
.pdp-origin::before { content: ""; position: absolute; inset: 0; translate: 16px 16px; background: var(--c); clip-path: url(#wobble-clip); }
.pdp-origin img { position: relative; width: 100%; height: 100%; object-fit: cover; clip-path: url(#wobble-clip); will-change: transform; }
.pdp-origin { overflow: visible; }
.dossier {
  position: absolute; left: -4%; bottom: 0; width: min(380px, 78%); margin: 0; z-index: 2;
  background: #fbf7ef; border: 2px solid var(--ink); border-radius: 10px; padding: 18px 20px 14px; box-shadow: 8px 8px 0 var(--ink); rotate: -2deg;
  display: grid; gap: 0; font: 400 13px/1.35 var(--f-mono);
  background-image: repeating-linear-gradient(transparent 0 27px, #e7ddcb 27px 28px);
}
.dossier div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 5px 0; }
.dossier dt { font: 700 10px var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--soft-ink); padding-top: 2px; }
.dossier dd { margin: 0; }
.dossier__paid { border-top: 2px dashed var(--ink); margin-top: 6px; padding-top: 10px !important; }
.dossier__paid dd { font: 400 22px/1 var(--f-display); letter-spacing: .02em; }
.dossier__paid small { display: block; font: 400 11px/1.4 var(--f-mono); letter-spacing: 0; color: var(--paper-mut); margin-top: 4px; }
.dossier__stamp {
  position: absolute; right: 14px; top: 12px; rotate: 12deg; color: var(--red-ink); border: 3px solid currentColor; border-radius: 8px; padding: 6px 10px 4px;
  font: 400 24px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; opacity: 0; scale: 2; mix-blend-mode: multiply;
}
.dossier.is-revealed .dossier__stamp { animation: stamp-in .35s steps(3) .5s both; }
@keyframes stamp-in { 0% { opacity: 0; scale: 2; } 60% { opacity: 1; scale: .92; } 100% { opacity: .9; scale: 1; } }

/* lab results */
.pdp-lab { background: var(--ink); padding: 110px var(--gutter) calc(var(--torn-h) + 110px); display: grid; gap: 56px; overflow: clip; }
.pdp-lab__grid { max-width: 1240px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; }
.lab-card { margin: 0; background: var(--card); border: 1px solid #2a2a26; border-radius: var(--r-xl); corner-shape: squircle; padding: 28px 28px 24px; display: grid; gap: 14px; align-content: start; }
.lab-card figcaption { display: grid; gap: 6px; }
.lab-card figcaption strong { font: 400 34px/1 var(--f-display); text-transform: uppercase; color: var(--paper); }
.lab-card .eyebrow { color: var(--c); }
.on-paper .lab-card .eyebrow { color: color-mix(in srgb, var(--c) 60%, #fff); }
.radar, .curve { width: 100%; height: auto; overflow: visible; }
.radar__grid polygon, .radar__grid line { fill: none; stroke: #3a3934; stroke-width: 1.2; }
.radar__shape { fill: color-mix(in srgb, var(--c) 40%, transparent); stroke: var(--c); stroke-width: 3; stroke-linejoin: round; scale: 0; transition: scale .6s steps(6); }
.lab-card.is-revealed .radar__shape { scale: 1; }
.radar__dot { fill: var(--c); stroke: var(--ink); stroke-width: 2; }
.radar text, .curve text { font: 500 12px var(--f-mono); fill: #b5b0a5; letter-spacing: .04em; }
.curve__grid line { stroke: #26261f; stroke-width: 1; }
.curve__line { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.8s cubic-bezier(.6, 0, .2, 1) .2s; }
.lab-card.is-revealed .curve__line { stroke-dashoffset: 0; }
.curve__dev { fill: color-mix(in srgb, var(--c) 14%, transparent); }
.curve__mark line { stroke: var(--paper); stroke-width: 1.5; stroke-dasharray: 5 5; }
.curve__mark text { fill: var(--paper); }
.curve__drop { fill: var(--c); stroke: var(--paper); stroke-width: 3; opacity: 0; transition: opacity .2s steps(2) 1.9s; }
.curve__droplabel { opacity: 0; transition: opacity .2s steps(2) 2s; fill: var(--paper) !important; }
.lab-card.is-revealed .curve__drop, .lab-card.is-revealed .curve__droplabel { opacity: 1; }
.curve__facts { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.curve__facts b { display: block; font: 400 30px/1 var(--f-display); color: var(--paper); letter-spacing: .02em; }

/* brew guide */
.pdp-brew { background: var(--c-bg); color: var(--fg); padding: 100px var(--gutter) calc(var(--torn-h) + 64px); display: grid; gap: 50px; }
.pdp-brew .eyebrow { color: var(--fg); }
.pdp.on-paper .pdp-brew .script--paper { --sc: var(--ink); -webkit-text-stroke: .05em var(--paper); text-shadow: .06em .07em 0 var(--paper); }
.brew-grid { max-width: 1240px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: b; }
.brew { position: relative; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: var(--r-xl); corner-shape: squircle; padding: 30px 28px 26px; box-shadow: 10px 10px 0 var(--ink); display: grid; gap: 14px; align-content: start; translate: 0 30px; opacity: 0; transition: translate .5s var(--ease-over) calc(var(--d) * 90ms), opacity .3s steps(2) calc(var(--d) * 90ms); }
.brew.is-revealed { translate: 0 0; opacity: 1; }
.brew.is-best { rotate: -1.5deg; background: #fffaf0; }
.brew__no { font: 500 13px var(--f-mono); letter-spacing: .2em; color: var(--soft-ink); }
.brew h3 { font: 400 clamp(30px, 2.6vw, 40px)/1 var(--f-display); text-transform: uppercase; }
.brew dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.brew dt { font: 700 10px var(--f-ui); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--soft-ink); }
.brew dd { margin: 2px 0 0; font: 500 16px var(--f-mono); }
.brew__stamp { position: absolute; right: -10px; top: -16px; rotate: 8deg; background: var(--ink); color: var(--lime); font: 400 20px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; padding: 9px 14px 7px; border-radius: 8px; animation: wiggle .5s steps(2, end) infinite; }

/* more roasts + pager */
.pdp-more { background: var(--d1); padding: 100px var(--gutter) calc(var(--torn-h) + 80px); display: grid; gap: 50px; }
.more-grid { max-width: 1240px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.more-card { display: grid; grid-template-columns: 42% 1fr; align-items: center; text-decoration: none; background: var(--card); border: 1px solid #2a2a26; border-radius: var(--r-xl); corner-shape: squircle; overflow: hidden; transition: translate .4s var(--ease-ui), box-shadow .2s steps(2), border-color .2s; }
.more-card img { height: 230px; width: 100%; object-fit: contain; padding: 18px 8px; background: radial-gradient(circle, color-mix(in srgb, var(--ink) 16%, transparent) 30%, transparent 34%) 0 0 / 10px 10px, var(--mc); filter: drop-shadow(6px 6px 0 rgba(0,0,0,.35)); }
.more-card__body { display: grid; gap: 6px; padding: 18px; color: var(--paper); }
.more-card__body .eyebrow { color: color-mix(in srgb, var(--mc) 50%, #fff); }
.more-card__body strong { font: 400 30px/1 var(--f-display); text-transform: uppercase; }
.more-card__body .mono { font-size: 12px; line-height: 1.45; }
.more-card__price { font: 700 12px var(--f-ui); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.more-card:hover { translate: 0 -6px; box-shadow: 8px 8px 0 var(--mc); border-color: var(--mc); }
.more-card:hover img { animation: wiggle .35s steps(2, end) infinite; }
.pager { max-width: 1240px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #2a2a26; padding-top: 26px; flex-wrap: wrap; }
.pager__link { display: inline-flex; align-items: baseline; gap: 10px; color: var(--paper); text-decoration: none; font: 400 clamp(26px, 2.6vw, 40px)/1 var(--f-display); text-transform: uppercase; }
.pager__link small { font: 700 11px var(--f-ui); font-stretch: 125%; letter-spacing: .2em; color: color-mix(in srgb, var(--mc) 45%, #fff); }
.pager__link:hover { color: var(--mc); animation: wiggle .3s steps(2, end) infinite; }
.pager__all { color: var(--on-dark); font: 700 13px var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .pdp-hero__grid { grid-template-columns: 1fr 1fr; }
  .buy { grid-column: 1 / -1; max-width: 640px; justify-self: center; width: 100%; }
}
@media (max-width: 1023px) {
  .pdp-field__grid, .pdp-lab__grid { grid-template-columns: 1fr; }
  .brew-grid, .more-grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 767px) {
  .pdp-hero { padding: 110px 16px calc(var(--torn-h) + 40px); min-height: 0; }
  .pdp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pdp-hero__bag { height: 440px; order: -1; }
  .pdp-hero__copy { gap: 16px; }
  .pdp-title { font-size: min(68px, 15vw); }
  .buy { padding: 20px 18px; rotate: 0deg; box-shadow: 8px 8px 0 var(--ink); }
  .buy__price strong { font-size: 40px; }
  .buy { min-width: 0; }
  .buy__add { padding: 0 14px; letter-spacing: .03em; }
  .buy__club { font-size: 15px; }
  .pdp-field { padding: 70px 16px calc(var(--torn-h) + 60px); }
  .pdp-field__media { padding-bottom: 0; }
  .dossier { position: relative; left: auto; width: 100%; margin-top: -30px; rotate: -1deg; }
  .pdp-lab, .pdp-brew, .pdp-more { padding-left: 16px; padding-right: 16px; padding-top: 70px; }
  .lab-card { padding: 22px 18px; }
  .more-card img { height: 190px; }
  .pager { justify-content: center; }
  .pager__all { order: 3; width: 100%; text-align: center; }
}

/* =====================================================================
   CAFÉS PAGE (cafes.html)
   ===================================================================== */
.cafes-hero { background: var(--paper); padding: 140px var(--gutter) calc(var(--torn-h) + 60px); overflow: clip; }
.cafes-hero__grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.cafes-hero__copy { display: grid; gap: 24px; justify-items: start; }
.cafes-title { display: grid; gap: .08em; }
.cafes-title .script { font-size: clamp(52px, 5.4vw, 92px); }
.cafes-title .display { font-size: clamp(62px, 6.8vw, 116px); }
.cafes-hero__copy > .mono { max-width: 42ch; }
.cafes-hero__list { display: grid; gap: 12px; width: 100%; max-width: 460px; }
.cafes-hero__list a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-decoration: none;
  background: #fff8; border: 2px solid var(--ink); border-radius: var(--r-m); corner-shape: squircle; padding: 12px 16px;
  transition: translate .15s steps(2), box-shadow .15s steps(2);
}
.cafes-hero__list a:hover { translate: -3px -3px; box-shadow: 6px 6px 0 var(--cc); }
.cafes-hero__no { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cc); border: 2px solid var(--ink); font: 500 13px var(--f-mono); }
.cafes-hero__list strong { display: block; font: 400 24px/1 var(--f-display); text-transform: uppercase; }
.cafes-hero__list small { font: 400 13px var(--f-mono); color: var(--paper-mut); }

/* live open / closed status */
.cafe-status { display: inline-flex; align-items: center; gap: 9px; font: 500 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1.5px solid currentColor; }
.cafe-status i { width: 9px; height: 9px; border-radius: 50%; background: #8b867c; }
.cafe-status[data-state="open"] i { background: #3fd35a; box-shadow: 0 0 0 4px rgba(63, 211, 90, .25); animation: pulse-dot 1.2s steps(2) infinite; }
.cafe-status[data-state="soon"] i { background: var(--yellow); }
.cafe-status[data-state="closed"] i { background: var(--red); }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgba(63, 211, 90, .1); } }
.cafe-status--mini { font-size: 11px; padding: 4px 9px; white-space: nowrap; }

/* the hand-drawn harbour map */
.cafes-hero__map { position: relative; }
.map { display: block; width: 100%; height: auto; border: 2.5px solid var(--ink); border-radius: var(--r-xl); corner-shape: squircle; box-shadow: 12px 12px 0 var(--ink); background: #ece4d4; rotate: .8deg; overflow: hidden; }
.map-land { fill: #ece4d4; }
.map-blocks rect { fill: #e2d8c4; stroke: #c9bda6; stroke-width: 1.5; }
.map-blocks .map-warehouse { fill: color-mix(in srgb, var(--teal) 22%, #e2d8c4); stroke: var(--teal); stroke-dasharray: 5 4; }
.map-water { fill: url(#water-dots); }
.map-water-dot { fill: color-mix(in srgb, var(--teal) 70%, #ece4d4); }
.map-shore { fill: none; stroke: var(--ink); stroke-width: 3; }
.map-piers rect { fill: #d8cdb6; stroke: var(--ink); stroke-width: 2.5; }
.map-streets path { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; opacity: .12; }
.map-labels text { font: 500 12px var(--f-mono); letter-spacing: .18em; fill: var(--paper-mut); }
.map-labels .map-sea { fill: color-mix(in srgb, var(--teal-ink) 85%, #000); font-size: 15px; letter-spacing: .4em; }
.map-compass circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.map-compass path { fill: var(--red); stroke: var(--ink); stroke-width: 1.5; }
.map-compass text { font: 700 13px var(--f-ui); text-anchor: middle; fill: var(--ink); }
.map-kaiju { animation: kaiju-bob 1.4s steps(2) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.map-trail .fp { fill: var(--ink); opacity: 0; }
.map-trail.is-revealed .fp { animation: fp-in .2s steps(2) both; animation-delay: calc(var(--i) * 140ms + .3s); }
@keyframes fp-in { from { opacity: 0; } to { opacity: .55; } }
.map-pin { cursor: pointer; outline: none; }
.map-pin > g { transition: translate .2s steps(2); }
.map-pin__drop { fill: var(--pc); stroke: var(--ink); stroke-width: 3; }
.map-pin circle { fill: var(--ink); }
.map-pin__no { font: 500 12px var(--f-mono); fill: var(--paper); text-anchor: middle; }
.map-pin__shadow { fill: rgba(14, 14, 12, .25); }
.map-pin__tag rect { fill: var(--ink); }
.map-pin__tag text { font: 400 15px var(--f-display); letter-spacing: .06em; fill: var(--paper); }
.map-pin:is(:hover, :focus-visible, .is-hot) .map-pin__drop { animation: wiggle .3s steps(2, end) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.map-pin:is(:hover, :focus-visible, .is-hot) .map-pin__tag rect { fill: var(--pc); stroke: var(--ink); stroke-width: 2; }
.map-pin:is(:hover, :focus-visible, .is-hot) .map-pin__tag text { fill: var(--ink); }

/* café cards */
.cafes-list { background: var(--ink); padding: 110px var(--gutter) calc(var(--torn-h) + 100px); display: grid; gap: 90px; }
.cafe-card { max-width: 1320px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 4.5vw, 70px); align-items: center; scroll-margin-top: 100px; }
.cafe-card--flip .cafe-card__media { order: 2; }
.cafe-card__media { position: relative; margin: 0; aspect-ratio: 1440 / 956; }
.cafe-card__media::before { content: ""; position: absolute; inset: 0; translate: 16px 16px; background: var(--cc); clip-path: url(#wobble-clip); transition: translate .3s steps(3); }
.cafe-card.is-hot .cafe-card__media::before { translate: 24px 24px; }
.cafe-card__media img { position: relative; width: 100%; height: 100%; object-fit: cover; clip-path: url(#wobble-clip); }
.cafe-card__no { position: absolute; left: -18px; top: -26px; z-index: 2; font: 400 clamp(70px, 8vw, 120px)/1 var(--f-display); color: var(--cc); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink); rotate: -6deg; }
.cafe-card__body { display: grid; gap: 20px; justify-items: start; }
.cafe-card__body .eyebrow { color: var(--cc); }
.cafe-card__name { font: 400 clamp(52px, 5.4vw, 88px)/.9 var(--f-display); text-transform: uppercase; color: var(--paper); }
.cafe-card .cafe-status { color: var(--paper); }
.cafe-card__info { display: grid; grid-template-columns: auto 1fr; gap: 28px; width: 100%; border-top: 1px solid #2a2a26; border-bottom: 1px solid #2a2a26; padding: 18px 0; }
.cafe-card address { font: 400 14px/1.6 var(--f-mono); font-style: normal; color: var(--on-dark); }
.cafe-card address strong { display: block; font: 400 26px/1.05 var(--f-display); text-transform: uppercase; color: var(--paper); letter-spacing: .02em; margin-bottom: 4px; }
.cafe-card address a { color: var(--paper); }
.hours { border-collapse: collapse; font: 400 13px var(--f-mono); color: var(--on-dark); justify-self: end; }
.hours th { text-align: left; font-weight: 500; padding: 3px 18px 3px 0; letter-spacing: .1em; text-transform: uppercase; }
.hours td { padding: 3px 0; text-align: right; }
.hours tr.is-today { color: var(--ink); background: var(--cc); }
.hours tr.is-today th { padding-left: 8px; }
.hours tr.is-today td { padding-right: 8px; }
.cafe-card .btn { --btn-bg: var(--cc); }
.cafe-card__ctas { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.cafe-card .link-arrow { color: var(--paper); }

/* drinks */
.cafes-bar { background: var(--paper); padding: 110px var(--gutter) calc(var(--torn-h) + 110px); display: grid; gap: 56px; }
.drinks { max-width: 1240px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.drink {
  position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 26px 22px;
  background: #fffaf1; border: 2.5px solid var(--ink); border-radius: var(--r-xl); corner-shape: squircle; box-shadow: 8px 8px 0 var(--ink);
  translate: 0 24px; opacity: 0; transition: translate .5s var(--ease-over) calc(var(--d) * 70ms), opacity .3s steps(2) calc(var(--d) * 70ms), rotate .3s var(--ease-ui);
}
.drink.is-revealed { translate: 0 0; opacity: 1; }
.drink:hover { rotate: -1.2deg; box-shadow: 8px 8px 0 var(--dc), 8px 8px 0 2.5px var(--ink); }
.drink h3 { font: 400 32px/1 var(--f-display); text-transform: uppercase; padding-right: 70px; }
.drink .mono { font-size: 13px; }
.drink__price { position: absolute; right: 18px; top: 20px; background: var(--ink); color: var(--paper); font: 500 14px var(--f-mono); padding: 5px 10px; border-radius: 8px; rotate: 4deg; }
.drink__roast { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 700 12px var(--f-ui); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid currentColor; justify-self: start; padding-bottom: 2px; }
.drink__roast i { width: 10px; height: 10px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 0 1.5px var(--ink); }
.drink__roast span { transition: translate .3s var(--ease-ui); }
.drink__roast:hover span { translate: 4px 0; }

/* events */
.cafes-events { background: var(--lime); padding: 100px var(--gutter) calc(var(--torn-h) + 90px); display: grid; gap: 50px; }
.cafes-events .eyebrow { color: var(--ink); }
.events { max-width: 1240px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.event { background: var(--ink); color: var(--paper); border-radius: var(--r-xl); corner-shape: squircle; padding: 28px; display: grid; gap: 12px; align-content: start; box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 30%, transparent); scale: .94; opacity: 0; transition: scale .4s var(--ease-over), opacity .25s steps(2); }
.event.is-revealed { scale: 1; opacity: 1; }
.event:nth-child(2) { rotate: -1deg; } .event:nth-child(3) { rotate: .8deg; }
.event__when { display: flex; gap: 12px; align-items: baseline; font: 500 13px var(--f-mono); color: var(--lime); letter-spacing: .08em; text-transform: uppercase; }
.event__when strong { font: 400 22px/1 var(--f-display); color: var(--paper); letter-spacing: .03em; }
.event h3 { font: 400 clamp(34px, 3vw, 44px)/.95 var(--f-display); text-transform: uppercase; }
.event .mono { font-size: 14px; color: var(--on-dark); }
.event__where { font: 700 12px var(--f-ui); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }

/* closing CTA */
.cafes-cta { background: var(--paper); padding: 110px var(--gutter) calc(var(--torn-h) + 100px); display: grid; justify-items: center; text-align: center; gap: 24px; }
.cafes-cta .h2 { max-width: 16ch; }
.cafes-cta .mono { max-width: 46ch; }
.cafes-cta__btns { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

@media (max-width: 1023px) {
  .cafes-hero__grid, .cafe-card { grid-template-columns: minmax(0, 1fr); }
  .cafe-card--flip .cafe-card__media { order: 0; }
  .drinks, .events { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .cafes-hero { padding: 110px 16px calc(var(--torn-h) + 40px); }
  .map { rotate: 0deg; box-shadow: 7px 7px 0 var(--ink); }
  .cafes-list { padding: 70px 16px calc(var(--torn-h) + 60px); gap: 70px; }
  .cafe-card__info { grid-template-columns: 1fr; gap: 16px; }
  .hours { justify-self: stretch; width: 100%; }
  .cafe-card__no { left: -6px; top: -18px; }
  .cafes-bar, .cafes-events, .cafes-cta { padding-left: 16px; padding-right: 16px; padding-top: 70px; }
  .drinks, .events { grid-template-columns: 1fr; }
}

/* =====================================================================
   ROUND 4 · mobile hero: the message on the first screen
   headline → turntable → CTA fill the first 844px; the chips and the
   blurb follow in the lime band. .hero__copy dissolves (display:
   contents) so its children can be reordered around the turntable.
   ===================================================================== */
@media (max-width: 767px) {
  .hero { padding: 92px 0 0; }
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy::before { content: none; }
  .hero__title { order: 1; padding: 6px 16px 0; gap: 0; position: relative; z-index: 3; }
  .hero__title .script { --sc: var(--lime); font-size: clamp(40px, 12.4vw, 54px); }
  .hero__title .display { font-size: clamp(48px, 14.6vw, 62px); }
  .susan { order: 2; height: 372px; margin: 0 12px; --bag-w: clamp(124px, 34vw, 158px); }
  .susan__stage { inset: 0 24px 102px; }
  .hero__ctas { order: 3; display: flex; justify-content: space-between; gap: 16px; padding: 2px 16px 30px; margin: 0; position: relative; z-index: 3; }
  .hero__ctas .btn { --btn-bg: var(--ink); --btn-fg: var(--lime); }
  .hero__ctas .btn--lg { min-height: 58px; padding: 0 30px; font-size: 16px; }
  /* the lime band: chips, then the blurb, torn on top */
  .hero .chips { order: 4; position: relative; z-index: 3; background: var(--lime); padding: 54px 16px 6px; margin: 0; }
  .hero .chips::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 34px; background: var(--paper);
    clip-path: polygon(0 0,100% 0,100% 40%,94% 70%,88% 45%,80% 80%,72% 50%,63% 75%,55% 40%,46% 72%,38% 48%,29% 82%,20% 50%,12% 70%,5% 42%,0 65%); }
  .hero .chip { background: transparent; }
  .hero__lede { order: 5; position: relative; z-index: 3; background: var(--lime); max-width: none; padding: 16px 16px calc(var(--torn-h) + 40px); margin: 0; }
  .hero__copy .mono { color: #2f3a10; }

  /* header at 390 and 360: 44px tap targets, nothing touching */
  .nav { padding: 14px 14px; }
  .btn--menu { min-height: 48px; padding: 0 16px; }
  .btn--square { min-height: 48px; width: 52px; }
  .snd { width: 44px; height: 44px; }
  .nav__right { gap: 8px; }
  .seal { width: 72px; height: 72px; }
}
@media (max-width: 374px) {
  .seal { width: 62px; height: 62px; }
  .nav { padding: 12px 10px; }
  .hero__ctas .btn--lg { padding: 0 22px; }
}

/* the value icons boil only while their card is hovered: six SVG filters
   repainting all the time was the values section's main cost at 6× CPU */
.value-icon.boil { animation: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .value-card:hover .value-icon.boil { animation: wiggle .35s steps(2, end) infinite, boil .42s steps(1) infinite; }
}

/* ---------- lite mode (set by the quality governor or ?lite) ---------- */
.lite .pdp-hero__ghost, .lite .pdp-hero__ring { animation: none; }
.lite .grain::after, .lite .dust, .lite .sl__sweep, .lite .sl__stars { display: none; }
.lite .script { animation: wiggle .3s steps(2, end) infinite; }
.lite .boil, .lite .hero.is-stomped .print--3 { animation: none; }
.lite .torn__f0 { animation: none; opacity: 1; }
.lite .torn__f1, .lite .torn__f2 { animation: none; }
.lite .sl__particles i { animation: none; opacity: 0; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .sr-word { translate: 0 0; }
  .script, .wiggle, .wiggle-slow, .cta__kaiju, .seal__spin, .boil, .torn__f0, .torn__f1, .torn__f2, .dust { animation: none !important; }
  .torn__f0 { opacity: 1; }
  @view-transition { navigation: none; }
}