/* ============================================================================
   MINML — editorial design system
   ----------------------------------------------------------------------------
   One stylesheet for every page. Self-hosted type, no CDN dependency, no build
   step: the site is served straight out of ./public by the Cloudflare Worker.

   The language is a printed magazine feature: Archivo set in tight uppercase
   for display and at text weights for anything meant to be read at length,
   and IBM Plex Mono for the small letterspaced furniture — kickers, folios,
   captions and credits. Rules are hairlines. Corners are square. Photography runs full
   bleed and carries its own credit.

   COLOUR. Every neutral is drawn from one ramp, built on the hue of the
   landing page's stone-deep surface (oklch hue 250). Paper, rules, body text
   and the dark sections are therefore the same cool grey family as the
   Patagonian granite and glacier in the hero. The single chromatic accent is
   that same hue with the chroma turned up — a deep slate, not a contrasting
   colour — and it is spent sparingly: a category, a live control, a hover.

   SPACING. Everything vertical comes from the --pad-* and --stack-* scale
   below. Nothing sets an arbitrary margin.
   ========================================================================== */

/* --- self-hosted type (latin subsets) ------------------------------------ */
/* Archivo ships as a variable font: one file covers 400-900. */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:100%; font-display:swap; src:url('vendor/archivo-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('vendor/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('vendor/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:300; font-display:swap; src:url('vendor/spectral-300.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('vendor/spectral-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('vendor/spectral-600.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:300; font-display:swap; src:url('vendor/spectral-300-italic.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('vendor/spectral-400-italic.woff2') format('woff2'); }

:root {
  /* --- one cool-neutral ramp, hue 250 ----------------------------------- */
  --paper:      #f4f5f7;  /* oklch(0.970 0.0028 250)  page ground          */
  --paper-alt:  #fdfeff;  /* oklch(0.996 0.0015 250)  raised panel         */
  --band:       #e8eaed;  /* oklch(0.936 0.0045 250)  tinted block         */
  --line-soft:  #e1e3e6;  /* oklch(0.916 0.0050 250)  secondary rule       */
  --line:       #d0d3d7;  /* oklch(0.866 0.0070 250)  hairline             */
  --faint:      #666d73;  /* oklch(0.530 0.0130 250)  captions, credits    */
  --muted:      #4f565e;  /* oklch(0.450 0.0150 250)  secondary text       */
  --ink-body:   #1b2128;  /* oklch(0.260 0.0140 250)  long-form body       */
  --ink:        #0e1319;  /* oklch(0.185 0.0150 250)  primary text         */
  --stone:      #0a0e11;  /* oklch(0.160 0.0100 250)  dark surface         */
  --ice:        #e1e9ed;  /* oklch(0.930 0.0100 230)  text on stone        */

  /* The one chromatic note: the neutral ramp's own hue, turned up. Deep
     enough to sit beside the display type without competing with it.
     --accent fills; --accent-dk sets small text and hovers on paper. */
  --accent:     #274f7a;  /* oklch(0.420 0.085 252) */
  --accent-dk:  #143960;  /* oklch(0.340 0.080 252) */

  /* The small mono furniture. Sized here rather than at each use so the whole
     tier can be lifted on small screens, where .6rem is below reading size. */
  --fs-micro:   .6rem;   /* tags, roles, folios          */
  --fs-fine:    .62rem;  /* credits, captions, sub-labels */
  --fs-small:   .66rem;  /* buttons, bylines, arrows      */
  --fs-caption: .68rem;  /* .caption                      */
  --fs-eyebrow: .7rem;   /* .eyebrow                      */
  --fs-nav:     .62rem;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --font-serif:   'Spectral', Georgia, serif;

  /* --- spacing scale ----------------------------------------------------- */
  --hdr-h: 4.5rem;
  --pad-page:       clamp(1.5rem, 5vw, 4rem);
  --pad-section:    clamp(4.5rem, 7.5vw, 8rem);
  --pad-section-lg: clamp(6rem, 11vw, 12rem);
  --stack-1: .5rem;
  --stack-2: .9rem;
  --stack-3: 1.5rem;
  --stack-4: 2.4rem;
  --stack-5: clamp(2.6rem, 4vw, 3.6rem);
  --stack-6: clamp(3.4rem, 5.5vw, 5rem);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(39,79,122,.16); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3c7cc; }
::-webkit-scrollbar-track { background: var(--band); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================================
   TYPE
   ========================================================================== */

/* the small letterspaced mono furniture: kickers, folios, nav, credits */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.4;
}
.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .04em;
}
.serif-lede { font-family: var(--font-sans); font-weight: 300; letter-spacing: -.01em; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .82;
  text-transform: uppercase;
}
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }
.muted   { color: var(--muted); }
.faint   { color: var(--faint); }

.h-display {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h-section {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h-sub {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
/* standfirst — the serif paragraph that follows a display heading */
.lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.12rem, 1.7vw, 1.38rem);
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--muted);
  text-wrap: pretty;
}
.body-copy {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--muted);
}

/* a kicker with a rule: "NEWS ——— ARTICLES & ANNOUNCEMENTS" */
.kicker { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kicker .bar { width: 2.6rem; height: 1px; background: var(--line); flex: none; }
.kicker .lead-label { color: var(--ink); }
.kicker .sub-label { color: var(--faint); font-size: var(--fs-fine); letter-spacing: .18em; }

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

/* ============================================================================
   LAYOUT
   ========================================================================== */
.wrap      { max-width: 76rem; margin: 0 auto; padding-left: var(--pad-page); padding-right: var(--pad-page); }
.wrap-wide { max-width: 84rem; margin: 0 auto; padding-left: var(--pad-page); padding-right: var(--pad-page); }
.measure   { max-width: 42rem; margin: 0 auto; padding-left: var(--pad-page); padding-right: var(--pad-page); }

.section          { padding: var(--pad-section) 0; }
.section--feature { padding: var(--pad-section-lg) 0; }
.section--tight   { padding: clamp(2.75rem, 5vw, 5rem) 0; }
.section--ruled   { border-top: 1px solid var(--line); }
.section--band    { background: var(--band); }
.section--paper   { background: var(--paper-alt); }
.section--dark    { background: var(--stone); color: var(--ice); }
.section--dark .eyebrow,
.section--dark .caption { color: rgba(225,233,237,.6); }
.section--dark .body-copy,
.section--dark .lede    { color: rgba(225,233,237,.72); }
.section--dark .rule    { border-color: rgba(225,233,237,.16); }
.section--dark .kicker .lead-label { color: var(--ice); }
.section--dark .kicker .bar { background: rgba(225,233,237,.28); }
/* the ruled blocks that sit inside a dark band */
.section--dark .hire-step,
.section--dark .person,
.section--dark .post-card { border-top-color: rgba(225,233,237,.22); }
.section--dark .hire-step .n,
.section--dark .person .role { color: rgba(225,233,237,.55); }
.section--dark .hire-step .d,
.section--dark .person .bio,
.section--dark .role-card .d { color: rgba(225,233,237,.72); }

/* the standard head of a section: kicker, display heading, serif standfirst */
.section-head { max-width: 48rem; margin-bottom: var(--stack-6); }
.section-head .h-section { margin-top: var(--stack-3); }
.section-head .lede,
.section-head .body-copy { margin-top: var(--stack-3); }

/* ============================================================================
   PAGE MASTHEAD — the top of every subpage
   ========================================================================== */
.page-head { padding: calc(var(--hdr-h) + clamp(4rem, 8vw, 7.5rem)) 0 var(--pad-section); }
.page-head .h-display { margin-top: var(--stack-4); max-width: 17ch; }
.page-head .lede { margin-top: var(--stack-4); max-width: 52ch; }

/* ============================================================================
   SITE HEADER
   ========================================================================== */
.site-hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 3.5vw, 3rem);
  background: rgba(244,245,247,.85);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  color: var(--ink);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.site-hdr .brand { display: flex; align-items: center; gap: .55rem; flex: none; color: inherit; }
.site-hdr .brand svg { display: block; flex: none; }
.site-hdr .brand svg path, .site-hdr .brand svg circle { transition: stroke .3s ease, fill .3s ease; }
.site-hdr .brand-name { font-size: 1rem; font-weight: 700; letter-spacing: .14em; line-height: 1; }
/* the cover carries the mark alone: its wordmark is the hero */
.site-hdr .brand--mark-only { gap: 0; }
.site-nav { display: flex; align-items: center; gap: clamp(.95rem, 2.4vw, 2.4rem); min-width: 0; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-nav);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  padding: .45rem 0;
  border-bottom: 1.5px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
}
.site-nav a:hover, .site-nav a:focus-visible { opacity: .6; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* transparent state — used over the homepage hero until it is scrolled past */
.site-hdr.is-overlay {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ice);
}
.site-hdr.is-overlay .brand svg path { stroke: var(--ice); }
.site-hdr.is-overlay .brand svg circle { fill: var(--ice); }
.site-hdr.is-overlay .site-nav a[aria-current="page"] { border-bottom-color: rgba(225,233,237,.6); }

@media (min-width: 48rem) { .site-nav a { font-size: .68rem; letter-spacing: .2em; } }
/* Narrowest phones: the wordmark is already hidden below 48rem, so the four
   links keep their reading size and only the spacing tightens. */
@media (max-width: 22rem) {
  .site-nav { gap: .55rem; }
  .site-nav a { letter-spacing: .06em; }
}

/* ============================================================================
   SITE FOOTER
   ========================================================================== */
/* The header's twin: one bar of the same height, set to the same margins and
   read the same way — the wordmark at the left edge, everything else at the
   right. All of it drops to the smallest mono tier to make the line, and the
   bar wraps to a second row only when the line genuinely will not fit. */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem clamp(1rem, 2.6vw, 2.25rem);
  min-height: var(--hdr-h);
  padding: .5rem clamp(1rem, 3.5vw, 3rem);
}
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem clamp(.9rem, 1.8vw, 1.5rem); }
.footer-brand { font-size: .82rem; font-weight: 700; letter-spacing: .14em; line-height: 1; }
/* These two carry .eyebrow and .caption in the markup; the bar overrides both
   so every link in it sits on one tier. */
.footer-nav, .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem clamp(.9rem, 1.8vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.5;
}
.footer-legal { color: var(--muted); }
/* An address is not furniture and does not take the uppercase. */
.footer-legal a[href^="mailto:"] { text-transform: none; letter-spacing: .04em; }
.footer-nav a, .footer-legal a { transition: opacity .2s ease; }
.footer-nav a:hover, .footer-nav a:focus-visible,
.footer-legal a:hover, .footer-legal a:focus-visible { opacity: .6; }
.footer-copyright {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--faint);
}

/* ============================================================================
   CONTROLS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-dk); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.section--dark .btn--ghost { border-color: rgba(225,233,237,.3); color: var(--ice); }
.section--dark .btn--ghost:hover { border-color: var(--ice); }

.link-ul { border-bottom: 1px solid var(--line); transition: border-color .2s ease, color .2s ease; }
.link-ul:hover { color: var(--accent-dk); border-color: var(--accent); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .2s ease;
}
.link-arrow:hover { color: var(--accent-dk); }

/* forms — hairline underlined fields, no boxes */
.field { display: flex; flex-direction: column; gap: .7rem; }
.field > span {
  font-family: var(--font-mono);
  font-size: var(--fs-fine);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.field input, .field textarea, .field select {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: .7rem 0;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
/* the caret is drawn rather than left to the platform, so the field keeps the
   same hairline-underline shape as the inputs beside it */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%);
  background-position: calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9aa1a8; }
/* the "(optional)" qualifier inside a field label, set back from the label */
.field .opt { letter-spacing: .08em; text-transform: none; color: #9aa1a8; }
/* file input: the platform button is replaced by the same chip the role tags
   use, so the field keeps the hairline-underline shape of its neighbours */
.field input[type="file"] {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--muted);
  padding: .55rem 0;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: .5rem .85rem;
  margin-right: .9rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--ink); }
.field input[type="file"]:focus { border-bottom-color: var(--ink); }
.form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stack-4); }
.form-stack { display: flex; flex-direction: column; gap: var(--stack-4); }
.form-note  { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
@media (max-width: 40rem) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   REVEAL ON SCROLL
   Applied only when JS runs, so every page is complete without it.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   ARTICLE — the magazine feature
   ========================================================================== */

/* Masthead. The reference sets the whole title block — byline, headline,
   wedge, standfirst, folio, photo credit — in one narrow rail with the
   photograph filling the rest of the spread beside it. Same here: the image
   is part of the opening, not a separate full-width band above the text. */
.art-head { padding: calc(var(--hdr-h) + clamp(3rem, 5.5vw, 5rem)) 0 0; }
.art-masthead { display: grid; grid-template-columns: 1fr; gap: var(--stack-4); align-items: stretch; }
.art-masthead > * { min-width: 0; }
.art-rail { display: flex; flex-direction: column; }
.art-rail .rule { margin: var(--stack-3) 0; }
.art-rail .byline {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.9;
}
.art-rail .byline .by { display: block; color: var(--faint); font-size: var(--fs-micro); }
.art-rail .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-fine);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 2;
}
.art-rail .cat { color: var(--accent-dk); }
/* the small wedge that marks the start of a feature */
.art-wedge { width: 0; height: 0; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-top: .85rem solid var(--accent); margin-top: var(--stack-3); }

.art-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.4vw, 3.4rem);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.art-standfirst {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--muted);
  margin-top: var(--stack-3);
  text-wrap: pretty;
}

.art-cover { margin: 0; }
.art-cover img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--band); }
.art-credit {
  font-family: var(--font-mono);
  font-size: var(--fs-fine);
  letter-spacing: .08em;
  line-height: 1.7;
  color: var(--faint);
  margin-top: .9rem;
  max-width: 60ch;
}

@media (min-width: 60rem) {
  .art-masthead {
    grid-template-columns: minmax(17rem, 25rem) 1fr;
    gap: clamp(2rem, 3.5vw, 3.5rem);
  }
  /* the photograph runs to the trim, as it does across a printed spread */
  .art-masthead { padding-right: 0; }
  .art-cover { height: 100%; display: flex; flex-direction: column; }
  .art-cover img { height: 100%; aspect-ratio: auto; min-height: 26rem; max-height: 40rem; }
  /* the column rule that separates the title block from the photograph */
  .art-rail { border-right: 1px solid var(--line); padding-right: clamp(1.6rem, 3vw, 2.6rem); padding-bottom: var(--stack-3); }
  .art-title { font-size: clamp(2rem, 3.1vw, 3rem); }
}

/* the reading column. Narrow and single until there is room for two. */
.art-measure { max-width: 42rem; margin: 0 auto; padding: var(--pad-section) var(--pad-page); }
.art-body {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink-body);
  hyphens: auto;
  orphans: 3;
  widows: 3;
}
.art-run + * { margin-top: var(--stack-3); }
.art-p { text-wrap: pretty; }
.art-p + .art-p { margin-top: 1.3rem; }
.art-body > .art-run:first-child > .art-p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.5em;
  line-height: .78;
  padding-right: .09em;
  margin-top: .05em;
  color: var(--ink);
}
.art-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--stack-6);
  padding-top: var(--stack-3);
  border-top: 1px solid var(--line);
}
.art-h2 + * { margin-top: var(--stack-3); }
.art-h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--stack-4);
}
.art-h3 + * { margin-top: var(--stack-2); }
.art-fig { margin-top: var(--stack-5); }
.art-fig + * { margin-top: var(--stack-5); }
.art-fig img { width: 100%; background: var(--band); }
.art-fig figcaption { font-family: var(--font-mono); font-size: var(--fs-fine); letter-spacing: .08em; line-height: 1.7; color: var(--faint); margin-top: .9rem; max-width: 62ch; }
.art-yt { position: relative; width: 100%; aspect-ratio: 16/9; margin-top: var(--stack-5); }
.art-yt + * { margin-top: var(--stack-5); }
.art-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* pull quote — a line lifted out of the body and set large between rules */
.art-pull {
  margin-top: var(--stack-5);
  padding: var(--stack-4) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.8vw, 2.05rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
  hyphens: none;
}
.art-pull + * { margin-top: var(--stack-5); }

/* footer furniture: tags, then previous / next */
.art-foot { border-top: 1px solid var(--line); margin-top: var(--stack-6); padding-top: var(--stack-4); }
.art-tags { display: flex; flex-wrap: wrap; gap: .55rem .6rem; }
.art-tags span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: .4rem .75rem;
}
.art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stack-4); margin-top: var(--stack-5); }
.art-nav a { display: flex; flex-direction: column; gap: .7rem; }
.art-nav .dir { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.art-nav .t { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-transform: uppercase; transition: color .2s ease; }
.art-nav a:hover .t { color: var(--accent-dk); }
.art-nav a.next { grid-column: 2; text-align: right; align-items: flex-end; }

/* --- the two-column setting ------------------------------------------------
   Above 68rem the reading column widens and prose sets in two columns, the
   way a feature does in print. Headings, figures and pull quotes span both
   and restart the flow beneath them, so each run of columns stays short
   enough to read down and back up without losing your place. Runs of a
   single paragraph stay one column wide rather than stretching. */
@media (min-width: 68rem) {
  .art-measure { max-width: 64rem; }
  .art-body { font-size: 1.08rem; }
  .art-run--cols { columns: 2; column-gap: clamp(2.5rem, 4vw, 3.75rem); }
  .art-h2, .art-h3, .art-fig, .art-yt, .art-pull { column-span: all; }
}
@media (max-width: 40rem) {
  .art-nav { grid-template-columns: 1fr; gap: var(--stack-3); }
  .art-nav a.next { grid-column: 1; text-align: left; align-items: flex-start; }
}

/* ============================================================================
   NEWS INDEX — a contents page
   ========================================================================== */
.contents-rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--ink);
  padding-top: 1.1rem;
  margin-bottom: var(--stack-5);
}

.lead-story { display: grid; grid-template-columns: 1fr; gap: var(--stack-4); }
.lead-story > * { min-width: 0; }
.lead-story .cover { overflow: hidden; background: var(--band); }
.lead-story .cover img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: grayscale(.15); transition: filter .6s ease, transform 1.2s cubic-bezier(.22,1,.36,1); }
.lead-story:hover .cover img { filter: grayscale(0); transform: scale(1.03); }
.lead-story .t { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; margin-top: var(--stack-3); transition: color .2s ease; }
.lead-story:hover .t { color: var(--accent-dk); }
.lead-story .x { font-family: var(--font-sans); font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.62; color: var(--muted); margin-top: var(--stack-3); max-width: 52ch; text-wrap: pretty; }

.post-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.post-meta .cat { color: var(--accent-dk); }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); flex: none; }

.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--stack-6) clamp(2.5rem, 4vw, 4rem); }
.post-card { display: flex; flex-direction: column; border-top: 1px solid var(--ink); padding-top: var(--stack-3); }
.post-card .cover { overflow: hidden; background: var(--band); margin-bottom: var(--stack-3); }
.post-card .cover img { width: 100%; aspect-ratio: 3/2; object-fit: cover; filter: grayscale(.2); transition: filter .6s ease, transform 1.2s cubic-bezier(.22,1,.36,1); }
.post-card:hover .cover img { filter: grayscale(0); transform: scale(1.04); }
.post-card .t { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; text-transform: uppercase; margin-top: var(--stack-2); transition: color .2s ease; }
.post-card:hover .t { color: var(--accent-dk); }
.post-card .x { font-family: var(--font-sans); font-weight: 300; font-size: .98rem; line-height: 1.62; color: var(--muted); margin-top: var(--stack-2); }

@media (min-width: 60rem) {
  .lead-story { grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 4.5vw, 4rem); align-items: center; }
}
@media (max-width: 38rem) { .news-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   LEGAL / LONG-FORM DOCUMENTS
   ========================================================================== */
.legal { max-width: 42rem; margin: 0 auto; padding: calc(var(--hdr-h) + clamp(3.5rem, 7vw, 6.5rem)) var(--pad-page) var(--pad-section); }
.legal .h-display { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-top: var(--stack-3); }
.legal .updated { font-family: var(--font-mono); font-size: var(--fs-fine); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: var(--stack-3); }
.legal .lead { font-family: var(--font-sans); font-weight: 300; font-size: 1.2rem; line-height: 1.65; color: var(--muted); margin-top: var(--stack-4); text-wrap: pretty; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--stack-6);
  padding-top: var(--stack-3);
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.legal h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 600; text-transform: uppercase; color: var(--ink); margin-top: var(--stack-4); }
.legal p  { font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.8; color: var(--ink-body); margin-top: var(--stack-3); }
.legal ul { margin-top: var(--stack-3); padding-left: 1.2rem; }
.legal li { font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.75; color: var(--ink-body); margin-top: .6rem; }
.legal li::marker { color: var(--faint); }
.legal a { border-bottom: 1px solid var(--line); transition: border-color .2s ease, color .2s ease; }
.legal a:hover { color: var(--accent-dk); border-color: var(--accent); }
.legal .divider { margin-top: var(--stack-6); height: 1px; background: var(--line); border: 0; }
.legal .legal-seealso { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .04em; color: var(--faint); margin-top: var(--stack-4); }
.legal table { width: 100%; margin-top: var(--stack-3); border-collapse: collapse; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .85rem .9rem; border-bottom: 1px solid var(--line-soft); line-height: 1.6; }
.legal th { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: var(--band); border-bottom-color: var(--line); }
.legal td { font-family: var(--font-sans); font-size: .95rem; color: var(--ink-body); }
.legal td code { font-family: var(--font-mono); font-size: .78rem; background: var(--band); padding: .15rem .4rem; color: var(--ink); }
@media (max-width: 45rem) {
  .legal .cookie-table-wrap { overflow-x: auto; }
  .legal table { min-width: 34rem; }
}

/* ============================================================================
   PEOPLE — team, advisors, investors
   ========================================================================== */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-6) clamp(2rem, 3.2vw, 3.2rem); }
.person { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: var(--stack-3); }
.person .portrait { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--band); margin-bottom: var(--stack-3); }
.person .mono-fallback { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: .02em; color: #b6bbc0; }
.person .portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1); transition: filter .7s ease, transform 1.3s cubic-bezier(.22,1,.36,1); }
.person:hover .portrait img { filter: grayscale(0); transform: scale(1.035); }
.person .role { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); line-height: 1.7; }
.person .name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; line-height: 1.1; margin-top: .7rem; }
.person .bio { font-family: var(--font-sans); font-weight: 300; font-size: .95rem; line-height: 1.65; color: var(--muted); margin-top: var(--stack-2); }
.person .links { display: flex; gap: 1.3rem; margin-top: auto; padding-top: var(--stack-3); }
.person .links a { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); transition: color .2s ease; }
.person .links a:hover { color: var(--accent-dk); }
.person--advisor .portrait { aspect-ratio: 1/1; }
.person--advisor .name { font-size: 1.02rem; }
.person--advisor .bio { font-size: .9rem; }
@media (max-width: 56rem) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .people-grid { grid-template-columns: 1fr; } }

.inv-quote { display: grid; grid-template-columns: 1fr; gap: var(--stack-4); max-width: 64rem; align-items: center; }
.inv-quote > * { min-width: 0; }
.inv-quote .portrait { aspect-ratio: 4/5; overflow: hidden; background: var(--band); max-width: 15rem; }
.inv-quote .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: grayscale(1); }
.inv-quote .bio { font-family: var(--font-sans); font-weight: 300; font-size: 1.02rem; line-height: 1.72; color: var(--muted); }
.inv-quote blockquote { font-family: var(--font-sans); font-weight: 300; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.36; letter-spacing: -.015em; color: var(--ink); margin-top: var(--stack-3); padding-top: var(--stack-3); border-top: 1px solid var(--ink); text-wrap: pretty; }
.inv-quote .attr { font-family: var(--font-mono); font-size: var(--fs-fine); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-top: var(--stack-3); }
@media (min-width: 54rem) {
  .inv-quote { grid-template-columns: clamp(200px, 26%, 260px) 1fr; gap: clamp(2.4rem, 4vw, 3.6rem); }
  .inv-quote .portrait { max-width: none; }
}

.inv-wall { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: clamp(1.6rem, 3.2vw, 3rem); max-width: 64rem; margin-top: var(--stack-6); padding-top: var(--stack-5); border-top: 1px solid var(--line); }
.inv-wall a { display: flex; align-items: center; justify-content: center; }
.inv-logo { width: 100%; height: 2rem; background-color: #9aa0a6; -webkit-mask-image: var(--inv-logo); mask-image: var(--inv-logo); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color .35s ease; }
.inv-wall a:hover .inv-logo { background-color: var(--ink); }
@media (max-width: 56rem) { .inv-wall { grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.8rem; } }
@media (max-width: 34rem) { .inv-wall { grid-template-columns: 1fr 1fr; gap: 2rem 1.6rem; } }

/* ============================================================================
   CAREERS
   ========================================================================== */
.role-list { border-bottom: 1px solid var(--line); }
.role-card { display: grid; grid-template-columns: 1fr; gap: var(--stack-4); align-items: start; border-top: 1px solid var(--line); padding: var(--stack-4) 0; }
.role-list > .role-card:first-child { border-top-color: var(--ink); }
.role-card > * { min-width: 0; }
.role-tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.role-tags span { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: .4rem .75rem; }
.role-tags span.primary { color: var(--accent-dk); border-color: #b9c6d6; }
.role-card .t { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; text-transform: uppercase; margin-top: var(--stack-3); }
.role-card .d { font-family: var(--font-sans); font-weight: 300; font-size: 1.05rem; line-height: 1.72; color: var(--muted); max-width: 54ch; }
.role-card .btn { margin-top: var(--stack-4); }
@media (min-width: 54rem) { .role-card { grid-template-columns: 1fr 1fr; gap: var(--stack-4) var(--stack-5); } }

.hire-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-5) clamp(1.8rem, 3.2vw, 3rem); }
.hire-step { border-top: 1px solid var(--line); padding-top: var(--stack-3); }
.hire-step .n { font-family: var(--font-mono); font-size: var(--fs-fine); font-weight: 500; letter-spacing: .18em; color: var(--faint); }
.hire-step .t { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.015em; text-transform: uppercase; line-height: 1.2; margin-top: var(--stack-3); }
.hire-step .d { font-family: var(--font-sans); font-weight: 300; font-size: .95rem; line-height: 1.65; color: var(--muted); margin-top: var(--stack-2); }
@media (max-width: 56rem) { .hire-flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .hire-flow { grid-template-columns: 1fr; } }

/* ============================================================================
   SPLIT — copy beside a column, used on Contact and Careers' apply
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr; gap: var(--stack-6); align-items: start; }
.split > * { min-width: 0; }
@media (min-width: 54rem) {
  .split { grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 6vw, 5.5rem); }
  .split--even { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   CTA BAND
   ========================================================================== */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--stack-4); }
.cta-band .h-section { max-width: 20ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 45rem) { .cta-band { flex-direction: column; align-items: flex-start; } }

/* long words in display type must not push a grid column past the viewport */
.h-display, .h-section, .art-title, .lead-story .t, .post-card .t,
.role-card .t, .art-nav .t, .person .name, .hire-step .t { overflow-wrap: break-word; }

/* ============================================================================
   SMALL SCREENS
   ----------------------------------------------------------------------------
   Not a squeeze of the desktop layout. Three things change in kind rather than
   degree: the mono furniture steps up a tier because .6rem is below reading
   size on a phone; the header drops its wordmark so four nav links have room
   and a thumb-sized target; and the people list turns on its side so a team
   page is a few screens rather than twenty.
   ========================================================================== */
@media (max-width: 47.99rem) {
  :root {
    --fs-micro:   .7rem;
    --fs-fine:    .72rem;
    --fs-small:   .75rem;
    --fs-caption: .78rem;
    --fs-eyebrow: .74rem;
    --fs-nav:     .72rem;
  }

  /* the mark alone; the wordmark is in the footer and in the page itself */
  .site-hdr { padding: 0 var(--pad-page); }
  .site-hdr .brand-name { display: none; }
  .site-nav { gap: clamp(.85rem, 4.2vw, 1.7rem); }
  .site-nav a { letter-spacing: .1em; padding: 1rem 0; }

  /* thumb-sized targets. The bar cannot hold one line at this width, so it
     wraps and grows past the header's height rather than shrinking the type. */
  .site-hdr .brand { padding: .8rem 0; }
  .footer-inner { padding: .75rem var(--pad-page); gap: .3rem 1.4rem; }
  .footer-row { gap: .3rem 1.4rem; }
  .footer-nav, .footer-legal { gap: 0 1.4rem; }
  .footer-nav a, .footer-legal a { padding: .5rem 0; }
  .footer-brand { display: inline-block; padding: .4rem 0; }
  .link-arrow { padding: .55rem 0; }

  /* the standfirst is the reading size on a phone, not a display size */
  .lede { font-size: 1.12rem; line-height: 1.62; }
  .art-title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .art-standfirst { font-size: 1.1rem; }

  /* long words in uppercase display type get more room to break */
  .h-display { font-size: clamp(2.3rem, 9.5vw, 3.4rem); }
}

@media (max-width: 34rem) {
  /* People turn on their side: a square portrait with the name beside it and
     the biography beneath, instead of a full-width plate each. */
  .person {
    display: grid;
    grid-template-columns: 7rem 1fr;
    column-gap: 1.2rem;
    align-items: start;
  }
  .person .portrait {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
  }
  .person .role { grid-column: 2; grid-row: 1; }
  .person .name { grid-column: 2; grid-row: 2; margin-top: .45rem; }
  .person .bio  { grid-column: 1 / -1; margin-top: 1.1rem; }
  .person .links { grid-column: 1 / -1; margin-top: .5rem; padding-top: 0; gap: 1.6rem; }
  .person .links a { padding: .6rem 0; }
  .person--advisor .portrait { aspect-ratio: 1 / 1; }
  .people-grid { gap: var(--stack-5); }

  /* the investor portrait follows the same logic */
  .inv-quote .portrait { max-width: 9rem; }
}