/* ==========================================================================
   Nebula Group — daylight edition
   An editorial corporate page: warm paper ground, black serif headings, mono
   captions, photographs in plain frames, and a dark footer. One weight of
   black throughout; the only colour is in the pictures.

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

:root {
  /* Ground */
  --ink:          #F5F2EC;
  --ink-raised:   #FFFFFF;
  --ink-panel:    #ECE8E1;
  --ink-line:     rgba(21, 25, 34, 0.12);
  --ink-line-lit: rgba(21, 25, 34, 0.32);

  /* Accent — a bronze kept for the mark, the focus ring and consent controls.
     Nothing in the running page uses it: the layout is black on paper. */
  --gold:         #8C7355;
  --gold-bright:  #6E5A42;
  --gold-dim:     rgba(140, 115, 85, 0.6);
  --gold-wash:    rgba(140, 115, 85, 0.12);

  /* Stone — the hero panel */
  --stone:        #D3CBBE;

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

  /* Footer */
  --night:        #1B1B1D;
  --night-text:   #D9D4CB;
  --night-mute:   #8E8A82;
  --night-line:   rgba(255, 255, 255, 0.12);

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

/* --------------------------------------------------------------- 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; }
  .rost::before { transition: none; }
  *, *::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(--bone); text-decoration: none; }
a:hover { color: var(--slate); }

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

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

/* Sections receive focus when an in-page link is followed (see site.js);
   the section itself needs no ring, the scroll is the cue. */
[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- 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, 6vw, 4.6rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 300; letter-spacing: -0.022em; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.2; letter-spacing: -0.012em; }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.008em; }

p { margin: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
  line-height: 1.6;
  color: var(--slate);
  max-width: 44ch;
}

div.prose { display: flex; flex-direction: column; gap: 1.15em; }
.prose { max-width: var(--measure); color: var(--slate); }
p.prose { display: block; }

/* Marginal annotation — mono, uppercase, tracked. */
.label {
  font-family: var(--data);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}
.label--mute { color: var(--slate-dim); }

.eyebrow {
  font-family: var(--data);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin: 0 0 0.9rem;
}

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

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

.sec { border-top: var(--rule); }
.sec > .shell { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.sec--tone { background: var(--ink-panel); }

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.sec__head .eyebrow { margin-bottom: 0.6rem; }

/* The one arrowed link that closes a section head: mono, tracked, a rule
   beneath it that the arrow slides along on hover. */
.more {
  font-family: var(--data);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--bone);
  white-space: nowrap;
}
.more span { transition: transform 0.25s var(--ease); }
.more:hover { color: var(--bone); }
.more:hover span { transform: translateX(4px); }

/* Prospectus plates, kept for the inner pages */
.plate { border-top: var(--rule); }
.plate__inner { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.plate.sec--tone { background: var(--ink-panel); }

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

/* --------------------------------------------------------- photographs -- */

.pic { margin: 0; position: relative; overflow: hidden; border: var(--rule); background: var(--ink-panel); }
.pic img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------- 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(245, 242, 236, 0.86);
    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: 1.1rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.75rem; color: var(--bone); }
.brand:hover { color: var(--bone); }
.brand__mark { width: 34px; height: 34px; flex: none; object-fit: contain; }
.brand__name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  padding-left: 0.24em; /* optical: the tracking adds space after the last letter */
}

.nav { display: flex; align-items: center; justify-self: center; gap: clamp(1.1rem, 2.6vw, 2.4rem); }
.nav a {
  font-size: 0.875rem;
  color: var(--slate);
  padding-block: 0.3rem;
  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(--ink-line-lit); }
.nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--bone); }

/* The right-hand caption: two short mono lines against a rule. */
.masthead__tag {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--data);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-dim);
  line-height: 1.5;
}
.masthead__tag span { display: block; max-width: 17em; }
.masthead__tag::after { content: ""; width: 2.2rem; height: 1px; background: var(--slate-dim); flex: none; }

.nav-toggle {
  display: none;
  justify-self: end;
  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(--bone); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 56rem) {
  .masthead__inner { grid-template-columns: 1fr auto; row-gap: 0.5rem; }
  .masthead__tag { display: none; }
  .nav { grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; gap: 0.5rem 1.15rem; padding-bottom: 0.25rem; }

  .has-js .nav-toggle { display: block; }
  .has-js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    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); font-size: 1rem; }
}

/* -------------------------------------------------------------- hero ---- */
/* Words on the left, a photograph on the right running to the edge of the
   viewport, with a stone panel and three tracked words laid over its edge. */

.hero { border-bottom: var(--rule); overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
}
.hero__text {
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__text h1 { max-width: 12ch; }
.hero__text .lede { margin-top: 1.5rem; }
.hero__art { position: relative; min-height: 0; }
.hero__pic { aspect-ratio: 4 / 3; border: 0; height: 100%; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.hero__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(7.5rem, 22%, 12rem);
  background: linear-gradient(to right, rgba(211, 203, 190, 0.84), rgba(211, 203, 190, 0.96));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem;
  font-family: var(--data);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
}
.hero__panel span { display: block; white-space: nowrap; }

@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
  }
  .hero__text {
    padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
    padding-right: clamp(2rem, 4vw, 4rem);
    min-height: min(34rem, 72vh);
  }
  .hero__art { min-height: 100%; }
  .hero__pic { aspect-ratio: auto; position: absolute; inset: 0; }
  .hero__panel { padding: 1.5rem; font-size: 0.68rem; gap: 1.1rem; }
}

/* ------------------------------------------------------------- stats ---- */

.stats { border-bottom: var(--rule); background: var(--ink); }
.stats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.5rem 1rem;
  border-right: var(--rule);
  min-width: 0;
}
.stats__list li:nth-child(2n) { border-right: 0; }
.stats__list li:nth-child(-n+2) { border-bottom: var(--rule); }
.stats__v {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--bone);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.stats__k {
  font-family: var(--data);
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--slate-dim);
}
@media (min-width: 52rem) {
  .stats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats__list li { padding: 1.6rem 1.5rem; border-bottom: 0; }
  .stats__list li:nth-child(2n) { border-right: var(--rule); }
  .stats__list li:last-child { border-right: 0; }
  .stats__list li:nth-child(-n+2) { border-bottom: 0; }
}

/* ------------------------------------------------------------- cards ---- */
/* Nine sectors: a thumbnail and a name on a grey card, three across. */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.cards li { min-width: 0; }
.card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  background: var(--ink-panel);
  color: var(--bone);
  height: 100%;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { color: var(--bone); background: var(--ink-raised); box-shadow: 0 10px 30px rgba(21, 25, 34, 0.08); }
.card__pic { border: 0; aspect-ratio: 16 / 10; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card:hover .card__pic img { transform: scale(1.04); }
.card__name {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  padding: 0.75rem 1rem 0.75rem 0;
  text-wrap: balance;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

/* ------------------------------------------------------------ tenets ---- */
/* Four principles as white cards: an icon, a title, one line. */

.tenets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.tenet {
  background: var(--ink-raised);
  border: var(--rule);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  min-width: 0;
}
.tenet__icon { width: 30px; height: 30px; color: var(--bone); margin-top: 0.1rem; }
.tenet__n {
  font-family: var(--data);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--slate-dim);
  margin-top: 0.35rem;
  min-width: 1.6rem;
}
.tenet__h { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.tenet__p { color: var(--slate); font-size: 0.875rem; line-height: 1.55; margin-top: 0.5rem; max-width: 30ch; }
@media (min-width: 40rem) { .tenets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .tenets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
/* On the approach page the four run two across with the full principle text. */
.opener + .sec .tenets { grid-template-columns: 1fr; }
@media (min-width: 52rem) { .opener + .sec .tenets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opener + .sec .tenet__p { max-width: 48ch; font-size: 0.95rem; }

/* ------------------------------------------------------------- split ---- */
/* A photograph on one half, a few words on the other. */

.split {
  border-top: var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.split__pic { border: 0; aspect-ratio: 16 / 10; }
.split__pic img { width: 100%; height: 100%; object-fit: cover; }
.split__text {
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.split__h { max-width: 14ch; }
.split__p { color: var(--slate); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.6; max-width: 44ch; margin-top: 1.1rem; }
.split__text .more { margin-top: 1.75rem; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split__pic { aspect-ratio: auto; height: 100%; min-height: 26rem; }
  .split__text {
    padding-left: clamp(2.5rem, 5vw, 5rem);
    padding-right: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  }
  .split--flip .split__pic { order: 2; }
  .split--flip .split__text {
    order: 1;
    padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
    padding-right: clamp(2.5rem, 5vw, 5rem);
  }
}

/* ------------------------------------------------ approach: levels, points */

.levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: level; }
.levels li { border-top: var(--rule); padding: 1.4rem 0; display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.levels li:last-child { border-bottom: var(--rule); }
.levels__h { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
@media (min-width: 52rem) {
  .levels li { grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; }
}

.points { display: grid; grid-template-columns: 1fr; gap: 1.5rem 2.5rem; margin: 0; }
.points div { border-top: var(--rule); padding-top: 1rem; }
.points dt { font-family: var(--display); font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
.points dd { margin: 0.4rem 0 0; color: var(--slate); font-size: 0.9375rem; line-height: 1.55; max-width: 40ch; }
@media (min-width: 52rem) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------ sectors page ---- */

.entries { display: flex; flex-direction: column; }
.entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem clamp(2rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-top: var(--rule);
  scroll-margin-top: 5.5rem;
}
.entry:first-child { border-top: 0; padding-top: 0; }
.entry__pic { aspect-ratio: 16 / 10; border: 0; }
.entry__pic img { width: 100%; height: 100%; object-fit: cover; }
.entry__text { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.entry__h { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.entry__sum { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--bone); max-width: 48ch; line-height: 1.55; }
@media (min-width: 60rem) {
  .entry { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; }
}

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

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--bone);
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.btn:hover { background: var(--bone); color: var(--ink); }
.btn--solid { background: var(--bone); color: var(--ink); }
.btn--solid:hover { background: #2A2F3A; border-color: #2A2F3A; color: var(--ink); }
.btn--quiet { border-color: var(--ink-line-lit); color: var(--bone); }
.btn--quiet:hover { background: transparent; border-color: var(--bone); color: var(--bone); }

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

/* --------------------------------------------------------------- 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)); } }
.meta__cell--wide { grid-column: 1 / -1; }
.meta__val a { white-space: nowrap; }
.meta__cell { background: var(--ink-raised); 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; }
.meta__val--text { font-family: var(--body); font-size: 1rem; line-height: 1.5; }

/* ------------------------------------------------------------- footer --- */
/* The one dark passage on the site. */

.footer { background: var(--night); color: var(--night-text); }
.footer .brand { color: var(--night-text); }
.footer .brand__mark { background: var(--ink); border-radius: 50%; padding: 2px; }
.footer__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem;
  display: grid;
  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.6rem; }
.footer__col--brand { gap: 0.9rem; }
.footer__col a, .footer__col > p:not(.label) { font-size: 0.875rem; color: var(--night-mute); line-height: 1.6; }
.footer__col a:hover { color: var(--night-text); }
.footer__col .label--mute { color: var(--night-mute); margin-bottom: 0.25rem; }
.footer__legal {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid var(--night-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}
.footer__legal p {
  font-family: var(--data);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--night-mute);
}

.disclaimer {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter) 3rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--night-mute);
}
.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;
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}
@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; border: 0; }
.opener__art .pic img { width: 100%; height: 100%; object-fit: cover; }
.opener h1 { max-width: 14ch; }
.opener .lede { margin-top: 1.5rem; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bone);
  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(--ink-line-lit);
  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.7rem 1.1rem; font-size: 0.875rem; 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(--bone); 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: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.consent-reopen:hover { color: var(--slate); }
.footer__col .consent-reopen { font-size: 0.875rem; color: var(--night-mute); text-decoration: none; }
.footer__col .consent-reopen:hover { color: var(--night-text); }

/* ------------------------------------------------------------- roster --- */
/* People are a ledger, not a gallery: name, remit, one line of standing. */

.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(--slate-dim);
  margin: 0;
}
.rost__line {
  color: var(--slate);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0.2rem 0 0;
  max-width: 46ch;
}

/* Full biographies. At rest a person shows the same single line as
   everyone else; hovering, focusing or tapping lets that line give way to
   the full biography, set in the same type, and the rows below make room.
   Nothing floats over anything. Both layers are animated as grid rows so
   the height change is smooth whatever the length of the text. */
/* When a neighbour in the same row opens, this card's cell grows too; keep
   its name, role and line packed at the top rather than spread apart. */
.rost { align-content: start; }

.rost__lead, .rost__more {
  display: grid;
  transition: grid-template-rows 0.5s var(--ease), opacity 0.35s var(--ease);
}
.rost__lead > *, .rost__more > div { min-height: 0; overflow: hidden; }
.rost__lead { grid-template-rows: 1fr; }
.rost__more { grid-template-rows: 0fr; opacity: 0; }
.rost__photo {
  float: left;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  object-fit: cover;
  margin: 0.3rem 1.1rem 0.4rem 0;
  filter: grayscale(0.15);
}
.rost__more > div::after { content: ""; display: block; clear: both; }
.rost__more p { color: var(--slate); font-size: 0.875rem; line-height: 1.65; max-width: 54ch; margin: 0; }
.rost__more p:first-child { padding-top: 0.2rem; }
.rost__more p + p { margin-top: 0.8em; }

.rost.is-open .rost__lead,
html:not(.js-rost) .rost.has-more:hover .rost__lead,
html:not(.js-rost) .rost.has-more:focus-within .rost__lead { grid-template-rows: 0fr; opacity: 0; }
.rost.is-open .rost__more,
html:not(.js-rost) .rost.has-more:hover .rost__more,
html:not(.js-rost) .rost.has-more:focus-within .rost__more { grid-template-rows: 1fr; opacity: 1; }
.rost.is-open::before { height: 62%; }
.rost.is-open .rost__name { color: var(--slate); }

.rost.has-more { cursor: default; outline: none; }
.rost.has-more:focus-visible::before { height: 62%; background: var(--gold); width: 2px; }

/* The page holds still while a biography above the pointer closes: the
   script keeps the opened person in place, so the browser's own scroll
   anchoring must not correct a second time. */
html.js-rost { overflow-anchor: none; }

/* Touch screens cannot hover, so a small plus marks who has more to read. */
@media (hover: none) {
  .js-rost .rost.has-more { cursor: pointer; padding-right: 2rem; -webkit-tap-highlight-color: transparent; }
  .js-rost .rost.has-more::after {
    content: "+";
    position: absolute;
    right: 0.2rem;
    top: clamp(1.1rem, 2.2vw, 1.5rem);
    font-family: var(--data);
    font-size: 1.05rem;
    line-height: 1;
    color: var(--slate-dim);
    transition: transform 0.35s var(--ease);
  }
  .js-rost .rost.has-more.is-open::after { transform: rotate(45deg); }
}

/* 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;
}
.prose-list {
  max-width: var(--measure);
  color: var(--slate);
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.prose-list li::marker { color: var(--slate-dim); }
.prose-list strong { color: var(--bone); font-weight: 500; }
.prose-list a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--ink-line-lit); }

/* ==========================================================================
   MOTION
   Nothing announces itself and nothing is ever hidden waiting for an
   animation or a script: content is visible from the first paint. Motion is
   limited to hover and tap states, and stands down under
   prefers-reduced-motion.
   ========================================================================== */

.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(--bone);
  transform: translateY(-50%);
  transition: height 0.45s var(--ease);
}
.rost:hover::before { height: 62%; }
.rost__name { transition: color 0.35s var(--ease); }
.rost:hover .rost__name { color: var(--slate); }

/* Reading progress: a measuring rule under the masthead */
.masthead__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--bone);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ============================================================== PRINT ==== */

@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;
    --night: #FFFFFF;
    --night-text: #000000;
    --night-mute: #4A4F58;
    --night-line: rgba(0, 0, 0, 0.28);
  }

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

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

  .rost::before { display: none !important; }
  .rost::after { display: none !important; }
  .rost__lead { display: none !important; }
  .rost__more { grid-template-rows: 1fr !important; opacity: 1 !important; }

  .plate, .plate.sec--tone, .sec--tone, .meta__cell, .card, .tenet, .footer { background: #FFFFFF !important; }

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

  .plate, .opener, .sec, .split { page-break-inside: auto; }
  h2, h3 { page-break-after: avoid; }
  .rost, .card, .tenet, .entry { 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;
  }
}