@charset "UTF-8";
/* ==========================================================================
   Soulfoundry — soulfoundry.eu

   Dark only. Inter as the single family, with optical sizing left on auto.
   Layout: a two-column editorial spine (sticky marginal rail + measure).
   Type: fluid Utopia-style scale, 320→1440, base 17→19px. Six steps, no more.
   Spacing: 4px base grid; every value below is a multiple of 4.
   Accent: Soulfire Orange has exactly three jobs, marked in the source.
   Data colours are a separate, documented palette; see --dv-* below.
   No inline styles anywhere: the CSP on this site forbids them.
   ========================================================================== */

/* Inter v4 variable, wght 100–900 + opsz 14–32, Latin subset with German
   diacritics. Arrows are drawn as SVG because the subset carries no U+2192. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-opsz.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Fallback metrics roughly matched to Inter so a cold load does not reflow
   the 134px headline. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* Foundry palette. Charcoal Steel #1C1C1E is the raised surface; the page
     sits below it. The step is small on purpose: the hairlines do the work. */
  --page:     #131417;
  --surface:  rgba(255, 255, 255, 0.028);

  --rule:     rgba(255, 255, 255, 0.09);
  --rule-mid: rgba(255, 255, 255, 0.17);

  --fg:       #ECEDEF;   /* Polished Concrete.  15.7:1 on --page */
  --fg-2:     #9FA4AA;   /* Anvil Gray, lifted.  7.3:1 / 6.8:1   */
  --fg-3:     #878C92;   /* tertiary floor.      5.4:1 / 5.0:1   */

  --fire:     #FF6F00;   /* Soulfire Orange.     6.6:1 / 6.1:1   */
  --spark:    #FFB800;   /* Spark Yellow — focus rings only      */

  /* Extended Soul palette, data visualisation only. Brand Strategy v1.0,
     section 14.1. Sequential, so it may only encode an ordered quantity;
     on this site that is time. Contrast on --page, all clear of the 3:1
     floor for non-text: 15.5, 10.6, 7.5, 6.6, 4.5. Pale Flame is listed for
     completeness but unused: at 15.5:1 it reads as text, not as a mark. */
  --dv-1:     #FFEBAA;   /* Pale Flame       */
  --dv-2:     #FFB800;   /* Spark Yellow     */
  --dv-3:     #D79B00;   /* Molten Gold      */
  --dv-4:     #FF6F00;   /* Soulfire Orange  */
  --dv-5:     #D94F04;   /* Ember Red        */

  /* fluid type, 320px → 1440px. Six steps, and h3/dt/mail share step 5. */
  --t-label: 0.75rem;                                            /* 12    */
  --t-meta:  0.8125rem;                                          /* 13    */
  --t-body:  clamp(1.0625rem, 1.0268rem + 0.1786vw, 1.1875rem);  /* 17→19 */
  --t-lead:  clamp(1.1875rem, 1.0625rem + 0.625vw, 1.625rem);    /* 19→26 */
  --t-h3:    clamp(1.25rem, 1.1786rem + 0.3571vw, 1.5rem);       /* 20→24 */
  --t-h2:    clamp(1.75rem, 1.4643rem + 1.4286vw, 2.75rem);      /* 28→44 */
  --t-h1:    clamp(2.625rem, 1.1607rem + 7.3214vw, 8.375rem);    /* 42→134 */

  /* 4px grid */
  --s1: 0.5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;  --s7: 6rem;    --s8: 8rem;

  --gutter: clamp(1.25rem, 0.5rem + 3.75vw, 3.5rem);
  --maxw: 80rem;         /* 1280px */
  --measure: 38rem;      /* ~66ch at 19px — the one prose measure */
  --measure-wide: 46rem; /* tables, figures, footer boilerplate   */
  --nav-h: 4.5rem;

  --out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s4));
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: var(--page);
  color: var(--fg-2);
  font-family: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.647;
  letter-spacing: -0.01em;
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { color: var(--fg); font-weight: 560; }
::selection { background: var(--fire); color: #14151A; }

:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }
main:focus { outline: none; }

.skip-link {
  position: fixed; left: var(--s2); top: -5rem; z-index: 300;
  background: var(--fire); color: #14151A;
  padding: 0.5rem 1rem; text-decoration: none;
  font-size: var(--t-meta); font-weight: 560;
  transition: top 0.18s var(--out);
}
.skip-link:focus { top: var(--s2); }

/* -------------------------------------------------------------- typography */
h1, h2, h3, h4 { color: var(--fg); font-weight: 520; text-wrap: balance; }

.display {
  font-size: var(--t-h1);
  line-height: 0.93;
  letter-spacing: -0.04em;   /* Inter has to be pulled hard at display sizes */
  word-spacing: -0.03em;     /* ...which then leaves the word spaces loose   */
  font-weight: 540;
  text-transform: uppercase;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.026em;
  max-width: 26ch;
}

h3 { font-size: var(--t-h3); line-height: 1.28; letter-spacing: -0.018em; font-weight: 540; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-weight: 400;
  max-width: 40rem;
  text-wrap: pretty;
}

/* ONE caps treatment for the whole site: 12px, +0.13em, weight 500.
   Nothing else may invent its own tracking. */
.label, .rail-t, .nav-a, .defs .sub, .tab thead th,
.copy, .lang button, .index .at, .cta-2, .portrait figcaption, .tab td::before {
  font-size: var(--t-label);
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.meta { font-size: var(--t-meta); letter-spacing: 0; color: var(--fg-3); line-height: 1.6; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--fire);   /* accent job 1 of 3: links */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.14s var(--out);
}
.prose a:hover { color: var(--fire); }

/* The sanctioned utilities. Nothing else may set spacing or measure inline,
   because the CSP blocks style attributes. */
.measure { max-width: var(--measure); }
.measure-wide { max-width: var(--measure-wide); }
.mt-1 { margin-top: var(--s2); }
.mt-2 { margin-top: var(--s3); }
.mt-3 { margin-top: var(--s4); }
.mt-4 { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-5 { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ------------------------------------------------------------ layout spine
   A sticky marginal rail carries the section number and label; the wide
   column carries the argument. Two columns at every width above 52rem, so
   the measure never gets narrower as the window gets wider.               */
.wrap {
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.spine {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: clamp(1.5rem, 3vw, 4rem);
}
.spine > .rail { grid-column: 1; }
.spine > .body { grid-column: 2; }
.spine > .full { grid-column: 1 / -1; }

.rail {
  position: sticky;
  top: calc(var(--nav-h) + var(--s4));
  align-self: start;
}
.rail-n {
  display: block;
  font-size: var(--t-meta);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--fire);            /* accent job 2 of 3: the locator */
  margin-bottom: var(--s1);
}
.rail-t { display: block; color: var(--fg-3); max-width: 14ch; line-height: 1.35; }

/* section rhythm: three deliberate tiers, never uniform */
.sec        { padding-block: clamp(4.5rem, 8vw, 8rem); border-top: 1px solid var(--rule); }
.sec--major { padding-block: clamp(6rem, 12vw, 12rem); }
.sec--tight { padding-block: clamp(3rem, 4.5vw, 4.5rem); }
/* translucent, so the drifting field stays continuous across boundaries */
.sec--surface { background: var(--surface); }
.sec--flush { border-top: 0; }

/* ------------------------------------------------------------------- drift */
#drift { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.page { position: relative; z-index: 1; }

/* --------------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  background: rgba(19, 20, 23, 0.86);                        /* Safari < 16.2 */
  background: color-mix(in srgb, var(--page) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--out);
}
.nav.is-stuck { border-bottom-color: var(--rule); }

.nav-in {
  height: 100%;
  display: flex; align-items: center; gap: var(--s4);
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { display: block; margin-right: auto; }
.brand-mark {
  height: 2.25rem; width: auto;
  color: var(--fg);
  transition: opacity 0.18s var(--out);
}
.brand:hover .brand-mark { opacity: 0.72; }

.nav-list { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); list-style: none; }
.nav-a { display: inline-block; color: var(--fg-3); text-decoration: none; padding-block: 0.5rem; transition: color 0.16s var(--out); }
.nav-a:hover, .nav-a[aria-current="page"] { color: var(--fg); }
.nav-a[aria-current="page"]::before {
  content: ""; display: inline-block;
  width: 4px; height: 4px; background: var(--fire);
  margin-right: 0.5rem; vertical-align: 0.18em;
}

.nav-mail {
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--rule-mid);
  padding: 0.5rem 0.75rem;
  transition: border-color 0.16s var(--out);
}
.nav-mail:hover { border-color: var(--fg-3); }

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;           /* 44px touch target */
  border: 1px solid var(--rule-mid);
  background: none; color: var(--fg-2); cursor: pointer;
  padding: 0; place-items: center;
}
.burger svg { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------------ links */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }

.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--t-lead);
  letter-spacing: -0.02em;
  font-weight: 480;
  color: var(--fg);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule-mid);
  transition: border-color 0.18s var(--out);
}
.cta:hover { border-bottom-color: var(--fg-3); }

/* accent job 3 of 3: the forward affordance and the one data mark */
.arr { width: 1em; height: 1em; flex: none; color: var(--fire); transition: transform 0.22s var(--out); }
.cta:hover .arr, .cta-2:hover .arr, .index a:hover .arr { transform: translateX(4px); }

.cta-2 { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg-3); text-decoration: none; transition: color 0.16s var(--out); }
.cta-2:hover { color: var(--fg); }
.cta-2--raw { text-transform: none; letter-spacing: 0.01em; font-size: var(--t-meta); }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(5rem, 15vh, 11rem));
  padding-bottom: clamp(5rem, 11vw, 9rem);
  overflow: hidden;
}

/* the mark as structure, anchored to the text column rather than the window */
.hero-mark {
  position: absolute;
  left: 70%; top: 58%;
  transform: translateY(-50%);
  width: clamp(11rem, 18vw, 19rem);
  height: auto;
  color: var(--fg);
  opacity: 0.042;
  pointer-events: none;
  z-index: 0;
}

.hero-in { position: relative; z-index: 1; }

.hero h1 { margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }
.hero .lead { margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }

/* Display headlines break where I choose above 46rem and wrap naturally below.
   A <br> hidden with display:none would swallow the word space with it. */
.display > span { display: inline; }
@media (min-width: 46rem) { .display > span { display: block; } }

/* The AI inside ENGRAIN. Stays inline with its line at every width. */
.display .ai { display: inline; color: var(--fire); }

/* One choreographed entrance, hero only. The h1 moves but never starts at
   opacity 0, so it still counts as painted for Largest Contentful Paint. */
.js .up { animation: up 0.7s var(--out) both; }
.js .up-fade { animation: up-fade 0.7s var(--out) both; }
.js .d2 { animation-delay: 0.14s; }
.js .d3 { animation-delay: 0.24s; }
@keyframes up { from { transform: translateY(14px); } to { transform: none; } }
@keyframes up-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- numbered claims
   Hanging numerals, hairlines, prose. Not a three-up card grid.           */
.claims { list-style: none; counter-reset: claim; }
.claims > li {
  counter-increment: claim;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 var(--s2);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.claims > li:first-child { border-top: 0; padding-top: 0; }
.claims > li::before {
  content: counter(claim, decimal-leading-zero);
  font-size: var(--t-meta);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  padding-top: 0.42em;
}
.claims h3 { margin-bottom: var(--s1); }
.claims p { max-width: 40rem; }

/* ------------------------------------------------------------ square field
   95 of 100 enterprise GenAI pilots showed no P&L impact. A real
   information graphic: 20 columns at every viewport, so the ratio cannot
   misread as five in ten on a phone.                                      */
.field {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: clamp(2px, 0.4vw, 6px);
  max-width: var(--measure-wide);
}
.field i { display: block; aspect-ratio: 1; background: rgba(255, 255, 255, 0.2); }
.field i.on { background: var(--fire); }
.js .field i { opacity: 0; }
.js .field.in i { animation: cell 0.45s var(--out) forwards; }
@keyframes cell { to { opacity: 1; } }

.field-key {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  margin-top: var(--s3);
  font-size: var(--t-meta); color: var(--fg-3);
}
.field-key span { display: flex; align-items: center; gap: 0.5rem; }
.field-key b { color: var(--fg); font-weight: 560; font-variant-numeric: tabular-nums; }
.field-key i { width: 0.625rem; height: 0.625rem; background: rgba(255, 255, 255, 0.28); flex: none; }
.field-key i.on { background: var(--fire); }

/* -------------------------------------------------------------- definitions
   The four elements, on hairlines. No cards, no icons.                    */
.defs > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 11fr);
  gap: var(--s1) clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.defs > div:last-child { border-bottom: 1px solid var(--rule); }
.defs dt { font-size: var(--t-h3); line-height: 1.28; letter-spacing: -0.018em; font-weight: 540; color: var(--fg); }
.defs .sub { display: block; margin-top: 0.375rem; color: var(--fg-3); }
.defs dd { max-width: 40rem; }

/* --------------------------------------------------------------------- tab
   A real table. Hairlines only, tabular numerals, no zebra, no container. */
.tab { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.tab th, .tab td {
  text-align: left; vertical-align: top;
  padding: 1.25rem var(--s3) 1.25rem 0;
  border-top: 1px solid var(--rule);
}
.tab thead th { border-top: 0; border-bottom: 1px solid var(--rule-mid); padding-top: 0; color: var(--fg-3); }
.tab tbody th {
  color: var(--fg);
  font-size: var(--t-h3);
  letter-spacing: -0.018em;
  font-weight: 540;
  line-height: 1.28;
}
.tab td:last-child { padding-right: 0; }
.tab col.c1 { width: 20%; }
.tab col.c2 { width: 42%; }
.tab col.c3 { width: 38%; }
/* two-column variant: a named building block against what it actually is */
.tab--2 col.b1 { width: 27%; }
.tab--2 col.b2 { width: 73%; }
.tab--2 td { max-width: 40rem; }

/* -------------------------------------------------------------- stated rule
   A commitment set between hairlines at the measure. Deliberately not a
   coloured callout box.                                                    */
.defs + .stated { border-top: 0; margin-top: var(--s4); }
.stated {
  border-top: 1px solid var(--rule-mid);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s3);
  margin-block: clamp(2rem, 4vw, 3rem);
  max-width: 40rem;
}
.stated p { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.02em; color: var(--fg); text-wrap: pretty; }

/* run-in headings: heading inline with the first sentence of its paragraph */
.runin { max-width: 40rem; }
.runin + .runin { margin-top: 1.15em; }

/* ------------------------------------------------------------------- index */
.index { list-style: none; }
.index li { border-top: 1px solid var(--rule); }
.index li:last-child { border-bottom: 1px solid var(--rule); }
.index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s3);
  align-items: baseline;
  padding-block: clamp(1.125rem, 2.2vw, 1.625rem);
  text-decoration: none;
  color: var(--fg-2);
  transition: color 0.16s var(--out);
}
.index a:hover { color: var(--fg); }
.index .ti { display: block; font-size: var(--t-h3); line-height: 1.28; letter-spacing: -0.018em; font-weight: 480; color: var(--fg); max-width: 34ch; }
.index .kd { display: block; margin-top: 0.375rem; font-size: var(--t-meta); line-height: 1.6; color: var(--fg-3); max-width: 52ch; }
.index .at { color: var(--fg-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---------------------------------------------------------------- portrait
   Monochrome, bottom-cropped, and masked into the ground so the subject is
   not cut off on a hard line. No glow.                                    */
.portrait { margin: 0; }
.portrait img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.portrait figcaption {
  margin-top: var(--s2);
  padding-top: var(--s1);
  border-top: 1px solid var(--rule);
  color: var(--fg-3);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* ---------------------------------------------------------------- contact */
.mail-xl {
  display: inline-block;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 480;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-mid);
  padding-bottom: 0.12em;
  transition: color 0.18s var(--out), border-color 0.18s var(--out);
  overflow-wrap: anywhere;
}
.mail-xl:hover { color: var(--fire); border-bottom-color: var(--fire); }

.contact-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; margin-top: var(--s3); }

.copy {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--rule); color: var(--fg-3);
  font-family: inherit;
  padding: 0.5rem 0.75rem; cursor: pointer;
  transition: color 0.16s var(--out), border-color 0.16s var(--out), transform 0.14s var(--out);
}
.copy:hover { color: var(--fg); border-color: var(--rule-mid); }
.copy:active { transform: scale(0.97); }
.copy.done { color: var(--fg); border-color: var(--fg-3); }
.copy svg { width: 0.875rem; height: 0.875rem; }

/* ----------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--rule); padding-block: var(--s6) var(--s5); }
.foot-top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s4) var(--s5); align-items: center;
  padding-bottom: var(--s4);
}
.foot-brand { display: block; }
.foot-lockup { height: 1.5rem; width: auto; color: var(--fg); transition: opacity 0.18s var(--out); }
.foot-brand:hover .foot-lockup { opacity: 0.72; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); list-style: none; }
.foot-nav a { font-size: var(--t-meta); color: var(--fg-3); text-decoration: none; transition: color 0.16s var(--out); }
.foot-nav a:hover { color: var(--fg); }
.foot-legal {
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-meta); color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.foot-legal a { color: var(--fg-3); text-decoration: none; transition: color 0.16s var(--out); }
.foot-legal a:hover { color: var(--fg); }

/* ------------------------------------------------------------ article page */
.art-head {
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 10vh, 7rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.art-head .lead, .art-head .cta-row { max-width: 40rem; }
.bullets { list-style: none; max-width: 40rem; }
.bullets li { position: relative; padding-left: 1.25rem; }
.bullets li + li { margin-top: 0.75rem; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 1px; background: var(--fg-3);
}

/* ---------------------------------------------------------------- timeline
   The forecast. Four phases on one six-column year axis, so the overlaps
   (Domain 2026-2028 and Differentiation 2026-2029 run in parallel) are visible
   rather than flattened into a sequence. The bars are aria-hidden decoration:
   every range is also stated in the caption below its bar.

   Colour comes from the Extended Soul palette (--dv-*), which the brand
   strategy reserves for data. This is the only place on the site that uses
   it, and it is why the bars are not another shade of grey.             */
.tl { max-width: var(--measure-wide); }

.tl-axis {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-mid);
}

.tl-rows { list-style: none; }

.tl-row { padding-top: var(--s3); }
.tl-row + .tl-row { border-top: 1px solid var(--rule); margin-top: var(--s3); }

.tl-track {
  position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 0.625rem;
}
.tl-bar { height: 0.5rem; background: var(--dv-2); }

/* Down the sequential ramp as the forecast reaches further out: the nearest
   phase is the brightest, the 2030 speculation the deepest, so visual weight
   sits on the part of the forecast a reader can act on. Reverse the four
   lines to flip that. */
.tl-rows > li:nth-child(2) .tl-bar { background: var(--dv-3); }
.tl-rows > li:nth-child(3) .tl-bar { background: var(--dv-4); }
.tl-rows > li:nth-child(4) .tl-bar { background: var(--dv-5); }

.tl-s1 { grid-column-start: 1; } .tl-s2 { grid-column-start: 2; } .tl-s3 { grid-column-start: 3; }
.tl-e3 { grid-column-end: 3; } .tl-e5 { grid-column-end: 5; }
.tl-e6 { grid-column-end: 6; } .tl-e7 { grid-column-end: 7; }

.tl-cap { font-size: var(--t-meta); letter-spacing: 0.02em; }
.tl-cap b { color: var(--fg); font-weight: 560; }
.tl-note { color: var(--fg-2); margin-top: 0.25rem; max-width: var(--measure); }

/* One draw, left to right, the first time the figure is seen. Same grammar as
   the evidence figure: it fills once and then stays filled. */
.js .tl-bar { transform: scaleX(0); transform-origin: left center; }
.js .tl.in .tl-bar { animation: tl-draw 0.62s var(--out) forwards; }
.js .tl.in .tl-rows > li:nth-child(2) .tl-bar { animation-delay: 0.09s; }
.js .tl.in .tl-rows > li:nth-child(3) .tl-bar { animation-delay: 0.18s; }
.js .tl.in .tl-rows > li:nth-child(4) .tl-bar { animation-delay: 0.27s; }
@keyframes tl-draw { to { transform: scaleX(1); } }

/* ------------------------------------------------------------------- legal */
.legal { max-width: var(--measure); }
.legal h1 { font-size: var(--t-h2); letter-spacing: -0.026em; margin-bottom: var(--s4); }
.legal h2 { font-size: 1.25rem; max-width: none; margin-top: var(--s5); margin-bottom: 0.5rem; }
.legal p, .legal li { margin-bottom: 0.75rem; }
.legal ul { padding-left: 1.25rem; }
.legal a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--fire); text-underline-offset: 0.2em; }
.legal a:hover { color: var(--fire); }
.legal-head { padding-top: calc(var(--nav-h) + clamp(3rem, 8vh, 5rem)); }
.lang { display: inline-flex; border: 1px solid var(--rule-mid); margin-bottom: var(--s5); }
.lang button {
  font-family: inherit; padding: 0.5rem 1rem;
  background: none; color: var(--fg-3); border: 0; cursor: pointer;
  transition: background 0.16s var(--out), color 0.16s var(--out);
}
.lang button + button { border-left: 1px solid var(--rule-mid); }
.lang button[aria-pressed="true"] { background: var(--fg); color: #14151A; }
.lang-block[hidden] { display: none; }
.updated { margin-top: var(--s5); font-size: var(--t-meta); color: var(--fg-3); }

/* --------------------------------------------------------------------- 404 */
.err { padding-top: calc(var(--nav-h) + clamp(5rem, 16vh, 10rem)); padding-bottom: var(--s8); }
.err-code {
  font-size: clamp(3rem, 1.9286rem + 5.3571vw, 6.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 540;
  font-variant-numeric: tabular-nums;
  color: var(--fire);
  margin-bottom: var(--s3);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 64rem) {
  /* stack the engagement table before its prose columns get squeezed */
  .tab, .tab tbody, .tab tr, .tab td, .tab th { display: block; }
  .tab thead, .tab colgroup, .tab col { display: none; }
  .tab--2 td { max-width: none; }
  /* the block name already labels the row; the column head would repeat it */
  .tab--2 td::before { display: none; }
  .tab tr { border-top: 1px solid var(--rule); padding-block: var(--s3); }
  .tab tr:first-child { border-top: 0; padding-top: 0; }
  .tab th, .tab td { border: 0; padding: 0 0 0.75rem; }
  .tab td::before { content: attr(data-l); display: block; color: var(--fg-3); margin-bottom: 0.25rem; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split .portrait { max-width: 22rem; }
}

@media (max-width: 52rem) {
  :root { --nav-h: 4rem; }
  .spine { grid-template-columns: minmax(0, 1fr); }
  .spine > .rail, .spine > .body { grid-column: 1; }
  .rail {
    position: static;
    display: flex; align-items: baseline; gap: 0.75rem;
    padding-bottom: var(--s3); margin-bottom: var(--s3);
    border-bottom: 1px solid var(--rule);
  }
  .rail-n { margin-bottom: 0; }
  .rail-t { max-width: none; }

  .burger { display: grid; }
  .nav-mail { display: none; }
  /* The <nav> wrapper stays a flex item even though its list is absolutely
     positioned, so .nav-in's gap pushed the burger a gap-width in from the
     gutter. Below the breakpoint the brand's margin-right: auto does all the
     separating, so no gap is needed. */
  .nav-in { gap: 0; }
  .nav-list {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Right justified, so the items line up under the burger that opened
       them instead of hanging off the opposite edge. */
    text-align: right;
    background: #1C1C1E;
    border-bottom: 1px solid var(--rule);
    padding: 0 var(--gutter) var(--s2);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.2s var(--out), transform 0.2s var(--out), visibility 0.2s;
  }
  .nav-list.open { opacity: 1; visibility: visible; transform: none; }
  /* Block, not the inline-block of the desktop bar: the divider should span
     the panel, and the label should sit at the right edge of it. */
  .nav-a { display: block; padding-block: 0.875rem; border-bottom: 1px solid var(--rule); }
  .nav-list li:last-child .nav-a { border-bottom: 0; }

  .defs > div { grid-template-columns: minmax(0, 1fr); }
  .index a { grid-template-columns: minmax(0, 1fr); }
  .index .at { order: -1; }
  .claims > li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .hero-mark { left: auto; right: -3rem; top: 44%; width: 11rem; opacity: 0.05; }
  .field { gap: 2px; }
}

/* --------------------------------------------------------- reduced motion
   Gentler, not absent: colour and opacity stay, transforms go.            */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .up, .js .up-fade, .js .field i, .js .tl-bar { opacity: 1 !important; transform: none !important; }
}

@media print {
  #drift, .nav, .hero-mark { display: none; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
}