/* =====================================================================
   THE INTERNATIONAL SKOOL OF FORECASTING · site v3 · "desk" design
   Approved 13 Nov 2026 from concept/home-v2.html. Rules: .design/DESIGN.md
   Mobile first. Tablet from 700px, desktop from 1100px.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --white: #ffffff;
  --paper: #ffffff;          /* page */
  --paper-alt: #f7f3ec;      /* cream sections */
  --cream2: #efe8dc;
  --ink: #1a1916;
  --text: #2a2824;
  --muted: #6b665e;
  --accent: #7a1f1c;         /* oxblood */
  --accent-dk: #5e1714;
  --accent-on-ink: #e5807d;
  --gold: #c9a84c;
  --line: #e6e0d4;
  --line-1: #ece7dd;
  --line-2: #e6e0d4;
  --line-3: #cfc7b8;
  --on-ink: #ffffff;
  --on-ink-muted: rgba(255, 255, 255, 0.74);
  --on-ink-line: rgba(255, 255, 255, 0.16);
  --hit-bg: #eef0e6; --hit-fg: #3d4a1e;
  --miss-bg: #f1e6e4; --miss-fg: #7a1f1c;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: var(--sans); /* retired typewriter face; labels now use the sans */

  --r: 6px; --r-card: 10px;
  --shadow: 0 1px 2px rgba(26, 25, 22, .06), 0 8px 24px rgba(26, 25, 22, .08);

  --pad: 20px; --gap: 20px; --sec: 72px; --max: 1200px; --read: 720px; --hdr: 64px;
  --h1: 44px; --h2: 36px; --h3: 22px; --lead: 19px; --body: 17px; --letter: 19px; --label: 12px;
}
@media (min-width: 700px) {
  :root { --pad: 40px; --gap: 24px; --sec: 88px; --hdr: 76px;
          --h1: 60px; --h2: 46px; --h3: 24px; --lead: 20px; --letter: 20px; --label: 13px; }
}
@media (min-width: 1100px) {
  :root { --pad: 48px; --gap: 28px; --sec: 112px; --h1: 72px; --h2: 56px; --h3: 26px; }
}

/* ---------- 2. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--white); color: var(--text);
  font-family: var(--sans); font-size: var(--body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip; overflow-wrap: break-word;
}
img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
p, li, blockquote, figcaption, dd { text-wrap: pretty; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s; }
a:hover { color: var(--accent-dk); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.band :focus-visible, .on-ink :focus-visible { outline-color: var(--gold); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sec) 0; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; font: 600 14px var(--sans); border-radius: var(--r); }
.skip:focus { left: 8px; }
.vh { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important;
      border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; flex: none !important; }

/* ---------- 3. Type ---------- */
.h1 { font-size: var(--h1); line-height: 1.04; }
.h2 { font-size: var(--h2); line-height: 1.08; }
.h3 { font-size: var(--h3); line-height: 1.2; }
.lead { font-size: var(--lead); line-height: 1.55; color: var(--muted); }
.small { font-size: 15px; line-height: 1.55; }
.muted { color: var(--muted); }
.label, .eyebrow { font: 600 15px/1.5 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); margin: 0; }
.eyebrow { color: var(--accent); margin-bottom: 12px; }
.figure-num { font: 600 1em var(--sans); color: var(--accent); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.dash-list { list-style: none; padding: 0; }
.dash-list li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.dash-list li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* ---------- 4. Layout: one left edge ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.read { max-width: var(--read); }
.sec { padding-top: var(--sec); padding-bottom: var(--sec); }
.sec--alt { background: var(--paper-alt); }
.sec--tight { padding-top: calc(var(--sec) * .55); padding-bottom: calc(var(--sec) * .55); }
.sec-head { max-width: 820px; margin: 0 0 calc(var(--sec) * .45); }
.sec-head .h2 + .lead { margin-top: 18px; }
.sec-foot { margin-top: calc(var(--sec) * .45); }
.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 > :last-child:nth-child(odd) { grid-column: auto; }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.split { display: grid; gap: 40px; }
@media (min-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; } .split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

/* ---------- 5. Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px;
  border-radius: var(--r); border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: 600 16px/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
@media (max-width: 699px) { .btn { white-space: normal; padding-top: 10px; padding-bottom: 10px; max-width: 100%; } }
.btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }
.band .btn, .on-ink .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.band .btn:hover, .on-ink .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.band .btn--ghost, .on-ink .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btns { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
@media (min-width: 700px) { .btns { flex-direction: row; flex-wrap: wrap; align-items: center; } .btns.center { justify-content: center; } }
.tlink { font: 600 15px var(--sans); color: var(--accent); text-decoration: none; display: inline-block; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.tlink::after { content: ' →'; }

/* ---------- 6. Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--hdr); }
.hdr__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.hdr__brand img { width: 30px; height: 30px; }
.hdr__brand .wm { display: flex; flex-direction: column; line-height: 1.05; }
.hdr__brand .wm small { font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: none; }
.hdr__brand .wm b { font: 600 18px var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.hdr__nav { display: none; }
.hdr__actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 359px) { .hdr__brand { gap: 8px; } .hdr__brand img { width: 26px; height: 26px; } .hdr__brand .wm b { font-size: 16px; } .menu-btn { padding: 0 10px; } }
.hdr__cta, .hdr__login { display: none; }
.menu-btn { min-height: 42px; padding: 0 14px; background: #fff; border: 1px solid var(--line-3); border-radius: var(--r); color: var(--ink); font: 600 15px var(--sans); cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.drawer { display: none; border-top: 1px solid var(--line); background: #fff; }
.drawer.open { display: block; }
.drawer nav { display: flex; flex-direction: column; padding: 8px 0 20px; }
.drawer nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-1); color: var(--ink); text-decoration: none; font: 500 18px var(--sans); }
.drawer nav a[aria-current="page"] { color: var(--accent); }
.drawer .btn { margin: 4px 0 20px; }
.drawer .drawer__login { color: var(--muted); border: 0; }
@media (min-width: 700px) {
  .hdr__brand img { width: 34px; height: 34px; }
  .hdr__brand .wm small { display: block; }
  .hdr__brand .wm b { font-size: 19px; }
  .hdr__cta { display: inline-flex; }
  .drawer nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .drawer .btn { display: none; }
}
.hdr__login.btn { border-color: transparent; background: none; padding: 0 8px; color: var(--ink); }
.hdr__login.btn:hover { background: none; color: var(--accent); border-color: transparent; }
@media (min-width: 1180px) {
  .hdr__nav { display: flex; gap: 22px; }
  .hdr__nav a { color: var(--ink); text-decoration: none; font: 500 15px var(--sans); padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .hdr__nav a:hover { color: var(--accent); }
  .hdr__nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .hdr__login { display: inline-flex; }
  .menu-btn, .drawer, .drawer.open { display: none; }
}
.hdr--quiet .hdr__nav, .hdr--quiet .menu-btn, .hdr--quiet .hdr__cta { display: none !important; }
.hdr--quiet .hdr__login { display: inline-flex; }

/* ---------- 7. Notice strip ---------- */
.strip { background: var(--ink); color: #fff; font: 500 14px var(--sans); }
.strip .wrap { padding-top: 10px; padding-bottom: 10px; line-height: 1.5; text-align: center; }
.strip a { color: var(--gold); }

/* ---------- 8. Hero (left aligned) ---------- */
.hero { padding-top: calc(var(--sec) * .7); padding-bottom: var(--sec); overflow: hidden; }
.hero__in { max-width: 860px; }
.hero .h1 { margin-bottom: 22px; }
.hero .lead { max-width: 640px; margin: 0 0 30px; }
.hero__note { margin-top: 16px; font-size: 14px; color: var(--muted); }
.hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } }

/* ---------- 9. Facts strip ---------- */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.fact { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--line); }
.fact__n { font: 600 26px/1.1 var(--serif); color: var(--ink); white-space: nowrap; }
.fact__l { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } .fact { border-bottom: 0; } .fact + .fact { padding-left: 20px; border-left: 1px solid var(--line); } .fact__n { font-size: 30px; } }
.pstrip { background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.pstrip .wrap { display: grid; gap: 14px; }
.pstrip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.pstrip li { font-size: 15px; line-height: 1.4; }
.pstrip li b { display: block; font: 600 22px var(--serif); color: var(--ink); }
@media (min-width: 1100px) { .pstrip .wrap { grid-template-columns: 200px 1fr; align-items: center; } .pstrip ul { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 10. Cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.card--feature { border: 2px solid var(--ink); }
.card .h3 { margin: 0; }
.card p { margin: 0; }
.card__img { margin: -24px -24px 8px; aspect-ratio: 16 / 10; background: var(--paper-alt) center / cover; border-radius: var(--r-card) var(--r-card) 0 0; }
.card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.card__foot { margin-top: auto; padding-top: 10px; }
.card__price { font: 600 20px var(--sans); color: var(--accent); white-space: nowrap; }
a.card { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(26,25,22,.06), 0 14px 32px rgba(26,25,22,.12); }
@media (min-width: 1100px) { .card { padding: 28px; } .card__img { margin: -28px -28px 8px; } }

/* ---------- 11. Status tags and chips ---------- */
.tag { display: inline-block; font: 700 12px/1.4 var(--sans); letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 0; }
.tag--hit { background: var(--hit-bg); color: var(--hit-fg); }
.tag--partial { background: #f3eedf; color: #6b5a1e; }
.tag--miss { background: var(--miss-bg); color: var(--miss-fg); }
.tag--live { background: var(--ink); color: #fff; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: #f4ebe0; color: var(--accent); font: 700 13px var(--sans); border-radius: 999px; padding: 6px 12px; }
.badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- 12. Ledger ---------- */
.ledger { border-top: 1px solid var(--line); background: #fff; }
.ledger__row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ledger__year { font: 700 14px var(--sans); color: var(--accent); letter-spacing: .04em; }
.ledger__status { justify-self: end; }
.ledger__body { grid-column: 1 / -1; }
.ledger__body h3 { font-size: var(--h3); line-height: 1.2; margin-bottom: 8px; }
.ledger__body p { margin: 0 0 8px; color: var(--muted); font-size: 16px; }
.ledger__head { display: none; }
@media (min-width: 1100px) {
  .ledger__row { grid-template-columns: 130px minmax(0,1fr) minmax(0,1fr) 120px; gap: 32px; padding: 28px 0; align-items: start; }
  .ledger__body { grid-column: auto; }
  .ledger__body--split { display: contents; }
  .ledger__status { order: 4; }
  .ledger__head { display: grid; grid-template-columns: 130px minmax(0,1fr) minmax(0,1fr) 120px; gap: 32px; padding: 12px 0; }
  .ledger__head span { font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
}

/* ---------- 13. Figures, quotes ---------- */
.fig { margin: 0; }
.fig__frame { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: 12px; box-shadow: var(--shadow); overflow: hidden; }
.fig__frame img, .fig__frame svg { width: 100%; }
.fig figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.fig figcaption .label { display: block; margin-bottom: 4px; color: var(--accent); }
@media (min-width: 700px) { .fig__frame { padding: 20px; } }
.pull { margin: 40px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font: 400 calc(var(--lead) + 3px)/1.45 var(--serif); color: var(--ink); }
.pull cite { display: block; margin-top: 10px; font: 600 13px var(--sans); font-style: normal; color: var(--muted); }
.quote-block { max-width: 860px; }
.quote-block blockquote { margin: 0; font: 400 calc(var(--h3) + 4px)/1.4 var(--serif); color: var(--ink); }
.quote-block .who { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.portrait { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* ---------- 14. Steps ---------- */
.steps { display: grid; gap: var(--gap); }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.step__n { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 15px var(--sans); }
.step h3 { font-size: var(--h3); margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(3, minmax(0,1fr)); } .step { grid-template-columns: 1fr; padding: 30px; } }
/* Step cards are single-message boxes: the number sits centred above a centred heading at every width */
.step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.step__n { justify-self: center; }
/* Headings line up across the row; running text in a step stays left-aligned */
.step { align-content: start; }
.step p { text-align: left; justify-self: center; width: 100%; max-width: 60ch; }
/* The second .fit column lists reasons it isn't for you: a plain dash, not a tick */
.fit > div + div .dash-list li::before { content: ''; top: .8em; width: 12px; height: 0; border-left: 0; border-bottom: 2px solid var(--muted); transform: none; }
/* Route boxes on tool pages (.ph-route, .bs-route, .gr-route, .pyr-route, .bcr-route, .bf-route…) are single-message boxes:
   everything centres, and the price sits on its own line with its terms centred underneath. */
:is(section, div)[class$="-route"] p { text-align: center; }
:is(section, div)[class$="-route"] p[class$="-price"] { flex-direction: column; align-items: center; gap: 6px; margin-left: auto; margin-right: auto; }
/* The same for every price line: the figure, then its terms underneath, both centred */
/* Intake-aware copy. Mark text with data-when="open|closed|early|late". Without JS the open and early versions show. */
html.intake-closed [data-when~="open"], html.intake-late [data-when~="early"] { display: none !important; }
html:not(.intake-closed) [data-when~="closed"], html:not(.intake-late) [data-when~="late"] { display: none !important; }
/* Headings in running-text articles are centred; only the paragraphs and lists stay left */
.prose > h2, .prose > h3 { text-align: center; text-wrap: balance; }
.fit h3 { text-align: center; }
.band > .wrap > h2, .band > .wrap > .h2 { text-align: center; text-wrap: balance; }
.vid h3 { text-align: center; }
/* Grade tags inside tables may wrap, so a long grade never pushes a table past a phone screen */
table .tag { white-space: normal; }
/* Success pages: the reader has just bought, so the header's buy button goes */
body.is-success .hdr__cta, body.is-success .drawer .btn--block { display: none; }

/* ---------- 15. Rows ---------- */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
a.row:hover .row__title { color: var(--accent); }
.row__title { font: 500 var(--h3)/1.25 var(--serif); color: var(--ink); transition: color .15s; }
.row__text { color: var(--muted); margin: 0; font-size: 16px; }
.row__meta { font: 600 13px var(--sans); color: var(--muted); }
@media (min-width: 700px) { .row { grid-template-columns: 1fr auto; column-gap: 32px; align-items: baseline; } .row__text { grid-column: 1; } .row__meta { grid-column: 2; grid-row: 1; text-align: right; } }
.masters .row { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .masters .row { grid-template-columns: 260px 1fr; column-gap: 48px; padding: 26px 0; } .masters .row__meta { grid-column: 1; grid-row: 2; text-align: left; } .masters .row__text { grid-column: 2; grid-row: 1 / span 2; font-size: 17px; } }

/* ---------- 16. Signup form ---------- */
.signup { max-width: 560px; }
.signup__form { display: flex; flex-direction: column; gap: 10px; }
.signup input[type="email"], .signup input[type="text"] { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--line-3); border-radius: var(--r); background: #fff; font: 400 17px var(--sans); color: var(--ink); }
.signup input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.signup__note { font-size: 13px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.signup__ok { display: none; }
.signup__consent { margin: 10px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.signup__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ftr .ftr__tools .signup__consent { max-width: 30em; margin: 14px auto 0; text-align: center; font-size: 13px; line-height: 1.55; color: #8a8478; }
.band .signup__consent, .on-ink .signup__consent, .calls .signup__consent { color: var(--on-ink-muted); }
@media (min-width: 700px) { .signup__form { flex-direction: row; } .signup__form input { flex: 1; } .signup__form .btn { flex: none; } }
.band .signup input, .on-ink .signup input { border-color: transparent; }
.band .signup__note, .on-ink .signup__note { color: var(--on-ink-muted); }
.briefing-box { border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 28px 24px; margin: var(--sec) 0 0; max-width: var(--read); background: var(--paper-alt); }
.briefing-box .h3 { margin-bottom: 10px; }
.briefing-box p.lead { font-size: 17px; margin-bottom: 20px; }
@media (min-width: 700px) { .briefing-box { padding: 36px; } }

/* ---------- 17. Dark band ---------- */
.band { background: var(--ink); color: #fff; padding-top: var(--sec); padding-bottom: var(--sec); }
.band .eyebrow { color: var(--gold); }
.band .h2, .band h2 { color: #fff; margin-bottom: 16px; }
.band .lead { color: var(--on-ink-muted); max-width: 680px; }
.band a:not(.btn) { color: var(--gold); }
.band .btns { margin-top: 28px; }

/* ---------- 18. Footer (light) ---------- */
.ftr { background: var(--paper-alt); color: var(--muted); border-top: 1px solid var(--line); padding-top: 0; padding-bottom: 28px; font-size: 15px; }
.ftr__tools { background: #fff; border-bottom: 1px solid var(--line); padding: 48px 0 44px; text-align: center; }
.ftr .ftr__tools h2 { font: 500 30px/1.15 var(--serif); color: var(--ink); text-transform: none; letter-spacing: -.01em; margin: 0 0 8px; }
.ftr__tools .wrap > p { margin: 0 auto 22px; max-width: 42em; font-size: 16px; color: var(--muted); }
body:has(main .signup__form) .ftr__tools, body.is-subscribed .ftr__tools { display: none; }
.ftr__tools .signup { margin: 0 auto; max-width: 540px; }
.ftr .ftr__tools .signup__form { flex-direction: column; gap: 10px; }
.ftr .ftr__tools .btn { white-space: nowrap; }
.ftr__tools .signup__note { text-align: center; }
@media (min-width: 560px) { .ftr .ftr__tools .signup__form { flex-direction: row; } .ftr__tools .signup input[type="email"] { flex: 1 1 auto; } .ftr__tools .btn { flex: 0 0 auto; } }
@media (min-width: 700px) { .ftr .ftr__tools h2 { font-size: 36px; } }
.ftr__main { padding-top: 48px; }
.ftr a { color: var(--muted); text-decoration: none; }
.ftr a:hover { color: var(--accent); }
.ftr__grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.ftr__grid > :first-child { grid-column: 1 / -1; }
.ftr h2 { font: 600 16px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 14px; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 9px; }
.ftr__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 10px; }
.ftr__brand img { width: 34px; height: 34px; }
.ftr__brand b { font: 600 19px var(--serif); }
.ftr__brand small { display: block; font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ftr__fine { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; display: grid; gap: 8px; }
.ftr__fine p { margin: 0; }
@media (min-width: 900px) { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .ftr__grid > :first-child { grid-column: auto; } }

/* ---------- 19. Prose (essays, case files) ---------- */
.prose { max-width: var(--read); font: 400 var(--letter)/1.65 var(--serif); color: var(--text); }
.prose h2 { font-size: calc(var(--h3) + 6px); line-height: 1.2; margin: 1.8em 0 .6em; }
.prose h3 { font-size: var(--h3); margin: 1.6em 0 .5em; }
.prose p, .prose li { margin-bottom: 1em; }
.prose blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 3px solid var(--accent); color: var(--ink); }
.prose figure { margin: 2em 0; }
.prose table { width: fit-content; max-width: 100%; border-collapse: collapse; font: 15px var(--sans); margin: 1.5em auto; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.article-head { max-width: 900px; padding-top: calc(var(--sec) * .65); padding-bottom: calc(var(--sec) * .45); }
.article-head .h1 { font-size: calc(var(--h1) * .85); margin-bottom: 20px; }
.article-head .meta { margin-top: 20px; }
.proof { display: grid; gap: 0; border-top: 1px solid var(--line); margin: 2em 0; font-family: var(--sans); }
.proof > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.proof .label { margin-bottom: 6px; color: var(--accent); }
.proof p { margin: 0; font-size: 17px; }
@media (min-width: 700px) { .proof { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

/* ---------- 20. Sales letter ---------- */
.letter-hero { padding-top: calc(var(--sec) * .65); padding-bottom: calc(var(--sec) * .5); border-bottom: 1px solid var(--line); background: var(--paper-alt); }
.letter-hero .eyebrow { margin-bottom: 18px; }
.letter-hero .h1 { max-width: 1000px; margin: 0 0 22px; }
.letter-hero .deck { font-size: var(--lead); line-height: 1.55; color: var(--muted); max-width: 760px; margin: 0 0 28px; }
.letter-hero .terms-line { margin-top: 14px; font-size: 14px; color: var(--muted); }
.letter-layout { display: block; padding-top: calc(var(--sec) * .65); padding-bottom: var(--sec); }
.letter-rail { display: none; }
.letter { max-width: var(--read); margin: 0 auto; font: 400 var(--letter)/1.65 var(--serif); color: var(--text); }
.letter p { margin-bottom: 1.05em; }
.letter .dateline { font: 600 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.letter .salute { font-style: italic; }
.letter h2 { font-size: calc(var(--h3) + 10px); line-height: 1.15; margin: 2.1em 0 .7em; scroll-margin-top: calc(var(--hdr) + 24px); }
.letter h3 { font-size: var(--h3); line-height: 1.25; margin: 1.6em 0 .5em; }
.letter .sig { margin-top: 2em; }
.letter .ps { margin-top: 2em; padding-top: 1.5em; border-top: 1px solid var(--line); }
.letter .ps strong { font-family: var(--sans); }
.letter .box { border: 1px solid var(--line); background: var(--paper-alt); border-radius: var(--r-card); padding: 24px; margin: 2em 0; font-family: var(--sans); font-size: 17px; }
.letter .box > :last-child { margin-bottom: 0; }
.letter .box .label { margin-bottom: 10px; color: var(--accent); }
.letter ul, .letter ol { font-family: var(--serif); }
@media (min-width: 700px) { .letter .box { padding: 32px; } }
@media (min-width: 1100px) {
  .letter-layout { display: grid; grid-template-columns: 220px minmax(0, var(--read)) 1fr; gap: 64px; }
  .letter-rail { display: block; position: sticky; top: calc(var(--hdr) + 32px); align-self: start; }
  .letter-rail .label { margin-bottom: 12px; }
  .letter-rail ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
  .letter-rail li { border-bottom: 1px solid var(--line-1); margin: 0; }
  .letter-rail a { display: block; padding: 9px 0; font: 500 15px var(--sans); color: var(--muted); text-decoration: none; line-height: 1.35; }
  .letter-rail a:hover, .letter-rail a.on { color: var(--accent); }
  .letter-layout .letter { margin: 0; }
}
.modules { border-top: 1px solid var(--line); margin: 1.5em 0 2em; font-family: var(--sans); }
.module { padding: 20px 0; border-bottom: 1px solid var(--line); }
.module__n { font: 600 15px var(--sans); color: var(--accent); }
.letter .module h3, .letter .module__n, .letter .fit h3 { text-align: center; }
.module h3 { margin: 6px 0 8px; font-size: var(--h3); }
.module p { margin: 0 0 8px; font-size: 17px; }
.module .able { font-size: 16px; color: var(--muted); }
.module .able b { font-weight: 700; color: var(--ink); }
.fit { display: grid; gap: 20px; margin: 1.5em 0 2em; font-family: var(--sans); font-size: 17px; }
.fit > div { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: 24px; box-shadow: var(--shadow); }
.fit > div:first-child { border: 2px solid var(--ink); }
.fit h3 { margin-top: 0; font-size: 22px; }
.fit ul { margin: 0; font-family: var(--sans); }
@media (min-width: 700px) { .fit { grid-template-columns: 1fr 1fr; } }
.order { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); background: #fff; padding: 28px 22px; margin: 2.5em 0; text-align: center; font-family: var(--sans); scroll-margin-top: calc(var(--hdr) + 24px); }
.order .label { margin-bottom: 8px; }
.order__name { font: 500 calc(var(--h3) + 6px)/1.2 var(--serif); color: var(--ink); margin-bottom: 8px; }
.order__price { font: 600 clamp(34px, 11vw, 44px)/1.1 var(--serif); color: var(--ink); margin: 14px 0 4px; white-space: nowrap; }
.order__price-note { font: 600 13px var(--sans); color: var(--muted); margin-bottom: 20px; }
.order ul { text-align: left; margin: 0 auto 24px; max-width: 480px; font-size: 17px; }
.order .btn { width: 100%; }
.order__terms { font-size: 14px; color: var(--muted); margin: 16px auto 0; max-width: 520px; line-height: 1.55; }
@media (min-width: 700px) { .order { padding: 44px 48px; } .order__price { font-size: 52px; } }
.faq { border-top: 1px solid var(--line); margin: 1.5em 0; font-family: var(--sans); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 600 18px/1.35 var(--sans); color: var(--ink); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font: 400 24px var(--sans); color: var(--accent); }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 0 18px; font-size: 17px; color: var(--text); }
.faq details > div p:last-child { margin-bottom: 0; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(26,25,22,.08);
          padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(110%); transition: transform .2s; }
.buybar.show { transform: none; }
.buybar__price { font: 600 18px var(--sans); color: var(--ink); white-space: nowrap; }
.buybar__name { font-size: 13px; color: var(--muted); }
.buybar .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (min-width: 1100px) { .buybar { display: none; } }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }
body.has-buybar { padding-bottom: 76px; }
@media (min-width: 1100px) { body.has-buybar { padding-bottom: 0; } }
@media (max-width: 1099px) { body.has-buybar #luna-btn { bottom: calc(92px + env(safe-area-inset-bottom)); } body.has-buybar #luna-panel { bottom: calc(156px + env(safe-area-inset-bottom)); height: min(640px, calc(100vh - 190px)); } }

/* ---------- 21. Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 16px; }
.table th, .table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--paper-alt); }

/* ---------- 22. Desk components (product card, tiles, video cards, devices) ---------- */
.prod { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.prod__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.prod__name { font: 500 30px/1.1 var(--serif); color: var(--ink); }
.prod__name small { display: block; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.prod__meta { display: grid; grid-template-columns: 1fr 1fr; }
.prod__meta > div { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.prod__meta small { display: block; font: 600 12px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.prod__meta b { font: 600 16px var(--sans); color: var(--ink); }
.prod__who { display: flex; align-items: center; gap: 10px; }
.prod__who img { width: 36px; height: 36px; border-radius: 50%; }
.prod__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 24px; background: var(--paper-alt); }
.prod__foot p { margin: 0; font-size: 15px; color: var(--muted); max-width: 600px; }
@media (min-width: 900px) { .prod__meta { grid-template-columns: repeat(5, 1fr); } .prod__meta > div { border-right: 1px solid var(--line); border-bottom: 0; } .prod__meta > div:last-child { border-right: 0; } }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 12px; overflow: hidden; }
.tile { position: relative; min-height: 170px; background: #222 center / cover; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,25,22,.2), rgba(26,25,22,.86)); }
.tile > * { position: relative; }
.tile small { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.tile b { font: 600 48px/1 var(--sans); letter-spacing: -.02em; }
@media (min-width: 700px) { .tile { min-height: 220px; padding: 22px; } .tile b { font-size: 64px; } }
@media (min-width: 1100px) { .tile { min-height: 240px; } .tile b { font-size: 72px; } }
.vids { display: grid; gap: 28px; }
@media (min-width: 800px) { .vids { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vid { text-decoration: none; color: inherit; display: block; }
.vid__th { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; background: #222 center / cover; }
.vid--play .vid__th::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(122,31,28,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='white'/%3E%3C/svg%3E") center / 26px no-repeat; }
.vid__date { display: inline-block; margin: 16px 0 6px; font: 600 14px var(--sans); color: var(--accent); }
.vid h3 { font-size: 23px; line-height: 1.2; }
.vid p { color: var(--muted); margin: 8px 0 0; font-size: 15px; }
.vid .tag { margin-top: 12px; }
a.vid:hover h3 { color: var(--accent); }
.laptop { background: #d9d3c7; border-radius: 14px 14px 0 0; padding: 12px 12px 0; box-shadow: 0 24px 48px rgba(26,25,22,.18); }
.laptop__scr { background: #fff; border-radius: 6px 6px 0 0; overflow: hidden; aspect-ratio: 16 / 10; position: relative; }
.laptop__base { height: 14px; background: #bfb7a8; border-radius: 0 0 14px 14px; margin: 0 -10px; position: relative; }
@media (min-width: 1100px) { .laptop__base { height: 16px; margin: 0 -28px; } }
.laptop__base::after { content: ''; position: absolute; left: 50%; top: 0; width: 90px; height: 6px; margin-left: -45px; background: #a99f8f; border-radius: 0 0 8px 8px; }
main { overflow-x: clip; }
.stage { position: relative; padding: 24px 0; }
.stage__art { position: absolute; inset: 0 0 0 22%; background: url(/images/final-reckoning-clean.png) center / cover; border-radius: 12px; }
.stage .laptop { position: relative; }
/* Real captures of the student portal (learn.skoolofforecasting.com), taken from a local copy */
.lms-shot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lms-shot--contain { object-fit: contain; object-position: center; background: #f6f2e9; }
/* Letters (course pages, The Forecaster, The Market Forecaster, reports): running text stays left, every component centres on the column */
.letter > h2, .letter > h3 { text-align: center; }
.letter > .price-line { justify-content: center; text-align: center; }
.letter > .btns, .letter .fit + .btns { justify-content: center; }
.letter .fig figcaption, .letter .frame figcaption, .stage > figcaption { text-align: center; }
.letter > .pull { border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; text-align: center; max-width: 34em; margin-left: auto; margin-right: auto; }
/* A caption under the laptop sits on the page, so the backdrop art stops at the laptop base instead of running under the text */
.stage.cl-stage { padding-bottom: 0; }
.stage.cl-stage > figcaption { position: relative; z-index: 1; background: var(--paper); margin-top: 0; padding-top: 14px; }
@media (min-width: 1100px) { .stage { padding: 40px 0; } .stage__art { inset: 0 -12% 0 30%; } }

/* LMS screen mock inside the laptop */
.lms { position: absolute; inset: 0; display: grid; grid-template-rows: 26px 1fr; font-family: var(--sans); color: var(--ink); font-size: 10px; }
.lms__bar { background: #efebe3; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid #e2dccf; }
.lms__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d3cbbd; display: block; }
.lms__url { margin-left: 8px; background: #fff; border-radius: 4px; padding: 2px 10px; color: var(--muted); font-size: 9px; }
.lms__body { display: grid; grid-template-columns: 32% 1fr; min-height: 0; }
.lms__side { background: var(--ink); color: #fff; padding: 10px 10px; overflow: hidden; }
.lms__side b { display: block; font: 600 11px var(--serif); margin-bottom: 8px; color: #fff; }
.lms__side span { display: block; padding: 5px 6px; border-radius: 4px; color: rgba(255,255,255,.75); font-size: 9px; line-height: 1.3; }
.lms__side span.on { background: rgba(201,168,76,.22); color: #fff; }
.lms__side small { display: block; color: var(--gold); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; margin: 8px 0 3px; }
.lms__main { padding: 12px 14px; overflow: hidden; }
.lms__main small { color: var(--accent); font-weight: 700; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.lms__main h5 { font: 500 14px/1.15 var(--serif); margin: 3px 0 8px; }
.lms__video { position: relative; border-radius: 6px; background: #f6f2e9 center / contain no-repeat; aspect-ratio: 16 / 8; border: 1px solid #e6e0d4; }
.lms__video::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(122,31,28,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='white'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lms__prog { height: 4px; border-radius: 4px; background: #ece6da; margin-top: 8px; }
.lms__prog i { display: block; width: 46%; height: 100%; border-radius: 4px; background: var(--accent); }
@media (min-width: 700px) { .lms { font-size: 11px; grid-template-rows: 30px 1fr; } .lms__side b { font-size: 13px; } .lms__side span { font-size: 11px; } .lms__main h5 { font-size: 19px; } .lms__url { font-size: 11px; } }

.tool-frame { padding-top: calc(var(--sec) * .55); padding-bottom: var(--sec); }

/* ---------- 22b. Proof-led components: call sheet, calls ledger, editions, ladder, plain lists ---------- */
/* Opening: headline plus one dated call, not a device mockup */
.open { padding-top: calc(var(--sec) * .5); padding-bottom: calc(var(--sec) * .85); }
.open__grid { display: grid; gap: 44px; }
@media (min-width: 1100px) { .open__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 72px; align-items: center; } }
.open__h { font-size: clamp(44px, 6.4vw, 86px); line-height: .98; letter-spacing: -.03em; margin: 0 0 26px; max-width: 12ch; }
.open .lead { max-width: 33em; margin: 0 0 30px; color: var(--text); }
.open__note { margin: 18px 0 0; font-size: 15px; color: var(--muted); }

/* The call sheet: one call, its words, its date, and the tape afterwards */
.sheet, .story__photo { margin: 0; }
.sheet { background: #fff; border: 1px solid var(--line-3); border-radius: 4px; padding: 22px 22px 18px; box-shadow: 0 34px 60px -34px rgba(26,25,22,.4); }
.sheet__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 500 14px/1.4 var(--sans); color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sheet__top b { color: var(--ink); font-weight: 600; }
.sheet__q { margin: 20px 0 20px; font: italic 400 25px/1.3 var(--serif); color: var(--ink); letter-spacing: -.005em; }
.sheet__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.sheet__legend b { display: block; color: var(--ink); font: 600 15px/1.35 var(--sans); }
.sheet__legend .is-call b { color: var(--accent); }
.sheet__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
@media (min-width: 700px) { .sheet { padding: 28px 28px 22px; } .sheet__q { font-size: 28px; } }

/* Price sparklines drawn from real daily closes */
.spark { display: block; width: 100%; height: auto; overflow: visible; }
.spark__line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark__area { fill: rgba(26,25,22,.045); }
.spark__mark { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.spark__dot { fill: var(--accent); }
.spark__band { fill: rgba(122,31,28,.13); }

/* The calls ledger, on ink */
.calls { background: var(--ink); color: var(--on-ink); padding-top: var(--sec); padding-bottom: var(--sec); }
.calls .h2 { color: #fff; }
.calls .lead { color: var(--on-ink-muted); }
.calls a:not(.btn) { color: var(--gold); }
.calls__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--on-ink-line); }
.call { display: grid; gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--on-ink-line); }
.call__when { font: 600 15px/1.4 var(--sans); color: #fff; margin: 0; }
.call__when span { display: block; font-weight: 500; color: var(--on-ink-muted); }
.call__q { margin: 0; font: italic 400 23px/1.32 var(--serif); color: #fff; }
.call__src { display: inline-block; margin-top: 10px; font: 500 14px var(--sans); }
.call__then { margin: 0; font-size: 16px; line-height: 1.55; color: var(--on-ink-muted); }
.call__verdict { display: block; font: 600 15px var(--sans); color: var(--gold); margin-bottom: 4px; }
.call--miss .call__verdict { color: var(--accent-on-ink); }
.call .spark { max-width: 320px; }
.call .spark__line { stroke: rgba(255,255,255,.92); }
.call .spark__area { fill: rgba(255,255,255,.06); }
.call .spark__mark { stroke: var(--gold); }
.call .spark__dot { fill: var(--gold); }
.call .spark__band { fill: rgba(201,168,76,.28); }
.call--miss .spark__band { fill: rgba(229,128,125,.24); }
@media (min-width: 1100px) {
  .call { grid-template-columns: 130px minmax(0, 1.3fr) minmax(0, 1fr) 240px; gap: 16px 36px; align-items: start; }
}
.calls__foot { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }

/* Editor's story, set as a letter */
.story { display: grid; gap: 32px; }
@media (min-width: 1100px) { .story { grid-template-columns: 300px minmax(0, 680px); gap: 72px; align-items: start; } }
.story__photo img { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.story__photo figcaption { margin-top: 12px; font-size: 15px; color: var(--muted); }
.story__photo figcaption b { display: block; color: var(--ink); font-weight: 600; }
.story__body .h2 { margin-bottom: 24px; }
.story__body p { font: 400 20px/1.62 var(--serif); color: var(--text); }
.story__body p:first-of-type::first-line { font-weight: 500; }

/* The Forecaster feature: fascinations, editions, terms */
.feat { display: grid; gap: 48px; }
@media (min-width: 1100px) { .feat { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 80px; align-items: start; } }
.feat__body .lead { margin: 20px 0 0; color: var(--text); }
.fasc { list-style: none; padding: 0; margin: 28px 0 0; }
.fasc li { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.5; color: var(--text); }
.fasc li::before { content: ''; position: absolute; left: 0; top: 26px; width: 14px; height: 2px; background: var(--accent); }
.fasc li:last-child { border-bottom: 1px solid var(--line); }
.editions { display: grid; grid-template-columns: minmax(118px, 3fr) repeat(12, minmax(0, 1fr)); gap: 3px; height: 230px; }
.ed { background: var(--paper-alt); border: 1px solid var(--line-3); border-radius: 2px; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; font: 600 12px var(--sans); color: var(--muted); }
.ed--annual { writing-mode: horizontal-tb; transform: none; background: var(--ink); border-color: var(--ink); color: #fff; padding: 14px; flex-direction: column; align-items: flex-start; justify-content: space-between; font: 500 18px/1.15 var(--serif); }
.ed--annual small { font: 600 12px/1.3 var(--sans); color: var(--gold); }
@media (max-width: 699px) {
  .editions { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 150px; height: auto; }
  .ed--annual { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; justify-content: flex-start; }
}
.editions__cap { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.terms { margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-3); }
.terms div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.terms dt { font: 600 15px/1.5 var(--sans); color: var(--muted); }
@media (max-width: 479px) { .terms div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.terms dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 26px 0 18px; }
.price-line b { font: 500 40px/1 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.price-line span { font-size: 15px; color: var(--muted); }

/* The course ladder: a real sequence, so it is numbered */
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 18px; padding: 24px 0; border-top: 1px solid var(--line-3); }
.ladder__n { font: 500 36px/1 var(--serif); color: var(--accent); }
.ladder h3 { font-size: 23px; line-height: 1.2; }
.ladder p { margin: 6px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.ladder__courses { list-style: none; padding: 0; margin: 12px 0 0; }
.ladder__courses li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px dotted var(--line-3); }
.ladder__courses a { font-weight: 600; color: var(--ink); text-decoration: none; }
.ladder__courses a:hover { color: var(--accent); text-decoration: underline; }
.ladder__courses span { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 15px; }
@media (max-width: 479px) { .ladder__courses span { white-space: normal; } }
.courses-grid { display: grid; gap: 48px; }
@media (min-width: 1100px) { .courses-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: start; } .courses-grid .stage { position: sticky; top: calc(var(--hdr) + 32px); } .courses-grid .stage__art { inset: 0 0 0 30%; } }

/* Plain link lists in place of card grids */
.plain { display: grid; gap: 0 56px; }
@media (min-width: 900px) { .plain { grid-template-columns: 1fr 1fr; } }
.plain a { display: block; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); }
.plain a b { display: block; font: 500 23px/1.2 var(--serif); color: var(--ink); margin-bottom: 4px; }
.plain a span { display: block; font-size: 16px; line-height: 1.5; color: var(--muted); }
.plain a em { font-style: normal; color: var(--accent); font-weight: 600; font-size: 15px; }
.plain a .plain__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.plain__buy em { font-size: 16px; }
.plain a:hover b { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.plain--one { grid-template-columns: 1fr !important; }
.free-grid { display: grid; gap: 48px; }
@media (min-width: 1100px) { .free-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; } }
.frame { margin: 0; background: #fff; border: 1px solid var(--line-3); border-radius: 8px; overflow: hidden; box-shadow: 0 34px 60px -34px rgba(26,25,22,.4); }
.frame__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #efebe3; border-bottom: 1px solid #e2dccf; font: 500 12px var(--sans); color: var(--muted); }
.frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d3cbbd; display: block; }
.frame__bar span { margin-left: 8px; background: #fff; border-radius: 4px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.frame figcaption { padding: 14px 16px; font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); }
/* Diagrams drawn inline from /images/NAME.svg#d and NAME-m.svg#m so the page fonts apply.
   The phone layout shows when the diagram's frame is under 600px wide, wherever the frame sits. */
.fig__frame:has(> .dg) { container-type: inline-size; }
.dg { display: block; width: 100%; height: auto; }
.dg--m { display: none; }
@container (max-width: 599px) { .dg--d { display: none; } .dg--m { display: block; } }

/* Before-and-after exhibit from a closed year of member research */
.ba { display: grid; gap: 20px; }
@media (min-width: 900px) { .ba { grid-template-columns: 1fr 1fr; gap: 28px; } }
.ba__fig { margin: 0; background: #fff; border: 1px solid var(--line-3); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 50px -36px rgba(26,25,22,.4); }
.ba__img { position: relative; border-bottom: 1px solid var(--line); }
.ba__fig img { width: 100%; aspect-ratio: 1280 / 520; object-fit: cover; }
.ba__tag { position: absolute; right: 12px; transform: translateY(-50%); background: var(--accent); color: #fff; font: 600 13px/1 var(--sans); padding: 6px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(26,25,22,.25); }
.ba__fig figcaption { padding: 14px 18px 16px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ba__fig figcaption b { display: block; font: 600 15px var(--sans); color: var(--accent); margin-bottom: 2px; }
.ba__more { max-width: 46em; margin: 28px auto 0; text-align: center; font-size: 17px; color: var(--text); }
@media (max-width: 699px) { .ba__fig { margin: 0 calc(var(--pad) * -1); border-radius: 0; border-left: 0; border-right: 0; } }

/* ---------- 22c. Three layouts: tablet and phone are designed, not stacked desktop ---------- */
/* Tablet, 700 to 1099px: full-width headline, wide two-column exhibits, two-column ledger rows */
@media (min-width: 700px) and (max-width: 1099px) {
  .open { padding-top: 40px; }
  .open__grid { gap: 40px; }
  .open .open__h { max-width: none !important; font-size: clamp(50px, 7vw, 70px) !important; line-height: 1.02; }
  .open .lead { max-width: 40em; }
  main h1.h1 { max-width: none !important; }
  main h1.bf-h, main h1.ht-h, main h1.ab-h, main h1.lb-h, main h1.st-h { font-size: clamp(46px, 6.6vw, 62px) !important; }
  .open .sheet, .sheet { max-width: none !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 36px; align-items: start; padding: 26px 32px 22px; }
  .sheet > * { grid-column: 2; }
  .sheet > .sheet__top, .sheet > .sheet__foot, .sheet > figcaption { grid-column: 1 / -1; }
  .sheet > .sheet__q { grid-column: 1; grid-row: 2; align-self: start; margin: 22px 0 0; font-size: 30px !important; line-height: 1.28; }
  .sheet > :not(.sheet__top):not(.sheet__q):not(.sheet__foot):not(figcaption):not(.sheet__legend) { grid-row: auto; }
  .sheet > .sheet__top + .sheet__q + * { margin-top: 24px; }
  .sheet > .sheet__legend { grid-column: 1 / -1; margin: 22px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); gap: 14px 36px; }

  .call { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px 36px; align-items: start; }
  .call > .call__when { grid-column: 1; grid-row: 1; }
  .call > div { grid-column: 1; grid-row: 2 / span 2; }
  .call > .call__then { grid-column: 2; grid-row: 1 / span 2; }
  .call > svg, .call > .spark { grid-column: 2; grid-row: 3; max-width: none; }

  .story { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }

  /* The editions strip needs the full width to keep its month labels legible, so the block stacks on tablet */
  .feat > div:last-child:has(> .editions) { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; }

  .courses-grid > .stage { order: -1; }
  .free-grid > .frame { max-width: none; }
}

/* Phone, under 700px: one column built for the thumb, exhibits run edge to edge as bands */
@media (max-width: 699px) {
  .open { padding-top: 28px; }
  .open__grid { gap: 32px; }
  .open .open__h { max-width: none !important; font-size: clamp(36px, 10.4vw, 44px) !important; line-height: 1.04; margin-bottom: 20px; }
  .open .lead { font-size: 18px; }
  .open .sheet { margin: 0 calc(var(--pad) * -1); max-width: none !important; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; background: var(--paper-alt); padding: 22px var(--pad) 18px; }
  .open .sheet .sheet__top { border-color: var(--line-3); }
  .open .sheet .sheet__q { font-size: 24px !important; }
  .open .sheet .spark__area { fill: rgba(26,25,22,.06); }

  .call { gap: 10px; padding: 24px 0; }
  .call__q { font-size: 21px; }
  .call .spark { max-width: none; }

  .story__photo { display: flex; align-items: center; gap: 16px; }
  .story__photo img { width: 84px; max-width: 84px; border-radius: 50%; }
  .story__photo figcaption { margin: 0; }
  .story__body p { font-size: 18px; }

  .fasc li { font-size: 17px; }
  .frame { margin: 0 calc(var(--pad) * -1); border-radius: 0; border-left: 0; border-right: 0; }
}
.letter .dateline { text-transform: none; letter-spacing: 0; font-size: 15px; }

/* Price block inside letters: one framed figure, sans note, never a bare repeat of the heading */
.letter .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 1.4em 0 1em; padding: 22px 24px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--r-card); font-family: var(--sans); }
.letter .price-line b { font: 500 44px/1 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.letter .price-line span { font: 500 16px/1.4 var(--sans); color: var(--muted); }
.letter .price-line + .terms { margin-top: 0; }

/* ---------- 22d. Centred composition (owner, 14 Nov 2026) ----------
   Full-width headings, their decks and the closing band are centred. Reading text stays left, inside a centred column.
   Headings that sit in one column of a two-column layout keep that column's alignment. */
.wrap > .sec-head { margin-left: auto; margin-right: auto; text-align: center; max-width: 880px; }
.wrap > .sec-head .lead, .wrap > .sec-head p { margin-left: auto; margin-right: auto; }
.sec-foot, .calls__foot { justify-content: center; text-align: center; }
.sec-foot.btns { justify-content: center; }
.article-head { text-align: center; }
.article-head > *, .article-head .lead, .article-head .h1 { margin-left: auto; margin-right: auto; }
.prose, .read, .briefing-box { margin-left: auto; margin-right: auto; }
.band .split { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 8px; }
.band .lead { margin-left: auto; margin-right: auto; }
.band .btns { justify-content: center; }
.letter-hero { text-align: center; }
.letter-hero .h1, .letter-hero .deck { margin-left: auto; margin-right: auto; }
.letter-hero .btns { justify-content: center; }
@media (max-width: 1099px) {
  .open__grid > div:first-child { text-align: center; }
  .open .lead, .open__note { margin-left: auto; margin-right: auto; }
  .open .btns { justify-content: center; }
}
.plain__group h3 { font: 600 15px var(--sans); color: var(--muted); margin: 0 0 6px; letter-spacing: 0; }

/* 22e. Site audit, 14 Nov 2026: anything under a centred heading or column follows that axis */
html { scroll-padding-top: calc(var(--hdr) + 24px); }
.article-head { margin-left: auto; margin-right: auto; }
.wrap > .sec-head > * { margin-left: auto; margin-right: auto; }
.wrap > .btns { justify-content: center; }
.prose + p, .read + p { max-width: var(--read); margin-left: auto; margin-right: auto; }
.ladder__courses a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ph-head, .gs-head, .bs-head { text-align: center; }
.ph-head > *, .gs-head > *, .bs-head > * { margin-left: auto; margin-right: auto; }
.ph-cities, .gs-months > .label { text-align: center; }
.ph-cities ul { justify-content: center; }
@media (max-width: 1099px) {
  .courses-grid .sec-head, .free-grid .sec-head, .lb-sec__head,
  .feat__body > .h2, .feat__body > .lead,
  .free-grid > div:first-child > .h2, .free-grid > div:first-child > .lead,
  .split--close > div:first-child, .cf-head > header { text-align: center; margin-left: auto; margin-right: auto; }
  .courses-grid .sec-head .lead, .free-grid .sec-head .lead, .split--close .lead, .cf-head .lead { margin-left: auto; margin-right: auto; }
  .free-grid > div:first-child > .btns, .split--close .btns { justify-content: center; }
  .split--close .signup, .open .signup { margin-left: auto; margin-right: auto; }
  .open .ab-by { justify-content: center; }
  .cf-head .cf-facts { text-align: left; max-width: var(--read); margin-left: auto; margin-right: auto; }
  /* The Forecaster block (home, record, programme page): once stacked, the price, caption and button follow the centred heading */
  .feat .price-line { justify-content: center; text-align: center; }
  .feat .editions__cap { text-align: center; }
  .feat > div:last-child > .btns { justify-content: center; }
}

/* ---------- 23. Print ---------- */
@media print { .hdr, .ftr, .buybar, .strip, .letter-rail, .signup, .briefing-box, .band { display: none !important; } }
/* Every price line: the figure, then its terms underneath, both centred (owner, 14 Nov 2026). Kept last so it wins over the older rules above. */
.price-line, .letter .price-line, .feat .price-line { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
/* A sheet with no chart beside its quote: the quote spans the card and centres, so no half of the card sits empty */
.sheet:not(:has(> .spark, > svg, > .cl-bars, > img, > .sheet__art)) > .sheet__q { grid-column: 1 / -1; justify-self: center; text-align: center; max-width: 28ch; margin-left: auto; margin-right: auto; }