/* Hallmark · genre: editorial · macrostructure: Manifesto · theme: custom (LBNZ brand-locked)
 * vibe: "evidence-led civic declaration, cinematic poster, apolitical"
 * paper oklch(96.9% 0.0255 94.7) #faf5e2 · accent oklch(69.7% 0.1648 47.7) #ed7833 warm
 * display Klyno ExtraBold · body Klyno Light/Regular · single family (Manifesto collapse, deliberate)
 * axes: light-paper / display-heavy / warm-accent
 * enrichment: licensed photography bleeds + receipt artefact + countdown · nav: edge + stuck glass · footer: Ft2
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */

/* ---- Let's Build NZ · design tokens (v4) -------------------------------- */

:root {
  /* Colour: brand-exact, OKLCH */
  --color-navy:        oklch(23.8% 0.0433 233.4);   /* Jet Black  #052230 */
  --color-navy-2:      oklch(27.6% 0.0445 233.4);   /* elevated navy surface */
  --color-navy-rule:   oklch(35% 0.044 233.4);      /* rules on navy */
  --color-paper:       oklch(96.9% 0.0255 94.7);    /* Ivory Mist #faf5e2 */
  --color-paper-2:     oklch(94% 0.028 94.7);       /* deeper ivory */
  --color-rule:        oklch(85.5% 0.031 94.7);     /* hairline on ivory */
  --color-rule-dash:   oklch(70% 0.03 94.7);        /* receipt dashes */
  --color-ink:         oklch(23.8% 0.0433 233.4);   /* ink = navy */
  --color-ink-muted:   oklch(44% 0.038 233.4);      /* secondary text on ivory */
  --color-ivory-dim:   oklch(90% 0.022 94.7);       /* secondary text on navy */
  --color-accent:      oklch(69.7% 0.1648 47.7);    /* Pumpkin #ed7833 */
  --color-accent-deep: oklch(51% 0.145 47.7);       /* accent display text on light */
  --color-onyx:        oklch(17.4% 0.0017 17.3);    /* Onyx #111010 */
  --color-onyx-rule:   oklch(35% 0.005 17.3);
  --color-slot:        oklch(10% 0.002 17.3);
  --color-focus:       oklch(69.7% 0.1648 47.7);

  /* Scorecard rating chips: appear nowhere except scorecard ratings */
  --rate-c: oklch(62% 0.11 170);
  --rate-p: oklch(76% 0.13 75);
  --rate-n: oklch(56% 0.17 25);
  --rate-0: oklch(62% 0.012 233);

  /* Scrims + translucent rules */
  --scrim-strong:   oklch(23.8% 0.0433 233.4 / 0.95);
  --scrim-mid:      oklch(23.8% 0.0433 233.4 / 0.55);
  --scrim-soft:     oklch(23.8% 0.0433 233.4 / 0.22);
  --rule-on-dark:   oklch(96.9% 0.0255 94.7 / 0.26);
  --ivory-ghost:    oklch(96.9% 0.0255 94.7 / 0.14);
  --shadow-ink:     oklch(17.4% 0.0017 17.3 / 0.25);
  --shadow-deep:    oklch(17.4% 0.0017 17.3 / 0.5);

  /* Glass: translucent surfaces over photography only */
  --glass-dark:        oklch(25% 0.044 233.4 / 0.5);
  --glass-dark-strong: oklch(24% 0.044 233.4 / 0.72);
  --glass-light:       oklch(96.9% 0.0255 94.7 / 0.82);
  --glass-blur: 16px;

  /* Type: Klyno (brand), loaded locally */
  --font-display: "Klyno", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Klyno", "Archivo", ui-sans-serif, system-ui, sans-serif;

  /* Scale: one 17px base, 14px small, three display steps */
  --text-sm:   0.875rem;
  --text-base: 1.125rem;
  --lh-body:   1.6;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-beat:  clamp(1.6rem, 2.4vw + 0.6rem, 2.7rem);
  --display-1:  clamp(2.8rem, 8.4vw, 7.2rem);
  --display-2:  clamp(2.05rem, 3.4vw + 0.8rem, 3.7rem);
  --display-3:  clamp(1.65rem, 3vw + 0.5rem, 3.2rem);
  --track-1: -0.02em;
  --track-2: -0.012em;
  --track-3: -0.01em;

  /* Space: 4pt scale + scene pacing */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --space-scene: clamp(6rem, 12svh, 9rem);

  /* Motion: three weights: UI micro, reveal, cinematic */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cine:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-micro:  90ms;
  --dur-short:  160ms;
  --dur-long:   320ms;
  --dur-reveal: 640ms;
  --dur-line:   720ms;
  --dur-cine:   1600ms;

  /* Structure: one grid, one unit, one control height, two radii */
  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --gutter-col: 2rem;
  --measure: 60ch;
  --rule-w: 1px;
  --rule-strong: 2px;
  --unit: 1.75rem;
  --control-h: 3rem;
  --radius-ctl: 4px;
  --radius-card: 12px;
  --shadow-card: 0 8px 24px var(--shadow-ink);

  /* Z scale */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
}

/* Hallmark · genre: editorial · macrostructure: Manifesto · theme: custom (LBNZ brand-locked) · v5 "glass film"
 * One fixed photographic stage dissolves between scenes; every content block is a glass panel over it.
 * The receipt is the one paper object. Motion: RISE (masks) · PRINT (receipt) · FILL (56 circles) · DISSOLVE (stage).
 */

/* ---- Klyno ------------------------------------------------------------ */
/* Loaded by assets/css/fonts.css in WordPress. */

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; font-variant-numeric: tabular-nums; }
body {
  overflow-x: clip;
  background: var(--color-navy);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-accent); color: var(--color-navy); }
img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.on-light, .on-light * { --color-focus: var(--color-ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: var(--space-md); top: -4rem;
  background: var(--color-navy); color: var(--color-paper);
  padding: var(--space-sm) var(--space-md); z-index: 600;
  text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: top var(--dur-micro) var(--ease-out);
}
.skip:focus-visible { top: var(--space-md); }

.max { width: 100%; max-width: 76rem; margin-inline: auto; }
.measure { max-width: var(--measure); font-weight: 500; color: var(--color-paper); }
.dim { color: var(--color-ivory-dim); }
/* Klyno's comma sits small and high; give it a touch more presence in prose */
.js .cm { font-size: 1.18em; line-height: 0; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: var(--display-1); letter-spacing: var(--track-1); line-height: 1.02; }
h2 { font-size: var(--display-2); letter-spacing: var(--track-2); line-height: 1.06; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
strong { font-weight: 600; color: var(--color-paper); }

/* Masked line reveal: the page's one display gesture */
.mask { display: block; overflow: clip; padding-block: 0.08em; margin-block: -0.08em; }
.mask > b { display: block; font-weight: inherit; }

/* ---- The stage: one film, dissolving between scenes -------------------- */
.stage { position: fixed; inset: 0; z-index: -1; overflow: clip; background: var(--color-navy); }
.stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  filter: saturate(0.8) contrast(1.06) brightness(0.9);
  transition: opacity 1100ms var(--ease-in-out);
}
.stage img.is-active { opacity: 1; }
.stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, oklch(20% 0.035 233.4 / 0.62) 0%, oklch(20% 0.035 233.4 / 0.3) 55%, oklch(20% 0.035 233.4 / 0.2) 100%),
    linear-gradient(to top, oklch(20% 0.035 233.4 / 0.9) 0%, oklch(20% 0.035 233.4 / 0.42) 45%, oklch(20% 0.035 233.4 / 0.45) 100%);
}

/* ---- Glass: the interface layer ---------------------------------------- */
.glass {
  background: var(--color-navy-2);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--ivory-ghost), 0 24px 60px oklch(17.4% 0.0017 17.3 / 0.35);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass {
    background: oklch(24% 0.042 233.4 / 0.66);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    backdrop-filter: blur(24px) saturate(1.15);
  }
  @media (max-width: 40rem) { .glass { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
}
.glass--pad { padding: clamp(1.25rem, 3vw, 2.5rem); }

/* ---- Nav: a glass bar, always over film -------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky);
  padding: calc(var(--space-sm) + env(safe-area-inset-top, 0px)) max(var(--page-gutter), env(safe-area-inset-right, 0px)) var(--space-sm) max(var(--page-gutter), env(safe-area-inset-left, 0px));
  background: var(--glass-dark-strong);
  box-shadow: 0 1px 0 var(--ivory-ghost);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav { background: oklch(24% 0.044 233.4 / 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
}
.nav__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.nav__brand { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.nav__brand img { height: clamp(2.3rem, 5vw, 2.9rem); width: auto; }
.nav__brand .inz { height: clamp(1.7rem, 3.6vw, 2.1rem); }
.nav__brand i { width: 1px; height: 2rem; background: var(--rule-on-dark); }
.nav__progress {
  position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--color-accent);
  transform-origin: left; transform: scaleX(0);
}
.nav__links { display: none; gap: var(--space-lg);
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
}
.nav__links a { position: relative; color: var(--color-paper); text-decoration: none; white-space: nowrap; padding-block: 0.25rem; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a[aria-current]::after { transform: none; }
@media (min-width: 64rem) { .nav__links { display: flex; } }
.nav__actions { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }
/* Phones and tablets: a menu button opens the section links as a sheet under the bar */
.nav__menu {
  display: grid; place-content: center; gap: 4px; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1.5px solid var(--rule-on-dark); border-radius: 50%; background: none; cursor: pointer;
}
.nav__menu i { display: block; width: 1.1rem; height: 2px; border-radius: 1px; background: var(--color-paper); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.nav.is-open .nav__menu i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__menu i:nth-child(2) { opacity: 0; }
.nav.is-open .nav__menu i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__menu:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav__links-signup { display: none; }
@media (max-width: 63.99rem) {
  .nav.is-open .nav__links {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--space-xs) var(--page-gutter) var(--space-lg);
    background: var(--scrim-strong); box-shadow: 0 1px 0 var(--ivory-ghost) inset, 0 24px 48px oklch(17.4% 0.0017 17.3 / 0.45);
  }
  .nav.is-open .nav__links a { font-size: var(--text-lg); padding: var(--space-sm) 0; border-bottom: var(--rule-w) solid var(--ivory-ghost); }
  .nav.is-open .nav__links a::after { display: none; }
  .nav.is-open .nav__links-signup { display: block; color: var(--color-accent); border-bottom: 0; }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (max-width: 63.99rem) { .nav.is-open .nav__links { -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); } }
}
@media (min-width: 64rem) { .nav__menu { display: none; } }
/* The smallest phones: dots tighten and the strip's label goes */
@media (max-width: 22.5rem) { .till__dots { gap: 0.28rem; } .till__dots span { display: none; } }
/* The smallest phones drop the second mark so the bar never crowds */
@media (max-width: 22.5rem) { .nav__brand .inz, .nav__brand i { display: none; } }
.nav .btn { transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.nav.at-signup .btn { opacity: 0; visibility: hidden; pointer-events: none; }
.nav .nav__signup { display: none; }
@media (min-width: 64rem) { .nav .nav__signup { display: inline-grid; } }
.nav__share .long { display: none; }
@media (min-width: 80rem) { .nav__share .long { display: inline; } .nav__share .short { display: none; } }

.btn {
  display: inline-grid; place-content: center;
  background: var(--color-accent);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  border: 0; border-radius: 99px;
  padding: 0 1.5rem;
  min-height: var(--control-h);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: color-mix(in oklch, var(--color-accent), white 8%); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.btn--big { min-height: 4rem; font-size: var(--text-md); padding-inline: 2.2rem; }
.btn--ghost { background: transparent; color: var(--color-paper); box-shadow: inset 0 0 0 1.5px var(--rule-on-dark); }
.btn--ghost:hover { background: var(--ivory-ghost); }
.share {
  font: inherit; font-family: var(--font-display); font-weight: 600;
  color: inherit; background: none; border: 0; cursor: pointer;
  padding: 0 0 2px; border-bottom: 2px solid var(--color-accent);
  white-space: nowrap;
}

/* Section frame */
.scene { position: relative; padding: var(--space-scene) var(--page-gutter) var(--space-2xl); scroll-margin-top: 4.5rem; }
.hero, .bill, .bleed, .pivot, .signup { grid-template-columns: minmax(0, 1fr); }

/* ---- Hero · title card over Parliament ---------------------------------- */
.hero { min-height: min(100svh, 68rem); display: grid; align-content: end; padding-top: var(--space-4xl); padding-bottom: var(--space-3xl); }
@media (max-width: 40rem) {
  .hero { min-height: auto; align-content: start; padding-top: calc(var(--nav-h, 4.5rem) + var(--space-xl)); padding-bottom: var(--space-2xl); }
  .hero__meta { margin-top: var(--space-lg); }
}
.hero h1 { display: grid; max-width: none; }
.hero h1 .line-2 { color: var(--color-accent); }
.hero__sub {
  margin-top: var(--space-md);
  max-width: 26ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--display-3); line-height: 1.14; letter-spacing: var(--track-3);
  color: var(--color-ivory-dim);
  text-wrap: balance;
}
.hero__meta {
  margin-top: var(--space-xl);
  display: grid; gap: var(--space-md) var(--space-xl);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
}
@media (min-width: 60rem) { .hero__meta { grid-template-columns: auto minmax(0, 1fr) auto; } }
.who { display: flex; align-items: center; gap: var(--space-sm); }
.who__label {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-dim);
  text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap;
}
.who__mark { height: 2.4rem; width: auto; }
.who__line {
  padding-left: var(--space-md); border-left: 2px solid var(--color-accent);
    font-weight: 500; color: var(--color-paper); line-height: 1.4; text-wrap: balance;
}
.clock {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem;
  padding: 0.6rem 1rem;
  background: oklch(19% 0.032 233.4 / 0.55);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--rule-on-dark);
}
.clock small {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-dim);
  text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap;
}
.clock b { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-weight: 400; }
.clock .n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1;
  letter-spacing: -0.025em; color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.clock .u {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-md); color: var(--color-paper);
}
.clock .t {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-md); color: var(--color-ivory-dim);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  padding-left: 0.25rem;
}

/* ---- Story · over the crew ------------------------------------------------ */
.story .max { display: grid; gap: var(--space-2xl); }
.story { display: grid; align-content: center; }
@media (min-width: 64rem) { .story { min-height: 52svh; } .story .beat { font-size: clamp(2rem, 3vw + 0.6rem, 3.4rem); max-width: 22ch; } }
.beat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-beat);
  letter-spacing: var(--track-3);
  line-height: 1.1;
  overflow-wrap: break-word;
  text-wrap: balance;
  max-width: 30ch;
}
.beat + .beat { margin-top: var(--space-lg); }
.figure {
  margin-top: var(--space-md);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 6.4vw + 0.4rem, 6.4rem); line-height: 1;
  letter-spacing: -0.025em; color: var(--color-accent);
}
.src {
  margin-top: var(--space-md);
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-sm); font-weight: 400;
  color: var(--color-ivory-dim);
}
.src a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--color-navy-rule); }
.src a:hover { text-decoration-color: var(--color-accent); }

/* ---- The bill · one paper object in the film ---------------------------- */
.bill { padding-bottom: var(--space-2xl); }
.till { display: grid; gap: var(--space-xl); align-items: start; }
.till > *, .till__pick > * { min-width: 0; }
@media (min-width: 64rem) { .till { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.till__pick { --pick-pad: clamp(1.25rem, 3vw, 2.5rem); padding: var(--pick-pad); }
.till__pick .measure { margin-top: var(--space-md); }
.till__sub { margin-top: var(--space-sm); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--display-3); line-height: 1.05; letter-spacing: var(--track-3); color: var(--color-accent); }
/* The picker is a filmstrip everywhere: one row, snapping, the next tile always peeking in */
.till__strip { display: block; min-width: 0; margin-top: var(--space-lg); }
.till__grid {
  display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding-inline: var(--pick-pad); margin: 0 calc(var(--pick-pad) * -1); padding: 0 var(--pick-pad);
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.till__grid::-webkit-scrollbar { display: none; }
.till__grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.till__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xs); }
.till__dots { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; min-width: 0; min-height: 1.5rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-dim); }
.till__dots span { margin-right: 0.35rem; }
.till__dots i { width: 0.45rem; height: 0.45rem; border-radius: 99px; background: var(--rule-on-dark); transition: width var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.till__dots i.is-on { width: 1.1rem; background: var(--color-accent); }
@media (min-width: 40rem) { .till__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
  flex: 0 0 11rem; scroll-snap-align: start;
  display: grid; gap: 0.3rem; align-content: start; padding: 0; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tile img { -webkit-user-drag: none; }
.tile img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px;
  filter: saturate(0.6) brightness(0.8); box-shadow: 0 0 0 1px var(--ivory-ghost);
  transition: filter var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.tile:hover img, .tile:focus-visible img { filter: saturate(0.9) brightness(0.95); }
.tile.is-on img { filter: none; box-shadow: 0 0 0 3px var(--color-accent); }
.tile:active img { transform: scale(0.98); }
.tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tile__name { margin-top: 0.25rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); line-height: 1.2; text-wrap: balance; }
.tile.is-on .tile__name { color: var(--color-accent); }
.tile__where { font-size: var(--text-sm); color: var(--color-ivory-dim); }
/* Single column (phones and tablets): the panel dissolves, the heading sits on the film, and the
   tiles become a filmstrip pinned under the nav, so a tap always reprints a receipt you can see */
@media (max-width: 63.99rem) {
  .till { gap: var(--space-md); }
  .till__pick { display: contents; }
  .till__pick > .measure { margin-top: var(--space-md); }
    .till__strip {
    display: block; min-width: 0; position: sticky; top: var(--nav-h, 4.5rem); z-index: 5; margin-top: var(--space-xs);
    margin: var(--space-sm) calc(var(--page-gutter) * -1) 0; padding: var(--space-sm) var(--page-gutter) var(--space-xs);
    background: var(--color-navy-2); box-shadow: 0 1px 0 var(--ivory-ghost), 0 12px 24px oklch(17.4% 0.0017 17.3 / 0.25);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .till__strip { background: var(--glass-dark-strong); -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); }
  }
    .till__grid { scroll-padding-inline: var(--page-gutter); margin: 0 calc(var(--page-gutter) * -1); padding: 0 var(--page-gutter); }
  .tile { flex-basis: 32vw; min-width: 8rem; max-width: 11rem; gap: 0.2rem; }
  .tile img { aspect-ratio: 3 / 2; }
  .till__sub { font-size: clamp(1.35rem, 5.2vw, 1.7rem); }
  .till__pick > .measure { font-size: var(--text-base); }
  .tile__name { font-size: var(--text-sm); margin-top: 0.15rem; }
  .tile__where { display: none; }
    .bill__rig { margin-top: 0; }
}
.sound {
  font: inherit; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-ivory-dim); background: none; border: 1px solid var(--rule-on-dark); border-radius: 99px;
  min-height: 2.75rem; padding: 0 1rem; cursor: pointer;
}
.sound[aria-pressed="true"] { color: var(--color-paper); border-color: var(--color-accent); }
.sound:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* The till prints one item at a time; tapping another project reprints the paper */
.js .bill .items .row:not(.is-current) { display: none; }
.bill__rig { position: relative; isolation: isolate; max-width: 34rem; margin-inline: auto; color: var(--color-ink); }
/* The sheet carries the shadow, so it follows the serrated edges of the paper inside it */
.bill__sheet { filter: drop-shadow(0 2px 3px oklch(17.4% 0.0017 17.3 / 0.35)) drop-shadow(0 28px 44px oklch(17.4% 0.0017 17.3 / 0.5)); }
.bill__paper {
  --pad-x: var(--space-xl);
  --pad-top: calc(var(--space-xl) + 6px);
    --tear-h: 3.25rem;
  --pad-bottom: calc(var(--tear-h) + var(--space-md));
  position: relative;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  /* thermal paper: a faint horizontal grain, a shade of curl at both tear edges */
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, oklch(0% 0 0 / 0.013) 3px 4px),
    linear-gradient(to bottom, oklch(0% 0 0 / 0.06), transparent 22px),
    linear-gradient(to top, oklch(0% 0 0 / 0.05), transparent 22px),
    var(--color-paper);
  clip-path: polygon(0% 6px, 1.25% 0%, 2.5% 6px, 3.75% 0%, 5% 6px, 6.25% 0%, 7.5% 6px, 8.75% 0%, 10% 6px, 11.25% 0%, 12.5% 6px, 13.75% 0%, 15% 6px, 16.25% 0%, 17.5% 6px, 18.75% 0%, 20% 6px, 21.25% 0%, 22.5% 6px, 23.75% 0%, 25% 6px, 26.25% 0%, 27.5% 6px, 28.75% 0%, 30% 6px, 31.25% 0%, 32.5% 6px, 33.75% 0%, 35% 6px, 36.25% 0%, 37.5% 6px, 38.75% 0%, 40% 6px, 41.25% 0%, 42.5% 6px, 43.75% 0%, 45% 6px, 46.25% 0%, 47.5% 6px, 48.75% 0%, 50% 6px, 51.25% 0%, 52.5% 6px, 53.75% 0%, 55% 6px, 56.25% 0%, 57.5% 6px, 58.75% 0%, 60% 6px, 61.25% 0%, 62.5% 6px, 63.75% 0%, 65% 6px, 66.25% 0%, 67.5% 6px, 68.75% 0%, 70% 6px, 71.25% 0%, 72.5% 6px, 73.75% 0%, 75% 6px, 76.25% 0%, 77.5% 6px, 78.75% 0%, 80% 6px, 81.25% 0%, 82.5% 6px, 83.75% 0%, 85% 6px, 86.25% 0%, 87.5% 6px, 88.75% 0%, 90% 6px, 91.25% 0%, 92.5% 6px, 93.75% 0%, 95% 6px, 96.25% 0%, 97.5% 6px, 98.75% 0%, 100% 6px, 100% calc(100% - 6px), 98.75% 100%, 97.5% calc(100% - 6px), 96.25% 100%, 95% calc(100% - 6px), 93.75% 100%, 92.5% calc(100% - 6px), 91.25% 100%, 90% calc(100% - 6px), 88.75% 100%, 87.5% calc(100% - 6px), 86.25% 100%, 85% calc(100% - 6px), 83.75% 100%, 82.5% calc(100% - 6px), 81.25% 100%, 80% calc(100% - 6px), 78.75% 100%, 77.5% calc(100% - 6px), 76.25% 100%, 75% calc(100% - 6px), 73.75% 100%, 72.5% calc(100% - 6px), 71.25% 100%, 70% calc(100% - 6px), 68.75% 100%, 67.5% calc(100% - 6px), 66.25% 100%, 65% calc(100% - 6px), 63.75% 100%, 62.5% calc(100% - 6px), 61.25% 100%, 60% calc(100% - 6px), 58.75% 100%, 57.5% calc(100% - 6px), 56.25% 100%, 55% calc(100% - 6px), 53.75% 100%, 52.5% calc(100% - 6px), 51.25% 100%, 50% calc(100% - 6px), 48.75% 100%, 47.5% calc(100% - 6px), 46.25% 100%, 45% calc(100% - 6px), 43.75% 100%, 42.5% calc(100% - 6px), 41.25% 100%, 40% calc(100% - 6px), 38.75% 100%, 37.5% calc(100% - 6px), 36.25% 100%, 35% calc(100% - 6px), 33.75% 100%, 32.5% calc(100% - 6px), 31.25% 100%, 30% calc(100% - 6px), 28.75% 100%, 27.5% calc(100% - 6px), 26.25% 100%, 25% calc(100% - 6px), 23.75% 100%, 22.5% calc(100% - 6px), 21.25% 100%, 20% calc(100% - 6px), 18.75% 100%, 17.5% calc(100% - 6px), 16.25% 100%, 15% calc(100% - 6px), 13.75% 100%, 12.5% calc(100% - 6px), 11.25% 100%, 10% calc(100% - 6px), 8.75% 100%, 7.5% calc(100% - 6px), 6.25% 100%, 5% calc(100% - 6px), 3.75% 100%, 2.5% calc(100% - 6px), 1.25% 100%, 0% calc(100% - 6px));
}
.bill__ink { position: relative; }
/* The print head: a carriage a little wider than the paper, stepping down the strip */
.bill__head {
    position: absolute; left: var(--pad-x); right: var(--pad-x); top: var(--pad-top); bottom: var(--pad-bottom);
  pointer-events: none; opacity: 0;
}
.bill__head::after {
  content: ""; position: absolute; top: -2px; height: 4px;
  left: calc(var(--pad-x) * -1 - 6px); right: calc(var(--pad-x) * -1 - 6px);
  border-radius: 2px;
  background: oklch(22% 0.01 40);
  box-shadow: 0 3px 8px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(36% 0.01 40 / 0.6);
}
.rc__head { text-align: center; padding-bottom: var(--space-md); }
.rc__org { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); }
.rc__title { margin-top: var(--space-2xs); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--text-xl); letter-spacing: 0; line-height: 1.1; }
.rc__meta { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-muted); }
.bill dl { margin: 0; border-top: 3px double var(--color-ink); }
.bill dl + dl { margin-top: var(--space-xs); }
.bill .row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md);
  align-items: start; padding-block: var(--space-md);
  border-bottom: var(--rule-w) dashed var(--color-rule-dash);
}
.bill dl > .row:last-child { border-bottom: 0; }
.bill dt { font-size: var(--text-base); line-height: 1.35; text-wrap: pretty; }
.bill dt small, .row__note { display: block; margin-top: 0.2rem; font-size: var(--text-sm); line-height: 1.35; color: var(--color-ink-muted); }
.bill dd {
  margin: 0; padding-top: 0.12em; text-align: right;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
  line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.bill .row--key dd { color: var(--color-accent-deep); }
/* Line items: a printed thumbnail, the project, then its stop-start record as dated stamps */
.bill .items { --thumb: 4.25rem; }
.bill .items dt { display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr); gap: 0.15rem var(--space-md); align-items: start; }
.bill .items .row__note, .bill .items dt > small { grid-column: 1 / -1; }
.bill .items .row__note { margin-top: var(--space-sm); font-size: 0.95rem; line-height: 1.5; text-wrap: pretty; }
.bill .items dt > small { margin-top: var(--space-xs); }
.bill .items dt > b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.2; }
.bill .items dd { font-size: clamp(1.25rem, 2.1vw, 1.6rem); padding-top: 0.15em; white-space: normal; max-width: 8.5rem; line-height: 1.05; color: var(--color-accent-deep); }
.row__pic {
  grid-row: 1 / span 2; width: var(--thumb); height: var(--thumb); object-fit: cover; border-radius: 4px;
  filter: grayscale(1) sepia(0.3) contrast(1.06); mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.18);
}
.seq { display: flex; flex-wrap: wrap; gap: 0.3rem 0.35rem; margin-top: 0.35rem; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-muted); }
.seq > span { white-space: nowrap; padding: 0.08rem 0.45rem; border-radius: 4px; background: oklch(0% 0 0 / 0.045); box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.06); }
.seq i { font-style: normal; font-family: var(--font-display); font-weight: 800; color: var(--color-ink); letter-spacing: -0.01em; }
.bill .items .row__note { margin-top: 0.1rem; color: var(--color-ink); }
.bill .totals dt, .bill .owing dt { font-weight: 500; }
.bill .row--key dt { font-weight: 600; }
.bill .row--key dd { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
@media (max-width: 40rem) {
  /* Phones: the amount sits top-right beside the name and the description runs full width under it */
    .bill__paper { --pad-x: 1.25rem; }
  .bill .items { --thumb: 3rem; }
  .bill .items .row { grid-template-columns: minmax(0, 1fr); position: relative; }
  .bill .items dt { gap: 0.15rem var(--space-sm); }
  .bill .items dt > b { padding-right: 6.25rem; }
  .bill .items dd { position: absolute; top: calc(var(--space-md) + 0.15em); right: 0; font-size: 1.05rem; padding-top: 0; max-width: 6rem; text-align: right; }
}
@media (max-width: 22rem) {
  .bill .items dt > b { font-size: 1.05rem; padding-right: 5rem; }
  .bill .items dd { font-size: 1.05rem; }
}
.bill__foot { padding-top: var(--space-md); margin-top: var(--space-2xs); border-top: 3px double var(--color-ink); text-align: center; font-weight: 600; }
.bill__foot > span { display: block; margin: var(--space-xs) auto 0; max-width: 42ch; font-weight: 400; font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-muted); text-wrap: pretty; }
.bill__share { text-align: center; margin-top: var(--space-md); font-size: var(--text-sm); }
.bill__share .share { color: var(--color-ink); }

/* ---- Not live yet: grey until the section publishes --------------------- */
.nav__links a.is-pending { color: var(--color-ivory-dim); opacity: 0.7; }
.nav__links a.is-pending:hover, .nav__links a.is-pending:focus-visible { opacity: 1; }
.is-pending .glass, .is-pending .preview { background: oklch(27% 0.004 233.4); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .is-pending .glass, .is-pending .preview { background: oklch(27% 0.004 233.4 / 0.7); }
}
.is-pending h2 > .mask > b, .is-pending h2 > b { color: oklch(84% 0.005 233.4); }
.is-pending .stamp { border-color: oklch(58% 0.006 233.4); color: oklch(80% 0.005 233.4); }
.is-pending .timeline li.is-key { border-top-color: oklch(58% 0.006 233.4); }
.is-pending .timeline li.is-key b { color: oklch(84% 0.005 233.4); }

/* ---- The wide shot · the quote over the station ------------------------- */
.bleed { min-height: min(60svh, 38rem); display: grid; align-content: end; }
@media (max-height: 40rem) { .bleed { min-height: auto; } }
.bleed blockquote { max-width: 34ch; font-family: var(--font-display); font-weight: 800; font-size: var(--display-2); line-height: 1.08; letter-spacing: var(--track-2); }
.bleed blockquote footer { margin-top: var(--space-lg); font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); letter-spacing: 0; color: var(--color-ivory-dim); }

/* ---- Chant · the smash cut (the one opaque band) ------------------------- */
.chant { position: relative; background: var(--color-accent); color: var(--color-navy); overflow: clip; padding-block: var(--space-lg); }
.chant__track { display: flex; width: max-content; animation: chant 46s linear infinite; will-change: transform; }
.chant:hover .chant__track { animation-play-state: paused; }
.chant span { font-family: var(--font-display); font-weight: 800; font-size: var(--display-3); line-height: 1.1; text-transform: uppercase; letter-spacing: var(--track-3); white-space: nowrap; padding-inline-end: 1.2em; }
.chant b { font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--color-navy); }
@keyframes chant { to { transform: translateX(-50%); } }

/* ---- The turn · the lift over the wind farm ----------------------------- */
.turn__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 60rem) { .turn__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-col); align-items: start; } .turn__copy { grid-column: 1 / 8; } .turn__fig { grid-column: 8 / 13; } }
.turn__copy .measure { margin-top: var(--space-lg); }
.turn__fig { padding: var(--space-lg); }
.unlock b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); overflow-wrap: break-word; font-variant-numeric: tabular-nums; transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .js .unlock b.is-locked { animation: lock 480ms var(--ease-out); }
}
@keyframes lock { 0% { transform: scale(1.04); } 60% { transform: scale(0.995); } 100% { transform: scale(1); } }
.unlock b span { display: inline; }
.unlock > span { display: block; margin-top: var(--space-sm); max-width: 30ch; font-weight: 500; }
.unlock > span, .unlock .src { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }

.breadth { margin-top: var(--space-2xl); padding: var(--space-lg); }
/* The total and what it would have bought */
.cost .max { display: grid; gap: var(--space-xl); }
.cost__panel { margin-top: 0; }
.mosaic--cost .mosaic__word { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: clamp(0.9rem, 1.2vw, 1.05rem); line-height: 1.15; padding-left: 0; }
.mosaic--cost .mosaic__word::before { display: none; }
.mosaic--cost .mosaic__word b { display: block; font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 0.95; letter-spacing: var(--track-2); color: var(--color-accent); margin-bottom: 0.2rem; }
.mosaic--cost .mosaic__word small { display: block; margin-top: 0.3rem; font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); line-height: 1.3; color: var(--color-ivory-dim); }
.mosaic--cost .mosaic__tile::after { background: linear-gradient(to top, oklch(23.8% 0.0433 233.4 / 0.94) 0%, oklch(23.8% 0.0433 233.4 / 0.6) 55%, transparent 85%); }
.cost__close { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; letter-spacing: var(--track-3); max-width: 40ch; text-wrap: balance; }
.mosaic--cost .mosaic__word small i { font-style: normal; }
@media (max-width: 40rem) {
  .mosaic--cost .mosaic__word b { font-size: 1.9rem; }
  .mosaic--cost .mosaic__word small { margin-top: 0.15rem; line-height: 1.2; }
  .mosaic--cost .mosaic__word small i { display: none; }
}
.breadth > p { font-weight: 500; text-wrap: balance; }
.mosaic { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
@media (min-width: 40rem) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } }
@media (min-width: 60rem) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mosaic__tile { position: relative; overflow: clip; border-radius: 12px; isolation: isolate; aspect-ratio: 4 / 3; box-shadow: 0 0 0 1px var(--ivory-ghost); }
.mosaic__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.mosaic__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, oklch(23.8% 0.0433 233.4 / 0.88) 0%, var(--scrim-soft) 48%, transparent 75%); }
@media (hover: hover) { .mosaic__tile:hover img { transform: scale(1.05); } }
.mosaic__word { position: absolute; z-index: 2; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(0.875rem, 1.6vw, 1.35rem); line-height: 1.06; letter-spacing: var(--track-3); padding-left: 0.9em; color: var(--color-paper); }
.mosaic__word::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 0.5em; height: 0.5em; background: var(--color-accent); }
.mosaic__tile--long .mosaic__word { font-size: clamp(0.875rem, 1.15vw, 1rem); }
@media (max-width: 40rem) {
  .mosaic__tile--long, .mosaic__tile:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
}
@media (max-width: 40rem) { .mosaic__tile--long, .mosaic__tile:last-child { grid-column: auto; aspect-ratio: 4 / 3; } .mosaic__tile--long .mosaic__word { font-size: 0.875rem; } }

/* ---- The held breath ------------------------------------------------------- */
.pivot { min-height: 44svh; display: grid; align-content: center; }
@media (max-width: 40rem) { .pivot { min-height: auto; padding-block: var(--space-2xl); } }
.pivot p { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.06; letter-spacing: var(--track-2); font-size: var(--display-2); max-width: 21ch; text-wrap: balance; }

/* ---- The reckoning · back at Parliament ----------------------------------- */
.scorecard .status { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); }
@media (max-width: 40rem) { .status .stamp { display: block; width: fit-content; margin: 0 0 var(--space-xs); } }
.stamp { display: inline-block; border: 2px solid var(--color-accent); color: var(--color-accent); border-radius: 6px; padding: 0.1rem 0.6rem; margin-inline-end: 0.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.scorecard .measure { margin-top: var(--space-md); }

.preview { margin-top: var(--space-md); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.preview__note { margin-top: var(--space-xl); font-weight: 500; color: var(--color-paper); max-width: 62ch; }
.preview__note b { font-weight: 600; color: var(--color-accent); }
.preview__head, .preview__row { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto auto; gap: var(--space-sm) var(--space-lg); align-items: center; padding-block: var(--space-md); }
.preview__head { position: relative; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-ivory-dim); }
.preview__head::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--rule-strong); background: var(--rule-on-dark); transform-origin: left; }
.preview__head .preview__party { grid-column: 2 / 4; }
.preview__nums, .preview__dots { display: grid; grid-template-columns: repeat(8, var(--unit)); justify-items: center; align-items: center; gap: 0 0.5rem; }
.preview__nums { display: none; }
.preview__nums i { font-style: normal; font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; line-height: 1.2; text-align: center; color: var(--color-paper); align-self: end; cursor: default; transition: color var(--dur-short) var(--ease-out); }
@media (min-width: 66rem) { .preview__nums { display: grid; } .preview__nums, .preview__dots { grid-template-columns: repeat(8, 4.3rem); gap: 0; } }
.preview__row { border-radius: 8px; scroll-margin-top: 6rem; }
.preview__row + .preview__row { border-top: var(--rule-w) solid var(--color-navy-rule); }
@media (hover: hover) { .preview__row { transition: background-color var(--dur-micro) var(--ease-out); } .preview__row:hover { background: var(--ivory-ghost); } }
.preview__row[data-party="national"] { --pc: #00529f; }
.preview__row[data-party="labour"]   { --pc: #d82a20; }
.preview__row[data-party="green"]    { --pc: #098137; }
.preview__row[data-party="act"]      { --pc: #ec008c; }
.preview__row[data-party="nzfirst"]  { --pc: #111010; }
.preview__row[data-party="maori"]    { --pc: #b3001e; }
.preview__row[data-party="top"]      { --pc: #00b2a9; }
.preview__mark { width: 0.95rem; height: 0.95rem; border-radius: 3px; background: var(--pc); box-shadow: inset 0 0 0 1px var(--rule-on-dark); }
.preview__name { min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); white-space: nowrap; }
.preview__status { justify-self: end; font-size: var(--text-sm); color: var(--color-ivory-dim); border: var(--rule-w) solid var(--rule-on-dark); border-radius: 99px; padding: 0.1rem 0.65rem; white-space: nowrap; transition: opacity var(--dur-short) var(--ease-out); }
.preview__status[data-state="invited"] { color: var(--color-paper); border-color: var(--color-accent); }
.preview__row.has-rating .preview__status { opacity: 0; }
.preview__dots { counter-reset: d; }
.preview__dots i, .preview__dots a { counter-increment: d; display: grid; place-content: center; width: var(--unit); height: var(--unit); border: 1px solid var(--rule-on-dark); border-radius: 50%; font-style: normal; font-weight: 600; font-size: 0.7rem; color: var(--color-ivory-dim); text-decoration: none; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.preview__dots i::before, .preview__dots a::before { content: counter(d); }
.preview__dots > :nth-child(1) { --c: 0; } .preview__dots > :nth-child(2) { --c: 1; } .preview__dots > :nth-child(3) { --c: 2; } .preview__dots > :nth-child(4) { --c: 3; }
.preview__dots > :nth-child(5) { --c: 4; } .preview__dots > :nth-child(6) { --c: 5; } .preview__dots > :nth-child(7) { --c: 6; } .preview__dots > :nth-child(8) { --c: 7; }
.preview__nums i.is-col, .tests__list li.is-col b { color: var(--color-accent); }
.preview__dots .is-col { border-color: var(--color-accent); color: var(--color-accent); transform: scale(1.15); }
.preview__dots [data-r] { border-color: transparent; font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; color: var(--color-navy); }
.preview__dots [data-r]::before { content: attr(data-r); }
.preview__dots [data-r="C"] { background: var(--rate-c); }
.preview__dots [data-r="P"] { background: var(--rate-p); }
.preview__dots [data-r="N"] { background: var(--rate-n); color: var(--color-paper); }
.preview__dots [data-r="0"] { background: var(--rate-0); font-size: 1.3rem; line-height: 0.7; }
.preview__dots [data-r="0"]::before { content: "·"; }
.preview figcaption { margin-top: var(--space-md); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-ivory-dim); }
.preview__stamp { font-family: var(--font-display); font-weight: 500; color: var(--color-paper); white-space: nowrap; }
.preview__legend { display: none; }
@media (max-width: 66rem) { .preview__legend { display: inline; } }
@media (max-width: 44rem) {
  .preview__head { display: none; }
  .preview__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-sm); padding-block: var(--space-md); }
  .preview__name { white-space: normal; font-size: var(--text-md); line-height: 1.2; }
  .preview__status { grid-column: 3; justify-self: end; font-size: 0.875rem; padding: 0.2rem 0.6rem; }
  .preview__dots { grid-column: 1 / -1; grid-template-columns: repeat(8, 1.5rem); gap: 0.35rem; justify-items: start; }
  .preview__dots i, .preview__dots a { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 26rem) {
  :root { --display-1: clamp(2.2rem, 11vw, 2.8rem); }
  .btn--big { font-size: var(--text-base); padding-inline: 1.5rem; min-height: 3.25rem; }
  .mosaic__word { font-size: 1rem; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); }
  .nav__brand { gap: var(--space-sm); }
    .bill__paper { --pad-x: var(--space-lg); }
}
@media (max-width: 22rem) {
  .preview__status { grid-column: 2 / -1; justify-self: start; font-size: 0.875rem; }
  .preview__dots { grid-template-columns: repeat(8, 1.35rem); gap: 0.3rem; }
  .preview__dots i, .preview__dots a { width: 1.35rem; height: 1.35rem; }
}

/* Dormant: the eight tests, the ratings explainer and the discipline list are held back
   until the scorecard publishes (client note, 8 Sept). Styles kept so the markup can return. */
.score-panel { margin-top: var(--space-xl); padding: var(--space-xl); }
@media (max-width: 40rem) { .score-panel { padding: var(--space-lg) var(--space-md); } .preview { padding-inline: var(--space-md); } }
.tests__intro { margin-top: var(--space-sm); font-weight: 500; max-width: 52ch; }
.tests__list { list-style: none; padding: 0; counter-reset: t; margin: var(--space-lg) 0 0; display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .tests__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-2xl); } }
.tests__list li { counter-increment: t; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; align-content: start; color: var(--color-paper); }
.tests__list li::before { content: counter(t); display: grid; place-content: center; width: var(--unit); height: var(--unit); border: 1px solid var(--rule-on-dark); border-radius: 50%; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-accent); transform: translateY(0.1em); }
.tests__list b { font-weight: 600; display: block; transition: color var(--dur-short) var(--ease-out); }
.key { margin-top: var(--space-2xl); }
.key h3, .discipline { margin-top: 0; }
.discipline { margin-top: var(--space-2xl); }
.ratings-key { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.ratings-key li { display: flex; align-items: center; gap: var(--space-sm); font-weight: 500; }
.chip { display: grid; place-content: center; width: var(--unit); height: var(--unit); border-radius: 6px; font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); color: var(--color-navy); }
.chip--c { background: var(--rate-c); } .chip--p { background: var(--rate-p); } .chip--n { background: var(--rate-n); color: var(--color-paper); } .chip--0 { background: var(--rate-0); font-size: 1.6rem; line-height: 0.7; }
.key > p { margin-top: var(--space-md); max-width: 56ch; }
.discipline { list-style: none; padding: 0; margin: var(--space-xl) 0 0; max-width: 46rem; }
.discipline li { padding-block: var(--space-sm); display: flex; gap: var(--space-sm); align-items: baseline; }
.discipline li::before { content: ""; flex: 0 0 auto; width: 0.5em; height: 0.5em; background: var(--color-accent); transform: translateY(-0.08em); }
.scorecard__ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.scorecard .neutral { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 52ch; }

/* ---- The plan · over the hospital ------------------------------------------ */
.plan .intro { margin-top: var(--space-lg); font-size: var(--text-md); max-width: 54ch; }
.plan .glass { margin-top: var(--space-2xl); padding: clamp(1.5rem, 4vw, 3.5rem); }
.plan .ledger { margin-top: 0; }
.ledger { list-style: none; padding: 0; margin: var(--space-2xl) 0 0; counter-reset: p; display: grid; gap: 0 var(--space-3xl); }
@media (min-width: 60rem) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ledger li {
  counter-increment: p;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs) var(--space-lg);
  align-items: start; align-content: start;
  padding-block: var(--space-xl);
  border-top: var(--rule-w) solid var(--color-navy-rule);
}
.ledger li::before {
  content: counter(p, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 0.85;
  letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--color-accent);
  font-variant-numeric: tabular-nums;
}
@supports not (-webkit-text-stroke: 1px black) { .ledger li::before { color: var(--color-accent); } }
.ledger h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.01em; }
.ledger p { font-size: var(--text-base); max-width: 46ch; color: var(--color-ivory-dim); }
.manifesto-cta { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.manifesto-cta small { color: var(--color-ivory-dim); }

/* ---- The end card ----------------------------------------------------------- */
.signup { min-height: min(92svh, 64rem); display: grid; align-content: end; }
@media (max-height: 40rem) { .signup { min-height: auto; } }
.signup h2 { display: grid; font-size: var(--display-1); letter-spacing: var(--track-1); line-height: 1.02; max-width: none; }
.signup h2 .line-2 { color: var(--color-accent); }
.signup .measure { margin-top: var(--space-lg); }
.signup__card { margin-top: var(--space-xl); max-width: 36rem; padding: var(--space-lg) var(--space-lg) var(--space-md); }
/* The members' ask: one wide band, display heading, big buttons */
.share-band { margin-top: var(--space-lg); padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: var(--space-lg); scroll-margin-top: 6rem; transition: box-shadow 600ms var(--ease-out); }
.share-band.is-lit { box-shadow: 0 0 0 3px var(--color-accent), 0 24px 60px oklch(17.4% 0.0017 17.3 / 0.35); }
@media (min-width: 60rem) { .share-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-2xl); } }
.share-band h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--display-3); line-height: 1.04; letter-spacing: var(--track-3); }
.share-band p { margin-top: var(--space-sm); color: var(--color-ivory-dim); max-width: 34ch; font-size: var(--text-md); }
.share-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.share-grid .btn { min-height: 3.5rem; min-width: 8.5rem; padding-inline: 1.75rem; font-size: var(--text-md); }
.signup form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.signup form.is-sent { opacity: 0; transform: translateY(-8px); }
@media (min-width: 40rem) { .signup form { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.signup .field { position: relative; display: grid; gap: var(--space-2xs); }
.signup input { font: inherit; color: var(--color-paper); background: transparent; border: 0; border-bottom: var(--rule-w) solid var(--rule-on-dark); padding: 0 0.1rem; height: var(--control-h); border-radius: 0; }
.signup .field::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--control-h) - 2px); height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-long) var(--ease-out); }
.signup .field:focus-within::after { transform: none; }
.signup input:focus-visible { outline: none; }
.signup input::placeholder { color: var(--color-ivory-dim); }
.signup input[aria-invalid="true"] { border-bottom-color: var(--color-accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { min-height: 1.4rem; font-size: var(--text-sm); }
.form-msg[data-tone="error"] { color: var(--color-accent); }
.signup .fine { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 52ch; }
.done { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.done p + p { margin-top: var(--space-sm); font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); color: var(--color-ivory-dim); }
.done .share { margin-top: var(--space-md); font-size: var(--text-base); }

/* ---- Footer · credits --------------------------------------------------------- */
.foot { position: relative; background: var(--color-onyx); color: var(--color-ivory-dim); border-top: 3px solid var(--color-accent); padding: var(--space-2xl) var(--page-gutter) var(--space-xl); font-size: var(--text-sm); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.foot__row img { height: 2.8rem; width: auto; }
.foot a { color: var(--color-paper); text-underline-offset: 3px; white-space: nowrap; }
.foot a:hover { text-decoration-color: var(--color-accent); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
@media (min-width: 60rem) {
  .foot__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-col); }
  .foot__row img { grid-column: 1 / 3; }
  .foot__row > span { grid-column: 3 / 9; }
  .foot__links { grid-column: 9 / 13; justify-self: end; }
}
.foot__record { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-w) solid var(--color-onyx-rule); }
.foot__record a { color: var(--color-ivory-dim); text-decoration-color: var(--color-onyx-rule); }
.foot__record a:hover { color: var(--color-paper); text-decoration-color: var(--color-accent); }
.foot__print {
  font: inherit; font-family: var(--font-display); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 0.9rem;
  background: none; border: var(--rule-w) solid var(--rule-on-dark); border-radius: 99px;
  color: var(--color-paper); cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.foot__print::before {
  content: ""; width: 0.85rem; height: 0.85rem; flex: 0 0 auto;
  background: var(--color-accent);
  clip-path: polygon(20% 0, 80% 0, 80% 32%, 100% 32%, 100% 78%, 80% 78%, 80% 100%, 20% 100%, 20% 78%, 0 78%, 0 32%, 20% 32%);
}
.foot__print:hover { border-color: var(--color-accent); background: var(--ivory-ghost); }
.foot__legal { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-w) solid var(--color-onyx-rule); display: grid; gap: var(--space-md) var(--space-xl); }
@media (min-width: 60rem) { .foot__legal { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.foot .auth { max-width: 60ch; }
.credits { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 60ch; }
.foot__policies { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__policies a { color: var(--color-ivory-dim); text-decoration-color: var(--color-onyx-rule); }
.foot__policies a:hover { color: var(--color-paper); text-decoration-color: var(--color-accent); }

/* ---- Story aside: what infrastructure is -------------------------------- */
.story__aside { padding: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-md) var(--space-xl); }
@media (min-width: 60rem) {
  .story__aside { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  .aside__close { grid-column: 1 / -1; }
}
.aside__lead { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); white-space: nowrap; }
.aside__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
@media (max-width: 40rem) { .aside__list { flex-direction: column; } }
.aside__list li { position: relative; padding-left: 1.25rem; font-size: var(--text-md); font-weight: 500; line-height: 1.3; }
.aside__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; background: var(--color-accent); }
.aside__close { padding-top: var(--space-md); border-top: var(--rule-w) solid var(--rule-on-dark); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; letter-spacing: var(--track-3); text-wrap: balance; }

/* ---- Scorecard timeline -------------------------------------------------- */
.timeline { list-style: none; margin: var(--space-xl) 0 0; padding: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }
.timeline li { padding-top: var(--space-sm); border-top: var(--rule-strong) solid var(--rule-on-dark); }
.timeline li.is-key { border-top-color: var(--color-accent); }
.timeline b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1; white-space: nowrap; }
.timeline li.is-key b { color: var(--color-accent); }
.timeline span { display: block; margin-top: var(--space-xs); font-size: var(--text-base); font-weight: 500; color: var(--color-paper); }

/* ---- Receipt: spelled-out values need a smaller step --------------------- */


/* ---- The Voice ----------------------------------------------------------- */
.voice .status { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); }
.voice .measure { margin-top: var(--space-md); }
.voice__grid { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .voice__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
.voice__grid li { display: grid; align-content: center; gap: var(--space-sm); min-height: 7rem; }
@media (max-width: 60rem) { .voice__grid li { min-height: 5rem; } }
.voice__grid h3 { font-size: var(--text-lg); line-height: 1.15; text-wrap: balance; }
.voice__ask { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }

/* ---- Mobile: touch targets and minimum type ----------------------------- */
.nav__brand { min-height: 44px; }
.share { padding-block: 0.7rem 0.6rem; margin-block: -0.6rem; }
.foot__links a, .foot__record a, .foot__policies a { display: inline-block; padding-block: 0.7rem; }
.src a { display: inline-block; padding-block: 0.72rem; }
@media (max-width: 60rem) {
  .preview__status { font-size: 0.875rem; }
  .preview__dots i, .preview__dots a { font-size: 0.75rem; }
}
@media (pointer: coarse) {
  .foot a, .nav__links a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- Tear off ------------------------------------------------------------ */
.bill__tear {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--tear-h);
  display: block; padding: 0; border: 0;
  border-top: var(--rule-w) dashed var(--color-rule-dash);
  background: none; cursor: pointer;
  font: inherit; font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(60% 0.03 94.7);
  transition: color var(--dur-short) var(--ease-out);
}
.bill__tear:hover, .bill__tear:focus-visible { color: var(--color-accent-deep); }
.bill__rig.is-torn .bill__paper { padding-bottom: var(--space-lg); }
.bill__rig.is-torn .bill__sheet { transform: translateY(-0.55rem) rotate(-0.55deg); transition: transform 620ms var(--ease-out); }
.bill__torn {
  margin-top: var(--space-lg); text-align: center;
  font-weight: 500; color: var(--color-paper);
}
.bill__torn a { color: var(--color-accent); text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .js .bill__torn { opacity: 0; transform: translateY(8px);
    transition: opacity 420ms var(--ease-out) 260ms, transform 420ms var(--ease-out) 260ms; }
  .js .bill__rig.is-torn .bill__torn { opacity: 1; transform: none; }
}

/* ---- Logo build ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .nav__brand.is-building img:first-of-type { animation: build 720ms var(--ease-out); }
}
@keyframes build { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Countdown is tappable ----------------------------------------------- */
button.clock { border: 0; -webkit-appearance: none; appearance: none; text-align: inherit; cursor: pointer; font: inherit; color: inherit; }
button.clock:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }

/* ---- Motion -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.mask) {
    opacity: 0; transform: translateY(var(--dy, 24px));
    transition: opacity var(--dur, var(--dur-reveal)) var(--ease-cine), transform var(--dur, var(--dur-reveal)) var(--ease-cine);
    transition-delay: calc(var(--i, 0) * 90ms + var(--lead, 0ms));
  }
  .js [data-reveal]:not(.mask).is-in { opacity: 1; transform: none; }
    .js .mask[data-reveal] > b { transform: translateY(112%); transition: transform var(--dur-line) var(--ease-cine); transition-delay: calc(var(--i, 0) * 130ms + 60ms); }
  .js .mask[data-reveal].is-in > b { transform: none; }

  .js .stage img.is-active { animation: settle 9000ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }

  .js .bill__sheet { opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--ease-cine), transform 600ms var(--ease-cine); }
  .js .bill__rig.is-in .bill__sheet { opacity: 1; transform: none; }
    /* Thermal print: 84 discrete lines over 3.6s, then the head lifts away */
  .js .bill__ink { clip-path: inset(0 0 100% 0); }
    .js .bill__rig.is-in .bill__ink { animation: print 2600ms steps(56, end) 420ms both; }
    .js .bill__rig.is-in .bill__head { animation: head-run 2600ms steps(56, end) 420ms both, head-out 320ms var(--ease-out) 3020ms forwards; }
  .js .bill .items.is-reprint { animation: print 640ms steps(12, end) both; }

  .js .unlock:not(.is-done) > span, .js .unlock:not(.is-done) .src { opacity: 0; transform: translateY(8px); }

  .js .preview__head::after { transform: scaleX(0); transition: transform 600ms var(--ease-cine); }
  .js .preview.is-in .preview__head::after { transform: none; }
  .js .preview__row { opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--ease-cine), transform 480ms var(--ease-cine); transition-delay: calc(var(--r, 0) * 70ms + 200ms); }
  .js .preview.is-in .preview__row { opacity: 1; transform: none; }
  .js .preview__dots i { opacity: 0; transform: scale(0.5); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-pop); transition-delay: calc(var(--r, 0) * 70ms + var(--c, 0) * 28ms + 420ms); }
  .js .preview.is-in .preview__dots i { opacity: 1; transform: none; }
  .js .preview.is-settled .preview__dots i { transition-delay: 0ms; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
  .js .preview.is-in .preview__dots [data-r] { animation: fill 420ms var(--ease-out) both; animation-delay: calc(var(--r, 0) * 70ms + var(--c, 0) * 40ms + 900ms); }
  .js .ratings-key li:not(.is-in) .chip { transform: scale(0.6); }
  .js .chip { transition: transform 360ms var(--ease-pop); }
}
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes head-run { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(100%); } }
@keyframes head-out { to { opacity: 0; } }
@keyframes fill { from { transform: scale(0.55); opacity: 0; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav__progress { animation: nav-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes nav-progress { to { transform: scaleX(1); } }

/* ---- Print: a clean one-pager for anyone on deadline ---------------------- */
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff !important; color: #111 !important; font-size: 10.5pt; }
  .stage, .nav, .chant, .mosaic, .story__aside, .signup__card, .foot__record,
  .scorecard__ask, .manifesto-cta, .bill__share, .bill__tear, .share,
  .preview__dots, .preview__nums, .voice__grid, .voice__ask, .share-band, .till__pick { display: none !important; }
  .bill .items .row { display: grid !important; }
  .till { display: block !important; }
  .scene { min-height: 0 !important; padding: 0 0 10mm !important; page-break-inside: avoid; }
  .glass, .preview, .score-panel, .signup__card, .turn__fig, .breadth {
    background: none !important; box-shadow: none !important; backdrop-filter: none !important;
    border: 1px solid #bbb !important; border-radius: 0 !important; padding: 6mm !important;
  }
  h1, h2, h3, .beat, .pivot p, .bleed blockquote, .preview__name, .clock,
  .mosaic__word, .unlock b, .stamp { color: #111 !important; }
    h1 { font-size: 24pt; } h2 { font-size: 16pt; } h3 { font-size: 11pt; }
  
  .beat, .pivot p, .bleed blockquote { font-size: 13pt !important; }
  .unlock b { font-size: 20pt !important; }
  p, li, dd, dt, .measure, .dim, .src, figcaption { color: #333 !important; }
  .bill__paper { clip-path: none !important; transform: none !important;
    box-shadow: none !important; border: 1px solid #bbb; padding: 6mm !important; }
  
  .bill__rig { max-width: none !important; }
    .bill__head { display: none !important; }
  .bill__ink { clip-path: none !important; }
  .bill__sheet { filter: none !important; opacity: 1 !important; transform: none !important; }
  .bill dd { color: #111 !important; font-size: 14pt !important; }
  .preview__row { display: flex !important; gap: 4mm; border-bottom: 1px solid #ddd; padding: 2mm 0; }
  .preview__mark { box-shadow: inset 0 0 0 1px #999 !important; }
  .preview__status { border-color: #999 !important; color: #333 !important; }
  .timeline { grid-template-columns: repeat(3, 1fr) !important; }
  .timeline li { border-top: 1px solid #999 !important; }
  .foot { background: none !important; border-top: 2px solid #111 !important; color: #333 !important; }
  .foot a, a { color: #111 !important; }
  .src a::after, .foot__links a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; word-break: break-all; }
  [data-reveal], .mask > b { opacity: 1 !important; transform: none !important; animation: none !important; }
  .story .max, .turn__grid, .ledger, .tests__list { display: block !important; }
  .ledger li, .tests__list li { page-break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 100ms !important; }
    [data-reveal], .mask > b, .bill__paper, .bill__sheet, .preview__row, .preview__dots i, .preview__dots a, .chip,
  .unlock > span, .unlock .src, .preview__head::after { opacity: 1 !important; transform: none !important; animation: none !important; }
    .stage img, .chant__track, .nav__progress { animation: none !important; }
  .bill__ink { clip-path: none !important; animation: none !important; }
  .bill__head { display: none !important; }
  .nav__progress { transform: none !important; }
}

/* ==========================================================================\n   Gutenberg compatibility layer\n   Keeps the source design while leaving native Gutenberg spacing/type controls\n   available. Inline block styles still win over these defaults.\n   ========================================================================== */

/* WordPress block-theme shells should not add a second page gutter. */
.wp-site-blocks,
.wp-block-post-content { padding-left: 0; padding-right: 0; }
.wp-site-blocks > main,
.wp-block-post-content { margin-block-start: 0; }

/* Reproduce the source reset only inside the campaign components. */
:where(.scene) :where(h1,h2,h3,p,ul,ol,blockquote,figure,dl),
:where(.nav) :where(p,ul,ol,figure),
:where(.foot) :where(p,ul,ol,figure) { margin-block-start: 0; margin-block-end: 0; }
:where(.scene) :where(ul,ol) { margin-inline-start: 0; }

/* The dynamic Scene ACF block is the source section itself. */
.lbnz-scene { position: relative; }
.lbnz-scene.is-editor-preview {
  background-image:
    linear-gradient(to top, oklch(20% 0.035 233.4 / .86), oklch(20% 0.035 233.4 / .38)),
    var(--lbnz-preview-image);
  background-position: center, var(--lbnz-preview-position, center);
  background-size: cover;
}

/* Native Image blocks add a figure wrapper; make them behave like source images. */
.who .wp-block-image { margin: 0; width: auto; }
.who .wp-block-image img { height: clamp(1.7rem, 3.6vw, 2.1rem); width: auto; }
.mosaic__tile > .wp-block-image { position: absolute; inset: 0; margin: 0; }
.mosaic__tile > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* Native Groups are used instead of hard-coded list markup where Gutenberg needs
   editable headings/paragraphs. These selectors mirror the source li rules. */
.ledger { list-style: none; padding: 0; margin: var(--space-2xl) 0 0; counter-reset: p; display: grid; gap: 0 var(--space-3xl); }
.ledger__item { counter-increment: p; position: relative; padding: var(--space-xl) 0 var(--space-xl) calc(var(--unit) + var(--space-lg)); border-top: var(--rule-w) solid var(--rule-on-dark); }
.ledger__item::before {
  content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: var(--space-xl);
  width: var(--unit); height: var(--unit); display: grid; place-content: center;
  border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-accent);
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
}
.ledger__item h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -.01em; }
.ledger__item p { font-size: var(--text-base); max-width: 46ch; color: var(--color-ivory-dim); }
@media (min-width: 52rem) { .ledger { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.voice__grid.wp-block-group { list-style:none; padding:0; margin:var(--space-xl) 0 0; display:grid; gap:var(--space-md); }
.voice__grid > .wp-block-group { display:grid; align-content:center; gap:var(--space-sm); min-height:7rem; }
.voice__grid > .wp-block-group h3 { font-size:var(--text-lg); line-height:1.15; text-wrap:balance; }
@media (min-width:48rem) { .voice__grid.wp-block-group { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Gutenberg Buttons receive the original campaign button treatment. */
.wp-block-button__link { font-family: var(--font-display); }
.wp-block-button:not(.is-style-outline) .wp-block-button__link { border-radius:99px; }
.wp-block-button.is-style-ghost .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--color-paper); box-shadow: inset 0 0 0 1.5px var(--rule-on-dark); border:0;
}
.wp-block-button.is-style-large .wp-block-button__link { min-height:4rem; font-size:var(--text-md); padding-inline:2.2rem; }

/* Gravity Forms are styled in assets/css/gravity-forms.css. */

/* Editor canvas: keep scenes readable even though the real fixed stage only runs front-end. */
.editor-styles-wrapper { background: var(--color-navy); color: var(--color-paper); }
.editor-styles-wrapper .lbnz-scene { min-height: 12rem; }
.editor-styles-wrapper .nav { position:relative; top:auto; }
.editor-styles-wrapper .stage { display:none; }


/* ---- v1.4 WordPress fidelity fixes -------------------------------------- */
/* Gutenberg's core Heading markup must retain the exact poster face. */
.hero h1,
.hero h1 b,
.signup h2,
.signup h2 b {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}
.hero h1 { margin: 0; line-height: 1.02; letter-spacing: var(--track-1); }
.hero__sub { margin-top: var(--space-md); }
.hero__meta { margin-top: var(--space-xl); }

/* Keep the source scorecard rhythm even when the whole component is rendered
   by one dynamic ACF block. */
.lbnz-scorecard > .timeline { margin-top: var(--space-xl); }
.lbnz-scorecard > .ratings-key { margin-top: var(--space-xl); }
.lbnz-scorecard > .preview { margin-top: var(--space-lg); }
.lbnz-scorecard > .scorecard__ask { margin-top: var(--space-xl); }
.lbnz-scorecard > .neutral { margin-top: var(--space-lg); }

/* Gutenberg wrappers in the footer replace the source span/a nodes. Map those
   wrappers back onto the source 12-column desktop footer grid. */
.foot__row > .wp-block-image { margin: 0; }
.foot__row > .foot__copy { min-width: 0; }
.foot__links.wp-block-group,
.foot__record.wp-block-group,
.foot__policies.wp-block-group { gap: var(--space-xs) var(--space-lg); }
.foot__links > p,
.foot__record > p,
.foot__policies > p { margin: 0; }
.foot__record > .wp-block-acf-lbnz-print-button { margin: 0; }
@media (min-width: 60rem) {
  .foot__row > .wp-block-image { grid-column: 1 / 3; }
  .foot__row > .foot__copy { grid-column: 3 / 9; }
  .foot__links { grid-column: 9 / 13; justify-self: end; }
}

/* WordPress admin bar sits above the fixed campaign nav. */
.admin-bar .nav { top:32px; }
@media (max-width:782px) { .admin-bar .nav { top:46px; } }

/* Keep user-set Gutenberg spacing authoritative. */
.scene [style*="margin"], .scene [style*="padding"] { /* intentional specificity hook */ }


/* WordPress layout parity: block-theme flow spacing must not create extra gaps
   between the source-designed campaign scenes. Inline Gutenberg spacing still
   wins, so editors can add padding/margins per block when required. */
.wp-site-blocks > *,
.wp-block-post-content > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Keep the fixed photographic stage above the body background but behind the
   whole WordPress block tree. This avoids negative-z-index clipping in block
   themes while retaining the original one-film visual model. */
.stage { z-index: 0; pointer-events: none; }
body > .wp-site-blocks { position: relative; z-index: 1; background: transparent; }

/* Core Quote outputs cite where the static source used a footer. */
.bleed blockquote cite {
  display: block;
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-base);
  letter-spacing: 0;
  color: var(--color-ivory-dim);
}

/* Gutenberg paragraph equivalent of the source's <small>. */
.manifesto-cta > p {
  color: var(--color-ivory-dim);
  font-size: var(--text-sm);
}

/* Registered style slug is `big`; keep `large` as a backwards-compatible
   alias for page content pasted from an earlier revision. */
.wp-block-button.is-style-big .wp-block-button__link,
.wp-block-button.is-style-large .wp-block-button__link {
  min-height: 4rem;
  font-size: var(--text-md);
  padding-inline: 2.2rem;
}
@media (max-width: 40rem) {
  .wp-block-button.is-style-big .wp-block-button__link,
  .wp-block-button.is-style-large .wp-block-button__link {
    font-size: var(--text-base);
    padding-inline: 1.5rem;
    min-height: 3.25rem;
  }
}

/* -----------------------------------------------------------------------
 * Brand font enforcement
 * -----------------------------------------------------------------------
 * Gutenberg can add its own font-family declaration to heading blocks.
 * The campaign hero is art-directed and must always use Klyno ExtraBold.
 */
.hero h1,
.hero h1.wp-block-heading,
.hero h1 .mask,
.hero h1 .mask > b,
.editor-styles-wrapper .hero h1,
.editor-styles-wrapper .hero h1.wp-block-heading,
.editor-styles-wrapper .hero h1 .mask,
.editor-styles-wrapper .hero h1 .mask > b {
  font-family: "Klyno", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-synthesis: none;
}

.hero__sub,
.hero__meta,
.editor-styles-wrapper .hero__sub,
.editor-styles-wrapper .hero__meta {
  font-family: "Klyno", ui-sans-serif, system-ui, sans-serif;
}