/* ==========================================================================
   Dear Theo · theo.css
   One stylesheet for index.html and register.html.
   Tokens, type and devices per Brand Book V2 (Le Registre Clair, Édition Or)
   and the July 2026 website brief. Two typefaces, eight colours, no shadows,
   no gradients, no blur. The dot means funded, ochre means information,
   terracotta means action.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Colour, after the accessibility pass of 11 August 2026, as amended
   20 August 2026.

   The brand book's guardrail was "terracotta and ochre are never used below
   14pt on cream". Measured, that rule does not achieve AA: ochre on cream is
   1.99:1 at ANY size, failing even the 3:1 large-text threshold. Ochre and
   stone changed role rather than the palette being redrawn. Terracotta was
   darkened on 11 August and put back on 20 August:

   - Terracotta is #C0653B, the brand terracotta, restored. It was darkened
     13% to #A75833 on 11 August to clear AA, and Andrzej reversed that on
     20 August: the darker token read muddy, and the design is the priority
     here. #C0653B measures 3.59:1 on cream, so links, .btn's cream text on
     its own fill, .btn-quiet, .btn--drawn and the nav CTA all sit below the
     4.5:1 AA threshold. That is a known, accepted, deliberate trade.
     DO NOT "fix" this back. It is a decision, not an oversight.
   - Ochre keeps its hex and loses its job as an ink. No ochre light enough
     to still read as ochre can carry small text on cream, so ochre is a
     rule, bar and mark colour, with hero numerals as the one exception.
     A darkened --ochre-ink (#A57D31) was invented on 11 August to make
     those numerals clear 3:1. It was withdrawn on 20 August: it read muddy
     on cream and, worse, it did not match the plain --ochre numerals on the
     espresso surface, so one component wore two golds. Hero numerals are
     --ochre on both grounds now. On cream that is 1.99:1, which is a
     graphic mark rather than text, and that is how the brand book draws it.
     DO NOT reintroduce a second gold.
   - Stone never carries text on cream. It is 1.60:1 there, which is not a
     hierarchy, it is an absence. It remains correct on espresso (8.70:1),
     which is the surface it was drawn for.

   Quiet text on cream is umber at 0.72 opacity, 5.17:1. That was already the
   established pattern in .doc-meta and .excerpt-head; it is now the rule.
   -------------------------------------------------------------------------- */

:root {
  --cream:         #F7F0E4;  /* the ground. every everyday surface */
  --umber:         #3A2C1E;  /* all body and heading text */
  --terracotta:    #C0653B;  /* actions: buttons, links, hovers. The brand terracotta */
  --ochre:         #D9A441;  /* information: rules, bars, sidemarks. NEVER text */
  --stone:         #CDBFA8;  /* quiet structure: borders and fills. Text only on espresso */
  --dot:           #D8442B;  /* FUNDED. nothing else, ever */
  --espresso:      #2B211A;  /* the celebration surface only */
  --espresso-text: #F3E9D5;
  --inset:         #F1E7D2;  /* the warmer inset for knowledge panels (brief §5) */

  /* The opacity that turns umber into quiet text on cream without dropping
     below AA. Anything lower is decoration pretending to be information. */
  --quiet: 0.72;

  --font-display: 'Bitter', Georgia, serif;
  --font-body:    'Archivo', Arial, sans-serif;

  --radius-control: 4px;
  --radius-card:    8px;
  --hairline: 1px solid var(--stone);

  /* One spacing scale, 8px base. Nothing on the page uses a value that is
     not on this ladder. */
  --s1:  0.5rem;   /*   8px */
  --s2:  1rem;     /*  16px */
  --s3:  1.5rem;   /*  24px */
  --s4:  2rem;     /*  32px */
  --s5:  3rem;     /*  48px */
  --s6:  4rem;     /*  64px */
  --s7:  6rem;     /*  96px */
  --s8:  8rem;     /* 128px */

  /* The three rhythms every section obeys. */
  --space-section: clamp(var(--s5), 6vw, var(--s7)); /* between major sections */
  --space-head:    var(--s5);                        /* heading block to content */
  --space-item:    var(--s3);                        /* between repeated elements */

  /* Three container widths. Nothing uses a fourth. */
  --w-prose: 40rem;   /*  640px, reading measure */
  --w-wide:  65rem;   /* 1040px, product screens */
  /* full: the espresso band, which spans the viewport */

  --header-h: 64px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--umber);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.7rem, 5.2vw, 3.9rem); line-height: 1.06; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: color-mix(in srgb, var(--terracotta) 78%, var(--umber)); }
a:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; }

img, svg { display: block; max-width: 100%; }

.wrap {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
/* Narrow measure, but the container's left edge stays on the page grid:
   constrain the children, never the wrap, or the section drifts inward. */
.wrap--prose > * { max-width: var(--w-prose); }

/* Anchors clear the sticky header instead of hiding beneath it. */
:target,
[id] { scroll-margin-top: calc(var(--header-h) + var(--s2)); }

/* Visually hidden, still read aloud */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   The four devices
   -------------------------------------------------------------------------- */

/* 1. The punctuation dot - 0.23em, sitting exactly where a full stop
      would sit. One per headline, at the very end only. */
.dot {
  display: inline-block;
  width: 0.23em;
  height: 0.23em;
  border-radius: 50%;
  background: var(--dot);
  margin-left: 0.12em;          /* the gap of a full stop, not a word space */
  vertical-align: baseline;
  transform: translateY(-0.02em);
}

/* The hero dot arrives last, once, with a 300ms overshoot (Anim 02).
   The overshoot is specified, not decorative: brand book p11 reads
   "pops are 300 milliseconds with a slight overshoot". */
.dot--pop { animation: dot-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards; } /* impeccable-disable-line bounce-easing -- brand book p11 specifies the overshoot */

/* Keeps a headline's final word and its dot on one line. */
.hold { white-space: nowrap; }

@keyframes dot-pop {
  from { transform: translateY(-0.02em) scale(0); }
  to   { transform: translateY(-0.02em) scale(1); }
}

/* 2. The sidemark - a short vertical ochre rule, 2.4px, round caps,
      set immediately left of a piece of information. */
.sidemark { position: relative; padding-left: 1.4rem; }
.sidemark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 2.4px;
  border-radius: 99px;
  background: var(--ochre);
}

/* 3. The provenance line - a stone rule with terracotta stops,
      closed by the vermilion dot only when the outcome is funded. */
.prov {
  position: relative;
  height: 3.4rem;
  margin: 0.4rem 0 0;
}
/* The line ends at its last stop. --prov-end carries that stop's position;
   without it the line runs the full width, as on register.html. */
.prov-line {
  position: absolute;
  left: 0; top: 8px;
  width: var(--prov-end, 100%);
  height: 2px;
  border-radius: 99px;
  background: var(--stone);
}
.prov-stop {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
}
.prov-marker {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--terracotta);
  margin: 4.5px auto 10px;
}
.prov-lbl {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--umber);
  white-space: nowrap;
}
.prov-stop--funded .prov-marker {
  width: 16px; height: 16px;
  background: var(--dot);
  margin-top: 1px;
  margin-bottom: 7px;
}
.prov-stop--start { transform: none; text-align: left; }
.prov-stop--start .prov-marker { margin-left: 0; }

/* 4. Hairline rules */
.rule { border: 0; border-top: var(--hairline); margin: 0; }

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

/* Was ochre at 1.99:1. At 12px no ochre that still reads as ochre can reach
   4.5:1, so the eyebrow becomes quiet umber and matches .finding-meta, which
   plays the identical role. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;           /* v2: 11–12px, tracking 0.13em maximum */
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: var(--quiet);
  margin: 0 0 1.2rem;
}

.caption {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
  background: var(--terracotta);
  border: 0;
  border-radius: var(--radius-control);
  padding: 0.95em 1.9em;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: color-mix(in srgb, var(--terracotta) 86%, var(--umber)); color: var(--cream); }
.btn:focus-visible { outline: 2px solid var(--umber); outline-offset: 3px; }

.prose { max-width: 65ch; }
.prose p { max-width: 65ch; }

/* The single reveal. Styles apply only when JS is present. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js .reveal.in-view { opacity: 1; transform: none; }

/* ==========================================================================
   index.html - the landing page
   ========================================================================== */

/* The sticky header: cream, one hairline, 64px. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cream);
  border-bottom: var(--hairline);
}
.site-header .wrap {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
/* 30.6px, ten per cent down from the 34px it was drawn at. */
.site-header .lockup { height: 30.6px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--s4); }
.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* tap target, not visual weight */
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber);
  text-decoration: none;
}
.site-nav-link:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 4px; }
.site-nav-link:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; border-radius: 2px; }
.site-nav-link--cta { color: var(--terracotta); }

/* Hero. Single column: the two-column grid that used to sit here gave 45%
   of the width to a mark repeating the header lockup 168px above it. The
   copy now takes the measure the headline needs and no more; .hero-copy
   below caps the line length so full width doesn't mean full-bleed text. */
.hero { padding: var(--s7) 0 var(--space-section); }
.hero-copy { max-width: 42rem; }
.hero h1 { margin-bottom: var(--s3); }
.subhead {
  font-size: 1.125rem;
  max-width: 34em;
  margin-bottom: var(--s5);
}

/* The form: hairline underlines, like filling in a page */
.waitlist { max-width: 26rem; }
.field input:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--terracotta);
}

.success {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.55;
  max-width: 24em;
  margin: 0;
}
.success .dot { animation: dot-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards; } /* impeccable-disable-line bounce-easing -- the same specified 300ms pop */

/* Landing sections: one padding value, everywhere. */
.section { padding: var(--space-section) 0; }

/* A heading block and its content are always this far apart. */
.section-head { margin-bottom: var(--space-head); }
.section-head h2 { margin: 0; }

.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.5;
  max-width: 30em;
  margin: var(--s5) 0 0;
  padding-left: 1.75rem;
}
.pullquote::before { top: 0.35em; bottom: 0.35em; }

/* What Dear Theo is: three passages, stacked, sidemarked. Not cards. */
.register-items {
  display: grid;
  gap: 3.25rem;
  max-width: 65ch;
  margin-top: 2.8rem;
}
.register-items h3 { font-size: 1.15rem; margin-bottom: 0.45em; }
.register-items .sidemark::before { top: 0.25em; bottom: 0.25em; }
.register-items p { margin: 0; max-width: 58ch; }

/* Why Dear Theo: the name */
.name-section { text-align: center; }
.name-passage {
  max-width: 37rem;
  margin: 0 auto;
  padding: 3rem 0;
  border-top: 1px solid var(--ochre);
  border-bottom: 1px solid var(--ochre);
  text-align: left;
}
.name-passage p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.85;
  margin-bottom: 1.6em;
}
.name-passage p:last-child { margin-bottom: 0; }
.name-mark {
  width: clamp(120px, 18vw, 176px);
  height: auto;
  margin: 3.5rem auto 0;
}

/* The close */
.close-section { text-align: center; padding-bottom: clamp(5rem, 10vw, 8.5rem); }
.close-section h2 { max-width: 17em; margin-inline: auto; }

/* Footer: the sliver of umber that grounds the page */
.site-footer {
  background: var(--umber);
  color: var(--espresso-text);
  padding: 1.5rem 0;
  margin-top: clamp(2rem, 5vw, 4rem);
}
/* Three columns so the social row sits on the true centre line, not wherever
   space-between happens to leave it. */
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3) var(--s4);
}
.site-footer .footer-id { justify-self: start; }
.site-footer .social { justify-self: center; }
.site-footer .footer-note { justify-self: end; text-align: right; }
.footer-id { display: flex; align-items: center; gap: 0.9rem; }
.footer-id .footer-mark { width: 34px; height: auto; }
.footer-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--espresso-text);
}
.footer-domain { color: var(--stone); font-size: 0.9375rem; }
.footer-link {
  color: var(--espresso-text);
  font-size: 0.9375rem;
  text-decoration-color: var(--stone);
}
.footer-link:hover { color: var(--espresso-text); text-decoration-thickness: 2px; }
.footer-link:focus-visible { outline-color: var(--espresso-text); }

/* ==========================================================================
   register.html - the product dummy
   ========================================================================== */

.app { font-variant-numeric: tabular-nums; }

.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cream);
  border-bottom: var(--hairline);
}
.app-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 0.9rem;
}
.app-bar .lockup { height: 26px; width: auto; }

.app-nav { display: flex; gap: clamp(1.1rem, 3vw, 2.3rem); }
.app-nav a {
  font-size: 0.9375rem;
  color: var(--umber);
  text-decoration: none;
  padding: 0.35em 0 0.45em;
  border-bottom: 2px solid transparent;
}
.app-nav a:hover { color: var(--terracotta); }
.app-nav a[aria-current="page"] { border-bottom-color: var(--terracotta); }

.brand { display: inline-block; text-decoration: none; }
.brand:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

/* How it works: quiet numbered passages, not cards */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  margin-top: var(--space-head);
}
/* index.html wraps its heading in .section-head, which already carries the
   gap. register.html does not, so .steps keeps its own. */
.section-head + .steps { margin-top: 0; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
}
/* A hero numeral: one of the two places ochre survives as an ink, drawn at
   41.6px bold so it reads as a mark rather than as a word. */
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 0.9;
  color: var(--ochre);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.08rem; margin: 0 0 0.45em; }
.step p { margin: 0; }

.screen { padding: var(--space-section) 0; }
.screen + .screen { border-top: var(--hairline); }

.screen-head { margin-bottom: var(--space-head); }
.screen-head h2 { margin: 0; }

/* Screen one: the ledger. The table is the hero image. */
.ledger-scroll { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; }
.ledger th {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: var(--quiet);
  text-align: left;
  padding: 0.7rem 1rem 0.85rem;
  border-bottom: 2px solid var(--ochre);
}
.ledger td {
  padding: 1.1rem 1rem;
  border-bottom: var(--hairline);
  vertical-align: baseline;
}
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger th:last-child,  .ledger td:last-child  { padding-right: 0; }
.ledger .fund { font-weight: 500; }
.ledger .deadline { font-weight: 700; white-space: nowrap; }
.ledger .status { font-weight: 700; white-space: nowrap; }
/* Terracotta is reserved for actions. A status is not something you can do,
   so OPEN is umber and the funded row's dot is the column's only colour. */
.ledger .status--open { color: var(--umber); }

/* The dot in its habitat: one funded row, one event. */
.dot-mark {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dot);
  margin-right: 0.55em;
}

.ledger-caption { margin-top: 1.5rem; }

/* Screen two: an entry */
/* A block, not a flex row: the entry band runs the full measure and the
   provenance dates sit in their own strip beneath it. See .entry-title and
   .entry-provenance further down for the rest of this component. */
.entry-head {
  margin-bottom: var(--space-head);
}

.entry-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: var(--space-item);
  align-items: stretch;
}

.entry-record { margin-top: var(--space-head); }
.entry-record .caption { display: block; margin-bottom: var(--s3); }
.entry-actions { margin-top: var(--space-head); }

/* Screen three: your register */
.project-head h2 { margin-bottom: 0.6rem; }
/* 16px is under the large-text threshold, so this is quiet umber, not ochre.
   The old comment here claimed "the floor holds for ochre on cream", which
   was the brand book's 14pt size rule; that rule does not deliver AA at any
   size, which is why the colour moved rather than the size. */
.project-meta {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: var(--quiet);
}
.project-prov { margin: var(--space-head) 0; }

.project-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.project-panels .inset { padding: 1.6rem 1.7rem; }
.project-panels h3 { font-size: 1.08rem; margin-bottom: 0.55rem; }

.retention {
  border: 1px dashed var(--terracotta);
  border-radius: var(--radius-card);
  padding: var(--s4);
  margin-top: var(--space-head);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}
.retention h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.retention p { margin: 0; }
.retention .btn { flex-shrink: 0; }

/* Screen four: the calendar */
.calendar { border: var(--hairline); }
.cal-weekdays,
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-weekdays span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: var(--quiet);
  padding: 0.75rem 0.7rem;
}
.cal-day {
  min-height: 96px;
  border-top: var(--hairline);
  padding: 0.55rem 0.7rem;
}
.cal-day + .cal-day { border-left: var(--hairline); }
.cal-num { display: block; font-size: 0.8125rem; color: var(--umber); }
.cal-mark {
  display: block;
  position: relative;
  margin-top: 0.55rem;
  padding-left: 0.8rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--umber);
  overflow-wrap: break-word;
}
.cal-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 2.4px;
  border-radius: 99px;
  background: var(--ochre);
}

/* Screen five: the win. The only espresso surface on the site. */
.win {
  background: var(--espresso);
  color: var(--espresso-text);
  text-align: center;
  padding: var(--space-section) 0;
}
.screen + .win { border-top: 0; }
.win h2 { color: var(--espresso-text); font-size: clamp(2.2rem, 4.5vw, 3.1rem); margin: 0; }
.win-mark { width: clamp(150px, 22vw, 216px); height: auto; margin: 0 auto var(--space-head); }

/* The dot rises: transform only, once, when the room comes into view. */
.mark-dot { transform-box: fill-box; transform-origin: center; }
html.js .win.in-view .win-mark .mark-dot {
  /* impeccable-disable-next-line bounce-easing -- brand book p10: the dot "settles with a single pulse" */
  animation: dot-settle 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s backwards;
}
@keyframes dot-settle {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* The reader's own entry on the espresso surface: same markup as "Your
   letter" on register.html (.project-head, .letter-no, .project-meta), so
   only the colour needs overriding for the dark ground.

   Both overrides are load-bearing after the contrast pass. The cream-surface
   rules now use umber, which is right on cream and invisible on espresso:
   quiet umber measures 1.12:1 there. Ochre is the correct choice on this
   ground and always was, at 6.99:1, so the dark surface keeps the original
   ochre rather than the darkened ink it needs on cream. */
.win .project-head {
  margin: var(--s5) 0 var(--space-head);
}
.win .project-head h3 { color: var(--espresso-text); }
.win .letter-no { color: var(--ochre); }
.win .project-meta { color: var(--ochre); opacity: 1; }

.wall { margin-top: var(--space-section); }
.wall-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-item);
  flex-wrap: wrap;
}
.wall-row svg { width: 76px; height: auto; }

/* Register footer: one quiet line on cream */

/* ==========================================================================
   index.html - the merged page additions
   Additive only. Every selector below is new, so register.html is untouched.
   ========================================================================== */

/* The product screens sit one level deeper on the merged page, so their
   headings are h3. They keep the h2 scale they were drawn at. */
.screen-head h3,
.project-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  margin: 0;
}

/* 1. Hero: one action, one quiet alternative, one reassurance. */
.hero-cta { margin: 0 0 0.4rem; }
.hero-alt { margin: 0 0 1.3rem; }
.hero-alt a { font-size: 1.0625rem; }
/* The reveal button sits where a link used to, so it loses .btn-quiet's
   horizontal padding and keeps the copy flush with the column's left edge. */
.hero-alt .btn-quiet { padding-left: 0; padding-right: 0; }
.hero-note { margin: 0; font-size: 0.9375rem; color: var(--umber); }

/* Left-aligned, unlike the close's centred slot: .waitlist--bare centres
   itself with margin-inline, which would float the field oddly inside the
   hero's left-aligned column. */
.email-slot--hero { margin-top: 0; margin-bottom: 1.3rem; }
.email-slot--hero .waitlist--bare { margin-inline: 0; }

/* 4. The register opener. */
.register-intro {
  padding-top: var(--space-section);
  padding-bottom: var(--space-head);
}
.register-intro > * { max-width: var(--w-prose); }
.register-intro h2 { margin-bottom: 0.6em; }
.register-intro p { margin: 0; }

/* Both cards on the entry screen read as one family. */
.panel-card {
  border: 1px solid var(--umber);
  border-radius: var(--radius-card);
  background: var(--cream);
  padding: var(--s4);
}
.panel-card dl { margin: 0; display: grid; gap: var(--s3); }
.panel-card dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: var(--quiet);
  margin-bottom: 0.25rem;
}
.panel-card dd { margin: 0; }
.panel-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.12;
  margin: 0 0 var(--s2);
}
.panel-card p { margin: 0; }

/* 5. The workspace: the filmmaker's documents, and the work happening beside
   them. Two panels that together read as an excerpt from the application. */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}

.panel-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: var(--quiet);
  margin: 0 0 var(--s3);
}

/* The left panel is a file list. The document name leads; the version is
   metadata and stays metadata. */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s2);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: var(--hairline);
}
.doc:first-child { padding-top: 0; }
.doc:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-glyph {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 18px;
  height: 18px;
  color: var(--stone);
  transform: translateY(3px);
}
.doc-name {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--umber);
}
.doc-meta {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--umber);
  opacity: 0.72;
  margin-top: 2px;
}

/* The right panel is a conversation. Square-ish corners, no tails, no
   avatars: the mark is the only thing that says who is speaking. */
.convo { display: grid; gap: var(--s3); }

.msg { border-radius: var(--radius-card); padding: var(--s3); max-width: 92%; }
.msg p { margin: 0; }

.msg--user {
  background: var(--stone);
  color: var(--umber);
  justify-self: end;
  border-bottom-right-radius: 2px;
}
.msg--theo {
  background: var(--inset);
  color: var(--umber);
  justify-self: start;
  border-bottom-left-radius: 2px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2);
  align-items: start;
}
/* 16px tall, so the full mark is still wider than its 24px minimum. */
.msg-mark { height: 16px; width: auto; margin-top: 4px; }

/* The excerpt is a piece of the document, not another message. */
.excerpt {
  margin: var(--s1) 0 0;
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--cream);
  padding: var(--s3);
}
.excerpt-head {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: 0.72;
  margin-bottom: var(--s2);
}
.excerpt p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0;
}
/* A highlighter, not a fill: the tint is low enough that umber still reads. */
.excerpt mark {
  background: color-mix(in srgb, var(--ochre) 26%, transparent);
  color: var(--umber);
  padding: 0.08em 0.1em;
  border-radius: 2px;
}

/* No max-width: it used to cap at 46ch, which read as a narrow, awkward
   column against the full-width .retention box directly beneath it. It now
   runs the same measure as everything else in the section. */
.jury-caption {
  font-style: italic;
  margin: var(--space-head) 0 0;
}

/* 6. The wall: one funded label, two still waiting. Sits directly under the
   h2 now, explaining the custom before the reader meets the label. */
.gallery-passage {
  max-width: 46ch;
  margin: var(--s4) auto 0;
  color: var(--espresso-text);
  text-align: left;
}
.wall-mark { margin: 0; text-align: center; }
.wall-mark img,
.wall-mark svg { width: 76px; height: auto; margin-inline: auto; }
.wall-mark figcaption {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--espresso-text);
  margin-top: var(--s2);
}
.wall-row { align-items: flex-start; }

/* 9. The close: two buttons of deliberately unequal weight. */
.close-intro {
  max-width: 46ch;
  margin: 0 auto 2.4rem;
  text-align: left;
}
.close-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
}
.btn-quiet {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1;                 /* matches .btn, so align-items: center on
                                      .close-actions centers the two boxes
                                      instead of two different box heights */
  color: var(--terracotta);
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0.95em 0.4em;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.btn-quiet:hover { color: color-mix(in srgb, var(--terracotta) 78%, var(--umber)); }
.btn-quiet:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* The secondary action inside the email form: same weight and shape as
   .btn, outline only, so filled versus outline is the sole difference. */
.btn-outline {
  background: transparent;
  color: var(--terracotta);
  border: 1.5px solid var(--terracotta);
  padding: calc(0.95em - 1.5px) calc(1.9em - 1.5px); /* box stays the same size as .btn */
}
.btn-outline:hover {
  background: transparent;
  color: color-mix(in srgb, var(--terracotta) 78%, var(--umber));
  border-color: color-mix(in srgb, var(--terracotta) 78%, var(--umber));
}
.btn-outline:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.form-microcopy {
  font-size: 0.8125rem;
  color: var(--umber);
  opacity: var(--quiet);
  margin: var(--s2) 0 0;
}

.email-slot { margin-top: 2.2rem; }
.waitlist--bare {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  max-width: 30rem;
  margin-inline: auto;
  flex-wrap: wrap;
}
.waitlist--bare input {
  flex: 1 1 15rem;
  width: auto;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: var(--hairline);
  border-radius: 0;
  padding: 0.55em 0;
  font: inherit;
  color: var(--umber);
  caret-color: var(--terracotta);
}
.waitlist--bare input:focus { outline: none; border-bottom-color: var(--terracotta); }
/* Placeholder text is still text: stone put it at 1.60:1, which made the
   only visible instruction in the field the least readable thing in it. */
.waitlist--bare input::placeholder { color: var(--umber); opacity: var(--quiet); }
.email-slot .success { margin-inline: auto; text-align: left; }

/* 10. The dark band that grounds the page. */
.site-footer .footer-mark { width: auto; height: 26px; }
.footer-note { margin: 0; font-size: 0.9375rem; color: var(--espresso-text); }

/* The three networks, centred, drawn in the page's own line-work. Never in
   the platforms' own brand colours. */
.social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
}
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--espresso-text);
  border-radius: var(--radius-control);
  text-decoration: none;
}
.social-link svg { width: 20px; height: 20px; }
.social-link:hover,
.social-link:focus-visible { color: var(--terracotta); }
.social-link:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* ==========================================================================
   matches.html - the Tally intake
   ========================================================================== */

/* The form sits directly on the page: no card, no border, no background.
   Its own transparentBackground param does the rest. Width and left edge
   come from .wrap--prose > *, the same rule the heading and intro use. */
.tally-embed { margin-top: var(--space-head); }
.tally-embed iframe { display: block; width: 100%; border: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; gap: var(--s5); }
  .entry-panels { grid-template-columns: 1fr; }
  .project-panels { grid-template-columns: 1fr; }
  .retention { align-items: flex-start; flex-direction: column; }
}

/* The two panels stack: documents first, then the conversation. */
@media (max-width: 720px) {
  .workspace { grid-template-columns: 1fr; gap: var(--s6); }
  .msg { max-width: 100%; }
}

/* Below 640px the header keeps the lockup and the one action that matters. */
@media (max-width: 640px) {
  .site-nav-link:not(.site-nav-link--cta) { display: none; }

  /* The footer stacks and centres rather than squeezing three columns. */
  .site-footer .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer .footer-id,
  .site-footer .footer-note { justify-self: center; text-align: center; }
  .footer-id { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 719px) {
  /* The ledger becomes a stacked list: number, fund, deadline, status. */
  .ledger thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
  .ledger, .ledger tbody { display: block; }
  .ledger tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 1.1rem;
    align-items: baseline;
    padding: 1.05rem 0;
    border-bottom: var(--hairline);
  }
  .ledger td { display: block; padding: 0; border: 0; }
  .ledger .no { grid-column: 1; grid-row: 1 / 3; }
  .ledger .fund { grid-column: 2; grid-row: 1; font-weight: 700; }
  .ledger .scheme { display: none; }
  .ledger .deadline { grid-column: 2; grid-row: 2; font-weight: 400; font-size: 0.9375rem; margin-top: 0.15rem; }
  .ledger .status { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: end; }

  /* The calendar becomes a vertical list of dated rows, sidemarks intact. */
  .calendar { border: 0; }
  .cal-weekdays { display: none; }
  .cal-week { display: block; }
  .cal-day { display: none; }
  .cal-day--marked {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    min-height: 0;
    border: 0;
    border-bottom: var(--hairline);
    padding: 1.05rem 0;
  }
  .cal-day--marked .cal-num { font-size: 1.0625rem; font-weight: 700; min-width: 2ch; }
  .cal-day--marked .cal-mark { margin-top: 0; font-size: 1rem; }

  .wall-row { gap: 1rem; }
  .wall-row svg { width: 58px; }

  /* Provenance labels may wrap on a narrow page */
  .prov { height: 4.6rem; }
  .prov-lbl { white-space: normal; max-width: 7.5rem; line-height: 1.35; }

  /* The close stacks, and the email field takes the full column. */
  .close-actions { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .close-actions .btn { text-align: center; }
  .waitlist--bare { flex-direction: column; align-items: stretch; }
  .waitlist--bare input { flex: 1 1 auto; }

  .wall-mark img,
  .wall-mark svg { width: 58px; }
}

/* ==========================================================================
   Reduced motion: every animation is replaced by its final frame.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot--pop,
  .success .dot,
  html.js .win.in-view .win-mark .mark-dot { animation: none !important; }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Appended for register.html (the deeper product page), July-August 2026.
   Everything below is a NEW selector. No rule above this line is edited, so
   index.html, register.html and matches.html render exactly as before.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The honesty note. Every mockup and every data screen carries one.

   The brand book reached for --stone here, and stone on cream measures
   1.60:1. The site's own quality floor is 4.5:1, so a stone note is a label
   nobody can read, which defeats the only reason the label exists. Umber on
   cream is 11.89:1. The ochre sidemark keeps it reading as information
   rather than as body copy, so the device is unchanged, only its contrast.
   --stone stays correct on espresso (8.70:1), which is what it was drawn for.
   -------------------------------------------------------------------------- */

.mockup-note {
  display: block;
  position: relative;
  padding-left: 1.4rem;
  margin: var(--s3) 0 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--umber);
}
.mockup-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  background: var(--ochre);
}
/* On the espresso surface stone is the readable choice, not umber: stone on
   espresso is 8.70:1, which is the contrast this device was drawn for. */
.mockup-note--dark { color: var(--stone); }

/* .mockup-note is a caption device: short, uppercase, tracked. "Your letter"
   carries the full AI disclosure sentence here (moved from index.html, 11
   August 2026), and a 170-character sentence set in small caps with 0.14em
   tracking across two lines is a genuine legibility problem, not a look.
   Same sidemark bar and umber, set as a sentence instead of a label. */
/* No max-width, same reason as .jury-caption above: it read as a narrow
   column against .retention's full width directly beneath it. */
.mockup-note--prose {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* The win section is centred, and a left-hand rule reads as a mistake there.
   Drop the bar rather than fight the alignment. */
.mockup-note--centred {
  padding-left: 0;
  text-align: center;
  margin-top: var(--s4);
}
.mockup-note--centred::before { content: none; }

/* --------------------------------------------------------------------------
   Platform page scaffolding
   -------------------------------------------------------------------------- */

.register-hero { padding: var(--s7) 0 var(--s6); }
.register-hero > .wrap > * { max-width: var(--w-prose); }
.register-hero h1 { margin-bottom: var(--s3); text-wrap: balance; }

/* A break that only exists where there is room for it. Below 720px the
   measure is too narrow and the browser's own wrapping is better. */
.br-wide { display: none; }
@media (min-width: 721px) {
  .br-wide { display: inline; }
}

/* --------------------------------------------------------------------------
   The Call: the funder leads, the programme name is the subject, and the
   local name sits under it. No entry number, per the numbering rule.
   -------------------------------------------------------------------------- */

/* The entry band runs the full measure above the panels. The title used to
   be capped at 34ch in a flex column beside a floating date, which wrapped
   "Film Production, Priority I: Development, documentary" into four narrow
   lines and left the date orphaned across the gutter. It is the subject of
   the screen, so it gets the width. */
.entry-head .eyebrow { margin-bottom: 0.8rem; }
.entry-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 24ch;         /* long enough to break by sense, not by column */
  margin: 0 0 0.6rem;
}
.entry-local {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--umber);
  opacity: 0.72;
  margin: 0;
}

/* The three provenance dates, on the same grid as the panels beneath. These
   are when the document was published, when a person last opened it, and
   when it is due to be opened again: the register's own bookkeeping, kept
   apart from the fund's rules, which live in the left panel. */
.entry-provenance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s3) var(--s4);
  margin: var(--s5) 0 0;
  padding-top: var(--s3);
  border-top: var(--hairline);
}
.entry-provenance > div { margin: 0; }
.entry-provenance dt {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: 0.72;          /* 5.16:1 on cream, the safe pattern; the stone this
                              replaced measured 1.60:1 */
  margin-bottom: 0.4rem;
}
.entry-provenance dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Your letter: the one place the hero numeral is earned. Letters are
   numbered, funds are not.
   -------------------------------------------------------------------------- */

/* The other hero numeral. Both numerals are plain --ochre, on cream and on
   espresso alike, so the component wears one gold wherever it appears. The
   .win override below is now redundant but kept, because it documents that
   the espresso case was considered rather than forgotten. */
.letter-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--ochre);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.3rem;
}
.project-head h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.4rem;
}

/* The calendar's month, set as a caption above the grid so the month can be
   swapped without touching the section heading. */
.cal-month { display: block; margin: 0 0 var(--s3); }

.later-caveat {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  color: var(--umber);
  opacity: 0.8;
}

.screen-note { margin-top: var(--s2); max-width: var(--w-prose); color: var(--umber); }

/* --------------------------------------------------------------------------
   The ruled margin. One structural move to make the page read as a register
   rather than ten stacked cards: a running mark in the gutter beside each
   section, the way a bound ledger numbers its openings.

   It only exists where there is genuinely room beside the 65rem measure. Below
   that it sits above the heading as a small mark, and it is aria-hidden
   throughout: the headings already carry the structure for a screen reader,
   and a list of bare numerals would only add noise.
   -------------------------------------------------------------------------- */

/* Both, because the data screens use .screen-head and the prose sections use
   .section-head, and the mark belongs beside either. */
.register-page .screen-head,
.register-page .section-head { position: relative; }

.section-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--umber);
  opacity: var(--quiet);   /* was 0.55, which measured 3.23:1 */
  margin-bottom: 0.6rem;
}

@media (min-width: 1260px) {
  .section-mark {
    position: absolute;
    left: -4.5rem;
    top: 0.5rem;
    margin: 0;
    padding-top: 0.9rem;
    border-top: 2px solid var(--ochre);
    min-width: 2.5rem;
    opacity: 1;
  }
}

/* The register's own verification state, shown per row rather than claimed
   once in prose. Three tiers, mapped from record_basis in the workbook. */
/* A rule and a label. The old bordered pill shared its 1px border and 4px
   radius with .chip, the only pressable thing on the page, so it read as a
   button that did nothing when clicked. The rule's weight carries the state
   and the rules align down the column even when the words do not, which is
   what makes "how many rows are actually checked" answerable at a glance. */
.tier {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--umber);
  white-space: nowrap;
}
.tier-rule {
  flex: 0 0 auto;
  width: 14px;
  height: 0;
  border-top: 1px solid var(--stone);
}
.tier--verified .tier-rule { border-top-width: 3px; border-color: var(--umber); }
.tier--source   .tier-rule { border-top-width: 1px; border-color: var(--umber); }
.tier--draft    .tier-rule { border-top-style: dashed; border-color: var(--stone); }
.tier--draft .tier-label { opacity: 0.8; }

/* A grid, not flex-wrap. Wrapping three items of different widths put the
   three definitions at three different left edges, so it read as stray
   sentences rather than a key. */
.tier-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s3) var(--s4);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hairline);
}
.tier-key div { font-size: 0.9375rem; }
.tier-key .tier { margin-bottom: 0.5rem; }
.tier-key p { margin: 0; max-width: 34ch; }

/* --------------------------------------------------------------------------
   The statistics explorer: real controls over a real embedded dataset
   -------------------------------------------------------------------------- */

.explorer { margin-top: var(--space-head); }

/* Fund and session are administrative axes, so they are selects. Discipline
   and stage stay as chips because they are the two a filmmaker thinks in. */
.filter-selects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.filter-field { display: flex; flex-direction: column; min-width: 14rem; }
.filter-field select {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--umber);
  background: transparent;
  border: 1px solid var(--stone);
  border-radius: var(--radius-control);
  padding: 0.7rem 0.8rem;
  min-height: 44px;
  cursor: pointer;
}
.filter-field select:hover { border-color: var(--terracotta); }
.filter-field select:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* The calendar's month control. */
.cal-nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.cal-nav .cal-month { margin: 0; min-width: 12ch; }
.cal-step {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--umber);
  background: transparent;
  border: 1px solid var(--stone);
  border-radius: var(--radius-control);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.cal-step:hover:not([disabled]) { border-color: var(--terracotta); color: var(--terracotta); }
.cal-step:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.cal-step[disabled] { opacity: 0.35; cursor: not-allowed; }

.cal-empty {
  margin: var(--s3) 0 0;
  padding: var(--s4);
  border: 1px dashed var(--stone);
  border-radius: var(--radius-card);
}

/* Drawn, not wired: a control inside a picture of an interface. */
.btn--drawn { cursor: default; }

.filter-group { margin-bottom: var(--s3); }
/* Umber, not the ochre .eyebrow uses. These legends name the controls, so
   they are read, not glanced at, and ochre on cream is 1.99:1. */
.filter-group > .filter-legend {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber);
  margin-bottom: 0.7rem;
  padding: 0;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  color: var(--umber);
  background: transparent;
  border: 1px solid var(--stone);
  border-radius: var(--radius-control);
  /* 44px tap target without a fixed height, so the label can wrap at 375px */
  padding: 0.8rem 1rem;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
}
.chip:hover { border-color: var(--terracotta); color: var(--terracotta); }
.chip:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.chip[aria-pressed="true"] {
  background: var(--umber);
  border-color: var(--umber);
  color: var(--cream);
  font-weight: 700;
}
.chip[aria-pressed="true"]:hover { background: var(--umber); color: var(--cream); }
.chip[disabled] { opacity: 0.38; cursor: not-allowed; }
.chip[disabled]:hover { border-color: var(--stone); color: var(--umber); }

.chip-count { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* Why a chip is unavailable, said out loud. A title attribute reaches neither
   a touch user nor a screen reader, and the reason is honest content. */
.chip-why {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 400;
  font-style: italic;
}

.explorer-summary {
  margin: var(--s4) 0 var(--s3);
  padding-top: var(--s3);
  border-top: var(--hairline);
}
.explorer-summary p { margin: 0; }

/* The statistics themselves. Numbers larger than their labels, per the
   brand book: the register's numbers are the story. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s3) var(--s4);
  margin: var(--s4) 0 0;
}
.stat { margin: 0; }
.stat dt {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber);
  margin-bottom: 0.35rem;
}
/* The brand book sets numerals in ochre, and for a decorative section opener
   that is right. These numerals are not decoration: they are the answer the
   visitor came for. Ochre on cream is 1.99:1 and would make the page's own
   content the least readable thing on it, so the figures are umber and the
   brand's "numbers larger than their labels" rule carries the emphasis
   instead. Ochre still does the structural work, in the rules and sidemarks. */
.stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.05;
  color: var(--umber);
  font-variant-numeric: tabular-nums;
}
/* One figure per screen carries the answer; the rest support it. Six numbers
   competing at the same size means none of them is the point. */
.stat--hero { grid-column: 1 / -1; }
.stat--hero dd { font-size: clamp(2.6rem, 6vw, 4rem); }
.stat--hero .stat-sub { font-size: 1rem; }

.stat .stat-unit { font-size: 0.5em; color: var(--umber); letter-spacing: 0.02em; }
.stat .stat-sub {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--umber);
  letter-spacing: 0;
}
/* Umber, not stone: an absent figure still has to be readable, and stone on
   cream is 1.60:1. Smaller and in the body face is enough to mark it as an
   absence rather than a number. */
.stat--empty dd {
  color: var(--umber);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
}

.explorer-empty {
  margin: var(--s4) 0 0;
  padding: var(--s4);
  border: 1px dashed var(--stone);
  border-radius: var(--radius-card);
}
.explorer-empty p { margin: 0; max-width: 46ch; }

/* Fund-level intelligence for the current selection. Claims only, and only
   the ones the register has flagged shown_to_user = Y. */
.intel { margin-top: var(--s5); }
.intel-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.intel-list li {
  position: relative;
  padding-left: 1.4rem;
  max-width: 62ch;
}
.intel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 1px;
  background: var(--ochre);
}

/* --------------------------------------------------------------------------
   Ledger additions: the verification column, and the deadline day
   -------------------------------------------------------------------------- */

/* Scoped to .register-page so the shared .ledger rules cannot drift on
   index.html, which uses the same table with a different set of columns. */
.register-page .ledger .tier-cell { white-space: nowrap; }
.register-page .ledger .prog { font-weight: 400; }
.register-page .ledger .callstatus {
  font-weight: 500;
  white-space: nowrap;
}

/* The funnel and the derived findings: facts as a list, not as a paragraph.
   A blob of six figures is read by nobody; four lines are read by everyone. */
.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.fact-list li {
  position: relative;
  padding-left: 1.4rem;
}
.fact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 1px;
  background: var(--ochre);
}
.register-page .ledger .country {
  font-weight: 700;
  color: var(--umber);
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   How a fund reaches you: reuses .steps / .step-num, adds only the source line
   -------------------------------------------------------------------------- */

.step-source {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--umber);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   index.html: the one finding, and the invitation into /register.html.
   These replace the three product screens the landing page used to carry.
   -------------------------------------------------------------------------- */

.finding {
  border-left: 2px solid var(--ochre);
  padding-left: var(--s4);
  margin-bottom: var(--s6);
}
/* The glance: fund, programme, session, in that order, before the sentence
   that needs them. Umber rather than ochre: at this size (below the 18.66px
   bold threshold for the 3:1 large-text exemption) it needs the full 4.5:1
   floor, which ochre on cream does not clear. */
.finding-meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber);
  opacity: 0.72;
  margin: 0 0 0.7rem;
}
.finding-lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  max-width: 24ch;
  margin: 0 0 var(--s3);
}
.finding .fact-list { max-width: 52ch; }
.finding .mockup-note { padding-left: 0; }
.finding .mockup-note::before { content: none; }

/* The invitation is the page's one strong pull sideways, so it gets a frame
   the surrounding prose does not have. A rule, not a card: no card nesting. */
.invitation {
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding: var(--s5) 0;
}
/* Wide enough that the manual breaks decide where the lines end: the
   longest of the three runs to 56 characters, so a 46ch cap would have
   wrapped it first and made the breaks meaningless. Below 720px the breaks
   disappear and the container width governs instead. */
.invitation-lead {
  max-width: 62ch;
  margin: 0 0 var(--s4);
}

/* Text, not a filled .btn: a solid terracotta button here read as a third
   conversion action, identical in weight to the two that actually capture
   the reader, in the middle of a page whose only job is capture. Bold,
   larger than body copy and un-underlined so it still reads as the
   strongest single link on the page, without competing with .btn. */
.invitation-cta { margin: 0 0 var(--s5); }
.invitation-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--terracotta);
  text-decoration: none;
}
.invitation-btn:hover { color: color-mix(in srgb, var(--terracotta) 78%, var(--umber)); }
.invitation-btn:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; }

/* Six questions, numbered like entries in the register itself, echoing the
   section marks on register.html so "come see the rest" reads as an index
   into a real document rather than a loose list of links. Umber for the
   numeral for the same contrast reason as .finding-meta above. */
.invitation-links {
  list-style: none;
  counter-reset: invitem;
  margin: 0;
  padding: var(--s4) 0 0;
  border-top: var(--hairline);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 var(--s4);
}
.invitation-links li {
  counter-increment: invitem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-bottom: var(--hairline);
}
.invitation-links li::before {
  content: counter(invitem, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--umber);
  opacity: 0.72;   /* umber at 0.72 lands at 5.16:1 on cream, same pattern as
                       .doc-meta and .excerpt-head; 0.5 measured 2.83:1 and failed */
  font-variant-numeric: tabular-nums;
}
/* The padding lives on the link, not the row: min-height:44px only reaches
   the tap-target floor if it is the anchor's own box, not a visual gap the
   li supplies around it. */
.invitation-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
}

/* One film, two stages, on the espresso surface. The funded stage carries the
   mark's dot; the open one carries no dot at all, and says so. */
.wall-mark figcaption .stage-name {
  display: block;
  font-weight: 700;
  color: var(--espresso-text);
}
.wall-mark figcaption .stage-detail {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--stone);
  max-width: 22ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   The "not built yet" strip. Deliberately quiet, deliberately not a mockup.
   -------------------------------------------------------------------------- */

.later {
  border: 1px dashed var(--stone);
  border-radius: var(--radius-card);
  padding: var(--s4);
}
.later h2 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); margin-bottom: 0.6rem; }
.later ul { margin: var(--s3) 0 0; padding-left: 1.2rem; }
.later li { margin-bottom: 0.5rem; }
.later li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   The register's close: the same two actions as index.html, in the same
   order, centred rather than left-aligned.
   -------------------------------------------------------------------------- */

.quiet-close { text-align: center; }
.quiet-close > .wrap > * { max-width: var(--w-prose); margin-inline: auto; }
.quiet-close .close-actions { justify-content: center; }
.quiet-close .waitlist--bare { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Platform page responsive
   -------------------------------------------------------------------------- */

@media (max-width: 719px) {
  /* The platform ledger carries six columns the landing page's does not, and
     no entry number at all, so its card layout is placed from scratch rather
     than inherited. Two rows, three columns:
        deadline | fund      | status
        country  | programme | how we know
     Scoped to .register-page: index.html's ledger keeps the shared placement. */
  .register-page .ledger .deadline { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 1rem; margin-top: 0; }
  .register-page .ledger .fund { grid-column: 2; grid-row: 1; }
  .register-page .ledger .callstatus { grid-column: 3; grid-row: 1; justify-self: end; }
  .register-page .ledger .country { grid-column: 1; grid-row: 2; }
  .register-page .ledger .prog { grid-column: 2; grid-row: 2; font-size: 0.875rem; }
  .register-page .ledger .tier-cell { grid-column: 3; grid-row: 2; justify-self: end; }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }
  .stat dd { font-size: 1.5rem; }
}

@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr; }
  .chip { width: 100%; }
}