/* ============================================================
   FONT — real Inter variable, embedded (token replaced by
   tools/inline-assets.mjs). Weight axis 100 to 900; this file
   only ever asks for 200 to 500.
============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/inter-var.woff2') format('woff2');
}

/* ============================================================
   DESIGN TOKENS — a future design-tokens partial replaces this
   block wholesale. Hues taken from the fairCT logo artwork.
============================================================ */
:root {
  /* Brand */
  --navy:        #05487a;   /* wordmark navy: display type, primary ink */
  --blue:        #2876b8;   /* the logo's darker petals */
  --cyan:        var(--hl); /* the accent, wherever it appears: see --hl below */
  /* #0877a0 keeps the highlight's 198° hue while reaching 4.89:1 on #fbfbfc;
     #14aae8 is 2.56:1, so it remains for lines, marks and other non-text ink. */
  --cyan-text:   #0877a0;

  /* Paper and ink ladder */
  --paper:       #fbfbfc;
  --paper-2:     #f4f6f8;
  --ink-1:       #05487a;   /* headings, display: the wordmark navy, same value as --navy */
  --ink-2:       #374e67;   /* body copy */
  --ink-3:       #51677e;   /* secondary, meta */
  --ink-4:       #8b98a5;   /* faint, folios */
  --ink-meta:    #587089;   /* text-legible companion to --ink-4: AA requires 4.5:1 on text while decoration is exempt */

  /* Hairlines: the only dividing device */
  --rule:        color-mix(in srgb, var(--navy) 14%, transparent);
  --rule-soft:   color-mix(in srgb, var(--navy) 9%, transparent);
  --rule-faint:  color-mix(in srgb, var(--navy) 6.5%, transparent); /* the visible column grid */

  /* Caution tone for form errors. Deliberately not coral or red. */
  --warn:        #8a6a30;

  /* Surface roles retained as authored design tokens. */
  --nav-bg:      rgba(251,251,252,0.94);
  --btn-hover:   #0a5c96;
  --select:      color-mix(in srgb, var(--hl) 20%, transparent);

  /* HIGHLIGHT / MOTIF. --hl-src is the one authored source; all field and
     ink roles derive from it. */
  --hl-src:      #14aae8;
  --hl:          var(--hl-src);

  /* Everything below derives from --hl-src, keeping field and ink coherent. */

  /* The band a heading sits in. The darkener is neutral, not ink-blue:
     pulling every candidate towards navy turned the bronze and green plates
     khaki. This keeps a deep printed version of each source hue without
     requiring relative-colour syntax from the viewing browser. */
  --hl-darkener: #0d0f11;
  --hl-field:    color-mix(in srgb, var(--hl-src) 54%, var(--hl-darkener) 46%);
  /* Ink printed on the field: off-white, never pure white, tinted by the
     field's own colour so the two belong to each other. */
  --hl-ink:      color-mix(in srgb, #ffffff 94%, var(--hl-src) 6%);
  --hl-ink-2:    color-mix(in srgb, #ffffff 74%, var(--hl-src) 26%);
  --hl-ink-3:    color-mix(in srgb, #ffffff 80%, var(--hl-src) 20%);
  /* Hairlines drawn on the field. */
  --hl-rule:     rgba(255,255,255,0.24);
  /* Geometry */
  --nav-h:       4.5rem;
  --sheet:       84rem;
  --pad-x:       clamp(1.25rem, 4vw, 4rem);

  /* Weights. HARD CEILING 500. */
  --w-thin:      200;
  --w-light:     300;
  --w-book:      400;
  --w-medium:    500;

  /* Type scale */
  --fs-label:    0.6875rem;
  --fs-micro:    0.75rem;
  --fs-small:    0.875rem;
  --fs-body:     1rem;
  --fs-lead:     clamp(1.125rem, 1.55vw, 1.5rem);
  --fs-item:     clamp(1.3rem, 2.1vw, 1.85rem);
  /* A section heading inside a page is not a page title. The scale had no step
     between the two, so every mid-page heading was set at the size reserved for
     the thing at the top of the page and shouted over the content beneath it. */
  --fs-section:  clamp(1.6rem, 2.9vw, 2.4rem);
  --fs-title:    clamp(2.25rem, 5vw, 4rem);
  --fs-display:  clamp(2.75rem, 8.4vw, 7.5rem);

  --ease:        cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* ============================================================
   RESET / BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* Anchors glide rather than jump: an instant jump inside a long page leaves no
   sense of where you landed relative to where you were. The ediphy group site
   declares this and nothing else, so a reader with reduce-motion set sees the
   same glide on both sites. Matching it here — a reduce-motion override made
   this site jump where the group site did not. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The announcement bar and nav are fixed, so an anchor target must stop short
   of the viewport top by their combined height. The runtime measures that into
   --chrome-h; the fallback covers the nav alone before the script runs. */
:target { scroll-margin-top: calc(var(--chrome-h, var(--nav-h)) + 1.5rem); }
[id] { scroll-margin-top: calc(var(--chrome-h, var(--nav-h)) + 1.5rem); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  font-weight: var(--w-light);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Semantic emphasis never renders bold in this brand. */
b, strong, th, dt, legend, optgroup { font-weight: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-thin); color: var(--ink-1); }
p { margin: 0; }
/* The browser default indents figures by 40px, which would put a figure 40px
   right of the column line every other element on the page starts on. */
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
::selection { background: var(--select); }

/* ============================================================
   COLUMN GRID — the structure made visible. One fixed layer of
   hairlines behind the whole site, aligned to the content grid.
   Twelve columns on desktop, four on small screens.
============================================================ */
.rules { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.rules .sheet { height: 100%; }
.rules-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-left: 1px solid var(--rule-faint);
  border-right: 1px solid var(--rule-faint);
}
.rules-grid i { border-right: 1px solid var(--rule-faint); }
.rules-grid i:last-child { border-right: 0; }

/* ============================================================
   LAYOUT — sheet + twelve column grid, no column gap so content
   sits on the same lines the hairlines draw.
============================================================ */
.sheet { max-width: var(--sheet); margin: 0 auto; padding: 0 var(--pad-x); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 0; }

/* Column placements. Everything on the page begins on the sheet's left edge:
   the label sits directly above the heading it marks rather than out in a
   margin column, so there is no empty gutter running down the left of the
   page and no heading indented further right than the thing it heads.
   Width still varies by role — prose keeps a readable measure, wide content
   runs the sheet — but the left edge never moves. */
.c-mark  { grid-column: 1 / span 12; padding-right: 0; margin-bottom: 0.9rem; }
.c-read  { grid-column: 1 / span 8;  padding-right: 2.5rem; }
.c-wide  { grid-column: 1 / span 9;  padding-right: 2rem; }
.c-full  { grid-column: 1 / span 12; padding-right: 0; }
.c-right { grid-column: 9 / span 4;  padding-right: 0; }
.c-half  { grid-column: 1 / span 5;  padding-right: 2.5rem; }
.c-half2 { grid-column: 7 / span 6;  padding-right: 0; }

.band     { padding: clamp(3.5rem, 6vw, 6.5rem) 0; }
.band--tight { padding: clamp(2.5rem, 4vw, 4rem) 0; }
.band--head  { padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(2.25rem, 3.5vw, 3.5rem); }
.rule-top { border-top: 1px solid var(--rule); }

@media (max-width: 899px) {
  .grid { grid-template-columns: 1fr; }
  .c-mark, .c-read, .c-wide, .c-full, .c-nine, .c-right, .c-half, .c-half2 {
    grid-column: 1 / -1; padding-right: 0;
  }
  .c-mark { margin-bottom: 1.5rem; }
  .rules-grid i { border-right: 0; }
  .rules-grid i:nth-child(3n) { border-right: 1px solid var(--rule-faint); }
}

/* ============================================================
   TYPE PRIMITIVES
============================================================ */
.label {
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-meta);
  line-height: 1.5;
}
.label--ink { color: var(--ink-3); }
.label--cyan { color: var(--cyan-text); }

.folio {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--w-book);
  letter-spacing: 0.18em;
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--w-thin);
  line-height: 0.94;
  letter-spacing: -0.038em;
  color: var(--ink-1);
}
.title {
  font-size: var(--fs-title);
  font-weight: var(--w-thin);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  text-wrap: balance;
}
/* Section headings inside a page. Same face and colour as .title, one step down
   the scale, so a heading in the middle of a page reads as a division of the
   page rather than as a second page title. */
.title--section {
  font-size: var(--fs-section);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.item-title {
  font-size: var(--fs-item);
  font-weight: var(--w-thin);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink-1);
}
.lead {
  font-size: var(--fs-lead);
  font-weight: var(--w-light);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 34ch;
}
.prose p { max-width: 64ch; }
.prose p + p { margin-top: 1.4rem; }
.prose a { color: var(--navy); border-bottom: 1px solid var(--rule); }
.prose a:hover { border-bottom-color: var(--cyan); }

/* Sub-headings inside body copy.  The reset sets every heading to the thin
   weight, which is LIGHTER than the 300 of the body text around it — so a
   sub-heading with no rule of its own reads as de-emphasised body copy and
   disappears.  The live site distinguishes them with weight 700, which this
   brand's 500 ceiling forbids, so they are separated by size, colour and space
   instead: existing scale steps only, no new type.  h2 opens a major section
   and takes a hairline above it; h3 and h4 are quieter steps down. */
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  max-width: 48ch;
  color: var(--ink-1);
  line-height: 1.3;
}
.prose h2 {
  font-size: var(--fs-item);
  letter-spacing: -0.014em;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-soft);
}
.prose h3 {
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
  margin-top: 2.5rem;
}
.prose h4, .prose h5, .prose h6 {
  font-size: var(--fs-body);
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2.5rem;
}
/* A heading is followed by its own paragraph, so the generic p+p gap would
   double up on the space the heading already sets. */
.prose h2 + p, .prose h3 + p, .prose h4 + p,
.prose h5 + p, .prose h6 + p { margin-top: 0.9rem; }
/* First heading in a block has no preceding copy to separate from. */
.prose > h2:first-child, .prose > h3:first-child, .prose > h4:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* The live terms page carries a heading holding nothing but a zero-width
   joiner.  The content is reproduced as-is, but it must not draw a rule and a
   section's worth of space for an invisible heading. */
.prose h2.is-empty, .prose h3.is-empty, .prose h4.is-empty,
.prose h5.is-empty, .prose h6.is-empty {
  display: none;
}

/* Prose lists are built from the same hairlines as the rest of the site:
   items are separated by a rule rather than marked with a filled bullet,
   and the marker itself is a short rule set in the gutter. */
.prose ul, .prose ol {
  max-width: 64ch;
  margin-top: 1.4rem;
  border-top: 1px solid var(--rule-soft);
}
.prose p + ul, .prose p + ol { margin-top: 1.4rem; }
.prose ul + p, .prose ol + p { margin-top: 1.4rem; }
.prose li {
  position: relative;
  padding: 0.9rem 0 0.9rem 2.25rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 0.85rem;
  height: 0;
  /* Sits on the optical centre of the first line (line-height 1.75). */
  margin-top: 0.85em;
  border-top: 1px solid var(--ink-4);
}
.prose ol { counter-reset: prose-ol; }
.prose ol > li { counter-increment: prose-ol; }
.prose ol > li::before {
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.9rem;
  font-size: var(--fs-label);
  font-weight: var(--w-book);
  letter-spacing: 0.18em;
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}
.small { font-size: var(--fs-small); color: var(--ink-3); }

.readmore {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.readmore span { transition: transform 0.4s var(--ease); }
.readmore:hover { color: var(--cyan-text); border-bottom-color: var(--cyan); }
.readmore:hover span { transform: translateX(4px); }

.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.9rem;
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy);
  /* Stated rather than inherited: a button has to read as one under the cursor. */
  cursor: pointer;
  transition: background-color 0.4s var(--ease);
}
.btn:hover { background: var(--btn-hover); }
.btn--quiet {
  color: var(--navy); background: none;
  border: 1px solid var(--rule);
  padding: 0.95rem 1.6rem;
}
.btn--quiet:hover { background: none; border-color: var(--navy); }
/* A button shape with nothing behind it yet. Same geometry as the download
   control it will become, so the column reads as one column rather than a
   button and a floating label; the border and the label drop back so it reads
   as unavailable rather than merely quiet. Declared after --quiet so it wins. */
.btn--disabled {
  color: var(--ink-meta);
  border-color: var(--rule-soft);
  cursor: default;
}
.btn--disabled:hover { border-color: var(--rule-soft); }
.prose .btn { color: var(--paper); border-bottom: 0; }

/* NOT FOUND — an interior heading field followed by a short recovery route.
   The links are deliberately fewer than the primary nav and share its compact
   label treatment, so this remains a destination rather than a second menu. */
.not-found__links {
  max-width: 42rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.not-found__links ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
}
.not-found__links li { border-bottom: 1px solid var(--rule-soft); }
.not-found__links .readmore {
  width: 100%;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 0;
}
@media (max-width: 599px) {
  .not-found__links ul { grid-template-columns: 1fr; }
}

/* Slow, small reveal. Nothing slides in from off-screen. */
[data-rise] { opacity: 0; transform: translateY(14px); }
[data-rise].in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

/* ============================================================
   HERO LATEST
============================================================ */
/* The latest announcement, set into the opening statement rather than pinned
   above the masthead as a bar. It reads as the first line of the record. */
.hero-latest-wrap { margin-top: clamp(2.5rem, 4.5vw, 4rem); }
.hero-latest {
  display: inline-grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: baseline;
  gap: 0 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  color: inherit;
}
.hero-latest__label {
  font-size: var(--fs-label); font-weight: var(--w-book);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan-text);
}
.hero-latest__text {
  font-size: var(--fs-small); font-weight: var(--w-light);
  line-height: 1.4; color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
.hero-latest__arrow { color: var(--ink-4); transition: transform 0.4s var(--ease), color 0.3s var(--ease); }
.hero-latest:hover .hero-latest__text { color: var(--cyan-text); }
.hero-latest:hover .hero-latest__arrow { color: var(--cyan); transform: translateX(0.35rem); }
@media (max-width: 599px) {
  .hero-latest { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; }
  .hero-latest__label { grid-column: 1 / -1; }
}

/* ============================================================
   NAV
============================================================ */
#site-nav {
  /* top:0 is explicit. The announcement bar used to sit above the nav and the
     runtime set this inline; with the bar gone an unset top falls back to the
     nav's static position, which is below the body padding the nav itself
     creates — a nav-height band of empty page above the masthead. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
  transition: top 0.3s var(--ease);
}
.nav-in {
  max-width: var(--sheet); margin: 0 auto; height: 100%;
  padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav-logo { display: block; flex-shrink: 0; }
.nav-logo img { height: 1.5rem; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2.25rem; }
.nav-links > a,
.nav-parent {
  position: relative;
  padding: 0.4rem 0;
  font-size: var(--fs-label);
  font-weight: var(--w-book);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.3s var(--ease);
}
/* The label is a link to the parent page and the chevron is its own control, so
   they are separate elements. They still have to read as one nav item: the
   underline is drawn under the pair, and hovering either lights both. */
.nav-item--has-children { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-parent-toggle { display: inline-flex; align-items: center; padding: 0.4rem 0; color: var(--ink-3); transition: color 0.3s var(--ease); }
.nav-links > a:hover,
.nav-item--has-children:hover .nav-parent,
.nav-item--has-children:hover .nav-parent-toggle,
.nav-parent-toggle[aria-expanded="true"] { color: var(--navy); }
.nav-links > a::after, .nav-item--has-children::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.35rem;
  height: 1px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav-links > a.is-current, .nav-item.is-current .nav-parent, .nav-item.is-current .nav-parent-toggle { color: var(--navy); }
.nav-links > a.is-current::after, .nav-item.is-current::after, .nav-item--has-children.is-open::after { transform: scaleX(1); }
.nav-item { position: relative; }
.nav-chevron { width: 0.75rem; height: 0.75rem; transition: transform 0.3s var(--ease); }
.nav-parent-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-children {
  position: absolute; top: 100%; right: -1rem;
  width: max-content; min-width: 15rem; padding: 0.4rem 1rem;
  background: var(--paper); border: 1px solid var(--rule-soft);
  box-shadow: 0 0.75rem 1.5rem rgba(8, 74, 123, 0.08);
}
.nav-children a {
  display: block; padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--fs-label); font-weight: var(--w-book);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  transition: color 0.3s var(--ease);
}
.nav-children li:last-child a { border-bottom: 0; }
.nav-children a:hover { color: var(--navy); }
.nav-ext { font-size: 0.85em; vertical-align: 0.1em; }
#burger { display: none; width: 1.75rem; height: 1.75rem; color: var(--navy); }
#burger svg { width: 100%; height: 100%; }

#mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 45;
  background: var(--paper);
  display: none; overflow-y: auto;
}

/* A quiet local index for long pages. It occupies normal document flow, then
   holds directly below the fixed masthead while its own page is being read. */
.section-nav {
  position: sticky;
  top: var(--chrome-h, var(--nav-h));
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.section-nav .sheet { overflow-x: auto; }
.section-nav__items {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-width: max-content;
  white-space: nowrap;
}
.section-nav__link {
  display: block;
  padding: 0.85rem 0;
  color: var(--ink-meta);
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.section-nav__link:hover,
.section-nav__link.is-current { color: var(--cyan-text); }
#mobile-menu.is-open { display: block; }
body.mobile-menu-open { overflow: hidden; }
.mm-in { padding: 1.5rem var(--pad-x) 3rem; }
#mobile-menu > .mm-in > a,
.mm-item > a {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 1.5rem; font-weight: var(--w-thin);
  letter-spacing: -0.02em; color: var(--ink-1);
}
#mobile-menu > .mm-in > a .mm-n,
.mm-item > a .mm-n {
  font-size: var(--fs-label); font-weight: var(--w-book);
  letter-spacing: 0.18em; color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}
#mobile-menu > .mm-in > a.is-current,
.mm-item.is-current > a { color: var(--cyan-text); }
.mm-item { position: relative; }
.mm-item > a { padding-right: 4rem; }
.mm-toggle {
  position: absolute; top: 0.6rem; right: 0; width: 3rem; height: 3rem;
  display: grid; place-items: center; color: var(--ink-3);
}
.mm-toggle svg { width: 0.9rem; height: 0.9rem; transition: transform 0.3s var(--ease); }
.mm-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-children { margin: -0.35rem 0 0 2.7rem; padding-bottom: 0.7rem; }
.mm-children a {
  display: block; padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--fs-small); font-weight: var(--w-book);
  color: var(--ink-3);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 60; left: var(--pad-x); top: 0.75rem;
  padding: 0.5rem 0.75rem; background: var(--paper); color: var(--navy);
  font-size: var(--fs-label); font-weight: var(--w-medium);
  letter-spacing: 0.12em; text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }
@media (max-width: 1079px) {
  .nav-links { display: none; }
  #burger { display: block; }
}

/* ============================================================
   PAGE MECHANICS — one page visible at a time
============================================================ */
main { position: relative; z-index: 1; }
.page { display: none; }
.page.is-active { display: block; }

/* Interior page header */
.page-head .title { max-width: 22ch; }
/* The interior header's standing paragraph is a summary, not an opening
   statement. At the home hero's lead size it ran to eight lines of very large
   white type on the field and read as body copy set by mistake; a step down
   puts it below the heading it explains. */
.page-head .lead {
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.006em;
  max-width: 42ch;
}
@media (max-width: 899px) {
  /* Stacked, the standfirst starts on the line directly under the title and
     the two read as one run-on sentence. On desktop the gap is the column
     between them; here it has to be set. */
  .page-head .c-right { margin-top: 1.75rem; }
}
.page-head .standfirst {
  margin-top: 2rem;
  font-size: var(--fs-lead); font-weight: var(--w-light);
  line-height: 1.5; letter-spacing: -0.012em;
  color: var(--ink-3); max-width: 40ch;
}

/* ============================================================
   HOME — HERO
============================================================ */
.hero { padding: clamp(4rem, 11vh, 9rem) 0 clamp(3rem, 6vw, 5.5rem); }
.hero .display { max-width: 14ch; }
.hero-lead { margin-top: 0; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 900px) {
  /* The right column reads down to its call to action, and the latest-record
     line closes the whole opening statement. Hung from the top of the grid the
     buttons finished halfway up the display and left a column of empty field
     beneath them; spanning both rows and sitting on the bottom lands the
     buttons on the same line the record does, and the two close together. */
  .hero .c-read { grid-row: 2; }
  .hero-lead { grid-row: 2 / span 2; align-self: end; padding-top: 0.75rem; }
  /* The record line shares its row with the bottom of the right column, so it
     must not run the full twelve columns: a full-width box on this row lies
     over the buttons and swallows their hover and their clicks. It only ever
     occupies the reading columns anyway. */
  .hero-latest-wrap { grid-row: 3; grid-column: 1 / span 8; }
}
@media (max-width: 899px) {
  .hero-lead { margin-top: 2.25rem; }
}
/* HOME — INDEX of interior pages */
.index-list { border-top: 1px solid var(--rule); }
.index-row {
  display: grid; grid-template-columns: 1fr 5fr 1fr;
  align-items: baseline; gap: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: padding-left 0.5s var(--ease);
}
.index-row:hover { padding-left: 0.6rem; }
.index-row .ix-n {
  font-size: var(--fs-label); font-weight: var(--w-book);
  letter-spacing: 0.18em; color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}
.index-row .ix-t {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-weight: var(--w-thin);
  letter-spacing: -0.022em; color: var(--ink-1); line-height: 1.25;
}
.index-row .ix-d {
  display: block; margin-top: 0.4rem;
  font-size: var(--fs-small); font-weight: var(--w-light);
  color: var(--ink-3); max-width: 46ch;
}
.index-row .ix-a {
  font-size: var(--fs-small); color: var(--ink-4);
  justify-self: end; padding-right: 0.25rem;
  transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}
.index-row:hover .ix-a { color: var(--cyan); transform: translateX(4px); }
@media (max-width: 599px) {
  .index-row { grid-template-columns: 2.25rem 1fr; }
  .index-row .ix-a { display: none; }
}

/* HOME — BACKER STRIP, text wordmarks only */
/* Three statements rather than five short wordmarks, so the row is laid out as
   even columns; a flex gap tuned for wordmarks wrapped these onto two lines. */
.backers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; border-top: 1px solid var(--rule); padding-top: 1.35rem; }
.backers li {
  font-size: var(--fs-small); font-weight: var(--w-book);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  padding: 0.35rem 0;
}
@media (max-width: 599px) { .backers { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================
   LEDGER — hairline fact rows, replacing cards in this composition
============================================================ */
.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
  display: grid; grid-template-columns: 2fr 5fr;
  gap: 0.35rem 0;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.ledger-row > * { padding-right: 1.75rem; }
.ledger-row dt, .ledger-row .lg-k {
  font-size: var(--fs-label); font-weight: var(--w-medium);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-meta);
  padding-top: 0.25rem;
}
.ledger-row dd, .ledger-row .lg-v {
  margin: 0;
  font-size: 1.0625rem; font-weight: var(--w-light);
  letter-spacing: -0.012em; color: var(--ink-1);
}
.ledger-row dd a { color: var(--navy); border-bottom: 1px solid var(--rule); }
.ledger-row dd a:hover { border-bottom-color: var(--cyan); }
.ledger-row .lg-note {
  display: block; margin-top: 0.3rem;
  font-size: var(--fs-small); font-weight: var(--w-light); color: var(--ink-3);
  max-width: 58ch;
}
.ledger-row.is-marked .lg-k { color: var(--cyan-text); }
@media (max-width: 599px) {
  .ledger-row { grid-template-columns: 1fr; }
  .ledger-row dt, .ledger-row .lg-k { padding-top: 0; }
}

/* Statement block: one sentence, hairline framed top and bottom */
.statement {
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 2rem;
}
.statement p {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: var(--w-light);
  line-height: 1.55; letter-spacing: -0.012em; color: var(--ink-1);
  max-width: 46ch;
}

/* ============================================================
   TIMELINE — typographic ledger, year in the margin column.
   No illustration: the year, the rule and the space carry it.
============================================================ */
.tl { border-top: 1px solid var(--rule); }
/* The margin column is sized to hold the longest date on one line. A year that
   wraps reads as two entries, and "2026 / 27" broken after the slash reads as a
   different date entirely. */
.tl-row {
  display: grid; grid-template-columns: 2.6fr 5fr;
  gap: 1rem 0;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.tl-when { padding-right: 1.75rem; }
.tl-year {
  display: block; white-space: nowrap;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: var(--w-thin);
  letter-spacing: -0.03em; line-height: 1; color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.tl-stage {
  display: block; margin-top: 0.7rem;
  font-size: var(--fs-label); font-weight: var(--w-book);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-meta);
}
.tl-body { padding-right: 2rem; }
.tl-body h3 {
  font-size: 1.125rem; font-weight: var(--w-light);
  letter-spacing: -0.015em; line-height: 1.35; color: var(--ink-1);
}
.tl-body p { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--ink-3); max-width: 56ch; }
/* The current step is flagged in the margin column, under the year, so it
   never needs a stranded third column out at the page edge. */
.tl-flag {
  display: none; margin-top: 0.55rem;
  font-size: var(--fs-label); font-weight: var(--w-medium);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan-text);
}
.tl-row.is-now .tl-flag { display: block; }
.tl-row.is-now .tl-year { color: var(--navy); }
@media (max-width: 899px) {
  .tl-row { grid-template-columns: 1fr; padding: 1.85rem 0; }
  .tl-when, .tl-body { padding-right: 0; }
  .tl-when { margin-bottom: 0.9rem; }
}

/* ============================================================
   FAQ — hairline list, numeral in the margin column
============================================================ */
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule-soft); }
.faq-q {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 2fr 6fr 1fr;
  align-items: baseline; gap: 0;
  padding: 1.75rem 0;
}
.faq-n {
  font-size: var(--fs-label); font-weight: var(--w-book);
  letter-spacing: 0.18em; color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}
.faq-t {
  font-size: var(--fs-item); font-weight: var(--w-thin);
  letter-spacing: -0.022em; line-height: 1.2; color: var(--ink-1);
  transition: color 0.35s var(--ease);
}
.faq-q:hover .faq-t { color: var(--blue); }
.faq-sign { position: relative; width: 0.85rem; height: 0.85rem; justify-self: end; align-self: center; }
.faq-sign::before, .faq-sign::after {
  content: ''; position: absolute; background: var(--ink-4);
  transition: transform 0.45s var(--ease), background-color 0.35s var(--ease);
}
.faq-sign::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-sign::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item.is-open .faq-sign::after { transform: translateX(-50%) scaleY(0); }
.faq-item.is-open .faq-sign::before { background: var(--cyan); }
.faq-a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease); }
.faq-item.is-open .faq-a { opacity: 1; }
.faq-a-in {
  /* Indent matches the question column: 2 of 9 columns. */
  margin-left: 22.22%;
  padding: 0 2rem 2.25rem 0;
  font-size: 1.0625rem; font-weight: var(--w-light); line-height: 1.7;
  color: var(--ink-2); max-width: 62ch;
}
.faq-a-in a { color: var(--navy); border-bottom: 1px solid var(--rule); }
.faq-a-in a:hover { border-bottom-color: var(--cyan); }
@media (max-width: 599px) {
  .faq-q { grid-template-columns: 2.25rem 1fr 1rem; gap: 0 0.75rem; }
  .faq-a-in { margin-left: 0; padding: 0 0 1.75rem 3rem; }
}

/* ============================================================
   NEWS — editorial rows. No thumbnails, no cards.
============================================================ */
/* The earlier three-column news row and the home teaser are gone: no component
   renders .news-when/.news-body/.news-go or .teaser any more, and the stale
   .news-row grid was still landing on the list markup below and collapsing the
   headline column to nothing. */

/* The news index is a ruled list, not a gallery. A generic plate per story
   carries no information; the date, the tag and the headline do. Each entry is
   one full-width row with a hairline under it, so the page reads as a record
   of what has happened rather than as a set of tiles. */
.news-grid-section { border-top: 1px solid var(--rule); }
.news-grid-section__cards { margin-top: clamp(2rem, 4vw, 3.5rem); }
/* On the news index the page header carries the title, so the section has no
   heading of its own and that gap opens into an empty band above the first
   entry. With nothing above it the list starts at the top of the section. */
.news-grid-section__cards:first-child { margin-top: 0; }
.news-grid-section__more { margin-top: 2.5rem; }
.news-list { border-top: 1px solid var(--rule-soft); }
.news-row { border-bottom: 1px solid var(--rule-soft); }
.news-row__link {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) 2.5rem;
  align-items: baseline;
  gap: 0 1.5rem;
  padding: clamp(1.1rem, 1.8vw, 1.6rem) 0;
  color: inherit;
  transition: color 0.3s var(--ease);
}
.news-row__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--ink-meta);
  font-size: var(--fs-label);
  font-weight: var(--w-book);
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
/* An index entry, not a headline. At item scale a ten-word press-release title
   ran to three lines and each row read as its own section; the list is easier
   to scan across when the entries sit closer to reading size. Set just above
   body (16px) rather than below section scale: at the previous 21px cap the
   longest titles still read as headlines rather than as rows of an index. */
.news-row__title {
  color: var(--ink-1);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: var(--w-light);
  letter-spacing: -0.012em;
  line-height: 1.35;
  transition: color 0.3s var(--ease);
}
/* The arrow is the only thing that moves on hover: it reads as the row
   advancing rather than as a button lighting up. */
.news-row__arrow {
  justify-self: end;
  color: var(--ink-4);
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
.news-row__link:hover .news-row__title { color: var(--cyan-text); }
.news-row__link:hover .news-row__arrow { color: var(--cyan); transform: translateX(0.35rem); }
@media (max-width: 899px) {
  .news-row__link {
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: 0.55rem 1rem;
  }
  .news-row__meta { flex-direction: row; gap: 1rem; grid-column: 1 / -1; }
  .news-row__title { grid-column: 1; }
}

/* CONSULTATIVE COMMITTEE — the same ruled ledger treatment, expressed as
   accessible tables for data that needs to remain easy to update from YAML. */
.committee-section { border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--chrome-h, var(--nav-h)) + var(--section-nav-h, 0px) + 1.5rem); }
.committee-news__content,
.committee-membership__content,
.committee-documents__content { margin-top: clamp(2rem, 4vw, 3.5rem); }
.committee-news .prose { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
/* The wrapper scrolls the table on narrow screens.  A grid item defaults to
   min-width:auto, which makes it grow to the table's min-content width and
   pushes the page sideways instead — so the item and the wrapper both have to
   be allowed to shrink below it. */
.committee-membership__content .c-full,
.committee-documents__content .c-full { min-width: 0; }
/* position:relative is load-bearing: the download column's visually-hidden
   header is absolutely positioned, and without a positioned ancestor here it
   lays out against the page rather than the scroller — escaping the clip and
   dragging the whole document sideways. */
.committee-table-wrap { position: relative; overflow-x: auto; min-width: 0; border-top: 1px solid var(--rule); }
.committee-table { width: 100%; border-collapse: collapse; text-align: left; }
.committee-table th,
.committee-table td { padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.committee-table th { font-size: var(--fs-label); font-weight: var(--w-medium); letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; color: var(--ink-meta); }
.committee-table .committee-table__group th { padding-top: 1.75rem; color: var(--ink-3); }
.committee-table td { font-weight: var(--w-light); color: var(--ink-1); }
.committee-table th:nth-child(1), .committee-table td:nth-child(1) { width: 29%; }
.committee-table th:nth-child(2), .committee-table td:nth-child(2) { width: 43%; }
.committee-table th:last-child, .committee-table td:last-child { width: 28%; padding-right: 0; }
/* The action sits between the membership note and the table of members. Its
   own top margin separated it from the note but nothing held it off the table
   header below, so the button appeared to be part of the table. */
.committee-action { margin-top: 2rem; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.committee-documents .committee-table th:first-child, .committee-documents .committee-table td:first-child { width: 52%; }
.committee-documents .committee-table th:nth-child(2), .committee-documents .committee-table td:nth-child(2) { width: 23%; }
.committee-documents .committee-table th:last-child, .committee-documents .committee-table td:last-child { width: 25%; text-align: right; }
.people-membership .committee-membership__group + .committee-membership__group { margin-top: clamp(3rem, 6vw, 5rem); }
.people-membership .committee-membership__group .title { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* A group heading is subordinate to the block's own section heading, so it steps
   down the scale. Scoped to the group rather than changing .title--section,
   which every other section heading on the site shares. */
.committee-membership__group > .title--section { font-size: var(--fs-item); letter-spacing: -0.022em; }
.people-membership .committee-table th:first-child, .people-membership .committee-table td:first-child { width: 38%; }
.people-membership .committee-table th:last-child, .people-membership .committee-table td:last-child { width: 62%; padding-right: 0; }
@media (max-width: 599px) {
  .committee-table { min-width: 38rem; }
  .committee-documents .committee-table { min-width: 34rem; }
  .people-membership .committee-table { min-width: 0; }
}

/* ============================================================
   PARTNERS — supplied marks stay quiet until directly explored.
============================================================ */
.partner-strip { border-top: 1px solid var(--rule); }
/* Each mark takes an equal share of its line, whatever the count. This was a
   fixed seven-column grid, so removing a partner left a dead column and the row
   hanging off to the left. A fixed column count also strands the remainder: six
   marks in five columns leaves one alone at the far left. The cells are flexible
   instead, sharing a common basis and growing by the same factor, so every line
   is filled evenly by however many marks landed on it and adding or dropping a
   partner needs no layout change. */
.partner-strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* The basis is a legible width for a wordmark, so the row drops to fewer
     marks as the sheet narrows instead of squeezing them together. The column
     gap is a real gap now that the cells are centred rather than left-aligned
     with a padded gutter. */
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
}
.partner-strip__item {
  /* 6.75rem, not 10: at 10rem seven marks needed 7x160 + 6x36 = 1336px of
     track and the desktop sheet is 1229, so the seventh always dropped to a
     line of its own. At 6.75rem (108px) the set needs 972px, so it holds one
     line down to about 1000px and only wraps when the sheet genuinely cannot
     hold it. The marks are sized by max-height, not by this basis, so lowering
     it wraps later without shrinking anything. */
  flex: 1 1 6.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.partner-strip__logo {
  --partner-scale: 1;
  /* The scale factor sets the height, but a wide mark at its scaled height can
     be wider than its column.  max-width caps it at the cell and height:auto
     lets it give up height to keep its aspect ratio, so no mark ever spills
     into its neighbour. */
  /* The scale factor sets the height; max-width only catches a mark that would
     otherwise be wider than its column, and height:auto lets such a mark give
     up height to keep its aspect ratio rather than spill into its neighbour.
     The column gap is carried by padding on the cell instead of a grid gap, so
     the marks keep their tuned widths and the gap does not eat into them. */
  width: auto;
  max-width: 100%;
  height: auto;
  /* 2.1rem, not 2.5: at four columns of the reading measure the taller base
     made every mark hit its column width first, which flattened them all to an
     identical width and threw away the per-logo scale tuning. */
  max-height: calc(2.1rem * var(--partner-scale));
  /* grayscale() preserves each mark's luminance, so the near-black ones (UBS,
     Citadel) stayed near-black while the mid-blue ones (Barclays) went pale —
     a 149-point spread that read as some partners shouting and others whisper-
     ing.  brightness(0) discards the source colour entirely and the opacity
     sets the single tone they all share, so the strip is even by construction
     rather than by per-logo tuning.  Every mark is single-colour with no white
     knockouts, so nothing is lost by flattening.  Hover restores true colour. */
  filter: brightness(0);
  opacity: 0.45;
  transition: filter 0.35s var(--ease), opacity 0.35s var(--ease);
}
.partner-strip__logo[data-scale="0.50"] { --partner-scale: 0.50; }
.partner-strip__logo[data-scale="0.60"] { --partner-scale: 0.60; }
.partner-strip__logo[data-scale="0.70"] { --partner-scale: 0.70; }
.partner-strip__logo[data-scale="0.80"] { --partner-scale: 0.80; }
.partner-strip__logo[data-scale="0.90"] { --partner-scale: 0.90; }
.partner-strip__logo[data-scale="1.00"] { --partner-scale: 1; }
.partner-strip__logo[data-scale="1.10"] { --partner-scale: 1.10; }
.partner-strip__logo[data-scale="1.20"] { --partner-scale: 1.20; }
.partner-strip__logo[data-scale="1.30"] { --partner-scale: 1.30; }
/* Deutsche Bank's lockup hangs its wordmark off the bottom of a tall square
   emblem, so centring the artwork centres the square and leaves the words
   sitting six pixels below every other name in the row. The row is read along
   the words, so the words are what is aligned; the emblem carries the offset.
   Transform, not margin, so nothing in the grid moves. */
.partner-strip__logo[src$="deutsche-bank.svg"] { transform: translateY(-0.36rem); }
/* Google Cloud's wordmark sits 1.2px below the centre of its padded viewBox
   at the supported 1.00 scale. Align the text, rather than the cloud emblem,
   with the neighbouring wordmarks. */
.partner-strip__logo[src$="google-cloud.svg"] { transform: translateY(-0.075rem); }
.partner-strip__item:hover .partner-strip__logo,
.partner-strip__item:focus-within .partner-strip__logo { filter: none; opacity: 1; }
/* The track minimum above already steps the row down as the sheet narrows, so
   there are no per-breakpoint column counts to keep in step with the number of
   partners. */
@media (max-width: 599px) {
  .partner-strip__list { gap: 1.75rem 1.5rem; }
  .partner-strip__logo { max-height: calc(2rem * var(--partner-scale)); }
}

/* ============================================================
   CONTACT FORM — hairline fields, no boxes
============================================================ */
/* Email, telephone and postal address are three separate ways to reach fairCT,
   so they are set as three blocks. Run at the same leading as the lines inside
   them and the seven lines read as one undifferentiated list. */
.contact-details p { margin: 0; color: var(--ink-2); line-height: 1.7; }
.contact-details p + p { margin-top: 1.5rem; }
.contact-details a { border-bottom: 1px solid var(--rule); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.contact-details a:hover { color: var(--cyan-text); border-bottom-color: var(--cyan); }
.contact-details span { color: var(--ink-3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2.5rem; }
/* min-width:0 because a grid item's automatic minimum is its content's
   intrinsic width — an input's default size=20 — which is wider than the
   1fr track between 960px and 1099px and pushed the page sideways. */
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-label); font-weight: var(--w-medium);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-meta);
}
.field .req { color: var(--cyan); }
.field input, .field textarea {
  background: none; border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.55rem 0;
  font-size: 1.0625rem; font-weight: var(--w-light); color: var(--ink-1);
  transition: border-color 0.35s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-meta); font-weight: var(--w-light); }
.field input:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible) { outline: none; border-bottom-color: var(--cyan); }
.field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.6; }
.field input.is-invalid, .field textarea.is-invalid { border-bottom-color: var(--warn); }
.field-err { display: block; margin-top: 0.15rem; font-size: var(--fs-micro); color: var(--warn); letter-spacing: 0.02em; }
.form-foot { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }
.form-fine { font-size: var(--fs-micro); color: var(--ink-meta); max-width: 38ch; }
.form-status {
  display: none; margin-top: 1.75rem; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.form-status.is-ok { display: block; color: var(--navy); border-top-color: var(--cyan); }
.form-status.is-bad { display: block; color: var(--warn); border-top-color: var(--warn); }
@media (max-width: 899px) {
  /* Stacked, the details and the first field label butt together and the
     address reads as the caption of the Name field. */
  .contact-copy { margin-bottom: 3rem; }
}
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ============================================================
   FOOTER — light, hairline.
============================================================ */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--rule); margin-top: clamp(4rem, 8vw, 8rem); }

.newsletter { padding: clamp(3rem, 5vw, 4.5rem) 0; }
/* A sign-up is a footnote to the page, not a section of it. At full title size
   it competed with the news heading directly above it for the same attention;
   one step down in the existing scale puts it at the weight of the thing it
   actually is. */
.nl-copy .title { font-size: var(--fs-item); letter-spacing: -0.022em; line-height: 1.2; }
.nl-copy p { margin-top: 0.85rem; font-size: var(--fs-small); color: var(--ink-3); max-width: 40ch; }
@media (max-width: 899px) { .nl-col { margin-top: 2.25rem; } }
.nl-form { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.nl-form .field { flex: 1 1 14rem; min-width: 0; }
.nl-form .btn { flex: 0 0 auto; }
.nl-form .nl-consent { flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.65rem; align-items: start; margin-top: 0.25rem; }
.nl-consent input { margin: 0.45rem 0 0; accent-color: var(--navy); }
.nl-consent label { font-size: var(--fs-micro); font-weight: var(--w-light); letter-spacing: normal; line-height: 1.55; text-transform: none; color: var(--ink-meta); }
.nl-consent label a { color: var(--navy); border-bottom: 1px solid var(--rule); }
.nl-consent .field-err { grid-column: 1 / -1; }
.nl-consent input.is-invalid { outline: 2px solid var(--warn); outline-offset: 3px; }
.nl-status { display: none; margin-top: 1rem; font-size: var(--fs-small); color: var(--navy); }
.nl-status.is-shown { display: block; }
.nl-status.is-bad { color: var(--warn); }

.footer-cols {
  border-top: 1px solid var(--rule-soft);
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: 3fr 2fr 2fr 2fr 3fr; gap: 2.5rem;
}
.footer-brand img { height: 1.35rem; width: auto; }
.footer-brand p { margin-top: 1.5rem; font-size: var(--fs-micro); color: var(--ink-3); max-width: 30ch; line-height: 1.8; }
.footer-cols h2 {
  font-size: var(--fs-label); font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-meta);
  margin-bottom: 1.35rem;
}
.footer-cols li + li { margin-top: 0.7rem; }
.footer-cols a, .footer-cols span, .footer-cols button {
  font-size: var(--fs-small); font-weight: var(--w-light); color: var(--ink-3);
  transition: color 0.3s var(--ease);
  text-align: left;
}
.footer-cols a {
  /* The 4px vertical inset yields a 25px target for 14px footer text while
     its negative outer margin consumes the existing link-row whitespace. */
  display: inline-block; padding: 0.25rem 0; margin: -0.25rem 0;
}
.footer-cols a:hover, .footer-cols button:hover { color: var(--navy); }
.footer-legal { border-top: 1px solid var(--rule-soft); padding: 1.5rem 0 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.footer-legal p { font-size: var(--fs-micro); color: var(--ink-meta); }
.footer-social { display: flex; align-items: center; gap: 1.75rem; }
.footer-social a { color: var(--ink-meta); transition: color 0.3s var(--ease); }
.footer-social a:hover { color: var(--navy); }
.footer-social svg { width: 0.9rem; height: 0.9rem; display: block; }
.footer-social .f-url { font-size: var(--fs-micro); }
.mock-note {
  padding: 0 0 2.5rem;
  font-size: var(--fs-label); font-weight: var(--w-book);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-meta);
  opacity: 0.65;
}
@media (max-width: 959px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   HEADING FIELDS — a full-bleed printed cyan field at every page head.
   Its content stays in the existing sheet and grid.
============================================================ */
.hero .field-panel.on-field,
.page-head.on-field {
  --paper: var(--hl-field);
  --paper-2: var(--hl-field);
  --ink-1: var(--hl-ink);
  --ink-2: var(--hl-ink-2);
  --ink-3: var(--hl-ink-3);
  --ink-4: var(--hl-ink-3);
  --ink-meta: var(--hl-ink-3);
  --rule: var(--hl-rule);
  --rule-soft: color-mix(in srgb, var(--hl-ink) 15%, transparent);
  --rule-faint: color-mix(in srgb, var(--hl-ink) 12%, transparent);
  --navy: var(--hl-ink);
  --blue: var(--hl-ink-2);
  --cyan: var(--hl-ink-2);
  --cyan-text: var(--cyan);
  /* A solid button on the field is light ink on dark type — the inverse of one
     on paper. The hover tone has to invert with it: the paper value is a deep
     navy, which under this field's dark label left dark on dark and the label
     disappeared under the cursor. This is the field's own second ink, so the
     button lightens and tints as the cursor lands and the label stays legible. */
  --btn-hover: var(--hl-ink-2);
  background: var(--paper);
  color: var(--ink-2);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero .field-panel.on-field,
.page-head.on-field { padding: 0; }
.hero.hero--field { padding: 0; }
.field-panel.on-field {
  position: relative;
  z-index: 1;
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(2.25rem, 3.5vw, 3.5rem);
}
.hero .field-panel.on-field {
  /* Home alone is deliberately shorter. The display keeps its original scale;
     this removes only unused perimeter space now that the record lives below. */
  padding-top: clamp(2.875rem, 4.5vh, 4.5rem);
  padding-bottom: clamp(2rem, 3vw, 2.5rem);
}

/* ============================================================
   BANNER TREATMENTS — one quiet SVG layer is inserted in every heading field.
   It is clipped by the field, anchored to a tall 1440 x 900 composition, and
   therefore becomes a calmer crop in the short interior heads. White is the
   sole pigment: all variation comes from opacity against --hl-field.
============================================================ */
.banner-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.banner-effect svg { display: block; width: 100%; height: 100%; }
.banner-effect [data-effect="2"] { display: block; }
.banner-effect .plane-a { fill: #fff; opacity: 0.023; }
.banner-effect .plane-b { fill: #fff; opacity: 0.012; }
.banner-effect .plane-c { fill: #fff; opacity: 0.018; }
/* Motion is isolated to the SVG drawing groups. The type remains in its own
   sibling panel, with no promoted ancestor layer. */
@keyframes banner-drift-a {
  0%, 100% { transform: translate(-8px, -5px); }
  50% { transform: translate(8px, 5px); }
}
@keyframes banner-drift-b {
  0%, 100% { transform: translate(6px, -8px); }
  50% { transform: translate(-6px, 8px); }
}
@keyframes banner-lattice-sweep {
  0%, 100% { transform: translate(-7px, -7px); }
  50% { transform: translate(7px, 7px); }
}
.banner-effect .drift-a { animation: banner-drift-a 72s ease-in-out infinite; }
.banner-effect .drift-b { animation: banner-drift-b 84s ease-in-out infinite; }
.banner-effect .sweep { animation: banner-lattice-sweep 64s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .banner-effect .drift-a,
  .banner-effect .drift-b,
  .banner-effect .sweep { animation: none; }
  [data-rise] { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  /* System colours replace the paper/ink palette, but transparent rules and
     SVG currentColor otherwise disappear; these keep structure and the mark. */
  .rules-grid, .rules-grid i, .rule-top, .site-footer, .footer-cols,
  .footer-legal, .committee-table-wrap, .committee-table th, .committee-table td,
  .news-list, .news-row, .faq-item, .ledger, .ledger-row { border-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
  .nav-logo img, .footer-brand img, .partner-strip__logo { forced-color-adjust: none; }
}

/* The timeline stages sit below the section's prose, in the same reading
   column, so the ledger's own year column is the only thing in the margin. */
.timeline-stages { margin-top: clamp(2.5rem, 5vw, 4.5rem); }