/* ═══════════════════════════════════════════════════════════════════════════
   PALETTE — ink and signal
   ───────────────────────────────────────────────────────────────────────────
   Black and gold is out. It was inherited from the old splash rather than
   chosen, and gold-on-black reads as one of two things — budget luxury or
   hazard tape — neither of which is "the person who runs technology for a
   national investigative organisation".

   What replaces it is the palette that serious institutional and investigative
   work actually uses: a deep ink ground, a crisp near-white, and ONE signal
   colour used for state rather than for decoration. Confidence here comes from
   restraint and contrast, not from a precious-metal accent.

   Reference points are the FT, ProPublica, Bloomberg terminals — publications
   that have to look trustworthy on a story somebody will be sued over.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ground — deep ink, very slightly blue. Not black: black is flat and
     absolute, ink has depth and reads as considered. */
  --bg:        #080B12;
  --bg-raised: #0D121C;
  --bg-sunk:   #05070C;
  --panel:     #111826;

  --ink:   #F3F6FA;
  --ink-2: #9FADC0;
  --ink-3: #8E9CB2;
  --ink-4: #6E7C92;

  /* SIGNAL — one colour, used for state and emphasis, never for decoration.
     A precise blue reads technical and trustworthy where gold reads ornamental. */
  --signal:      #3D7DFF;
  --signal-lift: #6BA0FF;
  --signal-deep: #1B4FCC;
  --signal-wash: rgba(61,125,255,.13);
  --signal-line: rgba(61,125,255,.34);

  /* LIVE — the only red on the site, reserved for genuinely live state. */
  --live:      #FF4438;
  --live-wash: rgba(255,68,56,.14);
  --live-solid: #E02718;   /* red that white text can sit on: 4.69:1 */

  --line:        #161D2B;
  --line-2:      #1F2838;
  --line-strong: #37435A;

  /* Aliases so the older rules keep resolving to the new palette rather than
     to a gold that no longer exists. */
  --gold: var(--signal); --gold-2: var(--signal-deep); --gold-ink: var(--signal-lift);
  --gold-wash: var(--signal-wash); --gold-line: var(--signal-line);
  --leaf-1: var(--signal-lift); --leaf-2: var(--signal-deep);
  --leaf: linear-gradient(96deg, var(--signal-deep) 0%, var(--signal) 100%);
  --tally: var(--live); --tally-wash: var(--live-wash); --tally-ink: var(--live);

  --paper: #FFFFFF; --paper-2: #F2F5F9; --paper-ink: #070A11;
  --paper-ink2: #3E4A5C; --paper-line: #E4E9EF;

  --t-display: clamp(46px, 9.5vw, 168px);
  --t-huge:    clamp(34px, 6.4vw, 104px);
  --t-big:     clamp(27px, 3.9vw, 62px);
  --t-label:   clamp(9.5px, .72vw, 11.5px);
  --air: clamp(72px, 13vw, 220px);
}

.band { position: relative; isolation: isolate; padding-block: var(--air); }
.band + .band { border-top: 1px solid var(--line); }
.band--paper {
  --bg: var(--paper); --bg-raised: var(--paper); --bg-sunk: var(--paper-2);
  --ink: var(--paper-ink); --ink-2: var(--paper-ink2); --ink-3: #566173; --ink-4: #677284;
  --line: var(--paper-line); --line-2: #D8DEE7; --line-strong: #AEB8C6;
  --gold-ink: var(--signal-deep);
  background: var(--paper); color: var(--ink);
}
.band--leaf {
  --ink: #F3F6FA; --ink-2: #C6D6F5; --ink-3: #9FB6E4; --ink-4: #A6B9E2;
  --line: rgba(255,255,255,.18); --line-2: rgba(255,255,255,.26); --line-strong: rgba(255,255,255,.4);
  --gold-ink: #FFFFFF;
  background: linear-gradient(150deg, #17399A 0%, #10286F 58%, #0A1D55 100%);
  color: var(--ink);
}

/* ── type ──────────────────────────────────────────────────────────────── */
.eyebrow { font-size: var(--t-label); letter-spacing: .3em; color: var(--ink-4); gap: var(--s-4); }
.eyebrow::before { width: 18px; height: 1px; background: var(--signal); }
.band__title {
  font-size: var(--t-huge); font-weight: 800; letter-spacing: -.042em;
  line-height: .94; max-width: 16ch; text-wrap: balance;
}
.band__title em { font-style: normal; color: var(--signal-lift); }
.band--paper .band__title em { color: var(--signal-deep); }
.band__head { gap: var(--s-5); margin-bottom: clamp(var(--s-7), 6vw, 110px); }
.band__lede { font-size: clamp(17px, 1.5vw, 22px); color: var(--ink-3); max-width: 46ch; }

/* ── cards ─────────────────────────────────────────────────────────────── */
.card-x__link {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  display: grid; gap: var(--s-4); height: 100%;
}
.card-x__link::before { content: none; }
.card-x__shot { border-radius: 2px; aspect-ratio: 4/3; overflow: hidden; }
.card-x__shot img { filter: saturate(.94); transition: transform 1.2s var(--ease-out), filter .6s var(--ease-io); }
.card-x__link:hover .card-x__shot img { transform: scale(1.05); filter: saturate(1.06); }
.card-x__body { padding: 0; gap: var(--s-2); }
.card-x__cat { font-size: var(--t-label); letter-spacing: .26em; color: var(--signal-lift); }
.band--paper .card-x__cat { color: var(--signal-deep); }
.card-x__title {
  font-size: clamp(21px, 2.1vw, 33px); font-weight: 700; letter-spacing: -.028em;
  line-height: 1.04; color: var(--ink); transition: color var(--dur-2) var(--ease-io);
}
.card-x__link:hover .card-x__title { color: var(--signal-lift); }
.card-x__note { font-size: 15px; color: var(--ink-3); max-width: 42ch; }
.cards { grid-template-columns: repeat(2,1fr); gap: clamp(28px,4vw,72px) clamp(24px,3vw,56px); }
.card-x { grid-column: auto !important; }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }

/* ── other components ──────────────────────────────────────────────────── */
.about-band { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(var(--s-6),5vw,96px); align-items: center; }
.about-band__figure { border: 0; border-radius: 2px; overflow: hidden; }
.about-band__figure img { aspect-ratio: 4/5; }
.about-band__copy { max-width: 42ch; }
.about-band__copy p { font-size: 17px; line-height: 1.75; }

.hl__stats { background: none; border: 0; gap: clamp(24px,4vw,80px); }
.hl__cell { background: none; padding: 0; }
.hl__cell::after { content: none; }
.hl__n { font-size: var(--t-big); font-weight: 800; letter-spacing: -.05em; color: var(--ink);
         background: none; -webkit-text-fill-color: currentColor; }
.hl__n span { color: var(--signal-lift); -webkit-text-fill-color: currentColor; font-size: .34em; }
.hl__l { font-size: var(--t-label); letter-spacing: .22em; color: var(--ink-4); }
.hl { gap: clamp(var(--s-7),6vw,110px); }
.hl__names { font-size: clamp(17px,1.5vw,21px); color: var(--ink-3); max-width: 62ch; }
.hl__names b { color: var(--ink); font-weight: 500; }

.posts > li { border-top: 1px solid var(--line); }
.posts a { padding-block: clamp(24px,3vw,52px); grid-template-columns: 9rem minmax(0,1fr) auto; }
.posts a:hover { background: none; }
.posts__title { font-size: clamp(22px,2.4vw,38px); font-weight: 700; letter-spacing: -.03em; }
.posts a:hover .posts__title, .posts a:hover .posts__go { color: var(--signal-lift); }
.posts__date, .posts__go { font-size: var(--t-label); letter-spacing: .22em; color: var(--ink-4); }
.posts__desc { font-size: 15px; color: var(--ink-3); max-width: 52ch; }

.pressbar { background: none; border-bottom: 1px solid var(--line); }
.pressbar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                padding-block: var(--s-5); gap: clamp(20px,3.4vw,56px); }
.pressbar span, .pressbar a { color: var(--ink-4); }
.pressbar a:hover { color: var(--signal-lift); }
.pressbar img { filter: grayscale(1) brightness(2.4); opacity: .45; }
.pressbar__label { font-size: var(--t-label); letter-spacing: .3em; }

.btn { background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
       padding: 0 0 6px; color: var(--ink); font-size: var(--t-label); letter-spacing: .24em;
       background-image: none !important; box-shadow: none !important; }
.btn:hover { color: var(--signal-lift); }
.band--leaf .btn { color: #fff; }
.path { background: none; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink);
        font-size: var(--t-label); letter-spacing: .22em; padding: var(--s-5) 0; }
.path:hover { transform: none; box-shadow: none; color: var(--signal-lift); }
.paths { gap: 0 clamp(28px,4vw,72px); }

.hero__mark { font-size: var(--t-display); letter-spacing: -.05em; }
.hero__mark-b { color: var(--signal-lift); }
.hero__line { font-size: clamp(17px,1.7vw,26px); font-weight: 400; }
.hero__line em { color: var(--signal-lift); font-style: normal; font-weight: 700; }
.hero__sub { font-size: 15px; max-width: 44ch; }
.hero__tally { font-size: var(--t-label); letter-spacing: .3em; }
.hero::after { content: none; }

/* Orphaned decoration removed: the graticule corners and the canvas waveform
   referenced nothing else on the page and anchored to nothing. Decoration that
   is not part of a system is just noise with a rationale attached. */
.graticule, .hero__scope { display: none !important; }

/* ── book module ───────────────────────────────────────────────────────── */
/* These rules were dropped in the editorial pass and never replaced, so the
   book jacket, the testimonials and the path tiles have been rendering as bare
   text ever since. Restored, and re-fitted to the signal palette — the
   originals were built around the retired gold. */
.bookmod {
  display: grid; gap: clamp(var(--s-6), 5vw, var(--s-9));
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); align-items: center;
}
.bookmod__art {
  position: relative; justify-self: center; width: min(300px, 70vw); aspect-ratio: 5 / 7;
  transform: rotate(-3deg); filter: drop-shadow(0 30px 44px rgba(0,0,0,.42));
}
.bookmod__face {
  position: absolute; inset: 0 0 0 14px; background: #F2F4F8;
  border-radius: 0 3px 3px 0; display: grid; align-content: start; gap: var(--s-4);
  padding: clamp(18px, 3vw, 30px);
}
.bookmod__spine {
  position: absolute; inset: 0 auto 0 0; width: 14px; border-radius: 2px 0 0 2px;
  background: linear-gradient(to right, #0C1A44, #1B3F91 60%, #16337A);
}
.bookmod__kicker {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: #1B3F91;
}
.bookmod__title {
  font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #0B1020;
}
.bookmod__rule { width: 44px; height: 2px; background: #1B3F91; }
.bookmod__copy { display: grid; gap: var(--s-4); align-content: start; max-width: 52ch; }
.retailers { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.retailers span {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 7px var(--s-3);
}
@media (max-width: 54rem) { .bookmod { grid-template-columns: 1fr; } }

/* ── testimonials ──────────────────────────────────────────────────────── */
.says {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.say {
  display: grid; gap: var(--s-4); padding: clamp(22px, 2.4vw, 32px); align-content: start;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 2px;
}
.say__stars { color: var(--signal-deep); letter-spacing: .18em; font-size: 13px; }
.say__text { font-size: var(--t-sm); line-height: 1.62; color: var(--ink-2); }

/* ── path tiles ────────────────────────────────────────────────────────── */
.paths {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.path {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: clamp(15px, 1.7vw, 20px) clamp(17px, 1.9vw, 24px);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.20);
  border-radius: 2px; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background var(--dur-1) var(--ease-io), border-color var(--dur-1) var(--ease-io),
              transform var(--dur-2) var(--ease-out);
}
.path:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); transform: translateY(-2px); }