/* ==========================================================================
   Nebula Group — daylight edition
   The primary site is a dark survey plate. This one is the same instrument
   read in daylight: warm paper ground, ink text, amber annotation, and
   photographs where the dark site draws.

   TOKEN NAMES ARE INHERITED from the primary stylesheet so the shared
   components (masthead, consent, roster, survey) keep working unchanged:
   --ink is the GROUND and --bone is the TEXT here, whatever the names say.
   ========================================================================== */

:root {
  /* Ground — warm paper, hue-biased toward the amber. */
  --ink:          #F7F4EE;
  --ink-raised:   #FFFFFF;
  --ink-panel:    #EFEAE2;
  --ink-line:     rgba(21, 25, 34, 0.11);
  --ink-line-lit: rgba(176, 122, 63, 0.32);

  /* Amber — the annotation ink, darkened so it holds 4.5:1 on paper. */
  --gold:         #A8702F;
  --gold-bright:  #8F5E26;
  --gold-dim:     rgba(168, 112, 47, 0.6);
  --gold-wash:    rgba(210, 171, 130, 0.14);
  --gold-soft:    #D2AB82;

  /* Ion — cold ink, reserved for data: codes, counts, labels. */
  --ion:          #3F6F93;
  --ion-dim:      rgba(63, 111, 147, 0.6);
  --ion-line:     rgba(63, 111, 147, 0.2);

  /* Text */
  --bone:         #151922;
  --slate:        #4F5763;
  --slate-dim:    #7D8490;

  /* Type */
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter:   clamp(1.25rem, 5vw, 4rem);
  --measure:  62ch;
  --rule:     1px solid var(--ink-line);
  --ease:     cubic-bezier(.22, .61, .36, 1);

  --margin-col: 10.5rem;
  --shell:      78rem;
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--gold); color: var(--ink); }

/* ---------------------------------------------------------------- type -- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
  color: var(--bone);
}

h1 { font-size: clamp(2.6rem, 6.6vw, 5rem); font-weight: 200; line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4.1vw, 3.3rem); font-weight: 200; letter-spacing: -0.02em; }

/* The signature device: one word per heading set in amber italic. It marks the
   claim the sentence actually turns on, so it has to be chosen, not sprinkled. */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.008em; }

p { margin: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.55vw, 1.3125rem);
  line-height: 1.62;
  color: var(--bone);
  max-width: var(--measure);
}

div.prose { display: flex; flex-direction: column; gap: 1.15em; }
.prose { max-width: var(--measure); color: var(--slate); }
p.prose { display: block; }
.prose strong { color: var(--bone); font-weight: 600; }
.prose em { font-family: var(--display); font-style: italic; color: var(--bone); font-size: 1.05em; }

/* Marginal annotation — mono, uppercase, tracked. Used for real data:
   section indices, sector codes, registration numbers, jurisdictions. */
.label {
  font-family: var(--data);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.label--mute { color: var(--slate-dim); }

/* Section eyebrow: a short rule then the label, like the caption line ruled
   under a plate in a survey volume. */
.eyebrow {
  font-family: var(--data);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  flex: none;
}
@media (min-width: 60.01rem) {
  /* in the margin column the rule would collide with the text, so stack it */
  .grid-margin > .eyebrow { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .grid-margin > .eyebrow::before { width: 34px; }
}

/* ------------------------------------------------------------- layout --- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Full-bleed hairline dividing one plate from the next */
.plate { border-top: var(--rule); }
.plate__inner { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* The two-column prospectus grid */
.grid-margin {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 60rem) {
  .grid-margin { grid-template-columns: 1fr; gap: 1.25rem; }
}

.stack   { display: flex; flex-direction: column; gap: 1.5rem; }
.stack-l { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.25rem); }

/* --------------------------------------------------------- navigation --- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: var(--rule);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead {
    background: rgba(247, 244, 238, 0.84);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
  }
}

.masthead__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--bone); }
.brand:hover { color: var(--bone); }
.brand__mark { width: 26px; height: 26px; flex: none; }
/* The mark takes its colours from the tokens so print (ink on white) and any
   future light surface get it for free. */
.brand__mark ellipse { stroke: var(--bone); }
.brand__mark circle { fill: var(--gold); }
.brand__name {
  font-family: var(--data);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav a {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav a:hover { color: var(--bone); border-bottom-color: var(--gold-dim); }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: var(--rule);
  color: var(--bone);
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--gold-dim); color: var(--gold); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The toggle only exists where JS can operate it. Without JS the links simply
   wrap under the brand — usable, rather than an overlay nothing can close. */
.nav-toggle { display: none; }

@media (max-width: 56rem) {
  .masthead__inner { flex-wrap: wrap; row-gap: 0.35rem; }
  .nav { width: 100%; flex-wrap: wrap; gap: 0.5rem 1.15rem; padding-bottom: 0.35rem; }

  .has-js .nav-toggle { display: block; }
  .has-js .masthead__inner { flex-wrap: nowrap; }
  .has-js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-raised);
    border-bottom: var(--rule);
    padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }
  .has-js .nav[data-open="true"] { display: flex; }
  .has-js .nav a { padding-block: 0.8rem; border-bottom: var(--rule); }
}

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

.hero { position: relative; overflow: hidden; border-bottom: var(--rule); }

/* The video sits under a paper veil that thickens toward the copy, so ink
   text reads on cloud without a box around it. Poster shows until the video
   can play, and stays when motion is reduced (site.js never starts it). */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #DCE4EC;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(247, 244, 238, 0.86) 0%, rgba(247, 244, 238, 0.62) 42%, rgba(247, 244, 238, 0.12) 70%, transparent 100%),
    linear-gradient(to bottom, transparent 70%, var(--ink) 100%);
}
@media (max-width: 48rem) {
  .hero::after { background: linear-gradient(to bottom, rgba(247, 244, 238, 0.82), rgba(247, 244, 238, 0.7) 60%, var(--ink) 100%); }
}
.hero__inner {
  position: relative;
  z-index: 3;
  min-height: min(78vh, 46rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(4.5rem, 13vw, 9.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
}

.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 1.75rem; }


/* Staged entrance — one orchestrated moment on load, nothing after */
.rise { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.18s; }
.rise-3 { animation-delay: 0.32s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ buttons --- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--data);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn--solid { background: var(--gold); color: var(--ink); }
.btn--solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.btn--quiet { border-color: var(--ink-line-lit); color: var(--bone); }
.btn--quiet:hover { background: transparent; border-color: var(--gold); color: var(--gold); }

.btn__arrow { transition: transform 0.22s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* -------------------------------------------------------------- panel --- */

.panel {
  border: var(--rule);
  background: var(--ink-raised);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* --------------------------------------------------------------- list --- */

/* --------------------------------------------------------------- meta --- */

.meta { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ink-line); border: var(--rule); }
@media (min-width: 40rem) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Beside a picture the ledger has half the width, so it stays at two columns:
   four cells in ~30rem wrapped the address one word per line and clipped the
   email address. */
.reach .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .reach .meta { grid-template-columns: 1fr; } }
/* Address and email run the full width of the ledger so neither can ever
   wrap mid-token; only the two short values share a row. */
.meta__cell--wide { grid-column: 1 / -1; }
.meta__val a { white-space: nowrap; }
.meta__cell { background: var(--ink); padding: 1.35rem clamp(1.1rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.meta__val { font-family: var(--display); font-size: 1.15rem; color: var(--bone); line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- footer --- */

.footer { border-top: var(--rule); background: var(--ink); }
.footer__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem;
  display: grid;
  /* Explicit tracks. The earlier auto-fit form combined an intrinsic first
     track with repeat(auto-fit), which the grid spec forbids, so browsers
     dropped the whole declaration and the footer silently stacked. */
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 40rem) { .footer__inner { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer__col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a, .footer__col > p:not(.label) { font-size: 0.875rem; color: var(--slate); }
.footer__col a:hover { color: var(--gold); }
.footer__legal {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 2.5rem;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}
.footer__legal p {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--slate-dim);
}

.disclaimer {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter) 3rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--slate-dim);
}
.disclaimer > span { display: block; max-width: 62rem; }

/* ------------------------------------------------------- page opener ---- */

.opener { border-bottom: var(--rule); position: relative; overflow: hidden; }
.opener__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
@media (min-width: 60rem) {
  .opener--art .opener__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.opener__text { min-width: 0; }
.opener__art .pic { aspect-ratio: 3 / 2; }
.opener__art .pic img { width: 100%; height: 100%; object-fit: cover; }
.opener__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}
.opener h1 { max-width: 15ch; }
.opener .lede { margin-top: 1.5rem; }

/* --------------------------------------------------------- utilities ---- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-family: var(--data);
  font-size: 0.75rem;
  z-index: 100;
}
.skip:focus { left: 0; }


/* ------------------------------------------------------------- consent -- */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--ink-raised);
  border-top: 1px solid var(--gold-dim);
  box-shadow: 0 -24px 60px rgba(21, 25, 34, 0.14);
  transform: translateY(102%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.consent[data-open="true"] { transform: none; }
.consent[hidden] { display: none; }

.consent__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 1.75rem) var(--gutter);
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 62rem) {
  .consent__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2.5rem;
  }
  .consent__panel { grid-column: 1 / -1; }
}

.consent__copy { display: flex; flex-direction: column; gap: 0.5rem; }
.consent__copy > p:not(.label) { font-size: 0.875rem; line-height: 1.6; color: var(--slate); max-width: 60ch; }

/* Accept and reject carry identical visual weight — required, and correct. */
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent__actions .btn { padding: 0.75rem 1.1rem; flex: 1 1 auto; justify-content: center; }
@media (min-width: 62rem) {
  .consent__actions { flex-wrap: nowrap; }
  .consent__actions .btn { flex: 0 0 auto; }
}

.consent__panel {
  border-top: var(--rule);
  padding-top: 1.15rem;
  display: grid;
  gap: 0.85rem;
}
.consent__panel[hidden] { display: none; }

.consent__opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem 0.9rem;
  align-items: start;
  border: var(--rule);
  padding: 0.9rem 1rem;
  background: var(--ink);
}
.consent__opt input { margin: 0.2rem 0 0; accent-color: var(--gold); width: 1rem; height: 1rem; }
.consent__opt input:disabled { opacity: 0.55; }
.consent__opt label {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  cursor: pointer;
}
.consent__opt input:disabled + label { cursor: default; color: var(--slate-dim); }
.consent__opt p { grid-column: 2; font-size: 0.8125rem; line-height: 1.55; color: var(--slate); margin-top: -0.35rem; }

.consent-reopen {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--gold);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.consent-reopen:hover { color: var(--gold-bright); }
.footer__col .consent-reopen { font-size: 0.875rem; }

/* ------------------------------------------------------- closing band --- */

.closing {
  border-top: var(--rule);
  background: var(--ink-raised);
  position: relative;
  overflow: hidden;
}
.closing .closing__pic { position: absolute; inset: 0; margin: 0; }
.closing__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 244, 238, 0.74), rgba(247, 244, 238, 0.58));
}
.closing__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(4rem, 9vw, 7.5rem) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.closing__h {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--bone);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.closing__h em { font-style: italic; font-weight: 300; color: var(--gold); }
.closing p { color: var(--slate); max-width: 52ch; }

/* ------------------------------------------------------------- roster --- */
/* People are a ledger, not a gallery: name, remit, one line of standing.
   Rules rather than cards, so the list stays quiet and reads fast. */

.roster {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule);
}
@media (min-width: 52rem) {
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}

.rost {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
  border-bottom: var(--rule);
}
.rost__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--bone);
  margin: 0;
}
.rost__role {
  font-family: var(--data);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.rost__line {
  color: var(--slate);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0.2rem 0 0;
  max-width: 46ch;
}

/* ==========================================================================
   MOTION
   The brand is restraint, so nothing here announces itself. Every effect is a
   hairline, a tone shift or a short rise — the vocabulary the static page
   already uses, given a state change. All of it is opt-in from JS and all of
   it stands down under prefers-reduced-motion.
   ========================================================================== */

/* ---- roster rows ------------------------------------------------------ */

.rost { transition: background 0.4s var(--ease); position: relative; }
.rost::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  width: 1px;
  height: 0;
  background: var(--gold);
  transform: translateY(-50%);
  transition: height 0.45s var(--ease);
}
.rost:hover::before { height: 62%; }
.rost:hover .rost__name { color: var(--gold-bright); }
.rost__name { transition: color 0.35s var(--ease); }

/* ---- reading progress: a measuring rule under the masthead ------------ */

.masthead__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), var(--ion));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ---- scroll reveal ---------------------------------------------------- */
/* Default state is VISIBLE. The hidden state only exists once JS has
   confirmed it can observe and reveal, so a script failure never leaves the
   page blank. */

.js-reveal [data-r] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js-reveal [data-r].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-r] { opacity: 1 !important; transform: none !important; }
  .rost::before { transition: none; }
}


/* --------------------------------------------------------- plate tones -- */
/* Alternating grounds give the long pages a rhythm without extra rules.
   (Restored: an earlier edit sliced these out and nothing caught it, because
   no test asserted that a class used in the markup has a rule.) */

.plate.sec--panel { background: var(--ink-raised); }


/* --------------------------------------------------------- data marks -- */
/* Inert labels: no hover state, because a hover response made people try
   to click them. The border is raised to 3:1 so they read as deliberate. */

.marks { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.marks span {
  font-family: var(--data);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ion);
  border: 1px solid rgba(63, 111, 147, 0.45);
  padding: 0.4rem 0.7rem;
}

.reach {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .reach { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.reach__art { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.reach__pic { width: 100%; aspect-ratio: 4 / 3; }
@media (min-width: 56rem) { .reach--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; } }
.reach__pic img { width: 100%; height: 100%; object-fit: cover; }
.reach__text .prose { max-width: 46ch; }


/* --------------------------------------------------------- photographs -- */
/* Every picture is a figure with the same frame: no radius, a hairline, and
   the comp tag while the asset is unlicensed. Remove data-comp in build.py
   once a licensed file replaces the preview and the tag goes with it. */

.pic { margin: 0; position: relative; overflow: hidden; border: var(--rule); background: var(--ink-panel); }
.pic img { display: block; width: 100%; height: auto; }
[data-comp]::after {
  content: "Comp \00b7 " attr(data-comp);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  font-family: var(--data);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(21, 25, 34, 0.72);
  padding: 0.3rem 0.55rem;
  pointer-events: none;
}

/* Full-bleed band between plates. */
.band { position: relative; border-top: var(--rule); border-bottom: var(--rule); }
.band__pic { margin: 0; position: relative; aspect-ratio: 21 / 8; max-height: 34rem; overflow: hidden; }
.band__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.band__pic, .closing__pic { border: 0; }

/* Video: honour reduced motion by never starting it, and hide it under the
   poster for anyone who has switched autoplay off. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__media { background: url("img/hero-poster.jpg") center / cover no-repeat; }
}
@media print {
  .hero__media, .band, .closing__pic, .reach2__media, .strip, [data-comp]::after { display: none !important; }
  .reach2 { background: #FFFFFF; color: #000; }
  .reach2__h, .reach2__p { color: #000 !important; }
}


/* ------------------------------------------------------------ sparse ---- */
/* The less-is-more layer: a full-height hero, a statement given a whole
   screen of air, nine photographs with nine names, and four words on a rule.
   Copy on these pages is a sentence per section; the pictures do the rest. */

.hero--full .hero__inner {
  min-height: calc(100vh - 4.2rem);
  min-height: calc(100svh - 4.2rem);
  justify-content: center;
  padding-bottom: clamp(5rem, 12vh, 8rem);
}
.hero--full h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); max-width: 14ch; }
.hero--full .lede { max-width: 40ch; }
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  z-index: 3;
  width: 1px;
  height: 3.2rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--bone) 40%, var(--bone));
  opacity: 0.7;
  overflow: hidden;
}
.hero__cue span {
  position: absolute; inset: 0;
  background: var(--ink);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .hero__cue span { animation: none; display: none; } }

.statement { border-top: var(--rule); border-bottom: var(--rule); background: var(--ink); }
.statement__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(5rem, 14vh, 10rem) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.statement__h {
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.04;
  max-width: 16ch;
}
.statement__p { color: var(--slate); font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 40ch; line-height: 1.5; margin: 0; }
.statement .marks { margin-top: 0.75rem; }

@media print {
  .hero__cue { display: none !important; }
}


/* --------------------------------------------------------------- reach --- */
/* The planet from orbit, moving, with one line over it; then three fast
   frames edge to edge. Ink ground: the only dark passage on the site, which
   is what makes it land. */
.reach2 { position: relative; overflow: hidden; background: #070A12; color: #EBE7DF; border-top: var(--rule); }
.reach2__media { position: absolute; inset: 0; z-index: 0; }
.reach2__video { width: 100%; height: 100%; display: block; }
.ambient { object-fit: cover; background: #070A12; }
.reach2::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(7, 10, 18, 0.72) 0%, rgba(7, 10, 18, 0.35) 45%, rgba(7, 10, 18, 0.05) 100%);
}
.reach2__inner {
  position: relative; z-index: 2;
  max-width: var(--shell); margin-inline: auto;
  min-height: min(70vh, 40rem);
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
}
.eyebrow--light { color: #D2AB82; }
.eyebrow--light::before { background: #D2AB82; }
.reach2__h { color: #EBE7DF; font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.04; max-width: 14ch; }
.reach2__h em { color: #D2AB82; }
.reach2__p { color: rgba(235, 231, 223, 0.8); font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 36ch; line-height: 1.5; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .reach2__video { display: none; }
  .reach2__media { background: url("img/reach-poster.jpg") center / cover no-repeat; }
}

.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ink-line); border-bottom: var(--rule); }
@media (min-width: 40rem) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strip li { min-width: 0; }
.strip__pic { border: 0; aspect-ratio: 16 / 10; }
.strip__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.strip li:hover .strip__pic img { transform: scale(1.04); }

/* ============================================================== PRINT ==== */
/* The screen design is white text on near-black. Printed with backgrounds
   dropped, that is a blank page — so print gets its own light treatment, and
   every collapsed <details> is forced open so nothing is silently omitted. */

@media print {
  :root {
    --ink: #FFFFFF;
    --ink-raised: #FFFFFF;
    --ink-panel: #FFFFFF;
    --ink-line: rgba(0, 0, 0, 0.28);
    --ink-line-lit: rgba(0, 0, 0, 0.4);
    --bone: #000000;
    --slate: #23262C;
    --slate-dim: #4A4F58;
    --gold: #6B4E2A;
    --gold-bright: #6B4E2A;
    --gold-dim: #6B4E2A;
    --gold-wash: transparent;
    --ion: #1C4A66;
  }

  html, body { background: #FFFFFF !important; color: #000000 !important; }

  .masthead, .consent, .nav, .skip,
  .masthead__progress, .btn, .actions { display: none !important; }

  .hero::after, .opener::after, .closing::after,
  .rost::before { display: none !important; }

  .plate, .plate.sec--panel, .closing,
  .meta__cell, .panel { background: #FFFFFF !important; }


  .hero__inner, .opener__inner, .plate__inner, .closing__inner {
    padding-block: 1.5rem !important;
  }
  .grid-margin { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
  h1, h2, h3, h4, .rost__name, .closing__h,
  .lede { color: #000000 !important; }
  h1, h2, .closing__h { font-size: 20pt !important; }
  h3 { font-size: 13pt !important; }
  body { font-size: 10pt; line-height: 1.45; }

  .plate, .closing, .opener { page-break-inside: auto; }
  h2, h3 { page-break-after: avoid; }
  .rost { page-break-inside: avoid; }

  a { color: #000000 !important; text-decoration: underline; }
  main a[href^="http"]::after,
  main a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #4A4F58;
  }
}

/* Privacy clauses are page sections (h2) but must not carry section-headline
   scale, or the policy reads as eight landing pages stacked. */
.clause {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}