/* Self-hosted, not Google Fonts.

   The Google Fonts stylesheet was a render-blocking request to a third-party
   origin: a DNS lookup, a TLS handshake and a round trip before the page
   could paint, all before a single byte of font arrived. Measured at 390px
   with a 300ms round trip, that was DOMContentLoaded 202ms against 413ms.
   The same bytes now come down the connection that already served the HTML.

   The old argument for Google Fonts, that a visitor probably has Inter
   cached from another site, has been dead since browsers partitioned the
   HTTP cache by site. There is no shared cache to benefit from any more.

   Both faces are SIL Open Font License 1.1, which permits this; the licences
   ship in content/fonts/ beside the files. font-display: swap so text is
   readable in the fallback immediately and never invisible.

   Weights are the ones the stylesheet actually uses and no others: Inter at
   400, 500, 600 and 700, IBM Plex Mono at 400 and 500. Georgia carries the
   headlines and is already on the reader's machine. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-mono-500.woff2") format("woff2"); }

/* Investments Playbook. Institutional wealth, private bank research desk.
   Ivory first, ink bands, one accent. Square and serious. */

:root {
  /* Business-press palette: black page furniture, one red, Georgia headlines.
     The variable names are inherited from the first edition of this site, so
     --gold now carries the accent red rather than a metallic. */
  --ink: #171717;
  --ink-deep: #000000;
  --ink-soft: #262626;
  --gold: #dc0000;
  --gold-muted: #b00000;
  /* The brand red clears AA on paper at 5.01 and fails on the dark surfaces:
     3.45 on the ticker and 4.04 on black, and the muted red used for the
     footer attribution link came to 2.85. This is the same hue lifted until
     it is legible on ink, for links sitting on dark ground only. */
  --gold-on-dark: #ff4d4d;
  --gold-wash: rgba(236, 229, 192, 0.55);
  --cream: #ece5c0;
  --blue: #007ac8;
  --ivory: #ffffff;
  --paper: #fbfbf9;
  --slate: #171717;
  --muted: #6b6b6b;
  --muted-dark: #a8a8a8;
  --pos: #0e7c70;
  --neg: #dc0000;
  --hair-dark: rgba(255, 255, 255, 0.16);
  --hair-light: #e3e3e1;
  --wrap: 1180px;
  --prose: 68ch;
  --r: 2px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--slate);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The masthead and the ticker put thirteen links in front of the content on
   every page. This is how a keyboard reaches the article in one tab. It is
   off-screen rather than hidden, because display:none and visibility:hidden
   both take an element out of the focus order, which is the one thing it
   needs to be in. */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--ink-deep); color: #ffffff;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; padding: 12px 18px; border-radius: var(--r);
  text-decoration: none; transition: top 0.15s;
}
.skip:focus { top: 8px; }
/* main takes focus when the link is used, and must not draw a ring for the
   mouse users who never asked for it. */
main:focus { outline: none; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--prose); }

/* ---------- section bands ---------- */
.band { padding: 88px 0; }
.band--ink { background: var(--ink); color: #e8e8e8; position: relative; }
.band--ink-deep { background: var(--ink-deep); color: #c9c9c9; }
.band--paper { background: var(--paper); }
.band--tight { padding: 56px 0; }
.band--ink::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band--ink > .wrap { position: relative; z-index: 1; }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink-deep h2 { color: #ffffff; }

.eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-muted); margin: 0 0 18px;
}
.band--ink .eyebrow, .band--ink-deep .eyebrow { color: var(--gold); }

.section-head { margin-bottom: 40px; }
/* An index page's heading is an h1, a heading inside a page is an h2.
   They are the same size on purpose: the level is for machines. */
.section-head h1,
.section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0; }
.section-head p { max-width: 62ch; color: var(--muted); margin: 14px 0 0; font-size: 15px; }
.band--ink .section-head p { color: var(--muted-dark); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60; background: rgba(0, 0, 0, 0.95);
  backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--hair-light);
}
.hdr__in { display: flex; align-items: center; gap: 28px; height: 68px; }
.mark {
  font-family: var(--serif); font-size: 21px; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--ink);
}
.mark b { font-weight: 600; color: var(--gold-muted); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  text-decoration: none; font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate); padding: 6px 0;
  border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-color: var(--gold); }
.hdr .btn { margin-left: 8px; }
.burger {
  display: none; margin-left: auto; background: none; border: 1px solid var(--hair-light);
  border-radius: var(--r); width: 40px; height: 36px; cursor: pointer; color: var(--slate);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; padding: 13px 24px;
  border-radius: var(--r); border: 1px solid var(--gold); cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn--solid { background: var(--gold); color: #ffffff; }
.btn--solid:hover { background: #b00000; border-color: #b00000; }
.btn--ghost { background: transparent; color: var(--gold-muted); }
.band--ink .btn--ghost { color: var(--gold); }
.btn--ghost:hover { background: var(--gold-wash); }
.btn--sm { padding: 9px 16px; font-size: 11px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- ticker ---------- */
.ticker { background: var(--ink); border-bottom: 1px solid var(--hair-dark); }
.ticker__in { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; }
.ticker__in::-webkit-scrollbar { display: none; }
.tk {
  flex: 0 0 auto; padding: 11px 20px; border-right: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-direction: column; gap: 2px; min-width: 132px;
}
.tk__l { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8c8c8c; }
.tk__r { display: flex; align-items: baseline; gap: 8px; }
.tk__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; color: #ffffff; }
.tk__c { font-family: var(--mono); font-size: 11.5px; }
.tk--stale { opacity: 0.45; }
.up { color: #2eb086; } .dn { color: #f5333f; } .flat { color: #8c8c8c; }
.ticker__meta {
  flex: 0 0 auto; margin-left: auto; padding: 11px 20px; display: flex; align-items: center;
  gap: 14px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8c8c8c;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.ticker__meta a { color: var(--gold-on-dark); text-decoration: none; }

/* ---------- hero ---------- */
.hero { padding: 108px 0 84px; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.7rem); font-weight: 300; max-width: 17ch; }
.hero__sub { max-width: 58ch; margin: 26px 0 34px; font-size: 17px; color: #c4c4c4; line-height: 1.65; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 64px; background: var(--hair-dark); border: 1px solid var(--hair-dark); }
.stat { background: var(--ink); padding: 24px 20px; }
.stat__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; color: var(--gold); line-height: 1; }
.stat__c { margin-top: 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9a9a; }

/* ---------- brief ---------- */
.brief-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.brief-date { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--gold-muted); }
.badge {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--hair-light);
  border-radius: var(--r); color: var(--muted);
}
.band--ink .badge { border-color: var(--hair-dark); color: var(--gold); }
.badge--gold { border-color: var(--gold); color: var(--gold-muted); }
.brief-title { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.brief-sub { color: var(--muted); margin: 12px 0 0; max-width: 64ch; }
.byline { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }

.item { border-top: 1px solid var(--hair-light); padding-top: 30px; margin-top: 40px; max-width: var(--prose); }
/* The one link an item earns. Restrained: a reader has just finished a beat
   and this is the next step, not an advertisement. */
.item__fw { margin: 18px 0 0; font-size: 13.5px; }
.item__fw span { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-right: 10px; }
.item__fw a { color: var(--gold-muted); font-weight: 500; }

.item h2, .item h3 { font-size: 1.7rem; margin-bottom: 22px; }
.beat { margin-bottom: 22px; }
.beat__l { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-muted); margin-bottom: 7px; }
.beat p { margin: 0; }
.item__src { font-size: 12.5px; color: var(--muted); margin-top: 18px; }
.item__src a { color: var(--gold-muted); }

.gate { position: relative; }
.gate__fade { position: relative; max-height: 108px; overflow: hidden; }
.gate__fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 10%, var(--ivory) 92%); }
/* The live crypto band. Ink, because it carries market figures and the rest
   of this site puts market figures on ink. The caption is part of the
   component rather than an afterthought: a figure without its source and its
   time is not publishable here. */
.cx-live {
  background: var(--ink-deep);
  color: #ffffff;
  border-radius: var(--r);
  padding: 30px 32px;
  margin: 0 0 44px;
  max-width: var(--prose);
}
.cx-live h2 { color: #ffffff; font-size: 1.45rem; margin: 0 0 14px; }
.cx-live .cx-lede { color: #ffffff; font-size: 15px; line-height: 1.6; margin: 0 0 18px; max-width: 52ch; }
.cx-live .cx-lede b { color: var(--gold); font-weight: 400; }
.cx-live .tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.cx-live .tbl th, .cx-live .tbl td { border-bottom: 1px solid var(--hair-dark); padding: 9px 10px 9px 0; text-align: left; }
.cx-live .tbl thead th { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); font-weight: 600; }
.cx-live .tbl .num { text-align: right; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.cx-live .tbl tbody th { font-weight: 400; color: #ffffff; }
.cx-live .cx-note { color: var(--muted-dark); font-size: 12.5px; padding-left: 14px; }
.cx-live .cx-cap { color: var(--muted-dark); font-size: 12px; line-height: 1.6; margin: 16px 0 0; }
.cx-live .cx-cap a { color: var(--gold-on-dark); }
.cx-live--stale { opacity: 0.82; }
@media (max-width: 560px) {
  .cx-live { padding: 24px 20px; }
  .cx-live .cx-note { display: none; }
}

/* The end-of-page capture. Restrained on purpose: it sits after an article
   a reader has just finished, so it reads as the next step rather than as an
   interruption. Cream, one hairline, no shouting. */
.cap {
  margin: 56px 0 0;
  max-width: var(--prose);
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  padding: 26px 28px;
  border-radius: 0 var(--r) var(--r) 0;
}
.cap h2 { font-size: 1.35rem; margin: 0 0 8px; }
.cap p { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.6; max-width: 46ch; }
.article .cap h2 { margin: 0 0 8px; }
@media (max-width: 560px) { .cap { padding: 22px 20px; } }

.gate__box { border: 1px solid var(--gold); background: var(--paper); padding: 26px; margin-top: -10px; position: relative; border-radius: var(--r); }
.gate__box h2, .gate__box h4 { font-size: 1.5rem; margin-bottom: 6px; }
.gate__box p { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.inline-form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 240px; }

/* ---------- numbers table ---------- */
.tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--hair-light); }
.tbl caption { text-align: left; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; }
.tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hair-light); font-size: 14px; }
.tbl thead th { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tbl td.n, .tbl th.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .note { color: var(--muted); font-size: 12.5px; }
.tbl a { color: var(--gold-muted); }
/* The wrapper must be allowed to be narrower than the table, or the
   overflow never engages and the page widens instead. */
.table-scroll { overflow-x: auto; max-width: 100%; }
/* Inside prose, a table squeezed to phone width is unreadable before it
   is unusable. Give it a floor and let it scroll. */
.article .table-scroll .tbl { min-width: 26rem; }

/* ---------- matrix ---------- */
.matrix-wrap { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: stretch; }
.matrix-y {
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; justify-content: space-between;
}
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair-dark); border: 1px solid var(--hair-dark); }
.q { background: var(--ink); padding: 30px 26px; }
.q__t { font-family: var(--serif); font-size: 1.45rem; color: #ffffff; margin-bottom: 6px; }
.q__k { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.q ul { list-style: none; margin: 0; padding: 0; }
.q li { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #a8a8a8; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.q li:last-child { border-bottom: none; }
.q__split { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--gold-muted); }
.matrix-x { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 12px 0 0 48px; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1px; background: var(--hair-light); border: 1px solid var(--hair-light); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--paper); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: background 0.2s; }
.band--ivory .card, .band--default .card { background: var(--ivory); }
a.card:hover { background: #f5f5f3; }
.card__k { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-muted); }
.card__t { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.card__d { font-size: 14px; color: var(--muted); margin: 0; }
.card__f { margin-top: auto; padding-top: 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--hair-light);
  background: transparent; border-radius: var(--r); cursor: pointer; color: var(--muted);
}
.chip[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); background: var(--gold-wash); }

/* ---------- forms ---------- */
label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 7px; color: var(--muted); }
.band--ink label { color: #a8a8a8; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; padding: 12px 13px;
  border: 1px solid var(--hair-light); border-radius: var(--r); background: var(--paper);
  color: var(--slate); appearance: none;
}
.band--ink input, .band--ink select { background: #1c1c1c; border-color: var(--hair-dark); color: #f2f2f2; }
input[type="range"] { width: 100%; accent-color: var(--gold); padding: 0; border: 0; background: none; }
.field { margin-bottom: 18px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 12.5px; color: var(--muted); }
.band--ink .check { color: #a8a8a8; }
.check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--gold); flex: 0 0 auto; }
.form-note { font-size: 12px; color: var(--muted); margin-top: 14px; }
.ok { border: 1px solid var(--gold); padding: 22px; border-radius: var(--r); background: var(--gold-wash); }
.ok h4 { font-size: 1.4rem; margin-bottom: 6px; }
.err { color: var(--neg); font-size: 12.5px; margin-top: 8px; }

/* ---------- lead band ---------- */
.lead { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.lead__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair-dark); border: 1px solid var(--hair-dark); margin-top: 34px; }
.lead__stat { background: var(--ink); padding: 20px; }
.lead__stat b { display: block; font-family: var(--mono); font-size: 22px; color: var(--gold); font-weight: 400; }
.lead__stat span { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #9a9a9a; }

/* ---------- author ---------- */
.author { display: grid; grid-template-columns: 148px 1fr; gap: 34px; align-items: center; }
.author__img { width: 148px; height: 148px; border-radius: var(--r); background: linear-gradient(150deg, var(--ink), var(--ink-soft)); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 46px; color: var(--gold); }
.author h2, .author h3 { font-size: 2rem; }
.author__role { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-muted); margin: 8px 0 14px; }

/* ---------- article ---------- */
.article { max-width: var(--prose); }
.article h2 { font-size: 1.9rem; margin: 44px 0 16px; }
.article h3 { font-size: 1.45rem; margin: 32px 0 12px; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin-bottom: 8px; }
.article strong { font-weight: 600; color: var(--ink); }
.article code { font-family: var(--mono); font-size: 0.9em; background: rgba(23,23,23,0.06); padding: 2px 5px; border-radius: 2px; }
.article a { color: var(--gold-muted); }
.definition { border-left: 3px solid var(--gold); background: var(--paper); padding: 20px 24px; font-family: var(--serif); font-size: 1.4rem; line-height: 1.35; margin: 28px 0 36px; }
/* The arithmetic block is aligned columns, rule lines and indentation that
   carries meaning, so `pre-wrap` did not soften it, it destroyed it: at 320px
   a figure wrapped onto its own line at column zero and a rule line broke in
   half. `overflow-x: auto` was already here and could never fire, because
   wrapped content by definition never exceeds its box. `pre` lets it. */
.formula { font-family: var(--mono); font-size: 13.5px; line-height: 1.9; background: var(--ink); color: #e5e5e5; padding: 22px 24px; border-radius: var(--r); overflow-x: auto; white-space: pre; }
/* A region that scrolls must be reachable by keyboard, or it is readable
   only by people who can use a pointer. */
.formula:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.breaks { list-style: none; padding: 0; margin: 0; }
.breaks li { border-top: 1px solid var(--hair-light); padding: 14px 0 14px 30px; position: relative; margin: 0; }
.breaks li::before { content: "!"; position: absolute; left: 0; top: 14px; font-family: var(--mono); color: var(--neg); font-size: 13px; }
.srcs { list-style: decimal; padding-left: 22px; font-size: 13.5px; color: var(--muted); }
.srcs a { color: var(--gold-muted); }
.reviewed { font-family: var(--mono); font-size: 12px; color: var(--muted); border-top: 1px solid var(--hair-light); padding-top: 16px; margin-top: 34px; }
.callout { border: 1px solid var(--gold); border-radius: var(--r); background: var(--gold-wash); padding: 20px 24px; margin: 28px 0; font-size: 14.5px; }
.callout b { display: block; font-family: var(--serif); font-size: 1.2rem; margin-bottom: 6px; color: var(--ink); }

/* ---------- article layout with rail ---------- */
.doc { display: grid; grid-template-columns: minmax(0, var(--prose)) 260px; gap: 64px; align-items: start; }
.rail { position: sticky; top: 92px; font-size: 13px; }
.rail h2, .rail h5 { font-family: var(--sans); line-height: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.rail ol { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: r; }
.rail li { counter-increment: r; border-top: 1px solid var(--hair-light); }
.rail li:last-child { border-bottom: 1px solid var(--hair-light); }
.rail ol a { display: block; padding: 10px 0 10px 26px; position: relative; text-decoration: none; color: var(--slate); transition: color 0.2s; }
.rail ol a::before { content: counter(r); position: absolute; left: 0; font-family: var(--mono); font-size: 11px; color: var(--gold-muted); }
.rail ol a:hover { color: var(--gold-muted); }
.rail__box { border: 1px solid var(--hair-light); padding: 18px; border-radius: var(--r); background: var(--paper); }
.rail__box p { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* minmax(0, 1fr) rather than 1fr. A bare 1fr is minmax(auto, 1fr), and an
   auto minimum means the column refuses to shrink below its widest
   content, so a wide table pushed the whole page sideways instead of
   scrolling inside its own wrapper. The desktop rule above already had
   the minmax(0, ...); this override had lost it. */
@media (max-width: 980px) { .doc { grid-template-columns: minmax(0, 1fr); gap: 40px; } .rail { position: static; } }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--hair-light); border: 1px solid var(--hair-light); }
.calc__in { background: var(--paper); padding: 32px; }
.calc__out { background: var(--ink); color: #e5e5e5; padding: 32px; position: sticky; top: 68px; align-self: start; }
.calc { align-items: start; }
.calc__out h2, .calc__out h3 { color: #ffffff; font-size: 1.5rem; margin-bottom: 20px; }
/* flex-wrap, because a result row is a label and a value that will not always
   fit on one line. The hero value is 32px mono, and a verdict long enough to
   be useful ("AED 7,345, or 0.37% of the purchase") is wider than a 300px
   phone once the label has taken its share. Without the wrap the row pushes
   the whole page sideways rather than going to two lines. min-width: 0 is the
   other half: a flex item defaults to min-width auto and will not shrink
   below its own content. */
.res { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.res__l, .res__v { min-width: 0; }
.res:last-of-type { border-bottom: none; }
.res__l { font-size: 12.5px; color: #a8a8a8; }
.res__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; color: #ffffff; }
.res--hero { border-top: 1px solid var(--gold); border-bottom: none; margin-top: 12px; padding-top: 18px; }
.res--hero .res__l { color: var(--gold); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.res--hero .res__v { font-size: 32px; color: var(--gold); }
.slider-val { float: right; font-family: var(--mono); font-size: 13px; color: var(--gold-muted); }
.calc__note { font-size: 12px; color: #9a9a9a; margin-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 16px; }

/* ---------- archive list ---------- */
.arch { border-top: 1px solid var(--hair-light); }
.arch a { display: grid; grid-template-columns: 92px 1fr auto; gap: 22px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--hair-light); text-decoration: none; transition: background 0.15s; }
.arch a:hover { background: var(--paper); }
.arch__d { font-family: var(--mono); font-size: 13px; color: var(--gold-muted); }
.arch__t { font-family: var(--serif); font-size: 1.35rem; }
.arch__s { display: block; font-family: var(--sans); font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.month { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 28px 0 8px; }

/* ---------- footer ---------- */
.ftr { padding: 68px 0 34px; }
.ftr__cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 34px; }
.ftr h2, .ftr h3, .ftr h4 { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-on-dark); margin-bottom: 14px; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 9px; }
.ftr a { color: #a8a8a8; text-decoration: none; font-size: 13.5px; }
.ftr a:hover { color: var(--gold-on-dark); }
.ftr__legal { border-top: 1px solid var(--hair-dark); margin-top: 44px; padding-top: 26px; font-size: 12px; color: #8c8c8c; line-height: 1.75; }
.ftr__legal p { margin: 0 0 12px; max-width: 92ch; }
.ftr__legal a { color: var(--gold-on-dark); }

/* ---------- motion ---------- */
.rise { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* minmax(0, 1fr), not a bare 1fr. A bare 1fr is minmax(auto, 1fr), and an
     auto minimum means the column will not shrink below its own content, so
     the panel pushes the page sideways instead of wrapping. This is the same
     bug the .doc column had, found again on the crypto calculator, whose
     result panel carries longer strings than the older ones. */
  .lead, .calc, .grid--3, .ftr__cols { grid-template-columns: minmax(0, 1fr); }
  .grid--3, .grid--2 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .author { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .band { padding: 60px 0; }
  .hero { padding: 72px 0 56px; }
  .nav { display: none; }
  .hdr .btn { display: none; }
  .burger { display: block; }
  .nav--open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--ivory); border-bottom: 1px solid var(--hair-light); padding: 8px 24px 20px; }
  .nav--open a { padding: 12px 0; border-bottom: 1px solid var(--hair-light); }
  .grid--3, .grid--2, .matrix, .field--row, .lead__stats { grid-template-columns: 1fr; }
  .matrix-wrap { grid-template-columns: 1fr; }
  .matrix-y { display: none; }
  .matrix-x { margin-left: 0; }
  .arch a { grid-template-columns: 1fr; gap: 6px; }
  .ftr__cols { grid-template-columns: 1fr; }
}

/* ---------- the Playbook document ---------- */
.pbdoc { max-width: 780px; margin: 0 auto; }
.pbdoc h2, .pbdoc h3, .pbdoc h4, .pbdoc h5 { font-family: var(--serif); }
.doc-cover { text-align: center; padding: 40px 0 80px; border-bottom: 1px solid var(--hair-light); margin-bottom: 64px; }
.doc-cover__eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-muted); margin: 0 0 28px; }
.doc-cover h1 { font-size: clamp(3rem, 9vw, 5.6rem); font-weight: 300; line-height: 0.98; }
.doc-cover__ed { font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 26px 0 60px; }
.doc-cover__by { font-family: var(--serif); font-size: 1.5rem; line-height: 1.35; margin: 0; }
.doc-cover__by span { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.doc-cover__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 48px; }

.doc-intro, .doc-matrix { margin-bottom: 64px; }
.doc-intro h2, .doc-matrix h2 { font-size: 1.9rem; margin-bottom: 18px; }
.doc-intro p, .doc-matrix p { margin: 0 0 16px; }
.doc-matrix .tbl { margin: 24px 0; }
.doc-matrix .tbl th:first-child { width: 90px; }

.doc-toc { border-top: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light); padding: 34px 0; margin-bottom: 72px; }
.doc-toc h2 { font-size: 1.5rem; margin-bottom: 22px; }
.doc-toc > ol { list-style: none; margin: 0; padding: 0; }
.doc-toc > ol > li { margin-bottom: 22px; }
.doc-toc__cat { display: block; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-muted); margin-bottom: 8px; }
.doc-toc ol ol { list-style: none; margin: 0; padding: 0; }
.doc-toc ol ol li { margin: 0; }
.doc-toc a { display: block; padding: 6px 0; text-decoration: none; font-size: 15px; }
.doc-toc a:hover { color: var(--gold-muted); }
.doc-toc__n { display: inline-block; width: 26px; font-family: var(--mono); font-size: 12px; color: var(--gold-muted); }

.doc-part { margin-bottom: 72px; }
.doc-part__h { font-size: 2.4rem; padding-bottom: 14px; border-bottom: 2px solid var(--gold); margin-bottom: 48px; }
.doc-ch { margin-bottom: 64px; }
.doc-ch__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-muted); margin: 0 0 6px; }
.doc-ch h3 { font-size: 2rem; margin-bottom: 6px; }
.doc-ch h4 { font-size: 1.25rem; margin: 30px 0 12px; }
.doc-ch .article h4 { font-size: 1.9rem; margin: 44px 0 16px; }
.doc-ch .article h5 { font-size: 1.45rem; margin: 32px 0 12px; }
.doc-ch__calc { font-size: 13px; color: var(--muted); border-left: 2px solid var(--gold); padding-left: 14px; }
.doc-ch__calc a { color: var(--gold-muted); word-break: break-all; }
.doc-end { text-align: center; padding-top: 40px; border-top: 1px solid var(--hair-light); font-size: 14px; color: var(--muted); }
.doc-end a { color: var(--gold-muted); }

@media print {
  /* Conversion furniture is noise on paper. A form cannot be filled in with a
     pen, and .btn is already hidden, which would otherwise leave an orphaned
     text input on the page. */
  .hdr, .ticker, .ftr, .btn, .cap, .gate__box, .inline-form { display: none !important; }
  /* The live band stays, because it carries its own source and timestamp and
     is therefore still meaningful on paper. It just stops being black. */
  .cx-live { background: #fff !important; color: #000; border: 1px solid #ccc; page-break-inside: avoid; }
  .cx-live h2, .cx-live .cx-lede, .cx-live .tbl tbody th { color: #000; }
  .cx-live .cx-lede b { color: #000; font-weight: 700; }
  .cx-live .tbl th, .cx-live .tbl td { border-bottom: 1px solid #ddd; }
  .cx-live .cx-cap, .cx-live .cx-note, .cx-live .tbl thead th { color: #444; }
  body { background: #fff; font-size: 11pt; }
  .band { padding: 0; }
  .pbdoc { max-width: none; }
  .doc-cover { page-break-after: always; padding-top: 22%; }
  .doc-toc { page-break-after: always; }
  .doc-part__h { page-break-before: always; }
  .doc-ch { page-break-inside: auto; }
  .doc-ch h3, .doc-ch h4 { page-break-after: avoid; }
  .formula, .tbl, .definition { page-break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}

/* ================================================================
   DEPTH AND MOTION
   A 3D layer over the same restrained palette. Every effect here is
   additive: remove this block and the site still renders correctly.
   Everything is switched off under prefers-reduced-motion, at the
   bottom of this file.
   ================================================================ */

:root {
  --e-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --scene: 1100px;
  --lift: 0 22px 48px -26px rgba(6, 14, 26, 0.5), 0 3px 10px -6px rgba(6, 14, 26, 0.22);
  --lift-gold: 0 24px 54px -28px rgba(220, 0, 0, 0.30), 0 2px 10px -6px rgba(6, 14, 26, 0.4);
}

/* ---------- page entrance ---------- */
main { animation: page-in 0.55s var(--e-out) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- scroll progress ---------- */
.prog {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-muted), var(--gold) 55%, #ff6b6b);
}

/* ---------- header condense ---------- */
.hdr { transition: background 0.35s var(--e-soft), box-shadow 0.35s var(--e-soft); }
.hdr__in { transition: height 0.35s var(--e-soft); }
.hdr--on { box-shadow: 0 14px 34px -26px rgba(6, 14, 26, 0.7); }
.hdr--on .hdr__in { height: 58px; }
.mark { transition: letter-spacing 0.35s var(--e-soft); }
.hdr--on .mark { letter-spacing: 0.02em; }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.35s var(--e-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- ink bands get a receding floor grid ---------- */
.band--ink { overflow: hidden; }
.band--ink::before {
  content: ""; position: absolute; left: -25%; right: -25%; bottom: -10%; height: 78%;
  pointer-events: none; opacity: 0.55; z-index: 0;
  background-image:
    linear-gradient(rgba(220, 0, 0, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 0, 0, 0.09) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 72%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 72%);
  animation: floor 24s linear infinite;
}
@keyframes floor { to { background-position: 0 70px, 0 0; } }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero > .wrap { position: relative; z-index: 3; }
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity 1.4s var(--e-soft);
  /* keep the globe off the headline rather than behind it */
  -webkit-mask-image: linear-gradient(to right, transparent 4%, rgba(0, 0, 0, 0.25) 26%, #000 48%);
  mask-image: linear-gradient(to right, transparent 4%, rgba(0, 0, 0, 0.25) 26%, #000 48%);
}
@media (max-width: 899px) {
  .hero__canvas { -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 46%); mask-image: linear-gradient(to bottom, transparent 6%, #000 46%); opacity: 0.7; }
  .hero__canvas.on { opacity: 0.7; }
}
.hero__canvas.on { opacity: 1; }
.hero__glow {
  position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 42% at 78% 44%, rgba(255, 255, 255, 0.07), transparent 66%),
    radial-gradient(40% 46% at 18% 78%, rgba(220, 0, 0, 0.10), transparent 62%),
    radial-gradient(30% 36% at 52% 6%, rgba(255, 255, 255, 0.04), transparent 70%);
  animation: drift 26s var(--e-soft) infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}
.hero h1 { text-wrap: balance; }
.hero h1 .w {
  display: inline-block; opacity: 0; transform: translate3d(0, 0.5em, 0) rotateX(-45deg);
  transform-origin: 50% 100%;
  animation: word-in 0.9s var(--e-out) forwards; animation-delay: var(--d, 0ms);
}
@keyframes word-in { to { opacity: 1; transform: none; } }

/* ---------- scroll reveal, now with depth ---------- */
.rise {
  opacity: 0;
  transform: perspective(1000px) translate3d(0, 22px, 0) rotateX(4deg);
  transform-origin: 50% 100%;
  transition: opacity 0.55s var(--e-out), transform 0.55s var(--e-out);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.rise.in { opacity: 1; transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0deg); }

/* ---------- tilt ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.6s var(--e-out), box-shadow 0.6s var(--e-out);
  will-change: transform;
}
[data-tilt].tilting { transition: transform 0.12s linear, box-shadow 0.4s var(--e-out); }

/* ---------- cards ---------- */
.grid { overflow: visible; }
a.card { position: relative; transition: transform 0.6s var(--e-out), box-shadow 0.6s var(--e-out), background 0.3s; }
a.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent; transition: border-color 0.45s var(--e-out);
}
a.card:hover { z-index: 3; box-shadow: var(--lift); }
a.card:hover::after { border-color: var(--gold); }
.card__t, .card__f { transition: transform 0.6s var(--e-out), color 0.3s; }
a.card:hover .card__t { transform: translateZ(30px); }
a.card:hover .card__f { transform: translateZ(16px); color: var(--gold); }

/* ---------- stats and quadrants ---------- */
.stats, .lead__stats, .matrix { overflow: visible; }
.stat, .lead__stat, .q {
  position: relative;
  transition: transform 0.6s var(--e-out), box-shadow 0.6s var(--e-out), background 0.4s;
}
.stat:hover, .lead__stat:hover, .q:hover { z-index: 3; box-shadow: var(--lift-gold); background: var(--ink-soft); }
.stat__v, .lead__stat b, .q__t { transition: transform 0.6s var(--e-out), color 0.3s; }
.stat:hover .stat__v, .lead__stat:hover b { transform: translateZ(26px) scale(1.04); }
.q:hover .q__t { transform: translateZ(24px); }

/* ---------- ticker, running ---------- */
.ticker--run .ticker__in { overflow: hidden; }
.ticker--run .ticker__track { display: flex; flex: 0 0 auto; animation: tkm 78s linear infinite; will-change: transform; }
.ticker--run:hover .ticker__track, .ticker--run:focus-within .ticker__track { animation-play-state: paused; }
@keyframes tkm { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tk { transition: background 0.35s var(--e-out); }
.tk:hover { background: rgba(220, 0, 0, 0.09); }
.tk__v { transition: color 0.3s; }
.tk:hover .tk__v { color: var(--gold); }
.ticker--run .ticker__meta { background: var(--ink); position: relative; z-index: 2; }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; transform: translateZ(0); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.35s var(--e-out), box-shadow 0.35s var(--e-out); }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(6, 14, 26, 0.6); }
.btn:hover::after { animation: sheen 0.8s var(--e-out); }
.btn:active { transform: translateY(0); }
@keyframes sheen { to { left: 150%; } }

/* ---------- tables and lists ---------- */
.tbl tbody tr { transition: background 0.3s, transform 0.4s var(--e-out); }
.tbl tbody tr:hover { background: var(--gold-wash); }
.arch a { transition: background 0.3s, transform 0.45s var(--e-out), box-shadow 0.45s var(--e-out); }
.arch a:hover { transform: translateX(8px); box-shadow: -3px 0 0 0 var(--gold); }
.rail ol a { transition: color 0.25s, transform 0.35s var(--e-out); }
.rail ol a:hover { transform: translateX(5px); }
.chip { transition: transform 0.3s var(--e-out), border-color 0.3s, color 0.3s, background 0.3s; }
.chip:hover { transform: translateY(-2px); border-color: var(--gold-muted); }

/* ---------- article furniture ---------- */
.definition, .callout, .formula, .gate__box, .ok, .rail__box, .calc__out, .author__img {
  transition: transform 0.6s var(--e-out), box-shadow 0.6s var(--e-out);
}
.definition:hover, .callout:hover, .formula:hover { box-shadow: var(--lift); }
.author__img:hover { box-shadow: var(--lift-gold); }

/* ---------- calculator result ---------- */
.res__v { display: inline-block; }
.res__v.bump { animation: bump 0.5s var(--e-out); }
@keyframes bump {
  0%   { opacity: 0.35; transform: translate3d(0, 7px, 0) scale(0.95); }
  100% { opacity: 1; transform: none; }
}
.res--hero .res__v { text-shadow: 0 0 26px rgba(220, 0, 0, 0.22); }

/* ---------- the document cover ---------- */
.doc-cover h1 { perspective: 800px; }
.doc-cover h1 .w { display: inline-block; animation: word-in 1s var(--e-out) both; animation-delay: var(--d, 0ms); }

/* ---------- reduced motion, the off switch ---------- */
@media (prefers-reduced-motion: reduce) {
  main, .hero__glow, .band--ink::before, .hero h1 .w, .doc-cover h1 .w,
  .ticker--run .ticker__track, .res__v.bump, .btn:hover::after { animation: none !important; }
  .hero h1 .w, .doc-cover h1 .w { opacity: 1; transform: none; }
  .rise { opacity: 1; transform: none; transition: none; }
  [data-tilt], a.card, .stat, .lead__stat, .q, .btn, .arch a { transition: none !important; transform: none !important; }
  .hero__canvas { display: none; }
}

/* ================================================================
   BUSINESS PRESS
   The typographic layer that goes with the palette above: a black
   masthead, Georgia headlines, one red used as punctuation rather
   than decoration, and hairline rules doing the separating.
   ================================================================ */

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.018em; line-height: 1.1; }
.hero h1 { font-weight: 400; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.04; max-width: 19ch; }
.section-head h1,
  .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.brief-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.card__t { font-size: 1.35rem; line-height: 1.22; }
.q__t { font-size: 1.3rem; }
.arch__t { font-size: 1.25rem; }

/* ---------- black masthead ---------- */
.hdr { border-bottom: none; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12); }
.hdr--on { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px -22px rgba(0, 0, 0, 0.8); }
.mark { color: #ffffff; }
.mark b { color: var(--gold); font-weight: 600; }
.nav a { color: #d4d4d4; font-size: 11.5px; letter-spacing: 0.1em; }
.nav a:hover, .nav a[aria-current="page"] { color: #ffffff; border-color: transparent; }
.nav a::after { background: var(--gold); height: 2px; bottom: -2px; }
.hdr .btn--ghost { color: #ffffff; border-color: var(--gold); background: var(--gold); }
.hdr .btn--ghost:hover { background: var(--gold-muted); border-color: var(--gold-muted); }
.burger { border-color: rgba(255, 255, 255, 0.28); color: #ffffff; }
@media (max-width: 720px) {
  .nav--open { background: #000000; border-bottom-color: rgba(255, 255, 255, 0.12); }
  .nav--open a { border-bottom-color: rgba(255, 255, 255, 0.1); }
}

/* ---------- the red kicker ---------- */
.eyebrow {
  position: relative; padding-left: 30px; color: var(--gold);
  font-size: 10.5px; letter-spacing: 0.18em;
}
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 2px;
  background: var(--gold); transform: translateY(-50%);
}
.band--ink .eyebrow, .band--ink-deep .eyebrow { color: #ff4d4d; }
.band--ink .eyebrow::before, .band--ink-deep .eyebrow::before { background: #ff4d4d; }
.beat__l { color: var(--gold); letter-spacing: 0.16em; }

/* ---------- colours that only work on the surface they were chosen for ----------
   Measured on the rendered pages. The paper reds and the paper muted grey are
   correct on paper and fail on the ink bands: the split line came to 2.43, the
   form disclaimer to 3.36 and the large stat figures to 3.45. Scoped rather
   than replaced, because the same tokens pass on light and `.res--hero .res__v`
   uses the brand red on a light band where it is fine.

   The market data table had the reverse problem. Its up, down and flat colours
   were chosen for the dark ticker, where they clear 4.5 comfortably, and the
   table reuses the same classes on white where they come to 2.74, 3.87 and
   3.36. On a page whose entire job is conveying numbers. */
.band--ink .q__split { color: var(--gold-on-dark); }
.band--ink .form-note { color: var(--muted-dark); }
.band--ink .stat__v, .band--ink .lead__stat b { color: var(--gold-on-dark); }
.tbl .up { color: var(--pos); }
.tbl .dn { color: var(--neg); }
.tbl .flat { color: var(--muted); }

/* ---------- buttons, square and decided ---------- */
/* Written as `a.btn--solid` rather than `.btn--solid` deliberately. `.article a`
   sets link colour and outranks a single class, so the primary call to action
   inside every framework article was rendering its own dark red on its own red
   background at a contrast ratio of 1.42, which is very close to invisible.
   Matching that specificity and coming later in the file is what fixes it. */
.btn { letter-spacing: 0.1em; font-size: 11.5px; }
.btn--solid, a.btn--solid { background: var(--gold); border-color: var(--gold); color: #ffffff; }
.btn--ghost, a.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.band--ink .btn--ghost { border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }
.band--ink .btn--ghost:hover { background: #ffffff; color: #000000; border-color: #ffffff; }

/* ---------- editorial body ---------- */
.article p, .article li, .item .beat p {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.72; color: #262626;
}
.article strong, .item .beat p strong { font-weight: 700; color: var(--ink); }
.hero__sub, .brief-sub, .section-head p { font-size: 16.5px; }
.definition { border-left-width: 4px; border-left-color: var(--gold); background: var(--cream); font-size: 1.3rem; }
.callout { border: 1px solid var(--hair-light); border-top: 3px solid var(--gold); background: var(--cream); border-radius: 0; }
.callout b { font-family: var(--serif); }
.breaks li::before { color: var(--gold); font-family: var(--sans); font-weight: 700; }

/* ---------- data furniture ---------- */
.tbl { border-left: none; border-right: none; }
.tbl thead th { border-bottom: 2px solid var(--ink); color: var(--ink); letter-spacing: 0.12em; }
.tbl caption { color: var(--gold); font-weight: 600; }
.tk__l { color: #9a9a9a; }
.up { color: #2eb086; } .dn { color: #f5333f; } .flat { color: #8c8c8c; }
.badge--gold { border-color: var(--gold); color: var(--gold); }
.stat__v, .lead__stat b, .res--hero .res__v { color: var(--gold); }
.band--ink-deep .ftr h2, .band--ink-deep .ftr h3, .band--ink-deep .ftr h4 { color: #ffffff; letter-spacing: 0.16em; }
.ftr h2, .ftr h3, .ftr h4 { position: relative; padding-top: 12px; }
.ftr h2::before, .ftr h3::before, .ftr h4::before { content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 2px; background: var(--gold); }

/* ---------- the matrix reads as a chart, not a lightbox ---------- */
.q__k { color: #ff4d4d; }
.matrix-y, .matrix-x { color: #8c8c8c; }

/* ---------- calculator ---------- */
.res--hero { border-top-color: var(--gold); border-top-width: 2px; }
.res--hero .res__l { color: #ff4d4d; }

/* ---------- the Playbook document cover ---------- */
.doc-cover h1 { font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.6rem); }
.doc-part__h { border-bottom-color: var(--gold); }

/* ---------- hero, typographic variant (heroGlobe:false) ---------- */
.hero--plain { border-bottom: 3px solid var(--gold); }
.hero--plain h1 { max-width: 17ch; font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.hero--plain .hero__sub { max-width: 62ch; }
.hero--plain::before { opacity: 0.35; }
.hero--plain .stats { margin-top: 72px; }

/* ---------- the figures box in the typographic hero ---------- */
.hero--plain .hero__cols {
  display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 64px; align-items: start;
}
.hero__box { border-top: 3px solid var(--gold); padding-top: 20px; }
.hero__box-h {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #ffffff;
}
.hbx {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hbx__l { font-size: 12.5px; color: #a8a8a8; }
.hbx__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; color: #ffffff; }
.hbx__c { font-family: var(--mono); font-size: 11.5px; min-width: 62px; text-align: right; }
.hero__box-f { margin: 16px 0 0; font-size: 11.5px; line-height: 1.6; color: #8c8c8c; }
.hero__box-f a { color: #ff4d4d; }
@media (max-width: 980px) {
  .hero--plain .hero__cols { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- live figures ---------- */
/* The class sets display, which beats the browser's own [hidden] rule, so a
   row that is not live would keep showing the dot. Say it explicitly. */
.livedot[hidden] { display: none; }
.livedot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #2eb086; margin-left: 8px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(46, 176, 134, 0.65); animation: livepulse 2.4s ease-out infinite;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 176, 134, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(46, 176, 134, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 176, 134, 0); }
}
[data-live-v].tick { animation: livetick 0.5s var(--e-out); }
@keyframes livetick {
  0% { color: var(--gold); transform: translateY(-3px); opacity: 0.5; }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .livedot { animation: none; }
  [data-live-v].tick { animation: none; }
}

/* ---------- the wire ---------- */
.wire-meta { font-size: 13px; color: var(--muted); margin: 0 0 26px; }
.wire-meta a { color: var(--gold-muted); }

.wireday { margin-bottom: 44px; }
.wireday__h {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 10px;
  border-bottom: 2px solid var(--ink); margin-bottom: 0;
}
.wirelist { list-style: none; margin: 0; padding: 0; }
.wi {
  display: grid; grid-template-columns: 62px 210px 1fr; gap: 18px; align-items: baseline;
  padding: 14px 4px; border-bottom: 1px solid var(--hair-light);
  transition: background 0.25s, transform 0.35s var(--e-out);
}
.wi:hover { background: var(--gold-wash); transform: translateX(5px); }
.wi__t { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.wi__s {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-muted);
}
.wi__h {
  font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s;
}
.wi__h:hover { border-bottom-color: var(--gold); }

/* ---------- the home strip ---------- */
.wirestrip { display: grid; gap: 1px; background: var(--hair-light); border: 1px solid var(--hair-light); }
.ws {
  display: grid; grid-template-columns: 190px 1fr auto; gap: 18px; align-items: baseline;
  background: var(--ivory); padding: 14px 18px; text-decoration: none; color: inherit;
  transition: background 0.25s;
}
.ws:hover { background: var(--gold-wash); }
.ws__s { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-muted); }
.ws__h { font-family: var(--serif); font-size: 16px; line-height: 1.35; }
.ws__t { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }

@media (max-width: 860px) {
  .wi { grid-template-columns: 62px 1fr; row-gap: 4px; }
  .wi__s { grid-column: 2; }
  .wi__h { grid-column: 1 / -1; }
  .ws { grid-template-columns: 1fr; row-gap: 5px; }
  .ws__t { text-align: left; }
}

/* ---------- glossary ---------- */
.alpha {
  display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 34px;
  border-top: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light); padding: 10px 0;
}
.alpha a {
  font-family: var(--mono); font-size: 12.5px; text-decoration: none; color: var(--muted);
  padding: 4px 9px; border-radius: 2px; transition: background 0.2s, color 0.2s;
}
.alpha a:hover { background: var(--gold-wash); color: var(--ink); }

.glblock { margin-bottom: 40px; }
.glblock__l {
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.2em;
  color: var(--gold); border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin: 0 0 0;
}
.glrows { display: grid; gap: 0; }
.gl {
  display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: baseline;
  padding: 15px 4px; border-bottom: 1px solid var(--hair-light);
  text-decoration: none; color: inherit;
  transition: background 0.25s, transform 0.35s var(--e-out);
}
.gl:hover { background: var(--gold-wash); transform: translateX(5px); }
.gl__t { font-family: var(--serif); font-size: 17px; line-height: 1.3; }
.gl:hover .gl__t { color: var(--gold-muted); }
.gl__d { font-size: 14px; color: var(--muted); line-height: 1.55; }

.trap {
  max-width: var(--prose); margin: 34px 0 0; padding: 18px 22px;
  border: 1px solid var(--hair-light); border-left: 3px solid var(--gold); border-radius: 0;
  background: var(--paper);
}
.trap__l {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-muted); margin-bottom: 7px;
}
.trap p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.6; }

@media (max-width: 820px) {
  .gl { grid-template-columns: 1fr; gap: 5px; }
}

/* ============================================================
   THE CHARTBOOK
   Charts are drawn at build time as inline SVG. No client
   library, no canvas, nothing to load. They print, they work
   with JavaScript off, and each carries a sentence for screen
   readers in its <title>.
   ============================================================ */

.cb__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 26px 0 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hair-light);
}
.cb__toc a {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border: 1px solid var(--hair-light);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cb__toc a:hover { background: var(--cream); border-color: var(--gold-muted); }

.cb {
  padding: 52px 0 8px;
  border-bottom: 1px solid var(--hair-light);
  scroll-margin-top: 90px;
}
.cb:last-of-type { border-bottom: 0; }
.cb > h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.15;
  margin: 0 0 10px;
}
.cb__what {
  max-width: var(--prose);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 26px;
}
.cb__src {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0;
  max-width: var(--prose);
}
.cb__src a { color: var(--muted); }
.cb__read {
  max-width: var(--prose);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 18px 0 26px;
  padding: 14px 18px;
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
}
.cb__read b { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; }

/* The chart itself. A fixed viewBox scaled to the column, so the
   stroke weight and the type stay honest at every width. */
.ch { margin: 0; width: 100%; max-width: 900px; }
.ch svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch__g { stroke: var(--hair-light); stroke-width: 1; }
.ch__g--zero { stroke: var(--ink); stroke-width: 1; stroke-opacity: 0.45; }
.ch__l { fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.ch__p { fill: var(--gold); stroke: var(--ivory); stroke-width: 2; }
.ch__yl, .ch__xl {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--muted);
}
.ch__yl { text-anchor: end; }
.ch__xl { text-anchor: middle; }
.ch__v {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--gold);
  /* A daily series wobbles, so no amount of clever placement keeps the
     final figure off the line every time. The halo means it stays
     readable when it does land on it. */
  paint-order: stroke fill;
  stroke: var(--ivory);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .cb { padding-top: 40px; }
  .ch__yl, .ch__xl { font-size: 13px; }
  .ch__v { font-size: 15px; }
}

@media print {
  .cb__toc { display: none; }
  .cb { break-inside: avoid; border-bottom: 1px solid #ccc; }
}


/* ============================================================
   HEADER OVERFLOW
   The nav did not fit beside the wordmark and the button, and
   flexbox was hiding it by crushing the button rather than
   wrapping: on a 1440px screen "Get the Playbook" was being
   squeezed to a sliver. The burger only took over at 720, so
   everything between 721 and 1149 ran off the edge.

   The fix has three parts: the header spans wider than the
   article column, which is normal for a business-press
   masthead; the nav type is a shade tighter; and the button,
   which is duplicated in the hero, the lead band and the
   footer, steps aside below 1400.

   Every width here was measured in a real browser with a
   fallback font wider than Inter, so the live page has more
   room than these numbers assume. Do not tighten them without
   measuring again, and do not add a tenth nav item without
   re-measuring: nine is already the ceiling.
   ============================================================ */
.hdr__in { max-width: 1440px; }
.nav { gap: 14px; overflow: hidden; }
.nav a { font-size: 11.5px; letter-spacing: 0.03em; white-space: nowrap; }
/* Only where the nav is actually shown. Pinning the wordmark at every
   width pushed it off the screen on a 320px phone. */
@media (min-width: 1150px) { .mark, .hdr .btn { flex-shrink: 0; } }

/* The button is duplicated in the hero and the footer, so it is the
   first thing to go when the header runs short of room. */
@media (max-width: 1399px) { .hdr .btn { display: none; } }

@media (max-width: 1149px) {
  .nav { display: none; }
  .hdr .btn { display: none; }
  .burger { display: block; }
  .nav--open {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--ivory);
    border-bottom: 1px solid var(--hair-light); padding: 8px 24px 20px; z-index: 60;
  }
  .nav--open a { padding: 12px 0; border-bottom: 1px solid var(--hair-light); }
}

/* The wordmark is nowrap at 21px, which is wider than the header has room
   for on a phone. This was first measured at 320px and capped at 359px,
   which was one boundary too low: 360px and 365px still overflowed by 14
   and 9 pixels, and 360 is the single most common Android width there is.
   Measured again across 300 to 430 in five pixel steps; 375 is the first
   width that fits at full size, so that is where the rule ends. */
@media (max-width: 374px) {
  .mark { font-size: 16px; letter-spacing: 0.02em; }
}

/* ============================================================
   THE RECORD
   Wrong is not styled smaller, quieter or further down the page
   than right. The whole argument of the page collapses if it is.
   ============================================================ */

.rec__score {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 26px 0 18px;
  border: 1px solid var(--hair-light);
}
.rec__score > div {
  flex: 1 1 130px; padding: 18px 20px;
  border-right: 1px solid var(--hair-light);
}
.rec__score > div:last-child { border-right: 0; }
.rec__score b {
  display: block; font-family: var(--mono); font-size: 30px;
  font-weight: 500; line-height: 1; color: var(--ink);
}
.rec__score span {
  display: block; margin-top: 8px; font-family: var(--sans);
  font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.rec__score--bad b { color: var(--gold); }

.rec__rate {
  max-width: var(--prose); font-family: var(--sans);
  font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0;
}
.rec__rate b { font-family: var(--mono); color: var(--ink); font-size: 16px; }

.rec__sec {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 56px 0 6px; padding-top: 22px; border-top: 2px solid var(--ink);
}
.rec__note {
  max-width: var(--prose); font-family: var(--sans);
  font-size: 13.5px; color: var(--muted); margin: 0 0 22px;
}

.rec {
  max-width: 720px; margin: 0 0 14px;
  padding: 22px 24px; border: 1px solid var(--hair-light); background: var(--paper);
}
.rec__h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px;
}
.rec__v {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid currentColor; border-radius: var(--r);
}
.rec__v--right { color: var(--pos); }
.rec__v--wrong { color: var(--gold); }
.rec__v--partly, .rec__v--void { color: var(--muted); }
.rec__v--open { color: var(--ink); border-style: dashed; }
.rec__v--overdue { color: var(--ivory); background: var(--gold); border-color: var(--gold); }
.rec__v--corr { color: var(--ivory); background: var(--ink-deep); border-color: var(--ink-deep); }
.rec__d {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
}
.rec > h3 {
  font-family: var(--serif); font-size: 1.28rem; line-height: 1.3;
  margin: 0 0 14px; max-width: 46ch;
}
.rec__b {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.6;
  margin: 0 0 10px; color: var(--ink);
}
.rec__b b, .rec__out b { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.rec__t {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  margin: 14px 0 0; padding: 9px 12px; background: var(--ivory); border: 1px dashed var(--hair-light);
}
.rec__out {
  margin-top: 16px; padding: 14px 16px;
  background: var(--gold-wash); border-left: 3px solid var(--ink);
}
.rec__out p { font-family: var(--serif); font-size: 15px; line-height: 1.55; margin: 0 0 8px; }
.rec__out p:last-child { margin-bottom: 0; }
.rec__by { font-family: var(--sans) !important; font-size: 12.5px !important; color: var(--ink-soft); }
.rec__w { font-family: var(--sans); font-size: 12.5px; margin: 14px 0 0; }
.rec--corr { background: var(--ivory); }
.rec--corr .rec__b { font-size: 15px; }

@media (max-width: 640px) {
  .rec { padding: 18px 16px; }
  .rec__score > div { flex-basis: 50%; border-bottom: 1px solid var(--hair-light); }
}

/* The chartbook download. Deliberately not a gate: no form, no email,
   no interstitial. The link is the whole interaction. */
.cb__dl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  justify-content: space-between;
  margin: 26px 0 6px; padding: 20px 24px;
  background: var(--ink-deep); color: var(--ivory);
  max-width: 900px;
}
.cb__dl b {
  display: block; font-family: var(--serif); font-size: 1.05rem;
  font-weight: 400; margin-bottom: 5px;
}
.cb__dl span {
  display: block; font-family: var(--sans); font-size: 13px;
  line-height: 1.5; color: #9c9c9c; max-width: 56ch;
}
.cb__dl .btn { flex-shrink: 0; }

/* ---------- the path pages ----------
   A reader arriving at a library of forty frameworks needs an order, not a
   filter. These are numbered steps rather than cards, because the number is
   the instruction: read this one first. */
.pth { list-style: none; margin: 0 0 56px; padding: 0; max-width: 780px; }
.pth__i {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--hair-light);
}
.pth__i:last-child { border-bottom: 1px solid var(--hair-light); }
.pth__n { font-size: 13px; color: var(--gold); padding-top: 4px; letter-spacing: 0; }
.pth__t {
  font-family: var(--serif); font-size: 1.22rem; color: var(--ink);
  text-decoration: none; display: inline-block; line-height: 1.3;
}
.pth__t:hover { color: var(--gold-muted); }
.pth__d { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 7px 0 0; max-width: 62ch; }
.pth__h { font-size: 1.5rem; margin: 0 0 6px; }
.pth__lead { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; max-width: var(--prose); }
.pth__h + .pth__lead + .grid, .pth__h + .pth__lead + .pth { margin-top: 0; }
.grid + .pth__h, .pth__terms + .pth__h { margin-top: 56px; }
.pth__terms { display: flex; flex-wrap: wrap; gap: 8px; }
.pth__term {
  font-family: var(--sans); font-size: 12.5px; color: var(--ink);
  text-decoration: none; padding: 8px 14px;
  border: 1px solid var(--hair-light); border-radius: var(--r);
  background: var(--ivory);
}
.pth__term:hover { border-color: var(--gold); color: var(--gold-muted); }
@media (max-width: 640px) {
  .pth__i { grid-template-columns: 34px 1fr; gap: 12px; }
}

/* ---------- contact routes ---------- */
.cx { margin: 18px 0 0; }
.cx dt {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink); margin-top: 14px;
}
.cx dd {
  margin: 3px 0 0; font-family: var(--serif); font-size: 15.5px;
  line-height: 1.6; color: var(--muted); max-width: 58ch;
}