/* ==========================================================================
   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:none;
  font-size:clamp(3rem,5vw,5rem);
  line-height:.93;
  letter-spacing:-.025em;
}

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

/* --- Hero headline ------------------------------------------------------- */

/* One heading, two sentences: the first says what the work is, the second is the line the brand
   rests on. Everything that turns them into a sequence is scoped to .is-live, which only the script
   adds — so the static reading, whether that is a reader without JS or one who has asked for
   reduced motion, is a plain two-sentence headline with both lines in order. */

/* The two alternating statements deliberately share one typographic contract. Their different
   lengths can change the number of lines, but never the face, size, leading, tracking or measure. */
.headline__line{
  display:block;
  max-width:11.3ch;
  font:inherit;
  letter-spacing:inherit;
}

/* Only when the two sentences read as two sentences. Once they share a grid cell this margin would
   be space inside a single cell, pushing the brand line down by a quarter of its own size. */
.headline:not(.is-live) .headline__line--brand{ margin-top:.28em; }

/* Live, both lines occupy the same cell, so the heading is always as tall as the taller of them and
   nothing below the hero moves when one hands over to the other. Anchored to the top, because the
   eyebrow directly above is the edge the reader is using. */
.headline.is-live{ display:grid; }
.headline.is-live .headline__line{ grid-area:1 / 1; align-self:start; }

/* The line that is not being read is left in the accessibility tree and merely made unreachable:
   no `hidden`, no `visibility`, no `aria-hidden`. A heading carries no control that would let
   anyone reveal the other sentence, so taking it out of the tree would remove it for good. It does
   have to stop being selectable, though — otherwise dragging across the visible sentence also
   picks up an invisible one sitting in the same cell. */
.headline.is-live .headline__line{
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
.headline.is-live .headline__line.is-in{
  pointer-events:auto;
  -webkit-user-select:auto;
  user-select:auto;
}

/* The setup line withdraws as one gesture while the brand line arrives as another. Two movements
   rather than a crossfade between two headlines, so the hand-over reads as an answer. */
.headline.is-live .headline__line.is-out{
  opacity:0;
  transform:translateY(-.22em);
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}

/* The payoff arrives whole — the same reasoning as .mf__b in site.css, that a statement lands as a
   unit while a sentence unspools. It also means the gradient em is never inside a clipping box, so
   there is nowhere for its italic overhang to be sheared. Its own rise is short: a four-line block
   at this size travelling its full height would be a lurch, not an arrival. */
.headline.is-live .headline__line--brand{
  opacity:0;
  transform:translateY(.16em);
}
.headline.is-live .headline__line--brand.is-in{
  opacity:1;
  transform:none;
  transition: opacity .55s linear, transform .7s var(--ease);
}

/* Each word of the setup sentence rides in behind a clipping box, but only once the script is
   running: without JS the wrappers are inert inline spans with no padding and nothing to clip, so
   the static headline keeps exactly the metrics it had before any of this existed. The box has to be
   taller and wider than the glyphs or descenders are sheared off, and the matching negative margins
   put the layout back where it was. */
.headline.is-live .headline__w{
  display:inline-block;
  vertical-align:bottom;
  overflow:hidden;
  padding:.06em .08em .22em;
  margin-inline:-.08em;
  margin-block:-.06em -.22em;
}

/* Armed here and nowhere else. The offset is the word's own height plus the box's padding
   (.06 top + .22 bottom) rather than a round 100%, or a sliver of the tallest ascender sits in the
   padding and the word looks like it is peeking instead of hidden. */
.headline.is-live .headline__w > span{
  display:inline-block;
  transform: translateY(calc(100% + .32em));
  opacity:0;
}

/* --hl-d is the word's beat, written by the script from its position in the line. */
.headline.is-live .headline__line.is-in .headline__w > span{
  transform:none;
  opacity:1;
  transition: transform .62s var(--ease) var(--hl-d, 0ms),
              opacity .45s linear var(--hl-d, 0ms);
}

/* The script reads the motion preference once, at load. Someone who switches it on part-way through
   a visit updates this media query and not that flag, so the stylesheet has to be able to stop the
   sequence by itself — and it stops it by unstacking, landing on the same two-sentence headline a
   reader without JS gets rather than leaving two sentences superimposed in one cell. */
@media (prefers-reduced-motion: reduce){
  .headline.is-live{ display:block; }
  .headline.is-live .headline__line--brand{
    margin-top:.28em;
    opacity:1;
    transform:none;
  }
  .headline.is-live .headline__line{
    pointer-events:auto;
    -webkit-user-select:auto;
    user-select:auto;
    transition:none;
  }
  .headline.is-live .headline__line.is-out{
    opacity:1;
    transform:none;
    pointer-events:auto;
    -webkit-user-select:auto;
    user-select:auto;
    transition:none;
  }
  /* Both selectors, and the longer one last: the armed rule below is outranked by the landed rule
     further up the file, so neutralising only the short form would leave a word that was still in
     flight when the preference changed to finish its travel rather than stop. */
  .headline.is-live .headline__w > span{ transform:none; opacity:1; transition:none; }
  .headline.is-live .headline__line.is-in .headline__w > span{
    transform:none;
    opacity:1;
    transition:none;
  }
}

.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;
}

/* --- Hero stages -------------------------------------------------------- */

/* The first screen states the thesis and then shows the route: the five gateways advance in the
   proposition column while the headline, the lead, the brand line and the actions stay put. The
   column keeps its gold rule, so the stages read as an extension of the argument rather than a
   widget dropped beside it. */
.stageshow{
  margin-top: clamp(1.5rem,3vw,2.15rem);
  padding-top: clamp(1.35rem,2.5vw,1.85rem);
  border-top:1px solid var(--ink-line);
}

/* Without JS the five stages simply read down the column in order. Everything that turns them
   into one-at-a-time is scoped to .is-live, which only the script adds — so a reader without JS
   gets five paragraphs rather than five overlapping ones. */
.stageshow__frame{
  display:grid;
  gap: clamp(1.4rem,3vw,2rem);
}

/* Live, every stage occupies the same cell, so the frame takes the height of the longest one and
   the actions below it never move as the stages change. */
.stageshow.is-live .stageshow__frame{ gap:0; }

.stageshow.is-live .stage{
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  transform:translateY(.55rem);
}

/* Initialising the live view must hide four panels immediately; otherwise they all fade out from
   the no-JS stack on top of one another. The script adds .is-ready on the next frame, restoring
   the intended transition for every later stage change. */
@media (prefers-reduced-motion: no-preference){
  .stageshow.is-live.is-ready .stage{
    transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
  }
}

.stageshow.is-live .stage.is-current{
  opacity:1;
  visibility:visible;
  transform:none;
}

.stage__mark{
  display:flex;
  align-items:baseline;
  gap:.65rem;
  margin-bottom:.7rem;
  font-family:var(--mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-ink);
}

.stage__no{ color:var(--gold); }

.stage__claim{
  max-width:24ch;
  margin-bottom:.6rem;
  font-family:var(--display);
  font-size:clamp(1.5rem,2vw,1.95rem);
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--on-ink);
}

.stage__note{
  max-width:44ch;
  font-size:var(--step-0);
  line-height:1.55;
  color:var(--on-ink-mid);
}

/* The track is the horizon: one hairline the width of the shell beneath both columns, five
   markers standing on it, and a gold length that reaches the stage being read. It is the only
   bold thing on this screen, and it is bold because it is the argument — evidence accumulates
   along a line, it does not arrive all at once. */
/* The markup ships the track with `hidden` and the script removes it. `.stagetrack` is a class
   selector and the `[hidden]` rule in the UA stylesheet is not, so without this line the class
   wins and a reader without JS gets a row of numerals that selects nothing. */
.stagetrack[hidden]{ display:none; }

.stagetrack{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: clamp(1rem,3vw,2.25rem);
  margin-top: clamp(2rem,4vw,3.25rem);
}

.stagetrack__steps{
  position:relative;
  flex:1 1 20rem;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
}

/* Two lines, one on top of the other: the whole horizon, then the lit part of it. Both are drawn
   with paper and gold at low alpha rather than --ink-line, because a #273148 hairline disappears
   against the photographic sunrise behind it. Same practice as the veils on .home-hero::after. */
.stagetrack__steps::before,
.stagetrack__steps::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
}

.stagetrack__steps::before{
  right:0;
  background:rgb(241 244 249 / .22);
}

/* --progress is a percentage the script writes: the centre of the current marker. It defaults to
   the first marker's own position, so the line is never empty before the script runs. */
.stagetrack__steps::after{
  width:var(--progress, 10%);
  background:var(--gold);
  transition:width .6s var(--ease);
}

.stagetrack__step{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:var(--control-min);
  padding:0 0 1.1rem;
  background:none;
  border:0;
  font-family:var(--mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.1em;
  color:var(--on-ink-dim);
  cursor:pointer;
  transition:color .3s var(--ease);
}

.stagetrack__step:hover{ color:var(--on-ink); }
.stagetrack__step[aria-selected="true"]{ color:var(--gold); }

/* Each marker stands on the line rather than beside it: a small dim node for a stage not being
   read, a gold one with a halo for the stage that is, so the position needs no legend. */
.stagetrack__step::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-2px;
  width:5px;
  height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:rgb(241 244 249 / .3);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}

.stagetrack__step[aria-selected="true"]::after{
  background:var(--gold);
  box-shadow:0 0 0 4px rgb(255 179 0 / .16);
}

.stagetrack__motion{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--control-min);
  padding:0 1.1rem;
  background:none;
  border:1px solid var(--ink-line);
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-ink-mid);
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}

.stagetrack__motion:hover{
  border-color:var(--gold);
  color:var(--on-ink);
}

/* The stages carry no information the page does not also state in full further down, so when
   motion is unwelcome they stop moving and simply stack — the reader loses nothing. */
@media (prefers-reduced-motion: reduce){
  .stageshow.is-live .stage{ transition:none; transform:none; }
  .stagetrack__steps::after,
  .stagetrack__step,
  .stagetrack__step::after,
  .stagetrack__motion{ transition:none; }
}

.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-brand{
  overflow:hidden;
  border-top:1px solid var(--paper-line);
}

.horizon-brand__header{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  align-items:flex-start;
  padding-bottom:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--paper-line);
}
.horizon-brand__header .eyebrow{ margin:0; }
.horizon-brand__context{
  max-width:35ch;
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--on-paper-mid);
}

.horizon-brand__rotator{
  position:relative;
  padding-block:clamp(1rem,2vw,1.5rem) clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--paper-line);
}
.horizon-brand__viewport{
  min-width:0;
  outline:none;
}
.horizon-brand__viewport:focus-visible{
  outline:2px solid var(--nx-purple);
  outline-offset:.65rem;
}
.horizon-brand__state{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(20rem,.7fr);
  gap:clamp(2.5rem,7vw,7rem);
  align-items:end;
  min-width:0;
  padding-block:clamp(2.5rem,6vw,5rem);
}
.horizon-brand__state + .horizon-brand__state{ border-top:1px solid var(--paper-line); }
.horizon-brand__index{
  grid-column:1 / -1;
  font-family:var(--mono);
  font-size:var(--step--1);
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--nx-purple);
}
.horizon-brand__title{
  max-width:none;
  margin:0;
  font-family:var(--display);
  font-size:clamp(4.5rem,8.4vw,8rem);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.055em;
  color:var(--on-paper);
  text-wrap:balance;
}
.horizon-brand__statement{
  max-width:33ch;
  margin-bottom:.15em;
  padding-left:clamp(1.25rem,2.5vw,2rem);
  border-left:1px solid var(--nx-purple);
  font-family:var(--display);
  font-size:clamp(1.45rem,2.1vw,2rem);
  line-height:1.2;
  color:var(--on-paper);
}

.horizon-brand__rotator.is-live .horizon-brand__viewport{ display:grid; }
.horizon-brand__rotator.is-live .horizon-brand__state{
  grid-area:1 / 1;
  border-top:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(.7rem);
  pointer-events:none;
  transition:opacity .5s linear, transform .7s var(--ease), visibility 0s linear .7s;
}
.horizon-brand__rotator.is-live .horizon-brand__state.is-current{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity .55s linear, transform .7s var(--ease), visibility 0s;
}
.horizon-brand__motion{
  display:block;
  margin-left:auto;
  padding:.45rem 0;
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  font-family:var(--mono);
  font-size:var(--step--1);
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--nx-purple);
  cursor:pointer;
}
.horizon-brand__motion:hover{ color:var(--nx-pink); }
.horizon-brand__motion:focus-visible{ outline:2px solid var(--nx-purple); outline-offset:.35rem; }

.horizon-brand__path{ padding-block:clamp(3rem,6vw,5rem); }
.horizon-brand__path-label,
.horizon-brand__position-label{
  margin-bottom:1.4rem;
  font-family:var(--mono);
  font-size:var(--step--1);
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--nx-purple);
}
.horizon-brand__steps{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--paper-line);
  border-left:1px solid var(--paper-line);
}
.horizon-brand__steps li{
  display:grid;
  align-content:space-between;
  gap:2.1rem;
  min-width:0;
  min-height:10.5rem;
  padding:1.25rem 1rem 1.35rem;
  border-right:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
.horizon-brand__steps span{
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.08em;
  color:var(--nx-purple);
}
.horizon-brand__steps strong{
  max-width:12ch;
  font-family:var(--display);
  font-size:clamp(1.1rem,1.4vw,1.35rem);
  font-weight:400;
  line-height:1.15;
  color:var(--on-paper);
}

.horizon-brand__positioning{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--paper-line);
}
.horizon-brand__positioning article{
  min-width:0;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,4rem) 0 0;
}
.horizon-brand__positioning article + article{
  padding-right:0;
  padding-left:clamp(1.5rem,4vw,4rem);
  border-left:1px solid var(--paper-line);
}
.horizon-brand__positioning h3{
  max-width:20ch;
  margin-bottom:1rem;
  font-size:var(--step-2);
  line-height:1.08;
  color:var(--on-paper);
}
.horizon-brand__positioning article > p:last-child{
  max-width:52ch;
  line-height:1.65;
  color:var(--on-paper-mid);
}

@media (prefers-reduced-motion: reduce){
  .horizon-brand__rotator.is-live .horizon-brand__viewport{ display:block; }
  .horizon-brand__rotator.is-live .horizon-brand__state{
    grid-area:auto;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    transition:none;
  }
  .horizon-brand__rotator.is-live .horizon-brand__state + .horizon-brand__state{
    border-top:1px solid var(--paper-line);
  }
  .horizon-brand__motion{ display:none; }
}

.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); }

/* --- Initiatives ------------------------------------------------------- */

.initiatives-hero__inner{ max-width:70rem; }
.initiatives-hero h1{ max-width:16ch; }
.initiatives-hero .phero__lede{ max-width:60ch; }

.initiative-intro{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(3rem,8vw,7rem);
  align-items:start;
}
.initiative-intro h2{ max-width:10ch; }
.initiative-intro__tagline{
  max-width:26ch;
  margin-top:1.25rem;
  font-family:var(--display);
  font-size:var(--step-2);
  line-height:1.2;
  color:var(--nx-purple);
}
.initiative-intro__copy{ max-width:64ch; }
.initiative-intro__copy p{
  color:var(--on-paper-mid);
  font-size:var(--step-0);
  line-height:1.72;
}
.initiative-intro__copy p + p{ margin-top:1rem; }
.initiative-intro__link{
  display:inline-flex;
  margin-top:1.5rem;
  color:var(--nx-purple);
}

.footprint-promise{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:clamp(3rem,7vw,5.5rem) 0 0;
  padding:0;
  border-block:1px solid var(--paper-line);
}
.footprint-promise li{
  min-height:8.75rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1.25rem;
  padding:1.4rem clamp(1rem,2.5vw,2rem);
  border-right:1px solid var(--paper-line);
  font-family:var(--display);
  font-size:var(--step-1);
  line-height:1.2;
  color:var(--on-paper);
}
.footprint-promise li:first-child{ padding-left:0; }
.footprint-promise li:last-child{ border-right:0; padding-right:0; }
.footprint-promise span{
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.12em;
  color:var(--nx-purple);
}

.footprint-framework{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  margin:clamp(2.5rem,6vw,4.5rem) 0 0;
  padding:0;
  border-block:1px solid var(--ink-line);
}
.footprint-framework li{
  min-width:0;
  padding:1.4rem clamp(.75rem,1.4vw,1.2rem) 1.6rem;
  border-right:1px solid var(--ink-line);
}
.footprint-framework li:first-child{ padding-left:0; }
.footprint-framework li:last-child{ border-right:0; padding-right:0; }
.footprint-framework__number{
  display:block;
  margin-bottom:2.4rem;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--gold);
}
.footprint-framework h3{
  margin:0 0 .85rem;
  font-size:var(--step-1);
  color:var(--on-ink);
}
.footprint-framework p{
  font-size:.78rem;
  line-height:1.55;
  color:var(--on-ink-mid);
}
.footprint-framework .footprint-framework__question{
  min-height:3.3em;
  margin-bottom:.75rem;
  font-family:var(--mono);
  font-size:.66rem;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--on-ink-mid);
}

.footprint-system{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:clamp(2.5rem,6vw,4.5rem);
  border:1px solid var(--paper-line);
  background:var(--paper-line);
}
.footprint-capability{
  min-height:14rem;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:var(--paper);
}
.footprint-capability__ref{
  display:block;
  margin-bottom:clamp(2.5rem,5vw,4rem);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--nx-purple);
}
.footprint-capability h3{ margin-bottom:.8rem; font-size:var(--step-1); }
.footprint-capability p{ max-width:42ch; color:var(--on-paper-mid); line-height:1.62; }
.footprint-capability--horizon{
  grid-column:1 / -1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,.3fr) minmax(0,1.7fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}
.footprint-capability--horizon .footprint-capability__ref{ margin:0; }
.footprint-legacy{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2rem;
  align-items:end;
  margin:clamp(3rem,7vw,5.5rem) 0 0;
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--paper-line);
}
.footprint-legacy p{
  max-width:36ch;
  font-family:var(--display);
  font-size:var(--step-2);
  line-height:1.15;
  color:var(--on-paper);
}
.footprint-legacy footer{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--on-paper-mid);
}

.scaleup-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(3rem,8vw,7rem);
  align-items:start;
}
.scaleup-intro h2{ max-width:16ch; color:var(--on-ink); }
.scaleup-intro > p:not(.eyebrow){
  max-width:52ch;
  color:var(--on-ink-mid);
  line-height:1.68;
}
.scaleup-intro .scaleup-intro__line{
  max-width:22ch;
  margin:1.35rem 0;
  font-family:var(--display);
  font-size:var(--step-2);
  line-height:1.14;
  color:var(--gold);
}
.scaleup-questions-wrap{ border-top:1px solid var(--ink-line); }
.scaleup-kicker{
  padding:1rem 0;
  border-bottom:1px solid var(--ink-line);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-ink-mid);
}
.scaleup-questions{ list-style:none; margin:0; padding:0; }
.scaleup-questions li{
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  gap:1rem;
  padding:1.2rem 0;
  border-bottom:1px solid var(--ink-line);
  font-family:var(--display);
  font-size:var(--step-1);
  line-height:1.22;
  color:var(--on-ink);
}
.scaleup-questions span{
  padding-top:.15rem;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.1em;
  color:var(--gold);
}
.scaleup-format-wrap{ margin-top:clamp(4rem,9vw,7rem); }
.scaleup-format-wrap .horizon{ margin-bottom:clamp(3rem,7vw,5rem); }
.scaleup-format{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:clamp(2.5rem,6vw,4rem) 0 0;
  padding:1px;
  background:var(--ink-line);
}
.scaleup-format li{
  min-height:13.5rem;
  padding:clamp(1.4rem,3vw,2rem);
  background:var(--ink-2);
}
.scaleup-format span{
  display:block;
  margin-bottom:2.6rem;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.12em;
  color:var(--gold);
}
.scaleup-format h3{ margin-bottom:.7rem; font-size:var(--step-1); color:var(--on-ink); }
.scaleup-format p{ max-width:36ch; color:var(--on-ink-mid); line-height:1.55; }

.initiatives-journal{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(3rem,8vw,7rem);
  align-items:end;
}
.initiatives-journal h2{ max-width:14ch; }
.initiatives-journal__status{
  padding:1.5rem 0;
  border-block:1px solid var(--paper-line);
}
.initiatives-journal__status span{
  display:block;
  margin-bottom:1.25rem;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--nx-purple);
}
.initiatives-journal__status p{ max-width:46ch; color:var(--on-paper-mid); line-height:1.65; }

.initiatives-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(3rem,8vw,7rem);
  align-items:end;
}
.initiatives-cta h2{ max-width:14ch; color:var(--on-ink); }
.initiatives-cta > div:first-child > p:not(.eyebrow){
  max-width:58ch;
  margin-top:1.25rem;
  color:var(--on-ink-mid);
}
.initiatives-cta__actions{
  min-width:15rem;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.75rem;
}
.initiatives-cta__actions .btn{ justify-content:center; }
.initiatives-cta__actions .text-link{ align-self:center; color:var(--on-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);
}

/* The notice is the first grid item when it is shown. The current preview hides that notice
   inline, so explicitly hold the form body in the wide second column instead of letting grid
   auto-placement collapse it into the narrow notice rail. */
.handoff__body{ display:grid; grid-column:2; 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); }
  .handoff__body{ grid-column:1; }

  .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; }

  .footprint-framework{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footprint-framework li,
  .footprint-framework li:first-child,
  .footprint-framework li:last-child{
    padding:1.5rem;
    border-right:1px solid var(--ink-line);
    border-bottom:1px solid var(--ink-line);
  }
  .footprint-framework li:nth-child(2n){ border-right:0; }
  .footprint-framework li:nth-last-child(-n+2){ border-bottom:0; }
  .footprint-framework__number{ margin-bottom:1.5rem; }
  .footprint-framework .footprint-framework__question{ min-height:0; }
  .footprint-system{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footprint-capability--horizon{ grid-column:1 / -1; }
  .scaleup-format{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .horizon-brand__steps{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .horizon-brand__steps li{ min-height:8.75rem; }
  .horizon-brand__steps li:last-child{ grid-column:span 2; }

  .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); }

  .initiative-intro,
  .scaleup-grid,
  .initiatives-journal,
  .initiatives-cta{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .initiative-intro{ gap:2rem; }
  .footprint-legacy{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .footprint-legacy footer{ order:-1; }
  .initiatives-cta__actions{ width:min(100%,24rem); min-width:0; }

  .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);
  }
  .headline__line{ max-width:12ch; }
  .home-hero__proposition{ max-width:36rem; }
  .home-section__head--split,
  .home-standard__grid,
  .institutional-case,
  .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{ gap:3rem; }

  .horizon-brand__state{
    grid-template-columns:minmax(0,1fr);
    gap:1.5rem;
  }
  .horizon-brand__statement{ max-width:38ch; }
  .horizon-brand__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .horizon-brand__steps li:last-child{ grid-column:span 2; }
  .horizon-brand__positioning{ grid-template-columns:minmax(0,1fr); }
  .horizon-brand__positioning article,
  .horizon-brand__positioning article + article{
    padding:2.25rem 0;
    border-left:0;
    border-bottom:1px solid var(--paper-line);
  }
  .horizon-brand__positioning article:last-child{ padding-bottom:0; border-bottom:0; }
  .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; }

  .initiatives-hero h1{ max-width:11ch; }
  .footprint-promise{ grid-template-columns:minmax(0,1fr); }
  .footprint-promise li,
  .footprint-promise li:first-child,
  .footprint-promise li:last-child{
    min-height:0;
    padding:1.25rem 0;
    border-right:0;
    border-bottom:1px solid var(--paper-line);
  }
  .footprint-promise li:last-child{ border-bottom:0; }
  .footprint-framework{ grid-template-columns:minmax(0,1fr); }
  .footprint-framework li,
  .footprint-framework li:first-child,
  .footprint-framework li:last-child,
  .footprint-framework li:nth-child(2n),
  .footprint-framework li:nth-last-child(-n+2){
    padding:1.35rem 0;
    border-right:0;
    border-bottom:1px solid var(--ink-line);
  }
  .footprint-framework li:last-child{ border-bottom:0; }
  .footprint-system{ grid-template-columns:minmax(0,1fr); }
  .footprint-capability{ min-height:0; }
  .footprint-capability--horizon{
    grid-column:auto;
    grid-template-columns:minmax(0,1fr);
  }
  .footprint-capability--horizon .footprint-capability__ref{ margin-bottom:2.5rem; }
  .scaleup-format{ grid-template-columns:minmax(0,1fr); }
  .scaleup-format li{ min-height:0; }
  .initiatives-cta__actions{ width:100%; }

  .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;
  }
  .headline__line{ max-width:11.5ch; }
  .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; }

  /* The hero is tight here, so the stages give back the room the wider screens can spare. */
  .stageshow{
    margin-top:1.1rem;
    padding-top:1.1rem;
  }
  /* At this width the lead falls to 1.45rem while the claim's clamp floor holds at 1.5rem, which
     would put a stage above the proposition it belongs to. The claim steps down to keep the order
     of the argument visible. */
  .stage__claim{ font-size:1.25rem; }
  .stagetrack{
    gap:.9rem;
    margin-top:1.6rem;
  }
  .stagetrack__step{ padding-bottom:.9rem; }

  .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; }

  .horizon-brand__header{ display:grid; gap:1.25rem; }
  .horizon-brand__context{ max-width:30ch; }
  .horizon-brand__rotator{ padding-bottom:2.5rem; }
  .horizon-brand__state{ padding-block:2.25rem; }
  .horizon-brand__title{
    font-size:clamp(3.2rem,15vw,4.35rem);
    line-height:.88;
  }
  .horizon-brand__statement{
    padding-left:1rem;
    font-size:1.35rem;
  }
  .horizon-brand__steps{ grid-template-columns:minmax(0,1fr); }
  .horizon-brand__steps li,
  .horizon-brand__steps li:last-child{
    grid-column:auto;
    grid-template-columns:2.5rem minmax(0,1fr);
    align-content:center;
    align-items:baseline;
    gap:.75rem;
    min-height:0;
    padding:1.15rem 1rem;
  }
  .horizon-brand__steps strong{ max-width:none; }

  .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; }

  /* On screen the headline resolves from one sentence into the other; on paper there is no sequence
     to play, so it prints as the two sentences it has always been. The .is-out rule is repeated at
     matching specificity because the screen rule would otherwise keep the first sentence off the
     page, and the first sentence is content. */
  .headline.is-live{ display:block; }
  .headline.is-live .headline__line--brand{
    margin-top:.28em;
    opacity:1;
    transform:none;
  }
  .headline.is-live .headline__line.is-out{ opacity:1; transform:none; }
  .headline.is-live .headline__w > span{ transform:none; opacity:1; }

  .horizon-brand__rotator.is-live .horizon-brand__viewport{ display:block; }
  .horizon-brand__rotator.is-live .horizon-brand__state{
    grid-area:auto;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }
  .horizon-brand__rotator.is-live .horizon-brand__state + .horizon-brand__state{
    border-top:1px solid #999;
  }
  .horizon-brand__motion{ display:none; }

  /* On screen the hero shows one stage at a time; on paper there is nothing to advance, so all
     five print in order and the track — which is navigation — does not print at all. */
  .stagetrack{ display:none; }
  .stageshow.is-live .stageshow__frame{ gap:1rem; }
  .stageshow.is-live .stage{
    grid-area:auto;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  /* 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; }
}