/* ==========================================================================
   YoureNX — page compositions
   Extends site.css for the institutional home and interior pages. Introduces
   no new colours, type sizes or spacing values:
   every declaration here resolves through the custom properties defined in
   site.css :root, so the horizon system stays the single source of truth.

   The one structural idea: interior pages open on ink (masthead → page hero,
   continuous dark field), cross the horizon line once, and settle onto paper
   for reading. Same device as home, fewer movements.
   ========================================================================== */

/* Home paints its own section backgrounds; interior pages sit on paper below the
   hero, so the body needs the light field or the last section bleeds into ink. */
.page{ background: var(--paper); }

/* --- Home --------------------------------------------------------------- */

/* The approved first screen is a single asymmetrical statement over the supplied
   raster horizon. The only gradients here are the brand wordmark and legibility
   veils; the atmosphere itself remains in horizon-institutional.png. */
.home-hero{
  min-height: clamp(36rem, 66vw, 43rem);
  display:grid;
  align-items:center;
  padding-block: clamp(3rem,6vw,5.5rem);
  border-bottom:1px solid var(--ink-line);
}

.home-hero .horizon-media{
  object-position:50% 61%;
  opacity:.72;
}

.home-hero::after{
  background:
    linear-gradient(90deg, rgb(8 13 23 / .76), rgb(8 13 23 / .26) 54%, rgb(8 13 23 / .7)),
    linear-gradient(180deg, rgb(8 13 23 / .42), transparent 48%, rgb(8 13 23 / .16));
}

.home-hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(20rem,.9fr);
  gap: clamp(3rem,7vw,7rem);
  align-items:center;
}

.home-hero .eyebrow{ margin-bottom: clamp(1rem,2vw,1.5rem); }

.home-hero h1{
  max-width:11.3ch;
  font-size: clamp(4.35rem,6.6vw,6.75rem);
  line-height:.93;
  letter-spacing:-.025em;
}

.nx-text{
  font-style:italic;
  background:var(--nx);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.home-hero__proposition{
  border-left:2px solid var(--gold);
  padding-left: clamp(1.5rem,3vw,2.5rem);
  color:var(--on-ink-mid);
}

.home-hero__lead{
  max-width:24ch;
  margin-bottom:1.35rem;
  font-family:var(--display);
  font-size:clamp(1.7rem,2.4vw,2.25rem);
  line-height:1.15;
  color:var(--on-ink);
}

.home-hero__proposition > p:not(.home-hero__lead){
  font-size:var(--step-1);
  line-height:1.5;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.4rem;
  margin-top:clamp(1.6rem,3vw,2.35rem);
}

.text-link--light{
  color:var(--on-ink);
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:.35rem;
  text-decoration-thickness:1px;
}
.text-link--light:hover{ color:var(--gold); }

.text-link--paper{
  color:var(--nx-purple);
  text-decoration:underline;
  text-underline-offset:.3rem;
  text-decoration-thickness:1px;
}
.text-link--paper:hover{ color:var(--nx-pink); }

.home-section{ padding-block:clamp(4rem,8vw,7rem); }
.home-section--protocol,
.home-section--ink{ background:var(--ink); color:var(--on-ink); }
.home-section--paper{ background:var(--paper); color:var(--on-paper); }

.home-section__head{ max-width:64ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.home-section__head h2{
  max-width:18ch;
  font-size:var(--step-3);
  color:inherit;
}
.home-section__head > p,
.home-section__head--split > p{ color:var(--on-ink-mid); }
.home-section__head a{ color:var(--on-ink); text-underline-offset:.25rem; }
.home-section__head a:hover{ color:var(--gold); }

.home-section__head--split{
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,.8fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:end;
}

.home-section__head--split > p{
  max-width:48ch;
  font-size:var(--step-0);
  line-height:1.65;
}
.home-section__head--split strong{ color:var(--on-ink); font-weight:600; }

.protocol{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-block:1px solid var(--ink-line);
}

.protocol__step{
  min-width:0;
  padding:clamp(1.35rem,2.5vw,2rem) clamp(1rem,2vw,1.5rem);
  border-right:1px solid var(--ink-line);
}
.protocol__step:first-child{ padding-left:0; }
.protocol__step:last-child{ border-right:0; }

.protocol__number{
  display:block;
  margin-bottom:clamp(1.8rem,4vw,3rem);
  font-family:var(--display);
  font-size:var(--step-2);
  line-height:1;
  color:var(--gold);
}

.protocol__step h3{
  margin-bottom:.6rem;
  font-size:var(--step-1);
  color:var(--on-ink);
}
.protocol__step p{ font-size:.9rem; line-height:1.55; color:var(--on-ink-mid); }

.home-standard{
  padding-block:clamp(3rem,6vw,5rem);
  background:var(--ink-2);
  color:var(--on-ink);
  border-block:1px solid var(--ink-line);
}

.home-standard__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(20rem,.85fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:end;
}

.home-standard h2{
  max-width:16ch;
  font-size:var(--step-3);
}

.home-standard__body{ display:grid; gap:1.4rem; justify-items:start; }
.home-standard__body p{ max-width:58ch; color:var(--on-ink-mid); }

.institutional-case{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(22rem,.9fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:start;
}

.institutional-case h2{
  max-width:15ch;
  margin-bottom:1.5rem;
  font-size:var(--step-3);
  line-height:1.04;
}

.institutional-case__argument > p:not(.eyebrow){
  max-width:60ch;
  color:var(--on-paper-mid);
}
.institutional-case__argument > p + p{ margin-top:1.25rem; }
.institutional-case__lead{ font-size:var(--step-1); line-height:1.55; }

.evidence-system{
  padding-left:clamp(1.5rem,3vw,2.5rem);
  border-left:1px solid var(--paper-line);
}

.evidence-system__label{
  margin-bottom:1.25rem;
  font-family:var(--mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nx-purple);
}

.evidence-system dl{ margin:0 0 1.6rem; }
.evidence-system dl div{
  display:grid;
  grid-template-columns:minmax(7rem,.65fr) minmax(0,1.35fr);
  gap:1rem;
  padding:1rem 0;
  border-top:1px solid var(--paper-line);
}
.evidence-system dl div:last-child{ border-bottom:1px solid var(--paper-line); }
.evidence-system dt{ font-weight:600; color:var(--on-paper); }
.evidence-system dd{ margin:0; font-size:.92rem; line-height:1.55; color:var(--on-paper-mid); }

.profile-ledger{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--ink-line);
}

.profile-record{
  min-width:0;
  padding:clamp(1.5rem,3vw,2.25rem);
  border-right:1px solid var(--ink-line);
}
.profile-record:first-child{ padding-left:0; }
.profile-record:last-child{ border-right:0; }

.profile-record__meta{
  display:grid;
  gap:.35rem;
  min-height:3.4rem;
  margin-bottom:clamp(1.75rem,3vw,2.5rem);
  font-family:var(--mono);
  font-size:var(--step--1);
  line-height:1.45;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--on-ink-dim);
}
.profile-record__meta span:last-child{ color:var(--gold); }
.profile-record h3{ margin-bottom:.7rem; font-size:var(--step-2); color:var(--on-ink); }
.profile-record > p{ font-size:.92rem; line-height:1.6; color:var(--on-ink-mid); }
.profile-record .profile-record__field{
  margin-bottom:1.35rem;
  padding-bottom:1.35rem;
  border-bottom:1px solid var(--ink-line);
  color:var(--on-ink);
}

.horizon-intelligence{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(24rem,.9fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:start;
}

.horizon-intelligence h2{
  max-width:17ch;
  margin-bottom:1.5rem;
  font-size:var(--step-3);
}
.horizon-intelligence__intro > p:not(.eyebrow){ max-width:58ch; color:var(--on-paper-mid); }
.horizon-intelligence__note{
  margin-top:1.25rem;
  font-size:var(--step--1);
  line-height:1.55;
}

.intelligence-lenses{ list-style:none; margin:0; padding:0; border-top:1px solid var(--paper-line); }
.intelligence-lenses li{ padding:1.35rem 0; border-bottom:1px solid var(--paper-line); }
.intelligence-lenses span{
  display:block;
  margin-bottom:.55rem;
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--nx-purple);
}
.intelligence-lenses h3{ margin-bottom:.45rem; font-size:var(--step-1); color:var(--on-paper); }
.intelligence-lenses p{ font-size:.92rem; line-height:1.55; color:var(--on-paper-mid); }

.home-nomination{
  padding-block:clamp(4rem,8vw,7rem);
  background:var(--ink-2);
  color:var(--on-ink);
  border-top:1px solid var(--ink-line);
}

.home-nomination__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(20rem,.8fr);
  gap:clamp(2.5rem,7vw,7rem);
  align-items:end;
}
.home-nomination h2{ max-width:14ch; font-size:var(--step-3); }
.home-nomination__action{ display:grid; gap:1.6rem; justify-items:start; }
.home-nomination__action p{ max-width:50ch; color:var(--on-ink-mid); }

/* --- Page hero ---------------------------------------------------------- */

.phero{
  position:relative;
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(3.5rem,7vw,6.5rem) 0;
  overflow:hidden;
}

/* Same faint survey grid as the home hero, at lower contrast — this is a page
   header, not the front door. */
.phero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgb(34 44 66 / .5) 1px, transparent 1px),
    linear-gradient(rgb(34 44 66 / .5) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 80% at 70% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 80% at 70% 0%, #000, transparent 72%);
  pointer-events:none;
}

.phero .shell{ position:relative; }

.phero__inner{ max-width: 68ch; padding-bottom: clamp(2.5rem,5vw,4rem); }

.phero h1{
  font-size: var(--step-4);
  margin:0 0 1.2rem;
  max-width: 24ch;
}

.phero__lede{
  font-size: var(--step-1);
  line-height:1.55;
  color: var(--on-ink-mid);
  max-width: 58ch;
}
.phero__lede strong{ color: var(--on-ink); font-weight:500; }

.phero__actions{
  display:flex; flex-wrap:wrap; gap:.9rem;
  margin-top: clamp(1.75rem,3vw,2.5rem);
}

/* Wide variant: for pages that carry a summary figure or aside beside the title. */
.phero__split{
  display:grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items:end;
  padding-bottom: clamp(2.5rem,5vw,4rem);
}
.phero__split .phero__inner{ padding-bottom:0; }

/* The horizon line closing the hero, so the device recurs on every page. */
.phero__rule{ padding-bottom: clamp(2rem,4vw,3rem); }

.phero--compact{ padding-top:clamp(2.75rem,5vw,4.5rem); }
.phero--compact .phero__inner{ max-width:62ch; }
.phero--compact h1{ max-width:20ch; }

/* --- Breadcrumb --------------------------------------------------------- */

.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--on-ink-dim);
  margin:0 0 1.6rem;
  list-style:none;
  padding:0;
}
.crumb li{ display:flex; align-items:center; gap:.55rem; }
.crumb li + li::before{ content:"/"; color: var(--ink-line); }
.crumb a{ text-decoration:none; }
.crumb a:hover{ color: var(--gold); }
.crumb [aria-current="page"]{ color: var(--on-ink-mid); }

/* --- Prose (legal, policy, long-form) ----------------------------------- */

.prose{
  max-width: 72ch;
  font-size: var(--step-0);
  line-height:1.72;
  color: var(--on-paper-mid);
}

.prose > * + *{ margin-top:1.15rem; }

.prose h2{
  font-size: var(--step-2);
  color: var(--on-paper);
  margin-top: clamp(2.5rem,5vw,3.5rem);
  padding-top: clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--paper-line);
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }

.prose h3{
  font-size: var(--step-1);
  color: var(--on-paper);
  margin-top:2rem;
}

.prose strong{ color: var(--on-paper); font-weight:600; }

.prose a{
  color: var(--nx-purple);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.prose a:hover{ color: var(--nx-pink); }

.prose ul, .prose ol{ margin:1.15rem 0 0; padding-left:1.3rem; display:grid; gap:.6rem; }
.prose li{ padding-left:.2rem; }
.prose li::marker{ color: var(--nx-purple); }

.prose blockquote{
  margin:1.75rem 0 0;
  padding:1.25rem 1.5rem;
  background:#fff;
  border-left:2px solid var(--gold);
  font-family: var(--display);
  font-size: var(--step-1);
  line-height:1.4;
  color: var(--on-paper);
}

/* Dates and revision stamps above a policy. */
.prose__stamp{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
  margin:0 0 2rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--paper-line);
}

/* Sidenote / definition inside prose, kept visually subordinate. */
.prose__note{
  padding:1.1rem 1.35rem;
  background: var(--paper-2);
  font-size: var(--step--1);
  line-height:1.6;
}

/* A note that qualifies the whole document rather than the paragraph beside it, marked with
   the same gold rule as .nominate__block--flag and .handoff__notice so the reader recognises
   it as a statement about the prototype. */
.prose__note--flag{ border-left:2px solid var(--gold); }

/* --- Contents rail (for long legal pages) ------------------------------- */

.legal{
  display:grid;
  grid-template-columns: minmax(0,15rem) minmax(0,1fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items:start;
}

.toc{ position:sticky; top:1.5rem; }
.toc h2{
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
  margin:0 0 1rem;
}
.toc ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.toc a{
  font-size: var(--step--1);
  color: var(--on-paper-mid);
  text-decoration:none;
  display:block;
  padding-left:.85rem;
  border-left:1px solid var(--paper-line);
}
.toc a:hover{ color: var(--on-paper); border-left-color: var(--gold); }

/* --- Cards (generic interior grid unit) --------------------------------- */

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1.25rem,2.5vw,1.75rem);
}
.cards--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

.card{
  background:#fff;
  border:1px solid var(--paper-line);
  padding: clamp(1.4rem,2.5vw,1.9rem);
  display:flex; flex-direction:column; gap:.7rem;
}

.card__ref{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.14em;
  color: var(--on-paper-dim);
}

.card h3{ font-size: var(--step-1); color: var(--on-paper); }
.card p{ font-size:.92rem; line-height:1.6; color: var(--on-paper-mid); }

/* Pushes a link to the base of the card so a row of cards aligns at the bottom
   regardless of body length. */
.card__more{
  margin-top:auto;
  padding-top:.5rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--nx-purple);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.45rem;
}
.card__more:hover{ color: var(--nx-pink); }

a.card{ text-decoration:none; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
a.card:hover{
  border-color: var(--on-paper-dim);
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -26px rgb(13 19 33 / .55);
}

/* On ink sections. */
.band--ink .card,
.band--ink-2 .card{
  background: var(--ink-3);
  border-color: var(--ink-line);
}
.band--ink .card h3,
.band--ink-2 .card h3{ color: var(--on-ink); }
.band--ink .card p,
.band--ink-2 .card p{ color: var(--on-ink-mid); }
.band--ink .card__ref,
.band--ink-2 .card__ref{ color: var(--on-ink-dim); }
.band--ink .card__more,
.band--ink-2 .card__more{ color: var(--gold); }

/* --- Stats strip -------------------------------------------------------- */

.stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}

.stat{ padding: clamp(1.4rem,3vw,2.1rem) 1.5rem; border-right:1px solid var(--paper-line); }
.stat:last-child{ border-right:0; }
.stat:first-child{ padding-left:0; }

.stat__k{
  display:block;
  font-family: var(--display);
  font-size: var(--step-3);
  line-height:1;
  color: var(--on-paper);
}
.stat__v{
  display:block;
  margin-top:.5rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
}

.band--ink .stats, .band--ink-2 .stats{ border-color: var(--ink-line); }
.band--ink .stat, .band--ink-2 .stat{ border-right-color: var(--ink-line); }
.band--ink .stat__k, .band--ink-2 .stat__k{ color: var(--gold); }
.band--ink .stat__v, .band--ink-2 .stat__v{ color: var(--on-ink-dim); }

/* --- Team ---------------------------------------------------------------- */

.team{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(1.25rem,2.5vw,1.75rem);
}

.member{ display:flex; flex-direction:column; gap:.55rem; }

/* Initials rather than a photograph: no stock imagery stands in for a real person,
   and the monogram degrades honestly until real portraits exist. */
.member__sigil{
  width:100%;
  aspect-ratio:1;
  display:grid; place-items:center;
  background: var(--ink-2);
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--step-2);
  letter-spacing:.08em;
  border:1px solid var(--ink-line);
  margin-bottom:.4rem;
}

.member__name{ font-family: var(--display); font-size: var(--step-1); color: var(--on-paper); line-height:1.1; }
.member__role{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
}
.member__bio{ font-size:.88rem; line-height:1.55; color: var(--on-paper-mid); }

/* --- Timeline ----------------------------------------------------------- */

.tl{ list-style:none; margin:0; padding:0; display:grid; gap:0; }

.tl__item{
  position:relative;
  display:grid;
  grid-template-columns: 7rem minmax(0,1fr);
  gap: clamp(1rem,3vw,2.5rem);
  padding: clamp(1.4rem,3vw,2rem) 0;
  border-top:1px solid var(--paper-line);
}
.tl__item:last-child{ border-bottom:1px solid var(--paper-line); }

.tl__when{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--nx-purple);
  padding-top:.2rem;
}

.tl__what h3{ font-size: var(--step-1); color: var(--on-paper); margin-bottom:.5rem; }
.tl__what p{ font-size:.94rem; line-height:1.62; color: var(--on-paper-mid); max-width:62ch; }

/* --- Numbered steps ----------------------------------------------------- */

.steps{ list-style:none; margin:0; padding:0; display:grid; gap: clamp(1rem,2vw,1.5rem); counter-reset: step; }

.step{
  display:grid;
  grid-template-columns: 3rem minmax(0,1fr);
  gap: clamp(1rem,2vw,1.5rem);
  align-items:start;
  background:#fff;
  border:1px solid var(--paper-line);
  padding: clamp(1.2rem,2.5vw,1.6rem);
}

.step__no{
  font-family: var(--mono);
  font-size: var(--step-1);
  color: var(--gold);
  background: var(--ink);
  width:3rem; height:3rem;
  display:grid; place-items:center;
}

.step h3{ font-size: var(--step-1); color: var(--on-paper); margin-bottom:.4rem; }
.step p{ font-size:.94rem; line-height:1.62; color: var(--on-paper-mid); }

/* --- FAQ ---------------------------------------------------------------- */

.faq{ display:grid; gap:0; max-width:80ch; }

.faq__item{
  border-top:1px solid var(--paper-line);
  padding: clamp(1rem,2vw,1.35rem) 0;
}
.faq__item:last-child{ border-bottom:1px solid var(--paper-line); }

/* <details>/<summary>: open and close with no JS, and remain readable when the
   marker is restyled away. */
.faq__q{
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--on-paper);
  cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:"+";
  font-family: var(--mono);
  font-size: var(--step-1);
  color: var(--nx-purple);
  flex:none;
  transition: transform .2s var(--ease);
}
.faq__item[open] .faq__q::after{ content:"−"; }

.faq__a{
  margin-top:.85rem;
  font-size:.96rem;
  line-height:1.68;
  color: var(--on-paper-mid);
  max-width:70ch;
}

/* --- Data table --------------------------------------------------------- */

/* Wrapper scrolls on narrow screens rather than letting the table squash its
   columns to unreadable widths. tabindex in the markup makes it keyboard-scrollable. */
.tablewrap{ overflow-x:auto; border:1px solid var(--paper-line); background:#fff; }

.table{ width:100%; border-collapse:collapse; font-size:.92rem; }

.table caption{
  text-align:left;
  padding: clamp(1rem,2vw,1.25rem);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
  border-bottom:1px solid var(--paper-line);
}

.table th, .table td{
  padding:.85rem 1.1rem;
  text-align:left;
  border-bottom:1px solid var(--paper-line);
  vertical-align:top;
}

.table thead th{
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
  background: var(--paper-2);
  white-space:nowrap;
}

.table tbody tr:last-child td{ border-bottom:0; }
.table tbody th{ font-weight:600; color: var(--on-paper); }
.table td{ color: var(--on-paper-mid); }

.table__num{ font-family: var(--mono); text-align:right; color: var(--on-paper); }

/* --- Post list (journal, newsroom) -------------------------------------- */

.posts{ display:grid; gap:0; }

.post{
  display:grid;
  grid-template-columns: 9rem minmax(0,1fr) auto;
  gap: clamp(1rem,3vw,2.5rem);
  align-items:baseline;
  padding: clamp(1.3rem,2.5vw,1.9rem) 0;
  border-top:1px solid var(--paper-line);
  text-decoration:none;
  transition: background .18s var(--ease);
}
.post:last-child{ border-bottom:1px solid var(--paper-line); }
.post:hover{ background:#fff; }

.post__when{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
}

.post__title{ font-family: var(--display); font-size: var(--step-2); color: var(--on-paper); line-height:1.1; }
.post__dek{ display:block; margin-top:.5rem; font-family: var(--body); font-size:.92rem; line-height:1.6; color: var(--on-paper-mid); max-width:62ch; }

.post__tag{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--nx-purple);
  border:1px solid var(--paper-line);
  padding:.3rem .6rem;
  white-space:nowrap;
}

/* --- Panel (callout / CTA inside a page) -------------------------------- */

.panel{
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(1.75rem,4vw,3rem);
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(1.5rem,3vw,2.5rem);
  align-items:center;
}

.panel h2{ font-size: var(--step-2); margin-bottom:.6rem; }
.panel p{ color: var(--on-ink-mid); max-width:56ch; }
.panel__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

.panel--paper{
  background:#fff;
  color: var(--on-paper);
  border:1px solid var(--paper-line);
}
.panel--paper p{ color: var(--on-paper-mid); }

/* --- Definition pairs (spec / standard listings) ------------------------ */

.defs{ margin:0; display:grid; grid-template-columns: minmax(0,14rem) minmax(0,1fr); gap:0; }

.defs dt{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
  padding: clamp(.9rem,2vw,1.2rem) 1.5rem clamp(.9rem,2vw,1.2rem) 0;
  border-top:1px solid var(--paper-line);
}

.defs dd{
  margin:0;
  padding: clamp(.9rem,2vw,1.2rem) 0;
  font-size:.94rem;
  line-height:1.62;
  color: var(--on-paper-mid);
  border-top:1px solid var(--paper-line);
}

/* Ink variant, for definition lists on dark bands. */
.band--ink .defs dt, .band--ink-2 .defs dt{ color: var(--on-ink-dim); border-top-color: var(--ink-line); }
.band--ink .defs dd, .band--ink-2 .defs dd{ color: var(--on-ink-mid); border-top-color: var(--ink-line); }

/* --- About -------------------------------------------------------------- */

.about-split{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(22rem,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}

.about-split h2,
.about-context h2,
.governance-grid h2{
  max-width:16ch;
  font-size:var(--step-3);
}

.about-copy{ display:grid; gap:1.25rem; color:var(--on-paper-mid); }
.about-copy p{ max-width:62ch; }

.about-principles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--paper-line);
}

.about-principle{
  min-width:0;
  padding:clamp(1.5rem,3vw,2.25rem);
  border-right:1px solid var(--paper-line);
}
.about-principle:first-child{ padding-left:0; }
.about-principle:last-child{ border-right:0; }
.about-principle__ref{
  display:block;
  margin-bottom:clamp(1.8rem,4vw,3rem);
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.14em;
  color:var(--nx-purple);
}
.about-principle h3{ margin-bottom:.65rem; font-size:var(--step-1); color:var(--on-paper); }
.about-principle p{ font-size:.92rem; line-height:1.6; color:var(--on-paper-mid); }

.about-lifecycle{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ink-line);
  border-left:1px solid var(--ink-line);
}
.about-lifecycle li{
  min-width:0;
  padding:clamp(1.4rem,3vw,2rem);
  border-right:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line);
}
.about-lifecycle__number{
  display:block;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.14em;
  color:var(--gold);
}
.about-lifecycle h3{ margin-bottom:.55rem; font-size:var(--step-1); color:var(--on-ink); }
.about-lifecycle p{ max-width:34ch; font-size:.88rem; line-height:1.55; color:var(--on-ink-mid); }

.governance-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(22rem,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.governance-standard{
  padding-left:clamp(1.5rem,3vw,2.5rem);
  border-left:2px solid var(--gold);
}
.governance-standard > p{ margin-bottom:1.5rem; color:var(--on-ink-mid); }
.governance-standard dl{ margin:0; }
.governance-standard dl div{
  display:grid;
  grid-template-columns:minmax(7rem,.55fr) minmax(0,1.45fr);
  gap:1rem;
  padding:1rem 0;
  border-top:1px solid var(--ink-line);
}
.governance-standard dl div:last-child{ border-bottom:1px solid var(--ink-line); }
.governance-standard dt{ font-weight:600; color:var(--on-ink); }
.governance-standard dd{ margin:0; font-size:.9rem; line-height:1.55; color:var(--on-ink-mid); }

.about-context{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(22rem,.85fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:stretch;
}
.about-context__copy > p:not(.eyebrow){ max-width:60ch; margin-top:1.4rem; color:var(--on-paper-mid); }
.about-cta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(1.75rem,4vw,3rem);
  background:var(--ink);
  color:var(--on-ink);
}
.about-cta h2{ max-width:14ch; color:var(--on-ink); }
.about-cta > p:not(.eyebrow){ max-width:42ch; margin-top:1rem; color:var(--on-ink-mid); }
.about-cta .panel__actions{ margin-top:1.75rem; }

/* --- Contact ------------------------------------------------------------ */

/* The form itself uses the .field / .alert vocabulary from auth.css, which the
   contact page loads through the layout's @stack('head'). Only the page-level
   arrangement lives here — no input styling, so the two never diverge. */
.contact{
  display:grid;
  grid-template-columns:minmax(16rem,.72fr) minmax(0,1.28fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items:start;
}

.contact__form{
  background:#fff;
  border:1px solid var(--paper-line);
  border-top:2px solid var(--gold);
  padding: clamp(1.5rem,3.5vw,2.5rem);
}

.contact__form h2{ font-size: var(--step-2); color: var(--on-paper); margin-bottom:.6rem; }
.contact__intro{ font-size:.95rem; line-height:1.62; color: var(--on-paper-mid); margin-bottom:1.75rem; }

.contact__fields{ display:grid; gap:1.15rem; }

/* Two-up row for name/email, collapsing at the narrow breakpoint. */
.contact__row{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1.15rem; }

.contact__submit{ margin-top:1.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.25rem; }
.contact__legal{ font-size: var(--step--1); color: var(--on-paper-dim); max-width:40ch; }

.contact__aside{ display:grid; gap: clamp(1.5rem,3vw,2rem); }

.contact__block h2,
.contact__disclosure h2{
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
  margin-bottom:.75rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--paper-line);
}
.contact__block p{ font-size:.94rem; line-height:1.62; color: var(--on-paper-mid); }
.contact__block p + p{ margin-top:.65rem; }
.contact__block a{ color: var(--nx-purple); text-decoration:underline; text-underline-offset:3px; }
.contact__block a:hover{ color: var(--nx-pink); }

.contact__email{ font-size:var(--step-1); font-weight:600; overflow-wrap:anywhere; }
.contact__disclosure{
  padding:1.25rem;
  background:var(--paper-2);
  border-left:2px solid var(--gold);
}
.contact__disclosure h2{ margin-bottom:.6rem; padding:0; border:0; color:var(--on-paper); }
.contact__disclosure p{ font-size:var(--step--1); line-height:1.6; color:var(--on-paper-mid); }

/* --- Track a submission ------------------------------------------------- */

.track{ max-width:44rem; }

.track__form{
  background:#fff;
  border:1px solid var(--paper-line);
  padding: clamp(1.5rem,3.5vw,2.25rem);
  display:grid; gap:1.15rem;
}

/* Progress of a submission through the lifecycle, as a horizontal ladder. */
.rung{ list-style:none; margin:0; padding:0; display:grid; gap:0; }

.rung li{
  display:grid;
  grid-template-columns: 1.5rem minmax(0,1fr);
  gap:1rem;
  align-items:start;
  padding:.9rem 0;
  border-top:1px solid var(--paper-line);
  font-size:.94rem;
  color: var(--on-paper-dim);
}
.rung li:last-child{ border-bottom:1px solid var(--paper-line); }

.rung__mark{
  width:1.5rem; height:1.5rem;
  display:grid; place-items:center;
  border:1px solid var(--paper-line);
  font-family: var(--mono);
  font-size:.7rem;
  color: var(--on-paper-dim);
}
.rung .is-done{ color: var(--on-paper); }
.rung .is-done .rung__mark{ background: var(--ink); border-color: var(--ink); color: var(--gold); }
.rung .is-now{ color: var(--on-paper); font-weight:500; }
.rung .is-now .rung__mark{ border-color: var(--gold); background: var(--gold); color: var(--ink); }

/* --- The horizon gauge -------------------------------------------------- */

/* The brand device, drawn rather than photographed: a dial arcing over a horizon,
   an arrow climbing out of the vanishing point, and the five stages of the journey
   laid out beneath it. Built from an inline SVG plus real HTML text — the labels
   have to be selectable, translatable and readable by a screen reader, which rules
   out shipping this as an image. */

.hzn{ display:grid; justify-items:center; }

.hzn__dial{
  width:100%;
  max-width: 44rem;
  margin-inline:auto;
}
.hzn__dial svg{ display:block; width:100%; height:auto; }

/* The five stages. A rail rather than cards: this is one continuous journey, and
   boxing each stage would break it into five unrelated things. */
.hzn__rail{
  list-style:none;
  margin: clamp(1.5rem,3vw,2.5rem) 0 0;
  padding:0;
  width:100%;
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--ink-line);
}

.hzn__stage{
  display:grid;
  justify-items:center;
  gap:.55rem;
  text-align:center;
  padding: clamp(1.25rem,2.5vw,1.75rem) .75rem 0;
  border-right:1px solid var(--ink-line);
}
.hzn__stage:last-child{ border-right:0; }

.hzn__icon{
  width:2.9rem; height:2.9rem;
  display:grid; place-items:center;
  border:1px solid var(--ink-line);
  border-radius:50%;
  color: var(--gold);
  background: var(--ink-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.hzn__stage:hover .hzn__icon{ border-color: var(--gold); }

.hzn__name{
  font-family: var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--on-ink);
}

.hzn__note{
  font-size:.85rem;
  line-height:1.5;
  color: var(--on-ink-mid);
  max-width:16ch;
}

/* On a paper band the same device inverts. Kept as an override rather than a
   separate block so there is only ever one definition of the geometry. */
.band--paper .hzn__rail{ border-top-color: var(--paper-line); }
.band--paper .hzn__stage{ border-right-color: var(--paper-line); }
.band--paper .hzn__icon{ border-color: var(--paper-line); background:#fff; color: var(--nx-purple); }
.band--paper .hzn__name{ color: var(--on-paper); }
.band--paper .hzn__note{ color: var(--on-paper-mid); }

/* --- Organogram ---------------------------------------------------------- */

/* Three tiers, connected by hairlines drawn with pseudo-elements rather than an
   image or a nested-table hack, so the whole chart reflows and stays legible when
   the columns collapse. */

.org{ display:grid; justify-items:center; width:100%; }

.org__node{
  border:1px solid var(--ink-line);
  background: var(--ink-2);
  padding: clamp(.9rem,2vw,1.15rem) clamp(1rem,2.5vw,1.4rem);
  text-align:center;
  width:100%;
}

.org__role{
  font-size: var(--step-0);
  font-weight:600;
  color: var(--on-ink);
  line-height:1.25;
}

.org__unit{
  font-family: var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  line-height:1.7;
  color: var(--on-ink-dim);
  margin-top:.4rem;
}

/* Apex sits on the gold rule that runs through the rest of the system. */
.org__node--apex{
  border-top:2px solid var(--gold);
  max-width:26rem;
}
.org__node--lead{ max-width:26rem; }

/* Advisory council: dashed, because the relationship is advisory, not reporting.
   The border tells you that before you read a word of it. */
.org__node--dash{
  border-style:dashed;
  background:transparent;
}

/* The lead tier is three columns with equal flexible outer cells, which puts the
   auto-width middle cell dead centre on the page while the council sits out to
   one side on the same line. */
.org__tier--lead{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(16rem,26rem) minmax(0,1fr);
  align-items:center;
  width:100%;
}

.org__aside{
  position:relative;
  padding-left: clamp(1.5rem,4vw,3rem);
}
.org__aside::before{
  content:"";
  position:absolute;
  top:50%; left:0;
  width: clamp(1.5rem,4vw,3rem);
  border-top:1px dashed var(--ink-line);
}

/* Vertical connector between tiers. A real element, not a margin trick, so the
   run of the line is set in one place. */
.org__link{
  width:1px;
  height: clamp(1.5rem,3vw,2.25rem);
  background: var(--ink-line);
}

.org__branch{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:1rem;
  width:100%;
  position:relative;
  padding-top: 2.25rem;
}

/* Horizontal spine, inset to the centre of the first and last columns.
   With five columns and a 1rem gap each column is (100% - 4rem)/5 wide, so half
   of that is (100% - 4rem)/10 — which is exactly the inset needed at each end. */
.org__branch::before{
  content:"";
  position:absolute;
  top:0;
  left: calc((100% - 4rem) / 10);
  right: calc((100% - 4rem) / 10);
  height:1px;
  background: var(--ink-line);
}

/* Stub dropping from the spine into each division. */
.org__branch > *{ position:relative; }
.org__branch > *::before{
  content:"";
  position:absolute;
  top:-2.25rem; left:50%;
  width:1px; height:2.25rem;
  background: var(--ink-line);
}

.org__foot{
  font-size:.85rem;
  line-height:1.6;
  color: var(--on-ink-dim);
  text-align:center;
  max-width:60ch;
  margin: clamp(1.5rem,3vw,2.25rem) auto 0;
}

/* --- Join: pathways and orientation ------------------------------------- */

/* A divided rail rather than three floating cards. The pathways are alternatives
   cut from a single decision, and a shared rule says that; drop shadows would
   say the opposite. */
.pathways{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--paper-line);
}

.pathway{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:clamp(1.5rem,3vw,2.25rem);
  border-right:1px solid var(--paper-line);
}
.pathway:first-child{ padding-left:0; }
.pathway:last-child{ border-right:0; }

.pathway__ref{
  display:block;
  margin-bottom:clamp(1.8rem,4vw,3rem);
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.14em;
  color:var(--nx-purple);
}
.pathway h3{ margin-bottom:.7rem; font-size:var(--step-1); color:var(--on-paper); }
.pathway p{ font-size:.92rem; line-height:1.62; color:var(--on-paper-mid); }

.pathway__who{
  margin-top:.9rem;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--on-paper-dim);
}

/* Pushed to the foot of the column so the three actions align however unevenly
   the descriptions above them wrap. */
.pathway__go{
  margin-top:auto;
  padding-top:clamp(1.25rem,3vw,1.75rem);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
  font-weight:600;
  color:var(--nx-purple);
  text-decoration:none;
}
.pathway__go:hover{ color:var(--nx-pink); }
.pathway__go .arw{ transition:transform .25s var(--ease); }
.pathway__go:hover .arw{ transform:translateX(3px); }

.pathways__alt{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  max-width:62ch;
  font-size:.95rem;
  line-height:1.65;
  color:var(--on-paper-mid);
}
.pathways__link{ color:var(--nx-purple); text-decoration:underline; text-underline-offset:3px; }
.pathways__link:hover{ color:var(--nx-pink); }

/* Six stages in one row read as a sequence. Same construction as the nine-stage
   lifecycle on About, so the two are recognisably the same device. */
.orient{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--ink-line);
}
.orient li{
  min-width:0;
  padding:clamp(1.2rem,2.5vw,1.75rem) clamp(.9rem,2vw,1.25rem);
  border-right:1px solid var(--ink-line);
}
.orient li:first-child{ padding-left:0; }
.orient li:last-child{ border-right:0; }

.orient__num{
  display:block;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.14em;
  color:var(--gold);
}
.orient__name{
  display:block;
  font-family:var(--display);
  font-size:var(--step-2);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--on-ink);
}

.orient__note{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  max-width:62ch;
  font-size:.95rem;
  line-height:1.65;
  color:var(--on-ink-mid);
}
.orient__note a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* --- Nominate ----------------------------------------------------------- */

/* Same two-column construction as Contact, with the consent explanation in the
   left column so it is read before the form is filled rather than after.
   Task 7 should consolidate this and .contact into one shared block. */
.nominate{
  display:grid;
  grid-template-columns:minmax(16rem,.72fr) minmax(0,1.28fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}

.nominate__aside{ display:grid; gap:clamp(1.5rem,3vw,2rem); }

.nominate__block h2{
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-paper-dim);
  padding-top:1.1rem;
  margin-bottom:.7rem;
  border-top:1px solid var(--paper-line);
}
.nominate__block p{ font-size:.94rem; line-height:1.62; color:var(--on-paper-mid); }
.nominate__block a{ color:var(--nx-purple); text-decoration:underline; text-underline-offset:3px; }
.nominate__block a:hover{ color:var(--nx-pink); }

/* The one block that describes the prototype rather than the process, so it is
   marked instead of blended into the column. */
.nominate__block--flag{
  padding:clamp(1rem,2.5vw,1.35rem);
  background:var(--paper-2);
  border-left:2px solid var(--gold);
}
.nominate__block--flag h2{ padding-top:0; border-top:0; color:var(--on-paper); }

.nominate__email{ font-weight:600; overflow-wrap:anywhere; }

.nominate__panel{
  background:#fff;
  border:1px solid var(--paper-line);
  border-top:2px solid var(--gold);
  padding:clamp(1.5rem,3.5vw,2.5rem);
}
.nominate__panel h2{ font-size:var(--step-2); color:var(--on-paper); margin-bottom:.6rem; }
.nominate__intro{ font-size:.95rem; line-height:1.62; color:var(--on-paper-mid); margin-bottom:1.75rem; }
.nominate__panel .note{ margin-bottom:1.5rem; }

.nominate__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; }

.nominate__submit{ margin-top:1.6rem; display:grid; gap:1rem; }
.nominate__legal{ font-size:var(--step--1); line-height:1.6; color:var(--on-paper-dim); max-width:52ch; }

/* --- Registration handoffs ---------------------------------------------- */

.handoff{
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}

/* The first thing read on the page is the limit of what the page can do. */
.handoff__notice{
  font-family:var(--mono);
  font-size:var(--step--1);
  line-height:1.65;
  color:var(--on-paper);
  padding-left:clamp(.9rem,2vw,1.15rem);
  border-left:2px solid var(--gold);
}

.handoff__body{ display:grid; gap:1.1rem; max-width:70ch; }

/* 70ch is the right measure for prose and the wrong one for a form. The registration pathways
   put two fields side by side in .form__pair, and 70ch leaves each column near 295px — while the
   longest country name plus the select's 2.5rem arrow gutter needs roughly 340px, so the option
   would clip. The column is widened for the form only; everything else keeps a reading measure,
   which is why the cap is restored per child rather than removed. */
.handoff__body--form{ max-width:52rem; }
.handoff__body--form > :not(form){ max-width:70ch; }

.handoff__intro{ font-size:var(--step-1); line-height:1.55; color:var(--on-paper-mid); }
.handoff__body h2{ margin-top:clamp(.75rem,2vw,1.5rem); font-size:var(--step-2); color:var(--on-paper); }
.handoff__never{ font-size:.95rem; line-height:1.65; color:var(--on-paper-mid); }
.handoff__actions{ margin-top:clamp(.75rem,2vw,1.25rem); display:flex; flex-wrap:wrap; gap:1rem; }

/* --- Responsive --------------------------------------------------------- */

/* Breakpoints match site.css exactly (1080 / 860 / 560). Introducing a fourth
   would put interior pages out of step with the header and footer they sit in. */

@media (max-width: 1080px){
  /* Six across becomes three; the rail closes into a full grid so it still reads
     as one sequence rather than two loose rows. */
  .orient{ grid-template-columns:repeat(3,minmax(0,1fr)); border-left:1px solid var(--ink-line); }
  .orient li{ border-bottom:1px solid var(--ink-line); }
  .orient li:first-child{ padding-left:clamp(.9rem,2vw,1.25rem); }
  .orient li:last-child{ border-right:1px solid var(--ink-line); }

  .handoff{ grid-template-columns:minmax(0,1fr); }

  .protocol{
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-bottom:0;
  }
  .protocol__step{
    padding-left:clamp(1rem,2vw,1.5rem);
    border-bottom:1px solid var(--ink-line);
  }
  .protocol__step:nth-child(2n){ border-right:0; }

  .phero__split{ grid-template-columns: minmax(0,1fr); align-items:start; }
  .cards, .cards--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .team{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat{ border-bottom:1px solid var(--paper-line); }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-child(2n+1){ padding-left:0; }
  .band--ink .stat, .band--ink-2 .stat{ border-bottom-color: var(--ink-line); }

  /* The contents rail stops being a rail: sticky positioning in a single column
     would pin it over the text it indexes. */
  .legal{ grid-template-columns: minmax(0,1fr); }
  .toc{ position:static; }
  .toc ul{ grid-template-columns: repeat(2, minmax(0,1fr)); display:grid; }

  .contact{ grid-template-columns: minmax(0,1fr); }
  .panel{ grid-template-columns: minmax(0,1fr); }

  /* The gauge stages pair off rather than shrinking to five slivers. The nth-child
     rules move the dividing lines to match the new column count. */
  .hzn__rail{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hzn__stage{ border-bottom:1px solid var(--ink-line); padding-bottom: clamp(1.25rem,2.5vw,1.75rem); }
  .hzn__stage:nth-child(2n){ border-right:0; }
  .band--paper .hzn__stage{ border-bottom-color: var(--paper-line); }

  /* Five divisions across is unreadable here. Once they wrap, the spine and its
     stubs no longer line up with anything, so both are dropped and the tier
     becomes a plain grid. */
  .org__branch{ grid-template-columns: repeat(2, minmax(0,1fr)); padding-top:0; }
  .org__branch::before{ display:none; }
  .org__branch > *::before{ display:none; }

  /* The council moves under the apex instead of beside it, and its dashed
     connector goes with it — the line was horizontal by assumption. */
  .org__tier--lead{ grid-template-columns: minmax(0,1fr); justify-items:center; gap:1rem; }
  .org__aside{ padding-left:0; }
  .org__aside::before{ display:none; }
  .org__node--apex, .org__node--lead, .org__aside{ max-width:26rem; width:100%; }
}

@media (max-width: 860px){
  /* Three narrow columns stop holding a paragraph, so the pathways stack and the
     dividing rule turns horizontal. */
  .pathways{ grid-template-columns:minmax(0,1fr); }
  .pathway{
    padding-left:0;
    padding-right:0;
    border-right:0;
    border-bottom:1px solid var(--paper-line);
  }
  .pathway:last-child{ border-bottom:0; }
  .pathway__ref{ margin-bottom:1rem; }
  .pathway__go{ padding-top:1.1rem; }

  .orient{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .nominate{ grid-template-columns:minmax(0,1fr); }

  .home-hero{
    min-height:0;
    align-items:start;
    padding-block:clamp(3rem,8vw,4.5rem);
  }
  .home-hero__grid{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(2rem,5vw,3rem);
  }
  .home-hero h1{
    max-width:12ch;
    font-size:clamp(3.5rem,10vw,5rem);
  }
  .home-hero__proposition{ max-width:36rem; }
  .home-section__head--split,
  .home-standard__grid,
  .institutional-case,
  .horizon-intelligence,
  .home-nomination__grid{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .home-section__head--split{ gap:1.5rem; }
  .home-standard__grid,
  .home-nomination__grid{ gap:2rem; }
  .institutional-case,
  .horizon-intelligence{ gap:3rem; }
  .evidence-system{
    padding-left:0;
    padding-top:2rem;
    border-left:0;
    border-top:1px solid var(--paper-line);
  }
  .profile-ledger{ grid-template-columns:minmax(0,1fr); }
  .profile-record{
    padding-left:0;
    padding-right:0;
    border-right:0;
    border-bottom:1px solid var(--ink-line);
  }
  .profile-record:last-child{ border-bottom:0; }
  .profile-record__meta{ min-height:0; }

  .cards, .cards--2, .cards--4{ grid-template-columns: minmax(0,1fr); }
  .post{ grid-template-columns: minmax(0,1fr); gap:.6rem; }
  .post__tag{ justify-self:start; }
  .defs{ grid-template-columns: minmax(0,1fr); }
  .defs dt{ padding-bottom:0; border-top:1px solid var(--paper-line); }
  .defs dd{ border-top:0; padding-top:.35rem; }
  .tl__item{ grid-template-columns: minmax(0,1fr); gap:.5rem; }

  .about-split,
  .governance-grid,
  .about-context{ grid-template-columns:minmax(0,1fr); }
  .about-principles{ grid-template-columns:minmax(0,1fr); }
  .about-principle,
  .about-principle:first-child{
    padding-inline:0;
    border-right:0;
    border-bottom:1px solid var(--paper-line);
  }
  .about-principle:last-child{ border-bottom:0; }
  .governance-standard{
    padding:1.75rem 0 0;
    border-left:0;
    border-top:2px solid var(--gold);
  }
}

@media (max-width: 560px){
  .orient{ grid-template-columns:minmax(0,1fr); }
  .nominate__row{ grid-template-columns:minmax(0,1fr); }
  .handoff__actions{ flex-direction:column; align-items:stretch; }
  .handoff__actions .btn{ width:100%; justify-content:center; }

  .home-hero{
    padding-block:1.5rem 1.75rem;
  }
  .home-hero .horizon-media{
    object-position:50% 64%;
    opacity:.58;
  }
  .home-hero::after{
    background:linear-gradient(180deg, rgb(8 13 23 / .72), rgb(8 13 23 / .42) 52%, rgb(8 13 23 / .7));
  }
  .home-hero__grid{ gap:1.4rem; }
  .home-hero .eyebrow{ margin-bottom:.85rem; }
  .home-hero h1{
    max-width:11.5ch;
    font-size:clamp(2.65rem,13.2vw,3.25rem);
    line-height:.92;
  }
  .home-hero__proposition{
    padding-left:1rem;
    border-left-width:1px;
  }
  .home-hero__lead{
    margin-bottom:.8rem;
    font-size:1.45rem;
  }
  .home-hero__proposition > p:not(.home-hero__lead){ font-size:1rem; }
  .actions{
    margin-top:1.15rem;
    gap:.45rem;
    align-items:stretch;
    flex-direction:column;
  }
  .actions .btn{ width:100%; justify-content:center; }
  .actions .text-link{
    min-height:var(--control-min);
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:normal;
  }

  .home-section,
  .home-nomination{ padding-block:3.5rem; }
  .home-standard{ padding-block:3rem; }
  .home-section__head{ margin-bottom:2.25rem; }

  .protocol{
    grid-template-columns:minmax(0,1fr);
    border-top:0;
    border-left:1px solid var(--ink-line);
  }
  .protocol__step,
  .protocol__step:first-child{
    display:grid;
    grid-template-columns:2.5rem minmax(0,1fr);
    gap:.8rem;
    padding:1.25rem 0 1.25rem 1rem;
    border-right:0;
  }
  .protocol__number{
    margin:0;
    font-size:var(--step-1);
  }

  .evidence-system dl div{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
  .profile-record{ padding-block:1.5rem; }
  .profile-record__meta{ margin-bottom:1.5rem; }
  .home-nomination__action .btn{ width:100%; justify-content:center; }

  .team{ grid-template-columns: minmax(0,1fr); }
  .member__sigil{ aspect-ratio:16/9; }
  .contact__row{ grid-template-columns: minmax(0,1fr); }
  .contact__submit{ align-items:stretch; flex-direction:column; }
  .contact__submit .btn{ width:100%; justify-content:center; }
  .step{ grid-template-columns: minmax(0,1fr); }
  .step__no{ width:2.5rem; height:2.5rem; }
  .toc ul{ grid-template-columns: minmax(0,1fr); }
  .stats{ grid-template-columns: minmax(0,1fr); }
  .stat{ border-right:0; padding-left:0; }

  /* One stage per row. The rail keeps its rules top and bottom so it still reads
     as a single sequence rather than five loose items. */
  .hzn__rail{ grid-template-columns: minmax(0,1fr); }
  .hzn__stage{ border-right:0; }
  .hzn__note{ max-width:28ch; }

  .org__branch{ grid-template-columns: minmax(0,1fr); }

  .about-lifecycle{ grid-template-columns:minmax(0,1fr); }
  .governance-standard dl div{ grid-template-columns:minmax(0,1fr); gap:.35rem; }
}

@media print{
  .phero{ background:#fff; color:#000; }
  .phero__grid, .panel, .contact__form, .nominate__panel{ display:none; }
  .prose{ color:#000; }

  /* A policy is the likeliest page here to be printed. The contents rail is screen navigation:
     its links cannot be followed on paper and it has no page numbers to offer, so the document
     takes the full width instead of sitting in a squeezed second column. */
  .legal{ display:block; }
  .toc{ display:none; }
  .prose h2{ break-after:avoid; }

  /* The gauge and the chart are content, not decoration, so they print — but
     without the dark fills, which would empty a toner cartridge. */
  .hzn__icon, .org__node{ background:transparent; border-color:#999; color:#000; }
  .hzn__name, .hzn__note, .org__role, .org__unit{ color:#000; }
  .hzn__rail, .hzn__stage{ border-color:#999; }
}