/* Vatar · CEO brand presentation · deck.css
   Tokens only (tokens.css). Motion: transform + opacity, easing and stagger from the motion tokens. */

@property --r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  --ease: var(--motion-easing-standard);
  --ease-io: var(--motion-easing-in-out);
  --spring: var(--motion-easing-spring);
  --rise: var(--motion-distance-rise);
  --g: var(--layout-gutter-fluid);
  --p: 6px;                         /* dot pitch = viewport width ÷ 240 (set by deck.js) */
  --ch: clamp(120px, 24dvh, 236px); /* card height in a hand */
  --px: 0; --py: 0;                 /* pointer / tilt parallax, -1..1 */
  --bx: 50%; --by: 50%;             /* dot-grid bloom origin (set by deck.js) */
  --o: 50% 50%;                     /* hero focal point */
  --d: 12;                          /* card / layer parallax depth */
  --scroll: -70%;                   /* email scroll distance (set by deck.js) */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--color-brand-black);
  color: var(--color-brand-paper);
  font-family: var(--font-family-body);
  -webkit-font-smoothing: antialiased;
  touch-action: pan-y;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
img, video { display: block; max-width: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring-width) solid var(--color-brand-lilac); outline-offset: var(--focus-ring-offset); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--space-4); top: -100px; z-index: var(--z-skip-link); background: var(--color-brand-lilac); color: var(--color-brand-black); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-4); }

/* ---------- grounds ---------- */
.g-black { background: var(--color-brand-black); color: var(--color-brand-paper); --dot: var(--color-brand-lilac-deep); }
.g-ink   { background: var(--color-brand-ink);   color: var(--color-brand-paper); --dot: var(--color-brand-lilac-deep); }
.g-paper { background: var(--color-brand-paper); color: var(--color-brand-black); --dot: var(--color-brand-lilac); }
.g-lilac { background: var(--color-brand-lilac); color: var(--color-brand-black); --dot: var(--color-alpha-black-10); }
.g-photo { background: var(--color-brand-black); color: var(--color-brand-paper); }

/* ---------- the signature dot grid (canvas-relative, drifting) ---------- */
.dots {
  position: absolute; inset: calc(var(--p) * -24);
  background-image: radial-gradient(circle at 50% 50%, var(--dot) 0 max(0.7px, calc(var(--p) * 0.094)), transparent max(1.05px, calc(var(--p) * 0.109)));
  background-size: var(--p) var(--p);
  pointer-events: none;
  animation: drift 64s linear infinite;
}
@keyframes drift { to { transform: translate3d(calc(var(--p) * -16), calc(var(--p) * -10), 0); } }
.dots--bloom { -webkit-mask-image: radial-gradient(circle at var(--bx) var(--by), var(--color-brand-black) calc(var(--r) - 12%), transparent var(--r)); mask-image: radial-gradient(circle at var(--bx) var(--by), var(--color-brand-black) calc(var(--r) - 12%), transparent var(--r)); --r: 0%; }
.dots--bloom.is-open { animation: drift 64s linear infinite, bloom 2.4s var(--ease) forwards; }
@keyframes bloom { from { --r: 0%; } to { --r: 160%; } }

/* ---------- chrome ---------- */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--g) var(--space-4);
  pointer-events: none; color: var(--color-brand-paper);
  transition: color var(--motion-duration-slow) var(--ease);
}
body[data-ground="paper"] .chrome, body[data-ground="lilac"] .chrome { color: var(--color-brand-black); }
.where { margin: 0; display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--font-size-13); font-weight: var(--font-weight-semibold); }
.ix { font-feature-settings: var(--font-feature-tabular); opacity: var(--opacity-muted); }
.ctl { display: flex; gap: var(--space-2); pointer-events: auto; }
.ic {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius-pill); color: inherit;
  transition: background var(--motion-duration-base) var(--ease);
}
.ic:hover { background: var(--color-alpha-white-10); }
body[data-ground="paper"] .ic:hover, body[data-ground="lilac"] .ic:hover { background: var(--color-alpha-black-8); }
.ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .spk { fill: currentColor; stroke: none; }
#snd .on { display: none; } #snd[aria-pressed="true"] .on { display: inline; } #snd[aria-pressed="true"] .off { display: none; }

.progress { position: fixed; inset: auto 0 0 0; height: 3px; z-index: var(--z-header); background: var(--color-alpha-white-10); }
.progress span { display: block; height: 100%; background: var(--color-brand-lilac); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--motion-duration-entrance) var(--ease); }
body[data-ground="lilac"] .progress span { background: var(--color-brand-black); }
body[data-ground="paper"] .progress, body[data-ground="lilac"] .progress { background: var(--color-alpha-black-8); }

/* ---------- deck + pages ---------- */
.deck { position: fixed; inset: 0; height: 100dvh; outline: none; }
.pg { position: absolute; inset: 0; overflow: hidden; visibility: hidden; contain: layout paint; }
.pg.is-on, .pg.is-in { visibility: visible; }
.pg.is-in { z-index: 2; }
.pg.is-on { z-index: 1; }

.label { margin: 0 0 var(--space-4); font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); opacity: 0.72; }
.line {
  margin: 0; font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-fluid-h1); line-height: var(--font-line-height-h1); letter-spacing: var(--font-tracking-h1);
  text-wrap: balance; max-width: 11ch;
}
.copy { position: absolute; left: max(var(--g), env(safe-area-inset-left)); bottom: 10dvh; z-index: 5; max-width: 40vw; }
.copy--top { top: 13dvh; bottom: auto; }

/* ---------- hero (full bleed) ---------- */
.hero { position: absolute; inset: 0; overflow: hidden; }
.hero .kb { position: absolute; inset: -3%; transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px), 0); transition: transform 900ms var(--ease); }
.hero .kb > * { width: 100%; height: 100%; object-fit: cover; object-position: var(--o); transform-origin: var(--o); animation: kenburns 18s var(--ease-io) infinite alternate; }
@keyframes kenburns { from { scale: 1; } to { scale: 1.06; } }
.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(to bottom, var(--color-alpha-black-45), var(--color-alpha-black-0) 18%),
    linear-gradient(to top, var(--color-alpha-black-72), var(--color-alpha-black-0) 58%),
    linear-gradient(to right, var(--color-alpha-black-45), var(--color-alpha-black-0) 50%); }
.lights { position: absolute; inset: 0; z-index: 2; background: var(--color-brand-black); opacity: 0; pointer-events: none; }
.sheen { position: absolute; inset: -10% auto -10% 0; width: 40%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, var(--color-alpha-white-24), transparent); }

/* ---------- hand of cards (the finals) ---------- */
.hand { position: absolute; right: var(--g); bottom: 8dvh; width: min(50vw, 800px); height: calc(var(--ch) + 40px); z-index: 6; }
.cw { position: absolute; left: 0; bottom: 0; transform-origin: 50% 100%; }
.pl { transform: translate3d(calc(var(--px) * var(--d) * 1px), calc(var(--py) * var(--d) * 0.7px), 0); transition: transform 700ms var(--ease); }
.card {
  display: block; padding: 0; border: 0; cursor: zoom-in; position: relative;
  height: var(--ch); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-brand-charcoal);
  box-shadow: var(--shadow-dialog-dark);
  transition: transform var(--motion-duration-base) var(--ease), box-shadow var(--motion-duration-base) var(--ease);
}
.g-paper .card, .g-lilac .card { box-shadow: var(--shadow-dialog-light); background: var(--color-brand-white); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card:hover, .card:focus-visible { transform: translateY(-14px) scale(1.04); }
.cw:hover { z-index: 50 !important; }
.card .play { position: absolute; inset: auto var(--space-2) var(--space-2) auto; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--color-brand-lilac); display: grid; place-items: center; }
.card .play svg { width: 14px; height: 14px; fill: var(--color-brand-black); }

/* ---------- cover ---------- */
.pg-cover video, .pg-cover .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-cover .settle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-8); z-index: 4; }
.pg-cover .wm { width: min(64vw, 820px); opacity: 0; }
.pg-cover .sub { margin: 0; font-size: var(--font-size-fluid-lede); font-weight: var(--font-weight-medium); opacity: 0; color: var(--color-brand-paper); }
.pg-cover .hint { position: absolute; bottom: 7dvh; left: 50%; translate: -50% 0; margin: 0; font-size: var(--font-size-13); opacity: 0; color: var(--color-brand-lilac); z-index: 4; }
.pg-cover .vid { position: absolute; inset: 0; z-index: 3; background: var(--color-brand-black); }

/* ---------- thinking beats ---------- */
.beat { position: absolute; inset: 0; opacity: 0; visibility: hidden; overflow: hidden; }
.beat.is-on { opacity: 1; visibility: visible; }
.bp { position: absolute; left: max(var(--g), env(safe-area-inset-left)); bottom: 11dvh; z-index: 6; margin: 0; font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-size: calc(var(--font-size-fluid-h1) * 1.6); line-height: var(--font-line-height-h1); letter-spacing: var(--font-tracking-h1); max-width: min(11ch, calc(100vw - var(--g) * 2)); }
.bp .l2 { display: block; color: var(--color-brand-lilac); }
.g-paper .bp .l2, .g-lilac .bp .l2 { color: var(--color-brand-lilac-deep); }
.mag { position: absolute; inset: 0; transform: scale(3.2); transform-origin: 50% 50%; }
.pips { position: absolute; right: var(--g); bottom: 11dvh; display: flex; gap: var(--space-2); z-index: 7; }
.pips i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; opacity: 0.22; transition: opacity var(--motion-duration-slow) var(--ease), transform var(--motion-duration-slow) var(--ease); }
.pips i.on { opacity: 1; transform: scale(1.25); }

.b-city { position: absolute; right: -4vw; top: 9dvh; width: min(66vw, 1060px); perspective: 1400px; }
.b-city .ghost { position: absolute; inset: 0; opacity: 0; }
.b-city img { width: 100%; height: auto; }
.b-city .turn { transform-style: preserve-3d; animation: turn 11s var(--ease-io) infinite alternate; }
@keyframes turn { from { transform: rotateX(14deg) rotateY(-16deg) rotateZ(1deg); } to { transform: rotateX(8deg) rotateY(16deg) rotateZ(-1deg); } }

.pop { position: absolute; }
.pop img { width: 100%; height: auto; }
.float { animation: float 5.2s var(--ease-io) infinite alternate; }
.float.f2 { animation-duration: 6.4s; animation-delay: -1.8s; }
.float.f3 { animation-duration: 4.6s; animation-delay: -3s; }
@keyframes float { from { transform: translateY(-8px) rotate(-1deg); } to { transform: translateY(8px) rotate(1deg); } }

.b-grown { position: absolute; inset: 0 0 0 26vw; overflow: hidden; }
.b-grown img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.b-grown .gscrim { position: absolute; inset: 0; background: linear-gradient(to right, var(--color-brand-black), var(--color-alpha-black-0) 42%), linear-gradient(to top, var(--color-alpha-black-72), var(--color-alpha-black-0) 40%); }
.b-grown .sheen { opacity: 0; }
.snap { position: absolute; z-index: 2; }
.snap .sf { margin: 0; padding: var(--space-2) var(--space-2) var(--space-8); background: var(--color-brand-paper); border-radius: var(--radius-sm); box-shadow: var(--shadow-dialog-dark); overflow: hidden; }
.snap img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--radius-sm) / 2); }
.snap.s2 img { aspect-ratio: 2 / 3; object-position: 60% 40%; }
.s1 { left: 38vw; top: 9dvh; width: 31vw; rotate: -5deg; }
.s2 { left: 74vw; top: 6dvh; width: 18vw; rotate: 5deg; }
.s3 { left: 52vw; top: 45dvh; width: 25vw; rotate: 3deg; }
.s4 { left: 78vw; top: 54dvh; width: 19vw; rotate: -4deg; }

.pour { position: absolute; inset: 0 0 auto 0; height: 64dvh; display: grid; grid-template-columns: repeat(6, 1fr); }
.pour i { display: block; height: 100%; transform-origin: 50% 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.pour i:nth-child(2n) { height: 88%; } .pour i:nth-child(3n) { height: 94%; }

.b-grid { position: absolute; inset: 10dvh var(--g) 33dvh; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-content: center; }
.b-grid i { display: block; height: 100%; aspect-ratio: 4 / 5; justify-self: center; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-brand-charcoal); }
.b-grid img { width: 100%; height: 100%; object-fit: cover; }
.b-plate { position: absolute; left: 0; bottom: 0; right: 0; height: 40dvh; background: linear-gradient(to top, var(--color-brand-black) 35%, transparent); z-index: 5; }

/* ---------- logo ---------- */
.lg-wm { position: absolute; left: 50%; top: 22dvh; translate: -50% 0; width: min(68vw, 940px); }
.lg-wm img { width: 100%; height: auto; }
.cways { position: absolute; left: 50%; top: 47dvh; translate: -50% 0; display: flex; gap: var(--space-3); }
.cway { width: clamp(92px, 12vw, 176px); aspect-ratio: 16 / 10; border-radius: var(--radius-sm); display: grid; place-items: center; position: relative; }
.cway img { width: 70%; height: auto; }
.cway b { position: absolute; left: var(--space-2); bottom: var(--space-1); font-size: var(--font-size-11); font-weight: var(--font-weight-semibold); opacity: 0.7; }
.cw-c04, .cw-c01, .cw-c03 { background: var(--color-brand-black); box-shadow: inset 0 0 0 1px var(--color-alpha-white-16); color: var(--color-brand-paper); }
.cw-c07 { background: var(--color-brand-paper); color: var(--color-brand-black); }
.cw-c09 { background: var(--color-brand-lilac); color: var(--color-brand-black); }

/* ---------- colour + type ---------- */
.aa { position: absolute; left: var(--g); top: 12dvh; margin: 0; font-family: var(--font-family-display); font-size: calc(var(--font-size-fluid-h1) * 3.6); line-height: var(--font-line-height-h1); letter-spacing: var(--font-tracking-h1); font-weight: var(--font-weight-extrabold); color: var(--color-brand-black); }
.aa-cap { position: absolute; left: var(--g); top: calc(12dvh + var(--font-size-fluid-h1) * 3.75); margin: 0; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); opacity: 0.6; }
.pal { position: absolute; right: var(--g); top: 0; width: 48vw; height: 78dvh; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.pal i { position: relative; display: block; border-radius: 0 0 var(--radius-md) var(--radius-md); transform-origin: 50% 0; }
.pal i b { position: absolute; left: var(--space-3); bottom: var(--space-3); font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); }
.pal i:nth-child(1) { background: var(--color-brand-lilac-soft); height: 92%; }
.pal i:nth-child(2) { background: var(--color-brand-lilac); height: 100%; }
.pal i:nth-child(3) { background: var(--color-brand-lilac-deep); height: 84%; color: var(--color-brand-paper); }
.pal i:nth-child(4) { background: var(--color-brand-ink); height: 76%; color: var(--color-brand-paper); }
.pal i:nth-child(5) { background: var(--color-brand-black); height: 68%; color: var(--color-brand-paper); }
.warm { position: absolute; right: var(--g); top: calc(78dvh + var(--space-4)); display: flex; gap: var(--space-2); }
.warm i { width: 36px; height: 36px; border-radius: var(--radius-pill); display: block; }
.warm i:nth-child(1) { background: var(--color-brand-peach); }
.warm i:nth-child(2) { background: var(--color-brand-rose); }
.warm i:nth-child(3) { background: var(--color-brand-amber); } /* the one amber element on this page */
.warm i:nth-child(4) { background: var(--color-brand-white); box-shadow: inset 0 0 0 1px var(--color-alpha-black-16); }

/* ---------- patterns ---------- */
.zoomdots { position: absolute; inset: 0; overflow: hidden; }
.zoomdots .dots { transform-origin: 50% 50%; }
.loupe { position: absolute; left: 50%; top: 11dvh; translate: -50% 0; width: min(46dvh, 40vw); aspect-ratio: 1; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-brand-lilac); box-shadow: 0 0 0 2px var(--color-brand-black), var(--shadow-dialog-light); z-index: 2; }
.loupe .mag { transform: scale(9); }

/* ---------- illustration world ---------- */
.world { position: absolute; left: 50%; top: 8dvh; translate: -50% 0; width: min(80vw, 116dvh); aspect-ratio: 16 / 9; }
.world .ly { position: absolute; transform: translate3d(calc(var(--px) * var(--d) * 1px), calc(var(--py) * var(--d) * 0.7px), 0); transition: transform 800ms var(--ease); }
.world img { width: 100%; height: auto; }

/* ---------- social band ---------- */
.band { position: absolute; left: 50%; top: 13dvh; translate: -50% 0; width: min(88vw, 1120px); perspective: 1600px; }
.band .bi { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-dialog-light); }
.band img { width: 100%; height: auto; }

/* ---------- posts conveyor ---------- */
.rows { position: absolute; left: 0; right: 0; top: 38dvh; bottom: 6dvh; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.track { display: flex; gap: var(--space-4); height: 100%; width: max-content; }
.track.run { animation: conveyor 70s linear infinite; }
.track.rev.run { animation-direction: reverse; }
@keyframes conveyor { to { transform: translate3d(-50%, 0, 0); } }
.track .cw { position: relative; height: 100%; }
.track .pl { height: 100%; }
.pg-posts .copy { max-width: none; }
.pg-posts .line { max-width: 22ch; }
.track .card { height: 100%; aspect-ratio: 4 / 5; }

/* ---------- email phone ---------- */
.phone { position: absolute; left: 42%; top: 12dvh; height: 80dvh; aspect-ratio: 0.49; border-radius: calc(var(--radius-lg) * 1.8); background: var(--color-brand-black); padding: var(--space-3); box-shadow: var(--shadow-dialog-light); }
.phone .scr { width: 100%; height: 100%; border-radius: calc(var(--radius-lg) * 1.4); overflow: hidden; background: var(--color-brand-white); position: relative; }
.phone .scr img { width: 100%; height: auto; animation: escroll 26s var(--ease-io) infinite alternate; }
.phone .notch { position: absolute; top: 22px; left: 50%; translate: -50% 0; width: 30%; height: 22px; border-radius: var(--radius-pill); background: var(--color-brand-black); z-index: 2; }
@keyframes escroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(var(--scroll)); } }

/* ---------- merch flip ---------- */
.flip { position: absolute; left: var(--g); top: 12dvh; height: 80dvh; aspect-ratio: 0.923; perspective: 1800px; }
.flip .fi { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flip 7s var(--ease-io) infinite; }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-dialog-light); }
.flip .face img { width: 100%; height: 100%; object-fit: cover; }
.flip .back { transform: rotateY(180deg); }
@keyframes flip { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

/* ---------- live proof ---------- */
.screens { position: absolute; left: 50%; top: 30dvh; translate: -50% 0; width: min(64vw, 760px); display: grid; grid-template-columns: 1fr; gap: var(--space-8); perspective: 1800px; }
.browser { border-radius: var(--radius-md); overflow: hidden; background: var(--color-brand-charcoal); box-shadow: var(--shadow-dialog-dark); }
.browser .bar { height: 28px; display: flex; gap: calc(var(--space-1) * 1.5); align-items: center; padding: 0 var(--space-3); background: var(--color-brand-charcoal); }
.browser .bar i { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--color-alpha-white-24); }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.browser figcaption { padding: var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.browser figcaption span { font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); }

/* ---------- numbers ---------- */
.leds { position: absolute; inset: 14dvh var(--g) 10dvh; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-12); align-content: center; }
.led { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.led svg { width: 100%; height: auto; max-height: 26dvh; overflow: visible; }
.led svg circle { fill: var(--color-alpha-white-8); }
.led svg circle.on { fill: var(--color-brand-lilac); }
.led p { margin: 0; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); color: var(--color-brand-lilac); }

/* ---------- decisions ---------- */
.tiles { position: absolute; left: var(--g); right: var(--g); top: 36dvh; bottom: 9dvh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: var(--space-4); perspective: 1600px; }
.tile { position: relative; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; transform-style: preserve-3d; }
.tile .ti { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 700ms var(--ease); }
.tile.is-flipped .ti { transform: rotateY(180deg); }
.tile .fr, .tile .bk { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-md); padding: var(--layout-grid-gap-fluid); display: flex; flex-direction: column; justify-content: space-between; }
.tile .fr { background: var(--color-brand-lilac); color: var(--color-brand-black); }
.tile:nth-child(2n) .fr { background: var(--color-brand-lilac-soft); }
.tile .bk { background: var(--color-brand-black); color: var(--color-brand-paper); transform: rotateY(180deg); }
.tile svg { width: clamp(32px, 4vw, 56px); height: clamp(32px, 4vw, 56px); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile .w { font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-size: var(--font-size-fluid-h2); letter-spacing: var(--font-tracking-h2); line-height: var(--font-line-height-h2); }
.tile .d { font-family: var(--font-family-display); font-weight: var(--font-weight-bold); font-size: var(--font-size-fluid-h4); line-height: var(--font-line-height-h4); letter-spacing: var(--font-tracking-h4); }
.tile .d + .k { font-size: var(--font-size-13); color: var(--color-brand-lilac); font-weight: var(--font-weight-semibold); }

/* ---------- close ---------- */
.close-v { position: absolute; left: 50%; top: 22dvh; translate: -50% 0; width: min(34vw, 46dvh, 420px); }
.close-v img { width: 100%; height: auto; }
.thanks { position: absolute; left: 0; right: 0; top: calc(22dvh + min(34vw, 46dvh, 420px) * 0.56 + var(--space-12)); text-align: center; margin: 0; font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-size: calc(var(--font-size-fluid-h1) * 1.3); letter-spacing: var(--font-tracking-h1); line-height: var(--font-line-height-h1); }

/* ---------- transitions: light strips ---------- */
.strips { position: fixed; inset: 0; z-index: 800; display: flex; pointer-events: none; visibility: hidden; }
.strips.is-on { visibility: visible; }
.strips i { flex: 1; height: 100%; transform: scaleY(0); transform-origin: 50% 100%;
  background: linear-gradient(to top, var(--color-brand-lilac), var(--color-brand-lilac-soft) 30%, var(--color-brand-lilac-deep) 58%, var(--color-brand-ink) 80%, var(--color-brand-black));
  box-shadow: inset -1px 0 0 var(--color-alpha-black-16); }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-scrim-solid); backdrop-filter: blur(var(--blur-backdrop)); overflow: auto; }
.menu__in { max-width: 1100px; margin: 0 auto; padding: 12dvh var(--g) 8dvh; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8); }
.menu h2 { margin: 0 0 var(--space-3); font-size: var(--font-size-13); font-weight: var(--font-weight-semibold); color: var(--color-brand-lilac); }
.menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.menu button { width: 100%; min-height: 44px; text-align: left; background: none; border: 0; padding: var(--space-2) 0; cursor: pointer; display: flex; gap: var(--space-3); font-family: var(--font-family-display); font-size: var(--font-size-20); font-weight: var(--font-weight-bold); color: var(--color-brand-paper); }
.menu button span { font-family: var(--font-family-body); font-size: var(--font-size-13); opacity: 0.5; padding-top: var(--space-1); font-feature-settings: var(--font-feature-tabular); }
.menu button:hover, .menu button[aria-current="page"] { color: var(--color-brand-lilac); }
/* sound picker (M menu): A / B / C / Off */
.menu .snd-pick { min-width: 0; }
.menu .snd-pick__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.menu .snd-pick button { min-height: 56px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg, 14px); border: 1px solid var(--color-alpha-white-10); background: none; flex-direction: column; gap: 2px; font-size: var(--font-size-16, 16px); }
.menu .snd-pick button b { font-family: var(--font-family-display); font-size: var(--font-size-20); }
.menu .snd-pick button span { padding: 0; font-size: var(--font-size-13); }
.menu .snd-pick button:hover { border-color: var(--color-brand-lilac); color: var(--color-brand-paper); }
.menu .snd-pick button[aria-pressed="true"] { background: var(--color-brand-lilac); border-color: var(--color-brand-lilac); color: var(--color-brand-black); }
.menu .snd-pick button[aria-pressed="true"] span { opacity: 0.8; }
.menu .snd-pick button:focus-visible { outline: 2px solid var(--color-brand-lilac); outline-offset: 3px; }
.menu .snd-pick__hint { margin: var(--space-3) 0 0; font-size: var(--font-size-13); color: var(--color-brand-paper); opacity: 0.6; }
@media (min-width: 960px) { .menu .snd-pick { grid-column: span 2; } .menu .snd-pick__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- notes ---------- */
.notes { position: fixed; left: 50%; bottom: var(--space-6); translate: -50% 0; z-index: var(--z-dropdown); width: min(760px, calc(100vw - 32px)); max-height: 60dvh; overflow: auto; background: var(--color-brand-ink); color: var(--color-brand-paper); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-dialog-dark); font-size: var(--font-size-14); line-height: var(--font-line-height-body-sm); user-select: text; -webkit-user-select: text; }
.notes p, .notes ol { margin: 0 0 var(--space-3); }
.notes strong { color: var(--color-brand-lilac); }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-scrim-solid); display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: 1fr auto; align-items: center; padding: var(--space-12) var(--space-4) var(--space-4); }
.lb[hidden] { display: none; }
.lb__fig { margin: 0; grid-column: 2; display: grid; place-items: center; min-height: 0; height: 100%; }
.lb__fig img, .lb__fig video { max-width: 100%; max-height: calc(100dvh - 180px); width: auto; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-dialog-dark); }
.lb__x { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--color-brand-paper); }
.lb__p, .lb__n { color: var(--color-brand-paper); }
.lb__cap { grid-column: 1 / -1; text-align: center; padding-top: var(--space-4); }
.lb__cap p { margin: 0; font-size: var(--font-size-14); color: var(--color-brand-paper); }
.lb__cap #lbCap b { color: var(--color-brand-lilac); font-weight: var(--font-weight-semibold); margin-right: var(--space-2); }
.lb__src { margin-top: var(--space-2) !important; font-size: var(--font-size-12) !important; opacity: 0.7; user-select: text; -webkit-user-select: text; word-break: break-all; }
.lb__src a { color: var(--color-brand-lilac); }


/* ---------- layout variants ---------- */
.hand--narrow { width: min(40vw, 640px); }
.copy--right { left: auto; right: var(--g); top: 13dvh; bottom: auto; text-align: right; }
.copy--right .line { margin-left: auto; }
.b-city img.ghost { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform-origin: 0 0; }
@media (max-width: 700px) {
  .hand--narrow { width: auto; }
  .copy--right { left: var(--g); right: var(--g); top: auto; bottom: calc(var(--ch) + 12dvh); text-align: left; }
  .copy--right .line { margin-left: 0; }
  .nohand .copy { bottom: 10dvh; }
  .pg-colour .pal { top: 32dvh; bottom: auto; height: 26dvh; }
  .pg-colour .warm { top: calc(58dvh + 12px); bottom: auto; }
          }

/* ---------- phone (≤ 700 px) ---------- */
@media (max-width: 700px) {
  :root { --ch: clamp(96px, 15dvh, 150px); }
  .copy { left: var(--g); right: var(--g); max-width: none; bottom: calc(var(--ch) + 12dvh); }
  .copy--top { top: 9dvh; bottom: auto; }
  .line { font-size: var(--font-size-mobile-h1); max-width: 14ch; }
  .label { margin-bottom: var(--space-2); }
  .hand { left: var(--g); right: var(--g); width: auto; bottom: 5dvh; }
  .bp { font-size: calc(var(--font-size-mobile-h1) * 1.4); bottom: 12dvh; }
  .pips { bottom: 6dvh; left: var(--g); right: auto; }
  .b-city { right: -18vw; top: 14dvh; width: 130vw; }
  .b-grown { inset: 0; }
  .b-grown .gscrim { background: linear-gradient(to top, var(--color-brand-black) 18%, var(--color-alpha-black-0) 62%); }
  .s1 { left: 3vw; top: 9dvh; width: 62vw; }
  .s2 { left: auto; right: 3vw; top: 13dvh; width: 34vw; }
  .s3 { left: 6vw; top: 33dvh; width: 54vw; }
  .s4 { left: auto; right: 3vw; top: 40dvh; width: 42vw; }
  .pour { height: 52dvh; }
  .b-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); inset: 9dvh var(--g) 34dvh; gap: var(--space-2); }
  .b-grid i:nth-child(n+17) { display: none; }
  .lg-wm { top: 18dvh; width: 84vw; }
  .cways { top: 31dvh; flex-wrap: wrap; justify-content: center; width: calc(100vw - 32px); }
  .cway { width: 28vw; }
  .aa { top: 9dvh; font-size: calc(var(--font-size-mobile-h1) * 3.3); }
  .aa-cap { top: calc(9dvh + var(--font-size-mobile-h1) * 3.45); }
  .pal { left: var(--g); right: var(--g); width: auto; top: auto; bottom: calc(var(--ch) + 30dvh); height: 22dvh; }
  .pal i { border-radius: var(--radius-sm); }
  .pal i b { display: none; }
  .warm { top: auto; bottom: calc(var(--ch) + 30dvh - 44px); left: var(--g); right: auto; }
  .warm i { width: 28px; height: 28px; }
  .world { top: 12dvh; width: 100vw; }
  .copy { max-width: none; }
  .hero.pfit .kb { scale: 1 !important; }
  .hero.pfit .kb > * { object-fit: contain; object-position: 50% 24%; }
  .band { top: 12dvh; width: calc(100vw - 32px); }
  .rows { top: 34dvh; bottom: 5dvh; gap: var(--space-2); }
  .track { gap: var(--space-2); }
  .phone { left: 50%; translate: -50% 0; top: 8dvh; height: 46dvh; border-radius: calc(var(--radius-lg) * 1.25); padding: var(--space-2); }
  .phone .scr { border-radius: calc(var(--radius-lg) * 0.95); }
  .phone .notch { top: 14px; height: 14px; }
  .flip { left: 50%; translate: -50% 0; top: 8dvh; height: 40dvh; }
  .screens { grid-template-columns: 1fr; gap: var(--space-4); top: 24dvh; width: calc(100vw - 32px); }
  .loupe { width: min(36dvh, 70vw); top: 10dvh; }
  .browser img { aspect-ratio: 16 / 8; }
  .leds { grid-template-columns: 1fr; gap: var(--space-6); inset: 12dvh var(--g) 6dvh; }
  .led svg { max-height: 12dvh; }
  .tiles { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); top: 28dvh; bottom: 5dvh; gap: var(--space-2); }
  .close-v { width: 56vw; top: 24dvh; }
  .thanks { top: calc(24dvh + 56vw * 0.56 + var(--space-10)); }
  .lb { grid-template-columns: 0 1fr 0; padding: var(--space-16) var(--space-2) var(--space-4); }
  .lb__p, .lb__n { position: absolute; bottom: var(--space-4); }
  .lb__p { left: var(--space-2); } .lb__n { right: var(--space-2); }
  .lb__cap { padding: var(--space-4) var(--space-12) 0; }
}

/* ---------- reduced motion: crossfades only ---------- */
@media (prefers-reduced-motion: reduce) {
  .dots, .hero .kb > *, .float, .b-city .turn, .b-grown img, .track.run, .phone .scr img, .flip .fi { animation: none !important; }
  .dots--bloom { -webkit-mask-image: none; mask-image: none; }
  .hero .kb, .pl, .world .ly { transform: none !important; transition: none; }
  .tile .ti { transition: none; }
}