/* POP KING — tokens first. Everything bounces, nothing glows. */
:root {
  --ink: #1b1b2f;
  --cream: #fff4dc;
  --paper: #fffaf0;
  --yellow: #ffd21f;
  --tomato: #ff4f2e;
  --pink: #ff9ccb;
  --sky: #55bdff;
  --mint: #55e0b2;

  --latin: "Bagel Fat One", "Mochiy Pop One", system-ui, sans-serif;
  --jp-d: "Mochiy Pop One", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;

  --line: 4px;
  --line-b: 5px;
  --hard: 6px;
  --gut: clamp(16px, 4.4vw, 64px);
  --sec-y: clamp(96px, 12vw, 176px);
  --r-card: 28px;

  /* Bouncy spring, written out so CSS and canvas feel like the same physics. */
  --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --squish: cubic-bezier(.3, 1.8, .5, 1);
}
@supports not (transition-timing-function: linear(0, 1)) { :root { --spring: cubic-bezier(.3, 1.6, .5, 1); } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--yellow); color: var(--ink);
  -webkit-text-size-adjust: 100%; overflow-x: clip;
  scrollbar-color: var(--ink) transparent;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: transparent; overflow-x: clip;
  font: 500 clamp(15px, 1.15vw, 17px)/1.9 var(--body);
  letter-spacing: .03em; line-break: strict; word-break: auto-phrase; text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, dl, dd, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
svg { display: block; overflow: visible; }
canvas { display: block; }
i { font-style: normal; }
.lk-switch img { max-width: none; width: 18px; }
.kp { display: inline-block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; border-radius: 8px; }

#paint { position: fixed; left: 0; top: 0; width: 100vw; height: 120lvh; z-index: -1; pointer-events: none; }

.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: var(--sec-y); }

h2, .display {
  font: 400 clamp(38px, 6.2vw, 92px)/1.22 var(--jp-d);
  letter-spacing: .01em; text-wrap: balance;
}
.eyebrow {
  font: 400 clamp(14px, 1.25vw, 18px)/1.3 var(--latin); letter-spacing: .04em;
}

/* Every button squishes. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 28px;
  border: var(--line) solid var(--ink); border-radius: 999px; box-shadow: var(--hard) var(--hard) 0 var(--ink);
  font: 400 clamp(15px, 1.25vw, 18px)/1.25 var(--jp-d); letter-spacing: .03em; text-decoration: none; cursor: pointer;
  background: var(--paper); color: var(--ink);
  transition: transform .55s var(--spring), box-shadow .55s var(--spring);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-tomato { background: var(--tomato); }
.btn-paper { background: var(--paper); }
.btn-small { min-height: 46px; padding: 6px 20px; font-size: 14px; box-shadow: 4px 4px 0 var(--ink); }
.btn-wide { width: 100%; }
@media (hover: hover) { .btn:hover { transform: translate(-2px, -3px) scale(1.04, .97); box-shadow: 9px 10px 0 var(--ink); } }
.btn:active { transform: translate(5px, 6px) scale(1.09, .84); box-shadow: 0 0 0 var(--ink); transition-duration: .07s; transition-timing-function: ease-out; }

/* Reveal states. Hung off .js so no script means no hiding. */
html.js [data-r="rise"] { opacity: 0; transform: translateY(30px) scale(.97, 1.04); }
html.js [data-r="pop"] { opacity: 0; transform: scale(.6) rotate(-6deg); }
[data-r="rise"], [data-r="pop"] {
  transition: opacity .25s linear calc(var(--i, 0) * 70ms), transform .9s var(--spring) calc(var(--i, 0) * 70ms);
}
html.js [data-r].in { opacity: 1; transform: none; }
html.js [data-r="words"] .kp { opacity: 0; transform: translateY(.5em) scale(.8, 1.15); }
[data-r="words"] .kp { transition: opacity .2s linear calc(var(--i, 0) * 75ms), transform .95s var(--spring) calc(var(--i, 0) * 75ms); transform-origin: 50% 90%; }
html.js [data-r="words"].in .kp { opacity: 1; transform: none; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--cream); clip-path: circle(150% at 50% 46%);
  transition: clip-path .7s cubic-bezier(.6, -.25, .8, .4);
  animation: loaderFail .4s linear 6.2s forwards;
}
.loader.out { clip-path: circle(0 at 50% 46%); pointer-events: none; }
.loader.gone { display: none; }
@keyframes loaderFail { to { opacity: 0; visibility: hidden; } }
.loader-mark { width: min(44vw, 240px); transition: transform .5s var(--spring); }
.loader.out .loader-mark { transform: scale(.72, 1.18); }
.loader-fill { transform: translateY(calc(760px - var(--fill, .06) * 760px)); transition: transform .8s var(--spring); }
.loader-fill path { animation: lwave 1.4s linear infinite; }
@keyframes lwave { to { transform: translateX(-220px); } }
.loader-bubbles circle { animation: lbub 1.9s cubic-bezier(.4, 0, .7, 1) infinite; }
.loader-bubbles circle:nth-child(2) { animation-delay: .25s; animation-duration: 1.5s; }
.loader-bubbles circle:nth-child(3) { animation-delay: .6s; }
.loader-bubbles circle:nth-child(4) { animation-delay: .9s; animation-duration: 1.6s; }
.loader-bubbles circle:nth-child(5) { animation-delay: .35s; animation-duration: 2.1s; }
.loader-bubbles circle:nth-child(6) { animation-delay: 1.1s; }
.loader-bubbles circle:nth-child(7) { animation-delay: .75s; animation-duration: 1.4s; }
.loader-bubbles circle:nth-child(8) { animation-delay: 1.35s; animation-duration: 1.7s; }
@keyframes lbub { to { transform: translateY(-760px); } }
.loader-word { font: 400 18px/1 var(--jp-d); letter-spacing: .08em; }
.loader-word span { display: inline-block; animation: hop .7s var(--squish) infinite alternate; }
@keyframes hop { to { transform: translateY(-5px); } }

/* ---------- Header ---------- */
.top {
  position: fixed; z-index: 500; left: var(--gut); right: var(--gut); top: clamp(10px, 1.6vw, 22px);
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.top > * { pointer-events: auto; }
html.js .top > * { transform: translateY(-140%) scale(.8); }
html.js.gate .top > * { transform: none; transition: transform .9s var(--spring); }
html.js.gate .top > *:nth-child(2) { transition-delay: .08s; }
html.js.gate .top > *:nth-child(3) { transition-delay: .16s; }
.brand, .top-nav, .sound {
  height: 52px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
}
.brand { display: flex; align-items: center; gap: 8px; padding: 0 18px 0 12px; text-decoration: none; }
.brand-mark { display: block; width: 36px; }
.brand-name { font: 400 19px/1 var(--latin); letter-spacing: .02em; white-space: nowrap; }
.top-nav { margin-left: auto; display: flex; align-items: center; padding: 0 8px; }
.top-nav a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  font: 700 15px/1 var(--body); transition: transform .5s var(--spring), background .15s;
}
@media (hover: hover) { .top-nav a:hover { background: var(--yellow); transform: scale(1.08, .94); } }
.top-nav a:active { transform: scale(1.12, .82); transition-duration: .07s; }
.sound {
  display: flex; align-items: center; gap: 6px; padding: 0 16px 0 12px; cursor: pointer; font: 700 14px/1 var(--body); white-space: nowrap;
  transition: transform .5s var(--spring), background .15s;
}
.sound:active { transform: translate(3px, 3px) scale(1.08, .88); transition-duration: .07s; }
@media (hover: hover) { .sound:hover { transform: scale(1.05, .95); } }
.sound svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-body { fill: var(--ink); }
.s-wave { display: none; }
.sound[aria-pressed="true"] { background: var(--mint); }
.sound[aria-pressed="true"] .s-wave { display: block; }
.sound[aria-pressed="true"] .s-mute { display: none; }

/* ---------- Hero ---------- */
.hero {
  --sun-top: 8vh; position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate;
}
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: pan-y; }
.hero-sun {
  position: absolute; z-index: 0; right: 5vw; top: var(--sun-top); width: min(38vw, 66vh); aspect-ratio: 1;
  background: var(--cream); border: var(--line-b) solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  border-radius: 54% 46% 49% 51% / 47% 54% 46% 53%; animation: wob 9s ease-in-out infinite alternate;
}
html.js .hero-sun { transform: scale(0) rotate(-40deg); }
html.js.gate .hero-sun { transform: none; transition: transform 1.2s var(--spring) .15s; }
.hero-king {
  position: absolute; z-index: 1; right: calc(5vw + min(38vw, 66vh) * .17); top: calc(var(--sun-top) + min(38vw, 66vh) * .16);
  width: calc(min(38vw, 66vh) * .66);
}
html.js .hero-king { transform: translateY(-70vh) rotate(-16deg); }
html.js.gate .hero-king { transform: none; transition: transform 1.25s var(--spring) .3s; }
@keyframes wob {
  0% { border-radius: 54% 46% 49% 51% / 47% 54% 46% 53%; }
  50% { border-radius: 47% 53% 56% 44% / 53% 45% 55% 47%; }
  100% { border-radius: 52% 48% 44% 56% / 44% 52% 48% 56%; }
}
.hero-copy {
  position: absolute; z-index: 3; left: 0; right: 0; top: clamp(84px, 12vh, 118px); padding-inline: var(--gut);
  max-width: 900px; pointer-events: none;
}
.hero-copy a { pointer-events: auto; }
.hero-h { font: 400 clamp(44px, min(6.6vw, 11.4vh), 104px)/1.16 var(--jp-d); letter-spacing: .01em; margin-top: 10px; }
.hero-lead { max-width: 30em; margin-top: 16px; font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.85; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
html.js .hero-in { opacity: 0; transform: translateY(26px) scale(.86, 1.12); transform-origin: 0 100%; }
html.js.gate .hero-in {
  opacity: 1; transform: none;
  transition: opacity .2s linear calc(.25s + var(--i, 0) * 80ms), transform .95s var(--spring) calc(.25s + var(--i, 0) * 80ms);
}
.hero-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 14px; font: 700 14px/1.6 var(--body); }
.hint-btn {
  pointer-events: auto; min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font: 700 14px/1.6 var(--body);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; transition: transform .5s var(--spring);
}
@media (hover: hover) { .hint-btn:hover { transform: scale(1.08, .92); } }
.hint-btn:active { transform: scale(1.14, .8); transition-duration: .07s; }

/* band */
.band {
  position: relative; z-index: 4; margin-top: -30px; overflow: clip; padding-block: 10px;
  transform: rotate(-1.4deg) scale(1.03); background: var(--ink); color: var(--cream);
}
.band-track { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); width: max-content; will-change: transform; }
.band-track span { font: 400 clamp(26px, 3.2vw, 46px)/1.2 var(--jp-d); letter-spacing: .03em; white-space: nowrap; }
.band-track i { display: block; width: clamp(34px, 3.8vw, 54px); flex: none; }

/* ---------- Manifesto ---------- */
.mani .wrap { position: relative; }
.mani-h { font-size: clamp(46px, 9.4vw, 148px); line-height: 1.2; margin-top: 18px; }
.mani-h .ln { display: block; }
.mani-h .ln2 { padding-left: 13vw; margin-block: .06em; }
.mani-h .ln3 { padding-left: 4vw; }
.chip { padding: .02em .28em .06em; border: var(--line-b) solid var(--ink); border-radius: .24em; box-shadow: var(--hard) var(--hard) 0 var(--ink); }
.chip-pink { background: var(--pink); rotate: -2.5deg; }
.mani-cols {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); margin-top: clamp(56px, 7vw, 104px);
  font-size: clamp(16px, 1.45vw, 20px); font-weight: 700; line-height: 2;
}
.mani-cols p:nth-child(1) { grid-column: 4 / span 4; }
.mani-cols p:nth-child(2) { grid-column: 8 / span 4; padding-top: 3.2em; }
.mani-king { position: absolute; right: var(--gut); top: -14px; width: clamp(110px, 17vw, 250px); }
.mani-king svg { transform: rotate(9deg); }
.mani-note {
  position: absolute; left: var(--gut); bottom: -8px; width: min(19em, 22vw); padding: 14px 18px; background: var(--yellow);
  border: var(--line) solid var(--ink); border-radius: 22px 22px 22px 4px; box-shadow: 5px 5px 0 var(--ink); font-weight: 700; line-height: 1.7; rotate: -3deg;
}
.note-who { display: block; font: 400 13px/1.4 var(--jp-d); margin-bottom: 4px; }

/* ---------- Numbers ---------- */
.nums-h { max-width: 15em; }
.nums-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(0, auto); gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 5vw, 76px);
}
.blob {
  background: var(--cream); border: var(--line-b) solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; animation: wob 8s ease-in-out infinite alternate;
}
.num { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 58px) clamp(26px, 4.4vw, 64px); text-align: left; }
.num-a { grid-column: 1 / span 6; grid-row: 1 / span 2; background: var(--yellow); }
.num-b { grid-column: 7 / span 3; }
.num-c { grid-column: 10 / span 3; animation-delay: -2s; }
.num-d { grid-column: 7 / span 3; animation-delay: -4s; }
.num-e { grid-column: 10 / span 3; animation-delay: -6s; }
.num-v { font: 400 clamp(46px, 5vw, 76px)/1 var(--latin); display: flex; align-items: baseline; gap: .1em; white-space: nowrap; }
.num-v b { font-weight: 400; display: inline-block; font-variant-numeric: tabular-nums; transform-origin: 50% 100%; }
.num-v small { font: 400 .34em/1 var(--jp-d); }
.num-a .num-v { font-size: clamp(110px, 14.5vw, 218px); }
.num-a .num-v small { font-size: .24em; }
.num-t { margin-top: 10px; font-size: clamp(14px, 1.1vw, 16px); font-weight: 700; line-height: 1.7; }
.num-a .num-t { font-size: clamp(16px, 1.5vw, 21px); max-width: 21em; }

/* ---------- Pinned can ---------- */
.cans { position: relative; height: 480vh; height: 480svh; }
.cans-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#canCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.fl-list { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fl { position: absolute; inset: 0; display: flex; align-items: center; padding-inline: var(--gut); max-width: 1440px; margin-inline: auto; visibility: hidden; }
.fl .fl-body > * { opacity: 0; transform: translateY(26px) scale(.9, 1.1); transition: opacity .14s linear, transform .35s ease-in; }
.fl.on { visibility: visible; }
.fl.on .fl-body > * { opacity: 1; transform: none; transition: opacity .2s linear calc(.05s + var(--n, 0) * 50ms), transform .85s var(--spring) calc(.05s + var(--n, 0) * 50ms); }
.fl.leaving { visibility: visible; }
.fl:nth-child(even) { justify-content: flex-end; }
.fl-body { width: min(46vw, 620px); pointer-events: auto; }
.fl-can { display: none; }
.fl-no { font: 400 15px/1.3 var(--latin); letter-spacing: .05em; }
.fl-name { font: 400 clamp(80px, 12vw, 176px)/1.1 var(--jp-d); letter-spacing: .01em; margin-top: 4px; white-space: nowrap; }
.fl:nth-child(4) .fl-name { font-size: clamp(66px, 9.8vw, 144px); }
.fl-catch { font: 400 clamp(21px, 2.3vw, 33px)/1.5 var(--jp-d); margin-top: 8px; }
.fl-desc { max-width: 28em; margin-top: 14px; font-weight: 700; }
.fl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fl-tags li { padding: 2px 13px; background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.7; }
.fl-data { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 16px; }
.fl-data dt { font-size: 12px; font-weight: 700; line-height: 1.5; }
.fl-data dd { font: 400 18px/1.4 var(--jp-d); }
.fl-nav { position: absolute; z-index: 3; left: 50%; bottom: 84px; translate: -50% 0; display: flex; gap: 8px; }
.fl-nav button {
  width: 52px; height: 52px; padding: 5px; border: 0; background: none; cursor: pointer; opacity: .55; transform: scale(.82);
  transition: transform .55s var(--spring), opacity .15s;
}
.fl-nav button.on { opacity: 1; transform: scale(1.14) translateY(-4px); }
.fl-nav button:active { transform: scale(1.2, .8); transition-duration: .07s; }
html:not(.pin) .cans { height: auto; padding-block: var(--sec-y); }
html:not(.pin) .cans-stage { position: static; height: auto; overflow: visible; }
html:not(.pin) #canCanvas, html:not(.pin) .fl-nav { display: none; }
html:not(.pin) .fl-list { position: static; display: grid; gap: clamp(72px, 9vw, 120px); pointer-events: auto; }
html:not(.pin) .fl { position: static; visibility: visible; gap: clamp(20px, 5vw, 72px); justify-content: center; max-width: 1200px; }
html:not(.pin) .fl .fl-body > * { opacity: 1; transform: none; }
html:not(.pin) .fl-can { display: block; flex: none; width: clamp(130px, 20vw, 260px); }
html:not(.pin) .fl:nth-child(even) .fl-can { order: 2; }

/* ---------- Mixer ---------- */
.mix-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); align-items: end; }
.mix-head .eyebrow { grid-column: 1 / -1; margin-bottom: 8px; }
.mix-head h2 { grid-column: 1 / span 7; }
.mix-lead { grid-column: 8 / span 5; font-weight: 700; padding-bottom: .6em; }
.mix-grid {
  display: grid; grid-template-columns: minmax(210px, 3fr) minmax(0, 5.4fr) minmax(290px, 3.6fr);
  grid-template-areas: "taps stage card" "acts stage card"; grid-template-rows: auto 1fr;
  column-gap: clamp(16px, 2.4vw, 36px); row-gap: 20px; margin-top: clamp(36px, 4vw, 60px);
}
.mix-taps { grid-area: taps; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.tap {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1; min-height: 72px; padding: 8px;
  border: var(--line) solid var(--ink); border-radius: 26px; box-shadow: 5px 5px 0 var(--ink); cursor: pointer;
  font: 400 clamp(14px, 1.2vw, 17px)/1.2 var(--jp-d); letter-spacing: .02em;
  transition: transform .6s var(--spring), box-shadow .6s var(--spring); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tap i { display: block; width: 56%; }
.tap-yuzu { background: var(--yellow); }
.tap-ichigo { background: var(--pink); }
.tap-ramune { background: var(--sky); }
.tap-budou { background: var(--mint); }
@media (hover: hover) { .tap:hover { transform: translate(-1px, -2px) scale(1.04, .96); box-shadow: 7px 8px 0 var(--ink); } }
.tap:active { transform: translate(5px, 5px) scale(1.1, .82); box-shadow: 0 0 0 var(--ink); transition-duration: .07s; }
.mix-stage {
  grid-area: stage; position: relative; min-height: min(78vh, 720px); background: var(--pink);
  border: var(--line-b) solid var(--ink); border-radius: 40px; box-shadow: 9px 9px 0 var(--ink); overflow: hidden;
}
#mixCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; border-radius: 34px; }
#mixCanvas:active { cursor: grabbing; }
#mixCanvas:focus-visible { outline-offset: -10px; }
.mix-king { position: absolute; left: 3%; bottom: 3%; width: clamp(74px, 21%, 136px); pointer-events: none; transform-origin: 50% 100%; }
.jump { animation: kingJump .95s var(--spring); }
@keyframes kingJump { 0% { transform: scale(1.3, .7); } 30% { transform: translateY(-70%) scale(.88, 1.15) rotate(-10deg); } 62% { transform: scale(1.2, .8); } 100% { transform: none; } }
.mix-hint {
  position: absolute; right: 4%; top: 4%; max-width: 12em; padding: 6px 12px; background: var(--paper);
  border: 3px solid var(--ink); border-radius: 14px; font-size: 13px; font-weight: 700; line-height: 1.55; pointer-events: none;
  transition: opacity .25s, transform .4s var(--spring);
}
.mix-hint.off { opacity: 0; transform: scale(.7); }
.mix-actions { grid-area: acts; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.shake {
  position: relative; display: block; width: 100%; min-height: 104px; overflow: hidden; background: var(--tomato); cursor: pointer;
  border: var(--line-b) solid var(--ink); border-radius: 30px; box-shadow: 7px 7px 0 var(--ink);
  transition: transform .6s var(--spring), box-shadow .6s var(--spring); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .shake:hover { transform: rotate(-2deg) scale(1.04, .96); } }
.shake:active { transform: translate(6px, 7px) scale(1.1, .78); box-shadow: 0 0 0 var(--ink); transition-duration: .07s; }
.shake-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); background: var(--yellow); border-top: 4px solid var(--ink); }
.shake-txt { position: relative; font: 400 clamp(36px, 3.5vw, 52px)/1 var(--latin); letter-spacing: .02em; }
.mix-status { font-size: 14px; font-weight: 700; line-height: 1.7; min-height: 3.4em; }
.mix-card {
  grid-area: card; position: relative; background: var(--paper); border: var(--line-b) solid var(--ink);
  border-radius: var(--r-card); box-shadow: 9px 9px 0 var(--ink); padding: 20px; display: flex; flex-direction: column;
}
.card-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; font-weight: 700; padding: 24px 0; }
.card-empty i { width: 92px; display: block; animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.card-full[hidden], .card-empty[hidden] { display: none; }
.card-full { flex: 1; display: flex; flex-direction: column; }
.card-full.pop { animation: cardPop .9s var(--spring); }
@keyframes cardPop { 0% { transform: scale(.55) rotate(-7deg); } 100% { transform: none; } }
.card-no { font: 400 14px/1.3 var(--latin); letter-spacing: .04em; }
.card-swatch { position: relative; height: 140px; margin-top: 8px; border: var(--line) solid var(--ink); border-radius: 20px; display: grid; place-items: center; background: var(--mix, var(--yellow)); }
.card-swatch span { display: block; width: 104px; }
.card-name { font: 400 clamp(25px, 2.4vw, 34px)/1.35 var(--jp-d); margin-top: 14px; text-wrap: balance; }
.card-en { font: 400 14px/1.4 var(--latin); letter-spacing: .03em; margin-top: 4px; }
.card-note { font-weight: 700; font-size: 15px; line-height: 1.8; margin-top: 8px; }
.card-bars { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; }
.card-bars li { display: grid; grid-template-columns: 5.4em 1fr; align-items: center; gap: 8px; line-height: 1.4; }
.card-bars u { display: block; height: 14px; border: 3px solid var(--ink); border-radius: 99px; overflow: hidden; text-decoration: none; background: var(--cream); }
.card-bars u::before { content: ""; display: block; height: 100%; width: var(--v); background: var(--ink); }
.card-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.card-fine { font-size: 12px; line-height: 1.6; margin-top: 12px; }

/* ---------- Bubble wrap ---------- */
.wrapz-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); align-items: center; }
.wrapz-copy { grid-column: 1 / span 4; }
.wrapz-copy h2 { font-size: clamp(38px, 4.8vw, 72px); margin-top: 8px; }
.wrapz-lead { margin-top: 18px; font-weight: 700; }
.wrapz-count { margin-top: 20px; font: 400 clamp(40px, 4.4vw, 64px)/1 var(--latin); display: flex; align-items: baseline; gap: .12em; }
.wrapz-count b { font-weight: 400; display: inline-block; }
.wrapz-count small { font: 400 16px/1 var(--jp-d); margin-left: .3em; }
#wrapAll { margin-top: 18px; }
.wrapz-done { margin-top: 14px; font-weight: 700; min-height: 3.6em; line-height: 1.8; }
.wrapz-grid {
  grid-column: 5 / -1; display: grid; grid-template-columns: repeat(13, 1fr); gap: clamp(3px, .5vw, 7px); padding: clamp(10px, 1.2vw, 16px);
  background: var(--cream); border: var(--line-b) solid var(--ink); border-radius: 30px; box-shadow: 9px 9px 0 var(--ink);
}
.bb {
  position: relative; aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; cursor: pointer; background: var(--paper);
  transition: transform .5s var(--spring), background .1s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.bb::after { content: ""; position: absolute; left: 22%; top: 18%; width: 26%; height: 20%; border-top: 3px solid var(--ink); border-left: 3px solid var(--ink); border-radius: 80% 0 0 0; }
@media (hover: hover) { .bb:not(.p):hover { transform: scale(1.1, .92); } }
.bb.p { background: var(--sky); transform: scale(.82); cursor: default; animation: bbpop .5s var(--spring); }
.bb.p::after { display: none; }
.bb.p.k { background: var(--tomato); }
.bb.p.e { background: var(--ink); }
@keyframes bbpop { 0% { transform: scale(1.26, .55); } 100% { transform: scale(.82); } }

/* ---------- Sticker wall ---------- */
.wall { padding-bottom: clamp(90px, 9vw, 130px); }
.wall-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); align-items: end; }
.wall-head h2 { grid-column: 1 / span 8; }
.wall-head p { grid-column: 9 / span 4; font-weight: 700; padding-bottom: .5em; }
.wall-board { position: relative; height: clamp(520px, 56vw, 720px); margin-top: clamp(16px, 2vw, 28px); margin-inline: var(--gut); }
.stk {
  position: absolute; left: 0; top: 0; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; will-change: transform;
  background: none; border: 0; padding: 0; display: block;
}
.stk:active { cursor: grabbing; }
.stk-in { display: block; filter: none; }
.stk-t {
  display: block; padding: .32em .78em .38em; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 22px;
  box-shadow: var(--hard) var(--hard) 0 var(--ink); font: 400 clamp(20px, 2.4vw, 34px)/1.25 var(--jp-d); white-space: nowrap;
}
.stk-t.round { border-radius: 999px; }
.stk-t.y { background: var(--yellow); }
.stk-t.s { background: var(--sky); }
.stk-t.p { background: var(--pink); }
.stk-t.m { background: var(--mint); }
.stk-t.l { font-family: var(--latin); letter-spacing: .02em; }
.stk-a { display: block; width: clamp(92px, 11vw, 158px); background: var(--paper); border: var(--line) solid var(--ink); border-radius: 50%; padding: 14px; box-shadow: var(--hard) var(--hard) 0 var(--ink); }
.stk-b { display: grid; place-items: center; position: relative; width: clamp(116px, 14vw, 196px); }
.stk-b b { position: absolute; font: 400 clamp(16px, 2vw, 28px)/1.2 var(--jp-d); text-align: center; rotate: -9deg; }
.stk-m { display: block; width: clamp(110px, 14vw, 190px); }

/* ---------- Stands ---------- */
.stands-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); align-items: start; }
.stands-side { grid-column: 1 / span 5; position: sticky; top: 100px; padding-right: 8px; }
.stands-side h2 { font-size: clamp(36px, 4.4vw, 66px); margin-top: 8px; }
.stands-lead { margin-top: 16px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip-btn {
  min-height: 46px; padding: 4px 18px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  font: 700 15px/1.3 var(--body); cursor: pointer; transition: transform .55s var(--spring), box-shadow .55s var(--spring); touch-action: manipulation;
}
.chip-btn.is-on { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .chip-btn:hover { transform: scale(1.06, .94); } }
.chip-btn:active { transform: translate(3px, 3px) scale(1.1, .82); box-shadow: 0 0 0 var(--ink); transition-duration: .07s; }
.stands-count { margin-top: 16px; font-weight: 700; }
.stands-count b { font: 400 30px/1 var(--latin); }
.stand-list { grid-column: 6 / -1; display: grid; gap: 14px; }
.stand {
  display: grid; grid-template-columns: 3.1em minmax(0, 1fr) 7.6em auto; align-items: center; column-gap: 14px; padding: 16px 20px;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink);
}
.stand.in { transition: opacity .25s, transform .7s var(--spring), box-shadow .4s var(--spring), background .15s; }
@media (hover: hover) { .stand.in:hover { transform: translate(-3px, -3px) scale(1.012, .985); box-shadow: 9px 9px 0 var(--ink); background: var(--cream); } }
.stand[hidden] { display: none; }
.st-no { font: 400 25px/1 var(--latin); }
.st-main h3 { font: 400 clamp(17px, 1.5vw, 21px)/1.45 var(--jp-d); }
.st-main p { font-size: 14px; font-weight: 700; line-height: 1.65; margin-top: 2px; }
.st-time { font-size: 13px; font-weight: 700; line-height: 1.55; }
.st-tag { padding: 1px 11px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 1.8; }
.stands-fine { grid-column: 6 / -1; margin-top: 16px; font-size: 13px; font-weight: 700; }

/* ---------- FAQ ---------- */
.faq-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); align-items: start; }
.faq-h { grid-column: 1 / span 5; font-size: clamp(34px, 4.1vw, 62px); position: sticky; top: 100px; }
.faq-list { grid-column: 6 / -1; display: grid; gap: 16px; }
.q { background: var(--cream); border: var(--line) solid var(--ink); border-radius: 26px; box-shadow: 6px 6px 0 var(--ink); }
.q.in { transition: opacity .25s, transform .8s var(--spring), box-shadow .5s var(--spring); }
.q.squish { animation: qsq .75s var(--spring); }
@keyframes qsq { 0% { transform: scale(1.03, .9); } 100% { transform: none; } }
.q h3 { font: inherit; }
.q button {
  width: 100%; min-height: 76px; padding: 14px 22px; background: none; border: 0; cursor: pointer; text-align: left; border-radius: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 400 clamp(18px, 1.8vw, 25px)/1.5 var(--jp-d); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .5s var(--spring);
}
.q button:active { transform: scale(.98, .94); transition-duration: .07s; }
.q button > span { text-wrap: balance; }
.q i { position: relative; flex: none; width: 42px; height: 42px; background: var(--yellow); border: var(--line) solid var(--ink); border-radius: 50%; transition: transform .7s var(--spring), background .15s; }
.q i::before, .q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 4px; margin: -2px 0 0 -9px; background: var(--ink); border-radius: 4px; }
.q i::after { transform: rotate(90deg); }
.q button[aria-expanded="true"] i { transform: rotate(135deg) scale(1.08); background: var(--tomato); }
.a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--squish); }
html:not(.js) .a { grid-template-rows: 1fr; }
.a > div { overflow: hidden; min-height: 0; }
.a p { padding: 0 22px 22px; font-weight: 700; max-width: 40em; }
.q.open .a { grid-template-rows: 1fr; }

/* ---------- Newsletter ---------- */
.news-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); align-items: center; }
.news-copy { grid-column: 1 / span 6; }
.news-copy h2 { font-size: clamp(42px, 6.6vw, 104px); }
.news-copy p { margin-top: 18px; font-weight: 700; max-width: 26em; }
.news-form { grid-column: 8 / -1; background: var(--paper); padding: clamp(20px, 2.6vw, 34px); border: var(--line-b) solid var(--ink); border-radius: var(--r-card); box-shadow: 9px 9px 0 var(--ink); }
.news-form label[for] { display: block; font: 400 16px/1.5 var(--jp-d); }
.news-form input[type="email"] {
  display: block; width: 100%; height: 58px; margin-top: 6px; padding: 0 18px; background: var(--cream); border: var(--line) solid var(--ink); border-radius: 18px;
  font: 700 17px/1 var(--body); color: var(--ink); transition: transform .5s var(--spring);
}
.news-form input[type="email"]::placeholder { color: var(--ink); opacity: .6; }
.news-form input[type="email"]:focus { outline: 4px solid var(--ink); outline-offset: 2px; transform: scale(1.012, .985); }
.news-err { min-height: 1.6em; margin-top: 4px; font-size: 14px; font-weight: 700; color: #c22a0f; line-height: 1.6; }
.news-form legend { font: 400 16px/1.5 var(--jp-d); margin-bottom: 8px; }
.radio { display: inline-block; margin: 0 6px 8px 0; cursor: pointer; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--cream); border: 3px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 15px; transition: transform .5s var(--spring), background .1s; }
.radio input:checked + span { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg) scale(1.05); }
.radio input:focus-visible + span { outline: 4px solid var(--ink); outline-offset: 3px; }
.radio:active span { transform: scale(1.1, .84); transition-duration: .07s; }
.news-form .btn { margin-top: 10px; }
.news-fine { margin-top: 14px; font-size: 13px; font-weight: 700; line-height: 1.7; }
.news-ok { text-align: center; padding: 8px 0; }
.news-ok:focus { outline: 0; }
.news-ok[hidden] { display: none; }
.news-ok-king { width: 136px; margin: 0 auto 10px; animation: kingJump .95s var(--spring); }
.news-ok-h { font: 400 32px/1.3 var(--jp-d); }
.news-ok p + p { margin-top: 8px; font-weight: 700; }
.news-ok .btn { margin-top: 16px; }

/* ---------- Footer ---------- */
.foot { position: relative; }
.foot-wave { position: relative; height: clamp(150px, 18vw, 240px); margin-bottom: -2px; }
#footCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.foot-king { position: absolute; left: 0; top: 0; width: clamp(96px, 13vw, 180px); pointer-events: none; will-change: transform; }
.foot-body { background: var(--tomato); padding-bottom: 104px; }
.foot-word { font: 400 clamp(68px, 19.4vw, 300px)/.95 var(--latin); letter-spacing: -.005em; white-space: nowrap; color: var(--cream); -webkit-text-stroke: clamp(3px, .5vw, 7px) var(--ink); paint-order: stroke fill; text-shadow: .022em .022em 0 var(--ink); }
.foot-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); margin-top: clamp(28px, 4vw, 56px); font-weight: 700; }
.foot-lk { grid-column: 1 / span 4; }
.foot-mark { display: block; width: 92px; margin-bottom: 8px; }
.foot-lk b { font: 400 22px/1.3 var(--latin); letter-spacing: .02em; }
.foot-nav { grid-column: 5 / span 3; display: grid; gap: 2px; align-content: start; }
.foot-nav a, .foot-link { display: inline-block; padding: 7px 0; text-underline-offset: .22em; text-decoration-thickness: 2px; transition: transform .5s var(--spring); }
@media (hover: hover) { .foot-nav a:hover, .foot-link:hover { transform: scale(1.06, .94); } }
.foot-nav a:active, .foot-link:active { transform: scale(1.12, .84); transition-duration: .07s; }
.foot-mail { grid-column: 8 / -1; }
.foot-link { font: 400 clamp(18px, 2vw, 28px)/1.3 var(--latin); letter-spacing: .01em; overflow-wrap: anywhere; }
.foot-fine { margin-top: 28px; font-size: 13px; font-weight: 700; line-height: 1.8; }

/* ---------- No script: every section keeps its own colour ---------- */
html:not(.js) .hero, html:not(.js) .news { background: var(--yellow); }
html:not(.js) .mani, html:not(.js) .mixer { background: var(--cream); }
html:not(.js) .nums, html:not(.js) .faq { background: var(--pink); }
html:not(.js) .wrapz { background: var(--sky); }
html:not(.js) .wall { background: var(--tomato); }
html:not(.js) .stands { background: var(--mint); }
html:not(.js) .fl:nth-child(1) { background: var(--yellow); }
html:not(.js) .fl:nth-child(2) { background: var(--pink); }
html:not(.js) .fl:nth-child(3) { background: var(--sky); }
html:not(.js) .fl:nth-child(4) { background: var(--mint); }
html:not(.js) .foot { background: var(--yellow); }
html:not(.js) .loader, html:not(.js) .band { display: none; }
html:not(.js) #mixCanvas, html:not(.js) .mix-grid { display: none; }

/* ---------- Short laptops: the letters need the room ---------- */
@media (max-height: 780px) and (min-width: 720px) {
  .hero-lead, .hero-hint { display: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .hero { --sun-top: 26vh; }
  .nums-grid { grid-template-columns: repeat(6, 1fr); }
  .num-a { grid-column: 1 / -1; grid-row: auto; }
  .num-b, .num-d { grid-column: 1 / span 3; }
  .num-c, .num-e { grid-column: 4 / span 3; }
  .mix-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "taps stage" "acts stage" "card card"; }
  .mix-card { margin-top: 18px; }
  .wrapz-copy { grid-column: 1 / -1; margin-bottom: 26px; }
  .wrapz-grid { grid-column: 1 / -1; }
  .stands-side, .faq-h { position: static; grid-column: 1 / -1; margin-bottom: 26px; }
  .stand-list, .faq-list, .stands-fine { grid-column: 1 / -1; }
  .mani-cols p:nth-child(1) { grid-column: 1 / span 6; }
  .mani-cols p:nth-child(2) { grid-column: 7 / span 6; }
  .mani-note { position: relative; left: 0; bottom: 0; width: max-content; max-width: 100%; margin-top: 28px; }
}

/* ---------- Phone: a designed layout, not a squeezed one ---------- */
@media (max-width: 719px) {
  :root { --line: 3px; --line-b: 4px; --hard: 5px; }
  .top-nav { display: none; }
  .brand, .sound { height: 48px; }
  .sound { margin-left: auto; }
  .brand-name { font-size: 17px; }

  .hero { --sun-top: 8vh; }
  .hero-sun { right: -14vw; top: auto; bottom: 150px; width: 78vw; }
  .hero-king { right: 7vw; top: auto; bottom: calc(150px + 78vw * .34); width: 40vw; }
  .hero-copy { top: 76px; }
  .hero-h { font-size: clamp(38px, 11.6vw, 52px); margin-top: 6px; }
  .hero-lead { font-size: 14px; line-height: 1.75; margin-top: 10px; }
  .hero-cta { gap: 10px; margin-top: 14px; }
  .hero-cta .btn { min-height: 48px; padding: 8px 18px; font-size: 14px; box-shadow: 4px 4px 0 var(--ink); }
  .hero-hint { margin-top: 8px; font-size: 13px; line-height: 1.5; }
  .hint-btn { font-size: 13px; }
  .band { margin-top: -18px; }

  .mani-h { font-size: clamp(42px, 13vw, 60px); }
  .mani-h .ln2 { padding-left: 8vw; }
  .mani-h .ln3 { padding-left: 0; }
  .mani-cols { display: block; font-size: 16px; margin-top: 44px; }
  .mani-cols p:nth-child(2) { padding-top: 1.2em; }
  .mani-king { position: static; width: 124px; margin: 34px 0 0 auto; }
  .mani-note { width: auto; margin-top: -34px; margin-right: 100px; }

  .nums-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .num { padding: 34px 34px; }
  .blob { border-radius: 36% 40% 38% 42% / 40% 36% 42% 38%; animation: none; }
  .num-a { grid-column: 1 / -1; grid-row: auto; padding: 44px 30px; }
  .num-a .num-v { font-size: 34vw; }
  .num-b { grid-column: 1 / -1; }
  .num-c { grid-column: 1 / -1; }
  .num-d { grid-column: 1 / -1; }
  .num-e { grid-column: 1 / -1; }
  .num-b, .num-d { margin-right: 14%; }
  .num-c, .num-e { margin-left: 14%; }
  .num-v { font-size: 66px; }

  .cans { height: 440vh; height: 440svh; }
  .fl { align-items: flex-end; justify-content: flex-start !important; padding-bottom: 84px; }
  .fl-body { width: 100%; }
  .fl-no { font-size: 13px; }
  .fl-name { font-size: clamp(54px, 17vw, 76px) !important; margin-top: 0; }
  .fl-catch { font-size: 18px; margin-top: 2px; }
  .fl-desc { font-size: 14px; line-height: 1.75; margin-top: 6px; }
  .fl-tags { gap: 5px; margin-top: 8px; }
  .fl-tags li { font-size: 12px; padding: 0 9px; border-width: 2px; }
  .fl-data { display: none; }
  .fl-nav { left: auto; right: 10px; bottom: auto; top: 70px; translate: none; flex-direction: column; gap: 2px; }
  .fl-nav button { width: 44px; height: 44px; padding: 4px; }
  html:not(.pin) .fl { flex-direction: column; align-items: flex-start; padding-bottom: 0; }
  html:not(.pin) .fl-can { order: 0 !important; width: 150px; }
  html:not(.pin) .fl-data { display: flex; }

  .mix-head { display: block; }
  .mix-lead { margin-top: 12px; }
  .mix-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
  .mix-taps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .tap { aspect-ratio: auto; min-height: 84px; padding: 6px 2px; border-radius: 18px; box-shadow: 3px 3px 0 var(--ink); font-size: 12px; }
  .tap i { width: 40px; }
  .mix-stage { order: -1; min-height: 0; height: 450px; border-radius: 30px; box-shadow: 6px 6px 0 var(--ink); }
  #mixCanvas { border-radius: 26px; }
  .mix-actions { gap: 10px; }
  .shake { min-height: 84px; box-shadow: 5px 5px 0 var(--ink); }
  .mix-status { min-height: 0; }
  .mix-card { box-shadow: 6px 6px 0 var(--ink); margin-top: 8px; }
  .card-empty { padding: 34px 0; }

  .wrapz-grid { grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px; border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); }
  .wrapz-done { min-height: 0; }

  .wall-head { display: block; }
  .wall-head p { margin-top: 10px; }
  .wall-board { height: 620px; }
  .stk-t { font-size: 18px; border-radius: 16px; }
  .stk-a { width: 84px; padding: 10px; }
  .stk-b { width: 112px; }
  .stk-b b { font-size: 15px; }
  .stk-m { width: 104px; }

  .stand { grid-template-columns: 2.4em minmax(0, 1fr); padding: 14px; row-gap: 6px; column-gap: 8px; align-items: start; }
  .st-no { font-size: 20px; line-height: 1.4; }
  .st-time { grid-column: 2; }
  .st-time br { display: none; }
  .st-tag { grid-column: 2; justify-self: start; }

  .q button { min-height: 68px; padding: 12px 16px; font-size: 17px; }
  .q i { width: 38px; height: 38px; }
  .a p { padding: 0 16px 18px; font-size: 15px; }

  .news-form { margin-top: 28px; grid-column: 1 / -1; box-shadow: 6px 6px 0 var(--ink); }
  .news-copy { grid-column: 1 / -1; }

  .foot-grid { display: flex; flex-direction: column; gap: 22px; }
  .foot-word { -webkit-text-stroke-width: 2.5px; }
  .foot-body { padding-bottom: 96px; }
}

/* ---------- Reduced motion: everything resolves, nothing wobbles ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .loader-fill path, .loader-bubbles circle { animation: none !important; }
}

/* A bubble that trails the pointer and stretches with speed. Mouse only. */
.cur {
  position: fixed; left: 0; top: 0; z-index: 99980; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; opacity: 0;
  border: 3px solid var(--ink); border-radius: 50%; background: none;
}
.cur.on { opacity: 1; }