/* Hallmark · route: custom (bespoke) · structure: one pinned stage, five acts, the same 32 card objects travel through all of them
 * idea: "the stack deals itself into the shared page, regroups by set, becomes the price list, fills a set, then goes back into one pile"
 * paper: oklch(94% 0.012 85) · accent: oklch(70% 0.16 155) (price up only) · display: Archivo wdth 62 · body: Archivo wdth 100 · numerals: Martian Mono
 * axes: light / grotesk-condensed / chromatic-green · gates: see report · studied: no
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · slop test: all applicable gates pass except 24 (a few 2-6px offsets inside stage overlays)
 */

/* ---------- Tokens (design.md, unchanged values + two derived) ---------- */
:root {
  --color-paper:   oklch(94% 0.012 85);
  --color-paper-2: oklch(91% 0.014 85);
  --color-paper-3: oklch(87% 0.014 85);
  --color-raised:  oklch(98% 0.008 85);   /* design.md --paper #fbf9f3 */
  --color-ink:     oklch(18% 0.006 85);
  --color-ink-2:   oklch(24% 0.006 85);
  --color-muted:   oklch(46% 0.010 85);
  --color-flat:    oklch(64% 0.006 85);
  --color-rule:    oklch(18% 0.006 85 / .14);
  --color-rule-2:  oklch(18% 0.006 85 / .32);
  --color-accent:  oklch(70% 0.16 155);   /* the one green: price up */
  --color-accent-deep: oklch(50% 0.13 155); /* --signal-deep, darkened so small green text clears 4.5:1 on bone */
  --color-focus:   var(--color-accent);
  --color-shadow:  oklch(18% 0.006 85 / .22);

  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Martian Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-xs: .75rem; --text-sm: .875rem; --text-md: 1.0625rem; --text-lg: 1.25rem;
  --text-h2: clamp(2.1rem, 1.2rem + 3.4vw, 4.4rem);
  --text-display: clamp(3.4rem, 1rem + 9.4vw, 10.5rem);
  --text-close: clamp(2rem, 1rem + 3.6vw, 4.6rem);

  --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms;

  --radius-card: 7px; --radius-pill: 999px;
  --bar-h: 56px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-md)/1.55 var(--font-body);
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 50; background: var(--color-ink); color: var(--color-paper); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); text-decoration: none; }
.skip:focus-visible { top: var(--space-3); }

.reg-open .only-invite, html:not(.reg-open) .only-open { display: none !important; }

/* ---------- Top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 56px);
  background: var(--color-paper); border-bottom: 1px solid var(--color-rule);
}
.mark { font: 800 1.35rem/1 var(--font-display); font-variation-settings: 'wdth' 66; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.bar-link { font-weight: 600; text-decoration: none; white-space: nowrap; padding: var(--space-2) 0; border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.bar-link:hover { border-bottom-color: var(--color-ink); }

/* ---------- Type ---------- */
.display {
  margin: 0; font: 850 var(--text-display)/.84 var(--font-display);
  font-variation-settings: 'wdth' 62; letter-spacing: -.025em;
  overflow-wrap: anywhere; min-width: 0; text-wrap: balance;
}
.h2 {
  margin: 0 0 var(--space-6); font: 800 var(--text-h2)/.9 var(--font-display);
  font-variation-settings: 'wdth' 64; letter-spacing: -.018em; text-wrap: balance;
  overflow-wrap: anywhere;
}
.copy p { margin: 0; max-width: 46ch; color: var(--color-ink-2); }
.lede { font-size: var(--text-lg); line-height: 1.5; max-width: 40ch !important; }
.url { font: 500 .86em/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; white-space: nowrap; padding-bottom: 2px; border-bottom: 2px solid var(--color-ink); }
.mono { font-family: var(--font-mono); font-variation-settings: 'wdth' 87.5; font-variant-numeric: tabular-nums; }

/* ---------- CTA ---------- */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-8); }
.cta-note { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-muted) !important; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-6);
  background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill);
  font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-2 { font-weight: 600; white-space: nowrap; text-underline-offset: 4px; text-decoration-thickness: 1.5px; padding: var(--space-2) 0; }
.btn-2:hover { text-decoration-thickness: 3px; }

/* ---------- Story: one pinned stage + acts that scroll over it ---------- */
.story { position: relative; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 1;
  overflow: hidden; contain: layout paint;
}
.acts { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.acts .copy, .acts .closing { pointer-events: auto; }
.still-fig { display: none; }

.act { position: relative; padding: 0 clamp(16px, 4vw, 56px); }
.act--hero { min-height: 100svh; padding-top: calc(var(--bar-h) + clamp(2rem, 9vh, 7rem)); padding-bottom: var(--space-12); }
.act--hero .display { max-width: 7.6em; }
.act--hero .lede { margin-top: var(--space-8); }
.act--gallery { min-height: 230svh; }
.act--prices  { min-height: 200svh; }
.act--set     { min-height: 230svh; }
.act--close   { min-height: 100svh; padding-bottom: var(--space-16); }

.act:not(.act--hero) .copy { width: min(32vw, 31rem); }
.moving .act--gallery .copy,
.moving .act--prices .copy,
.moving .act--set .copy { position: sticky; top: 30svh; }
.act--prices .copy { margin-left: auto; }
.act--close .copy { padding-top: 26svh; }

.closing { margin-top: 18svh; width: min(46vw, 40rem); }
.closing-line {
  margin: 0; font: 800 var(--text-close)/.95 var(--font-display);
  font-variation-settings: 'wdth' 64; letter-spacing: -.015em; text-wrap: balance;
}

/* ---------- Stage objects ---------- */
.card {
  position: absolute; left: 0; top: 0; width: 300px; aspect-ratio: 245 / 342;
  transform-origin: 0 0; border-radius: 4.6% / 3.3%;
  background: var(--color-paper-2);
  box-shadow: 0 0 0 1px var(--color-rule), 0 14px 28px -18px var(--color-shadow);
  will-change: transform, opacity;
}
.card img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.card.ghost { background: var(--color-paper-3); box-shadow: 0 0 0 1px var(--color-rule-2); }
.card.ghost img { filter: grayscale(1) contrast(.9); opacity: .38; }
.card.empty { display: grid; place-items: center; padding: 12%;
  background: repeating-linear-gradient(135deg, var(--color-paper-2) 0 6px, var(--color-paper-3) 6px 12px); }
.card.empty span { font: 700 1.4rem/1.1 var(--font-display); font-variation-settings: 'wdth' 66; text-align: center; }

.ov { position: absolute; left: 0; top: 0; opacity: 0; will-change: opacity; }

/* gallery page head (address + total) */
.ov-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-ink); padding-bottom: var(--space-2); }
.ov-head .addr { font: 500 var(--text-sm)/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; white-space: nowrap; }
.ov-head .cnt { font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-muted); white-space: nowrap; }

/* the total: one object that grows from the page head into the price act */
.total { transform-origin: 0 0; white-space: nowrap; font: 500 72px/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; letter-spacing: -.04em; font-variant-numeric: tabular-nums; will-change: transform, opacity; }
.total small { font-size: .42em; letter-spacing: 0; color: var(--color-muted); margin-left: .3em; }

/* set labels (regroup) */
.setlab { font: 700 var(--text-sm)/1.1 var(--font-display); font-variation-settings: 'wdth' 70; white-space: nowrap; display: flex; gap: .5em; align-items: baseline; border-top: 2px solid var(--color-ink); padding-top: 4px; }
.setlab b { font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-muted); }
.setlab { text-overflow: ellipsis; }
.setlab.small { font-size: 11px; border-top-width: 1px; font-weight: 600; }

/* price act */
.chart { position: absolute; overflow: hidden; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .line { fill: none; stroke: var(--color-ink); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .grid { stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .gap { fill: var(--color-paper-2); }
.wipe { position: absolute; inset: -4px -4px -4px -4px; background: var(--color-paper); transform-origin: 100% 50%; will-change: transform; }
.axis { position: absolute; font: 500 11px/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; color: var(--color-muted); white-space: nowrap; }
.rows { position: absolute; }
.row { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.row.hdr { border-top: 1px solid var(--color-ink); }
.row.hdr .nm, .row.hdr .pr, .row.hdr .dl { font: 500 11px/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; color: var(--color-muted); }
.row .nm { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row .nm i { font-style: normal; font-weight: 400; color: var(--color-muted); margin-left: .4em; }
.row .pr { font: 500 var(--text-sm)/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; font-variant-numeric: tabular-nums; text-align: right; }
.row .dl { font: 500 var(--text-xs)/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; font-variant-numeric: tabular-nums; text-align: right; min-width: 7.5ch; color: var(--color-muted); }
.row .dl.up { color: var(--color-accent-deep); }
.today { font: 500 var(--text-xs)/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; white-space: nowrap; color: var(--color-muted); }
.today .up { color: var(--color-accent-deep); }

/* set act */
.sethead { display: flex; align-items: baseline; gap: var(--space-4); white-space: nowrap; }
.sethead img { height: 42px; width: auto; display: block; align-self: center; }
.sethead .of { font: 500 var(--text-sm)/1 var(--font-mono); font-variation-settings: 'wdth' 87.5; }
.sethead .of span { color: var(--color-muted); }
.setmap { display: grid; gap: 2px; }
.cell { aspect-ratio: 245 / 342; background: var(--color-ink-2); border-radius: 1.5px; opacity: 0; transform: scale(.4); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.cell.on { opacity: 1; transform: none; }
.cell.miss { background: transparent; box-shadow: inset 0 0 0 1px var(--color-rule-2); opacity: 1; transform: none; }
.cell.slice:not(.miss) { background: var(--color-muted); }
.slicebar { position: absolute; height: 2px; background: var(--color-ink); transform-origin: 0 50%; }
.tag { position: absolute; font: 500 11px/1.25 var(--font-mono); font-variation-settings: 'wdth' 87.5; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink); }
.tag.miss { color: var(--color-muted); }

/* ---------- Static page (reduced motion / ?motion=off) ---------- */
.still .stage { display: none; }
.still .acts { margin-top: 0; pointer-events: auto; }
.still .act { min-height: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: center; padding-top: var(--space-16); padding-bottom: var(--space-16); }
.still .act--hero { padding-top: calc(var(--bar-h) + var(--space-12)); }
.still .act--hero .copy { grid-column: 1 / -1; grid-row: 1; }
.still .act--hero .still-fig { grid-column: 1 / -1; grid-row: 2; height: min(60vh, 520px); }
.still .act .copy { width: auto; }
.still .act--prices .copy { order: 2; margin: 0; }
.still .act--close .copy { padding-top: 0; }
.still .act--close .closing { grid-column: 1 / -1; margin-top: var(--space-8); width: auto; max-width: 40rem; }
.still .still-fig { display: block; position: relative; height: min(78vh, 680px); min-height: 360px; overflow: hidden; }
.still .ov { opacity: 1; }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 3; background: var(--color-paper); border-top: 1px solid var(--color-rule); padding: var(--space-8) clamp(16px, 4vw, 56px) var(--space-12); font-size: var(--text-sm); color: var(--color-muted); }
.foot p { margin: 0; max-width: 70ch; }

/* ---------- Narrow screens: stage on top, copy underneath ---------- */
@media (max-width: 759px) {
  :root { --split: 54svh; }
  .act:not(.act--hero) .copy { width: auto; }
  .moving .act--gallery .copy,
  .moving .act--prices .copy,
  .moving .act--set .copy { top: calc(var(--split) + 8px); }
  .moving .act .copy, .moving .closing { background: var(--color-paper); padding: var(--space-4) 0 var(--space-6); box-shadow: 0 -12px 12px -4px var(--color-paper); }
  .moving .act--gallery .copy, .moving .act--prices .copy, .moving .act--set .copy, .moving .act--close .copy { margin-top: calc(var(--split) + 8px); }
  .moving .act--hero { padding-top: calc(var(--bar-h) + 33svh); }
  .moving .act--hero .copy { padding-top: var(--space-3); }
  .act--close .copy { padding-top: 0; }
  .moving .act--close { background: linear-gradient(transparent calc(var(--split) + 8px), var(--color-paper) calc(var(--split) + 8px)); }
  .moving .act--close .closing { box-shadow: none; }
  .moving .act--close { padding-top: calc(var(--split) + 8px); }
  .moving .act--close .copy { margin-top: 0; }
  .closing { width: auto; margin-top: var(--space-8); }
  .h2 { margin-bottom: var(--space-4); }
  .ov-head .cnt { visibility: hidden; }
  .tag.miss { font-size: 10px; }
  .lede { font-size: var(--text-md); }
  .act--hero .lede { margin-top: var(--space-6); }
  .cta { margin-top: var(--space-6); }
  .still .act { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .still .act--prices .copy { order: 0; }
  .still .still-fig { height: 72vh; min-height: 420px; max-height: 620px; }
  .still .act--hero .still-fig { height: 46vh; min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}