@charset "utf-8";
/* ===========================================================================
   ASSL - main stylesheet
   ---------------------------------------------------------------------------
   Written by hand, no framework, no build step. Order:
     1. Tokens      2. Reset       3. Typography   4. Grid & sections
     5. Primitives  6. Masthead    7. Hero         8. Blocks
     9. Pages      10. Forms      11. Footer      12. Motion & print
   The brand devices are the corner crosshair, the hairline rule, the
   mono index label and the terrain ridge. Everything else is spacing.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* Ink: near-black with a cold cast, so it never reads as flat grey. */
  --ink:        #090E14;
  --ink-2:      #0E151F;
  --ink-3:      #151F2C;
  --ink-4:      #1F2B3A;
  --graphite:   #2F3B4B;
  --slate:      #576474;
  --mist:       #97A2B0;
  --haze:       #C5CCD6;

  /* Paper: warm bone, so the site never looks like a default white page. */
  --paper:      #F5F3EE;
  --paper-2:    #EFEBE3;
  --paper-3:    #E6E1D6;
  --white:      #FFFFFF;

  /* Rules. Hairlines carry the whole layout, so they get real tokens. */
  --rule:       #DCD6C9;
  --rule-soft:  #E7E2D8;
  --rule-dark:  rgba(243, 240, 233, .14);
  --rule-dark-2:rgba(243, 240, 233, .07);

  /* Signal: gold. The ramp gives each ground the value it needs instead of
     asking one mid-tone to serve text, dark surfaces and fills alike. */
  --signal:     #B68510;
  --signal-2:   #D9AB3A;
  --signal-3:   #F2D27C;
  /* Small text needs the dark end of the ramp on paper; dark surfaces
     redefine it below to the light end. */
  --signal-text:#7B5900;
  --signal-ink: #5B4100;
  --signal-wash:#F6EED9;

  /* Mineral: the cool counterweight, for data and secondary marks. */
  --mineral:    #0E5A57;
  --mineral-2:  #1A837E;
  --mineral-3:  #42A9A3;
  --mineral-wash:#E2EDEB;

  /* Brass: used once or twice a page, never more. */
  --brass:      #A8802B;

  --focus:      #B48410;

  /* Type */
  --sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif:"Roboto Serif", Georgia, "Times New Roman", serif;

  /* A single modular scale, clamped. */
  --fs-micro: 11px;
  --fs-label: 12px;
  --fs-small: clamp(13px, .82rem + .1vw, 14px);
  --fs-body:  clamp(15.5px, .93rem + .18vw, 17.5px);
  --fs-lead:  clamp(18px, 1.02rem + .42vw, 23px);
  /* Kept a clear step below --fs-lead: at 1280 the two were landing within
     half a pixel of each other, so a card title and a lead paragraph were
     the same size and only the weight told them apart. */
  --fs-h5:    clamp(16.5px, .96rem + .28vw, 19.5px);
  --fs-h4:    clamp(20px, 1.05rem + .62vw, 27px);
  --fs-h3:    clamp(25px, 1.22rem + 1.1vw, 38px);
  --fs-h2:    clamp(31px, 1.3rem + 2.1vw, 58px);
  --fs-h1:    clamp(40px, 1.3rem + 4.3vw, 90px);
  --fs-mega:  clamp(54px, 1rem + 7.6vw, 150px);

  /* Rhythm */
  --pad-sec:   clamp(80px, 8.2vw, 160px);
  --pad-sec-s: clamp(56px, 5.6vw, 104px);
  --gutter:    clamp(20px, 4.4vw, 56px);
  --maxw:      1360px;
  --maxw-text: 70ch;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .18s;
  --t:         .34s;
  --t-slow:    .72s;

  --hdr-h: 76px;

  /*
   * --vw is the viewport width without the scrollbar; script keeps it
   * current and it falls back to 100vw. --edge is the distance from the
   * inside edge of .wrap out to the edge of the viewport, which is what any
   * full-bleed element needs to travel. Percentages cannot be used for this:
   * inside a grid they resolve against the grid area, not the container.
   */
  --vw: 100vw;
  --edge: calc((var(--vw) - min(var(--vw), var(--maxw))) / 2 + var(--gutter));
}

@media (min-width: 900px) { :root { --hdr-h: 88px; } }

/* ---------------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* A class that sets display beats the browser's own [hidden] rule, which is
   how an empty 303x32 alert box came to sit under every form on the site. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 28px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg { fill: none; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

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

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

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 300;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px;
  font: 500 var(--fs-label)/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}

.h1, h1 { font-size: var(--fs-h1); letter-spacing: -.034em; line-height: .98; }
.h2, h2 { font-size: var(--fs-h2); letter-spacing: -.028em; line-height: 1.02; }
.h3, h3 { font-size: var(--fs-h3); letter-spacing: -.022em; line-height: 1.1; }
.h4, h4 { font-size: var(--fs-h4); letter-spacing: -.016em; line-height: 1.16; }
.h5, h5 { font-size: var(--fs-h5); letter-spacing: -.01em; line-height: 1.3; font-weight: 600; }

.mega {
  font-size: var(--fs-mega);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .88;
}

/* The mono index label. Appears above almost every block on the site. */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1;
}
.label::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.label--bare::before { display: none; }
.label--signal { color: var(--signal-text); }
.label--on-dark { color: var(--haze); }
.label--on-dark.label--signal { color: var(--signal-3); }

/* A bare numeral used as an index: 01, 02 ... */
.idx {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.48;
  letter-spacing: -.012em;
  color: var(--ink-3);
  text-wrap: pretty;
}
.lead--muted { color: var(--graphite); }

.prose p { margin-bottom: 1.15em; max-width: var(--maxw-text); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose--wide p { max-width: none; }

.muted  { color: var(--slate); }
.quiet  { color: var(--graphite); }
.on-dark .muted,
.on-dark .quiet { color: var(--mist); }

.serif { font-family: var(--serif); font-weight: 400; }

.pull {
  font-family: var(--serif);
  font-size: clamp(22px, 1.1rem + 1.4vw, 36px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.pull em { font-style: italic; }

/* Links inside running text. */
.prose a:not(.btn):not(.lk),
.rte a {
  color: var(--ink);
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.prose a:not(.btn):not(.lk):hover,
.rte a:hover { color: var(--signal); }

/* ---------------------------------------------------------------------------
   4. GRID & SECTIONS
   --------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--tight { max-width: 1060px; }
.wrap--text  { max-width: 820px; }
.wrap--wide  { max-width: 1560px; }

.sec { position: relative; padding-block: var(--pad-sec); }
.sec--s  { padding-block: var(--pad-sec-s); }
.sec--t0 { padding-top: 0; }
.sec--b0 { padding-bottom: 0; }

.sec--paper  { background: var(--paper); }
.sec--paper2 { background: var(--paper-2); }
.sec--white  { background: var(--white); }
.sec--ink    { background: var(--ink); color: var(--haze); }
.sec--ink2   { background: var(--ink-2); color: var(--haze); }

.on-dark, .sec--ink, .sec--ink2, .hero, .phero, .cta, .foot { color: var(--haze); }

/* On a dark ground the muted colour has to be a different colour, not the
   same one turned down. #576474 measures 3.4:1 against the ink, which fails
   at the sizes these labels are set in, and they are the smallest type on
   the site. Redefining the two tokens inside dark surfaces moves every mono
   label, every dt, every index numeral and every footer heading at once,
   rather than chasing forty separate rules. */
.on-dark, .sec--ink, .sec--ink2, .hero, .phero, .cta, .foot,
.panel, .drawer, .dpanel, .band, .cell, .post__fig--blank, .person__mono {
  --graphite: #ACB5C1;              /* secondary text,  9.2:1 on --ink */
  --slate:    #97A2B0;              /* labels,          7.5:1 on --ink */
  --signal-text: var(--signal-3);   /* signal as text,  8.0:1 on --ink */
}

/* Any heading on a dark surface. Kept as one list so a new dark section
   cannot reintroduce the dark-on-dark bug. */
.on-dark :is(h1, h2, h3, h4, h5),
.sec--ink :is(h1, h2, h3, h4, h5),
.sec--ink2 :is(h1, h2, h3, h4, h5),
.hero :is(h1, h2, h3, h4, h5),
.phero :is(h1, h2, h3, h4, h5),
.cta :is(h1, h2, h3, h4, h5),
.foot :is(h1, h2, h3, h4, h5),
.panel :is(h1, h2, h3, h4, h5),
.drawer :is(h1, h2, h3, h4, h5) { color: var(--paper); }

.sec--ink .lead, .sec--ink2 .lead, .on-dark .lead,
.hero .lead, .phero .lead, .cta .lead { color: var(--haze); }
.sec--ink .label, .sec--ink2 .label, .phero .label, .hero .label { color: var(--mist); }
.sec--ink .label--signal, .sec--ink2 .label--signal,
.phero .label--signal, .hero .label--signal { color: var(--signal-2); }

/* The footer's own small headings stay as set further down. */
.foot h3 { color: var(--slate); }

/* Rule across the top or bottom of a section. */
.sec--rule-t { border-top: 1px solid var(--rule); }
.sec--rule-b { border-bottom: 1px solid var(--rule); }
.sec--ink.sec--rule-t, .sec--ink2.sec--rule-t { border-top-color: var(--rule-dark); }
.sec--ink.sec--rule-b, .sec--ink2.sec--rule-b { border-bottom-color: var(--rule-dark); }

/* 12 column grid. */
.g {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}
.g--tight { gap: clamp(16px, 2vw, 28px); }
.g--rows  { row-gap: clamp(32px, 4vw, 64px); }

.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}
.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}
.start2{grid-column-start:2}.start3{grid-column-start:3}
.start4{grid-column-start:4}.start5{grid-column-start:5}
.start6{grid-column-start:6}.start7{grid-column-start:7}
.start8{grid-column-start:8}.start9{grid-column-start:9}
.start10{grid-column-start:10}.start11{grid-column-start:11}

@media (max-width: 1080px) {
  .c3, .c4, .c5 { grid-column-end: span 6; }
  .c7 { grid-column-end: span 8; }
  [class*="start"] { grid-column-start: auto; }
}
@media (max-width: 900px) {
  .g { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { grid-column-end: span 6; }
  .c3 { grid-column-end: span 3; }
  [class*="start"] { grid-column-start: auto; }
}
@media (max-width: 640px) {
  .g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c2, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { grid-column-end: span 2; }
  .c1, .c3 { grid-column-end: span 2; }
}

/* The standard section head: label, headline, optional note on the right. */
.shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  padding-bottom: clamp(36px, 4.4vw, 68px);
}
.shead--stack { grid-template-columns: minmax(0, 1fr); }
.shead__title { max-width: 22ch; }
.shead__title--wide { max-width: 32ch; }
.shead__label { display: block; margin-bottom: clamp(18px, 2vw, 28px); }
.shead__note  { color: var(--slate); font-size: var(--fs-small); line-height: 1.6; }
.on-dark .shead__note { color: var(--mist); }
@media (max-width: 900px) {
  .shead { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------------------------------------------------------------------------
   5. PRIMITIVES
   --------------------------------------------------------------------------- */

/* --- Buttons. Square, hairline, no shadow, no gradient. ------------------- */
.btn {
  --b-fg: var(--paper);
  --b-bg: var(--ink);
  --b-bd: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 24px;
  background: var(--b-bg);
  color: var(--b-fg);
  border: 1px solid var(--b-bd);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.btn .ic { width: 16px; height: 16px; flex: none; transition: transform var(--t) var(--ease-out); }
/* The wipe: a block of signal sweeping in from the left. */
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease-out);
  z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--signal); }
.btn:hover .ic { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--ghost { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); }

.btn--line  { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--rule); }
.btn--line:hover, .btn--line:focus-visible { color: var(--ink); }

.btn--light { --b-bg: var(--paper); --b-fg: var(--ink); --b-bd: var(--paper); }
.btn--on-dark { --b-bg: transparent; --b-fg: var(--paper); --b-bd: rgba(243,240,233,.3); }
.btn--on-dark:hover, .btn--on-dark:focus-visible { color: var(--ink); }

.btn--signal { --b-bg: var(--signal); --b-fg: var(--ink); --b-bd: var(--signal); }
.btn--signal::before { background: var(--ink); }
.btn--signal:hover, .btn--signal:focus-visible { color: #fff; border-color: var(--ink); }

.btn--sm { padding: 11px 18px; font-size: var(--fs-micro); }
.btn--lg { padding: 18px 30px; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn[disabled], .btn.is-busy { opacity: .5; pointer-events: none; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- Text link with a rule that draws on hover. --------------------------- */
.lk {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 7px;
  line-height: 1;
}
.lk .ic { width: 15px; height: 15px; transition: transform var(--t) var(--ease-out); }
.lk::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink);
  transform: scaleX(1); transform-origin: right;
  transition: transform var(--t) var(--ease-out);
}
.lk:hover::after, .lk:focus-visible::after { transform: scaleX(0); }
.lk:hover .ic { transform: translateX(5px); }
.lk--signal { color: var(--signal-text); }
.lk--signal::after { background: var(--signal); }
.on-dark .lk, .sec--ink .lk, .sec--ink2 .lk, .hero .lk, .phero .lk, .cta .lk, .foot .lk, .band .lk, .panel .lk, .drawer .lk { color: var(--paper); }
.on-dark .lk::after, .sec--ink .lk::after, .sec--ink2 .lk::after, .hero .lk::after, .phero .lk::after, .cta .lk::after, .foot .lk::after, .band .lk::after, .panel .lk::after, .drawer .lk::after { background: rgba(243, 240, 233, .45); }

/* --- Tag / pill. ---------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1;
  background: transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
a.tag:hover { border-color: var(--ink); color: var(--ink); }
.tag--on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag--signal { border-color: var(--signal); color: var(--signal-text); }
.tag--mineral { border-color: var(--mineral-2); color: var(--mineral); }
.tag--dark { border-color: var(--rule-dark); color: var(--haze); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Corner crosshairs: four small ticks bracketing a block. -------------- */
.xh { position: absolute; inset: 0; pointer-events: none; }
.xh i {
  position: absolute; width: 9px; height: 9px;
  border: 0 solid var(--signal);
  opacity: .9;
}
.xh i:nth-child(1) { top: -1px; left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.xh i:nth-child(2) { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.xh i:nth-child(3) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.xh i:nth-child(4) { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }

/* --- The field: what sits behind a dark band. -----------------------------
   This was a survey grid. Graph paper is the default texture of every
   technology template on the internet: at any size it reads as a wireframe
   rather than as a finished surface, and it fights the photographs. What
   replaced it is what makes dark ink look printed rather than switched off
   - a fine, even grain and a single soft fall of light from above the
   frame. Nothing tiles visibly and there is not a straight line in it.
   -------------------------------------------------------------------------- */
.grat {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  background-image:
    radial-gradient(124% 88% at 50% -18%, rgba(243, 240, 233, .085), rgba(243, 240, 233, .025) 44%, transparent 70%),
    radial-gradient(58% 54% at 88% 6%, rgba(228, 103, 47, .075), transparent 62%);
  background-repeat: no-repeat;
}
/* The grain itself, kept on its own layer so its weight can be tuned
   per surface without disturbing the light. */
.grat::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .055;
}
.grat--light {
  background-image:
    radial-gradient(118% 82% at 50% -8%, rgba(9, 14, 20, .045), transparent 64%);
}
.grat--light::after { opacity: .038; }
.grat--fine::after { background-size: 150px 150px; opacity: .07; }

/* --- The terrain ridge divider. ------------------------------------------ */
.terrain {
  position: relative;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}
.terrain svg { width: 100%; height: clamp(54px, 7vw, 110px); display: block; }
.terrain__l { stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.terrain--quiet  .terrain__l { stroke: var(--rule); }
.terrain--quiet  .terrain__l--2 { stroke: var(--rule-soft); }
.terrain--quiet  .terrain__l--3 { stroke: var(--rule-soft); }
.terrain--dark   .terrain__l { stroke: var(--rule-dark); }
.terrain--dark   .terrain__l--2,
.terrain--dark   .terrain__l--3 { stroke: var(--rule-dark-2); }
.terrain--signal .terrain__l--1 { stroke: var(--signal); opacity: .9; }
/* The footer ridge carries a single thread of the mark's gold, which is the
   first of the three places gold appears and all three are in this one zone. */
.foot .terrain--dark .terrain__l--2 { stroke: var(--brass); opacity: .5; }
.terrain--signal .terrain__l--2 { stroke: var(--mineral-2); opacity: .55; }
.terrain--signal .terrain__l--3 { stroke: var(--brass); opacity: .4; }
.terrain--flip svg { transform: scaleY(-1); }

/* Animated draw-in when the ridge enters the viewport. */
.terrain__l {
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
}
.reveal-on .terrain__l,
.terrain.is-in .terrain__l { stroke-dashoffset: 0; transition: stroke-dashoffset 2.1s var(--ease-out); }
.terrain.is-in .terrain__l--2 { transition-delay: .14s; }
.terrain.is-in .terrain__l--3 { transition-delay: .28s; }

/* --- Hairline list: the house alternative to a grid of cards. ------------- */
.rows { border-top: 1px solid var(--rule); }
.rows > * { border-bottom: 1px solid var(--rule); }
.on-dark .rows, .sec--ink .rows, .sec--ink2 .rows { border-top-color: var(--rule-dark); }
.on-dark .rows > *, .sec--ink .rows > *, .sec--ink2 .rows > * { border-bottom-color: var(--rule-dark); }

/* --- Figures strip. ------------------------------------------------------- */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.figs__i {
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 34px);
  border-left: 1px solid var(--rule-dark);
}
.figs__i:first-child { border-left: 0; padding-left: 0; }
.figs__n {
  font-size: clamp(38px, 1rem + 3.4vw, 68px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
}
.figs__n sup { font-size: .42em; color: var(--signal-2); top: -.8em; position: relative; }
.figs__l {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.4;
}
.figs__note { margin-top: 6px; font-size: var(--fs-small); color: var(--mist); line-height: 1.45; }
@media (max-width: 860px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs__i:nth-child(odd) { border-left: 0; padding-left: 0; }
  .figs__i:nth-child(n+3) { border-top: 1px solid var(--rule-dark); }
}

/* --- Scroll-reveal. ------------------------------------------------------- */
[data-rv] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--rv-d, 0ms);
  will-change: opacity, transform;
}
[data-rv].is-in { opacity: 1; transform: none; }
[data-rv="fade"] { transform: none; }
[data-rv="rule"] {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-out);
  transition-delay: var(--rv-d, 0ms);
}
[data-rv="rule"].is-in { clip-path: inset(0 0 0 0); }
.no-js [data-rv] { opacity: 1; transform: none; clip-path: none; }
/* ---------------------------------------------------------------------------
   6. MASTHEAD
   There is no utility bar. The masthead floats over a dark hero, then
   resolves to paper on scroll. The menu is a directory panel, not a
   grid of cards.
   --------------------------------------------------------------------------- */
.mast {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--hdr-h);
  color: var(--paper);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
.mast__in {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
/* Solid state: after scroll, on inner pages, or when a panel is open. */
.mast.is-solid,
.mast.is-open,
body.hdr-solid .mast {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--rule);
}
.mast.is-open { border-bottom-color: transparent; }
.mast.is-hidden { transform: translateY(-100%); }
.mast { transition-property: background-color, color, border-color, transform; }

/* --- Lockup --------------------------------------------------------------- */
.lockup { display: inline-flex; align-items: center; gap: 13px; color: inherit; }
/* The device is a raster now, not a drawn glyph, so it is sized by its box
   and told to fit inside it. */
/* The device is full-colour artwork with its own gold outline. It is placed,
   not blended: a screen blend drops the dark half of it out and the mark
   dissolves on the paper surfaces entirely. */
.lockup__mark { display: block; width: 36px; height: 37px; flex: none; }
.lockup__mark img { width: 100%; height: 100%; object-fit: contain; }
.blogo { display: block; }
.blogo img { width: 100%; height: auto; }
.lockup__type { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lockup__word {
  font-size: 21px; font-weight: 600; letter-spacing: .02em; line-height: 1;
  color: inherit;
}
.lockup__sub {
  font-family: var(--mono);
  /* It is the registered company name: below ten pixels at this tracking it
     stops being readable and starts being texture. */
  font-size: 10.5px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1; opacity: .72; white-space: nowrap;
}
@media (max-width: 420px) { .lockup__sub { display: none; } }

/* --- Primary nav ---------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: 2px; }
@media (max-width: 1080px) { .nav { display: none; } }

.nav__b {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  line-height: 1;
  transition: opacity var(--t-fast) var(--ease);
}
.nav__b .ic { width: 12px; height: 12px; opacity: .55; transition: transform var(--t) var(--ease); }
.nav__b::after {
  content: "";
  position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.nav__b:hover::after, .nav__b:focus-visible::after, .nav__b.is-on::after { transform: scaleX(1); }
.nav__b[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav__b[aria-current="page"]::after { transform: scaleX(1); background: var(--signal); }

.mast__right { display: flex; align-items: center; gap: 14px; }
.mast__cta { display: inline-flex; }
@media (max-width: 1080px) { .mast__cta { display: none; } }
.mast .btn--on-dark { --b-bd: rgba(243,240,233,.32); }
.mast.is-solid .btn--on-dark,
.mast.is-open .btn--on-dark,
body.hdr-solid .mast .btn--on-dark { --b-fg: var(--ink); --b-bd: var(--rule); }

/* --- Mega panel ----------------------------------------------------------- */
.panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink);
  color: var(--haze);
  border-top: 1px solid var(--rule-dark);
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height var(--t) var(--ease), visibility 0s linear var(--t);
}
.panel.is-open {
  max-height: 86vh;
  visibility: visible;
  transition: max-height .46s var(--ease-out), visibility 0s;
  box-shadow: 0 34px 60px -28px rgba(9, 14, 20,.5);
}
.panel__in {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  padding-block: clamp(34px, 3.4vw, 54px) clamp(30px, 3vw, 46px);
}
.panel__aside { border-right: 1px solid var(--rule-dark); padding-right: clamp(24px, 3vw, 50px); }
.panel__aside .label { color: var(--mist); }
.panel__blurb {
  margin-top: 20px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--mist);
  max-width: 34ch;
}
.panel__foot { margin-top: 26px; }

/* Directory: divisions down the left of the panel body, items beside. */
.pdir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3vw, 56px); }
.pdir__grp { padding-block: 2px; }
.pdir__h {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rule-dark);
}
.pdir__h b { font-size: 15px; font-weight: 600; color: var(--paper); letter-spacing: -.01em; }
.pdir__h .idx { color: var(--signal-2); }
.pdir__h span.v { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--slate); margin-left: auto; }
.pdir ul { margin-bottom: 26px; }
.pdir a {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 0 8px 0;
  font-size: 15px;
  color: var(--haze);
  line-height: 1.35;
  transition: color var(--t-fast) var(--ease), padding-left var(--t) var(--ease-out);
}
.pdir a::before {
  content: "";
  width: 0; height: 1px; background: var(--signal);
  transition: width var(--t) var(--ease-out);
  flex: none;
}
.pdir a:hover, .pdir a:focus-visible { color: var(--paper); padding-left: 2px; }
.pdir a:hover::before, .pdir a:focus-visible::before { width: 14px; }
@media (max-width: 1240px) { .pdir { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1140px) { .panel__in { grid-template-columns: minmax(0, 1fr); } .panel__aside { border-right: 0; border-bottom: 1px solid var(--rule-dark); padding-right: 0; padding-bottom: 26px; } }

/* Simple two-column panel used by About and Insights. */
.plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3vw, 56px); }
.plist a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-dark);
  color: var(--haze);
  transition: color var(--t-fast) var(--ease);
}
.plist a:hover { color: var(--paper); }
.plist b { display: block; font-size: 15px; font-weight: 600; color: var(--paper); margin-bottom: 3px; }
.plist span { font-size: var(--fs-small); color: var(--mist); line-height: 1.5; display: block; }
@media (max-width: 760px) { .plist { grid-template-columns: minmax(0, 1fr); } }

.panel__scrim {
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 110;
  background: rgba(9, 14, 20,.42);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}
.panel__scrim.is-on { opacity: 1; visibility: visible; transition: opacity var(--t) var(--ease), visibility 0s; }

/* --- Mobile toggle + drawer ---------------------------------------------- */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid currentColor;
  color: inherit;
  position: relative;
}
@media (max-width: 1080px) { .burger { display: inline-flex; } }
.burger i {
  position: absolute; left: 12px; width: 20px; height: 1px;
  background: currentColor;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger i:nth-child(1) { top: 16px; }
.burger i:nth-child(2) { top: 21.5px; }
.burger i:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 115;
  background: var(--ink);
  color: var(--haze);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s; }
.drawer__in { padding: 10px 0 48px; }
.dacc { border-bottom: 1px solid var(--rule-dark); }
.dacc__b {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 0;
  font-family: var(--mono);
  font-size: 13px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--paper);
  text-align: left;
}
.dacc__b .ic { width: 16px; height: 16px; opacity: .6; transition: transform var(--t) var(--ease); }
.dacc__b[aria-expanded="true"] .ic { transform: rotate(45deg); }
.dacc__p { display: none; padding-bottom: 14px; }
.dacc__p.is-open { display: block; }
.dacc__p h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal-2); font-weight: 500; margin: 14px 0 8px;
}
.dacc__p a {
  display: block; padding: 10px 0 10px 14px;
  border-left: 1px solid var(--rule-dark);
  color: var(--haze); font-size: 15px;
}
.dacc__p a:hover { color: var(--paper); border-left-color: var(--signal); }
.drawer__foot { padding-top: 30px; display: grid; gap: 10px; }
.drawer__meta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule-dark); display: grid; gap: 8px; }
.drawer__meta a { display: inline-flex; align-items: center; gap: 10px; color: var(--mist); font-size: var(--fs-small); }
.drawer__meta a:hover { color: var(--paper); }
.drawer__meta .ic { width: 16px; height: 16px; color: var(--signal-2); }

/* --- Reading progress ----------------------------------------------------- */
.prog {
  position: fixed; left: 0; top: 0; z-index: 130;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--signal);
}

/* ---------------------------------------------------------------------------
   7. HERO
   One eyebrow, two lines, one sentence, two buttons. Nothing else.
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--haze);
  padding-top: calc(var(--hdr-h) + clamp(64px, 9vh, 130px));
  padding-bottom: clamp(60px, 8vh, 120px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .3;
  filter: grayscale(1) contrast(1.08) brightness(.72);
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 14, 20,.94) 0%, rgba(9, 14, 20,.72) 42%, rgba(9, 14, 20,.97) 100%),
    radial-gradient(120% 78% at 14% 22%, rgba(200,73,31,.14) 0%, transparent 58%),
    radial-gradient(90% 64% at 88% 78%, rgba(14,90,87,.17) 0%, transparent 62%);
}
.hero .grat { z-index: -1; }

/* The scan line: one slow pass of light across the field. */
.hero__scan {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(228,103,47,.09) 46%, rgba(243,240,233,.16) 50%, rgba(228,103,47,.09) 54%, transparent 100%);
  width: 46%;
  transform: translateX(-120%);
  animation: scan 13s var(--ease) 1.6s infinite;
  mix-blend-mode: screen;
}
@keyframes scan {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(340%); }
  100% { transform: translateX(340%); }
}

.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); }
.hero__eyebrow { margin-bottom: clamp(26px, 3.2vw, 44px); }
.hero__h {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.042em;
  color: var(--paper);
  max-width: 18ch;
  margin-bottom: clamp(24px, 2.6vw, 38px);
}
.hero__h em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--signal-3);
}
.hero__p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--haze);
  max-width: 46ch;
  margin-bottom: clamp(32px, 3.4vw, 48px);
  text-wrap: pretty;
}
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* The strip of signals beneath the hero: measured, not boastful. */
.hero__rail {
  margin-top: clamp(52px, 7vh, 100px);
  padding-top: clamp(22px, 2.4vw, 34px);
  border-top: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 42px);
}
.hero__rail div {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  line-height: 1.5;
  display: flex; gap: 10px; align-items: flex-start;
}
.hero__rail .idx { color: var(--signal-2); flex: none; }
@media (max-width: 860px) { .hero__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } }
@media (max-width: 440px) { .hero__rail { grid-template-columns: minmax(0, 1fr); } }

/* The small scroll cue. */
.hero__cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 2;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--slate);
}
.hero__cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--slate), transparent); }
.hero__cue i::after {
  content: ""; display: block; width: 1px; height: 12px; background: var(--signal-2);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(26px); opacity: 0 } }
@media (max-width: 900px) { .hero__cue { display: none; } }

/* Inner-page hero: shorter, still dark, with breadcrumbs. */
.phero {
  position: relative;
  background: var(--ink);
  color: var(--haze);
  padding-top: calc(var(--hdr-h) + clamp(52px, 6.4vw, 96px));
  padding-bottom: clamp(48px, 5.6vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.phero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 14, 20,.96), rgba(9, 14, 20,.88) 55%, rgba(9, 14, 20,.99)),
    radial-gradient(100% 70% at 82% 0%, rgba(14,90,87,.2), transparent 60%),
    radial-gradient(80% 60% at 6% 90%, rgba(200,73,31,.12), transparent 60%);
}
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .24; filter: grayscale(1) brightness(.8); }
.phero__h { max-width: 18ch; margin-bottom: clamp(18px, 2vw, 26px); }
.phero__p { max-width: 54ch; color: var(--haze); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
@media (max-width: 900px) { .phero__grid { grid-template-columns: minmax(0, 1fr); } }
.phero__meta { display: grid; gap: 14px; }
.phero__meta div { display: flex; gap: 14px; align-items: baseline; border-top: 1px solid var(--rule-dark); padding-top: 12px; }
.phero__meta dt, .phero__meta b {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .15em; text-transform: uppercase;
  color: var(--slate); flex: none; width: 92px; font-weight: 500;
}
.phero__meta dd, .phero__meta span { margin: 0; font-size: var(--fs-small); color: var(--haze); line-height: 1.5; }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-bottom: clamp(26px, 3vw, 44px);
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate);
}
.crumbs a { color: var(--mist); transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--signal-2); }
.crumbs i { opacity: .45; font-style: normal; }
.crumbs span[aria-current] { color: var(--haze); }
/* ---------------------------------------------------------------------------
   8. BLOCKS
   --------------------------------------------------------------------------- */

/* --- Divisions. Four big hairline rows, each opening on hover. ------------ */
.divs { border-top: 1px solid var(--rule); }
.divrow {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1.05fr) minmax(0, 1.25fr) 150px;
  gap: clamp(18px, 2.6vw, 48px);
  align-items: start;
  padding: clamp(32px, 3.6vw, 56px) 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--t) var(--ease);
}
.divrow::before {
  content: "";
  position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 0; bottom: 0;
  background: var(--paper-2);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  z-index: 0;
}
.divrow:hover::before { opacity: 1; }
.divrow > * { position: relative; z-index: 1; }
.divrow__no { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; color: var(--signal-text); padding-top: 7px; }
.divrow__name { display: flex; flex-direction: column; gap: 12px; }
.divrow__name h3 { font-size: var(--fs-h3); letter-spacing: -.03em; }
.divrow__verb {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate);
}
.divrow__body { color: var(--graphite); font-size: var(--fs-small); line-height: 1.65; max-width: 52ch; }
.divrow__body .lead { font-size: var(--fs-body); color: var(--ink-3); margin-bottom: 12px; }
.divrow__glyph { justify-self: end; color: var(--mist); transition: color var(--t) var(--ease), transform var(--t-slow) var(--ease-out); }
.divrow:hover .divrow__glyph { color: var(--mineral-2); transform: translateY(-3px); }
.divrow__glyph .glyph { width: 86px; height: 86px; }
.divrow__go { grid-column: 2 / -1; margin-top: 20px; }
@media (max-width: 1080px) {
  .divrow { grid-template-columns: 56px minmax(0, 1fr) 76px; }
  .divrow__body { grid-column: 2; }
  .divrow__glyph { grid-row: 1 / span 2; grid-column: 3; }
  .divrow__glyph .glyph { width: 60px; height: 60px; }
  .divrow__go { grid-column: 2 / 3; }
}
@media (max-width: 560px) {
  .divrow { grid-template-columns: 40px minmax(0, 1fr); }
  .divrow__glyph { display: none; }
  .divrow__go { grid-column: 1 / -1; }
}

/* --- Capability rows. The ten, as an index. -------------------------------- */
.caps { border-top: 1px solid var(--rule); }
.cap {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.2fr) 48px;
  gap: clamp(16px, 2.4vw, 44px);
  align-items: center;
  padding: clamp(24px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--t) var(--ease-out);
}
.cap::before {
  content: "";
  position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: -1px; bottom: -1px;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t) var(--ease-out);
  z-index: 0;
}
.cap:hover::before, .cap:focus-within::before { transform: scaleY(1); }
.cap > * { position: relative; z-index: 1; }
.cap:hover, .cap:focus-within { padding-left: 14px; }
.cap__no { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; color: var(--slate); transition: color var(--t) var(--ease); }
.cap__t { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -.018em; color: var(--ink); line-height: 1.22; transition: color var(--t) var(--ease); }
.cap__t a::after { content: ""; position: absolute; inset: 0; }
.cap__d { font-size: var(--fs-small); color: var(--graphite); line-height: 1.58; transition: color var(--t) var(--ease); }
.cap__go { justify-self: end; color: var(--haze); transition: color var(--t) var(--ease), transform var(--t) var(--ease-out); }
.cap__go .ic { width: 20px; height: 20px; }
.cap:hover .cap__no { color: var(--signal-2); }
.cap:hover .cap__t  { color: var(--paper); }
.cap:hover .cap__d  { color: var(--mist); }
.cap:hover .cap__go { color: var(--signal-2); transform: translateX(6px); }
.cap__div {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate); display: block; margin-bottom: 7px; transition: color var(--t) var(--ease);
}
.cap:hover .cap__div { color: var(--signal-2); }
@media (max-width: 900px) {
  .cap { grid-template-columns: 46px minmax(0, 1fr) 28px; }
  .cap__d { grid-column: 2; margin-top: 8px; }
  .cap__go { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
}
@media (max-width: 480px) {
  .cap { grid-template-columns: 34px minmax(0, 1fr); }
  .cap__go { display: none; }
}

/* --- Approach: a numbered hairline sequence. ------------------------------ */
.steps { counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(18px, 2.6vw, 48px);
  padding: clamp(28px, 3vw, 44px) 0;
  align-items: start;
}
.step__no {
  /* Was --haze, a colour for dark grounds, on paper: 1.5:1, which is to say
     invisible. These numerals carry the stage number, so they have to be
     read, not merely sensed. */
  font-family: var(--mono); font-size: clamp(22px, 2vw, 34px); font-weight: 400;
  letter-spacing: -.03em; color: var(--slate); line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--t) var(--ease);
}
.step:hover .step__no { color: var(--signal-text); }
.step h3 { font-size: var(--fs-h4); margin-bottom: 10px; }
.step__line { font-family: var(--serif); font-size: var(--fs-lead); font-style: italic; color: var(--graphite); line-height: 1.4; }
.step__body { color: var(--graphite); font-size: var(--fs-small); line-height: 1.68; max-width: 52ch; }
.step__out { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
@media (max-width: 900px) {
  .step { grid-template-columns: 56px minmax(0, 1fr); }
  /* The stage has three children. In two columns the third wrapped under the
     numeral, into a 40px gutter, and set itself six characters to a line.
     It belongs under the heading, in the second column. */
  .step > :last-child { grid-column: 2; }
  .step__no { font-size: 20px; padding-top: 4px; }
}

/* --- Principles: a two-column hairline table. ----------------------------- */
.prins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 80px); }
.prin {
  padding: clamp(26px, 2.8vw, 38px) 0;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px;
  align-items: start;
}
.prin__no { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; color: var(--signal-text); padding-top: 4px; }
.prin h3 { font-size: var(--fs-h5); margin-bottom: 9px; }
.prin p { font-size: var(--fs-small); color: var(--graphite); line-height: 1.68; }
.on-dark .prin, .sec--ink .prin, .sec--ink2 .prin, .hero .prin, .phero .prin, .cta .prin, .foot .prin, .band .prin, .panel .prin, .drawer .prin { border-top-color: var(--rule-dark); }
.on-dark .prin p { color: var(--mist); }
.on-dark .prin__no { color: var(--signal-2); }
@media (max-width: 860px) { .prins { grid-template-columns: minmax(0, 1fr); } }

/* --- Sectors: a dense index, two columns of hairline rows. ---------------- */
.secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 80px); }
.secrow {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
  position: relative;
  transition: padding-left var(--t) var(--ease-out);
}
.secrow:hover { padding-left: 8px; }
.secrow__no { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em; color: var(--slate); }
.secrow b { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -.015em; color: var(--ink); display: block; margin-bottom: 6px; }
.secrow span { font-size: var(--fs-small); color: var(--graphite); line-height: 1.6; display: block; }
.secrow .ic { width: 16px; height: 16px; color: var(--haze); align-self: center; transition: color var(--t) var(--ease), transform var(--t) var(--ease-out); }
.secrow:hover .ic { color: var(--signal); transform: translateX(4px); }
.secrow b a::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 860px) { .secs { grid-template-columns: minmax(0, 1fr); } }

/* --- Deliverables: definition rows. --------------------------------------- */
.dels { border-top: 1px solid var(--rule); }
.del {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(14px, 2.4vw, 48px);
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.del b { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -.015em; color: var(--ink); line-height: 1.3; }
.del span { font-size: var(--fs-small); color: var(--graphite); line-height: 1.66; }
@media (max-width: 760px) { .del { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* --- Scope list: the verbatim memorandum clauses. ------------------------- */
.scope { counter-reset: sc; }
.scope li {
  position: relative;
  counter-increment: sc;
  padding: 18px 0 18px 54px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.72;
  color: var(--graphite);
}
.scope li::before {
  content: counter(sc, lower-roman) ")";
  position: absolute; left: 0; top: 18px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em;
  color: var(--signal);
  width: 42px;
}
.scope--dark li { border-top-color: var(--rule-dark); color: var(--mist); }

/* --- Note block: a bracketed aside. --------------------------------------- */
.note {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 34px);
  background: var(--paper-2);
  border-left: 2px solid var(--signal);
}
.note--dark { background: var(--ink-3); color: var(--mist); }
.note__k { display: block; margin-bottom: 10px; }
.note p { font-size: var(--fs-small); line-height: 1.7; color: var(--graphite); }
.note--dark p { color: var(--mist); }

/* --- Insight cards. Image, hairline, text. No shadow, no rounded corner. -- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
@media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .posts { grid-template-columns: minmax(0, 1fr); } }

.post { position: relative; display: flex; flex-direction: column; }
.post__fig {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 20px;
}
.post__fig img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.7) contrast(1.03);
  transition: transform 1.1s var(--ease-out), filter var(--t-slow) var(--ease);
}
.post:hover .post__fig img { transform: scale(1.045); filter: grayscale(0) contrast(1); }
.post__fig--blank { display: grid; place-items: center; background: var(--ink); color: var(--graphite); }
.post__fig--blank .glyph { width: 84px; height: 84px; position: relative; z-index: 1; transition: color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease-out); }
.post__fig--blank .grat {
  background-image: radial-gradient(90% 80% at 50% 0%, rgba(243, 240, 233, .09), transparent 68%);
}
.post__fig--blank .grat::after { opacity: .075; }
.post:hover .post__fig--blank .glyph { color: var(--signal); transform: scale(1.06); }
.post__meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 12px;
}
.post__meta i { opacity: .4; font-style: normal; }
.post__t {
  /* These run to three lines often enough that 1.26 closed up on itself. */
  font-size: var(--fs-h5); font-weight: 600; letter-spacing: -.018em; line-height: 1.32;
  color: var(--ink); margin-bottom: 10px;
  transition: color var(--t-fast) var(--ease);
}
.post__t a::after { content: ""; position: absolute; inset: 0; }
.post:hover .post__t { color: var(--signal); }
.post__x { font-size: var(--fs-small); color: var(--graphite); line-height: 1.62; }
.post__rule { margin-top: auto; padding-top: 18px; }
.post__rule::before { content: ""; display: block; height: 1px; background: var(--rule); margin-bottom: 14px; }
.post__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate);
}
.post__more .ic { width: 14px; height: 14px; transition: transform var(--t) var(--ease-out); }
.post:hover .post__more { color: var(--ink); }
.post:hover .post__more .ic { transform: translateX(4px); }

/* The lead article, laid across the grid. */
.post--lead { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(26px, 3.4vw, 60px); align-items: center; }
.post--lead .post__fig { aspect-ratio: 4 / 3; margin-bottom: 0; }
/* 1.08 is display leading: correct at 38px, far too tight at the 23px this
   clamps to on a phone, where the title runs to four lines. */
.post--lead .post__t { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.03em; line-height: 1.14; }
@media (max-width: 760px) { .post--lead .post__t { line-height: 1.24; } }
.post--lead .post__x { font-size: var(--fs-body); }
@media (max-width: 1000px) { .post--lead { grid-column: span 2; } }
@media (max-width: 760px)  { .post--lead { grid-column: span 1; grid-template-columns: minmax(0, 1fr); } .post--lead .post__fig { aspect-ratio: 16/10; } }

/* --- Team ----------------------------------------------------------------- */
.leadership { overflow: hidden; }
.leadership__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(240px, 4fr); gap: clamp(28px, 7vw, 128px); align-items: end; margin-bottom: clamp(46px, 7vw, 96px); }
.leadership__intro .label { margin-bottom: 20px; }
.leadership__intro .h2 { max-width: 15ch; }
.leadership__note { margin: 0; max-width: 35ch; padding-bottom: 4px; }
.leaders { border-top: 1px solid var(--ink); }
.leader { display: grid; grid-template-columns: minmax(250px, 5fr) minmax(0, 7fr); gap: clamp(28px, 7vw, 128px); padding: clamp(28px, 4vw, 62px) 0; border-bottom: 1px solid var(--rule); }
.leader:nth-child(even) .leader__fig { order: 2; }
.leader__fig { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.leader__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(.48) contrast(1.04) saturate(.82); transition: transform 1s var(--ease-out), filter var(--t-slow) var(--ease); }
.leader:hover .leader__fig img { transform: scale(1.025); filter: grayscale(.12) contrast(1.02) saturate(.94); }
.leader__mono { position: absolute; inset: 0; display: grid; place-items: center; color: var(--signal-3); font: 500 clamp(62px, 10vw, 150px)/1 var(--sans); letter-spacing: -.07em; background: var(--ink-2); }
.leader__mono .grat { opacity: .45; }
.leader__copy { align-self: center; max-width: 570px; padding-block: 12px; }
.leader:nth-child(even) .leader__copy { order: 1; }
.leader__no { margin: 0 0 clamp(34px, 5vw, 76px); color: var(--signal-text); font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .18em; }
.leader__role { margin: 0 0 14px; color: var(--signal-text); font: 500 var(--fs-label)/1.35 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.leader h3 { max-width: 10ch; margin: 0; color: var(--ink); font-size: clamp(35px, 2.2rem + 1.8vw, 68px); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
.leader__creds { margin: 18px 0 0; color: var(--slate); font: 500 var(--fs-micro)/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.leader__bio { max-width: 52ch; margin: 22px 0 0; color: var(--graphite); font-size: var(--fs-body); line-height: 1.65; }
.leadership__empty { max-width: 760px; border-top: 1px solid var(--ink); padding-top: 40px; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); }
@media (max-width: 1080px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .people { grid-template-columns: minmax(0, 1fr); } }

.person__fig {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--ink); margin-bottom: 16px;
}
.person__fig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter var(--t-slow) var(--ease), transform 1.1s var(--ease-out); }
.person:hover .person__fig img { filter: grayscale(.25); transform: scale(1.03); }
.person__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(34px, 4vw, 54px); font-weight: 500; letter-spacing: -.03em;
  color: var(--ink-4); background: var(--ink-2);
}
.person__mono .grat { opacity: .8; }
.person h3 { font-size: var(--fs-h5); font-weight: 600; margin-bottom: 5px; }
.person__role { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .13em; text-transform: uppercase; color: var(--signal-text); margin-bottom: 10px; }
.person__bio { font-size: var(--fs-small); color: var(--graphite); line-height: 1.6; }
.person__creds { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
@media (max-width: 760px) {
  .leadership__intro, .leader { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .leadership__intro { margin-bottom: 48px; }
  .leader { padding-block: 28px; }
  .leader:nth-child(even) .leader__fig, .leader:nth-child(even) .leader__copy { order: initial; }
  .leader__fig { max-width: 520px; }
  .leader__no { margin-bottom: 28px; }
  .leader h3 { max-width: 12ch; }
}

/* --- Accordion (FAQ) ------------------------------------------------------ */
.acc { border-top: 1px solid var(--rule); }
.acc__i { border-bottom: 1px solid var(--rule); }
.acc__b {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 26px; gap: 14px;
  align-items: start;
  padding: clamp(20px, 2.2vw, 28px) 0;
  color: var(--ink);
}
.acc__b .idx { padding-top: 5px; }
.acc__q { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -.016em; line-height: 1.34; }
.acc__ic { position: relative; width: 16px; height: 16px; margin-top: 7px; justify-self: end; }
.acc__ic::before, .acc__ic::after {
  content: ""; position: absolute; background: var(--ink); transition: transform var(--t) var(--ease), background-color var(--t) var(--ease);
}
.acc__ic::before { left: 0; right: 0; top: 7.5px; height: 1px; }
.acc__ic::after  { top: 0; bottom: 0; left: 7.5px; width: 1px; }
.acc__b[aria-expanded="true"] .acc__ic::after { transform: scaleY(0); }
.acc__b[aria-expanded="true"] .acc__ic::before { background: var(--signal); }
.acc__b:hover .acc__q { color: var(--signal); }
.acc__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.acc__p.is-open { grid-template-rows: 1fr; }
.acc__p > div { overflow: hidden; }
.acc__p p {
  padding: 0 70px clamp(22px, 2.4vw, 30px) 66px;
  font-size: var(--fs-small); color: var(--graphite); line-height: 1.72; max-width: 72ch;
}
@media (max-width: 640px) {
  .acc__b { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 10px; }
  .acc__p p { padding-left: 44px; padding-right: 0; }
}
.no-js .acc__p { grid-template-rows: 1fr; }

/* --- Tabs ----------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule); margin-bottom: clamp(28px, 3vw, 46px); }
.tabs button {
  position: relative;
  padding: 13px 20px;
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate); line-height: 1;
  transition: color var(--t-fast) var(--ease);
}
.tabs button:first-child { padding-left: 0; }
.tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.tabs button:first-child::after { left: 0; }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.tabs button:hover { color: var(--ink); }
.tabpanel[hidden] { display: none; }

/* --- CTA band ------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--ink);
  color: var(--haze);
  overflow: hidden;
  isolation: isolate;
}
.cta__in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 80px);
  align-items: center;
  padding-block: clamp(64px, 7vw, 124px);
}
.cta h2 { max-width: 16ch; margin-bottom: 18px; }
.cta p { color: var(--haze); max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; }
.cta__side { display: grid; gap: 14px; justify-items: start; }
.cta__side .btn { width: 100%; justify-content: space-between; }
.cta__dir { margin-top: 10px; display: grid; gap: 10px; width: 100%; }
.cta__dir a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-dark); color: var(--haze); font-size: var(--fs-small); transition: color var(--t-fast) var(--ease); }
.cta__dir a:hover { color: var(--paper); }
.cta__dir .ic { width: 17px; height: 17px; color: var(--signal-2); flex: none; }
@media (max-width: 900px) { .cta__in { grid-template-columns: minmax(0, 1fr); } }

/* --- Split: image one side, copy the other. ------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 96px); align-items: center; }
.split--wide-l { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split--wide-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 900px) { .split, .split--wide-l, .split--wide-r { grid-template-columns: minmax(0, 1fr); } }
.split__fig { position: relative; }
.split__fig img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(.85) contrast(1.04); }
.split__fig--sq img { aspect-ratio: 1; }
.split__cap {
  margin-top: 14px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate);
}

/* --- Stat rule: a figure sitting on a hairline. --------------------------- */
.srule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 54px); }
.srule > div { border-top: 1px solid var(--rule); padding-top: 20px; }
.srule b { display: block; font-size: clamp(30px, 2.4vw, 46px); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.srule span { display: block; margin-top: 10px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); line-height: 1.5; }
@media (max-width: 700px) { .srule { grid-template-columns: minmax(0, 1fr); } }

/* --- Marquee of capability names (slow, pausable). ------------------------ */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--rule-dark);
  padding-block: 16px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__t { display: flex; width: max-content; animation: slide 58s linear infinite; }
.ticker:hover .ticker__t { animation-play-state: paused; }
.ticker__t > span {
  display: inline-flex; align-items: center; gap: 22px;
  padding-inline: 22px;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist); white-space: nowrap;
}
.ticker__t > span::after { content: ""; width: 4px; height: 4px; background: var(--signal); flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }
/* ---------------------------------------------------------------------------
   9. PAGES
   --------------------------------------------------------------------------- */

/* --- Article (insight detail) --------------------------------------------- */
.art { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 250px); gap: clamp(28px, 4vw, 72px); }
@media (max-width: 1180px) { .art { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); } .art__toc { display: none; } }
@media (max-width: 900px)  { .art { grid-template-columns: minmax(0, 1fr); } .art__side { order: 3; } }

/* Two variants of the reading layout. These were written inline on the page,
   which beats a media query on specificity alone, so at phone width the
   article column was computing to twenty pixels and the text ran one letter
   to a line for eight thousand pixels. */
.art--side { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.art--toc  { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
@media (max-width: 1180px) { .art--toc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) { .art--side { grid-template-columns: minmax(0, 1fr); } }

.art__toc { position: sticky; top: calc(var(--hdr-h) + 34px); align-self: start; }
.art__toc h2 { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .17em; text-transform: uppercase; color: var(--slate); font-weight: 500; margin-bottom: 16px; }
.art__toc a {
  display: block; padding: 7px 0 7px 14px;
  border-left: 1px solid var(--rule);
  font-size: var(--fs-small); color: var(--graphite); line-height: 1.45;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.art__toc a:hover, .art__toc a.is-on { color: var(--ink); border-left-color: var(--signal); }

.art__side { position: sticky; top: calc(var(--hdr-h) + 34px); align-self: start; display: grid; gap: 28px; }
.art__share { display: flex; gap: 8px; }
.art__share a, .art__share button {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--rule); color: var(--graphite);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.art__share a:hover, .art__share button:hover { border-color: var(--ink); color: var(--ink); }
.art__share .ic { width: 18px; height: 18px; }

.takeaways { background: var(--paper-2); padding: clamp(22px, 2.4vw, 30px); border-top: 2px solid var(--signal); }
.takeaways h2 { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .17em; text-transform: uppercase; color: var(--signal-text); font-weight: 500; margin-bottom: 16px; }
.takeaways li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 9px 0; font-size: var(--fs-small); line-height: 1.6; color: var(--graphite); border-top: 1px solid var(--rule); }
.takeaways li:first-of-type { border-top: 0; padding-top: 0; }
.takeaways .ic { width: 15px; height: 15px; color: var(--signal); margin-top: 3px; }

/* Rich text produced by the CMS. */
.rte { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-3); }
.rte > * + * { margin-top: 1.1em; }
.rte h2 { font-size: var(--fs-h3); margin-top: 1.9em; margin-bottom: .55em; letter-spacing: -.03em; }
.rte h3 { font-size: var(--fs-h4); margin-top: 1.6em; margin-bottom: .45em; }
.rte h4 { font-size: var(--fs-h5); margin-top: 1.4em; margin-bottom: .4em; }
.rte p  { max-width: 68ch; text-wrap: pretty; }
.rte ul, .rte ol { max-width: 66ch; padding-left: 0; }
.rte ul li, .rte ol li { position: relative; padding-left: 28px; margin-bottom: .55em; }
.rte ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 7px; height: 1px; background: var(--signal); }
.rte ol { counter-reset: n; }
.rte ol li { counter-increment: n; }
.rte ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--mono); font-size: var(--fs-micro); color: var(--signal-text); }
.rte blockquote { margin: 1.8em 0; padding-left: clamp(20px, 3vw, 36px); border-left: 2px solid var(--signal); font-family: var(--serif); font-size: clamp(20px, 1.1rem + .8vw, 27px); line-height: 1.4; color: var(--ink); }
.rte blockquote p { max-width: none; }
.rte img { margin: 2em 0; width: 100%; }
.rte figure { margin: 2em 0; }
.rte figcaption { margin-top: 12px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.rte hr { margin: 2.4em 0; }
.rte code { font-family: var(--mono); font-size: .88em; background: var(--paper-2); padding: 2px 6px; }
.rte pre { background: var(--ink); color: var(--haze); padding: 22px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.rte pre code { background: none; padding: 0; }
.rte table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.rte th, .rte td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.rte th { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); font-weight: 500; }
.rte > *:first-child { margin-top: 0; }

/* Drop cap on the opening paragraph. */
.rte--lead > p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: .82;
  font-weight: 500;
  letter-spacing: -.04em;
  padding: .06em .14em 0 0;
  color: var(--signal);
}

/* --- Filter bar ----------------------------------------------------------- */
.filter {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding-block: 20px;
  border-block: 1px solid var(--rule);
}
.filter__set { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 auto; }
.filter__search { position: relative; min-width: 230px; flex: 0 0 auto; margin-left: auto; }
@media (max-width: 720px) { .filter__search { margin-left: 0; width: 100%; } }
.filter__search input {
  width: 100%;
  padding: 11px 38px 11px 14px;
  background: transparent;
  border: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink);
}
.filter__search input::placeholder { color: var(--mist); }
.filter__search input:focus { border-color: var(--ink); outline: none; }
/* Seventeen pixels square is a poor target for a mouse and an impossible
   one for a finger, so the button is sized here rather than only on touch. */
.filter__search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--slate); }
.filter__search button:hover { color: var(--ink); }
.filter__search .ic { width: 17px; height: 17px; }
.filter__count { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .13em; text-transform: uppercase; color: var(--slate); }

/* --- Pager ---------------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(40px, 5vw, 72px); padding-top: 26px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.pager__step { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.pager__step.is-off { color: var(--haze); pointer-events: none; }
.pager__list { display: flex; align-items: center; gap: 4px; }
.pager__n { display: grid; place-items: center; min-width: 38px; height: 38px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .08em; color: var(--slate); border: 1px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.pager__n:hover { color: var(--ink); border-color: var(--rule); }
.pager__n.is-on { color: var(--ink); border-color: var(--ink); }
.pager__gap { color: var(--haze); padding-inline: 4px; }

/* --- Careers -------------------------------------------------------------- */
.role {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 160px 32px;
  gap: clamp(14px, 2vw, 36px);
  align-items: center;
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--t) var(--ease-out);
}
.role:hover { padding-left: 12px; }
.role h3 { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -.016em; margin-bottom: 7px; }
.role h3 a::after { content: ""; position: absolute; inset: 0; }
.role__meta { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); display: flex; gap: 10px; flex-wrap: wrap; }
.role__meta i { opacity: .4; font-style: normal; }
.role__x { font-size: var(--fs-small); color: var(--graphite); line-height: 1.6; }
.role__close { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.role__close b { display: block; color: var(--ink); font-weight: 500; margin-top: 4px; }
.role__go { justify-self: end; color: var(--haze); transition: color var(--t) var(--ease), transform var(--t) var(--ease-out); }
.role:hover .role__go { color: var(--signal); transform: translateX(5px); }
.role__go .ic { width: 20px; height: 20px; }
@media (max-width: 980px) {
  .role { grid-template-columns: minmax(0, 1fr) 24px; }
  .role__x, .role__close { grid-column: 1; }
  .role__x { margin-top: 10px; }
  .role__close { margin-top: 10px; }
  .role__go { grid-row: 1; grid-column: 2; }
}

.empty {
  padding: clamp(40px, 5vw, 70px) clamp(24px, 3vw, 44px);
  border: 1px dashed var(--rule);
  text-align: center;
}
.empty .ic { width: 28px; height: 28px; color: var(--haze); margin: 0 auto 18px; }
.empty h3 { font-size: var(--fs-h5); margin-bottom: 10px; }
.empty p { color: var(--graphite); font-size: var(--fs-small); max-width: 46ch; margin-inline: auto; }

/* --- Contact -------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(36px, 5vw, 92px); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.cdir { border-top: 1px solid var(--rule); }
.cdir__i { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.cdir__i .ic { width: 19px; height: 19px; color: var(--signal); margin-top: 3px; }
.cdir__k { display: block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .15em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.cdir__v { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.6; }
.cdir__v a:hover { color: var(--signal); }
.map { aspect-ratio: 16/9; background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }

/* --- 404 ------------------------------------------------------------------ */
.e404 { min-height: 68vh; display: grid; place-items: center; text-align: center; }
.e404 .mega { color: var(--ink-4); margin-bottom: 18px; }

/* ---------------------------------------------------------------------------
   10. FORMS
   --------------------------------------------------------------------------- */
.form { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: 9px; }
.field > label, .field__k {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--slate);
}
.field > label .req { color: var(--signal-text); }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=url], .field input[type=date], .field input[type=password],
.field input[type=number], .field select, .field textarea {
  width: 100%;
  padding: 14px 15px;
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576474' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
  padding-right: 40px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--mist); }
.field__note { font-size: var(--fs-micro); color: var(--slate); line-height: 1.5; }
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--signal); background: var(--signal-wash); }
.field__err { font-size: var(--fs-micro); color: var(--signal-ink); }

.field--file input[type=file] { font-size: var(--fs-small); padding: 12px; background: var(--white); border: 1px dashed var(--rule); width: 100%; }
.field--file input[type=file]::file-selector-button {
  margin-right: 14px; padding: 8px 14px; border: 1px solid var(--rule); background: var(--paper);
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}

.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.check input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--rule); background: var(--white); margin-top: 2px; position: relative; flex: none; cursor: pointer; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px;
  border: solid var(--paper); border-width: 0 1.5px 1.5px 0; transform: rotate(42deg);
}
.check span { font-size: var(--fs-small); color: var(--graphite); line-height: 1.55; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 16px 18px; border-left: 2px solid; font-size: var(--fs-small); line-height: 1.6; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.alert .ic { width: 18px; height: 18px; margin-top: 2px; }
.alert--ok  { background: var(--mineral-wash); border-color: var(--mineral); color: var(--mineral); }
.alert--err { background: var(--signal-wash); border-color: var(--signal); color: var(--signal-ink); }
.alert--info{ background: var(--paper-2); border-color: var(--graphite); color: var(--graphite); }

/* Newsletter sign-up inline form. */
.sub { display: flex; gap: 0; max-width: 460px; }
.sub input {
  flex: 1;
  padding: 15px 16px;
  background: transparent;
  border: 1px solid var(--rule-dark);
  border-right: 0;
  color: var(--paper);
  font-size: var(--fs-small);
}
.sub input::placeholder { color: var(--slate); }
.sub input:focus { border-color: var(--mist); outline: none; }
.sub .btn { flex: none; }
@media (max-width: 480px) { .sub { flex-direction: column; } .sub input { border-right: 1px solid var(--rule-dark); border-bottom: 0; } }

/* ---------------------------------------------------------------------------
   11. FOOTER
   --------------------------------------------------------------------------- */
.foot { position: relative; background: var(--ink); color: var(--mist); overflow: hidden; }
.foot__top { padding-block: clamp(56px, 6vw, 96px) clamp(40px, 4vw, 64px); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 64px); }
@media (max-width: 1000px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .foot__grid { grid-template-columns: minmax(0, 1fr); } }

.foot__brand .lockup { color: var(--paper); margin-bottom: 20px; }
.foot__brand p { font-size: var(--fs-small); color: var(--mist); line-height: 1.68; max-width: 38ch; margin-bottom: 26px; }
.foot h3 {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--slate);
  margin-bottom: 18px;
}
.foot__nav li { margin-bottom: 11px; }
.foot__nav a { font-size: var(--fs-small); color: var(--mist); transition: color var(--t-fast) var(--ease); position: relative; }
.foot__nav a:hover { color: var(--paper); }
.foot__contact li { display: flex; gap: 11px; margin-bottom: 14px; font-size: var(--fs-small); line-height: 1.55; }
.foot__contact .ic { width: 16px; height: 16px; color: var(--signal-2); flex: none; margin-top: 3px; }
.foot__contact a:hover { color: var(--paper); }

.foot__sub { margin-top: 32px; }
.foot__sub p { font-size: var(--fs-small); color: var(--mist); margin-bottom: 16px; max-width: 40ch; }

.foot__bar {
  border-top: 1px solid var(--rule-dark);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; color: var(--slate);
}
.foot__bar a { color: var(--slate); transition: color var(--t-fast) var(--ease); }
.foot__bar a:hover { color: var(--haze); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__soc { display: flex; gap: 8px; }
.foot__soc a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--rule-dark); color: var(--mist);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.foot__soc a:hover { border-color: var(--signal); color: var(--signal-2); }
.foot__soc .ic { width: 17px; height: 17px; }

.totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t), background-color var(--t-fast) var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s; }
.totop:hover { background: var(--signal); border-color: var(--signal); }
.totop .ic { width: 19px; height: 19px; }

/* ---------------------------------------------------------------------------
   12. MOTION, UTILITIES, PRINT
   --------------------------------------------------------------------------- */
.u-mt0{margin-top:0}.u-mb0{margin-bottom:0}
.u-mt-s{margin-top:clamp(18px,2vw,28px)}.u-mt-m{margin-top:clamp(28px,3.2vw,48px)}
.u-mt-l{margin-top:clamp(40px,4.6vw,76px)}
.u-mb-s{margin-bottom:clamp(18px,2vw,28px)}.u-mb-m{margin-bottom:clamp(28px,3.2vw,48px)}
.u-mb-l{margin-bottom:clamp(40px,4.6vw,76px)}
.u-center{text-align:center}
.u-rule{height:1px;background:var(--rule);border:0}
.on-dark .u-rule, .sec--ink .u-rule, .sec--ink2 .u-rule, .hero .u-rule, .phero .u-rule, .cta .u-rule, .foot .u-rule, .band .u-rule, .panel .u-rule, .drawer .u-rule { background: var(--rule-dark); }
.u-nowrap{white-space:nowrap}
.u-rel{position:relative}
.u-sticky{position:sticky;top:calc(var(--hdr-h) + 34px);align-self:start}
.u-max-s{max-width:46ch}.u-max-m{max-width:60ch}.u-max-l{max-width:74ch}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .terrain__l { stroke-dashoffset: 0 !important; }
  .hero__scan, .hero__cue i::after, .ticker__t { animation: none !important; }
  .hero__scan { display: none; }
}

@media print {
  .mast, .drawer, .panel, .panel__scrim, .totop, .prog, .hero__scan, .hero__cue,
  .cta, .foot__sub, .filter, .pager, .art__share { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .phero, .sec--ink, .sec--ink2 { background: #fff !important; color: #000 !important; padding-block: 18pt !important; }
  .hero h1, .phero h1, .sec--ink h2, .sec--ink2 h2, .hero__h { color: #000 !important; }
  .hero__veil, .phero__veil, .hero__bg, .phero__bg, .grat, .terrain { display: none !important; }
  .sec { padding-block: 16pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* Division page: the glyph, drawn large. */
.divglyph { display: grid; place-items: center; color: var(--mist); }
.divglyph .glyph { width: clamp(130px, 15vw, 210px); height: clamp(130px, 15vw, 210px); stroke-width: .9; }
@media (max-width: 900px) { .divglyph { justify-items: start; margin-top: 8px; } }

/* ===========================================================================
   13. PHOTOGRAPHY
   Every photograph is wrapped in .ph. The wrapper carries a 20px base64
   placeholder as a background, so a slow connection sees the right colours
   immediately and never a grey box. The image fades over it once decoded.
   =========================================================================== */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-2);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s var(--ease), transform 1.6s var(--ease-out), filter 1.2s var(--ease);
  will-change: opacity, transform;
}
.ph.is-loaded img { opacity: 1; transform: scale(1); }

/* The house grade. One colour story across every photograph on the site:
   desaturated, cooled in the shadows, with a touch of the signal in the
   highlights. Applied in CSS so the client can swap any image freely. */
.ph::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  mix-blend-mode: color;
  background: linear-gradient(170deg, rgba(14,90,87,.42) 0%, rgba(20,32,41,.30) 48%, rgba(200,73,31,.34) 100%);
  opacity: .55;
  transition: opacity 1s var(--ease);
}
.ph::before {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 14, 20,.08), rgba(9, 14, 20,.46));
  opacity: 1;
  transition: opacity 1s var(--ease);
}
.ph img { filter: grayscale(.62) contrast(1.06) brightness(.94) saturate(1.1); }

.ph--deep img { filter: grayscale(.86) contrast(1.12) brightness(.62) saturate(.9); }
.ph--deep::before { background: linear-gradient(180deg, rgba(9, 14, 20,.42), rgba(9, 14, 20,.78)); }

.ph--soft img { filter: grayscale(.34) contrast(1.03) brightness(1) saturate(1.05); }
.ph--soft::before { opacity: .42; }
.ph--soft::after { opacity: .34; }

.ph--none img { filter: none; }
.ph--none::before, .ph--none::after { opacity: 0; }

/* A plain photograph blends with what is behind it: no placeholder
   background, no grade overlays, and no isolation to trap the blend. */
.ph--plain { background: none; isolation: auto; }
.ph--plain::before, .ph--plain::after { display: none; }

/* Hovering a card warms its photograph. */
.post:hover .ph img, .person:hover .ph img, .tile:hover .ph img { filter: grayscale(.18) contrast(1.04) brightness(1) saturate(1.12); }
.post:hover .ph::after, .person:hover .ph::after, .tile:hover .ph::after { opacity: .3; }
.post:hover .ph::before, .person:hover .ph::before { opacity: .55; }

/* Scroll reveal for photographs: a wipe plus a settle. */
[data-ph-reveal] { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease-out); }
[data-ph-reveal].is-shown { clip-path: inset(0 0 0 0); }
.no-js [data-ph-reveal] { clip-path: none; }

/* Parallax is applied to the inner img so the wrapper keeps its box. */
[data-parallax] img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-ph-reveal] { clip-path: none !important; }
  .ph img { transform: none !important; }
}

/* ===========================================================================
   14. HEADLINE REVEAL
   Lines are wrapped by JavaScript and masked upward. Without JavaScript the
   text simply sits there, fully legible.
   =========================================================================== */
.rv-line { display: block; overflow: hidden; }
.rv-line > i {
  display: block;
  font-style: inherit;
  transform: translateY(104%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--ln, 0ms);
}
.is-revealed .rv-line > i { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rv-line > i { transform: none !important; }
}

/* ===========================================================================
   15. HERO
   A composition rather than a banner: the headline holds the left, the
   instrument and the photograph hold the right and bleed off the edge.
   =========================================================================== */
.hero {
  padding-top: calc(var(--hdr-h) + clamp(44px, 6vh, 90px));
  padding-bottom: clamp(44px, 6vh, 86px);
  min-height: min(104vh, 1000px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__wrap { position: relative; z-index: 3; width: 100%; }

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 1080px) {
  .hero__layout { grid-template-columns: minmax(0, 1fr); }
}

.hero__h {
  font-size: clamp(40px, 1rem + 5.1vw, 104px);
  line-height: .94;
  letter-spacing: -.036em;
  max-width: 15ch;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.hero__h em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.018em;
  color: var(--signal-3);
}

/* --- The instrument: photograph plus live overlay ------------------------ */
.inst {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 620px);
  margin-left: auto;
  margin-right: calc(var(--gutter) * -0.7);
}
@media (max-width: 1080px) {
  .inst { margin: 0 auto; width: min(82%, 520px); opacity: .9; }
}
@media (max-width: 640px) { .inst { width: min(100%, 400px); } }

.inst__globe {
  position: absolute; inset: 7.5%;
  z-index: 1;
}
/* The photograph is a disc on black. Screen blending drops that black into
   the page so the planet floats rather than sitting in a box. */
.inst__globe .ph { width: 100%; height: 100%; }
/* Mask the disc out of its black frame. A blend mode would be trapped by the
   stacking context the instrument needs, so this is cut geometrically with a
   one-per-cent feather at the limb. */
.inst__globe .ph img {
  --disc: radial-gradient(circle at 50% 50%, #000 47.6%, rgba(0,0,0,.55) 48.6%, transparent 49.4%);
  -webkit-mask-image: var(--disc);
          mask-image: var(--disc);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  filter: contrast(1.16) saturate(1.26) brightness(1.04);
  animation: globeRotate 48s linear infinite;
  transform-origin: 50% 52%;
}
@keyframes globeRotate {
  from { transform: scale(1.04) rotate(0deg); }
  to   { transform: scale(1.04) rotate(360deg); }
}

/* Atmosphere: a cool halo behind the disc and a warm terminator in front. */
.inst__glow {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(26,131,126,.30) 38%, rgba(26,131,126,.10) 48%, transparent 58%),
    radial-gradient(circle at 34% 30%, rgba(200,73,31,.16) 0%, transparent 42%);
  filter: blur(6px);
  animation: glowPulse 9s var(--ease) infinite alternate;
}
@keyframes glowPulse { from { opacity: .72; } to { opacity: 1; } }

.inst__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

/* Mono readouts pinned to the instrument corners. */
.inst__read {
  position: absolute; z-index: 3;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist);
  line-height: 1.7;
  white-space: nowrap;
  pointer-events: none;
}
.inst__read b { color: var(--signal-2); font-weight: 500; }
.inst__read--tl { top: 2%;  left: 0; }
.inst__read--br { bottom: 2%; right: 0; text-align: right; }
@media (max-width: 640px) { .inst__read { font-size: 8.5px; } }

/* The hero photograph, full-bleed behind everything, very dark. */
.hero__plate { position: absolute; inset: 0; z-index: 0; }
.hero__plate .ph { width: 100%; height: 100%; }
/* The plate is atmosphere, not subject: blurred past recognition so it adds
   depth and colour behind the headline without competing with the globe. */
.hero__plate .ph img {
  filter: grayscale(1) contrast(1.25) brightness(.22) blur(22px);
  transform: scale(1.22);
}
.hero__plate .ph::before {
  background:
    radial-gradient(120% 90% at 72% 46%, rgba(9, 14, 20,.2) 0%, rgba(9, 14, 20,.86) 62%),
    linear-gradient(180deg, rgba(9, 14, 20,.9) 0%, rgba(9, 14, 20,.8) 38%, rgba(9, 14, 20,.97) 100%);
}
.hero__plate .ph::after { opacity: .22; }

.hero__rail { position: relative; z-index: 3; }

/* ===========================================================================
   16. STICKY SCROLL-THROUGH (divisions)
   The photograph stays put while the four divisions advance past it.
   =========================================================================== */
.dstack { position: relative; }
.dstack__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
@media (max-width: 980px) { .dstack__grid { grid-template-columns: minmax(0, 1fr); } }

.dstack__media {
  position: sticky;
  top: calc(var(--hdr-h) + clamp(28px, 6vh, 72px));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
}
@media (max-width: 980px) { .dstack__media { display: none; } }

.dstack__media .ph {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .85s var(--ease), transform 1.6s var(--ease-out);
  transform: scale(1.06);
  clip-path: none;
}
.dstack__media .ph.is-on { opacity: 1; transform: scale(1); }

/* Index ticks beside the sticky image. */
.dstack__ticks {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: 0 0 0 18px;
}
.dstack__ticks span {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: var(--slate); padding: 7px 0;
  transition: color .4s var(--ease);
}
.dstack__ticks span::before {
  content: ""; width: 14px; height: 1px; background: currentColor;
  transition: width .5s var(--ease-out), background-color .4s var(--ease);
}
.dstack__ticks span.is-on { color: var(--paper); }
.dstack__ticks span.is-on::before { width: 30px; background: var(--signal); }

.dpanel {
  padding-block: clamp(42px, 9vh, 112px);
  border-top: 1px solid var(--rule-dark);
}
.dpanel:first-child { border-top: 0; padding-top: clamp(10px, 2vh, 28px); }
.dpanel__no {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
}
.dpanel__no b {
  font-family: var(--mono); font-size: clamp(30px, 3.4vw, 54px); font-weight: 400;
  letter-spacing: -.04em; line-height: 1; color: var(--ink-4);
  transition: color .5s var(--ease);
}
.dpanel.is-on .dpanel__no b { color: var(--signal); }
.dpanel__no span {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate);
}
.dpanel h3 { font-size: clamp(28px, 2.6vw, 46px); letter-spacing: -.035em; margin-bottom: 14px; }
.dpanel__lede { font-size: var(--fs-lead); line-height: 1.45; color: var(--haze); margin-bottom: 16px; max-width: 34ch; }
.dpanel__body { font-size: var(--fs-small); line-height: 1.7; color: var(--mist); max-width: 46ch; margin-bottom: 22px; }
.dpanel__lines { display: grid; gap: 0; margin-bottom: 24px; }
.dpanel__lines a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-dark);
  color: var(--haze); font-size: var(--fs-small);
  transition: color .3s var(--ease), padding-left .4s var(--ease-out);
}
.dpanel__lines a:hover { color: var(--paper); padding-left: 8px; }
.dpanel__lines a .ic { width: 16px; height: 16px; color: var(--slate); transition: color .3s var(--ease), transform .4s var(--ease-out); }
.dpanel__lines a:hover .ic { color: var(--signal-2); transform: translateX(4px); }

/* Mobile fallback: each panel carries its own image. */
.dpanel__pic { display: none; margin-bottom: 24px; aspect-ratio: 16/10; }
@media (max-width: 980px) { .dpanel__pic { display: block; } }

/* ===========================================================================
   17. CURSOR-FOLLOWING PREVIEW
   Hovering a row in the capability index lifts its photograph under the
   pointer. Desktop and fine pointers only.
   =========================================================================== */
.peek {
  position: fixed; top: 0; left: 0; z-index: 70;
  width: 300px; aspect-ratio: 4/3;
  pointer-events: none;
  opacity: 0;
  /* Position is driven per frame by script, so only opacity is transitioned
     here: a transform transition would fight the smoothing and lag. */
  transition: opacity .3s var(--ease);
  overflow: hidden;
  will-change: transform, opacity;
}
.peek.is-on { opacity: 1; }
.peek .ph { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease); }
.peek .ph.is-on { opacity: 1; }
.peek__frame { position: absolute; inset: 0; z-index: 5; border: 1px solid rgba(243,240,233,.3); }
.peek__frame::before, .peek__frame::after {
  content: ""; position: absolute; background: var(--signal);
}
.peek__frame::before { left: 0; top: 0; width: 18px; height: 2px; }
.peek__frame::after { left: 0; top: 0; width: 2px; height: 18px; }
@media (hover: none), (pointer: coarse), (max-width: 980px) { .peek { display: none; } }

/* ===========================================================================
   18. FULL-BLEED PLATES
   A photograph that runs edge to edge with content over it.
   =========================================================================== */
.plate { position: relative; overflow: hidden; isolation: isolate; }
.plate__bg { position: absolute; inset: 0; z-index: 0; }
.plate__bg .ph { width: 100%; height: 100%; }
.plate__in { position: relative; z-index: 2; }
.plate--tall .plate__in { min-height: clamp(380px, 56vh, 620px); display: flex; align-items: flex-end; }

/* A plate used as a section break between two paper sections. */
.band { position: relative; overflow: hidden; }
.band__fig { aspect-ratio: 21 / 7; }
@media (max-width: 760px) { .band__fig { aspect-ratio: 16 / 10; } }
.band__cap {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  padding: clamp(18px, 2.4vw, 32px);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .15em; text-transform: uppercase; color: var(--haze);
  display: flex; align-items: center; gap: 12px;
}
.band__cap::before { content: ""; width: 26px; height: 1px; background: var(--signal); }

/* ===========================================================================
   19. TILES (sectors, as photographic cards)
   =========================================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

.tile {
  position: relative;
  background: var(--paper);
  display: flex; flex-direction: column;
  transition: background-color .45s var(--ease);
}
.tile__fig { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tile__fig .ph { position: absolute; inset: 0; }
.tile__no {
  position: absolute; left: 14px; top: 12px; z-index: 5;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .16em;
  color: var(--paper); opacity: .85;
}
.tile__body {
  padding: clamp(18px, 1.9vw, 26px);
  display: flex; flex-direction: column; flex: 1;
}
.tile h3 { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -.016em; margin-bottom: 8px; transition: color .3s var(--ease); }
.tile p { font-size: var(--fs-small); line-height: 1.6; color: var(--graphite); }
.tile__go {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
  transition: color .35s var(--ease), gap .35s var(--ease-out);
}
.tile__go .ic { width: 15px; height: 15px; }
.tile:hover { background: var(--paper-2); }
.tile:hover h3 { color: var(--signal); }
.tile:hover .tile__go { color: var(--ink); gap: 14px; }
.tile:hover .tile__fig .ph img { transform: scale(1.06); }
.tile a::after { content: ""; position: absolute; inset: 0; z-index: 6; }

/* ===========================================================================
   20. MAGNETIC BUTTONS AND SMALL MOTION
   =========================================================================== */
.btn, .lk { will-change: transform; }
.btn[data-magnet] { transition: transform .4s var(--ease-out), color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease); }

/* A rule that draws itself across the viewport on entry. */
.drawline { height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); }
.drawline.is-in { transform: scaleX(1); }
.on-dark .drawline, .sec--ink .drawline, .sec--ink2 .drawline { background: var(--rule-dark); }

/* Progress spine for the approach sequence. */
.spine { position: relative; }
.spine::before {
  content: ""; position: absolute; left: 33px; top: 0; bottom: 0; width: 1px;
  background: var(--rule);
}
.spine::after {
  content: ""; position: absolute; left: 33px; top: 0; width: 1px;
  height: var(--spine, 0%); background: var(--signal);
  transition: height .18s linear;
}
@media (max-width: 900px) { .spine::before, .spine::after { left: 19px; } }
.spine .step { position: relative; }
.spine .step__no { position: relative; z-index: 2; background: var(--paper-2); padding-block: 6px; }
.sec--paper .spine .step__no { background: var(--paper); }

/* ===========================================================================
   21. VIEW TRANSITIONS
   Progressive: browsers without support simply navigate as usual.
   =========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .26s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .42s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ===========================================================================
   22. REFINEMENTS TO THE BASE LAYER
   =========================================================================== */

/* Masthead gets a blur once it is solid, so content passing under it reads. */
.mast.is-solid, body.hdr-solid .mast {
  background: rgba(245, 243, 238, .86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
@supports not (backdrop-filter: blur(1px)) {
  .mast.is-solid, body.hdr-solid .mast { background: var(--paper); }
}
.mast.is-open { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* The mega panel gets a photograph in its aside. */
.panel__pic { margin-top: 22px; aspect-ratio: 16/10; }
.panel__pic .ph { width: 100%; height: 100%; }
@media (max-width: 1140px) { .panel__pic { display: none; } }

/* Figures strip sits over a photograph. */
.figs__i { position: relative; z-index: 2; }

/* Pull quotes get a mark. */
.pull { position: relative; }
.pull--marked { padding-top: 34px; }
.pull--marked::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 42px; height: 2px; background: var(--signal);
}

/* Larger, more confident section heads. */
.shead__title { max-width: 20ch; }
.h2, h2 { letter-spacing: -.028em; }

/* An editorial caption under any figure. */
.figcap {
  margin-top: 14px;
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
.figcap b { color: var(--signal-text); font-weight: 500; }
.on-dark .figcap, .sec--ink .figcap, .sec--ink2 .figcap, .hero .figcap, .phero .figcap, .cta .figcap, .foot .figcap, .band .figcap, .panel .figcap, .drawer .figcap { color: var(--mist); }

/* Scroll-driven progress for the whole document, shown in the masthead rule. */
.mast::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 1px;
  width: var(--docprog, 0%);
  background: linear-gradient(90deg, var(--signal), var(--signal-3));
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.mast.is-solid::after, body.hdr-solid .mast::after { opacity: .9; }

/* The post figure now holds a .ph wrapper. */
.post__fig .ph { position: absolute; inset: 0; }
.post__fig { isolation: isolate; }
.post__fig--blank .ph { position: absolute; inset: 0; }
.post--lead .post__fig .ph { position: absolute; inset: 0; }

/* ---------------------------------------------------------------------------
   A .ph inside a box that declares its own aspect ratio must fill that box,
   otherwise the image's natural ratio wins and the box grows.
   --------------------------------------------------------------------------- */
.band__fig, .dpanel__pic, .panel__pic, .split__fig--ph, .cap-hero__fig {
  position: relative;
  overflow: hidden;
}
.band__fig > .ph,
.dpanel__pic > .ph,
.panel__pic > .ph,
.split__fig--ph > .ph,
.cap-hero__fig > .ph { position: absolute; inset: 0; }

/* ---------------------------------------------------------------------------
   Inner-page hero carrying a photograph.
   --------------------------------------------------------------------------- */
.phero--pic { padding-top: calc(var(--hdr-h) + clamp(66px, 8vw, 128px)); padding-bottom: clamp(60px, 7vw, 112px); }
.phero__bg .ph { width: 100%; height: 100%; }
.phero__bg .ph img { filter: grayscale(.72) contrast(1.14) brightness(.72) saturate(1.05); transform: scale(1.12); }
/* Dark where the words are, open where they are not. */
.phero__bg .ph::before {
  background:
    linear-gradient(100deg, rgba(9, 14, 20,.95) 0%, rgba(9, 14, 20,.88) 28%, rgba(9, 14, 20,.52) 62%, rgba(9, 14, 20,.4) 100%),
    linear-gradient(180deg, rgba(9, 14, 20,.6) 0%, rgba(9, 14, 20,.26) 40%, rgba(9, 14, 20,.84) 100%);
}
.phero__bg .ph::after { opacity: .36; }
@media (max-width: 900px) {
  .phero__bg .ph::before {
    background: linear-gradient(180deg, rgba(9, 14, 20,.84) 0%, rgba(9, 14, 20,.74) 45%, rgba(9, 14, 20,.95) 100%);
  }
}
.phero .xh i { opacity: .55; }
.phero__h { max-width: 17ch; }

/* When the hero carries a photograph, the veiling is done by the image's own
   gradient overlay. The flat veil used by text-only heroes must step aside. */
.phero--pic .phero__veil {
  background:
    radial-gradient(90% 70% at 86% 6%, rgba(14,90,87,.16), transparent 62%),
    radial-gradient(70% 55% at 4% 94%, rgba(200,73,31,.12), transparent 60%);
}
.phero--pic .grat { opacity: .5; }

/* The photo helper wraps each image in <picture>, which is inline by default. */
.ph picture { display: block; width: 100%; height: 100%; }

/* ===========================================================================
   23. COMPOSITION
   ---------------------------------------------------------------------------
   The first build stacked rectangles. This layer breaks them.

   The organising device is the arc: the curve of the earth's limb and the
   orbits already drawn in the hero. It appears as a cut along a section edge,
   as a mask on a photograph, and as hairline orbital sweeps that bleed past
   the viewport. Nothing on a page about earth observation should be squared
   off at every edge.
   =========================================================================== */

/* --- Breaking the container ---------------------------------------------- */
/* An element that runs past the wrap to the viewport edge on one side. */
.bleed-r { margin-right: calc(var(--edge) * -1); }
.bleed-l { margin-left:  calc(var(--edge) * -1); }
.bleed-x { margin-inline: calc(var(--edge) * -1); }
@media (max-width: 900px) {
  .bleed-r, .bleed-l { margin-inline: calc(var(--gutter) * -1); }
}

/* Pull a section up into the one above it, so the two interlock. */
.lift   { margin-top: clamp(-120px, -7vw, -52px); position: relative; z-index: 2; }
.lift-l { margin-top: clamp(-220px, -13vw, -90px); position: relative; z-index: 2; }
@media (max-width: 760px) { .lift, .lift-l { margin-top: 0; } }

/* --- The arc cut --------------------------------------------------------- */
/*
 * A shallow dome along the top edge of a section: the horizon seen from
 * altitude. Drawn with an ellipse clip so it works over a photograph as well
 * as over a flat colour.
 */
.dome   { clip-path: ellipse(150% 100% at 50% 100%); }
.dome-b { clip-path: ellipse(150% 100% at 50% 0%); }
@supports not (clip-path: ellipse(150% 100% at 50% 100%)) {
  .dome, .dome-b { clip-path: none; }
}
@media (max-width: 700px) {
  .dome   { clip-path: ellipse(190% 100% at 50% 100%); }
  .dome-b { clip-path: ellipse(190% 100% at 50% 0%); }
}
/* A dome needs extra top padding, because its corners eat into the box. */
.dome.sec   { padding-top: calc(var(--pad-sec) + clamp(26px, 3.4vw, 64px)); }
.dome-b.sec { padding-bottom: calc(var(--pad-sec) + clamp(26px, 3.4vw, 64px)); }

/* --- Orbital sweeps ------------------------------------------------------ */
/*
 * Hairline arcs that pass behind the content and off both edges. They are the
 * same geometry as the orbits in the hero instrument, drawn still.
 */
.sweep {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sweep svg { position: absolute; left: 50%; transform: translateX(-50%); }
.sweep circle, .sweep ellipse { fill: none; vector-effect: non-scaling-stroke; }
.sweep--top svg    { top: -62%; width: 190%; height: auto; }
.sweep--bottom svg { bottom: -66%; width: 210%; height: auto; }
.sweep--mid svg    { top: 50%; width: 240%; height: auto; transform: translate(-50%, -50%); }

.sweep .s-line  { stroke: var(--rule); stroke-width: 1; }
.sweep .s-dash  { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 9; }
.sweep .s-sig   { stroke: var(--signal); stroke-width: 1; opacity: .5; }
.on-dark .sweep .s-line, .sec--ink .sweep .s-line, .sec--ink2 .sweep .s-line { stroke: var(--rule-dark); }
.on-dark .sweep .s-dash, .sec--ink .sweep .s-dash, .sec--ink2 .sweep .s-dash { stroke: rgba(243,240,233,.16); }
.on-dark .sweep .s-sig,  .sec--ink .sweep .s-sig,  .sec--ink2 .sweep .s-sig  { stroke: var(--signal-2); opacity: .45; }

/* Drawn in on entry, like the terrain ridge. */
.sweep [data-draw] { stroke-dasharray: 4000; stroke-dashoffset: 4000; }
.sweep.is-in [data-draw] { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease-out); }
.sweep.is-in [data-draw="2"] { transition-delay: .2s; }
.sweep.is-in [data-draw="3"] { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .sweep [data-draw] { stroke-dashoffset: 0; } }

/*
 * A section that carries sweeps needs its content lifted above them.
 * Only .wrap is raised: a blanket rule would force position:relative onto
 * absolutely positioned decoration such as .plate__bg and drop it into flow.
 */
.has-sweep { position: relative; isolation: isolate; }
.has-sweep > .sweep { z-index: 0; }
.has-sweep > .grat  { z-index: 1; }
.has-sweep > .wrap  { position: relative; z-index: 2; }
.has-sweep > .plate__bg { z-index: 0; }

/* --- The arch mask ------------------------------------------------------- */
/* A photograph cut to an arch: flat base, domed top. Used where a rectangle
   would be the fifth rectangle in a row. */
.arch { border-radius: 50vw 50vw 2px 2px / 34% 34% 2px 2px; overflow: hidden; }
.arch-s { border-radius: 50vw 50vw 2px 2px / 18% 18% 2px 2px; overflow: hidden; }
/* A full disc, for the one image per page that should echo the globe. */
.disc { border-radius: 50%; overflow: hidden; }

/* ===========================================================================
   24. MOSAIC
   A grid of deliberately unequal cells. Uniform cards read as a table; a
   mosaic reads as a composition.
   =========================================================================== */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
  grid-auto-flow: dense;
}
.mosaic > * { grid-column: span 2; }
/* The shape of each cell, repeating every eight so the rhythm does not
   become a pattern you can predict. */
.mosaic > :nth-child(8n+1) { grid-column: span 3; }
.mosaic > :nth-child(8n+2) { grid-column: span 3; }
.mosaic > :nth-child(8n+4) { grid-column: span 4; }
.mosaic > :nth-child(8n+7) { grid-column: span 4; }
@media (max-width: 1000px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaic > * { grid-column: span 2; }
  .mosaic > :nth-child(8n+1), .mosaic > :nth-child(8n+4) { grid-column: span 4; }
  .mosaic > :nth-child(8n+2), .mosaic > :nth-child(8n+7) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .mosaic { grid-template-columns: minmax(0, 1fr); }
  .mosaic > *, .mosaic > :nth-child(8n+1), .mosaic > :nth-child(8n+2),
  .mosaic > :nth-child(8n+4), .mosaic > :nth-child(8n+7) { grid-column: span 1; }
}

/* The mosaic cell itself: a photograph with the label sitting on it. */
.cell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-2);
  min-height: clamp(180px, 20vw, 260px);
  display: flex; align-items: flex-end;
}
.cell--tall { min-height: clamp(240px, 28vw, 380px); }
.cell .ph { position: absolute; inset: 0; z-index: 0; }
.cell .ph img { transition: transform 1.3s var(--ease-out), filter .8s var(--ease); }
.cell:hover .ph img { transform: scale(1.07); }
.cell__in {
  position: relative; z-index: 2;
  padding: clamp(16px, 1.7vw, 26px);
  width: 100%;
}
.cell__no {
  position: absolute; top: clamp(14px, 1.5vw, 22px); left: clamp(16px, 1.7vw, 26px); z-index: 2;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .18em;
  color: var(--paper); opacity: .72;
}
.cell h3 {
  /* Was a ramp of its own that landed within a pixel of --fs-h5 and of the
     approach step beside it. Three sizes doing one job is drift. */
  font-size: var(--fs-h5);
  font-weight: 600; letter-spacing: -.018em; line-height: 1.2;
  color: var(--paper); margin-bottom: 6px;
}
.cell p {
  font-size: var(--fs-small); line-height: 1.5; color: var(--haze);
  max-width: 42ch;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease-out);
  max-height: 0; overflow: hidden;
}
.cell:hover p, .cell:focus-within p { opacity: 1; transform: none; max-height: 10em; }
@media (hover: none) { .cell p { opacity: 1; transform: none; max-height: 10em; } }
.cell__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal-2);
}
.cell__go .ic { width: 14px; height: 14px; transition: transform .4s var(--ease-out); }
.cell:hover .cell__go .ic { transform: translateX(4px); }
.cell a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
/* A permanent wash so the label always reads, deepening on hover. */
.cell__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 14, 20,.12) 0%, rgba(9, 14, 20,.2) 42%, rgba(9, 14, 20,.88) 100%);
  transition: background .5s var(--ease);
}
.cell:hover .cell__wash {
  background: linear-gradient(180deg, rgba(9, 14, 20,.3) 0%, rgba(9, 14, 20,.52) 42%, rgba(9, 14, 20,.94) 100%);
}

/* ===========================================================================
   25. EDITORIAL DIVISION BLOCKS
   The four divisions as alternating, overlapping spreads rather than a list
   beside a sticky image.
   =========================================================================== */
.spread {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  padding-block: clamp(56px, 8vw, 150px);
}
.spread + .spread { padding-top: 0; }

.spread__fig { position: relative; grid-row: 1; }
.spread__body { position: relative; grid-row: 1; z-index: 2; }

/* Odd spreads: image left and bleeding off, copy right and overlapping it. */
.spread:nth-child(odd) .spread__fig  { grid-column: 1 / 8; margin-left: calc(var(--edge) * -1); }
.spread:nth-child(odd) .spread__body { grid-column: 7 / 13; }
/* Even spreads: mirrored. */
.spread:nth-child(even) .spread__fig  { grid-column: 6 / 13; margin-right: calc(var(--edge) * -1); }
.spread:nth-child(even) .spread__body { grid-column: 1 / 7; }

.spread__fig .ph { width: 100%; height: 100%; }
.spread__pic { position: relative; aspect-ratio: 4 / 3.1; overflow: hidden; }
.spread:nth-child(odd) .spread__pic  { border-radius: 0 50vw 50vw 0 / 0 28% 28% 0; }
.spread:nth-child(even) .spread__pic { border-radius: 50vw 0 0 50vw / 28% 0 0 28%; }

/* The copy sits in a plate so it reads where it overlaps the photograph. */
.spread__plate {
  background: var(--ink);
  padding: clamp(26px, 3.2vw, 52px);
  border: 1px solid var(--rule-dark);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.9);
}
.sec--paper .spread__plate, .sec--paper2 .spread__plate {
  background: var(--paper);
  border-color: var(--rule);
}

.spread__no {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px;
}
.spread__no b {
  font-family: var(--mono); font-size: clamp(26px, 2.6vw, 40px); font-weight: 400;
  letter-spacing: -.04em; line-height: 1; color: var(--signal);
}
.spread__no span {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate);
}
.spread h3 { font-size: clamp(30px, 2.9vw, 52px); letter-spacing: -.038em; margin-bottom: 14px; }
.spread__lede { font-size: var(--fs-lead); line-height: 1.44; color: var(--haze); margin-bottom: 14px; max-width: 32ch; }
.sec--paper .spread__lede { color: var(--ink-3); }
.spread__body p.quiet { font-size: var(--fs-small); line-height: 1.68; max-width: 44ch; }
.spread__lines { display: grid; margin: 22px 0; }
.spread__lines a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--rule-dark);
  color: var(--haze); font-size: var(--fs-small);
  transition: color .3s var(--ease), padding-left .4s var(--ease-out);
}
.sec--paper .spread__lines a { border-top-color: var(--rule); color: var(--graphite); }
.spread__lines a:hover { color: var(--paper); padding-left: 8px; }
.sec--paper .spread__lines a:hover { color: var(--ink); }
.spread__lines .ic { width: 16px; height: 16px; color: var(--slate); transition: color .3s var(--ease), transform .4s var(--ease-out); }
.spread__lines a:hover .ic { color: var(--signal-2); transform: translateX(4px); }

/* The glyph floats over the join between image and copy. */
.spread__glyph {
  position: absolute; z-index: 3;
  width: clamp(72px, 7vw, 118px); height: clamp(72px, 7vw, 118px);
  color: var(--signal-2);
  opacity: .9;
  pointer-events: none;
}
.spread__glyph .glyph { width: 100%; height: 100%; stroke-width: 1; }
.spread:nth-child(odd) .spread__glyph  { left: 46%; top: clamp(26px, 5vw, 70px); }
.spread:nth-child(even) .spread__glyph { right: 46%; top: clamp(26px, 5vw, 70px); }

@media (max-width: 980px) {
  .spread { grid-template-columns: minmax(0, 1fr); padding-block: clamp(40px, 7vw, 80px); }
  .spread + .spread { padding-top: clamp(40px, 7vw, 80px); border-top: 1px solid var(--rule-dark); }
  .sec--paper .spread + .spread { border-top-color: var(--rule); }
  .spread__fig, .spread__body { grid-row: auto; }
  .spread:nth-child(odd) .spread__fig, .spread:nth-child(even) .spread__fig {
    grid-column: 1 / -1; margin-inline: calc(var(--gutter) * -1); margin-bottom: 0;
  }
  .spread:nth-child(odd) .spread__body, .spread:nth-child(even) .spread__body { grid-column: 1 / -1; }
  .spread__pic { aspect-ratio: 16 / 10; }
  .spread:nth-child(odd) .spread__pic, .spread:nth-child(even) .spread__pic { border-radius: 0; }
  .spread__plate { margin-top: clamp(-56px, -6vw, -30px); margin-inline: 0; }
  .spread__glyph { display: none; }
}

/* ===========================================================================
   26. STAGGER
   Cards that sit at different heights, so a row stops reading as a row.
   =========================================================================== */
@media (min-width: 900px) {
  .stagger > :nth-child(3n+2) { transform: translateY(clamp(20px, 3vw, 54px)); }
  .stagger > :nth-child(3n+3) { transform: translateY(clamp(10px, 1.6vw, 26px)); }
}

/* ===========================================================================
   27. HERO, RECOMPOSED
   The globe is no longer a column beside the text. It is the page, bleeding
   past the right edge, with the headline crossing in front of it.
   =========================================================================== */
/* The instrument is meant to run past the right edge, so the hero clips it
   there rather than letting it widen the document. */
.hero { min-height: min(108vh, 1040px); overflow: hidden; }
.hero__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

.hero__inst-wrap {
  position: absolute;
  top: 50%; right: 0;
  transform: translate(22%, -54%);
  width: min(78vh, 46vw);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.hero__copy { position: relative; z-index: 2; max-width: 56ch; }
.hero__h { max-width: 13ch; }

/* The headline crosses the globe, so it gets a soft shadow to stay readable. */
.hero__h, .hero__p { text-shadow: 0 2px 40px rgba(9, 14, 20,.75), 0 1px 4px rgba(9, 14, 20,.5); }

.inst { width: 100%; margin: 0; }

@media (max-width: 1180px) {
  .hero__inst-wrap { transform: translate(30%, -52%); width: min(70vh, 56vw); opacity: .9; }
  .hero__copy { max-width: 46ch; }
}
@media (max-width: 900px) {
  .hero { min-height: auto; padding-bottom: clamp(30px, 5vh, 60px); }
  .hero__inst-wrap {
    position: relative; top: auto; right: auto; transform: none;
    width: min(94%, 460px); margin: clamp(26px, 5vh, 54px) auto 0;
    order: 2;
  }
  .hero__wrap { order: 1; }
  .hero__h, .hero__p { text-shadow: none; }
  .hero__copy { max-width: none; }
}

@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--hdr-h) + 36px);
    padding-bottom: 48px;
  }
  .hero__inst-wrap {
    width: min(88%, 340px);
    margin-top: 28px;
  }
  .hero__h {
    font-size: clamp(34px, 9.5vw, 56px);
    letter-spacing: -.028em;
    margin-bottom: 16px;
  }
  .hero__p {
    font-size: clamp(15px, 4.2vw, 19px);
    margin-bottom: 24px;
  }
  .hero__btns {
    flex-direction: column;
    gap: 10px;
  }
  .hero__btns .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin-top: 32px;
    padding-top: 20px;
  }
}

@media (max-width: 400px) {
  .hero__inst-wrap { width: min(92%, 300px); }
  .hero__h { font-size: clamp(30px, 8.5vw, 44px); }
}

/* ===========================================================================
   28. FIGURE PLATES
   A statistic or a quote sitting on a photograph that bleeds off one edge.
   =========================================================================== */
.quoteblock {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}
.quoteblock__fig { grid-column: 1 / 7; grid-row: 1; margin-left: calc(var(--edge) * -1); }
.quoteblock__pic { aspect-ratio: 1; border-radius: 0 50vw 50vw 0 / 0 50% 50% 0; overflow: hidden; }
.quoteblock__fig .ph { width: 100%; height: 100%; }
.quoteblock__body { grid-column: 7 / 13; grid-row: 1; z-index: 2; padding-left: clamp(0px, 2vw, 40px); }
@media (max-width: 900px) {
  .quoteblock { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 40px); }
  .quoteblock__fig { grid-column: 1; grid-row: 1; margin-inline: calc(var(--gutter) * -1); }
  .quoteblock__pic { aspect-ratio: 16/10; border-radius: 0; }
  .quoteblock__body { grid-column: 1; grid-row: 2; padding-left: 0; }
}

/* ===========================================================================
   29. SOFTENING THE REST
   =========================================================================== */
/* Section edges stop being hard lines where a dome or a sweep is not used. */
.sec--rule-t, .sec--rule-b { border-color: transparent; }
.sec--rule-t::before, .sec--rule-b::after {
  content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--maxw)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 18%, var(--rule) 82%, transparent);
}
.sec--rule-t::before { top: 0; }
.sec--rule-b::after { bottom: 0; }
.sec--ink.sec--rule-t::before, .sec--ink2.sec--rule-t::before { background: linear-gradient(90deg, transparent, var(--rule-dark) 18%, var(--rule-dark) 82%, transparent); }

/* The tile grid loses its hard outer border and 1px gutters. */
.tiles { background: none; border: 0; gap: clamp(12px, 1.3vw, 22px); }
.tile { border: 1px solid var(--rule); }
.tile__fig { aspect-ratio: 3 / 2; }

/* Insight cards: the figure takes the arch, so the row of three is not three
   identical rectangles. */
.post__fig { border-radius: 50vw 50vw 2px 2px / 14% 14% 2px 2px; }
.post--lead .post__fig { border-radius: 50vw 50vw 2px 2px / 9% 9% 2px 2px; }

/* The division glyph on a dark plate. */
.spread__plate .label { color: var(--mist); }

/* Body copy on the dark spread plate sits at --mist, which is legible but
   thin at this size. Lift it. */
.sec--ink .spread__plate p.quiet,
.sec--ink2 .spread__plate p.quiet { color: var(--haze); }
.spread__plate .spread__lede { color: var(--paper); }
.sec--paper .spread__plate .spread__lede { color: var(--ink-3); }

/* ===========================================================================
   30. ROBOTO
   ---------------------------------------------------------------------------
   The type system is Google's: Roboto for everything structural, Roboto Mono
   for the index labels and technical register, Roboto Serif for the one
   italic that carries the editorial voice. One family, three jobs.

   Roboto is narrower and more open than the grotesque it replaces, so the
   tracking comes back toward neutral and the display weights step up: at
   these sizes Roboto Medium reads as authority where Regular reads as thin.
   =========================================================================== */
:root {
  --fs-h1:   clamp(36px, 1.2rem + 3.5vw, 72px);
  --fs-h2:   clamp(28px, 1.25rem + 1.65vw, 46px);
  --fs-h3:   clamp(23px, 1.18rem + .9vw, 33px);
  --fs-h4:   clamp(19px, 1.04rem + .5vw, 25px);
  --fs-lead: clamp(17px, 1rem + .34vw, 21px);
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-weight: 500;
  letter-spacing: -.018em;
}
.h1, h1 { letter-spacing: -.026em; line-height: 1.04; }
.h2, h2 { letter-spacing: -.022em; line-height: 1.1; }
.h3, h3 { letter-spacing: -.018em; line-height: 1.16; }
.h4, h4 { letter-spacing: -.014em; }
.h5, h5 { letter-spacing: -.006em; font-weight: 500; }
.mega   { letter-spacing: -.035em; font-weight: 500; }

body { font-weight: 400; letter-spacing: 0; }
.lead { letter-spacing: -.005em; line-height: 1.55; }

/* Roboto Mono sits a shade wider than the mono it replaces, so the tracking
   on the index labels comes down to stop them sprawling. */
.label, .idx, .tag, .btn, .lk,
.figs__l, .crumbs, .figcap, .cell__no, .tile__no { letter-spacing: .11em; }
.label { font-weight: 500; }

/* The hero headline is the one place that takes Roboto's heaviest cut. */
.hero__h { font-weight: 500; letter-spacing: -.03em; line-height: 1.0; }
.hero__h em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.012em; }
.pull { letter-spacing: -.008em; line-height: 1.38; }

/* Section heads: a touch more weight reads as corporate rather than literary. */
.shead__title { font-weight: 500; }
.spread h3, .dpanel h3 { font-weight: 500; }
.cap__t, .tile h3, .cell h3, .post__t, .prin h3, .del b, .secrow b { font-weight: 500; }
.step h3 { font-weight: 500; }

/* ===========================================================================
   31. THE ROTATING EARTH
   ---------------------------------------------------------------------------
   A seamless double-width equirectangular map (NASA Blue Marble, public
   domain) translated across a circular mask. Four layers sit over it so it
   reads as a lit body in space rather than a scrolling strip:

     map        the surface, turning
     terminator the day/night line, warm on the lit side
     shade      specular highlight and limb darkening
     rim        the atmosphere seen edge on

   Anything that moves is on its own compositing layer and nothing animates
   a property that would force layout.
   =========================================================================== */
.globe {
  position: absolute; inset: 11.5%;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #0a1826 0%, #040a12 100%);
  box-shadow:
    inset -26px -20px 60px 4px rgba(0, 0, 0, .86),
    inset 14px 11px 40px -6px rgba(150, 205, 255, .16);
}
.globe__map {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 200%;
  background-image: image-set(url("../img/photo/earth-map.webp") type("image/webp"),
                              url("../img/photo/earth-map.jpg")  type("image/jpeg"));
  background-image: -webkit-image-set(url("../img/photo/earth-map.webp") type("image/webp"),
                                      url("../img/photo/earth-map.jpg")  type("image/jpeg"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: spin 110s linear infinite;
  will-change: transform;
  /* The surface is graded to the house palette rather than left as raw NASA. */
  filter: saturate(1.08) contrast(1.06) brightness(1.02);
}
@supports not (background-image: image-set(url("a.webp") type("image/webp"))) {
  .globe__map { background-image: url("../img/photo/earth-map.jpg"); }
}
@keyframes spin { to { transform: translate3d(-50%, 0, 0); } }

/* The day/night line: a soft sweep with a warm edge where the sun catches
   the atmosphere, drifting slower than the surface so the two never lock. */
.globe__term {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(104deg,
      rgba(2, 5, 10, 0) 0%,
      rgba(2, 5, 10, 0) 38%,
      rgba(200, 73, 31, .14) 50%,
      rgba(2, 5, 10, .58) 62%,
      rgba(1, 3, 7, .88) 100%);
  animation: term 220s linear infinite;
  will-change: transform;
}
@keyframes term { to { transform: translate3d(12%, 0, 0); } }

/* Specular lift at the top left, hard darkening at the limb. */
.globe__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(circle at 30% 24%, rgba(222, 242, 255, .3) 0%, rgba(222, 242, 255, .07) 24%, transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(2, 6, 12, .3) 66%, rgba(2, 6, 12, .86) 92%, rgba(0,0,0,.95) 100%);
}

/* Atmosphere: a bright hairline on the lit limb, falling away to nothing. */
.globe__rim {
  position: absolute; inset: -1px; z-index: 4; pointer-events: none;
  border-radius: 50%;
  box-shadow:
    inset 0 0 2px 1px rgba(142, 212, 226, .55),
    inset 8px 6px 26px -10px rgba(190, 232, 255, .5),
    0 0 30px -4px rgba(26, 131, 126, .5);
}

/* A still field of stars behind the planet, so it sits in space rather than
   on a flat panel. Drawn with gradients, no image. */
.inst__glow {
  position: absolute; inset: -6%; z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 74% 14%, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 88% 62%, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 12% 74%, rgba(255,255,255,.34) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 44% 92%, rgba(255,255,255,.3) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 62% 6%,  rgba(255,255,255,.3) 50%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(26,131,126,.26) 36%, rgba(26,131,126,.08) 50%, transparent 62%),
    radial-gradient(circle at 32% 26%, rgba(200,73,31,.12) 0%, transparent 44%);
  animation: glowPulse 11s var(--ease) infinite alternate;
}
@keyframes glowPulse { from { opacity: .78; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .globe__map, .globe__term, .inst__glow { animation: none; }
}

/* ===========================================================================
   32. THE HERO ON A PHONE
   ---------------------------------------------------------------------------
   Stacking the instrument under the copy pushed the hero past 1300px on a
   375px screen: a whole screen of scrolling before anything was said. The
   globe becomes a backdrop instead, cropped by the right edge and sitting
   behind the words, so the hero is one screen again.
   =========================================================================== */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--hdr-h) + clamp(30px, 7vh, 64px));
    padding-bottom: clamp(34px, 6vh, 64px);
    justify-content: flex-start;
  }
  .hero__inst-wrap {
    position: absolute;
    top: clamp(96px, 17vh, 190px);
    right: clamp(-150px, -26vw, -80px);
    bottom: auto; left: auto;
    transform: none;
    width: min(86vw, 440px);
    margin: 0;
    opacity: .5;
    z-index: 0;
  }
  .hero__copy { position: relative; z-index: 2; }
  .hero__h { max-width: 15ch; }
  .hero__p { max-width: 38ch; }
  /* The readouts belong to the desktop composition; on a phone they collide. */
  .inst__read { display: none; }
  .hero__rail {
    position: relative; z-index: 2;
    margin-top: clamp(30px, 5vh, 52px);
    padding-top: clamp(16px, 2.6vh, 24px);
  }
  .hero__rail div { font-size: 10.5px; letter-spacing: .08em; }
}

/* Buttons: full width stacked at this size reads as a form, not a hero.
   Keep them side by side while they fit, and shorten them. */
@media (max-width: 900px) {
  .hero__btns { gap: 10px; }
  .hero__btns .btn--lg { padding: 14px 18px; font-size: var(--fs-micro); }
}
@media (max-width: 420px) {
  .hero__btns { flex-direction: column; align-items: stretch; }
  .hero__btns .btn { justify-content: center; }
}

/* ===========================================================================
   33. GENERAL MOBILE TIGHTENING
   =========================================================================== */
@media (max-width: 760px) {
  :root {
    --pad-sec: clamp(56px, 11vw, 88px);
    --pad-sec-s: clamp(40px, 8vw, 64px);
  }
  /* Section heads stop wasting a third of the screen on a label. */
  .shead { padding-bottom: clamp(26px, 6vw, 40px); }
  .shead__label { margin-bottom: 12px; }
  .shead__title { max-width: none; }

  /* Long mono labels wrap badly in narrow columns. */
  .label { font-size: 10.5px; letter-spacing: .14em; }
  .idx { font-size: 10.5px; }

  /* The capability index: number, title and arrow, with the description
     under them rather than squeezed beside. */
  .cap { padding-block: 18px; }
  .cap__d { font-size: 13.5px; }
  .cap:hover, .cap:focus-within { padding-left: 0; }

  /* Pull quotes were sized for a desktop measure. */
  .pull { font-size: clamp(19px, 4.6vw, 26px); line-height: 1.34; }

  /* Hairline tables of two columns become one. */
  .prins, .secs { grid-template-columns: minmax(0, 1fr); }
  .del { gap: 6px; }

  /* The approach spine and its numbers. */
  .step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .spine::before, .spine::after { left: 13px; }
  .step__no { font-size: 17px; }

  /* Figures read better as two rows of two than a cramped four. */
  .figs__n { font-size: clamp(32px, 9vw, 44px); }
  .figs__i { padding: 20px 14px; }

  /* Cards and tiles. */
  .tile__fig { aspect-ratio: 16 / 9; }
  .post__fig { border-radius: 50vw 50vw 2px 2px / 10% 10% 2px 2px; }
  .posts { gap: 30px; }

  /* Article furniture. */
  .art { gap: 30px; }
  .takeaways { padding: 18px; }
  .rte blockquote { padding-left: 16px; }

  /* Forms get full-width controls and a comfortable tap target. */
  .btn { padding: 14px 18px; }
  .btn--lg { padding: 15px 20px; }
  .field input, .field select, .field textarea { font-size: 16px; } /* no iOS zoom */
}

/* Tap targets on anything interactive that was sized for a pointer. */
@media (hover: none) {
  .art__share a, .art__share button, .foot__soc a { width: 44px; height: 44px; }
  .pager__n { min-width: 44px; height: 44px; }
}

/* Mobile drawer: give the links room to be tapped. */
@media (max-width: 1080px) {
  .dacc__b { padding: 17px 0; }
  .dacc__p a { padding: 12px 0 12px 14px; }
}

/* The globe sits behind the words on a phone, so the copy gets its own
   scrim rather than relying on the image being dark enough. */
@media (max-width: 900px) {
  .hero__wrap::before {
    content: "";
    position: absolute;
    inset: -8% -6% -4% -6%;
    z-index: 0;
    background:
      linear-gradient(100deg, rgba(9, 14, 20,.97) 0%, rgba(9, 14, 20,.9) 46%, rgba(9, 14, 20,.6) 78%, rgba(9, 14, 20,.42) 100%);
    pointer-events: none;
  }
  .hero__wrap { position: relative; }
  .hero__inst-wrap { opacity: .62; }
}

/* ===========================================================================
   34. HERO, DISCIPLINED
   ---------------------------------------------------------------------------
   The previous hero floated the instrument outside the container with a
   transform, so the globe, its readouts and the headline answered to three
   different coordinate systems and the result read as scatter. Everything now
   sits on the same twelve columns: copy in 1 to 6, instrument in 8 to 12,
   rail across all of them. This block is last in the file and supersedes the
   earlier hero rules.
   =========================================================================== */
.hero {
  min-height: min(94vh, 960px);
  padding-top: calc(var(--hdr-h) + clamp(40px, 6vh, 86px));
  padding-bottom: clamp(36px, 5vh, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero__wrap { position: relative; z-index: 3; width: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
}
.hero__copy { grid-column: 1 / 7; max-width: none; }
.hero__fig  { grid-column: 8 / 13; }

/* The headline no longer crosses the globe, so it needs no shadow to survive. */
.hero__h, .hero__p { text-shadow: none; }
.hero__eyebrow { margin-bottom: clamp(18px, 2.2vw, 30px); }
.hero__h {
  font-size: clamp(34px, 1rem + 3.1vw, 62px);
  line-height: 1.04;
  letter-spacing: -.028em;
  max-width: 14ch;
  margin-bottom: clamp(18px, 2vw, 26px);
}
.hero__p {
  font-size: clamp(16px, .96rem + .26vw, 19px);
  line-height: 1.6;
  max-width: 44ch;
  margin-bottom: clamp(24px, 2.6vw, 34px);
}
.hero__btns { gap: 12px; }

/* The instrument fills its column and nothing more. */
.inst {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 0 0 auto;
  aspect-ratio: 1;
}
.inst__read { display: none; }

/* One caption line under the globe, aligned to the same column edges as the
   instrument above it. */
.hero__coords {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 520px;
  margin: clamp(14px, 1.6vw, 22px) 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
}
.hero__coords b { color: var(--signal-2); font-weight: 500; }

/* The rail closes the hero on the same grid. */
.hero__rail {
  position: relative; z-index: 3;
  margin-top: clamp(40px, 6vh, 78px);
  padding-top: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
.hero__rail div { align-items: baseline; }

@media (max-width: 1080px) {
  .hero__copy { grid-column: 1 / 8; }
  .hero__fig  { grid-column: 8 / 13; }
  .inst { max-width: 420px; }
  .hero__coords { max-width: 420px; }
}

/* Below the split, the instrument becomes a backdrop again rather than a
   stacked block, which is what kept the phone hero to one screen. */
@media (max-width: 900px) {
  .hero { min-height: auto; justify-content: flex-start; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__copy { grid-column: 1; }
  .hero__fig {
    grid-column: 1;
    position: absolute;
    top: clamp(84px, 15vh, 170px);
    right: clamp(-150px, -26vw, -80px);
    width: min(84vw, 420px);
    opacity: .5;
    z-index: 0;
    pointer-events: none;
  }
  .inst { max-width: none; }
  .hero__coords { display: none; }
  .hero__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}
@media (max-width: 360px) {
  .hero__rail { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   35. SPREADS, DISCIPLINED
   ---------------------------------------------------------------------------
   The division glyph used to float at a percentage offset over the join
   between photograph and plate, answering to nothing on the grid. It now sits
   in the plate header beside the division number, where it has a job. The
   vertical rhythm is tightened so the spreads read as a sequence rather than
   as four unrelated arrangements.
   =========================================================================== */
.spread__glyph { display: none; }

.spread__no {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-dark);
}
.sec--paper .spread__no, .sec--paper2 .spread__no { border-bottom-color: var(--rule); }
.spread__no b { line-height: 1; }
.spread__no > span:first-of-type { flex: 1; min-width: 0; }
.spread__mark {
  flex: none;
  width: clamp(34px, 3vw, 46px);
  height: clamp(34px, 3vw, 46px);
  color: var(--signal-2);
  opacity: .85;
}
.spread__mark .glyph { width: 100%; height: 100%; stroke-width: 1.2; }

/* A tighter, more even sequence. */
.spread { padding-block: clamp(40px, 5vw, 86px); }
.spread:first-child { padding-top: clamp(24px, 3vw, 48px); }

/* The plate overlaps the photograph by exactly one column, not by a
   percentage that drifts with the viewport. */
.spread:nth-child(odd)  .spread__body { grid-column: 7 / 13; }
.spread:nth-child(even) .spread__body { grid-column: 1 / 7; }
.spread:nth-child(odd)  .spread__fig  { grid-column: 1 / 8; }
.spread:nth-child(even) .spread__fig  { grid-column: 6 / 13; }

@media (max-width: 980px) {
  .spread { padding-block: clamp(32px, 6vw, 56px); }
  .spread:first-child { padding-top: 0; }

  /* The column assignments above are written for the twelve-column
     composition and, sitting later in the file, they were beating the
     stacking rules in section 25. The result on every screen under 980px
     was a photograph squeezed into the first seven columns of a grid that
     no longer had seven columns: a 98px sliver with the plate on top of
     it. These put the stack back. */
  .spread { grid-template-columns: minmax(0, 1fr); }

  /* Full width, a 16:10 photograph is half a tablet screen of picture before
     a word of the division is read. Cap it and let the crop do the work. */
  .spread__pic { aspect-ratio: auto; width: 100%; height: clamp(190px, 30vh, 360px); }
  /* The lede was measured for a six-column plate. Across a full-width one it
     wrapped at under half the width of the links beneath it. */
  .spread__lede { max-width: 54ch; }
  .spread:nth-child(odd)  .spread__fig,
  .spread:nth-child(even) .spread__fig {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-inline: calc(var(--gutter) * -1);
    margin-bottom: 0;
  }
  .spread:nth-child(odd)  .spread__body,
  .spread:nth-child(even) .spread__body {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ===========================================================================
   36. THE CAPABILITY INDEX
   ---------------------------------------------------------------------------
   The photograph used to follow the cursor around the viewport, detached from
   the row it belonged to. It now lives inside the row: a panel on the right
   that wipes in behind the text, fading out to the left so the type keeps its
   contrast. Nothing leaves the frame of the item.
   =========================================================================== */
.cap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-right: clamp(14px, 2vw, 28px);
  padding-left: clamp(14px, 2vw, 28px);
  margin-inline: clamp(-28px, -2vw, -14px);
}
.cap::before { left: 0; right: 0; }     /* the ink fill now matches the row box */

.cap__pic {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: clamp(220px, 38%, 480px);
  z-index: 0;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transition: opacity .5s var(--ease), clip-path .66s var(--ease-out);
  pointer-events: none;
}
.cap__pic .ph { position: absolute; inset: 0; }
.cap__pic .ph img { transform: scale(1.06); transition: transform 1.4s var(--ease-out); filter: grayscale(.4) contrast(1.06) brightness(.92) saturate(1.12); }
.cap__pic .ph::before { opacity: .35; }
/* Feathered on the left so it reads as part of the row, not a pasted tile. */
.cap__pic::after {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(9, 14, 20,.88) 16%, rgba(9, 14, 20,.4) 52%, rgba(9, 14, 20,.08) 100%);
}
.cap:hover .cap__pic, .cap:focus-within .cap__pic {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
.cap:hover .cap__pic .ph img { transform: scale(1); }

/* Content sits above the panel. */
.cap > *:not(.cap__pic) { position: relative; z-index: 2; }
.cap__head { min-width: 0; }

/* The description needs room to clear the panel on wide screens. */
@media (min-width: 901px) {
  .cap { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.05fr) 48px; }
}
@media (hover: none) {
  /* No hover on a phone, so the panel is simply never shown. */
  .cap__pic { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cap__pic { transition: opacity .2s linear; clip-path: none; }
}

/* ===========================================================================
   37. THE TRACK
   ---------------------------------------------------------------------------
   The five stages as a horizontal run rather than five full-width rows. The
   same information in roughly a fifth of the height, and the sequence is
   legible at a glance, which is what a sequence is for. The connecting rule
   draws itself as the section arrives.
   =========================================================================== */
.track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 30px);
  counter-reset: track;
  position: relative;
  padding-top: 34px;
}
/* One rule across the top, with a tick above each stage. */
.track::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 10px; height: 1px;
  background: var(--rule);
}
.track__s { position: relative; }
.track__s::before {
  content: "";
  position: absolute; left: 0; top: -24px;
  width: 9px; height: 9px;
  background: var(--paper2, var(--paper));
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.track__s:hover::before { background: var(--signal); border-color: var(--signal); }

.track__n {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  color: var(--signal-text);
  margin-bottom: 10px;
}
.track h3 {
  font-size: var(--fs-h5);
  font-weight: 500;
  letter-spacing: -.012em;
  margin-bottom: 8px;
}
.track p {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--graphite);
  margin-bottom: 12px;
}
.track__out {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1;
}
@media (max-width: 1000px) {
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .track::before { display: none; }
  .track__s::before { display: none; }
  .track { padding-top: 0; }
}
@media (max-width: 520px) {
  .track { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   38. PRINCIPLES, COMPACT
   Six commitments in three columns rather than two, so the block is half the
   height without losing any of them.
   =========================================================================== */
@media (min-width: 901px) {
  .prins { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(26px, 3vw, 52px); }
  .prin { padding-block: clamp(20px, 2.2vw, 30px); }
  .prin p { font-size: 13.5px; line-height: 1.6; }
}

/* ===========================================================================
   39. END BARS
   ---------------------------------------------------------------------------
   A short line of reassurance and a way to act, placed at the two points a
   reader is most likely to have decided: after the divisions and after the
   ten lines. Without these the only route to contact is the masthead or the
   very bottom of a long page.
   =========================================================================== */
.endbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
  flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 64px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--rule-dark);
}
.endbar p {
  flex: 1 1 32ch;
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--mist);
  max-width: 58ch;
}
.endbar .btns { flex: 0 0 auto; }
.endbar--light { border-top-color: var(--rule); }
.endbar--light p { color: var(--graphite); }
@media (max-width: 760px) {
  .endbar { flex-direction: column; align-items: stretch; }
  /* flex-basis is written for a row. Once the direction flips it becomes a
     height, and 32ch of height is three hundred pixels of nothing between
     the sentence and the buttons it belongs to. */
  .endbar p { flex: 0 0 auto; }
  .endbar .btns { width: 100%; }
}

/* ===========================================================================
   40. VERTICAL ECONOMY
   ---------------------------------------------------------------------------
   The page carried up to 320px of padding per section, which across nine
   sections is close to three screens of nothing. The rhythm is still generous
   but it no longer makes the reader work for it.
   =========================================================================== */
:root {
  --pad-sec:   clamp(64px, 6.4vw, 118px);
  --pad-sec-s: clamp(44px, 4.4vw, 80px);
}
.shead { padding-bottom: clamp(28px, 3.2vw, 50px); }

/* The division spreads keep their composition, with less air between them. */
.spread { padding-block: clamp(32px, 3.6vw, 62px); }
.spread:first-child { padding-top: clamp(16px, 2vw, 32px); }

/* Dome sections add padding to clear their curve; keep that but trim it. */
.dome.sec   { padding-top: calc(var(--pad-sec) + clamp(20px, 2.4vw, 44px)); }
.dome-b.sec { padding-bottom: calc(var(--pad-sec) + clamp(20px, 2.4vw, 44px)); }

/* ===========================================================================
   41. VERTICAL ECONOMY, SECOND PASS
   ---------------------------------------------------------------------------
   The page was still asking for thirteen screens. Nothing here removes
   content; it removes the air around it. The division spreads keep their
   composition and simply stop being three quarters of a screen tall each.
   =========================================================================== */

/* Spreads: a wider photograph is a shorter one at the same column width. */
.spread__pic { aspect-ratio: 16 / 10; }
.spread { padding-block: clamp(26px, 2.8vw, 48px); }
.spread h3 { font-size: clamp(27px, 2.3vw, 42px); margin-bottom: 10px; }
.spread__lede { margin-bottom: 10px; }
.spread__plate { padding: clamp(22px, 2.4vw, 38px); }
.spread__lines { margin: 16px 0; }
.spread__lines a { padding: 10px 0; }
.spread__no { padding-bottom: 12px; margin-bottom: 14px; }

/* The capability rows. Ten of them, so a few pixels each adds up. */
.cap { padding-block: clamp(18px, 1.9vw, 26px); }

/* Mosaic cells no longer need to be this tall now there are six of them. */
.cell { min-height: clamp(160px, 16vw, 210px); }
.cell--tall { min-height: clamp(200px, 21vw, 280px); }

/* Insight cards. */
.post__fig { aspect-ratio: 16 / 9; }
.post__rule { padding-top: 14px; }

/* Section heads were taking a fifth of every section before a word of it. */
.shead { padding-bottom: clamp(22px, 2.4vw, 38px); }
.shead__label { margin-bottom: clamp(12px, 1.3vw, 18px); }

/* The closing band and the figures strip. */
.cta__in { padding-block: clamp(48px, 5vw, 86px); }
.figs__i { padding-block: clamp(20px, 2.2vw, 30px); }

/* No parallax under the split, so the images need no headroom to travel in. */
@media (max-width: 760px) {
  [data-parallax] img { transform: none; }
  .ph img { transform: scale(1.02); }
  .ph.is-loaded img { transform: none; }
}

/* ===========================================================================
   42. DRAFT PREVIEW BAR
   Only ever seen by somebody holding a signed link out of the control room,
   so it says plainly what it is and gets out of the way.
   =========================================================================== */
.prevbar{position:sticky;top:0;z-index:70;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
         padding:11px clamp(18px,4vw,42px);background:var(--signal);color:var(--ink);
         font:400 13px/1.45 var(--sans)}
.prevbar b{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.prevbar span{flex:1;min-width:220px;opacity:.95}
.prevbar a{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
           border-bottom:1px solid rgba(9,14,20,.5);padding-bottom:2px}
.prevbar a:hover{border-color:var(--ink)}

/* ===========================================================================
   43. BLOCKS THE EDITOR CAN SET
   The writing surface offers a pull quote, a note panel and a full-measure
   figure. Each needs to mean the same thing on the published page as it did
   in the editor, so the two stylesheets are deliberately kept in step.
   =========================================================================== */
.rte blockquote.pull {
  margin: 2.2em 0;
  padding-left: clamp(22px, 3.4vw, 42px);
  border-left-width: 3px;
  font-size: clamp(23px, 1.2rem + 1vw, 32px);
  line-height: 1.32;
  letter-spacing: -.015em;
}
.rte div.note {
  margin: 2.1em 0;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  background: var(--paper-2);
  border-left: 2px solid var(--graphite);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-3);
}
.rte div.note > * + * { margin-top: .9em; }
.rte div.note p { max-width: none; }

.rte figure.wide { width: 100%; }
@media (min-width: 1180px) {
  .rte figure.wide { width: calc(100% + 64px); margin-left: -32px; }
  .rte figure.wide figcaption { padding-left: 32px; }
}

/* A table wider than a phone scrolls rather than bursting the column. */
@media (max-width: 620px) {
  .rte table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rte th, .rte td { white-space: nowrap; }
}

/* A strip whose number of figures is not known in advance: the engagement
   pages carry between one and five. */
.figs--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.figs--auto .figs__n { font-size: clamp(30px, 1.4rem + 1.6vw, 52px); }

/* ===========================================================================
   44. CARD ROWS ON A PHONE
   A list of three articles at the foot of the home page does not need three
   large photographs stacked vertically. Below 640px the card turns on its
   side: a square thumbnail, the title beside it, the same link.
   =========================================================================== */
@media (max-width: 640px) {
  .posts--row { gap: 20px; }
  .posts--row .post {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
  }
  .posts--row .post__fig {
    aspect-ratio: 1;
    margin-bottom: 0;
    border-radius: 2px;
  }
  /* Two facts fit on this measure, not four: the subject and the date. */
  .posts--row .post__meta { margin-bottom: 5px; gap: 5px; }
  .posts--row .post__meta > :nth-last-child(-n+2) { display: none; }
  .posts--row .post__t { font-size: var(--fs-small); line-height: 1.3; }
  .posts--row .post__x { display: none; }
  .posts--row .post__rule { margin-top: 10px; padding-top: 10px; }
  .posts--row .post__rule::before { margin-bottom: 9px; }
}

/* ===========================================================================
   45. THE FLASH BAND
   Only seen by a visitor whose browser posted the form the ordinary way.
   It has to read as an answer from the site, not as an error, so it takes
   the same mono label voice as the rest of the furniture.
   =========================================================================== */
.flash { background: var(--ink); color: var(--paper); }
.flash--err { background: var(--signal); color: var(--ink); }
.flash__in { display: flex; align-items: baseline; gap: 14px; padding-block: 16px; }
.flash__mark {
  flex: none; width: 9px; height: 9px; margin-top: 2px;
  background: var(--signal-2);
  transform: rotate(45deg);
}
.flash--err .flash__mark { background: var(--ink); }
.flash p {
  font-size: var(--fs-small);
  line-height: 1.5;
  max-width: 68ch;
}

/* The footer signature. Sized by its own width so the device and the two
   lines of the wordmark stay in proportion at every breakpoint. */
.foot__logo { display: block; width: 236px; max-width: 72%; margin-bottom: clamp(18px, 2vw, 26px); }
.foot__logo .blogo img { width: 100%; height: auto; }
@media (max-width: 760px) { .foot__logo { width: 200px; max-width: 64%; } }

/* ===========================================================================
   46. TOUCH
   A finger is about nine millimetres across. Anything it has to hit needs
   roughly forty-four pixels of height, and almost none of the secondary
   links on this site had it: the "all ten lines" links were twenty-two
   pixels tall, the sector tags twenty-five, the search clear button
   seventeen. The type does not change; the target around it does.
   =========================================================================== */
/* The width half of this matters: a tablet held in landscape is 1024px wide
   and is still operated with a thumb, and a Windows touch laptop reports a
   mouse it may not have. Erring towards the larger target costs a desktop
   reader nothing. */
@media (hover: none), (max-width: 1024px) {

  /* Secondary links: the arrow links that carry most of the navigation. */
  .lk {
    padding-top: 11px;
    padding-bottom: 15px;
    margin-top: -11px;
  }

  /* Tag and filter chips. */
  .tag {
    min-height: 40px;
    padding-inline: 14px;
    display: inline-flex;
    align-items: center;
  }

  /* The search field's own button. */
  .filter__search button {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    right: 2px;
  }

  /* The category above an article title, and any label used as a link. */
  a.label {
    padding-block: 12px;
    margin-block: -12px;
  }

  /* Pagination. */
  .pager__n, .pager__step { min-height: 44px; }
  .pager__n { min-width: 44px; }

  /* The masthead signature. */
  .mast__brand, .lockup { min-height: 46px; }

  /* Checkboxes: the box itself grows, and the whole row is the target. */
  .check input[type="checkbox"], .field input[type="checkbox"] {
    width: 22px; height: 22px;
  }
  .check { padding-block: 6px; }

  /* Footer and drawer link lists. */
  .foot__nav a, .foot__bar a, .dacc__p a { padding-block: 11px; display: inline-block; }
  .foot__nav li { margin-bottom: 0; }
  .foot__soc a { width: 46px; height: 46px; }

  /* Breadcrumbs sit at the top of every inner page and are tapped more than
     anything except the drawer. They were eighteen pixels tall. */
  .crumbs { row-gap: 0; }
  .crumbs a, .crumbs span[aria-current] { padding-block: 12px; display: inline-block; }

  /* The category above an article title is a link, not a caption. */
  .phero a.label, a.label--on-dark { padding-block: 15px; margin-block: -10px; }

  /* Links inside the page-hero meta list, such as the related capability. */
  .phero__meta dd a { padding-block: 12px; display: inline-block; }
}

/* ===========================================================================
   47. BUTTON ROWS ON A PHONE
   Two buttons sharing a 350px row, each with a label that does not wrap,
   do not fit: they were shrinking to 169px and clipping their own text at
   both edges of the viewport. Below the width where a pair can sit side by
   side honestly, they stack and take the full measure.
   =========================================================================== */
@media (max-width: 560px) {
  .btns {
    flex-direction: column;
    align-items: stretch;
  }
  .btns > .btn {
    width: 100%;
    justify-content: center;
    flex: 0 0 auto;
  }
  /* A text link in the same row keeps its own width and sits left. */
  .btns > .lk { align-self: flex-start; width: auto; }

  /* The one button that submits a form takes the full measure: it is the
     only thing on the screen the reader is being asked to press. */
  form .btn--lg[type="submit"],
  form button.btn[type="submit"] { width: 100%; justify-content: center; }
}

/* ===========================================================================
   48. THE MOSAIC AND THE TO-TOP, ON A PHONE
   In one column a sector cell is as wide as the screen and its copy climbs
   to the middle of the photograph, where the wash was still almost clear.
   The gradient has to start working higher up.
   =========================================================================== */
@media (max-width: 620px) {
  .cell { min-height: 212px; }
  .cell__wash {
    background: linear-gradient(180deg,
      rgba(9, 14, 20, .26) 0%,
      rgba(9, 14, 20, .58) 36%,
      rgba(9, 14, 20, .94) 100%);
  }
  .cell__in { padding: 18px; }
}

@media (max-width: 560px) {
  /* It floats over the text it is sitting on, so it should be no larger
     than it needs to be, and clearly a control rather than a block. */
  .totop {
    right: 14px; bottom: 14px;
    width: 42px; height: 42px;
    box-shadow: 0 10px 26px -10px rgba(9, 14, 20, .8);
  }
  .totop .ic { width: 17px; height: 17px; }
}

/* ===========================================================================
   49. THE GOLD, WHERE GOLD WORKS
   ---------------------------------------------------------------------------
   The mark is blue and gold. Neither colour can carry the site: flat gold is
   1.4:1 on paper and the blue is 2.6:1 on the ink, so as a system colour
   either one would be unreadable across half the pages. What gold can do is
   appear deliberately in the one place the full lockup lives, on the one
   ground it is legible against. So it is confined to the footer, on dark,
   in three touches that share a reason - the ridge above the signature, a
   rule beneath it, and the four numerals that enumerate the company.

   --brass is 5.3:1 on the ink, which clears AA at the sizes used here.
   =========================================================================== */

/* A rule under the signature, the width of the mark's own device. */
.foot__logo { position: relative; }
.foot__logo::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin-top: clamp(14px, 1.6vw, 20px);
  background: var(--brass);
  opacity: .85;
}

/* The four division numerals in the footer index. */
.foot__no {
  display: inline-block;
  width: 2.1em;
  font-style: normal;
  font-family: var(--mono);
  font-size: .92em;
  letter-spacing: .08em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease);
}
.foot__nav a:hover .foot__no { color: var(--signal-3); }