/* Vatar · creator launch merch site. Every colour, font, space, radius and motion value is a design-system token
   (shared/design-system/tokens.css). The only raw values are layout ratios and viewport/container-relative sizes. */

:root {
  --side-w: calc(var(--space-40) * 2);           /* 320px sidebar */
  --edge: var(--space-3);                         /* sidebar inset from the viewport */
  --ground: var(--color-neutral-900);             /* near-black page */
  --card: var(--color-neutral-1000);              /* sidebar cards and tiles sit darker than the page */
  --tray: var(--color-neutral-800);               /* the index container */
  --line: var(--color-border-subtle);
  --content-max: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--color-text-primary);
  font-family: var(--type-body-font-family); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
::selection { background: var(--color-brand-lilac); color: var(--color-text-on-accent); }
.sr-only { 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: var(--space-4); z-index: var(--z-dropdown); padding: var(--space-2) var(--space-4); background: var(--color-brand-lilac); color: var(--color-text-on-accent); transform: translateY(-200%); }
.skip:focus { transform: none; }
main:focus, .chapter:focus, .index:focus { outline: none; }
.ico { width: var(--space-4); height: var(--space-4); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--color-text-secondary); max-width: 36rem; }
.accent { color: var(--color-text-accent); }
.sub { font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); }

/* ---------- small buttons (hero, downloads) ---------- */
.hbtn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--space-8); padding-inline: var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), transform var(--motion-duration-press) var(--motion-easing-standard);
}
.hbtn:active { transform: scale(var(--motion-scale-press)); }
.hbtn--lilac { background: var(--color-brand-lilac); color: var(--color-text-on-accent); }
.hbtn--lilac:hover { background: var(--color-action-primary-bg-hover); }
.hbtn--paper { background: var(--color-brand-paper); color: var(--color-text-inverse); }
.hbtn--paper:hover { background: var(--color-neutral-100); }

/* ---------- nav: a Riverflow-style dropdown at every width (brand card + current row; the list opens below) ----------
   Three variations to compare, ?nav=a|b|c: A tiles · B grouped tabs · C thumbnail grid. */
.side { position: fixed; z-index: var(--z-header); top: var(--edge); left: var(--edge); width: calc(100vw - var(--edge) * 2); max-width: var(--side-w); display: grid; gap: var(--space-2); }
.side__card { background: var(--tray); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-md); padding: calc(var(--space-1) * 1.5); }
.side__top { display: grid; gap: calc(var(--space-1) * 1.5); }
.side__brand, .side__current { background: var(--card); border-radius: calc(var(--radius-md) - var(--space-1)); }
.side__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); text-decoration: none; }
.side__mark { width: var(--space-10); height: var(--space-10); padding: var(--space-1); border-radius: var(--radius-sm); background: var(--color-brand-black); }
.side__names { display: grid; line-height: var(--font-line-height-label); font-size: var(--font-size-16); }
.side__name { font-weight: var(--font-weight-semibold); }
.side__sub { color: var(--color-brand-lilac); }
.side__current {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3);
  border: 0; cursor: pointer; text-align: left; font-size: var(--font-size-16); color: var(--color-text-primary);
}
.side__current:hover, .side.is-open .side__current { background: var(--color-bg-surface-raised); }
.side__ico { display: inline-flex; color: var(--color-brand-lilac); }
.side__cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__chev { width: var(--space-4); height: var(--space-4); color: var(--color-text-tertiary); transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
.side.is-open .side__chev { transform: rotate(180deg); }
.side__list { display: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; max-height: calc(100svh - var(--space-40)); }
.side__list::-webkit-scrollbar { display: none; }
.side.is-open .side__list { display: block; animation: drop var(--motion-duration-base) var(--motion-easing-out); box-shadow: var(--elevation-overlay); }
@keyframes drop { from { opacity: 0; transform: translateY(calc(var(--motion-distance-nudge) * -2)); } }
.side__ol { display: grid; gap: calc(var(--space-1) / 2); }
.side__ol a {
  display: flex; align-items: center; gap: var(--space-3); padding: calc(var(--space-1) * 2.5) var(--space-3);
  background: var(--card); border-radius: calc(var(--radius-md) - var(--space-1)); font-size: var(--font-size-16); line-height: var(--font-line-height-label);
  color: var(--color-text-primary); text-decoration: none; transition: background var(--motion-duration-fast) var(--motion-easing-standard);
}
.side__ol a .ico { color: var(--color-brand-lilac); }
.side__ol a:hover { background: var(--color-bg-surface-raised); }
.side__ol a[aria-current] { background: var(--color-bg-surface-raised); box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-strong); }
.side__ol .t { flex: 1; min-width: 0; }
.side__ol .s { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--color-brand-peach); flex: none; }

/* B · grouped tabs: Overview / Unboxing / Giveaway range; only one group's rows show */
.side__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space-1) / 2); padding: calc(var(--space-1) / 2); margin-bottom: calc(var(--space-1) * 1.5); background: var(--card); border-radius: calc(var(--radius-md) - var(--space-1)); }
.side__tab { border: 0; background: none; color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-13); padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); cursor: pointer; }
.side__tab:hover { color: var(--color-text-primary); }
.side__tab[aria-pressed="true"] { background: var(--color-bg-surface-raised); color: var(--color-text-primary); }
[data-nav="b"] .side__ol li[hidden] { display: none; }

/* C · thumbnail grid: overview as an icon row, items as small render tiles in a 3-up grid */
[data-nav="c"] { --side-w: calc(var(--space-40) * 2.4); }
.side__quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--space-1) / 2); margin-bottom: calc(var(--space-1) * 1.5); }
.side__quick a { display: grid; place-items: center; height: var(--space-10); background: var(--card); border-radius: calc(var(--radius-md) - var(--space-1)); color: var(--color-brand-lilac); }
.side__quick a:hover, .side__quick a[aria-current] { background: var(--color-bg-surface-raised); }
[data-nav="c"] .side__ol { grid-template-columns: repeat(3, 1fr); gap: calc(var(--space-1) * 1.5); }
[data-nav="c"] .side__grp { grid-column: 1 / -1; padding: var(--space-2) var(--space-1) 0; font-size: var(--font-size-12); color: var(--color-text-tertiary); }
[data-nav="c"] .side__ol a.side__thumb { position: relative; display: grid; gap: var(--space-2); padding: calc(var(--space-1) * 1.5); align-content: start; font-size: var(--font-size-12); }
.side__pic { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--tone, var(--color-neutral-700)); }
.side__pic img { width: 100%; height: 100%; object-fit: cover; }
[data-nav="c"] .side__thumb .t { padding-inline: var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-nav="c"] .side__thumb .s { position: absolute; top: var(--space-3); right: var(--space-3); }
[data-nav="a"] .side__grp { display: none; }

/* tucked: after the hero the nav folds into one small pill with metallic type; click it to open the full nav.
   It shows where you are: a ring that fills per chapter, the chapter number and its name (user pick B, 2026-11-12). */
.side__pill { display: none; }
.side.is-mini { width: auto; }
.side.is-mini .side__top { display: none; }
.side.is-mini .side__pill { display: inline-flex; animation: pillin var(--motion-duration-slow) var(--motion-easing-out); }
@keyframes pillin { from { opacity: 0; transform: scale(0.92); } }
.side__pill {
  align-items: center; gap: var(--space-3); padding: calc(var(--space-1) * 1.5); padding-right: var(--space-4);
  background: var(--tray); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-pill);
  box-shadow: var(--elevation-overlay); cursor: pointer; color: var(--color-text-primary); font: inherit; justify-self: start;
}
.side__pill:hover .metal { animation-duration: 1.4s; }
/* metallic type: white silver, a bright line just under the middle, soft grey below, no black; a sheen passes every few seconds */
.metal {
  font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image:
    linear-gradient(100deg, transparent 0 42%, var(--color-neutral-0) 50%, transparent 58% 100%),
    linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-neutral-50) 30%, var(--color-neutral-200) 48%, var(--color-neutral-0) 54%, var(--color-neutral-300) 64%, var(--color-neutral-100) 86%, var(--color-neutral-0) 100%);
  background-size: 300% 100%, 100% 100%; background-position: 100% 0, 0 0;
  filter: drop-shadow(0 1px 0 var(--color-alpha-black-72));
  animation: metal 4.8s var(--motion-easing-in-out) infinite;
}
@keyframes metal { 0% { background-position: 100% 0, 0 0; } 45%, 100% { background-position: 0% 0, 0 0; } }
.burger { display: grid; gap: calc(var(--space-1) * 1.25); width: var(--space-4); margin-left: var(--space-1); }
.burger i { display: block; height: var(--border-width-thick, 2px); border-radius: var(--radius-pill); background: var(--color-neutral-200); }
.side__pill .num { font-family: var(--font-family-body); font-weight: var(--font-weight-semibold); font-size: 12px; color: var(--color-brand-lilac); font-feature-settings: var(--font-feature-tabular); }
.side__pill .metal { font-size: var(--font-size-16); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__pill .ring { width: var(--space-10); height: var(--space-10); flex: none; }
.side__pill .ring circle { fill: none; stroke-width: 2.5; }
.side__pill .ring .bg { stroke: var(--color-border-subtle); } .side__pill .ring .fg { stroke: var(--color-brand-lilac); stroke-linecap: round; transition: stroke-dashoffset var(--motion-duration-slow) var(--motion-easing-standard); }
@media (prefers-reduced-motion: reduce) { .metal { animation: none; } .side.is-mini .side__pill { animation: none; } }


/* ---------- main column ---------- */
main { padding-inline: var(--layout-gutter-fluid); }
.chapter, .index { max-width: var(--content-max); margin-inline: auto; }
.chapter { padding-block: clamp(var(--space-16), 8vw, var(--space-24)) var(--layout-section-fluid); border-top: var(--border-width-hairline) solid var(--line); }
.chapter { padding-top: var(--space-32); }
.chapter__num { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-13); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); margin-bottom: var(--space-3); }
.chapter__h { font-family: var(--type-h2-font-family); font-weight: var(--type-h2-font-weight); font-size: var(--font-size-fluid-h2); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); }
.chapter__lede { margin-top: var(--space-4); max-width: 36rem; font-size: var(--font-size-fluid-lede); line-height: var(--font-line-height-lede); color: var(--color-text-secondary); text-wrap: pretty; }
.status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); }
.status::before { content: ""; width: calc(var(--space-1) * 1.5); height: calc(var(--space-1) * 1.5); border-radius: var(--radius-pill); background: var(--color-status-success-solid); }
.status[data-status="design"]::before { background: var(--color-brand-amber); }

/* ---------- hero: wordmark over a chrome CREATOR ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; padding-block: var(--space-32) var(--space-24); }
.hero__inner { width: 100%; container-type: inline-size; display: grid; justify-items: center; }
.hero__wordmark { width: clamp(6rem, 22cqi, 10rem); height: auto; margin-bottom: clamp(var(--space-4), 3cqi, var(--space-8)); }
.hero__title { width: 100%; font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); line-height: 0.86; letter-spacing: -0.045em; }
/* CREATOR in chrome type. Static: a white-silver steel gradient. Moving: liquid metal flowing inside the letters (WebGL, app.js),
   after the liquid-chrome logo animation on pin 1106267095987109400. The canvas sits exactly over the type. */
.chrome {
  position: relative; display: inline-block; padding: 0.04em 0.06em 0.08em; text-transform: uppercase;
  font-size: clamp(3.25rem, 20cqi, 15rem);
  color: transparent; -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(105deg, transparent 0 44%, color-mix(in srgb, var(--color-neutral-0) 90%, transparent) 50%, transparent 56% 100%),
    linear-gradient(180deg, transparent 6%, color-mix(in srgb, var(--color-brand-lilac-soft) 24%, transparent) 18%, transparent 36%),
    linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-neutral-50) 16%, var(--color-neutral-200) 36%, var(--color-neutral-300) 48%, var(--color-neutral-0) 54%, var(--color-neutral-200) 66%, var(--color-neutral-100) 84%, var(--color-neutral-50) 100%);
  background-size: 320% 100%, 100% 100%, 100% 100%; background-position: 100% 0, 0 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0.06em 0.12em var(--color-alpha-black-72));
  animation: sheen 5.6s var(--motion-easing-in-out) 1.2s infinite;
}
@keyframes sheen { 0% { background-position: 100% 0, 0 0, 0 0; } 42%, 100% { background-position: 0% 0, 0 0, 0 0; } }
.chrome.is-liquid { animation: none; background-image: none; filter: none; }
.chrome__gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0.06em 0.12em var(--color-alpha-black-72)); }
@media (prefers-reduced-motion: reduce) { .chrome { animation: none; } }
.hero__actions { display: flex; gap: var(--space-2); margin-top: clamp(var(--space-6), 4cqi, var(--space-10)); }
.hero__cue { position: absolute; left: 50%; bottom: var(--space-8); transform: translateX(-50%); font-size: var(--font-size-13); color: var(--color-text-tertiary); text-decoration: none; white-space: nowrap; }
.hero__cue:hover { color: var(--color-text-secondary); }

/* ---------- index grid ---------- */
.index { padding-bottom: var(--layout-section-fluid); }
.index__group + .index__group { margin-top: var(--space-12); }
.index__h { font-size: var(--font-size-14); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin: 0 0 var(--space-3) var(--space-1); }
.index__grid { display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--tray); border-radius: var(--radius-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: grid; grid-template-rows: auto auto; height: 100%; text-decoration: none; background: var(--card); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.tile__media { position: relative; display: block; aspect-ratio: 371 / 290; background: var(--tone, var(--color-neutral-100)); overflow: hidden; }
.tile__media img, .tile__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-entrance) var(--motion-easing-out), opacity var(--motion-duration-slow) var(--motion-easing-standard); }
.tile__vid { opacity: 0; }
.tile.is-playing .tile__vid { opacity: 1; }
@media (hover: hover) { .tile:hover .tile__media img { transform: scale(var(--motion-scale-hover-media)); } }
.tile__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-top: var(--border-width-hairline) solid var(--line); font-size: var(--font-size-14); }
.tile__bar .ico { color: var(--color-text-accent); }
.tile__name { flex: 1; min-width: 0; }
.tile__s { font-size: var(--font-size-12); color: var(--color-text-tertiary); }
.tile:focus-visible { outline-offset: var(--focus-ring-width); }

/* ---------- 01 idea ---------- */
.idea__statement {
  margin-top: var(--space-10); max-width: 22ch;
  font-family: var(--type-h2-font-family); font-weight: var(--font-weight-semibold);
  font-size: clamp(var(--font-size-32), 3.8vw, var(--font-size-56)); line-height: var(--font-line-height-h3); letter-spacing: var(--type-h2-letter-spacing);
}
.tiers { display: grid; gap: var(--space-10); margin-block: var(--space-20) var(--space-16); }
.tier { padding-top: var(--space-5); border-top: var(--border-width-hairline) solid var(--line); }
.tier__items { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-4); font-size: var(--font-size-14); }
.tier__items li { color: var(--color-text-tertiary); }
.tier__items a { color: var(--color-text-primary); text-decoration-color: var(--color-border-strong); text-underline-offset: 0.25em; }
.tier__items a:hover { color: var(--color-text-accent); }
@media (min-width: 768px) { .tiers { grid-template-columns: 1fr 1fr; gap: var(--layout-grid-gap-fluid); } }

/* ---------- specs: hairline label / value rows ---------- */
.specs { display: grid; }
.specs > div { display: grid; grid-template-columns: minmax(6.5rem, 1fr) 2.4fr; gap: var(--space-4); padding-block: var(--space-3); border-top: var(--border-width-hairline) solid var(--line); font-size: var(--font-size-14); line-height: var(--font-line-height-body-sm); }
.specs > div:last-child { border-bottom: var(--border-width-hairline) solid var(--line); }
.specs dt { color: var(--color-text-tertiary); }
.specs dd { color: var(--color-text-primary); }
.specs--wide > div { grid-template-columns: minmax(9rem, 1fr) 3fr; }
.specs--wide dt { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.specs--wide dd { color: var(--color-text-secondary); }
.specs--stack > div { grid-template-columns: 1fr; gap: var(--space-1); }
.specs--stack dt { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.specs--stack dd { color: var(--color-text-secondary); }

/* ---------- 02 system: two calm panels ---------- */
.split { margin-top: var(--space-10); }
.split__pin { display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--tray); border-radius: var(--radius-md); }
.split__panels { display: grid; gap: var(--space-2); }
@media (min-width: 768px) { .split__panels { grid-template-columns: 1fr 1fr; } }
.split__panel { background: var(--card); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.split__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-neutral-100); }
@media (max-width: 767px) { .split__stage { aspect-ratio: 16 / 10; } }
.split__slide { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--tone, var(--color-neutral-100)); will-change: transform; }
.split__slide img { width: 100%; height: 100%; object-fit: contain; }
.split__bar { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-3); border-top: var(--border-width-hairline) solid var(--line); font-size: var(--font-size-14); }
.split__letter { color: var(--color-text-accent); font-weight: var(--font-weight-semibold); }
.split__word { font-weight: var(--font-weight-semibold); }
.split__rule { margin-left: var(--space-2); color: var(--color-text-tertiary); font-size: var(--font-size-13); }
@media (max-width: 1279px) { .split__rule { display: none; } }
.split__foot { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-2); }
.split__names { height: calc(var(--font-size-16) * 1.4); overflow: hidden; }
.split__names ol { font-weight: var(--font-weight-semibold); line-height: 1.4; will-change: transform; }
.split__count { font-size: var(--font-size-13); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.split__i { color: var(--color-text-primary); }
.is-static .split__stage { aspect-ratio: auto; display: grid; gap: var(--space-2); background: none; }
.is-static .split__slide { position: relative; aspect-ratio: 4 / 3; }
.is-static .split__foot { display: none; }

.system__rules { display: grid; gap: var(--space-12); margin-top: var(--space-16); }
@media (min-width: 1280px) { .system__rules { grid-template-columns: 1fr 1fr; gap: var(--layout-grid-gap-fluid); } }
.swatches { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.swatch { padding: 0; border: var(--border-width-hairline) solid var(--line); background: none; cursor: zoom-in; border-radius: var(--radius-sm); overflow: hidden; }
.swatch img { width: 100%; aspect-ratio: 216 / 89; object-fit: cover; transition: transform var(--motion-duration-slow) var(--motion-easing-out); }
@media (hover: hover) { .swatch:hover img { transform: scale(var(--motion-scale-hover-media)); } }
.system__history { margin-top: var(--space-16); display: grid; gap: var(--space-2); }
.history__boards { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: var(--space-2); margin-top: var(--space-3); }
.board { padding: 0; border: var(--border-width-hairline) solid var(--line); background: var(--card); border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; }
.board img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; }

/* ---------- item chapters ---------- */
.item__grid { display: grid; gap: var(--space-8); margin-top: var(--space-10); }
@media (min-width: 1280px) { .item__grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-10); align-items: start; } }
.stage {
  position: relative; aspect-ratio: var(--ar, 1.25); max-height: 78svh; width: 100%;
  background: var(--tone, var(--color-neutral-100)); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  transition: background-color var(--motion-duration-slow) var(--motion-easing-standard);
}
.stage__img, .split__slide img {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-neutral-1000) 5%, var(--color-neutral-1000) 95%, transparent), linear-gradient(to bottom, transparent, var(--color-neutral-1000) 5%, var(--color-neutral-1000) 95%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, var(--color-neutral-1000) 5%, var(--color-neutral-1000) 95%, transparent), linear-gradient(to bottom, transparent, var(--color-neutral-1000) 5%, var(--color-neutral-1000) 95%, transparent);
          mask-composite: intersect;
}
.stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage__open { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.stage__open:focus-visible { outline-offset: calc(var(--focus-ring-width) * -2); }
.stage__play { position: absolute; z-index: 3; right: var(--space-3); bottom: var(--space-3); display: grid; place-items: center; width: var(--space-10); height: var(--space-10); padding: 0; border: 0; border-radius: var(--radius-pill); cursor: pointer; background: var(--color-brand-black); color: var(--color-brand-lilac); }
.stage__play svg { width: var(--space-5); height: var(--space-5); }
.stage__play .i-pause, .stage__play[aria-pressed="true"] .i-play { display: none; }
.stage__play[aria-pressed="true"] .i-pause { display: inline; }
.stage__play[hidden] { display: none; }

.vers { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin-top: var(--space-4); font-size: var(--font-size-14); }
.ver { padding: var(--space-1) 0; border: 0; background: none; cursor: pointer; color: var(--color-text-tertiary); }
.ver:hover { color: var(--color-text-secondary); }
.ver[aria-pressed="true"] { color: var(--color-text-primary); text-decoration: underline; text-decoration-color: var(--color-brand-lilac); text-decoration-thickness: var(--border-width-thick); text-underline-offset: 0.4em; }
.ver__dot { color: var(--color-text-disabled); }
.views { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.view { position: relative; display: grid; gap: var(--space-1); width: 5.5rem; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: var(--font-size-12); color: var(--color-text-tertiary); }
.view img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xs); opacity: 0.55; outline: var(--border-width-thick) solid transparent; outline-offset: calc(var(--border-width-thick) * -1); transition: opacity var(--motion-duration-base) var(--motion-easing-standard); }
.view:hover img { opacity: 0.9; }
.view[aria-pressed="true"] { color: var(--color-text-primary); }
.view[aria-pressed="true"] img { opacity: 1; outline-color: var(--color-brand-lilac); }
.view--vid::after { content: ""; position: absolute; left: var(--space-2); top: var(--space-2); border-style: solid; border-width: var(--space-1) 0 var(--space-1) calc(var(--space-2) - var(--space-0-5)); border-color: transparent transparent transparent var(--color-brand-black); }
.looks__note { min-height: 3em; margin-bottom: var(--space-5); font-size: var(--font-size-14); line-height: var(--font-line-height-body-sm); color: var(--color-text-secondary); }
.getit { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-6); }
.getit .hbtn .ico { width: var(--space-4); height: var(--space-4); }
.getit__meta { margin-top: var(--space-6); font-size: var(--font-size-13); color: var(--color-text-tertiary); }
.getit .getit__meta { margin-top: 0; }
.item__extras { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-16); }
.item__extras > * { min-width: 0; }
.proofs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.proof { flex: none; display: grid; gap: var(--space-2); padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; scroll-snap-align: start; font-size: var(--font-size-12); color: var(--color-text-tertiary); }
.proof__img { display: grid; place-items: center; width: 12rem; height: 8.5rem; padding: var(--space-3); background: var(--card); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-sm); }
.proof__img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.proof:hover .proof__img { border-color: var(--color-border-strong); }
.singles { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-2); padding: var(--space-3); background: var(--card); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-sm); }
.singles button { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: var(--space-2); border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-xs); }
.singles img { max-height: 100%; width: auto; object-fit: contain; transition: transform var(--motion-duration-move) var(--motion-easing-spring); }
@media (hover: hover) { .singles button:hover img { transform: rotate(-4deg) scale(1.08); } }

/* ---------- downloads ---------- */
.dl { margin-top: var(--space-10); border-bottom: var(--border-width-hairline) solid var(--line); }
.dl__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-top: var(--border-width-hairline) solid var(--line); font-size: var(--font-size-14); }
.dl__row > .ico { color: var(--color-text-tertiary); }
.dl__name { text-decoration: none; font-weight: var(--font-weight-medium); }
.dl__name:hover { color: var(--color-text-accent); }
.dl__meta { color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.dl__get { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--space-8); padding-inline: var(--space-3); border-radius: var(--radius-xs); background: var(--color-bg-surface-raised); text-decoration: none; font-weight: var(--font-weight-semibold); font-size: var(--font-size-13); }
.dl__get .ico { color: var(--color-text-accent); }
.dl__get:hover { background: var(--color-neutral-700); }
@media (max-width: 479px) { .dl__meta { display: none; } }

/* ---------- next + foot ---------- */
.next { padding-bottom: 0; }
.next__grid { display: grid; gap: var(--space-12); margin-top: var(--space-10); }
@media (min-width: 1024px) { .next__grid { grid-template-columns: 1fr 1fr; gap: var(--layout-grid-gap-fluid); } }
.nextitem { display: grid; grid-template-columns: var(--space-12) 1fr auto; gap: var(--space-3); padding-block: var(--space-3); border-top: var(--border-width-hairline) solid var(--line); font-size: var(--font-size-14); align-items: baseline; }
.nextitem:last-child { border-bottom: var(--border-width-hairline) solid var(--line); }
.nextitem__id { color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.nextitem__t a { text-decoration: none; font-weight: var(--font-weight-medium); }
.nextitem__t a:hover { color: var(--color-text-accent); }
.nextitem__s { font-size: var(--font-size-13); color: var(--color-text-tertiary); }
.foot { margin-top: var(--layout-section-fluid); padding-bottom: var(--space-6); overflow: hidden; }
.foot__wordmark { width: 100%; height: auto; }
.foot__meta { margin-top: var(--space-6); font-size: var(--font-size-13); color: var(--color-text-tertiary); }

/* ---------- lightbox ---------- */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--space-16) var(--space-16) var(--space-6); border: 0; background: var(--color-scrim-solid); color: var(--color-text-primary); }
.lb[open] { display: grid; place-items: center; animation: lbIn var(--motion-duration-sheet) var(--motion-easing-out); }
.lb::backdrop { background: var(--color-overlay-backdrop); }
@keyframes lbIn { from { opacity: 0; } }
.lb__fig { display: grid; gap: var(--space-3); justify-items: center; max-width: 100%; max-height: 100%; min-height: 0; }
.lb__img, .lb__vid { max-width: 100%; max-height: calc(100dvh - var(--space-32)); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lb__img[hidden], .lb__vid[hidden] { display: none; }
.lb__cap { display: flex; gap: var(--space-4); font-size: var(--font-size-13); color: var(--color-text-secondary); }
.lb__count { color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.lb__btn { position: fixed; display: grid; place-items: center; width: var(--space-12); height: var(--space-12); padding: 0; border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-pill); background: var(--card); cursor: pointer; }
.lb__btn svg { width: var(--space-6); height: var(--space-6); }
.lb__btn:hover { background: var(--color-bg-surface-raised); }
.lb__prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lb__next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lb__close { right: var(--space-4); top: var(--space-4); }
.lb__btn[hidden] { display: none; }
@media (max-width: 767px) {
  .lb { padding: var(--space-16) var(--space-4) var(--space-20); }
  .lb__prev, .lb__next { top: auto; bottom: var(--space-4); transform: none; }
  .lb__prev { left: calc(50% - var(--space-12) - var(--space-2)); }
  .lb__next { right: calc(50% - var(--space-12) - var(--space-2)); }
}

/* ---------- custom cursor (fine pointers only; app.js adds html.has-cursor) ---------- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor :is(input:not([type="button"], [type="submit"], [type="checkbox"], [type="radio"], [type="range"]), textarea, select, [contenteditable=""], [contenteditable="true"]) { cursor: text !important; }
.cur { position: fixed; left: 0; top: 0; z-index: var(--z-skip-link); pointer-events: none; opacity: 0; will-change: transform; transition: opacity var(--motion-duration-fast) var(--motion-easing-standard); }
.cur.is-on { opacity: 1; }
.cur[data-state="native"] { opacity: 0; }
.cur__in { position: relative; transform-origin: 0 0; transition: transform var(--motion-duration-press) var(--motion-easing-out); }
.cur.is-down .cur__in { transform: scale(0.82, 0.72); transition-duration: var(--motion-duration-fast); }
.cur__arrow { position: absolute; left: -3px; top: -3px; width: 22px; height: auto; overflow: visible; transform-origin: 3px 3px; transition: transform var(--motion-duration-move) var(--motion-easing-spring), opacity var(--motion-duration-fast) var(--motion-easing-standard); }
.cur__edge { fill: var(--color-brand-paper); stroke: var(--color-brand-paper); stroke-width: 4.5; stroke-linejoin: round; }
.cur__body { fill: var(--color-brand-lilac); stroke: var(--color-brand-black); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.cur__shine { fill: none; stroke: var(--color-neutral-0); stroke-width: 1.2; stroke-linecap: round; opacity: 0.7; }
.cur__arrow { filter: drop-shadow(0 1px 2px var(--color-alpha-black-45)); }
.cur[data-state="link"] .cur__arrow { transform: rotate(-14deg) scale(1.15); }
.cur__blob {
  position: absolute; left: calc(var(--space-16) / -2); top: calc(var(--space-16) / -2); width: var(--space-16); height: var(--space-16);
  display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-brand-lilac); color: var(--color-brand-black);
  font-size: var(--font-size-13); font-weight: var(--font-weight-semibold); line-height: 1;
  transform: scale(0.2); opacity: 0;
  transition: transform var(--motion-duration-move) var(--motion-easing-out), opacity var(--motion-duration-fast) var(--motion-easing-standard);
}
.cur[data-state="media"] .cur__blob { transform: scale(1); opacity: 1; }
.cur[data-state="media"] .cur__arrow { transform: scale(0.4); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cur, .cur__in, .cur__arrow, .cur__blob { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
@media (max-width: 639px) { .side { max-width: none; } }

/* ---------- on the phone: the Live Activity loops (1280×800, light studio grey) ---------- */
.la__stage { position: relative; aspect-ratio: 1.6; width: 100%; margin: 0; background: var(--color-neutral-100); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.la__vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.la__vid[hidden] { display: none; }
.la .vers { margin-top: var(--space-4); }

/* ---------- our own scrollbar: hairline rail, chapter ticks, silver thumb, the chapter riding beside it ---------- */
.has-rail { scrollbar-width: none; }
.has-rail::-webkit-scrollbar { display: none; }
.rail { position: fixed; z-index: var(--z-header); top: var(--edge); bottom: var(--edge); right: 0; width: var(--space-6); display: flex; justify-content: center; }
.rail__track { position: relative; width: var(--space-4); height: 100%; cursor: pointer; }
.rail__track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: var(--border-width-hairline); background: var(--line); transform: translateX(-50%); }
.rail__tick { position: absolute; left: 50%; width: var(--space-2); height: var(--border-width-thick, 2px); margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-neutral-600); transform: translate(-50%, -50%); cursor: pointer; transition: width var(--motion-duration-fast) var(--motion-easing-standard), background-color var(--motion-duration-fast) var(--motion-easing-standard); }
.rail__tick::after { content: ""; position: absolute; inset: calc(var(--space-2) * -1) calc(var(--space-1) * -1); }
.rail__tick.is-past { background: var(--color-brand-lilac); }
.rail__tick:hover { width: var(--space-4); }
.rail__tick:hover::before { content: attr(data-label); position: absolute; right: calc(100% + var(--space-3)); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--tray); color: var(--color-text-primary); font-size: var(--font-size-13); box-shadow: var(--elevation-overlay); }
.rail__thumb { position: absolute; left: 50%; top: 0; width: calc(var(--space-1) * 1.5); margin-left: calc(var(--space-1) * -0.75); border-radius: var(--radius-pill); cursor: grab; touch-action: none;
  background: linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-neutral-200) 46%, var(--color-neutral-0) 54%, var(--color-neutral-300) 72%, var(--color-neutral-100) 100%);
  box-shadow: 0 0 0 var(--border-width-hairline) var(--color-alpha-black-72); opacity: .55; transition: opacity var(--motion-duration-base) var(--motion-easing-standard), width var(--motion-duration-fast) var(--motion-easing-standard), margin var(--motion-duration-fast) var(--motion-easing-standard); }
.rail.is-awake .rail__thumb, .rail:hover .rail__thumb { opacity: 1; }
.rail:hover .rail__thumb, .rail.is-drag .rail__thumb { width: var(--space-2); margin-left: calc(var(--space-1) * -1); }
.rail.is-drag .rail__thumb { cursor: grabbing; }
.rail__tag { position: absolute; right: calc(100% + var(--space-4)); top: 50%; display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--tray); border: var(--border-width-hairline) solid var(--line); box-shadow: var(--elevation-overlay); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(var(--space-2), -50%); transition: opacity var(--motion-duration-base) var(--motion-easing-standard), transform var(--motion-duration-base) var(--motion-easing-out); }
.rail__tag b { font-weight: var(--font-weight-semibold); font-size: 12px; color: var(--color-brand-lilac); font-feature-settings: var(--font-feature-tabular); }
.rail__tag span { font-size: var(--font-size-13); color: var(--color-text-primary); }
.rail.is-awake .rail__tag { opacity: 1; transform: translate(0, -50%); }
.rail:has(.rail__tick:hover) .rail__tag { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rail__thumb, .rail__tag, .rail__tick { transition: none; } }