/* Hiraya Manawari — Jenny Matiga
   One dark field like the paintings' black ground; color arrives as whole
   fields, drawings and the pink of the one action. The eye is the motif. */

:root {
  --ground: #0b0a0f;
  --ground-2: #17131f;
  --ground-3: #221c2d;
  --ink: #fff7ef;
  --ink-2: #d8cfe1;
  --ink-dark: #1a0f1f;
  --accent: #ff4fa3;
  --accent-2: #ff7dbd;

  --pink: #ff6fb5;
  --rose: #ff3d7f;
  --blue: #2f4bff;
  --sky: #5ab8ff;
  --teal: #22c3c0;
  --lav: #b8a3ff;
  --violet: #7b5cff;
  --yellow: #ffd23f;
  --orange: #ff9442;
  --mint: #a6f0c6;
  --green: #3fd17a;

  --display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xl: clamp(2.5rem, 7.2vw, 7.5rem);
  --t-l: clamp(2.1rem, 4.6vw, 4.8rem);
  --t-m: clamp(1.5rem, 2.4vw, 2.4rem);
  --t-body: clamp(1.0625rem, 0.35vw + 0.98rem, 1.1875rem);
  --t-s: 0.9375rem;

  --m: clamp(16px, 4vw, 48px);
  --content: 1000px;
  --bar: 68px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
  scroll-padding-top: var(--bar);
}
body {
  margin: 0;
  background: var(--ground);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink-dark); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lede { font-size: clamp(1.25rem, 1.1vw + 0.95rem, 1.6rem); line-height: 1.4; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 12px 18px; border-radius: 999px;
  background: var(--yellow); color: var(--ink-dark); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip:focus { transform: none; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--accent); color: var(--ink-dark);
  font: 650 1rem/1 var(--text);
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn--small { min-height: 40px; padding: 0 18px; font-size: var(--t-s); }
.btn--ghost { background: var(--ground-3); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-2); }
  .btn--ghost:hover { background: #2e2640; }
}
.link {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--accent);
  transition: text-decoration-color .2s var(--ease-out);
}
.link:hover { text-decoration-color: var(--yellow); }

/* ---------- the bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--bar);
  display: flex; align-items: center; gap: 20px;
  padding: 0 var(--m);
  background: var(--ground);
}
.bar-logo { display: block; border-radius: 10px; }
.bar-logo img { height: 46px; width: auto; mix-blend-mode: screen; }
.bar-nav { margin-left: auto; display: flex; gap: 2px; }
.bar-nav a {
  padding: 10px 14px; border-radius: 999px;
  text-decoration: none; font-weight: 550; font-size: var(--t-s);
  transition: background-color .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .bar-nav a:hover { background: var(--ground-3); } }
.bar .btn { flex: none; }

/* the sound switch: four little bars that dance while the music plays */
.sound {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 15px 0 13px; border: 0; border-radius: 999px;
  background: var(--ground-3); color: var(--ink);
  font: 600 var(--t-s)/1 var(--text); cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.sound:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .sound:hover { background: #2e2640; } }
.sound-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.sound-bars i { display: block; width: 3px; height: 16px; border-radius: 2px; background: currentColor; transform: scaleY(.25); transform-origin: 50% 100%; transition: transform .25s var(--ease-out), background-color .2s; }
.sound[aria-pressed="true"] .sound-bars i { background: var(--accent); animation: eq .8s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-duration: .62s; animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-duration: .95s; animation-delay: -.5s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(4) { animation-duration: .7s; animation-delay: -.15s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* ---------- the world ---------- */
.world {
  position: relative;
  transition: transform .4s var(--ease-drawer), opacity .4s var(--ease-drawer);
}
main { display: flex; flex-direction: column; position: relative; }

/* sparkle stars in the night behind everything, shining, shrinking and growing back */
.sparkles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sparkles i {
  position: absolute; width: var(--z); height: var(--z); margin: calc(var(--z) / -2) 0 0 calc(var(--z) / -2);
  background: var(--c);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px var(--c));
  animation: sparkle var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes sparkle { from { scale: .2; rotate: 0deg; opacity: .35; } to { scale: 1.15; rotate: 45deg; opacity: 1; } }
#physical { order: -1; }


/* ---------- the center ---------- */
.hub {
  position: relative;
  min-height: max(100svh, 560px);
  /* Jenny on the left; the two ways and the question stacked on the right */
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center; align-items: center;
  column-gap: clamp(10px, 5vw, 90px);
  padding: calc(var(--bar) + 10px) var(--m) 16px;
  touch-action: pan-y pinch-zoom;
}
.hub-photo { margin: 0; height: min(100svh - var(--bar) - 40px, 860px, 40vw * 1600 / 501); aspect-ratio: 501 / 1600; }
/* her photo's black backdrop melts into the page (and the vines show through behind her) */
.hub > .hub-photo { mix-blend-mode: lighten; }
.hub-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hub-ways { display: grid; justify-items: center; align-content: center; gap: clamp(14px, 4svh, 44px); }
.hub-ways > .way, .hub-ways > .hub-copy { grid-area: auto; }
.hub-copy { text-align: center; display: grid; justify-items: center; gap: 14px; }
.hub h1 { font-size: clamp(2.2rem, min(4.8vw, 7.4svh), 5.2rem); max-width: 14ch; letter-spacing: -0.025em; }
.hub-lede { max-width: 54ch; color: var(--ink); font-size: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem); }

/* the four ways out */
.way {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  text-decoration: none; color: var(--ink); background: var(--ground);
  transition: background-color .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.way--up { grid-area: up; justify-self: center; }
.way--down { grid-area: down; justify-self: center; }
.way--up { --ly: -1; }
.way--down { --ly: 1; }
.way-text { display: grid; gap: 2px; text-align: left; }
.way-title { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; }
.way-sub { font-size: .875rem; color: var(--ink-2); line-height: 1.2; }

.way-eye {
  position: relative; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  transition: transform .18s var(--ease-out);
  animation: way-blink 6s infinite;
}
.way--down .way-eye { animation-delay: -2s; }
.way-pupil {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-dark);
  border: 5px solid var(--accent);
  transform: translate(calc(var(--lx, 0) * 7px), calc(var(--ly, 0) * 7px));
  transition: transform .3s var(--ease-out);
}
@keyframes way-blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.12); } }
.way:active .way-eye { transform: scale(.92); animation: none; }
@media (hover: hover) and (pointer: fine) {
  .way:hover { background: var(--ground-3); }
  .way:hover .way-pupil { transform: translate(calc(var(--lx, 0) * 10px), calc(var(--ly, 0) * 10px)) scale(1.12); }
}

/* the trail signs: wooden arrows on posts, like a hiking path, pointing up and down.
   Each plank is an arrow with a tall head, and the eye keeps watch from inside it. */
.sign { padding: 0; background: none; display: block; text-decoration: none; }
.sign-sway {
  display: grid; justify-items: center;
  transform-origin: 50% 100%;
  animation: wind-sign 4s ease-in-out var(--wd, 0s) infinite alternate;
}
.sign--down .sign-sway { --wd: -1.6s; }
@keyframes wind-sign { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.sign-board {
  --head: 66px;
  position: relative; display: grid; justify-items: center; align-content: start;
  width: 232px; padding: 18px 20px 10px;
  background: #dca06a; color: #3b1d0c; text-align: center;
  clip-path: polygon(50% 0, 100% var(--head), 85% var(--head), 85% 100%, 15% 100%, 15% var(--head), 0 var(--head));
  transition: transform .25s var(--ease-out);
}
.sign--down .sign-board {
  padding: 10px 20px 18px;
  clip-path: polygon(15% 0, 85% 0, 85% calc(100% - var(--head)), 100% calc(100% - var(--head)), 50% 100%, 0 calc(100% - var(--head)), 15% calc(100% - var(--head)));
}
.sign-grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sign .way-eye { width: 40px; height: 40px; margin-bottom: 12px; }
.sign .way-eye .way-pupil { width: 19px; height: 19px; }
.sign--down .way-eye { order: 3; margin: 12px 0 0; }
.sign .way-title { position: relative; color: #3b1d0c; font-size: 1.02rem; white-space: nowrap; }
.sign .way-sub { position: relative; color: #4a2410; font-weight: 700; font-size: .82rem; }
/* a thick white outline behind every letter, so the words stand out on the wood */
.sign .way-title { text-shadow: 3.2px 0.0px 0 #fff, 3.0px 1.2px 0 #fff, 2.3px 2.3px 0 #fff, 1.2px 3.0px 0 #fff, 0.0px 3.2px 0 #fff, -1.2px 3.0px 0 #fff, -2.3px 2.3px 0 #fff, -3.0px 1.2px 0 #fff, -3.2px 0.0px 0 #fff, -3.0px -1.2px 0 #fff, -2.3px -2.3px 0 #fff, -1.2px -3.0px 0 #fff, -0.0px -3.2px 0 #fff, 1.2px -3.0px 0 #fff, 2.3px -2.3px 0 #fff, 3.0px -1.2px 0 #fff, 1.6px 0.0px 0 #fff, 1.5px 0.6px 0 #fff, 1.1px 1.1px 0 #fff, 0.6px 1.5px 0 #fff, 0.0px 1.6px 0 #fff, -0.6px 1.5px 0 #fff, -1.1px 1.1px 0 #fff, -1.5px 0.6px 0 #fff, -1.6px 0.0px 0 #fff, -1.5px -0.6px 0 #fff, -1.1px -1.1px 0 #fff, -0.6px -1.5px 0 #fff, -0.0px -1.6px 0 #fff, 0.6px -1.5px 0 #fff, 1.1px -1.1px 0 #fff, 1.5px -0.6px 0 #fff; }
.sign .way-sub { text-shadow: 2.6px 0.0px 0 #fff, 2.4px 1.0px 0 #fff, 1.8px 1.8px 0 #fff, 1.0px 2.4px 0 #fff, 0.0px 2.6px 0 #fff, -1.0px 2.4px 0 #fff, -1.8px 1.8px 0 #fff, -2.4px 1.0px 0 #fff, -2.6px 0.0px 0 #fff, -2.4px -1.0px 0 #fff, -1.8px -1.8px 0 #fff, -1.0px -2.4px 0 #fff, -0.0px -2.6px 0 #fff, 1.0px -2.4px 0 #fff, 1.8px -1.8px 0 #fff, 2.4px -1.0px 0 #fff, 1.3px 0.0px 0 #fff, 1.2px 0.5px 0 #fff, 0.9px 0.9px 0 #fff, 0.5px 1.2px 0 #fff, 0.0px 1.3px 0 #fff, -0.5px 1.2px 0 #fff, -0.9px 0.9px 0 #fff, -1.2px 0.5px 0 #fff, -1.3px 0.0px 0 #fff, -1.2px -0.5px 0 #fff, -0.9px -0.9px 0 #fff, -0.5px -1.2px 0 #fff, -0.0px -1.3px 0 #fff, 0.5px -1.2px 0 #fff, 0.9px -0.9px 0 #fff, 1.2px -0.5px 0 #fff; }
.sign-post { width: 18px; height: 30px; background: #a8693a; margin-top: -2px; }
/* the down arrow stands on two stakes, its point aimed down into the grass */
.sign--down .sign-post { display: none; }
.sign--down .sign-sway { position: relative; isolation: isolate; }
.sign--down .sign-sway::before, .sign--down .sign-sway::after {
  content: ""; position: absolute; z-index: -1;
  top: 30%; bottom: 14px; width: 16px; background: #a8693a;
}
.sign--down .sign-sway::before { left: calc(15% + 6px); }
.sign--down .sign-sway::after { right: calc(15% + 6px); }
/* a lush patch of grass the sign is planted in; it spills past the sign's box so it costs no room */
.sign-grass { width: 170px; height: 46px; margin: -30px 0 -16px; overflow: visible; }
.sign--down .sign-grass { margin: -40px 0 -22px; }
@media (hover: hover) and (pointer: fine) {
  .sign:hover { background: none; }
  .sign:hover .sign-sway { animation: sign-wiggle .55s var(--ease-out); }
}
@keyframes sign-wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.sign:active .sign-board { transform: scale(.97); }
.sign:focus-visible { outline: none; }
.sign:focus-visible .sign-board { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* the bouquet */
.bloom {
  grid-area: bloom;
  position: relative;
  width: var(--bloom); aspect-ratio: 1;
  justify-self: center;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none; user-select: none;
  border-radius: 50%;
}
.bloom.is-dragging { cursor: grabbing; }
.bloom:focus-visible { outline-offset: -6px; }
.bloom-stage { position: absolute; inset: 0; }
.bloom-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bloom-rings--back { z-index: 999; }
.bloom-rings--front { z-index: 1001; }
.sprite {
  position: absolute; left: 50%; top: 50%;
  will-change: transform, opacity;
  pointer-events: none;
}
.sprite svg, .me svg { display: block; width: 100%; height: 100%; overflow: visible; }
.me {
  position: absolute; left: 50%; top: 52%;
  width: 46%; aspect-ratio: 240 / 320;
  translate: -50% -50%;
  z-index: 1000;
  pointer-events: none;
}
.me .me-happy { opacity: 0; }
.me .me-open, .me .me-happy { transition: opacity .12s linear; }
.bloom.is-giggling .me-open { opacity: 0; }
.bloom.is-giggling .me-happy { opacity: 1; }
.me-curls path { transform-box: fill-box; transform-origin: 50% 100%; animation: curl 3.4s ease-in-out infinite alternate; }
.me-curls path:nth-child(2) { animation-delay: -1.2s; }
.me-curls path:nth-child(3) { animation-delay: -2.1s; }
.me-curls path:nth-child(4) { animation-delay: -.6s; }
@keyframes curl { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

.bloom-hint {
  position: absolute; left: 50%; bottom: -4%; z-index: 1100;
  translate: -50% 0;
  padding: 6px 14px; border-radius: 999px;
  background: var(--ground-3); color: var(--ink);
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s var(--ease-out), translate .4s var(--ease-out);
}
.bloom-hint.is-gone { opacity: 0; translate: -50% 8px; }

/* the painted tendrils in the black around the center */
.hub-vines { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hub-vines svg { display: block; }
.hub-vines .pop { opacity: 0; transform: scale(.3) rotate(-18deg); transition: transform .9s var(--ease-spring), opacity .35s var(--ease-out); }
.hub-vines .is-in .pop { opacity: 1; transform: none; }
.hub > :not(.hub-vines) { position: relative; z-index: 1; }

/* hub entrance, after the eye opens */
.js .hub > :not(.hub-vines) { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.js:not(.is-ready) .hub > :not(.hub-vines) { opacity: 0; transform: translateY(18px); }
.js .hub > .hub-ways { transition-delay: .2s; }

/* ---------- eyes, blinking ---------- */
.blink { animation: blink var(--bl, 7s) infinite var(--bd, 0s); }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }

/* ---------- the two sides ---------- */
/* wide margins are the garden's own ground; the vines sit above the content
   and wander onto pictures, but garden.js steers them around every line of text */
.side { position: relative; padding-inline: clamp(54px, 11vw, 220px); overflow-x: clip; }
.garden { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.garden svg { display: block; overflow: visible; }
.stack {
  position: relative; z-index: 1;
  max-width: var(--content); margin-inline: auto;
  display: flex; flex-direction: column;
  gap: clamp(170px, 17vw, 250px);
}
.side--up .stack { flex-direction: column-reverse; padding-block: 150px 150px; }
.side--down .stack { padding-block: 150px 40px; }

/* garden nodes grow in and never un-grow */
.garden .pop { opacity: 0; transform: scale(.3) rotate(-18deg); transition: transform 1s var(--ease-spring) var(--pd, 0ms), opacity .4s var(--ease-out) var(--pd, 0ms); }
.garden .is-in .pop { opacity: 1; transform: none; }
.garden .no-anim .pop { transition: none; }
/* one wind: every leaf, curl and character sways, the delay rolling across the page */
.garden .sway, .hub-vines .sway { animation: wind-bloom 4s ease-in-out var(--wd, 0s) infinite alternate; }
.garden .leaf .sway, .hub-vines .hv-leaf .sway { animation-name: wind-leaf; animation-duration: 3.4s; }
.garden .curl .sway { animation-name: wind-curl; }
@keyframes wind-bloom { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }
@keyframes wind-leaf { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
/* the branch characters dance a little, out of step with each other */
.garden .bloom.merry .sway { animation: merry 1.7s ease-in-out var(--wd, 0s) infinite alternate; }
/* the dance only ever rocks on the stalk's root, so no flower ever lifts off its stem */
@keyframes merry { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.garden .bloom.merry .head { animation: squish .85s ease-in-out var(--wd, 0s) infinite alternate; }
@keyframes squish { from { transform: scale(1); } to { transform: scale(1.06, .95); } }
.garden .bloom .head.is-giggle { animation: giggle .6s var(--ease-out); }
/* garden.js measures text where it will finally rest */
.measuring [data-reveal], .measuring [data-reveal] * { transform: none !important; transition: none !important; }
@keyframes wind-curl { from { transform: rotate(-12deg); } to { transform: rotate(10deg); } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* every character answers a tap: a giggle, a blink, a little burst of dots */
.is-giggle { animation: giggle .6s var(--ease-out); }
@keyframes giggle {
  0% { transform: scale(1); }
  25% { transform: scale(1.14, .88) rotate(-6deg); }
  55% { transform: scale(.94, 1.08) rotate(5deg); }
  100% { transform: scale(1); }
}
.blink.blink-now { animation: blink-now .4s var(--ease-out); }
@keyframes blink-now { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
.garden .bloom .push { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.step-art { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.spark { position: fixed; z-index: 80; border-radius: 50%; pointer-events: none; }

/* section heads: one centered column — title, line, then the box and its button */
.side-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "lede" "box" "ctrl";
  justify-items: center;
  text-align: center;
  row-gap: 22px;
}
.side-head-text { display: contents; }
.side-head h2 { grid-area: title; font-size: var(--t-xl); letter-spacing: -0.035em; line-height: .9; margin-bottom: 18px; }
.side-head .lede { grid-area: lede; }
.box-controls { grid-area: ctrl; }
.box-stage { grid-area: box; width: min(100%, 620px); }
.side-head--down { grid-template-areas: "title" "lede"; }

/* the box */
.box-stage {
  position: relative;
  min-height: 440px;
  perspective: 1400px;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none; user-select: none;
}
.box-stage.is-dragging { cursor: grabbing; }
.box { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.bf { position: absolute; transform-style: preserve-3d; }
.face-out, .face-in { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.face-in { transform: rotateY(180deg); background: #efe6da; }
.face-out::after {
  content: ""; position: absolute; inset: 0;
  border: 2px dashed rgba(26, 15, 31, .55);
  opacity: var(--flat, 0);
}
.face-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.f-left { right: 100%; top: 0; transform-origin: right center; }
.f-right { left: 100%; top: 0; transform-origin: left center; }
.f-back { left: 100%; top: 0; transform-origin: left center; }
.glue { left: 100%; top: 0; transform-origin: left center; }
.glue .face-out, .glue .face-in { clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%); }
.f-top { bottom: 100%; left: 0; transform-origin: center bottom; }
.f-bottom { top: 100%; left: 0; transform-origin: center top; }
.tuck--t { bottom: 100%; left: 0; transform-origin: center bottom; }
.tuck--t .face-out, .tuck--t .face-in { border-radius: 26px 26px 0 0; }
.tuck--b { top: 100%; left: 0; transform-origin: center top; }
.tuck--b .face-out, .tuck--b .face-in { border-radius: 0 0 26px 26px; }
.dust--t { bottom: 100%; left: 0; transform-origin: center bottom; }
.dust--t .face-out, .dust--t .face-in { border-radius: 18px 18px 0 0; clip-path: inset(0 6px 0 0 round 18px 18px 0 0); }
.dust--b { top: 100%; left: 0; transform-origin: center top; }
.dust--b .face-out, .dust--b .face-in { border-radius: 0 0 18px 18px; clip-path: inset(0 6px 0 0 round 0 0 18px 18px); }
.face-art { position: absolute; inset: 12%; display: grid; place-items: center; }
.face-art svg { width: 100%; height: 100%; overflow: visible; }
.face-art--big { inset: 10% 6% 26%; }
.face-art--mid { inset: 6% 18% 48%; }
.face-art--left { inset: 10% auto 10% 5%; aspect-ratio: 1; }
.face-word {
  position: absolute; left: 10px; right: 10px; bottom: 14px;
  font: 600 17px/1 var(--display); color: var(--ink-dark); text-align: center; letter-spacing: -0.01em;
}
.face-word--right { left: 44%; right: 8px; top: 50%; bottom: auto; translate: 0 -50%; text-align: left; line-height: 1.05; }
.face-small { position: absolute; inset: auto 0 12px; text-align: center; font: 600 11px/1 var(--text); color: var(--ink-dark); }
.face-logo { position: absolute; left: 50%; top: 50%; width: 80%; translate: -50% -50%; mix-blend-mode: multiply; filter: invert(1); }
.face-label { position: absolute; left: 12px; right: 12px; bottom: 12px; color: var(--ink-dark); font: 600 10px/1.35 var(--text); }
.face-label p:first-child { font: 600 14px/1.1 var(--display); margin-bottom: 4px; }
.barcode { display: flex; gap: 2px; height: 28px; margin-top: 8px; background: #fff; padding: 4px 6px; width: max-content; }
.barcode i { display: block; background: var(--ink-dark); }
.face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hang { bottom: 100%; left: 0; transform-origin: center bottom; }
.hang .face-in { background: none; }

/* rows you swipe through (swipe.js): one in front, its neighbors peeking in */
.swipe { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; }
.swipe-track {
  display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* edge to edge across the page: a neighbor is only ever cut by the screen, never mid-page */
  margin-inline: calc(50% - 50vw); padding-inline: max(6vw, calc(50vw - var(--slide, 400px) / 2));
}
.swipe-track::-webkit-scrollbar { display: none; }
.swipe-slide {
  flex: 0 0 100%; display: grid; scroll-snap-align: center;
  opacity: .35; scale: .78; transition: opacity .4s var(--ease-out), scale .4s var(--ease-out);
}
.swipe-slide:not(.is-active) { cursor: pointer; }
.swipe-slide:not(.is-active) > * { pointer-events: none; }
.swipe-slide.is-active { opacity: 1; scale: 1; }
.swipe-nav { display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 6px; }
.swipe-arrow {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--ground-3); color: var(--ink); cursor: pointer;
  transition: opacity .2s var(--ease-out), scale .16s var(--ease-out);
}
.swipe-arrow svg { width: 22px; height: 22px; }
.swipe-arrow:active { scale: .92; }
.swipe-arrow:disabled { opacity: .3; cursor: default; }
.swipe-dots { display: flex; }
.swipe-dot { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.swipe-dot::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ink-2); opacity: .35; transition: width .25s var(--ease-out), opacity .25s, background-color .25s; }
.swipe-dot[aria-current="true"]::before { width: 22px; opacity: 1; background: var(--pink); }
.swipe-dot[aria-current="true"] { width: 34px; }

/* the packaging rows: big boxes you can turn */
.work .work-media--packs { width: min(100%, 680px); aspect-ratio: 1; padding: 0; display: block; }
/* long, low boxes (eyeglasses) need less height */
.work .work-media--long { aspect-ratio: 4 / 3; }
.box-stage.pack-stage { grid-area: auto; width: 100%; min-height: 0; touch-action: pan-x pan-y pinch-zoom; }
.packs .stage-hint { white-space: nowrap; color: var(--ink); }
.packs.is-used .stage-hint { opacity: 0; }

/* the iPads: five little apps in a row */
.case .case-media--swipe { width: 100%; min-height: 0; padding: 0; display: block; }
/* extra room above and below, so a floating device never gets its top cut off */
.case-media--swipe .swipe-track { --slide: 560px; padding-block: 64px; margin-block: -36px; }
.case-media--phones .swipe-track { --slide: 340px; }
.case-media--desks .swipe-track { --slide: 660px; }
.case-media--swipe .swipe-slide { place-items: center; align-content: center; }
.slide-cap { margin-top: 22px; display: grid; gap: 4px; text-align: center; color: var(--ink-2); font-size: .9375rem; }
.slide-cap b { color: var(--ink); font-size: 1.0625rem; }
/* placeholder phone screen, until a real project goes in */
.phone-soon { justify-content: center; align-items: center; gap: 12px; padding: 22px; text-align: center; }
.phone-soon img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; }
.soon-title { font: 600 1.375rem/1.1 var(--display); }
.soon-sub { color: #6b6478; font-size: .875rem; }
@media (max-width: 720px) {
  .work .work-media--packs { aspect-ratio: 1 / 1.42; }
  .work .work-media--long { aspect-ratio: 1 / 1.05; }
  .case-media--swipe .swipe-track { padding-block: 48px; margin-block: -28px; }
}

/* work (packaging) */
/* each project: the picture, then its centered title beneath */
.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 26px;
}
.work .work-media { width: min(100%, 680px); }
.work--wide .work-media { width: min(100%, 940px); aspect-ratio: 21 / 8; }
.work-media {
  --paper: var(--field);
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  background: transparent;
  color: var(--ink-dark);
  display: grid; place-items: center;
  padding: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 56px) clamp(52px, 6vw, 72px);
}
.work-media figcaption {
  position: absolute; left: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); bottom: clamp(14px, 1.6vw, 20px);
  font-size: .875rem; font-weight: 550; line-height: 1.3;
}
.dieline, .desk-dieline { width: 100%; height: 100%; }
.dl { display: block; width: 100%; height: 100%; overflow: visible; }
.dl-cut path {
  fill: var(--paper); fill-opacity: 0;
  stroke: var(--ink-dark); stroke-width: 1.7; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-in-out) calc(var(--i, 0) * .22s), fill-opacity .7s var(--ease-out) 1.1s;
}
.dl-cut .dl-hole { fill: var(--field); }
/* on the black page the dieline is the colored shape itself: its outline draws in, then fills */
.work-media .dl-cut path { stroke: var(--field); stroke-width: 2.2; }
.work-media .dl-cut .dl-hole { fill: var(--ground); }
.dl-erase { fill: none; stroke: var(--paper); stroke-width: 3.4; opacity: 0; transition: opacity .5s 1.2s; }
.dl-fold { fill: none; stroke: var(--ink-dark); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0; transition: opacity .6s var(--ease-out) 1.4s; }
.is-in .dl-cut path, .no-js .dl-cut path, .desk .dl-cut path { stroke-dashoffset: 0; fill-opacity: 1; }
.is-in .dl-erase, .desk .dl-erase { opacity: 1; }
.is-in .dl-fold, .desk .dl-fold { opacity: .85; }

.work-text { display: grid; gap: 10px; justify-items: center; text-align: center; }
.work-text h3, .case-text h3, .process h3 { font-size: var(--t-m); line-height: 1.02; }
.work-meta { color: var(--ink-2); font-size: var(--t-s); }
.work-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.work-cols > div { display: grid; gap: 14px; }

.eye-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.eye-list li { position: relative; padding-left: 36px; }
.eye-list li::before, .cv-list li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
}
.eye-list li::after, .cv-list li::after {
  content: ""; position: absolute; left: 6px; top: calc(.15em + 6px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-dark); border: 3px solid var(--accent);
}

/* process: a row of characters strung along a polka-dot stem */
.process { display: grid; gap: 40px; justify-items: center; text-align: center; }
.process-list { width: 100%; }
.process-list {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px;
}
.process-list::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: clamp(44px, 5.4vw, 62px);
  border-top: 10px dotted var(--pink);
}
.process-list li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; }
.process-list b { font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 1.6vw, 1.6rem); line-height: 1.1; margin-top: 8px; }
.process-list span:not(.step-art) { color: var(--ink-2); font-size: var(--t-s); line-height: 1.3; }
.step-art { width: clamp(88px, 10.8vw, 124px); aspect-ratio: 1; display: block; background: var(--ground); border-radius: 50%; }
.step-art svg { width: 100%; height: 100%; overflow: visible; }
.process-list li:nth-child(odd) .step-art svg { animation: bob 3.2s ease-in-out infinite alternate; }
.process-list li:nth-child(even) .step-art svg { animation: sway 4s ease-in-out infinite alternate; }

.case-line { font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.375rem); line-height: 1.4; max-width: 34ch; margin-inline: auto; }
.stage-hint {
  position: absolute; left: 50%; bottom: 6px; translate: -50% 0;
  padding: 6px 14px; border-radius: 999px; background: var(--ground-3);
  font-size: .875rem; font-weight: 600; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.box-stage.is-dragging .stage-hint, .box-stage.is-flat .stage-hint { opacity: 0; }

/* case studies */
/* each case study: centered words, then its mockup */
.case { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 30px; }
.case-text { display: grid; gap: 10px; justify-items: center; text-align: center; }
.case .case-media { width: min(100%, 680px); }
.case-text b { font-weight: 700; }
.case-media {
  background: transparent;
  min-height: clamp(420px, 46vw, 640px);
  display: grid; place-items: center;
  padding: clamp(24px, 4vw, 56px);
}

/* the devices float in the garden, each at its own pace, and hold still the moment
   the cursor (or a finger, or keyboard focus) is on them so they're easy to use */
/* three smooth waves at different speeds (up and down, side to side, a tilt) never
   line up, so the drift never stops and never repeats exactly; each wave eases like a sine */
.phone, .monitor, .tablet {
  --sine: cubic-bezier(0.37, 0, 0.63, 1);
  animation:
    float-y 3.4s var(--sine) infinite alternate,
    float-x 4.6s var(--sine) infinite alternate,
    float-r 3.9s var(--sine) infinite alternate;
}
.case:nth-of-type(odd) .phone { animation-delay: -1.2s, -3.1s, -.6s; }
.monitor { animation-duration: 3.9s, 5.2s, 4.4s; animation-delay: -2.2s, -.9s, -2.8s; }
.tablet { animation-duration: 3.6s, 4.9s, 4.2s; animation-delay: -.4s, -2.4s, -1.7s; }
@keyframes float-y { from { translate: 0 8px; } to { translate: 0 -34px; } }
@keyframes float-x { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes float-r { from { rotate: -3deg; } to { rotate: 3deg; } }
.phone:hover, .monitor:hover, .tablet:hover, .phone:focus-within, .monitor:focus-within, .tablet:focus-within, .phone:active, .monitor:active, .tablet:active { animation-play-state: paused; }

/* phone fragments (a real interface: its own borders and controls) */
.phone {
  width: min(300px, 86%);
  aspect-ratio: 9 / 18.5;
  background: var(--field, #2a2433);
  border-radius: 46px;
  padding: 10px;
}
.phone-screen {
  height: 100%; border-radius: 37px; overflow: hidden;
  background: #fffaf4; color: var(--ink-dark);
  display: flex; flex-direction: column;
  font-size: 14px; line-height: 1.35;
}
.shop-top { display: flex; justify-content: space-between; align-items: center; padding: 26px 18px 10px; font-weight: 700; font-size: 14px; }
.shop-wall {
  --wall: 1;
  position: relative; flex: none;
  aspect-ratio: 1 / .92;
  background: #f1e2d6;
  overflow: hidden;
  container-type: inline-size;
}
.shop-wall::after { content: ""; position: absolute; inset: auto 0 0; height: 8cqw; background: #d8b48f; }
.shop-art {
  position: absolute; left: 50%; bottom: calc(8cqw + 34cqw);
  width: 40cqw; aspect-ratio: 4 / 3;
  translate: -50% 0;
  transform: scale(var(--wall));
  transform-origin: 50% calc(100% + 34cqw);
  transition: transform .18s var(--ease-out);
  background: #111;
  padding: 1cqw;
}
.shop-art img { width: 100%; height: 100%; object-fit: cover; }
.shop-sofa {
  position: absolute; left: 50%; bottom: 8cqw; z-index: 1;
  width: 70cqw; height: 24cqw;
  translate: -50% 0;
  transform: scale(var(--wall));
  transform-origin: 50% 100%;
  transition: transform .18s var(--ease-out);
  background: var(--blue);
  border-radius: 7cqw 7cqw 2cqw 2cqw;
}
.shop-sofa::before, .shop-sofa::after {
  content: ""; position: absolute; bottom: 0; width: 11cqw; height: 15cqw;
  background: #2238d6; border-radius: 4cqw 4cqw 1.5cqw 1.5cqw;
}
.shop-sofa::before { left: -3cqw; }
.shop-sofa::after { right: -3cqw; }
.shop-info { padding: 14px 18px 18px; display: grid; gap: 4px; }
.shop-title { font: 600 19px/1.1 var(--display); }
.shop-sub { color: #6b5a6e; font-size: 13px; }
.shop-range { margin-top: 10px; font-size: 13px; font-weight: 600; }
.shop-range output { color: #c2185b; }
.shop-info input[type="range"] { width: 100%; accent-color: #c2185b; margin: 4px 0 8px; min-height: 28px; }
.shop-cta {
  min-height: 44px; border: 0; border-radius: 999px;
  background: var(--ink-dark); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform .16s var(--ease-out);
}
.shop-cta:active { transform: scale(.97); }

/* the tablet: a colored frame like the phone's, held sideways, with a little process app inside */
.tablet {
  width: min(100%, 560px); aspect-ratio: 4 / 3;
  padding: 16px; border-radius: 34px;
  background: var(--field, #2a2433);
}
.tablet-screen {
  height: 100%; border-radius: 20px; overflow: hidden;
  background: #fffaf4; color: var(--ink-dark);
  display: grid; grid-template-rows: auto 1fr auto; align-items: center;
  padding: clamp(10px, 2.2vw, 18px);
}
.steps-top { font-weight: 800; font-size: clamp(.8rem, 1.4vw, 1rem); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 12px); }
.step {
  width: 100%; display: grid; justify-items: center; gap: 2px;
  padding: clamp(4px, 1vw, 10px) 4px; border: 0; border-radius: 16px;
  background: #f3e9f7; color: var(--ink-dark); cursor: pointer;
  font: 700 clamp(.72rem, 1.3vw, .95rem)/1.1 var(--display);
  transition: transform .16s var(--ease-out), background-color .2s;
}
.step .step-art { width: clamp(40px, 7vw, 72px); background: transparent; }
.step[aria-pressed="true"] { background: var(--yellow); }
.step:active { transform: scale(.96); }
.step:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .step:not([aria-pressed="true"]):hover { background: #ffe3f0; } }
.steps li:nth-child(odd) .step-art svg { animation: bob 3.2s ease-in-out infinite alternate; }
.steps li:nth-child(even) .step-art svg { animation: sway 4s ease-in-out infinite alternate; }
.steps-note { min-height: 2.6em; display: grid; place-items: center; font-weight: 600; font-size: clamp(.78rem, 1.4vw, 1rem); line-height: 1.3; text-align: center; }
/* the other apps: a painting viewer, a mood check-in, a color picker, plant care */
.app-big { display: grid; place-items: center; min-height: 0; height: 100%; }
.app-big svg { height: 100%; max-height: 100%; width: auto; max-width: 100%; overflow: visible; }
.app-row { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(6px, 1.4vw, 12px); }
.app-row button {
  width: clamp(44px, 7vw, 64px); aspect-ratio: 1; display: grid; place-items: center; padding: 4px;
  border: 0; border-radius: 50%; background: #f3e9f7; cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .2s, box-shadow .2s;
}
.app-row button:active { transform: scale(.94); }
.app-row button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.app-row button[aria-pressed="true"] { background: var(--yellow); }
.app-char { display: block; width: 100%; height: 100%; }
.app-char svg { width: 100%; height: 100%; overflow: visible; }
.app-row.swatches { flex-wrap: nowrap; }
.app-row.swatches button { width: clamp(30px, 5.6vw, 56px); background: var(--c); }
.app-row.swatches button[aria-pressed="true"] { background: var(--c); box-shadow: 0 0 0 3px #fffaf4, 0 0 0 6px var(--ink-dark); }
.app-gallery { grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.gal-big { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 14px; display: block; }
.gal-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gal-thumbs button { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; opacity: .55; transition: opacity .2s, transform .16s var(--ease-out); }
.gal-thumbs button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--yellow); }
.gal-thumbs button:active { transform: scale(.96); }
.gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-mood, .app-color { grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px; }
.plants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 18px); align-items: end; }
.plant { display: grid; justify-items: center; gap: 8px; padding: 6px 4px 10px; border: 0; border-radius: 16px; background: #f3e9f7; cursor: pointer; transition: transform .16s var(--ease-out); }
.plant:active { transform: scale(.96); }
.plant:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.plant .app-char { width: clamp(52px, 9vw, 92px); aspect-ratio: 1; height: auto; }
.plant-bar { width: 70%; height: 10px; border-radius: 999px; background: #e2d6ee; overflow: hidden; }
.plant-bar i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--sky); border-radius: inherit; transition: width .5s var(--ease-out); }

/* on a phone the tablet stands upright, two steps to a row */
@media (max-width: 720px) {
  .tablet { width: min(100%, 300px); aspect-ratio: 3 / 4.6; padding: 12px; border-radius: 30px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { font-size: .8rem; padding: 6px 4px; }
  .step .step-art { width: 46px; }
  .steps-note { font-size: .8rem; }
}

/* the computer: a colored monitor on a stand, like the phone frames */
.monitor { width: min(100%, 620px); display: grid; justify-items: center; }
.monitor-screen {
  position: relative; width: 100%;
  padding: 12px 12px 30px;
  border-radius: 22px;
  background: var(--field, #2a2433);
}
.monitor-screen::before { /* camera */
  content: ""; position: absolute; top: 4px; left: 50%; translate: -50% 0;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(26, 15, 31, .35);
}
.monitor-screen::after { /* a little eye on the chin */
  content: ""; position: absolute; bottom: 8px; left: 50%; translate: -50% 0;
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  background: var(--ink-dark); border: 4px solid #fff;
}
.monitor-view { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; border-radius: 10px; background: #fff; }
.monitor-neck { width: 14%; height: 44px; background: color-mix(in srgb, var(--field, #2a2433) 82%, black); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.monitor-foot { width: 36%; height: 12px; border-radius: 999px 999px 8px 8px; background: var(--field, #2a2433); }
/* the app is laid out at a real desktop width, then scaled to fit the screen (main.js sets --k) */
.desk {
  position: absolute; left: 0; top: 0;
  width: 640px; min-height: calc(100% / var(--k, 1));
  transform: scale(var(--k, 1)); transform-origin: 0 0;
  background: #fff; color: var(--ink-dark);
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  font-size: 13px; line-height: 1.35; text-align: left;
}
.desk-side { background: #f4effd; padding: 18px 10px; display: grid; align-content: start; gap: 2px; }
.desk-h { font-weight: 700; padding: 0 10px 8px; color: #5d4c70; }
.desk-item { padding: 8px 10px; border-radius: 8px; }
.desk-item.is-on { background: #e2d6ff; font-weight: 700; }
.desk-main { padding: 18px; display: grid; gap: 14px; }
.desk-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.desk-title { font: 600 18px/1.1 var(--display); }
.desk-status { background: #d6f5e3; color: #11613a; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: center; }
.desk-dieline { --paper: #fff3f9; --field: #fff; aspect-ratio: 1.15; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 10px; }
.desk-table { width: 100%; border-collapse: collapse; }
.desk-table th, .desk-table td { text-align: left; padding: 6px 0; border-bottom: 1px solid #f0ebf3; vertical-align: top; }
.desk-table th { font-weight: 600; color: #6b5a6e; width: 38%; padding-right: 8px; }
.desk-note { color: #6b5a6e; font-size: 12px; }
.desk-btn { background: #c2185b; color: #fff; font-weight: 700; padding: 9px 14px; border-radius: 999px; white-space: nowrap; }

.hunt-art { position: relative; aspect-ratio: 560 / 650; overflow: hidden; flex: none; margin-top: 0; }
.hunt-art img { position: absolute; left: 0; top: 0; width: 221.8%; max-width: none; height: auto; }
.hunt-spot {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--r); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 0; padding: 0;
  background: transparent; cursor: pointer;
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.hunt-spot.is-found { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--rose); transform: scale(1.06); }
.hunt-info { padding: 14px 18px 10px; display: grid; gap: 6px; align-content: start; flex: 1; }
.hunt-count { font: 600 20px/1.1 var(--display); }
.hunt-msg { font-size: 13px; color: #4a3a4d; min-height: 3.4em; }
.hunt-slots { display: flex; gap: 8px; margin-bottom: 4px; }
.hunt-slots i {
  width: 26px; height: 26px; border-radius: 50%;
  background: #efe4f2;
  display: grid; place-items: center;
  transition: background-color .25s var(--ease-out), transform .35s var(--ease-spring);
}
.hunt-slots i.is-on { background: #fff; transform: scale(1.08); box-shadow: inset 0 0 0 7px var(--rose), inset 0 0 0 13px var(--ink-dark); }
.app-tabs { display: flex; justify-content: space-around; padding: 10px 12px 18px; background: #fff; font-size: 12px; font-weight: 700; color: #8a7a8e; }
.app-tabs .is-on { color: #c2185b; }

/* ends */
.end { display: grid; justify-items: center; text-align: center; gap: 20px; }
.end p { max-width: 46ch; }
.end-title { font-size: var(--t-l); max-width: 16ch; }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }
.end--bottom { padding-top: 40px; }
.end-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(3.2rem, 12vw, 13.5rem); line-height: .82; letter-spacing: -0.045em;
  margin-top: 24px; white-space: nowrap; max-width: none !important;
}
.end-small { color: var(--ink-2); font-size: .875rem; }
.btn-hint { margin-top: -12px; color: var(--accent); font-size: .75rem; letter-spacing: .02em; }
.end-sub { margin-top: 1.5rem; color: var(--ink-2); font-size: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem); }
.end-role { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin-top: -8px; color: var(--ink-2); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.end-places { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.end-place { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .end-role { flex-direction: column; gap: 6px; } .end-dot { display: none; } .end-name { font-size: calc(11vw - 2px); } }
.flag { width: 28px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }

/* ---------- home eye ---------- */
.home {
  position: fixed; right: var(--m); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ground-3);
  opacity: 0; transform: scale(.85); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.home.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.home:active { transform: scale(.94); }
.home .way-pupil { transform: translate(calc(var(--lx, 0) * 7px), calc(var(--ly, 0) * 7px)); }
/* "GO BACK" turning slowly around the eye */
.home { right: calc(var(--m) + 22px); bottom: max(42px, env(safe-area-inset-bottom) + 22px); }
.home-ring {
  position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; margin: -54px 0 0 -54px;
  overflow: visible; pointer-events: none; animation: home-spin 16s linear infinite;
}
.home-ring text { font: 800 10.5px var(--display); fill: var(--ink); letter-spacing: .04em; }
.home-ring .home-star { fill: var(--pink); }
@keyframes home-spin { to { rotate: 360deg; } }

/* ---------- intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ground);
  display: grid; place-items: center; align-content: center; gap: 30px;
  transition: opacity .55s var(--ease-out);
  animation: intro-failsafe .4s 3.4s forwards;
}
.no-js .intro { display: none; }
.intro-eye { width: min(52vw, 260px); overflow: visible; transition: transform .6s var(--ease-in-out); }
.intro-open { transform: scaleY(.04); opacity: 0; transition: transform .55s var(--ease-out) .15s, opacity .1s .15s; }
.intro-shut { transition: opacity .15s .15s; }
.intro.is-open .intro-open { transform: none; opacity: 1; }
.intro.is-open .intro-shut { opacity: 0; }
.intro.is-open .intro-pupil { animation: intro-look 1s var(--ease-in-out) .6s both; }
@keyframes intro-look { 0% { transform: none; } 35% { transform: translateX(-34px); } 70% { transform: translateX(30px); } 100% { transform: none; } }
.intro-logo { width: 150px; mix-blend-mode: screen; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out) .2s, transform .5s var(--ease-out) .2s; }
.intro.is-open .intro-logo { opacity: 1; transform: none; }
.intro.is-done { opacity: 0; pointer-events: none; }
.intro.is-done .intro-eye { transform: scale(1.5); }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- reveal ---------- */
.js [data-reveal] { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.js .work[data-reveal], .js .case[data-reveal], .js .side-head[data-reveal], .js .story-row[data-reveal], .js .process[data-reveal], .js .symbol[data-reveal] { opacity: 1; transform: none; }
.js .work[data-reveal] > *, .js .case[data-reveal] > *, .js .story-row[data-reveal] > *, .js .symbol[data-reveal] > *,
.js .side-head[data-reveal] .side-head-text > *, .js .side-head[data-reveal] > :not(.side-head-text), .js .process[data-reveal] > *, .js .process[data-reveal] li {
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
.js .work[data-reveal]:not(.is-in) > *, .js .case[data-reveal]:not(.is-in) > *, .js .story-row[data-reveal]:not(.is-in) > *, .js .symbol[data-reveal]:not(.is-in) > *,
.js .side-head[data-reveal]:not(.is-in) .side-head-text > *, .js .side-head[data-reveal]:not(.is-in) > :not(.side-head-text), .js .process[data-reveal]:not(.is-in) > *, .js .process[data-reveal]:not(.is-in) li {
  opacity: 0; transform: translateY(26px);
}
.js .work-text, .js .case-text { transition-delay: .08s; }
.js .work-media, .js .case-media, .js .story-row > figure, .js .symbol-art { transition-delay: .16s !important; }
.js .side-head-text > :nth-child(2) { transition-delay: .08s; }
.js .side-head-text > :nth-child(3) { transition-delay: .14s; }
.js .side-head-text > :nth-child(4) { transition-delay: .2s; }
.js .side-head .box-stage { transition-delay: .2s; }
.js .process li:nth-child(2) { transition-delay: .07s; }
.js .process li:nth-child(3) { transition-delay: .14s; }
.js .process li:nth-child(4) { transition-delay: .21s; }
.js .process li:nth-child(5) { transition-delay: .28s; }
.js .process li:nth-child(6) { transition-delay: .35s; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .box-stage { min-height: 400px; }
  .process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }
  .process-list::before { display: none; }
  .work--wide .work-media { aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  :root { --bar: 60px; }
  .bar-nav { display: none; }
  .sound { margin-left: auto; padding: 0 12px; }
  .sound-label { display: none; }
  .bar-logo img { height: 40px; }
  .hub { padding-top: calc(var(--bar) + 4px); padding-inline: 8px; column-gap: 6px; }
  .hub-photo { height: min(100svh - var(--bar) - 40px, 40vw * 1600 / 501); }
  .hub h1 { font-size: clamp(1.6rem, 7.6vw, 3rem); max-width: 7ch; }
  /* smaller signs, so both sides fit on a phone */
  .hub .sign-board { --head: 44px; width: min(170px, 48vw); padding: 12px 10px 8px; }
  .hub .sign--down .sign-board { padding: 8px 10px 12px; }
  .hub .sign .way-eye { width: 30px; height: 30px; margin-bottom: 8px; }
  .hub .sign--down .way-eye { margin: 8px 0 0; }
  .hub .sign .way-eye .way-pupil { width: 14px; height: 14px; }
  .hub .sign .way-title { font-size: .85rem; }
  .hub .sign .way-sub { font-size: .7rem; }
  .hub .sign-grass { width: 130px; height: 36px; margin: -24px 0 -12px; }
  .hub-lede { font-size: 1.0625rem; }
  .way-title { font-size: 1.125rem; }

  .side--up .stack { padding-block: 110px 120px; }
  .side--down .stack { padding-block: 110px 32px; }
  .stack { gap: 210px; }
  .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .case-media { min-height: 0; padding: 32px 16px; }
  .home { width: 54px; height: 54px; }
  .home-ring { width: 98px; height: 98px; margin: -49px 0 0 -49px; }
}

/* ---------- browser surfaces & small states ---------- */
html { scrollbar-color: #3a3049 var(--ground); accent-color: var(--accent); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: #3a3049; border-radius: 999px; border: 3px solid var(--ground); }
.ui-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shop-cta.is-sent { background: #11613a; }
.home { visibility: hidden; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s; }
.home.is-shown { visibility: visible; transition-delay: 0s; }
.app-tabs { color: #6b5a6e; }
.hunt-spot.is-found { box-shadow: none; border: 4px solid #fff; outline: 4px solid var(--rose); }
.hunt-slots i.is-on { box-shadow: none; background: var(--ink-dark); border: 7px solid var(--rose); }
.end-name, .show-num { letter-spacing: -0.04em; }

/* ---------- the watering can cursor ---------- */
.can-on, .can-on * { cursor: none !important; }
.can {
  position: fixed; left: 0; top: 0; z-index: 95;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s linear;
  will-change: transform;
}
.can.is-shown { opacity: 1; }
.can svg { display: block; overflow: visible; }
.can-tilt { transition: transform .22s var(--ease-out); }
.can.is-over .can-tilt { transform: scale(1.12) rotate(-6deg); }
.can.is-pouring .can-tilt { transform: rotate(-34deg); transition-duration: .16s; }
.can--tap { opacity: 1; animation: can-tap 1.1s var(--ease-out) forwards; }
.can--tap .can-tilt { animation: can-pour 1.1s var(--ease-out) forwards; }
@keyframes can-tap { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes can-pour { 0% { transform: scale(.7); } 18% { transform: scale(1) rotate(0); } 34%, 70% { transform: rotate(-34deg); } 100% { transform: rotate(0); } }
.rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 94; pointer-events: none; }

/* ---------- reduced motion: keep everything, drop the travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .sparkles i { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js [data-reveal]:not(.is-in), .js [data-reveal]:not(.is-in) * { transform: none !important; }
  .garden .pop { transition: none; }
  .dl-cut path { transition: none !important; }
}

/* a painting, up close, in a flower frame */
.is-zoomable, .fruit--art img { cursor: zoom-in; }
.zoom { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px 16px; background: rgba(7, 6, 11, .82); opacity: 0; transition: opacity .2s var(--ease-out, ease-out); }
.zoom[hidden] { display: none; }
.zoom.is-on { opacity: 1; }
.zoom-frame { position: relative; margin: 0; padding: 16px; border-radius: 34px; background: #ff6fb5 radial-gradient(#ffc2df 22%, transparent 24%) 0 0 / 22px 22px; box-shadow: 0 0 0 8px #a6f0c6; scale: .94; transition: scale .2s var(--ease-out, ease-out); }
.zoom.is-on .zoom-frame { scale: 1; }
.zoom-frame img { display: block; max-width: min(88vw, 1100px); max-height: 78vh; width: auto; height: auto; border-radius: 22px; }
.zoom-flower { position: absolute; width: clamp(52px, 9vw, 84px); aspect-ratio: 1; pointer-events: none; }
.zoom-flower svg { display: block; width: 100%; height: 100%; }
.zoom-flower--tl { left: -26px; top: -26px; }
.zoom-flower--tr { right: -26px; top: -26px; rotate: 30deg; }
.zoom-flower--bl { left: -26px; bottom: -26px; rotate: -20deg; }
.zoom-flower--br { right: -26px; bottom: -26px; rotate: 50deg; }
.zoom-x { position: absolute; top: -20px; right: -20px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 4px solid #fff7ef; border-radius: 50%; background: #1a0f1f; color: #fff7ef; cursor: pointer; }
.zoom-x svg { width: 20px; height: 20px; }
.zoom-x:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .zoom-x:hover { background: #ff3d7f; } }
@media (max-width: 600px) { .zoom-frame { padding: 10px; border-radius: 26px; } .zoom-frame img { max-width: 84vw; border-radius: 18px; } .zoom-x { top: -16px; right: -12px; } }

/* Performance: pause offscreen animations */
.side:not(.is-visible) .garden,
.side:not(.is-visible) .sparkles { animation-play-state: paused; }
.side { content-visibility: auto; contain-intrinsic-size: auto 100vh; }

/* Black stroke on GO BACK text */
.home-ring text { paint-order: stroke; stroke: #000; stroke-width: 5px; stroke-linejoin: round; }


/* ---------- phones: keep the sparkling stars, but make them cheap ----------
   Each star was a clipped shape with a glow filter and a spin, repeated down the whole page. On a phone that is a lot of
   work for the graphics chip, so here the stars only fade and grow (no glow filter, no spin) and there are half as many. */
.sparkles { overflow: hidden; }
@keyframes sparkle-lite { from { scale: .3; opacity: .35; } to { scale: 1.1; opacity: 1; } }
@media (max-width: 900px), (pointer: coarse) {
  .sparkles i { filter: none; animation-name: sparkle-lite; }
  .sparkles i:nth-child(2n) { display: none; }
}