/* NIDO home. site.css
   Soft 3D shop concept. Card UI, organic blob, tinted page.
   Loaded after base.css. No em dashes anywhere. */

/* ---------- Font ---------- */
@font-face {
  font-family: 'Hanken';
  src: url('../assets/fonts/hanken-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('../assets/fonts/caveat-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.hand { font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 600; letter-spacing: 0.01em; }

/* ---------- Tokens ---------- */
:root {
  --paper: #F0EDE9;
  --card: #F8F7F5;
  --ink: #191817;
  --body: #4A4742;
  --muted: #8F8B85;
  --hair: #E4E1DB;
  --hair-strong: #D6D2CB;
  --yellow: #F6C445;
  --pink: #F3BAC0;
  --sage: #8A9367;
  --shadow-card: 0 30px 80px rgba(25, 24, 23, 0.10);
  --shadow-pop: 0 18px 44px rgba(25, 24, 23, 0.14);
  --ease-soft: cubic-bezier(0.22, 0.8, 0.3, 1);
  --inset: clamp(12px, 1.8vw, 22px);
}
html[data-scene="1"] { --page-tint: #EFD3D4; --accent: #DE8E9B; --bean-a: #F8D6DA; --bean-b: #FBF6F1; --face-ink: #6E4046; }
html[data-scene="2"] { --page-tint: #F0DFC8; --accent: #E39F45; --bean-a: #F6D9A8; --bean-b: #FBF3E6; --face-ink: #7A5220; }
html[data-scene="3"] { --page-tint: #DFE3D3; --accent: #7C8A5A; --bean-a: #CCD2B6; --bean-b: #F4F1E9; --face-ink: #3E4A2B; }

@media (min-width: 761px) { html { scrollbar-gutter: stable; } }
html, body { overflow-x: clip; }
body {
  font-family: 'Hanken', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--page-tint, var(--paper));
  transition: background-color 0.9s ease;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--pink); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Shared type ---------- */
.eyebrow {
  margin: 0 0 18px;
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.h-xl, .h-lg { margin: 0; font-weight: 650; letter-spacing: -0.03em; line-height: 1.02; }
.h-xl { font-size: clamp(2.8rem, 6.2vw, 5.4rem); }
.h-lg { font-size: clamp(2.1rem, 4.4vw, 3.8rem); }
.ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln-i { display: inline-block; transform: translateZ(0); }

/* hand drawn underline squiggle inside a heading word */
.u-squig { position: relative; display: inline-block; }
.u-squig svg {
  position: absolute; left: 1%; bottom: -0.02em;
  width: 98%; height: 0.16em; overflow: visible;
  color: var(--accent); transition: color 0.9s ease;
}

/* ---------- Beans (soft 3D props) ---------- */
.bean {
  position: absolute; display: block; pointer-events: none;
  will-change: transform;
  width: var(--bean-size, 44px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #FFFFFF 0%, var(--bean-b, #FBF6F1) 28%, var(--bean-a, #F8D6DA) 62%, color-mix(in srgb, var(--bean-a, #F8D6DA) 72%, #6B5450) 100%);
  box-shadow: 0 18px 26px rgba(25, 24, 23, 0.10);
  transition: background 0.9s ease;
}
.bean--pill { aspect-ratio: 1.7; border-radius: 999px; }
/* the balls out in the page answer a pointer. The two on the hero stage do not:
   that surface is the swipe target and must stay clean. */
.bean--live { pointer-events: auto; cursor: pointer; }

/* every ball on the page carries the same little guy, inked in the room colour */
.bean__face {
  /* the svg keeps its own aspect (xMidYMid meet), so the box just needs to be the
     ball minus a hair of margin. Never scale it: a pill would get a squeezed face. */
  position: absolute; inset: 5%; width: 90%; height: 90%;
  color: var(--face-ink, rgba(25, 24, 23, 0.8));
  overflow: visible;
  transition: color 0.9s ease;
}
.bean--pill .bean__face { inset: 10% 0; width: 100%; height: 80%; }
.sun-brows { opacity: 0; }
.sun-brow { transform-box: fill-box; transform-origin: center; }
/* the eyes ride a touch high on a ball so the mouth has room to grin */
.bean__face .sun-face { transform: translateY(-1px); }

/* ================= Loader ================= */
.loader {
  display: none;
  background: var(--paper);
  z-index: 999;
}
html.js .loader { display: block; }
.loader__stage {
  position: absolute; left: 30%; top: 46%;
  width: min(320px, 62vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
@media (max-width: 760px) {
  .loader__stage { left: 50%; top: 30%; }
}
.loader__blob { z-index: 2; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* the blob sits on something: a soft contact shadow that squashes as it breathes */
.loader__shadow {
  z-index: 0;
  position: absolute; left: 24%; right: 24%; bottom: -1%; height: 5.5%;
  border-radius: 50%; background: rgba(25, 24, 23, 0.14);
  filter: blur(9px); opacity: 0;
}

/* a hairline progress arc traced around the blob */
.loader__ring {
  z-index: 0;
  position: absolute; left: -4.5%; top: -4.5%; width: 109%; height: 109%;
  transform: rotate(-90deg); overflow: visible; pointer-events: none;
}
.loader__ring circle { fill: none; stroke-linecap: round; }
.loader__ring-track { stroke: rgba(25, 24, 23, 0.10); stroke-width: 0.9; }
.loader__ring-prog {
  stroke: var(--accent, #DE8E9B); stroke-width: 1.8;
  stroke-dasharray: 596.9; stroke-dashoffset: 596.9;
}

/* rings that pulse out of the blob when the last byte lands */
.loader__pulse {
  z-index: 1;
  position: absolute; left: 50%; top: 50%; width: 96%; aspect-ratio: 1;
  margin-left: -48%; margin-top: -48%;
  border-radius: 50%; border: 2px solid var(--pink);
  opacity: 0; pointer-events: none;
}

.loader__count {
  z-index: 4;
  position: absolute; inset: 0;
  display: grid; grid-auto-flow: column;
  justify-content: center; align-content: center; align-items: center;
  font-size: clamp(2.4rem, 9vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em;
  color: #FFFFFF; font-variant-numeric: tabular-nums;
}
.loader__count > span { display: inline-block; }
.loader__pct { font-size: 0.4em; font-weight: 650; opacity: 0.72; margin-left: 0.1em; transform: translateY(-0.78em); }

/* five beans, each with a face, each on its own orbit. JS owns x and y. */
.loader__beans { position: absolute; inset: 0; }
.lbean {
  z-index: 3;
  position: absolute; left: 50%; top: 50%;
  width: var(--lb, 30px); aspect-ratio: 1; border-radius: 50%;
  margin-left: calc(var(--lb, 30px) / -2); margin-top: calc(var(--lb, 30px) / -2);
  background: radial-gradient(circle at 32% 28%, #FFF 0%, var(--lb-b, #FBF6F1) 30%, var(--lb-a, #F3D9DC) 62%, color-mix(in srgb, var(--lb-a, #F3D9DC) 70%, #6B5450) 100%);
  box-shadow: 0 10px 18px rgba(25, 24, 23, 0.12);
}
.lbean .bean__face { color: #6E4046; }
.lbean--1 { --lb: 42px; --lb-a: #F3D9DC; --lb-b: #FBF6F1; }
.lbean--2 { --lb: 27px; --lb-a: #F6D9A8; --lb-b: #FBF3E6; }
.lbean--3 { --lb: 46px; --lb-a: #CCD2B6; --lb-b: #F4F1E9; }
.lbean--4 { --lb: 32px; --lb-a: #F8D6DA; --lb-b: #FBF6F1; }
.lbean--5 { --lb: 23px; --lb-a: #EEDDBE; --lb-b: #FBF6F1; }

.loader__brand { position: absolute; left: 30%; transform: translateX(-50%); bottom: 7vh; text-align: center; white-space: nowrap; }
@media (max-width: 760px) {
  .loader__brand { left: 50%; }
}
.loader__word { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.loader__hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }
.lw-ln, .lh-ln { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.lw-i, .lh-i { display: inline-block; }

/* a hand written aside, so even the wait is signed by somebody */
.loader__scrawl {
  position: absolute; left: 6vw; top: 12vh; margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.15; color: var(--body);
  max-width: 12ch; opacity: 0;
}
.loader__scrawl svg { display: block; width: 54px; height: 36px; margin: 4px 0 0 34px; color: var(--muted); }
@media (max-width: 760px) {
  .loader__scrawl { left: 50%; top: auto; bottom: 27vh; transform: translateX(-50%); text-align: center; max-width: 16ch; }
  .loader__scrawl svg { display: none; }
}

/* ================= Hero card ================= */
.hero { position: relative; height: 100svh; min-height: 640px; padding: var(--inset); }
.card {
  position: relative; width: 100%; height: 100%;
  background: var(--card);
  border-radius: clamp(26px, 3vw, 44px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid; grid-template-columns: 58.5% 1fr;
}

/* Stage (left, blob + product + title) */
.stage { position: relative; overflow: hidden; container-type: size; touch-action: pan-y; }
.stage__blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark {
  position: absolute; top: clamp(18px, 3vh, 30px); left: clamp(18px, 2.4vw, 34px);
  width: 44px; height: 44px; display: grid; place-items: center;
  color: #FFFFFF; z-index: 5;
}
.mark svg { width: 26px; height: 26px; }
.scene-title {
  position: absolute; left: 7.5%; top: 10.5%; z-index: 3; margin: 0;
  font-size: clamp(2.6rem, 15cqw, 7.6rem);
  font-weight: 700; line-height: 0.94; letter-spacing: -0.035em;
  color: #FFFFFF; pointer-events: none;
}
.scene-title__ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.scene-title__t { display: inline-block; }
.props { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#bean1 { --bean-size: clamp(36px, 6cqw, 62px); right: 16%; top: 17%; }
#bean2 { --bean-size: clamp(30px, 5cqw, 52px); left: 13%; bottom: 23%; }
.product { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.product__img {
  position: absolute; left: 50%; top: 55%;
  max-height: 68cqh; width: auto; height: auto; object-fit: contain;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.product__img.is-active { visibility: visible; }
/* sized so each piece leans past the blob edge into the bone field: the overlap is the depth */
#prod1 { width: min(91cqw, 715px); }
#prod2 { width: min(71cqw, 505px); }
#prod3 { width: min(72cqw, 505px); }

/* Panel (right, logotype + list) */
.panel {
  position: relative; min-width: 0;
  padding: clamp(24px, 9vh, 84px) clamp(22px, 3.4vw, 56px) clamp(90px, 13vh, 120px);
  display: flex; flex-direction: column;
}
.logotype {
  margin: 0; font-size: clamp(2rem, 2.9vw, 3.3rem);
  font-weight: 420; line-height: 1.04; letter-spacing: -0.02em;
}
.logotype__ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.logotype__t { display: inline-block; }
.plist { margin-top: clamp(22px, 5vh, 56px); min-height: 0; }
.plist__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair);
  font-size: 0.66rem; font-weight: 650; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted);
}
.plist__rows { list-style: none; margin: 0; padding: 0; }
.prow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 92px 42px;
  align-items: center; gap: clamp(10px, 1.2vw, 18px);
  height: clamp(80px, 12vh, 104px);
  border-bottom: 1px solid var(--hair);
}
.prow__cell { overflow: hidden; min-width: 0; }
.prow__in { display: block; }
.prow__name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__dims { font-size: 0.84rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* flex, not grid: a percentage max-height on a grid item resolves against the auto row
   and never caps a tall image; against a flex container it caps correctly */
.prow__media { width: 92px; height: 74px; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 0.3s var(--ease-soft); }
.prow__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
@media (hover: hover) {
  .prow:hover .prow__media { transform: translateY(-4px) rotate(-2.5deg); }
  .prow:hover .prow__name, .gcard:hover .gcard__name { text-decoration: underline wavy var(--accent) 2px; text-underline-offset: 5px; }
}
.prow__add {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hair-strong); display: grid; place-items: center;
  transition: background-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft), transform 0.25s var(--ease-soft), border-color 0.25s;
}
.prow__add svg { width: 16px; height: 16px; }
.prow__add:hover { background-color: var(--ink); border-color: var(--ink); color: #FFF; transform: scale(1.06); }
.prow__add:active { transform: scale(0.92); }

/* the room note: a handwritten line per scene at the panel foot */
.panel__note { margin-top: auto; padding-top: 24px; }
.panel__note-tag { margin: 0; font-size: 1.1rem; line-height: 1; color: var(--accent); transition: color 0.9s ease; }
.panel__note-line { margin: 4px 0 0; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.22; color: var(--ink); max-width: 30ch; }
.panel__note-squig { display: block; width: 92px; height: 11px; margin-top: 10px; color: var(--accent); transition: color 0.9s ease; }

/* Panel grid mode */
.panel--grid .plist__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
.panel--grid .prow {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;
  height: auto; gap: 4px; padding: 16px 8px 14px;
  border: 1px solid var(--hair); border-radius: 20px;
}
.panel--grid .prow__media { order: -1; width: 100%; height: 86px; margin-bottom: 8px; }
.panel--grid .prow__name { font-size: 0.9rem; white-space: normal; }
.panel--grid .prow__dims { font-size: 0.74rem; }
.panel--grid .prow__add { margin-top: 10px; width: 36px; height: 36px; }

/* Card chrome */
.smiley {
  position: absolute; top: clamp(16px, 2.6vh, 28px); right: clamp(16px, 2vw, 30px); z-index: 6;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--yellow); display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(25, 24, 23, 0.10);
  transition: scale 0.3s var(--ease-soft);
}
.smiley:hover { scale: 1.07; }
.smiley:active { scale: 0.94; }
.smiley__face-svg { width: 46px; height: 46px; }
.smiley__burst {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px;
  margin-left: -42px; margin-top: -42px;
  pointer-events: none; opacity: 0;
}
.sun-face, .sun-eyes, .sun-eye { transform-box: fill-box; transform-origin: center; }
.sun-eye circle { transform-box: fill-box; transform-origin: center; transition: transform 0.16s ease; }
.smiley:hover .sun-eye--r circle { transform: scaleY(0.15); }

/* the question mark that pops while he works out what just happened */
/* both float up and to the LEFT of the head: up and right runs into the card
   corner, and .card clips */
.sun-quiz {
  position: absolute; right: 74%; bottom: 66%;
  width: 20px; height: 20px; color: var(--ink);
  opacity: 0; pointer-events: none; overflow: visible;
}
/* and the doze, for when nobody has touched anything in a while */
.sun-zzz {
  position: absolute; right: 70%; bottom: 62%;
  display: flex; align-items: flex-end; gap: 1px;
  font-size: 0.95rem; line-height: 1; color: var(--ink);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.sun-zzz i { display: block; font-style: normal; opacity: 0; }
.sun-zzz i:nth-child(2) { font-size: 1.2em; }
.sun-zzz i:nth-child(3) { font-size: 1.45em; }

/* he says the odd short thing */
.sunbubble {
  position: absolute; z-index: 6;
  top: clamp(20px, 3.1vh, 33px);
  right: calc(clamp(16px, 2vw, 30px) + 58px);
  padding: 7px 14px 9px;
  background: #FFFFFF; border-radius: 999px 999px 4px 999px;
  box-shadow: 0 10px 24px rgba(25, 24, 23, 0.12);
  opacity: 0; pointer-events: none; white-space: nowrap;
  transform-origin: 100% 60%;
}
.sunbubble__txt { display: block; font-size: 1.12rem; line-height: 1; color: var(--ink); }

/* the traveling sun: loader companion that flies onto the card */
.sunfly {
  position: fixed; left: 0; top: 0; z-index: 1001;
  width: 56px; height: 56px;
  display: none; place-items: center;
  pointer-events: none;
}
html.js .sunfly { display: grid; }
html.no-anim .sunfly { display: none; }
.sunfly__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 12px 26px rgba(25, 24, 23, 0.14);
}
.sunfly .smiley__face-svg { position: relative; width: 51px; height: 51px; }

.catdock {
  position: absolute; left: clamp(18px, 2.4vw, 34px); bottom: clamp(16px, 2.8vh, 26px); z-index: 6;
  display: flex; align-items: center; gap: 10px;
}
.catdock__btn {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; color: var(--ink);
  opacity: 0.55; transition: opacity 0.3s, background-color 0.3s, box-shadow 0.3s, translate 0.3s var(--ease-soft);
}
.catdock__btn svg { width: 27px; height: 27px; }
.catdock__btn:hover { opacity: 0.85; translate: 0 -2px; }
.catdock__btn.is-active { background-color: #FFFFFF; opacity: 1; box-shadow: 0 12px 26px rgba(25, 24, 23, 0.13); }
.catdock__dash { width: 24px; height: 2px; border-radius: 2px; background: var(--hair-strong); }

.pill {
  position: absolute; left: 50%; bottom: clamp(14px, 2.4vh, 22px); z-index: 7;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  background: #FFFFFF; border-radius: 999px; padding: 7px;
  box-shadow: var(--shadow-pop);
}
.pill__btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  transition: background-color 0.25s, transform 0.25s var(--ease-soft), color 0.25s;
}
.pill__btn svg { width: 21px; height: 21px; }
.pill__btn:hover { background-color: #F1EEE9; }
.pill__btn:active { transform: scale(0.9); }
.pill__btn.is-on { color: var(--accent); }
.pill__btn.is-on #heartPath { fill: var(--accent); stroke: var(--accent); }
.pill__div { width: 1px; height: 22px; background: var(--hair); margin: 0 5px; }
.pill__go {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  background: #141414; color: #FFFFFF; display: grid; place-items: center;
  margin-left: 7px;
  will-change: transform;
}
.pill__arrow { width: 22px; height: 22px; position: relative; z-index: 2; }
.pill__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#ringProg { stroke-dasharray: 163.36; stroke-dashoffset: 163.36; }

.viewtoggle {
  position: absolute; right: clamp(16px, 2vw, 30px); bottom: clamp(16px, 2.8vh, 26px); z-index: 6;
  width: 52px; height: 52px; border-radius: 16px;
  background: #FFFFFF; box-shadow: 0 12px 26px rgba(25, 24, 23, 0.10);
  display: grid; place-items: center; color: var(--ink);
  transition: translate 0.25s var(--ease-soft), scale 0.25s var(--ease-soft);
}
.viewtoggle:hover { translate: 0 -2px; }
.viewtoggle:active { scale: 0.94; }
.viewtoggle__ic { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity 0.25s, transform 0.35s var(--ease-soft); }
.viewtoggle__ic--rows { opacity: 0; transform: scale(0.7) rotate(-40deg); }
.viewtoggle[aria-pressed="true"] .viewtoggle__ic--grid { opacity: 0; transform: scale(0.7) rotate(40deg); }
.viewtoggle[aria-pressed="true"] .viewtoggle__ic--rows { opacity: 1; transform: none; }

.bag-badge {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--ink); color: #FFF;
  font-size: 0.62rem; font-weight: 650; line-height: 18px; text-align: center;
  transition: opacity 0.2s;
}
.bag-badge.is-zero { opacity: 0; }

/* ================= Sections ================= */
.manifesto, .collection, .story, .footer {
  position: relative;
  max-width: 1280px; margin: 0 auto;
  padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px);
}
.manifesto {
  padding-top: clamp(110px, 17vh, 190px); padding-bottom: clamp(90px, 13vh, 160px);
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.manifesto__text { min-width: 0; }
.manifesto__copy { max-width: 540px; margin: 30px 0 0; font-size: 1.06rem; line-height: 1.72; color: var(--body); }
.manifesto__bean1 { --bean-size: clamp(38px, 4.6vw, 64px); right: 4%; top: 12%; }
.manifesto__bean2 { --bean-size: clamp(30px, 3.6vw, 50px); left: 44%; bottom: 8%; }

/* the out of the box figure: a hand drawn crate, a real piece leaning out of it */
.mani-fig { position: relative; width: 100%; max-width: 470px; justify-self: center; min-width: 0; padding: clamp(40px, 4vw, 56px) 0 30px; }
.mani-fig__box { position: relative; width: min(76%, 344px); margin: 0 auto; aspect-ratio: 320 / 258; }
.mani-fig__crate { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.mani-fig__crate--back { z-index: 1; }
.mani-fig__item {
  position: absolute; z-index: 2; left: 50%; bottom: 17%; width: 60%; height: auto;
  transform: translateX(-50%) rotate(-2deg);
  transition: transform 0.5s var(--ease-soft);
}
.mani-fig__crate--front { z-index: 3; }
.mani-fig__scrawl { font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 600; font-size: 20px; fill: #8A7B62; }
.sticker {
  position: absolute; z-index: 4; right: -3%; bottom: 16%;
  transform: rotate(-8deg);
  background: var(--yellow); color: var(--ink);
  font-size: 1.05rem; line-height: 1; padding: 8px 13px 9px;
  border-radius: 999px; box-shadow: 0 8px 18px rgba(25, 24, 23, 0.14);
  pointer-events: none;
  transition: transform 0.45s var(--ease-soft);
}
.mani-note { position: absolute; margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.1; color: var(--body); }
.mani-note svg { display: block; width: 46px; height: 34px; margin-top: 2px; color: var(--muted); }
.mani-note--1 { left: 0; top: 0; }
.mani-note--2 { right: 0; top: 16%; text-align: right; }
.mani-note--2 svg { margin-left: auto; }
.mani-note--3 { left: 50%; transform: translateX(-50%); bottom: -12px; white-space: nowrap; color: var(--muted); }
@media (hover: hover) {
  /* the stool climbs a little further out of its box when you lean in */
  .mani-fig__box:hover .mani-fig__item { transform: translateX(-50%) rotate(-7deg) translateY(-7px); }
  .mani-fig__box:hover .sticker { transform: rotate(-14deg) scale(1.05); }
}

.collection { padding-bottom: clamp(90px, 13vh, 170px); }
.collection__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(42px, 6vh, 64px);
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip__n { font-size: 0.72em; opacity: 0.55; margin-left: 6px; font-variant-numeric: tabular-nums; }
.chip {
  position: relative;
  padding: 11px 19px; border-radius: 999px;
  border: 1px solid var(--hair-strong);
  font-size: 0.9rem; font-weight: 570; color: var(--ink);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, translate 0.25s var(--ease-soft);
}
.chip:hover { translate: 0 -2px; }
.chip.is-active { background-color: var(--ink); border-color: var(--ink); color: #FFF; }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: clamp(20px, 3vh, 32px) clamp(12px, 1.6vw, 22px);
}
.gcard {
  position: relative; min-width: 0;
  background: var(--card); border-radius: 26px;
  padding: clamp(16px, 1.6vw, 22px);
  display: flex; flex-direction: column;
  /* NOT transform: gsap owns the matrix during the filter reflow */
  transition: translate 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
/* every piece stands over a soft category tinted shelf blob: the overlap is the depth */
.gcard__media { position: relative; height: clamp(148px, 20vh, 186px); display: flex; align-items: flex-end; justify-content: center; overflow: visible; margin-bottom: 14px; }
.gcard__media::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 2px; height: 58%;
  border-radius: 46% 54% 52% 48% / 62% 58% 40% 44%;
  background: #F4E2E4;
  transform-origin: 50% 100%;
  transition: transform 0.45s var(--ease-soft);
}
.gcard[data-cat="objects"] .gcard__media::before { background: #F0E2C9; border-radius: 52% 48% 50% 50% / 58% 64% 42% 40%; }
.gcard[data-cat="greens"] .gcard__media::before { background: #E1E6D2; border-radius: 48% 52% 46% 54% / 60% 56% 44% 40%; }
.gcard__media img { position: relative; max-width: 84%; max-height: 100%; width: auto; height: auto; transform: translateY(-9%); transition: transform 0.45s var(--ease-soft); }
.gcard__badge {
  position: absolute; z-index: 3; top: -13px; right: 16px;
  transform: rotate(6deg);
  background: var(--yellow); border-radius: 999px;
  padding: 7px 12px 8px; font-size: 1.02rem; line-height: 1;
  box-shadow: 0 8px 18px rgba(25, 24, 23, 0.14);
  pointer-events: none;
}
.grid-after { margin: clamp(34px, 5vh, 52px) 0 0; text-align: center; font-size: 1.3rem; color: var(--muted); }
.collection__bean { --bean-size: clamp(32px, 3.4vw, 50px); right: 2%; top: 4%; }
.gcard__name { margin: 0; font-size: 1.02rem; font-weight: 640; letter-spacing: -0.01em; }
.gcard__dims { margin: 3px 0 0; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gcard__price { margin: 12px 0 0; font-size: 1rem; font-weight: 650; }
.gcard__add {
  position: absolute; right: 14px; bottom: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hair-strong); background: var(--card);
  display: grid; place-items: center;
  transition: background-color 0.28s, color 0.28s, transform 0.35s var(--ease-soft), border-color 0.28s;
}
.gcard__add svg { width: 15px; height: 15px; }
.gcard__add:hover { background-color: var(--ink); border-color: var(--ink); color: #FFF; transform: rotate(90deg); }
.gcard__add:active { transform: rotate(90deg) scale(0.9); }
@media (hover: hover) {
  .gcard:hover { translate: 0 -6px; box-shadow: 0 26px 54px rgba(25, 24, 23, 0.10); }
  .gcard:hover .gcard__media img { transform: translateY(-13%) rotate(-3.5deg) scale(1.045); }
  .gcard:hover .gcard__media::before { transform: scaleX(1.05) scaleY(0.93); }
}
.gcard.is-hidden { display: none; }
.grid.is-reflowing .gcard { transition: none; pointer-events: none; }

.story {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 76px); align-items: start;
  padding-bottom: clamp(80px, 11vh, 140px);
}
.story__p { max-width: 480px; margin: 26px 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--body); }
.facts { list-style: none; margin: 38px 0 0; padding: 0; }
.fact {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  padding: 20px 46px 20px 0; border-top: 1px solid var(--hair-strong);
}
.fact__no { font-size: 0.78rem; font-weight: 650; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.fact h3 { margin: 0; font-size: 1.04rem; font-weight: 650; letter-spacing: -0.01em; }
.fact p { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.fact__ic { position: absolute; right: 2px; top: 50%; margin-top: -17px; width: 34px; height: 34px; color: var(--accent); transition: color 0.9s ease; }
.story__sig { margin: 32px 0 0; font-size: 1.35rem; color: var(--body); display: flex; align-items: center; gap: 12px; }
.story__sig svg { width: 46px; height: 22px; color: var(--accent); flex: none; transition: color 0.9s ease; }
.story__figure { position: relative; min-width: 0; }
.story__media {
  position: relative; border-radius: 34px; overflow: hidden;
  aspect-ratio: 4 / 3.2; background: var(--card);
  box-shadow: var(--shadow-card);
}
.story__media img { width: 100%; height: 122%; object-fit: cover; will-change: transform; }
/* handmade layers riding the frame edge */
.story__tape {
  position: absolute; z-index: 3; top: 18px; left: -14px;
  transform: rotate(-5deg); transition: transform 0.45s var(--ease-soft);
  background: #FFFDF8; border-radius: 12px;
  padding: 8px 16px 10px; font-size: 1.2rem; line-height: 1; color: var(--body);
  box-shadow: 0 10px 22px rgba(25, 24, 23, 0.13);
}
.story__peek {
  position: absolute; z-index: 3; width: 33%; height: auto; left: -6%; bottom: -6%;
  transform: rotate(-7deg); transition: transform 0.55s var(--ease-soft);
}
@media (hover: hover) {
  .story__figure:hover .story__peek { transform: rotate(-19deg) translateY(-8px) scale(1.05); }
  .story__figure:hover .story__tape { transform: rotate(-2deg) translateY(-3px); }
}
.story__bean { --bean-size: clamp(44px, 5vw, 78px); left: 44%; top: 4%; }

/* ================= Footer ================= */
.footer { max-width: none; padding-top: clamp(48px, 7vh, 80px); padding-bottom: 26px; overflow: hidden; }
.footer__wave { display: block; width: min(400px, 58%); height: 18px; margin: 0 auto clamp(38px, 5vh, 60px); color: var(--ink); opacity: 0.3; }
.footer__top {
  position: relative;
  max-width: 1280px; margin: 0 auto 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.footer__links { display: flex; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; }
.flink { position: relative; color: var(--ink); text-decoration: none; font-weight: 570; font-size: 1rem; padding: 8px 0; }
.flink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-soft);
}
.flink:hover::after { transform: scaleX(1); transform-origin: left; }
/* against .footer__top, not .footer: a percentage top on the tall footer put this
   above the section, where overflow:hidden clipped it into a smudge */
.footer__bean { --bean-size: clamp(32px, 3.4vw, 50px); right: 19%; top: 22px; }
.sunspot { position: relative; flex: none; width: 148px; height: 148px; display: grid; place-items: center; }
.sunring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sunspin 30s linear infinite; pointer-events: none; }
.sunring text { font-size: 13px; font-weight: 650; letter-spacing: 0.1em; fill: var(--ink); opacity: 0.5; }
@keyframes sunspin { to { transform: rotate(360deg); } }
.sunspot__hint {
  position: absolute; right: calc(100% + 6px); top: -4px; margin: 0;
  white-space: nowrap; font-size: 1.2rem; line-height: 1; color: var(--body);
}
.sunspot__hint svg { display: block; width: 42px; height: 25px; margin: 4px 0 0 30px; color: var(--muted); }
.smiley--footer { position: static; width: 62px; height: 62px; }
.smiley--footer .sun-quiz, .smiley--footer .sun-zzz { right: auto; left: 72%; }
.smiley--footer .smiley__face-svg { width: 56px; height: 56px; }
.footer__word {
  max-width: 1280px; margin: 0 auto;
  font-size: clamp(3.4rem, 14.6vw, 13.5rem);
  font-weight: 700; letter-spacing: -0.05em; line-height: 0.98;
  color: var(--ink); white-space: nowrap;
}
.fw-ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.fw-i { display: inline-block; }
.footer__base {
  max-width: 1280px; margin: 44px auto 0;
  padding-top: 20px; border-top: 1px solid var(--hair-strong);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.84rem; color: var(--muted);
}
.footer__base p { margin: 0; }

/* ================= Dock ================= */
.dock {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex; align-items: center; gap: 4px;
  background: #FFFFFF; border-radius: 999px; padding: 8px;
  box-shadow: var(--shadow-pop);
  transform: translateX(-50%) translateY(180%);
  max-width: calc(100vw - 24px);
}
.dock__logo, .dock__top, .dock__bag {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  transition: background-color 0.25s;
}
.dock__logo svg, .dock__top svg, .dock__bag svg { width: 21px; height: 21px; }
.dock__logo:hover, .dock__top:hover, .dock__bag:hover { background-color: #F1EEE9; }
.dock__link {
  padding: 11px 16px; border-radius: 999px;
  color: var(--ink); text-decoration: none; font-weight: 570; font-size: 0.92rem;
  transition: background-color 0.25s;
}
.dock__link:hover { background-color: #F1EEE9; }
.dock__top { background-color: #F1EEE9; }

/* ================= Cart ================= */
.cart { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.cart.is-open { visibility: visible; }
.cart__scrim { position: absolute; inset: 0; background: rgba(25, 24, 23, 0.34); opacity: 0; }
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw);
  background: #FAF9F7; border-radius: 34px 0 0 34px;
  padding: 26px 26px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  transform: translateX(108%);
  box-shadow: -30px 0 70px rgba(25, 24, 23, 0.16);
}
.cart__head { display: flex; justify-content: space-between; align-items: center; }
.cart__head h2 { margin: 0; font-size: 1.55rem; font-weight: 680; letter-spacing: -0.02em; }
.cart__close {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--hair-strong);
  transition: background-color 0.25s, color 0.25s, transform 0.3s var(--ease-soft);
}
.cart__close svg { width: 18px; height: 18px; }
.cart__close:hover { background-color: var(--ink); color: #FFF; transform: rotate(90deg); }
.cart__empty { padding: 42px 0 30px; }
.cart__empty.is-off { display: none; }
.cart__doodle { display: block; width: 96px; height: 77px; color: var(--muted); margin-bottom: 16px; overflow: visible; }
.cart__sun { overflow: visible; }
.cart__empty-big { margin: 0; font-size: 1.3rem; font-weight: 660; letter-spacing: -0.01em; }
.cart__empty-sub { margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; }
.cart__rows { list-style: none; margin: 10px 0 0; padding: 6px 0 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.crow {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--hair);
}
.crow__media { width: 74px; height: 62px; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.crow__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; transform: translateY(-9%); }
.crow__name { margin: 0; font-size: 0.98rem; font-weight: 630; }
.crow__qty { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.crow__step {
  width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--hair-strong); display: grid; place-items: center;
  font-size: 0.95rem; font-weight: 600; line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}
.crow__step:hover { background-color: var(--ink); color: #FFF; border-color: var(--ink); }
.crow__count { font-size: 0.9rem; font-weight: 620; min-width: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.crow__price { font-weight: 660; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.cart__foot { border-top: 1px solid var(--hair-strong); padding-top: 16px; margin-top: 8px; }
.cart__foot.is-off { visibility: hidden; }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.02rem; }
.cart__total strong { font-size: 1.3rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cart__note { margin: 10px 0 0; font-size: 0.78rem; color: var(--muted); }

/* ================= Product detail ================= */
.pdp { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.pdp.is-open { visibility: visible; }
.pdp__scrim { position: absolute; inset: 0; background: rgba(25, 24, 23, 0.36); opacity: 0; }
.pdp.is-open .pdp__scrim { opacity: 1; }
.pdp__card {
  position: absolute; inset: 0; margin: auto;
  width: min(1020px, calc(100vw - 40px));
  height: fit-content;
  max-height: calc(100svh - 48px);
  background: var(--card); border-radius: clamp(26px, 3vw, 40px);
  box-shadow: 0 40px 110px rgba(25, 24, 23, 0.28);
  display: grid; grid-template-columns: 1.04fr 1fr;
  overflow: hidden;
}
.pdp__close {
  position: absolute; top: 18px; right: 18px; z-index: 4;
  width: 44px; height: 44px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 10px 24px rgba(25, 24, 23, 0.12);
  display: grid; place-items: center;
  transition: transform 0.3s var(--ease-soft);
}
.pdp__close svg { width: 18px; height: 18px; }
.pdp__close:hover { transform: rotate(90deg); }
.pdp__stage { position: relative; min-height: clamp(340px, 52svh, 560px); overflow: hidden; }
.pdp__blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdp__bean { --bean-size: 40px; right: 12%; top: 12%; }
.pdp__img {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  max-width: 82%; max-height: 74%; width: auto; height: auto;
}
.pdp__info { padding: clamp(28px, 4.5vw, 54px) clamp(24px, 4vw, 52px); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pdp__name { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.9rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1; }
.pdp__meta { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.pdp__price { font-size: 1.35rem; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pdp__dims { font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pdp__heart {
  margin-left: auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hair-strong); display: grid; place-items: center;
  transition: border-color 0.25s, background-color 0.25s;
}
.pdp__heart svg { width: 20px; height: 20px; }
.pdp__heart.is-on { border-color: var(--accent); }
.pdp__heart.is-on .pdp__heart-path { fill: var(--accent); stroke: var(--accent); }
.pdp__desc { margin: 20px 0 0; font-size: 1rem; line-height: 1.65; color: var(--body); max-width: 42ch; }
.pdp__care { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; }
.pdp__care li { display: flex; align-items: center; gap: 8px; font-size: 1.16rem; line-height: 1.1; color: var(--body); }
.pdp__care li svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.pdp__pair { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; min-width: 0; }
.pdp__pair-tag { font-size: 1.16rem; color: var(--muted); flex: none; }
.pdp__pair-btn {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  border: 1px solid var(--hair-strong); border-radius: 999px;
  padding: 5px 14px 5px 6px;
  transition: background-color 0.25s, border-color 0.25s, translate 0.25s var(--ease-soft);
}
.pdp__pair-btn:hover { background-color: #FFFFFF; border-color: var(--ink); translate: 0 -2px; }
.pdp__pair-media { width: 42px; height: 36px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.pdp__pair-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pdp__pair-name { font-size: 0.92rem; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp__pair-btn > svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.pdp__buy { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 26px; flex-wrap: wrap; }
.pdp__qty { display: flex; align-items: center; gap: 10px; border: 1px solid var(--hair-strong); border-radius: 999px; padding: 8px 12px; }
.pdp__add {
  flex: 1; min-width: 190px; height: 54px; border-radius: 999px;
  background: #141414; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 0.98rem; font-weight: 600;
  transition: background-color 0.25s;
}
.pdp__add svg { width: 19px; height: 19px; }
.pdp__add:hover { background-color: #2A2927; }
.pdp__note { margin: 14px 0 0; font-size: 0.78rem; color: var(--muted); }
.prow, .gcard { cursor: pointer; }
.prow__peek { padding: 0; }
.gcard__media:focus-visible, .prow__peek:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }

/* ================= Cursor ================= */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 200;
  width: 12px; height: 12px; border-radius: 50%;
  background: #FFFFFF; mix-blend-mode: difference;
  pointer-events: none; display: none;
}
@media (hover: hover) and (pointer: fine) {
  html.js .cursor { display: block; }
}

/* ================= Mobile ================= */
@media (max-width: 900px) {
  .card { grid-template-columns: 54% 1fr; }
  .scene-title { font-size: clamp(2.4rem, 13cqw, 5rem); }
}
@media (max-width: 760px) {
  /* the phone hero is its own composition: a taller stage, a bigger piece
     leaning past the blob, and every control within thumb reach */
  .hero { height: auto; min-height: 100svh; }
  .card { display: flex; flex-direction: column; height: auto; min-height: calc(100svh - 2 * var(--inset)); }
  .stage { height: 44svh; min-height: 330px; flex: none; }
  .scene-title { left: 6.5%; top: 12%; font-size: clamp(2.3rem, 14.5cqw, 3.8rem); }
  #prod1 { width: min(96cqw, 540px); }
  #prod2 { width: min(76cqw, 410px); }
  #prod3 { width: min(77cqw, 410px); }
  .product__img { top: 61%; max-height: 58cqh; }
  #bean2 { display: none; }
  .mark { top: 12px; left: 12px; }
  .smiley { top: 12px; right: 14px; width: 44px; height: 44px; }
  .smiley .smiley__face-svg { width: 40px; height: 40px; }
  .smiley .sun-quiz { width: 17px; height: 17px; }
  .sunbubble { top: 15px; right: 66px; padding: 6px 11px 8px; max-width: 44vw; overflow: hidden; }
  .sunbubble__txt { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
  .panel { padding: 18px 20px 2px; }
  .logotype { font-size: 1.7rem; }
  .plist { margin-top: 12px; }
  .prow { grid-template-columns: minmax(0, 1fr) auto 62px 40px; height: 60px; gap: 10px; }
  .prow__name { font-size: 0.95rem; }
  .prow__dims { font-size: 0.76rem; }
  .prow__media { width: 62px; height: 50px; }
  .prow__add { width: 40px; height: 40px; }
  .panel__note { display: none; }
  .catdock { position: static; margin: 10px auto 0; }
  .catdock__btn { width: 48px; height: 48px; }
  .catdock__dash { background: var(--hair-strong); }
  .pill { position: static; transform: none; margin: 10px auto 0; align-self: center; }
  .pill__btn { width: 44px; height: 44px; }
  .pill__go { width: 50px; height: 50px; }
  .card { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .viewtoggle { display: none; }
  .panel--grid .plist__rows { display: block; padding-top: 0; }
  .panel--grid .prow {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 64px 40px;
    height: 68px; gap: 10px; padding: 0; border: none; border-bottom: 1px solid var(--hair);
    text-align: start;
  }
  .panel--grid .prow__media { order: 0; width: 64px; height: 54px; margin: 0; }
  .panel--grid .prow__add { margin: 0; width: 40px; height: 40px; }

  /* manifesto stacks; the crate figure becomes its own full width moment */
  .manifesto { display: block; padding-top: 90px; padding-bottom: 76px; }
  .manifesto__bean1 { right: 4%; top: 7%; }
  .manifesto__bean2 { display: none; }
  .mani-fig { max-width: 380px; margin: 40px auto 0; padding: 30px 0 26px; }
  .mani-fig__box { width: min(74%, 300px); }
  .mani-note { font-size: 1.12rem; }
  .mani-note svg { width: 38px; height: 28px; }
  .mani-note--3 { bottom: -8px; }

  /* the shop: one wide lead card, then pairs with room to stand tall */
  .collection__head { margin-bottom: 38px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 10px; }
  .gcard { border-radius: 20px; padding: 12px; }
  .gcard__media { height: 116px; margin-bottom: 10px; }
  .gcard--feature { grid-column: 1 / -1; padding: 16px; }
  .gcard--feature .gcard__media { height: 172px; margin-bottom: 12px; }
  .gcard--feature .gcard__media img { max-width: 70%; }
  .gcard--feature .gcard__media::before { left: 12%; right: 12%; height: 52%; }
  .gcard--feature .gcard__name { font-size: 1.05rem; }
  .gcard__name { font-size: 0.92rem; }
  .gcard__price { margin-top: 8px; font-size: 0.92rem; }
  .gcard__add { width: 36px; height: 36px; right: 10px; bottom: 10px; }
  .gcard__badge { font-size: 0.94rem; top: -11px; right: 10px; }
  .grid-after { font-size: 1.12rem; }

  .story { grid-template-columns: 1fr; }
  .story__figure { order: 2; margin-top: 10px; }
  .story__media { aspect-ratio: 4 / 3; }
  .story__tape { left: -4px; font-size: 1.05rem; top: 12px; }
  .story__peek { width: 30%; left: auto; right: -4%; bottom: -7%; rotate: none; transform: rotate(7deg); }
  .fact { padding-right: 40px; }
  .fact__ic { width: 26px; height: 26px; }
  .story__sig { font-size: 1.2rem; }

  .footer { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .footer__wave { margin-bottom: 38px; }
  .footer__word { font-size: clamp(2.6rem, 14.6vw, 7rem); }
  .sunspot { width: 112px; height: 112px; }
  .footer__bean { right: 34%; top: 8px; }
  .collection__bean { display: none; }
  .sunspot__hint { display: none; }
  .sunring text { font-size: 14px; }
  .dock { gap: 2px; padding: 7px; }
  .dock__link { padding: 10px 12px; font-size: 0.88rem; }
  .cart__panel { width: 100vw; border-radius: 0; }
  .pdp__card {
    grid-template-columns: 1fr;
    width: 100vw; height: 100svh; max-height: none;
    margin: 0; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .pdp__stage { min-height: 42svh; flex: none; overflow: hidden; }
  .pdp__info { padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: visible; }
  .pdp__desc { max-width: none; }
  .pdp__care { gap: 6px 16px; }
  .pdp__pair { flex-wrap: wrap; }
  .pdp__buy { padding-top: 20px; }
}
@media (max-width: 360px) {
  .catdock__dash { display: none; }
  .pill__div { margin: 0 2px; }
}

/* ================= Motion fallbacks ================= */
/* Class driven cart for the paths where gsap does not drive it inline. */
.cart.is-open .cart__panel { transform: none; }
.cart.is-open .cart__scrim { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .loader { display: none; }
  html.js .sunfly { display: none; }
  .sunring { animation: none; }
  .sunbubble, .sun-quiz, .sun-zzz { display: none; }
  * { transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}
html.no-anim .loader { display: none; }