/* NFT website.
   Palette taken from pif.gov.sa (HUMAIN page): ivory ground, sand panels, charcoal text, PIF green and deep forest.
   Red and green only ever mark a direction and always come with a word and a shape. No orange.
   Type is Inter: 450 for text, 600 for headlines, names and labels. */

/* Both fonts are served from this site (assets/fonts, SIL Open Font License), so no visitor's browser asks Google for them.
   These are the files Google Fonts serves: Inter variable (opsz 14–32, wght 100–900) and Fraunces (opsz 9–144) at 400.
   Latin covers the page; Inter's latin-ext file loads only if a post has a letter such as ğ. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #fcf9f3;             /* ivory, a third of the way whiter than #faf6ee (owner, 7 Oct 2026: "a tiny bit whiter") */
  --panel: #f0e8db;          /* sand */
  --card: #ffffff;
  --ink: #262626;            /* charcoal */
  --ink-2: #555555;
  --ink-3: #636363;
  --ink-4: #707070;          /* the faintest grey that still reads as text on ivory (4.6:1) */
  --line: rgba(38, 38, 38, .12);
  --line-strong: rgba(38, 38, 38, .24);
  --green: #005c4d;          /* PIF green */
  --green-deep: #0f2e29;     /* PIF forest */
  --green-soft: rgba(0, 92, 77, .12);
  --up: #1b5e37;
  --up-soft: rgba(46, 125, 79, .16);
  --down: #9c2f28;
  --down-soft: rgba(179, 55, 47, .13);
  --up-dot: #2e7d4f;         /* brighter tones for the direction circles */
  --down-dot: #b3372f;
  --up-bright: #7dd09c;      /* the same directions on the dark green panels */
  --down-bright: #ef8f86;
  --shadow: 0 1px 2px rgba(38, 38, 38, .04), 0 12px 32px rgba(38, 38, 38, .08);
  --shadow-card: 0 1px 2px rgba(38, 38, 38, .05), 0 18px 40px -18px rgba(38, 38, 38, .22);
  --shadow-card-hover: 0 2px 4px rgba(38, 38, 38, .06), 0 24px 48px -18px rgba(38, 38, 38, .3);

  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-weight: 450;
  --gutter: 64px;
  --header-h: 112px;
  --card-w: 360px;
  --card-gap: 24px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);   /* for things leaving */
  color-scheme: light;
}

@media (max-width: 1068px) {
  :root { --gutter: 40px; --card-w: 330px; }
}

@media (max-width: 734px) {
  :root { --gutter: 20px; --header-h: 88px; --card-w: 286px; --card-gap: 16px; }
}

/* Desktop (≥1069px) only: the names its polish shares, so the cards, edges, rings and timings agree with each other.
   Phones and tablets never see these (the phone has its own --gilt-line and --paper further down). */
@media (min-width: 1069px) {
  :root {
    --gilt: #9a7638;                         /* the one solid gold: rules, bars, arrows, edges, large serif */
    --sheet-edge: rgba(38, 38, 38, .1);      /* the light grey edge and dividers of the white sheets (post box, chart, picked post, toggle) */
    --elev-1: 0 1px 2px rgba(38, 38, 38, .04), 0 16px 34px -22px rgba(92, 70, 38, .3);      /* a card resting on the ivory */
    --elev-1-sm: 0 1px 2px rgba(38, 38, 38, .04), 0 8px 20px -14px rgba(92, 70, 38, .3);    /* the same level, for a control 34–38px tall */
    --elev-2: 0 1px 2px rgba(38, 38, 38, .05), 0 18px 40px -18px rgba(92, 70, 38, .26);     /* the post box: the thing you act on */
    --focus: var(--green);                   /* every keyboard ring: 2px of this */
    --t-quick: 150ms;                        /* hovers, colours, underlines, a card settling from post to post */
    --t-fade: 250ms;                         /* things appearing or leaving in place */
    --t-enter: 900ms;                        /* the hero's one entrance */
  }
}

/* ---------- Base ---------- */

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

html {
  background-color: var(--bg);   /* the page's ivory, on the root: iOS 26 tints its bars and the overscroll from it; body has none, so the lattice (z-index -1) lies on it */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* presses show their own feedback */
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  position: relative;   /* body::before (the lattice) is placed from its top */
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--text-weight);
  letter-spacing: -.011em;
  font-optical-sizing: auto;
  font-synthesis: none;
}

[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }

p, h1, h2, h3, ul, ol, dl, dd { margin: 0; }

a {
  color: var(--green);
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

/* Hover styles only for a real mouse: on touch they stick after a tap. */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration: underline; }
}

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

/* A selection is a pale wash of the page's gold (the phone's post box uses the same), not the browser's blue: the ink
   stays at about 11:1 on it and the gilt line of the question still shows through. */
@media (min-width: 1069px) {
  ::selection { background: rgba(176, 138, 76, .24); }
}

main:focus,
section:focus,
.site-footer:focus { outline: none; }   /* targets focused by links, not controls */

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

a, button, summary { touch-action: manipulation; }   /* no double-tap zoom delay on controls */

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

.container {
  box-sizing: content-box;
  max-width: 1312px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  top: -120px;
  left: 12px;
  z-index: 100;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--card);
  color: var(--green);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow);
}

.skip:focus { top: 14px; }

/* Label: PIF-style small caps line in green. */
.label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}

.lead {
  max-width: 700px;
  margin-top: 16px;
  font-size: 21px;
  line-height: 32px;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- Header: the byline alone ---------- */

/* Clear over the pattern, and part of the page: it scrolls away with the hero (no sticky bar, no frosting). */
.site-header {
  position: relative;
  z-index: 50;
  height: var(--header-h);
}

.header-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* "Research by Majd Jamal", top right, in Inter like the headline (owner, 13 Oct 2026; it was the serif). On a desktop
   the header's row is the 1240px frame, so the byline ends where the picked post's column and the footer do. */
.byline {
  margin-left: auto;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
  white-space: nowrap;
}

@media (min-width: 1069px) {
  .header-inner,
  .site-footer > .container { max-width: 1240px; }   /* the footer's edges line up with the hero and Findings too */
}

@media (max-width: 734px) {
  .byline { font-size: 14px; line-height: 20px; }
}

.logo {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .logo:hover { text-decoration: none; }
}

.logo-mark {   /* the pear-cut drop, 47 x 81 */
  width: 48px;
  height: 82px;
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(107, 74, 43, .3)) drop-shadow(0 6px 14px rgba(107, 74, 43, .2));
}
.logo-drop { transform-box: fill-box; transform-origin: 50% 100%; }

/* The mark is a pear-cut drop in pearl white (#fff) and beige (#e3d2b3) drawn in a firm gold line (#a8803f); its colours
   are in the markup. The soft warm shadow lifts it off the ivory, the pattern, the white cards and the sand footer, so it
   stays clear as it floats over the page. On hover it falls and forms again. */
.logo-drop.is-falling { animation: drop-fall 2.2s linear both; }

@keyframes drop-fall {
  0% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
  10% { transform: translateY(-1.5px) scale(1.05, .95); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  50% { transform: translateY(40px) scale(.9, 1.12); opacity: 1; animation-timing-function: linear; }
  72% { transform: translateY(80px) scale(.84, 1.18); opacity: 0; }
  73% { transform: translateY(0) scale(.3); opacity: 0; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.logo-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* The byline is the logo's only words now: small, in ink, like a signature beside the mark. It sits a little under
   the mark's middle (.4em: about 6px on desktop, 5px on phones), level with the drop rather than the hexagon's top. */
.logo-by { position: relative; top: .4em; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }

.header-end { min-width: 0; display: flex; align-items: center; gap: 18px; }

/* Trump's latest oil sentiment: a quiet line at the right of the header with a coloured circle. Hovering or focusing it says
   what it is based on; clicking it opens the latest post behind it. */
.now-wrap { position: relative; min-width: 0; }

.now {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 21px;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .now:hover .now-k { color: var(--ink); }
}

.now[aria-disabled="true"] { cursor: default; }
.now-k-short { display: none; }   /* phones show "Trump’s sentiment" */

.now-v { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }

.now-tip {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--green-deep);
  color: var(--bg);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  white-space: normal;
  box-shadow: 0 10px 24px -10px rgba(15, 46, 41, .5);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s;
}

.now:focus-visible + .now-tip { opacity: 1; visibility: visible; }

@media (hover: hover) and (pointer: fine) {
  .now:hover + .now-tip { opacity: 1; visibility: visible; }
}

/* On touch the first tap opens the tip (main.js), and a tap on the tip opens the post. */
.now-wrap.is-open .now-tip { opacity: 1; visibility: visible; pointer-events: auto; }

.now-wrap:not([hidden]) { animation: appear .4s ease both; }

@keyframes appear { from { opacity: 0; } }

/* Landscape phones: a lower header, so more of the page fits. Touch only, so short desktop windows keep theirs. */
@media (max-height: 500px) and (min-width: 735px) and (hover: none) and (pointer: coarse) {
  :root { --header-h: 72px; }
  .logo-mark { width: 33px; height: 56px; }   /* the owner's bigger logo, 8px above and below as on the phone */
  .logo-by { font-size: 13px; line-height: 18px; }
}

/* ---------- Background: the pattern over the whole page ---------- */

/* The pattern runs under the first screen, tone on tone and edge to edge, from the top (the header is clear until you
   scroll), and fades out into the top of Findings; the rest of the page is plain ivory. The drawings, a fine gold line:
   --hero-screen   Screen lattice (live), after the owner's photo of a metal screen: tall rectangles in columns, every other
                   column dropped by half; the gaps split by an upright and a cross bar, short bridges between the columns.
                   Drawn as the photo shows it (rectangles about 1:3.6; the real screen, seen head-on, is nearer 1:3 and
                   looked squat). A 1px line on half pixels, so it is crisp at 1x, 2x and 3x; each size is its own drawing,
                   never scaled: 108 x 168 at .26, and --hero-screen-sm, 84 x 132 at .24, on phones
   --hero-lisbon   Lisbon diamond point: a lattice of faceted stones, like cut crystal, after Lisbon's Renaissance
                   azulejo tiles; tall diamonds drawn as a strap, each with a small table and four ridges (64 x 90, opacity .19;
                   phones 56 x 79 at .16)
   --hero-cane     French cane: woven cane with octagonal openings, as on Napoleon III chairs (32 x 32, opacity .22)
   --hero-star     A, star and cross: eight-point stars touching at their tips, a cross between every four (80 x 80)
   --hero-lantern  F, Moroccan lantern: a diamond lattice with S-curved edges, drawn as a strap (60 x 88)
   and a file, assets/img/pattern-floral.svg: a floral ogee of vines, palmettes, leaves and buds (220 x 330, opacity .3).
   To switch, change the image, the size and the opacity together, here and in the phone rule (.24 for A and F;
   use url("../img/pattern-floral.svg") directly for the floral). A and F read as Islamic, so the owner moved away from them.
   (The names still say "hero": the pattern covered only the first screen until the thirty-second revision.) */
:root {
  --hero-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M28.28 0L20 8.28L20 20L8.28 20L0 28.28L-8.28 20L-20 20L-20 8.28L-28.28 0L-20 -8.28L-20 -20L-8.28 -20L0 -28.28L8.28 -20L20 -20L20 -8.28ZM23.76 0L16.8 6.96L16.8 16.8L6.96 16.8L0 23.76L-6.96 16.8L-16.8 16.8L-16.8 6.96L-23.76 0L-16.8 -6.96L-16.8 -16.8L-6.96 -16.8L0 -23.76L6.96 -16.8L16.8 -16.8L16.8 -6.96ZM108.28 0L100 8.28L100 20L88.28 20L80 28.28L71.72 20L60 20L60 8.28L51.72 0L60 -8.28L60 -20L71.72 -20L80 -28.28L88.28 -20L100 -20L100 -8.28ZM103.76 0L96.8 6.96L96.8 16.8L86.96 16.8L80 23.76L73.04 16.8L63.2 16.8L63.2 6.96L56.24 0L63.2 -6.96L63.2 -16.8L73.04 -16.8L80 -23.76L86.96 -16.8L96.8 -16.8L96.8 -6.96ZM28.28 80L20 88.28L20 100L8.28 100L0 108.28L-8.28 100L-20 100L-20 88.28L-28.28 80L-20 71.72L-20 60L-8.28 60L0 51.72L8.28 60L20 60L20 71.72ZM23.76 80L16.8 86.96L16.8 96.8L6.96 96.8L0 103.76L-6.96 96.8L-16.8 96.8L-16.8 86.96L-23.76 80L-16.8 73.04L-16.8 63.2L-6.96 63.2L0 56.24L6.96 63.2L16.8 63.2L16.8 73.04ZM108.28 80L100 88.28L100 100L88.28 100L80 108.28L71.72 100L60 100L60 88.28L51.72 80L60 71.72L60 60L71.72 60L80 51.72L88.28 60L100 60L100 71.72ZM103.76 80L96.8 86.96L96.8 96.8L86.96 96.8L80 103.76L73.04 96.8L63.2 96.8L63.2 86.96L56.24 80L63.2 73.04L63.2 63.2L73.04 63.2L80 56.24L86.96 63.2L96.8 63.2L96.8 73.04ZM68.28 40L60 48.28L60 60L48.28 60L40 68.28L31.72 60L20 60L20 48.28L11.72 40L20 31.72L20 20L31.72 20L40 11.72L48.28 20L60 20L60 31.72ZM63.76 40L56.8 46.96L56.8 56.8L46.96 56.8L40 63.76L33.04 56.8L23.2 56.8L23.2 46.96L16.24 40L23.2 33.04L23.2 23.2L33.04 23.2L40 16.24L46.96 23.2L56.8 23.2L56.8 33.04Z' fill='none' stroke='%23b08a4c' stroke-width='0.8'/%3E%3C/svg%3E");
  --hero-cane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='butt'%3E%3Cpath d='M-1.8 -2L-1.8 34' stroke='%23b08a4c' stroke-width='3.3'/%3E%3Cpath d='M-1.8 -2L-1.8 34' stroke='%23eadcc1' stroke-width='2.3'/%3E%3Cpath d='M1.8 -2L1.8 34' stroke='%23b08a4c' stroke-width='3.3'/%3E%3Cpath d='M1.8 -2L1.8 34' stroke='%23eadcc1' stroke-width='2.3'/%3E%3Cpath d='M30.2 -2L30.2 34' stroke='%23b08a4c' stroke-width='3.3'/%3E%3Cpath d='M30.2 -2L30.2 34' stroke='%23eadcc1' stroke-width='2.3'/%3E%3Cpath d='M33.8 -2L33.8 34' stroke='%23b08a4c' stroke-width='3.3'/%3E%3Cpath d='M33.8 -2L33.8 34' stroke='%23eadcc1' stroke-width='2.3'/%3E%3Cpath d='M-2 -1.8L34 -1.8' stroke='%23b08a4c' stroke-width='3.3'/%3E%3Cpath d='M-2 -1.8L34 -1.8' stroke='%23eadcc1' stroke-width='2.3'/%3E%3Cpath d='M-2 1.8L34 1.8' stroke='%23b08a4c' stroke-width='3.3'/%3E%3Cpath d='M-2 1.8L34 1.8' stroke='%23eadcc1' stroke-width='2.3'/%3E%3Cpath d='M-2 30.2L34 30.2' stroke='%23b08a4c' stroke-width='3.3'/%3E%3Cpath d='M-2 30.2L34 30.2' stroke='%23eadcc1' stroke-width='2.3'/%3E%3Cpath d='M-2 33.8L34 33.8' stroke='%23b08a4c' stroke-width='3.3'/%3E%3Cpath d='M-2 33.8L34 33.8' stroke='%23eadcc1' stroke-width='2.3'/%3E%3Cpath d='M-34 -2L2 34' stroke='%23b08a4c' stroke-width='4.3'/%3E%3Cpath d='M-34 -2L2 34' stroke='%23eadcc1' stroke-width='3.3'/%3E%3Cpath d='M2 -2L-34 34' stroke='%23b08a4c' stroke-width='4.3'/%3E%3Cpath d='M2 -2L-34 34' stroke='%23eadcc1' stroke-width='3.3'/%3E%3Cpath d='M-2 -2L34 34' stroke='%23b08a4c' stroke-width='4.3'/%3E%3Cpath d='M-2 -2L34 34' stroke='%23eadcc1' stroke-width='3.3'/%3E%3Cpath d='M34 -2L-2 34' stroke='%23b08a4c' stroke-width='4.3'/%3E%3Cpath d='M34 -2L-2 34' stroke='%23eadcc1' stroke-width='3.3'/%3E%3Cpath d='M30 -2L66 34' stroke='%23b08a4c' stroke-width='4.3'/%3E%3Cpath d='M30 -2L66 34' stroke='%23eadcc1' stroke-width='3.3'/%3E%3Cpath d='M66 -2L30 34' stroke='%23b08a4c' stroke-width='4.3'/%3E%3Cpath d='M66 -2L30 34' stroke='%23eadcc1' stroke-width='3.3'/%3E%3C/g%3E%3C/svg%3E");
  --hero-lantern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='88' viewBox='0 0 60 88'%3E%3Cg fill='none' stroke-linejoin='miter' stroke-miterlimit='10'%3E%3Cpath d='M-120 -88C-121.2 -67.33 -148.8 -64.67 -150 -44M-120 -88C-118.8 -67.33 -91.2 -64.67 -90 -44M-90 -44C-91.2 -23.33 -118.8 -20.67 -120 0M-90 -44C-88.8 -23.33 -61.2 -20.67 -60 0M-120 0C-121.2 20.67 -148.8 23.33 -150 44M-120 0C-118.8 20.67 -91.2 23.33 -90 44M-90 44C-91.2 64.67 -118.8 67.33 -120 88M-90 44C-88.8 64.67 -61.2 67.33 -60 88M-120 88C-121.2 108.67 -148.8 111.33 -150 132M-120 88C-118.8 108.67 -91.2 111.33 -90 132M-90 132C-91.2 152.67 -118.8 155.33 -120 176M-90 132C-88.8 152.67 -61.2 155.33 -60 176M-60 -88C-61.2 -67.33 -88.8 -64.67 -90 -44M-60 -88C-58.8 -67.33 -31.2 -64.67 -30 -44M-30 -44C-31.2 -23.33 -58.8 -20.67 -60 0M-30 -44C-28.8 -23.33 -1.2 -20.67 0 0M-60 0C-61.2 20.67 -88.8 23.33 -90 44M-60 0C-58.8 20.67 -31.2 23.33 -30 44M-30 44C-31.2 64.67 -58.8 67.33 -60 88M-30 44C-28.8 64.67 -1.2 67.33 0 88M-60 88C-61.2 108.67 -88.8 111.33 -90 132M-60 88C-58.8 108.67 -31.2 111.33 -30 132M-30 132C-31.2 152.67 -58.8 155.33 -60 176M-30 132C-28.8 152.67 -1.2 155.33 0 176M0 -88C-1.2 -67.33 -28.8 -64.67 -30 -44M0 -88C1.2 -67.33 28.8 -64.67 30 -44M30 -44C28.8 -23.33 1.2 -20.67 0 0M30 -44C31.2 -23.33 58.8 -20.67 60 0M0 0C-1.2 20.67 -28.8 23.33 -30 44M0 0C1.2 20.67 28.8 23.33 30 44M30 44C28.8 64.67 1.2 67.33 0 88M30 44C31.2 64.67 58.8 67.33 60 88M0 88C-1.2 108.67 -28.8 111.33 -30 132M0 88C1.2 108.67 28.8 111.33 30 132M30 132C28.8 152.67 1.2 155.33 0 176M30 132C31.2 152.67 58.8 155.33 60 176M60 -88C58.8 -67.33 31.2 -64.67 30 -44M60 -88C61.2 -67.33 88.8 -64.67 90 -44M90 -44C88.8 -23.33 61.2 -20.67 60 0M90 -44C91.2 -23.33 118.8 -20.67 120 0M60 0C58.8 20.67 31.2 23.33 30 44M60 0C61.2 20.67 88.8 23.33 90 44M90 44C88.8 64.67 61.2 67.33 60 88M90 44C91.2 64.67 118.8 67.33 120 88M60 88C58.8 108.67 31.2 111.33 30 132M60 88C61.2 108.67 88.8 111.33 90 132M90 132C88.8 152.67 61.2 155.33 60 176M90 132C91.2 152.67 118.8 155.33 120 176M120 -88C118.8 -67.33 91.2 -64.67 90 -44M120 -88C121.2 -67.33 148.8 -64.67 150 -44M150 -44C148.8 -23.33 121.2 -20.67 120 0M150 -44C151.2 -23.33 178.8 -20.67 180 0M120 0C118.8 20.67 91.2 23.33 90 44M120 0C121.2 20.67 148.8 23.33 150 44M150 44C148.8 64.67 121.2 67.33 120 88M150 44C151.2 64.67 178.8 67.33 180 88M120 88C118.8 108.67 91.2 111.33 90 132M120 88C121.2 108.67 148.8 111.33 150 132M150 132C148.8 152.67 121.2 155.33 120 176M150 132C151.2 152.67 178.8 155.33 180 176' stroke='%23b08a4c' stroke-width='3.4'/%3E%3Cpath d='M-120 -88C-121.2 -67.33 -148.8 -64.67 -150 -44M-120 -88C-118.8 -67.33 -91.2 -64.67 -90 -44M-90 -44C-91.2 -23.33 -118.8 -20.67 -120 0M-90 -44C-88.8 -23.33 -61.2 -20.67 -60 0M-120 0C-121.2 20.67 -148.8 23.33 -150 44M-120 0C-118.8 20.67 -91.2 23.33 -90 44M-90 44C-91.2 64.67 -118.8 67.33 -120 88M-90 44C-88.8 64.67 -61.2 67.33 -60 88M-120 88C-121.2 108.67 -148.8 111.33 -150 132M-120 88C-118.8 108.67 -91.2 111.33 -90 132M-90 132C-91.2 152.67 -118.8 155.33 -120 176M-90 132C-88.8 152.67 -61.2 155.33 -60 176M-60 -88C-61.2 -67.33 -88.8 -64.67 -90 -44M-60 -88C-58.8 -67.33 -31.2 -64.67 -30 -44M-30 -44C-31.2 -23.33 -58.8 -20.67 -60 0M-30 -44C-28.8 -23.33 -1.2 -20.67 0 0M-60 0C-61.2 20.67 -88.8 23.33 -90 44M-60 0C-58.8 20.67 -31.2 23.33 -30 44M-30 44C-31.2 64.67 -58.8 67.33 -60 88M-30 44C-28.8 64.67 -1.2 67.33 0 88M-60 88C-61.2 108.67 -88.8 111.33 -90 132M-60 88C-58.8 108.67 -31.2 111.33 -30 132M-30 132C-31.2 152.67 -58.8 155.33 -60 176M-30 132C-28.8 152.67 -1.2 155.33 0 176M0 -88C-1.2 -67.33 -28.8 -64.67 -30 -44M0 -88C1.2 -67.33 28.8 -64.67 30 -44M30 -44C28.8 -23.33 1.2 -20.67 0 0M30 -44C31.2 -23.33 58.8 -20.67 60 0M0 0C-1.2 20.67 -28.8 23.33 -30 44M0 0C1.2 20.67 28.8 23.33 30 44M30 44C28.8 64.67 1.2 67.33 0 88M30 44C31.2 64.67 58.8 67.33 60 88M0 88C-1.2 108.67 -28.8 111.33 -30 132M0 88C1.2 108.67 28.8 111.33 30 132M30 132C28.8 152.67 1.2 155.33 0 176M30 132C31.2 152.67 58.8 155.33 60 176M60 -88C58.8 -67.33 31.2 -64.67 30 -44M60 -88C61.2 -67.33 88.8 -64.67 90 -44M90 -44C88.8 -23.33 61.2 -20.67 60 0M90 -44C91.2 -23.33 118.8 -20.67 120 0M60 0C58.8 20.67 31.2 23.33 30 44M60 0C61.2 20.67 88.8 23.33 90 44M90 44C88.8 64.67 61.2 67.33 60 88M90 44C91.2 64.67 118.8 67.33 120 88M60 88C58.8 108.67 31.2 111.33 30 132M60 88C61.2 108.67 88.8 111.33 90 132M90 132C88.8 152.67 61.2 155.33 60 176M90 132C91.2 152.67 118.8 155.33 120 176M120 -88C118.8 -67.33 91.2 -64.67 90 -44M120 -88C121.2 -67.33 148.8 -64.67 150 -44M150 -44C148.8 -23.33 121.2 -20.67 120 0M150 -44C151.2 -23.33 178.8 -20.67 180 0M120 0C118.8 20.67 91.2 23.33 90 44M120 0C121.2 20.67 148.8 23.33 150 44M150 44C148.8 64.67 121.2 67.33 120 88M150 44C151.2 64.67 178.8 67.33 180 88M120 88C118.8 108.67 91.2 111.33 90 132M120 88C121.2 108.67 148.8 111.33 150 132M150 132C148.8 152.67 121.2 155.33 120 176M150 132C151.2 152.67 178.8 155.33 180 176' stroke='%23fcf9f3' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --hero-lisbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='90' viewBox='0 0 64 90' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='8'%3E%3Cpath d='M32 7.5V31.5M32 82.5V58.5M7.5 45H22.4M56.5 45H41.6M0 -37.5V-13.5M0 37.5V13.5M-24.5 0H-9.6M24.5 0H9.6M64 -37.5V-13.5M64 37.5V13.5M39.5 0H54.4M88.5 0H73.6M0 52.5V76.5M0 127.5V103.5M-24.5 90H-9.6M24.5 90H9.6M64 52.5V76.5M64 127.5V103.5M39.5 90H54.4M88.5 90H73.6' stroke='%23b08a4c' stroke-width='1'/%3E%3Cpath d='M32 31.5L41.6 45L32 58.5L22.4 45ZM0 -13.5L9.6 0L0 13.5L-9.6 0ZM64 -13.5L73.6 0L64 13.5L54.4 0ZM0 76.5L9.6 90L0 103.5L-9.6 90ZM64 76.5L73.6 90L64 103.5L54.4 90Z' stroke='%23b08a4c' stroke-width='3'/%3E%3Cpath d='M32 31.5L41.6 45L32 58.5L22.4 45ZM0 -13.5L9.6 0L0 13.5L-9.6 0ZM64 -13.5L73.6 0L64 13.5L54.4 0ZM0 76.5L9.6 90L0 103.5L-9.6 90ZM64 76.5L73.6 90L64 103.5L54.4 90Z' stroke='%23fcf9f3' stroke-width='1.2'/%3E%3Cpath d='M-64 135L128 -135M-64 225L128 -45M-64 -45L128 225M-64 -135L128 135' stroke='%23b08a4c' stroke-width='3'/%3E%3Cpath d='M-64 135L128 -135M-64 225L128 -45M-64 -45L128 225M-64 -135L128 135' stroke='%23fcf9f3' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --hero-screen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='168' viewBox='0 0 108 168'%3E%3Cg fill='none' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M-16.5 0.5H17.5V122.5H-16.5ZM-16.5 168.5H17.5V290.5H-16.5ZM37.5 -83.5H71.5V38.5H37.5ZM37.5 84.5H71.5V206.5H37.5ZM91.5 0.5H125.5V122.5H91.5ZM91.5 168.5H125.5V290.5H91.5ZM0.5 -45.5V0.5M0.5 122.5V168.5M-36.5 145.5H37.5M17.5 19.5H37.5M17.5 103.5H37.5M54.5 38.5V84.5M17.5 61.5H91.5M71.5 19.5H91.5M71.5 103.5H91.5M108.5 -45.5V0.5M108.5 122.5V168.5M71.5 145.5H145.5' stroke='%23b08a4c' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  --hero-screen-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='132' viewBox='0 0 84 132'%3E%3Cg fill='none' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M-12.5 0.5H13.5V96.5H-12.5ZM-12.5 132.5H13.5V228.5H-12.5ZM29.5 -65.5H55.5V30.5H29.5ZM29.5 66.5H55.5V162.5H29.5ZM71.5 0.5H97.5V96.5H71.5ZM71.5 132.5H97.5V228.5H71.5ZM0.5 -35.5V0.5M0.5 96.5V132.5M-28.5 114.5H29.5M13.5 15.5H29.5M13.5 81.5H29.5M42.5 30.5V66.5M13.5 48.5H71.5M55.5 15.5H71.5M55.5 81.5H71.5M84.5 -35.5V0.5M84.5 96.5V132.5M55.5 114.5H113.5' stroke='%23b08a4c' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Under everything on the page (z-index -1 on the root's canvas), over the first screen only: it fades out across the
   foot of the hero and the top of Findings (from 260px above the end of the first screen to 160px below it), and the
   rest of the page is plain ivory. The tile starts at the top of the page, centred, so a column always runs down the
   middle. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vh + 160px);
  height: calc(100svh + 160px);
  z-index: -1;
  pointer-events: none;
  opacity: .26;
  background-image: var(--hero-screen);
  background-size: 108px 168px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 420px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 420px), transparent);
}

/* ---------- Hero: the question on the left, the model to try on the right, a cue to scroll ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding-block: 24px 20px;
}

/* Full column width (a flex item with auto margins would otherwise shrink to its content). */
.hero-main {
  width: calc(100% - 2 * var(--gutter));
  margin-block: auto;
}

.hero-inner { display: grid; gap: 40px; }

.hero h1 {
  font-size: clamp(28px, calc((100vw - 2 * var(--gutter)) / 16.2), 52px);   /* tablets: each clause of the headline on one line (the wider measures 15.9em; 9 Oct 2026) */
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.h1-line { display: block; }
.h1-in { display: inline-block; }   /* so each line can rise on its own */

/* "predict oil prices?" in gold, like gilt lettering: a little lighter at the top than at the foot, with one slow
   glint across it as the page opens. Both golds hold 3:1 on ivory at this size (#a8803f 3.3:1, #8a672b 4.8:1).
   The padding takes in the descenders and the "?", which the gradient must reach. Plain #9a7638 without clipping. */
.h1-gold { color: #9a7638; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .h1-gold {
    padding: .1em .06em .14em 0;
    margin: -.1em -.06em -.14em 0;
    background-image:
      linear-gradient(100deg, transparent 45%, rgba(255, 248, 228, .75) 50%, transparent 55%),
      linear-gradient(180deg, #a8803f 12%, #8a672b 88%);
    background-size: 250% 100%, 100% 100%;
    background-position: 0 0, 0 0;   /* the glint rests off the right edge */
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Desktop: the question centred over the post box (owner, 2 Oct: tried side by side again, "I liked it more when they
   were vertically stacked"). The block hangs from a fixed top (where centring puts it) rather than being centred, so a
   long post or the model's answer only grows the box downwards and nothing else moves. --hero-h is the block's height
   before anything is typed: the two lines of the question, the gap, and --demo-h, the row of posts (its margin, its 12px
   top padding and the 230px cards). */
@media (min-width: 1069px) {
  .hero {
    --h1: clamp(52px, 4.6vw, 68px);
    --title-gap: 44px;
    --demo-h: calc(clamp(28px, 5vh, 56px) + 242px);   /* the row of posts: its margin, 12px padding and 230px cards (its 36px shadow room left out) (the headers pass, 7 Oct 2026) */
    --hero-h: calc(2.12 * var(--h1) + var(--title-gap) + var(--demo-h));
    padding-block: 24px 28px;
    min-height: 0;   /* owner, 9 Oct 2026: "remove the arrow and lift up 'What I found'": the hero ends under the row of posts, so "What I found" sits about 100px under the cards (it was a screen down, under the chevron) */
  }

  /* The block's middle on 48% of the window, its optical centre (the header above it is empty but for the byline, so
     centring between header and cue read low); on short windows it rests 24px under the header. */
  .hero-main {
    margin-top: max(0px, calc(48vh - var(--hero-h) / 2 - var(--header-h) - 24px));
    margin-top: max(0px, calc(48svh - var(--hero-h) / 2 - var(--header-h) - 24px));
    margin-bottom: auto;
  }

  .hero-inner {
    max-width: 1240px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: var(--title-gap);
  }

  .hero h1 {
    font-size: var(--h1);
    line-height: 1.06;
    line-height: round(nearest, 1.06em, 1px);   /* whole pixels, so the page under the hero starts on one */
    text-align: center;
    text-wrap: nowrap;
  }

  .h1-line { white-space: nowrap; }

  .hero .lane { justify-self: start; }   /* the row of posts (7 Oct 2026) reaches a gutter past the 1240px block on both sides, not off-centre */
  /* The post box a size up on a desktop (owner, 2 Oct: "a bit bigger"): roomier, a taller box to write in. Under the
     model's result since 7 Oct 2026 (.model-demo); it was the hero's. */
  .model-demo .truth-card { padding: 24px 26px 18px; }
  .model-demo .avatar { width: 48px; height: 48px; }
  .model-demo .who-name { font-size: 17px; line-height: 22px; }
  .model-demo .who-handle { font-size: 15px; line-height: 20px; }
  .model-demo .composer-text { min-height: 112px; margin-top: 14px; font-size: 18px; line-height: 28px; }
  .model-demo .post-src { padding-top: 6px; }   /* "Truth Social" on the name's baseline */
  .model-demo .composer-credit { margin-top: 16px; text-align: center; color: var(--ink-3); letter-spacing: 0; }   /* 16px under the box, as the other captions under their sheets (the headers pass, 7 Oct 2026) */
  .model-demo .composer-credit.composer-claim { padding-left: 0; }
}

/* The page opens in order: the question line by line, out of a soft blur; then the post box; then the cue. */
@media (prefers-reduced-motion: no-preference) {
  .h1-in { animation: hero-in 1.4s cubic-bezier(.16, 1, .3, 1) .1s both; }
  .h1-in.h1-gold { animation: hero-in 1.4s cubic-bezier(.16, 1, .3, 1) .28s both, gilt 2.6s cubic-bezier(.45, 0, .2, 1) 1.2s both; }
  .hero .composer-col, .hero .lane { animation: rise-in 1.3s cubic-bezier(.16, 1, .3, 1) .5s both; }
  .scroll-cue > * { animation: rise-in 1.3s cubic-bezier(.16, 1, .3, 1) 1.2s both; }   /* not on the cue itself: main.js fades it on scroll */
}

/* Desktop: the same order in one quick beat, all settled by about 1.2s and the chevron by 1.6s. A shorter rise and a
   lighter blur on --ease, which does half its work in the first fifth, so the opening is as quick and there is no long
   still tail. The chevron fades in where it stands rather than rising at the reader; the glint follows at 1s. */
@media (min-width: 1069px) and (prefers-reduced-motion: no-preference) {
  .h1-in { animation: hero-in-desk var(--t-enter) var(--ease) .1s both; }
  .h1-in.h1-gold { animation: hero-in-desk var(--t-enter) var(--ease) .22s both, gilt 2.6s cubic-bezier(.45, 0, .2, 1) 1s both; }
  .hero .composer-col, .hero .lane { animation: rise-in-desk var(--t-enter) var(--ease) .35s both; }
  .scroll-cue > * { animation: quiet-in .6s var(--ease) 1s both; }

  @keyframes hero-in-desk { from { opacity: 0; transform: translateY(.18em); filter: blur(8px); } }
  @keyframes rise-in-desk { from { opacity: 0; transform: translateY(12px); } }
}

@keyframes hero-in { from { opacity: 0; transform: translateY(.28em); filter: blur(12px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes gilt { from { background-position: 100% 0, 0 0; } }

.status { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.status:not(:empty) { margin-top: 28px; }   /* stays in the accessibility tree so the live region announces */

.lead-up { color: var(--up); font-weight: 600; white-space: nowrap; }   /* the colour key never breaks */
.lead-down { color: var(--down); font-weight: 600; white-space: nowrap; }

/* The row of his posts is not on the page since the thirty-second revision (the post box took its place); its rules and
   initLane stay for now. The row runs from the middle of "Sentiment" to the middle of "direction" (main.js measures both words and sets
   --lane-start and --lane-width). Without those it spans the screen. The track holds the posts twice and slides by
   exactly half, so the loop is seamless. */
.lane {
  touch-action: pan-y pinch-zoom;   /* sideways swipes slide the row; up and down still scroll the page; pinch still zooms */
  margin-top: clamp(28px, 5vh, 56px);
  margin-left: var(--lane-start, calc(-1 * var(--gutter)));
  width: var(--lane-width, calc(100% + 2 * var(--gutter)));
  overflow: hidden;
  padding-block: 12px 36px;      /* room for the card shadows */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: drift var(--drift-dur, 180s) linear infinite;
}

/* It stops while a post is open, while a keyboard user is on a card, under a finger or a drag, and off screen. */
.lane.is-dragging { cursor: grabbing; }
.lane.is-dragging .post-open { cursor: grabbing; }

.is-reading .track,
.lane:has(.post-open:focus-visible) .track,
.lane.is-away .track,
.lane.is-pressed .track,
.lane.is-dragging .track { animation-play-state: paused; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.float {
  flex: none;
  width: var(--card-w);
  margin-right: var(--card-gap);  /* a margin, not a flex gap, so both halves of the track are exactly equal */
  animation: post-in .5s var(--ease) both;   /* on the cards, not the track: the track's one animation is the drift */
}

@keyframes post-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ---------- Post card, styled like a shared post ---------- */

.post {
  position: relative;
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .post:hover { box-shadow: var(--shadow-card-hover); }
}

.post-head { display: flex; align-items: center; gap: 12px; }

.post-src {
  margin-left: auto;
  align-self: flex-start;
  padding-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-3);
  white-space: nowrap;
}
/* The demo's corner says what it is (owner, 13 Oct 2026: "Make the demo box visibly hypothetical"): a small gold label in
   place of "Truth Social", on every width (phones hide the plain source label). */
.post-src.post-src--hypo { display: inline-block; padding: 2px 8px; border: 1px solid rgba(154, 118, 56, .4); border-radius: 999px; background: #fbf3e2; color: #8a672b; font-size: 9.5px; line-height: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }   /* smaller (owner, 13 Oct 2026) */
.model-demo .post-src.post-src--hypo { padding-top: 2px; }
@media (max-width: 734px) {
  .model-demo .truth-card { position: relative; }
  .model-demo .post-src.post-src--hypo { position: absolute; top: 9px; right: 10px; margin: 0; padding: 1px 6px; font-size: 8.5px; line-height: 13px; }   /* phones: in the card's top right corner, inside the frame and small, clear of his name (owner, 13 Oct 2026: "on the right side corner. even if it gets smaller") */
}
@media (max-width: 374px) {
  .model-demo .truth-card { padding-top: 28px; }   /* the narrowest phones: his name a few px lower, under the corner label */
}

.post-text {
  margin-top: 14px;
  font-size: 17px;
  line-height: 26px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

/* The whole card opens the reader. */
.post-open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
}

/* "Scroll to see what I found", in the serif of the quote, over a slender gold arrow. Every few seconds a bead of
   light runs down the stem and the head brightens as it lands. The whole cue fades as the page scrolls (main.js). */
.scroll-cue {
  align-self: center;
  margin-top: 24px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 24px 4px;
  color: var(--ink-2);
  font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  transition: color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .scroll-cue:hover { text-decoration: none; color: var(--ink); }
}

.cue-arrow { display: flex; flex-direction: column; align-items: center; }

.cue-line {
  position: relative;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: linear-gradient(rgba(154, 118, 56, .12), rgba(154, 118, 56, .7));
}

.cue-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  background: linear-gradient(rgba(154, 118, 56, 0), #9a7638);
  transform: translateY(-100%);
}

/* The head's point meets the foot of the stem. */
.cue-head {
  margin-top: -7px;
  fill: none;
  stroke: #9a7638;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}

@media (prefers-reduced-motion: no-preference) {
  .cue-line::after { animation: cue-fall 3.2s cubic-bezier(.65, 0, .35, 1) 2.2s infinite; }
  .cue-head { animation: cue-land 3.2s ease 2.2s infinite; }
}

/* Desktop (owner, 2 Oct: "remove… the scroll to see what… just put a small tiny wide arrow down"): only a wide,
   shallow gold chevron; the words stay for screen readers. Elsewhere the chevron is not drawn. */
.cue-wide { display: none; }

@media (min-width: 1069px) {
  .scroll-cue { display: none; }   /* no chevron on a desktop since 9 Oct 2026 (owner: "remove the arrow"): "What I found" sits right under the posts instead */
  .scroll-cue .cue-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .scroll-cue .cue-arrow { display: none; }
  .cue-wide { display: block; fill: none; stroke: #9a7638; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: .85; transition: opacity var(--t-quick) var(--ease); }
}

/* Under a mouse the chevron comes up to full strength, the cue's only hover. */
@media (min-width: 1069px) and (hover: hover) and (pointer: fine) {
  .scroll-cue:hover .cue-wide { opacity: 1; }
}

@keyframes cue-fall {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(234%); }   /* past the foot of the 56px stem */
}

@keyframes cue-land {
  0%, 28% { opacity: .8; transform: none; }
  40% { opacity: 1; transform: translateY(2px); }
  64%, 100% { opacity: .8; transform: none; }
}

/* ---------- Avatar and name (cards and reader) ---------- */

.avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--green-deep);
  color: var(--bg);
}

.avatar--lg { width: 48px; height: 48px; }

.avatar-mono { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .04em; }

.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;   /* portrait photo: keep the face centred in the circle */
  opacity: 0;
}

.avatar.has-photo img { opacity: 1; }

.who { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; }

.who-name { font-size: 16px; line-height: 21px; font-weight: 600; }

.who-handle { font-size: 14px; line-height: 19px; color: var(--ink-3); }

/* ---------- Findings: "Model performance" with its score, then "Market reaction" ---------- */

/* Plain ivory, like the rest of the page below the first screen (the owner's redesign, 1 Oct): no band, no pattern,
   all text in ink. Left-aligned in the hero's 1240px block, so "Findings" starts where the question does; the text
   column is 640px. */
.report { padding-block: 112px 128px; }   /* plain ivory: the page itself, the lattice faded out above */

.report-inner { max-width: 1240px; margin-inline: auto; }

.report h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.035em;
}

.report-part { max-width: 640px; }
.report-part + .report-part { margin-top: 72px; }

.report-sub {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}

.report h2 + .report-part .report-sub { margin-top: 14px; }   /* the first part reads as the heading's subtitle */
/* The finding, as the headline over its chart: centred like the chart and the lines under it, on one line (it wraps,
   balanced, only on a narrow screen), in the owner's green #015c4d (7.3:1 on ivory). */
.report-finding {
  margin: 44px auto 0;
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.03em;
  text-align: center;
  text-wrap: balance;
  color: #015c4d;
}

.report-finding + .reaction, .finding-sub + .reaction { margin-top: 30px; }

/* "Here is my learnings" (owner, 7 Oct 2026) over the first finding: the scroll cue's serif, quiet, centred like the
   headline, on every width; it names the section for screen readers too (it was "Findings", hidden). */
#report-title { margin: 0 auto 22px; font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 20px; line-height: 26px; font-weight: 400; letter-spacing: 0; text-align: center; color: var(--ink-3); }

/* Desktop (owner, 2 Oct: "remove Findings… put the 'Oil moves..' more up"): the section heading is for screen readers
   only, and the finding's headline opens the section, 64px under its top. */
@media (min-width: 1069px) {
  #findings { padding-top: 40px; }   /* owner: "lift the Oil thing just a tiny bit more" (was 64px) */
  #findings .report-part:first-of-type > .report-finding { margin-top: 0; }
  .report-finding { line-height: 1.12; line-height: round(nearest, 1.12em, 1px); }   /* a whole-pixel line, so the chart and everything under it start on whole pixels (a browser without round() keeps 1.12) */
}

.report-text { margin-top: 16px; font-size: 19px; line-height: 30px; color: var(--ink); text-wrap: pretty; }
.report-lead { font-weight: 600; color: var(--ink); }   /* the model's result, in bold */

/* The score as an engraved gauge, like the scale on a fine instrument: a gold hairline with a tick every 10% and taller
   ones at 0, 50 and 100%, an onyx line drawn along it to 66.9%, and a cut onyx gem set in gold at its tip. Over the gem,
   on a gold leader, the figure in the serif with the count beside it; the scale's numbers in small tracked type under
   it. --y is the scale's line; the ticks hang from it. */
.score { max-width: 460px; margin: 28px 0 0; }   /* a compact instrument, not a full-width bar */

.score-scale { --y: 44px; --gold: rgba(154, 118, 56, .55); position: relative; height: 70px; }

.score-rule { position: absolute; top: var(--y); left: 0; right: 0; height: 1px; background: var(--gold); }

.score-rule::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 1px, transparent 1px) 0 0 / 10% 100% repeat-x;
}

/* --x is 0, 50 or 100: the 1px tick lands inside the scale at both ends. */
.score-tick {
  position: absolute;
  top: var(--y);
  left: calc(var(--x) * 1% - var(--x) * .01px);
  width: 1px;
  height: 9px;
  background: rgba(154, 118, 56, .9);
}

.score-fill {
  position: absolute;
  top: calc(var(--y) - .5px);
  left: 0;
  width: var(--at);
  height: 2px;
  background: linear-gradient(90deg, rgba(38, 38, 38, .12), #262626 70%, #141414);
}

.score-leader {
  position: absolute;
  top: calc(var(--y) - 14px);
  left: var(--at);
  width: 1px;
  height: 8px;
  margin-left: -.5px;
  background: rgba(154, 118, 56, .8);
}

.score-gem {
  position: absolute;
  top: calc(var(--y) + .5px);
  left: var(--at);
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #6b6b6b 0%, #262626 48%, #0b0b0b 100%);
  box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px rgba(154, 118, 56, .75), 0 4px 10px -3px rgba(15, 46, 41, .4);
}

/* The figure is centred on the gem; the count hangs to its right, on its baseline. */
.score-callout {
  position: absolute;
  bottom: calc(100% - var(--y) + 17px);
  left: var(--at);
  transform: translateX(-50%);
  white-space: nowrap;
}

.score-num {
  font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.score-num { display: block; }

.score-of {
  position: absolute;
  bottom: 2px;
  left: calc(100% + 8px);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.score-end {
  position: absolute;
  top: calc(var(--y) + 13px);
  left: calc(var(--x) * 1%);
  transform: translateX(calc(var(--x) * -1%));   /* 0% from the left end, 50% centred, 100% to the right end */
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.score-note { margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--ink-3); }

/* The first time it is half in view (main.js): the line runs out over 1.8s with the gem on its tip, the figure fades
   in and counts up, and the gold leader joins them once the gem has arrived. On screens only, so paper shows it done. */
@media screen and (prefers-reduced-motion: no-preference) {
  .score.is-armed .score-fill { width: 0; }
  .score.is-armed .score-gem { left: 0; }
  .score.is-armed .score-callout,
  .score.is-armed .score-leader { opacity: 0; }
  .score.is-in .score-fill { width: var(--at); transition: width 1.8s cubic-bezier(.16, 1, .3, 1) .15s; }
  .score.is-in .score-gem { left: var(--at); transition: left 1.8s cubic-bezier(.16, 1, .3, 1) .15s; }
  .score.is-in .score-callout { opacity: 1; transition: opacity .8s ease .2s; }
  .score.is-in .score-leader { opacity: 1; transition: opacity .6s ease 1.3s; }
}

/* "Read more" under the score: a row on a gold hairline with a plus that turns, like the reader's (main.js). */
.read-more {
  width: 100%;
  min-height: 52px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(154, 118, 56, .35);
  background: none;
  color: var(--ink);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: left;
}

.read-more::after { content: "+"; content: "+" / ""; font-size: 22px; line-height: 1; font-weight: 400; transition: transform .2s var(--ease); }
.read-more[aria-expanded="true"]::after { transform: rotate(45deg); }

@media (hover: hover) and (pointer: fine) {
  .read-more:hover { color: #9a7638; }
}

.report-more + .read-more { margin-top: 0; }   /* "Read method" and "Limitations" read as one list */
.report-more { padding-bottom: 14px; }
.report-more p { font-size: 16px; line-height: 25px; color: var(--ink-2); text-wrap: pretty; }
.report-more p + p { margin-top: 10px; }
.report-more:not([hidden]) { animation: answer-in .3s ease; }

/* From 3,861 posts to the 198 in the dataset: each step a figure in the serif, what it counts, and an onyx line on a
   gold hairline, all drawn to one scale (3,861 is the full width), so the drop to the oil posts shows at a glance. */
.funnel { margin: 18px 0 20px; }

.funnel-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.funnel-steps li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "n k" "n bar";
  column-gap: 16px;
  row-gap: 6px;
  align-items: baseline;
}

.funnel-n {
  grid-area: n;
  font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 26px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

.funnel-k { grid-area: k; font-size: 14px; line-height: 20px; color: var(--ink-2); text-wrap: pretty; }

.funnel-bar { grid-area: bar; position: relative; height: 2px; background: linear-gradient(rgba(154, 118, 56, .45), rgba(154, 118, 56, .45)) 0 50% / 100% 1px no-repeat; }

.funnel-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: max(2px, calc(var(--n) / 3861 * 100%));
  background: #262626;
}

/* The model's settings, name and value, in two columns. */
.settings-k { margin-top: 18px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.settings { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }

.settings > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(154, 118, 56, .25); }

.settings dt { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 19px; color: var(--ink-2); }

.settings dd { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ink); }

@media (max-width: 734px) {
  .report { padding-block: var(--report-top) 96px; }   /* --report-top: the phone :root block, shared with the hero's peek */
  .report-text { font-size: 17px; line-height: 27px; }
  .score-of { left: auto; right: calc(100% + 10px); }   /* the count on the figure's left, so it never runs past 100% */
}

/* Windows contrast themes drop the gauge's backgrounds and shadows: draw it in the system colours instead. */
@media (forced-colors: active) {
  .score-rule, .score-tick, .score-leader, .score-gem { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .score-rule::after { forced-color-adjust: none; background: linear-gradient(90deg, CanvasText 1px, transparent 1px) 0 0 / 10% 100% repeat-x; }
  .score-fill { forced-color-adjust: none; background: Highlight; }
}

/* ---------- Findings: the market's reaction around his posts, second by second ---------- */

/* The chart takes the whole 1240px block; its sentence keeps the 640px measure. */
.report-part--wide { max-width: none; }
.report-part--wide > .report-text { max-width: 640px; }

/* ---------- Findings: "A model better than guessing" ---------- */

/* Centred on the 1240px block like the chart above it: the headline and its sentence. Owner, 2 Oct: the sentence in
   the dimmed grey of the note under the bar charts (.rs-foot), a bit bigger than it, on a wider measure than the 640px
   part, so it sits in two or three lines. */
.report-part--model { max-width: 760px; margin-inline: auto; }
.report-text.model-text { max-width: 760px; margin: 20px auto 0; font-size: 14px; line-height: 22px; color: var(--ink-4); text-align: center; text-wrap: balance; }
.report-text.finding-sub { margin-top: 14px; }
/* "Time is key" (owner, 7 Oct 2026): the F1 score by entry delay on a white sheet like the chart's, drawn by main.js initTiming. */
.timing { margin: 28px 0 0; }
.timing-card { height: 250px; padding: 16px 20px 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 40px -28px rgba(38, 38, 38, .3); }
.timing-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.timing-note { margin-top: 16px; font-size: 13px; line-height: 19px; letter-spacing: 0; color: var(--ink-3); text-align: center; text-wrap: balance; }   /* Inter's own spacing, as the other captions (the headers pass, 7 Oct 2026) */
.tm-grid { stroke: rgba(38, 38, 38, .09); }
.tm-axis { stroke: rgba(38, 38, 38, .22); }
.tm-yaxis { fill: none; stroke: rgba(38, 38, 38, .3); stroke-linejoin: round; }   /* 0.40 to 1.00, the stretch above 0.60 a zigzag (owner, 9 Oct 2026) */
.tm-floor { stroke: #9a7638; }   /* guessing, the floor the line stops at (owner, 7 Oct 2026: "after guessing its like a dead end") */
.tm-hatch { stroke: #d3c4a8; stroke-width: 1.25; }   /* the ground under the floor: the page's sand, hatched */
.tm-stop { stroke: #015c4d; stroke-width: 2; stroke-linecap: round; }   /* the end bar where the line stops */
.tm-trail { fill: none; stroke: #9d9384; stroke-width: 1.5; stroke-dasharray: 1.5 4.5; stroke-linecap: round; }   /* the same series, on in the ground */
.tm-dot.tm-dot--under { fill: #fff; stroke: #8a8378; stroke-width: 1.5; }
.tm-value.tm-value--under { fill: #8a8378; }
.tm-floor-label { font-size: 11px; font-weight: 500; fill: #8a672b; letter-spacing: .02em; }
.tm-ground-label { font-size: 11px; font-weight: 500; fill: #8a8378; letter-spacing: .02em; }
.tm-line { fill: none; stroke: #015c4d; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tm-dot { fill: #015c4d; stroke: #fff; stroke-width: 2; }
.tm-label { font-size: 11px; font-weight: 500; fill: var(--ink-4); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tm-value { font-size: 12px; font-weight: 600; fill: var(--ink); letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* The dead end moves, lightly (owner, 9 Oct 2026: "some light animation on the dead end"): the hatch slides one repeat
   (6√2 px) to the right every 1.6s, seamlessly, and the trail's dots run on down into the ground, only while the chart
   is on screen (main.js sets .is-live). Still where motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .timing-card.is-live .tm-drift { animation: tm-drift 1.3s linear infinite; }
  .timing-card.is-live .tm-trail { animation: tm-march .7s linear infinite; }
}
@keyframes tm-drift { to { transform: translateX(11.3137px); } }   /* one repeat: the lines 8px apart at 45° (main.js) */
@keyframes tm-march { to { stroke-dashoffset: -6; } }
.tm-ground-label, .tm-value.tm-value--under { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }   /* a thin white halo over the darker hatch (9 Oct 2026) */
   /* the sentence under the first finding (owner, 7 Oct 2026: "this means, there is information to trade on"), closer to its headline than the model's is */

/* Owner, 2 Oct: "lift the method up a bit" (twice): Findings' foot, the gap over Method, is 48px (was 128px; 64px on a
   phone, the section break, was 96px). Below the desktop, "Method" is a bit smaller than the other section headings (was 36-56px). */
#findings { padding-bottom: 48px; }
@media (min-width: 1069px) {
  #findings { padding-bottom: 56px; }   /* to the quote's band (owner, 9 Oct 2026: the quote after Time is key; "there is very much spaces") */
}
#method-title, #limits-title { font-size: clamp(30px, 3.3vw, 46px); }

@media (max-width: 734px) {
  /* the model sentence centred under its centred title, as on the desktop (owner, 3 Oct 2026: "center the text under a model better than guessing") */
  #findings { padding-bottom: 64px; }   /* the section break over "Method": wider than a part's 48 above it, so Method starts where it did */
}

/* Desktop: the second finding is a step under the chart's headline, at the title size of "Method" and "Limitations",
   and sits 48px under the figures, the same break as Findings to Method below it. */
@media (min-width: 1069px) {
  #findings .report-part--model { margin-top: 40px; }   /* its h3's 44px collapses into this; 40 since 9 Oct 2026 (owner: "more compact") */
  .report-text.model-text { margin-top: 14px; }
  .timing { max-width: 600px; margin: 20px auto 0; }   /* narrower (owner, 9 Oct 2026: "make the time is key graph narrower"; it was the column's 760px) */
  .timing-card { height: 240px; }
  .timing-note { margin-top: 12px; }
  #model-title, #timing-title { font-size: clamp(24px, 2.4vw, 34px); }   /* the page reads hero > lead finding > this, Method, Limitations */
  .model-text { letter-spacing: -.006em; }   /* 14px text at Inter's own spacing for its size, not the 18px body's */
  .model-text i { font-synthesis: style; }   /* Inter has no italic file here: the browser slants the statistic's p */
  .report-text.finding-sub { font-size: 15px; line-height: 23px; letter-spacing: -.009em; color: var(--ink-3); }   /* each finding's sentence, a step above the model paragraph (14/22, --ink-4): the Limitations note's size (the headers pass, 7 Oct 2026) */
  .nw-d { white-space: nowrap; }   /* "oil-related" never splits at its hyphen in the centred lines */
}

/* On a white sheet on the ivory page: black text, the axis text in deep green #265b4e (from the owner's reference),
   the rules and the post's line in gold, and each line in teal if oil rose in the 30 s after, crimson if it fell. The
   post it picks lies beside it on the Truth Social card; a toggle above swaps in the same seconds a week before. */
.reaction {
  --r-text: var(--ink);
  --r-axis: #265b4e;                  /* the axis text, in the owner's green */
  --r-grid: rgba(154, 118, 56, .22);  /* the plot's rules and the post's line in the headline's gold */
  --r-zero: rgba(154, 118, 56, .6);
  --r-post: #9a7638;                  /* 4.2:1 on the white sheet */
  --r-up: #008080;                    /* teal: oil rose in the 30 s after the post; 4.8:1 on white */
  --r-down: #dc143c;                  /* crimson: it fell; 5.0:1 */
  --r-flat: #8f8a80;                  /* it ended where it started; 3.4:1 */
  --r-up-strong: #006464;             /* the medians, a shade deeper than the lines under them */
  --r-down-strong: #a8102e;
  --r-faint: .4;
  --r-dim: .08;
  --r-gem-ring: #fff;   /* the chart's white sheet */
  --r-tip-bg: #262626;
  --r-tip-fg: #faf6ee;
  margin: 20px 0 0;
  display: grid;
  /* The chart and the lines under it centred between two equal side columns; a picked post appears in the right one,
     which is why they never drop under 200px (on a narrower screen the chart gives way instead). Nothing moves. */
  grid-template-columns: minmax(200px, 1fr) minmax(0, 760px) minmax(200px, 1fr);
  grid-template-rows: auto auto auto auto 1fr;      /* the post spans the chart's rows, so the lines under it stay put */
  grid-template-areas: ". views ." ". card post" ". take post" ". note post" ". stats post";
  gap: 14px 24px;
  align-items: start;
}

/* Above the chart's top right corner: his posts, or the same seconds a week before each one. A white pill like the
   sheet below it, the chosen half filled in the axes' green (white on it, 7.8:1). */
.reaction-views {
  grid-area: views;
  justify-self: end;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 8px 20px -14px rgba(38, 38, 38, .3);
}

.reaction-view {
  min-height: 32px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

.reaction-view[aria-pressed="true"] { background: #265b4e; color: #fff; cursor: default; }
.reaction-view:focus-visible { outline: 2px solid #265b4e; outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .reaction-view[aria-pressed="false"]:hover { background: rgba(38, 91, 78, .07); color: var(--ink); }
}

/* The chart on a white sheet (the owner's ask), edged and lifted like the Truth Social card beside it. */
.reaction-card {
  grid-area: card;
  padding: 20px 22px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 40px -28px rgba(38, 38, 38, .3);
}

.reaction-chart { position: relative; height: 344px; border-radius: 12px; touch-action: manipulation; }
.reaction-chart:focus-visible { outline: 1px solid var(--r-post); outline-offset: 6px; }
.reaction-chart.is-over-line { cursor: pointer; }

.reaction-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }

.r-grid { stroke: var(--r-grid); stroke-width: 1; }
.r-zero { stroke: var(--r-zero); }
.r-post { stroke: var(--r-post); stroke-width: 1; }

.r-axis { fill: var(--r-axis); font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.r-time { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }   /* 30 seconds before · the post · 30 seconds after */

/* One fine line per post; the hovered or picked one comes up at full strength and the rest step back. */
.r-line { fill: none; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; opacity: var(--r-faint); transition: opacity .25s ease, stroke-width .25s ease; }
.r-line.is-up { stroke: var(--r-up); }
.r-line.is-down { stroke: var(--r-down); }
.r-line.is-flat { stroke: var(--r-flat); }
.reaction-chart.is-focused .r-line { opacity: var(--r-dim); }
.reaction-chart .r-line.is-hot { opacity: .95; stroke-width: 1.75; }
.reaction-chart .r-line.is-picked { opacity: 1; stroke-width: 2.25; }

.r-median { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; transition: opacity .25s ease; }
.r-median.is-up { stroke: var(--r-up-strong); }
.r-median.is-down { stroke: var(--r-down-strong); }
.reaction-chart.is-focused .r-median { opacity: .3; }

/* Phones only (main.js draws them there): a white casing under each median, so it reads through the dense band of
   lines, and under the picked line, so the opened post's line does too. */
.r-case { fill: none; stroke: var(--r-gem-ring); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; opacity: .9; pointer-events: none; transition: opacity .25s ease; }
.r-case-pick { stroke-width: 5; }
.reaction-svg.is-waiting .r-case,
.reaction-chart.is-focused .r-case:not(.r-case-pick) { opacity: 0; }

/* The picked post's ends, as small gems. */
.r-gem { stroke: var(--r-gem-ring); stroke-width: 1.5; }
.r-gem.is-up { fill: var(--r-up); }
.r-gem.is-down { fill: var(--r-down); }
.r-gem.is-flat { fill: var(--r-flat); }

/* Before it is in view the plot waits empty. Then a gold rule with a sheen behind it crosses from 30 seconds before
   to 30 seconds after, and the lines appear in its wake (main.js); with reduced motion they fade in. */
.reaction-svg.is-waiting .r-line,
.reaction-svg.is-waiting .r-median,
.reaction-svg.is-waiting .r-sweep,
.r-sweep.is-done { opacity: 0; }
.r-sweep { pointer-events: none; transition: opacity .6s ease; }
.r-sweep-line { stroke: var(--r-post); stroke-width: 1.5; }
.r-sheen-from { stop-color: var(--r-post); stop-opacity: 0; }
.r-sheen-to { stop-color: var(--r-post); stop-opacity: .16; }

.reaction-tip {
  position: absolute;
  z-index: 2;
  padding: 6px 11px;
  border-radius: 9px;
  background: var(--r-tip-bg);
  color: var(--r-tip-fg);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  font-variant-numeric: tabular-nums;
}

/* The picked post; empty until one is picked. */
.reaction-post { grid-area: post; }

/* The post as it looks on Truth Social (the owner's pick of four): a white card with a light grey edge, a hairline under
   his name and handle, the text a size up, and Truth Social's purple (#5448ee, 5.9:1 on white) for its name and the
   link. Everything below the header keeps a 20px inset. Let go, it fades and drops a little (main.js). */
.rp-card {
  position: relative;
  padding: 0 0 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .1), 0 14px 32px -24px rgba(38, 38, 38, .3);
  animation: answer-in .3s ease;
}

.rp-card.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }

.rp-card .post-head { padding: 16px 20px 14px; border-bottom: 1px solid rgba(15, 23, 42, .08); }

.rp-card .post-src { font-size: 12px; font-weight: 600; color: #5448ee; }

.rp-card > .rp-time,
.rp-card > .rp-link,
.rp-card > .rp-values,
.rp-card > .rp-meta { margin-left: 20px; margin-right: 20px; }

.rp-time { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.rp-card .who-handle { font-size: 14px; }

.rp-text {
  margin: 14px 20px 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
}

.rp-link { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-top: 4px; font-size: 14px; font-weight: 600; color: #5448ee; }   /* Truth Social's purple */
button.rp-link { padding: 0; border: 0; background: none; }   /* "Read that post", on a window a week before */

/* A window a week before has no post: the chart's green label over what it is, then its time a size up. */
.rw-head { padding: 16px 20px 14px; border-bottom: 1px solid rgba(15, 23, 42, .08); }
.rw-label { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #265b4e; }
.rw-title { margin-top: 6px; font-size: 16px; line-height: 21px; font-weight: 600; color: var(--ink); }
.rp-week > .rp-time { margin-top: 14px; font-size: 15px; line-height: 20px; color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .rp-link:hover { color: #3f34c9; }
}

/* The two moves: 30 s before the post and 30 s after, as figures in the serif, in ink, each with a small triangle in
   the chart's colours: teal pointing up for a rise, crimson pointing down for a fall. */
.rp-values {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, .08);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rp-k { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.rp-v {
  margin-top: 6px;
  font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.rp-v.is-up::before,
.rp-v.is-down::before {
  content: "";
  display: inline-block;
  width: .32em;
  height: .28em;
  margin-right: .2em;
  vertical-align: .16em;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.rp-v.is-up::before { background: var(--r-up); }
.rp-v.is-down::before { background: var(--r-down); clip-path: polygon(0 0, 100% 0, 50% 100%); vertical-align: .1em; }

.rp-meta { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; line-height: 17px; color: var(--ink-3); }

/* Beside the centred chart the post has the right-hand column (216px at every desktop width), so its card comes a
   size down: a smaller picture and name, the text at 13px, its small lines at 12 and 11, and the two moves as a two-row
   ledger. Stacked (tablet, phone) it keeps its full size. */
@media (min-width: 1069px) {
  .reaction-post .rp-card { padding-bottom: 12px; border-radius: 12px; }
  .reaction-post .post-head { gap: 9px; padding: 12px 14px 10px; }
  .reaction-post .avatar { width: 32px; height: 32px; }
  .reaction-post .who-name { font-size: 13px; line-height: 18px; }
  .reaction-post .who-handle { font-size: 12px; line-height: 16px; }
  .reaction-post .post-src { display: none; }   /* the link under the text names Truth Social */
  .reaction-post .rp-text { margin: 10px 14px 0; font-size: 13px; line-height: 19px; -webkit-line-clamp: 10; line-clamp: 10; }
  .reaction-post .rp-card > .rp-time,
  .reaction-post .rp-card > .rp-link,
  .reaction-post .rp-card > .rp-values,
  .reaction-post .rp-card > .rp-meta { margin-left: 14px; margin-right: 14px; }
  .reaction-post .rp-time { margin-top: 8px; font-size: 12px; line-height: 16px; }
  .reaction-post .rp-link { min-height: 30px; margin-top: 2px; font-size: 12px; }
  .reaction-post .rp-values { margin-top: 4px; padding-top: 2px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reaction-post .rp-value { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 0; }
  .reaction-post .rp-value + .rp-value { border-top: 1px solid var(--sheet-edge); }
  .reaction-post .rp-k { font-size: 11px; line-height: 14px; letter-spacing: 0; text-transform: none; white-space: nowrap; }   /* in sentence case, so the unit stays "30 s"; one line beside its figure */
  .reaction-post .rp-v { margin-top: 0; font-size: 17px; white-space: nowrap; }
  .reaction-post .rp-meta { margin-top: 6px; font-size: 11px; line-height: 15px; }
  .reaction-post .rw-head { padding: 12px 14px 10px; }
  .reaction-post .rw-title { margin-top: 4px; font-size: 13px; line-height: 18px; }
  .reaction-post .rp-week > .rp-time { margin-top: 10px; font-size: 13px; line-height: 18px; }
}

.reaction-note { grid-area: note; font-size: 13px; line-height: 19px; color: var(--ink); text-align: center; }
.source-name { white-space: nowrap; }

/* The figures behind the chart, under the source line: two small bar charts, a normal day (the same moment a week
   earlier, when he did not post) over the moment he posts, in warm grey and the page's gold, each value in words
   beside its bar; one quiet line under them says what a normal day is. */
.reaction-stats { grid-area: stats; margin-top: 30px; color: var(--ink-3); }
/* Side by side while each chart keeps 340px (room for the bars beside "77/230 (33%)"); stacked, and no wider than 480px, below that. */
.rs-charts { max-width: 760px; margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px 48px; }
.rs-chart { width: 100%; max-width: 480px; margin: 0; justify-self: center; }
.rs-chart figcaption { margin-bottom: 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.rs-row { display: grid; grid-template-columns: 124px minmax(0, 1fr) 92px; align-items: center; column-gap: 12px; min-height: 26px; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.rs-row + .rs-row { margin-top: 6px; }
.rs-who { color: var(--ink-2); }
.rs-bar { position: relative; height: 14px; }
.rs-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: max(3px, var(--w)); border-radius: 0 3px 3px 0; background: #cfc7b8; }
.rs-v { font-weight: 600; color: var(--ink-3); }
.rs-pct { font-weight: 400; color: var(--ink-4); }
.rs-row.is-post .rs-who { font-weight: 600; color: var(--ink); }
.rs-row.is-post .rs-bar::before { background: #9a7638; }   /* owner, 2 Oct: gold, as "predict oil prices?" (was green) */
.rs-row.is-post .rs-v { color: #015c4d; }
/* The scale under the bars (owner, 3 Oct 2026: "when trump posts, its like 30% but taking the whole line... add some
   axis too horizontally"; then on phones too: "update the graphs on the phone too"): the bars are drawn on a fixed
   scale with headroom, 0–40% and 0–0.12 (--w in the HTML), not stretched to the larger figure, and a hairline axis with
   its ticks names it. */
.rs-axis { display: grid; grid-template-columns: 124px minmax(0, 1fr) 92px; column-gap: 12px; margin-top: 6px; }
.rs-ticks { grid-column: 2; position: relative; height: 21px; border-top: 1px solid rgba(38, 38, 38, .14); }
.rs-ticks > span { position: absolute; top: 0; left: var(--t); padding-top: 6px; transform: translateX(-50%); font-size: 11px; line-height: 14px; letter-spacing: 0; color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-ticks > span::before { content: ""; position: absolute; top: -1px; left: calc(50% - .5px); width: 1px; height: 5px; background: rgba(38, 38, 38, .22); }
/* The 30-second volatility as one line under the source line instead of a figure (owner, 10 Oct 2026, on phones: "Actually
   remove the balls, under the WTI and Brent price data, write Volatility a week earlier 0.048, and when Trump posts
   0.104"; on every width since 13 Oct 2026: "make the volatility scores similar to the phone"). */
.rs-charts { display: none; }
.rs-line { display: block; max-width: 340px; margin: 0 auto; font-size: 15px; line-height: 23px; color: var(--ink-2); text-align: center; text-wrap: balance; }
.rs-line-v { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-line-v.is-post { font-size: 17px; color: #015c4d; }   /* a step over 0.048 (owner, 10 Oct 2026: "Make the green number a bit bigger") */
@media (min-width: 735px) {
  .rs-line { max-width: 640px; }   /* one line on wider screens */
}
.rs-foot { max-width: 640px; margin: 20px auto 0; font-size: 12px; line-height: 18px; color: var(--ink-4); text-align: center; text-wrap: balance; }
/* "How it was computed?" under the volatility line (owner, 13 Oct 2026): a quiet dotted link; hovering it, or tapping it
   (focus), opens a small white card under it with the sentence and the formula. The card stays while the pointer is on
   it (no gap between them), so it can be read and selected. */
.vol-how { position: relative; display: inline-block; }
.vol-how-q { padding: 2px 0; border: 0; background: none; font: inherit; color: var(--ink-3); text-decoration: underline dotted rgba(38, 38, 38, .45); text-underline-offset: .25em; cursor: help; }
.vol-how-q:focus-visible { outline: 2px solid #015c4d; outline-offset: 3px; border-radius: 3px; }
.vol-how-tip { position: absolute; z-index: 20; top: 100%; left: 50%; width: min(420px, calc(100vw - 40px)); padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 40px -20px rgba(38, 38, 38, .35); color: var(--ink-2); font-size: 13px; line-height: 20px; text-align: left; text-wrap: pretty; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.vol-how-tip::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* bridges the pointer from the link to the card */
.vol-how:has(:focus-visible) .vol-how-tip, .vol-how.is-open .vol-how-tip { opacity: 1; visibility: visible; transform: translate(-50%, 8px); transition-delay: 0s;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 40px -20px rgba(38, 38, 38, .35); }
@media (hover: hover) and (pointer: fine) {
  .vol-how:hover .vol-how-tip { opacity: 1; visibility: visible; transform: translate(-50%, 8px); transition-delay: 0s;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 40px -20px rgba(38, 38, 38, .35); }
}   /* hover opens it only under a mouse: a tap leaves a sticky :hover on phones, which would hold it open */
/* Phones: a × in the card's top right corner closes it (owner, 13 Oct 2026); a mouse just leaves it. */
.vol-how-x { display: none; position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid rgba(154, 118, 56, .35); border-radius: 50%; background: #fff; color: var(--ink-2); cursor: pointer; }
@media (max-width: 734px) {   /* phones only: the page dims round the open card, as round a sheet (owner, 13 Oct 2026: "dim only on the phone, not desktop") */
  .vol-how:has(:focus-visible) .vol-how-tip, .vol-how.is-open .vol-how-tip { box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 40px -20px rgba(38, 38, 38, .35), 0 0 0 100vmax rgba(15, 46, 41, .2); }
}
@media (hover: none) {
  .vol-how-x { display: grid; }
  .vol-how-tip { padding-top: 14px; }
  .vol-how-tip > .vol-how-p:first-of-type { padding-right: 36px; }
}
.vol-how-p { display: block; }
.vol-how-p + .vol-how-eq, .vol-how-eq + .vol-how-p { margin-top: 10px; }
.vol-how-eq { display: block; padding: 10px 12px; border-radius: 10px; background: #faf6ee; color: var(--ink); font-variant-numeric: tabular-nums; }
.vol-how-eq > span { display: block; }
.vol-how-tip math { font-family: "STIX Two Math", "Latin Modern Math", "Cambria Math", math; font-size: 1.15em; }   /* the formulas typeset (MathML), as LaTeX draws them (owner, 13 Oct 2026) */
.vol-how-eq math[display="block"] { margin-top: 8px; }
.vol-how-tip var { font-style: italic; font-family: Fraunces, "Iowan Old Style", Georgia, serif; }
.vol-how-tip sub, .vol-how-tip sup { font-size: .72em; line-height: 0; }
/* Method and Limitations fold under their titles (owner, 8 Oct 2026: "Make method and Limitations expandable"): the
   title is the button, in its own type, with a small gold chevron after it that turns as it opens. main.js initFolds
   folds them on load (without the script they stay open and the chevron is hidden); the features sheet is never folded
   away, so "Features description" in the footer still opens it. */
.fold { display: inline-flex; align-items: center; gap: .32em; margin: 0; padding: 4px 6px; border: 0; border-radius: 10px; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.fold-mark { flex: none; width: 14px; height: 9px; margin-top: .08em; fill: none; stroke: #9a7638; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.fold[aria-expanded="true"] .fold-mark { transform: rotate(180deg); }
.fold:focus-visible { outline: 2px solid #015c4d; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .fold[aria-expanded="false"]:hover .fold-mark,
  .report--fold.is-folded .report-inner:hover .fold-mark { transform: translateY(2px); }
}
/* Folded, a section still shows the top of what it holds under its title, dimmed and fading out (owner, 8 Oct 2026:
   "Method is kind of enclosed, I want you to show just a small part of it but dimmed, same with Limitations"). The
   glimpse is a picture only (main.js makes it inert); a click on it, or anywhere on the title's row, opens the section. */
.report--fold { --glimpse: 200px; }
.report--fold.is-folded .report-inner { cursor: pointer; }
.report--fold.is-folded .report-inner > :not(h2):not(.features-pop) {
  max-height: var(--glimpse);
  overflow: hidden;
  opacity: .5;
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}
.report--method.is-folded, .report--limits.is-folded { padding-block: 56px 24px; }   /* the glimpse's faded foot is its air below */
@media (min-width: 1069px) {
  .report--method.is-folded, .report--limits.is-folded { padding-block: 44px 16px; }   /* a desktop a little more compact (owner, 9 Oct 2026) */
}
@media (max-width: 734px) {
  .report--fold { --glimpse: 180px; }
}

/* "Summary", top right (owner, 8 Oct 2026; "more sophisticated", 9 Oct 2026; "not that green… kind of gold/beige",
   13 Oct 2026): a warm sand pill with an inset gold hairline, the byline's serif in deep gold after a small gold
   lozenge. It opens the summary sheet. */
.summary-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px; height: 34px; margin-left: 22px; padding: 0 17px 0 15px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #f8efdc, #ecdcb9); box-shadow: inset 0 0 0 1px rgba(154, 118, 56, .5), 0 1px 2px rgba(92, 70, 38, .12), 0 10px 22px -12px rgba(92, 70, 38, .45); font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1; font-weight: 400; letter-spacing: .01em; color: #5c4416; cursor: pointer; transition: box-shadow .25s ease, transform .25s ease; }
.summary-mark { flex: none; width: 6px; height: 6px; background: #9a7638; transform: rotate(45deg); }
.summary-btn::after { content: ""; position: absolute; inset: -5px -4px; }   /* 44px to a finger */
.summary-btn:focus-visible { outline: 2px solid #015c4d; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .summary-btn:hover { box-shadow: inset 0 0 0 1px rgba(154, 118, 56, .85), 0 1px 2px rgba(92, 70, 38, .12), 0 14px 26px -12px rgba(92, 70, 38, .55); transform: translateY(-1px); }
}
/* The sheet: ivory paper, a gold kicker, the first sentence in the quote's serif as its lead, the rest in the body type,
   signed as the quote is. The owner's words, unchanged, only set in two steps. */
.features-pop.apx-pop--summary { width: min(600px, calc(100vw - 32px)); border-radius: 22px; }
.apx-pop--summary .features-head { align-items: center; padding: 22px 22px 0 40px; }
.apx-pop--summary .features-head h3 { display: flex; align-items: center; gap: 12px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a672b; }
.apx-pop--summary .features-head h3::before { content: ""; width: 28px; height: 1px; background: #9a7638; }
.apx-pop--summary .summary-body { padding: 12px 40px 36px; }
.summary-body p { margin-top: 16px; font-size: 16px; line-height: 27px; color: var(--ink-2); text-wrap: pretty; }
.summary-body .summary-lead { margin-top: 0; font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 26px; line-height: 34px; font-weight: 400; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.summary-body .summary-by { margin-top: 22px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 734px) {
  .apx-pop--summary .features-head { padding: 12px 10px 0 22px; }
  .apx-pop--summary .summary-body { padding: 4px 22px 26px; }
  .summary-body .summary-lead { font-size: 22px; line-height: 29px; }
  .summary-body p { font-size: 16px; line-height: 26px; }
}

/* What the chart shows, in the owner's words (8 Oct 2026), under its source line: the finding's sentence step. */
.reaction-take { grid-area: take; justify-self: center; max-width: 640px; margin: 4px 0 0; font-size: 15px; line-height: 23px; letter-spacing: -.009em; color: var(--ink-2); text-align: center; text-wrap: balance; }
.source-logo { display: inline-block; width: 11px; height: 11px; margin: 0 5px 0 1px; vertical-align: -1px; }   /* Dukascopy's mark, its letters' height */

@media (max-width: 1068px) {
  .reaction { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "views" "card" "take" "note" "post" "stats"; }
  .reaction-chart { height: 320px; }
}

/* Desktop: the toggle, the chart and the picked post as one set of white sheets on the page's centre line, the captions
   under them in the grey of every other caption, and the chart's motion quiet and quick. */
@media (min-width: 1069px) {
  /* The side columns never drop under 216px, so the picked post keeps its whole card at every desktop width; the chart
     takes the squeeze instead (672px at 1280). */
  .reaction { grid-template-columns: minmax(216px, 1fr) minmax(0, 640px) minmax(216px, 1fr); }   /* a size down (owner, 9 Oct 2026: "make the graph smaller and the presentation more compact"; was 760px) */
  .reaction-card { padding: 16px 18px 10px; }
  .reaction-chart { height: 280px; }   /* was 344px */

  /* One light grey edge and one warm resting shadow for the three sheets; the card's dividers in the same grey. */
  .reaction-views { box-shadow: 0 0 0 1px var(--sheet-edge), var(--elev-1-sm); }
  .reaction-card { box-shadow: 0 0 0 1px var(--sheet-edge), var(--elev-1); }
  .reaction-post .rp-card { box-shadow: 0 0 0 1px var(--sheet-edge), var(--elev-1); }
  .reaction-post .rp-card .post-head,
  .reaction-post .rw-head { border-bottom-color: var(--sheet-edge); }
  .reaction-post .rp-values { border-top-color: var(--sheet-edge); }

  /* The plot's rules and the post's line (on the page's centre line: main.js gives the plot equal margins on a desktop)
     as one sharp pixel on a 1x screen. */
  .r-grid, .r-post { shape-rendering: crispEdges; }

  /* The page's one keyboard ring. */
  .reaction-view:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .reaction-chart:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
  .reaction-post .rp-link:focus-visible { border-radius: 4px; }

  /* The lines step back by stroke-opacity: the same pixels, without a layer per path through the sweep and the dim. */
  .r-line { opacity: 1; stroke-opacity: var(--r-faint); transition: stroke-opacity var(--t-fade) ease, stroke-width var(--t-fade) ease; }
  .reaction-chart.is-focused .r-line { opacity: 1; stroke-opacity: var(--r-dim); }
  .reaction-chart .r-line.is-hot { opacity: 1; stroke-opacity: .95; }
  .reaction-chart .r-line.is-picked { opacity: 1; stroke-opacity: 1; }
  /* They come back only once the pointer has been clear of every line for 120ms, so crossing a gap between two lines
     never flashes the whole plot; stepping back stays immediate. */
  .reaction-chart:not(.is-focused) .r-line,
  .reaction-chart:not(.is-focused) .r-median { transition-delay: .12s; }
  .r-sweep { transition-duration: var(--t-fade); }   /* the gold rule's fade as the sweep ends */

  /* Hovers deepen the ink over the same short time; the card leaves as it came, a fade in place. */
  .reaction-view { transition-duration: var(--t-quick); }
  .reaction-post .rp-link { transition: color var(--t-quick) var(--ease), text-decoration-color var(--t-quick) var(--ease); }
  .reaction-post a.rp-link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .2em; }   /* the link's underline fades in, as the footer's do (a button draws a transparent underline in Chrome, so "Read that post" keeps its colour alone) */
  .reaction-post .rp-card.is-leaving { transform: none; transition: opacity .2s var(--ease-in); }   /* the 200ms main.js waits */

  /* The captions in grey at Inter's own spacing for 13–14px (the body's -.011em is set for 18px). */
  .reaction-note { margin-top: -6px; color: var(--ink-3); letter-spacing: 0; }   /* 8px under the sentence over it (9 Oct 2026) */
  .reaction-stats { margin-top: 14px; }   /* a step inside the finding, 36px under the source line with the grid's 14px row gap, as on phones: less than a part's 48 (the headers pass, 7 Oct 2026) */
  .rs-chart figcaption { letter-spacing: -.006em; }
  .rs-row { letter-spacing: 0; }
  .rs-pct { font-weight: var(--text-weight); }   /* the text weight, not Inter 400 */
  .rs-foot { font-size: 13px; line-height: 19px; letter-spacing: 0; }   /* the caption step; still under the model sentence's 14px */
  .rs-foot i { font-synthesis: style; }   /* Inter has no italic file here: the browser slants the statistic's p */
}

@media (min-width: 1069px) and (hover: hover) and (pointer: fine) {
  .reaction-post a.rp-link:hover { text-decoration-color: currentColor; }
}

/* Stepping between posts (a click on another line, the arrow keys) settles the card from .45 in 150ms; never a blink. */
@media (min-width: 1069px) and (prefers-reduced-motion: no-preference) {
  .reaction-post .rp-card.is-swap:not(.is-in) { animation: rp-swap var(--t-quick) var(--ease) backwards; }
}

/* One bar chart since 8 Oct 2026 (the owner kept the 30-second volatility): it stands alone, centred, at most 480px. */
/* Side by side the bars are 96–140px long: under 1440 the price axis names only 0, 20 and 40% (10 and 30% keep their ticks). */
@media (min-width: 1280px) and (max-width: 1439px) {
  .rs-ticks > .rs-minor { color: transparent; }
}

/* On the narrowest desktops the chart sheet is 460–552px, about the stacked charts' own 480px: they take the sheet's
   width there, so their edges are the sheet's and never a few pixels inside it. */
@media (min-width: 1069px) and (max-width: 1160px) {
  .rs-chart { max-width: none; }
}

/* ---------- Phone (≤734px): FINDINGS on the hero's rail ---------- */

/* One left rail with the hero: "Findings", the headline, the source line, the funnel and the table start on the 20px
   gutter, where the byline, the question and the post box do; the toggle keeps the sheet's right corner, as the hero's
   button keeps its box's. The sheets are the post box's warm paper edge (the fills stay white), each caption 16px under
   its sheet in --ink-3, and the rhythm runs toggle 12, sheet 16, caption 28, card 48, funnel. */
@media (max-width: 734px) {
  /* As on the desktop (owner, 3 Oct 2026: "Remove 'Findings' from the mobile version too"; "Move up the 'Oil prices
     react…'"): "Findings" is for screen readers only, and the finding's headline opens the section, in its place. */
  #report-title { margin-bottom: 18px; font-size: 19px; line-height: 26px; }   /* a step bigger, with more air over the headline (owner, 8 Oct 2026) */
  #findings .report-part:first-of-type > .report-finding { margin-top: 0; }
  .report-finding { margin-top: 24px; text-align: left; line-height: 1.12; line-height: round(nearest, 1.12em, 1px); }   /* text-wrap: balance stays; a whole-pixel line, as on the desktop (the headers pass, 7 Oct 2026) */
  #reaction-title { text-align: center; }   /* owner, 3 Oct 2026: "center oil prices..." */
  #model-title, #timing-title { font-size: 30px; text-align: center; }   /* owner, 3 Oct 2026: "just a tiny bit bigger" (was 28px, the other finding's size); "center 'A model better than guessing', not attaching it to the right" */
  .report-finding + .reaction, .finding-sub + .reaction { margin-top: 28px; }
  /* The plot is 1.47 times as dense as the desktop's, so its lines are as faint per area (.4 x 186/274) and step
     further back when one is picked. */
  .reaction { row-gap: 0; --r-faint: .27; --r-dim: .035; }
  .reaction-views { margin-bottom: 12px; }
  .reaction-chart { height: 256px; }
  .reaction-take { margin-top: 16px; }   /* the sentence under the chart sheet, as every caption in the column; the source line 6px under it (owner, 9 Oct 2026) */
  .reaction-note { margin-top: 6px; }
  .reaction-post > .rp-card { margin-top: 28px; }   /* inside the panel, so the panel's own height carries the gap (main.js morph); the empty aside is 0px */
  .reaction-stats { margin-top: 36px; }   /* a step inside the finding: less than a part's 48 (the phone pass, 7 Oct 2026) */
  .rs-charts { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rs-foot { margin-top: 28px; }   /* centred and balanced, as every caption in the column (the headers pass, 7 Oct 2026) */
  .rp-meta { text-wrap: pretty; }   /* no one-word last line ("away") */

  /* The sheets in the post box's material: a warm hairline edge, radius 16, the long warm shadow, gold rules. */
  .reaction-views { box-shadow: 0 0 0 1px rgba(92, 70, 38, .08), 0 8px 20px -14px rgba(92, 70, 38, .3); }
  .reaction-card, .rp-card { border-radius: 16px; box-shadow: 0 0 0 1px rgba(92, 70, 38, .07), 0 1px 2px rgba(92, 70, 38, .05), 0 24px 48px -24px rgba(92, 70, 38, .3); }
  .reaction-card { padding: 14px 12px 12px; }   /* 17px under the time labels */
  .timing-card { height: 236px; padding: 14px 12px 10px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(92, 70, 38, .07), 0 1px 2px rgba(92, 70, 38, .05), 0 24px 48px -24px rgba(92, 70, 38, .3); }   /* the chart sheet's material */
  .tm-ground-label, .tm-value.tm-value--under { fill: #6f685c; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }   /* the ground's words at AA (5.5:1, the page's warm grey), with a thin white halo so the hatch and the trail do not run through the glyphs */
  .tm-ground-label { letter-spacing: 0; }   /* the ground's name fits under 0-3 s at 320 */
  .tm-dot { stroke: none; }   /* no white ring, so the short green runs between the dots read as one solid line into the stop bar (the hollow dots keep theirs) */
  .rp-card .post-head, .rw-head { border-bottom-color: var(--gilt-line); }
  .rp-values { border-top-color: var(--gilt-line); }
  .rp-card .avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(38, 38, 38, .08); pointer-events: none; }   /* the hero avatar's seat */
  .rp-text { font-size: 17px; line-height: 26px; }   /* the post box's size; the same 9-line clamp */
  .reaction-note { color: var(--ink-3); }   /* as the post box's caption, 5.57:1 */


  /* The chart's type: the time names at 11px, the ticks a little less tracked, a slimmer sheen behind the sweep, and
     the medians further back while a post is picked (its own line is cased in white, main.js). */
  .reaction-chart.is-focused .r-median { opacity: .12; }
  .r-axis { letter-spacing: .02em; }
  .r-time { font-size: 11px; letter-spacing: .12em; }
  .r-sheen-to { stop-opacity: .1; }
  .r-sweep { transition-duration: .3s; }   /* the gold rule's fade, scaled to the shorter sweep */

  /* Thumb-sized controls with no shift: the toggle a size up, each half 44px to a finger; the card's link 44px. */
  .reaction-view { position: relative; min-height: 36px; padding: 0 16px; font-size: 14px; }
  .reaction-view::after { content: ""; position: absolute; inset: -4px 0; }   /* 44px to a finger; the pill is 42px tall */
  .reaction-view[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 46, 38, .22); }   /* lacquered, as the hero's button */
  .rp-link { position: relative; }
  .rp-link::before { content: ""; position: absolute; inset: -4px -8px; }   /* 36 to 44px, no layout shift */
}

/* Touch, phones: a press tints at once, as the hero's button does; a segmented control dims rather than shrinks. */
@media (hover: none) and (max-width: 734px) {
  .reaction-view[aria-pressed="false"]:active { background: rgba(38, 91, 78, .1); color: var(--ink); transition-duration: .06s; }
  .rp-link:active { color: #3f34c9; }
}

/* Touch, phones either way up (not iPads): a long press on the chart selects nothing and brings up no callout. The
   lines fade by stroke-opacity, which draws the same pixels without a layer per path on every frame of the sweep. */
@media (hover: none) and (max-width: 734px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .reaction-chart { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .reaction-svg { pointer-events: none; }   /* main.js picks by the finger's place on the chart (nearest), so a touch need not hit-test each of the ~230 stroked lines (33–76ms a tap) */
  .r-line { opacity: 1; stroke-opacity: var(--r-faint); transition: stroke-opacity .25s ease, stroke-width .25s ease; }
  .reaction-chart.is-focused .r-line { opacity: 1; stroke-opacity: var(--r-dim); }
  .reaction-chart .r-line.is-hot { opacity: 1; stroke-opacity: .95; }
  .reaction-chart .r-line.is-picked { opacity: 1; stroke-opacity: 1; }
}

/* Phones: a card rises into place as the hero's parts do; stepping between posts settles it without a blink. */
@media (max-width: 734px) and (prefers-reduced-motion: no-preference) {
  .rp-card { animation: rp-rise .5s cubic-bezier(.22, 1, .36, 1) .06s backwards; }
  .rp-card.is-swap { animation: rp-swap .24s ease backwards; }
  .rp-card.is-leaving { transition: opacity .2s var(--ease-in), transform .2s var(--ease-in); }
}

@keyframes rp-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes rp-swap { from { opacity: .45; } }

/* Every width: a card's entrance plays once. main.js sets .is-in when it ends, so a screen crossing 734px (a turn of
   the phone, which swaps the rise for the wide fade) never plays it again over the post. */
.rp-card.is-in { animation: none; }

/* Windows contrast themes: the sheet and the lines in system colours. */
@media (forced-colors: active) {
  .reaction-card, .rp-card { background: Canvas; border: 1px solid CanvasText; }
  .r-line, .r-median { stroke: CanvasText; }
  .r-case { stroke: Canvas; }
  .r-gem { fill: Highlight; }
}

/* ---------- The market: a small chart with room around it ---------- */

.market { padding-block: 72px 104px; border-top: 1px solid var(--line); }

/* The lead says "Click" to a mouse and "Tap" to a finger; CSS picks one, so the first frame is already right. */
.t-touch { display: none; }

.market-inner,
.how-inner { max-width: 980px; margin-inline: auto; }

.market h2,
.how h2,
.findings h2 {
  margin-top: 14px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.chart-card {
  margin-top: 28px;
  padding: 28px 28px 22px;
  border-radius: 24px;
  background: var(--panel);
}

.chart {
  position: relative;
  height: 260px;
  touch-action: manipulation;   /* a tap opens the nearest dot: no double-tap zoom; scrolling and pinch still work */
  user-select: none;
  -webkit-user-select: none;
}

.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }

.c-label {
  fill: var(--ink-3);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* The high and the low, written on the line, stand in for an axis; a short tick marks where each month begins. */
.c-price { fill: var(--ink-2); font-weight: 600; }
.c-tick { stroke: var(--line-strong); stroke-width: 1; }

.c-fade-top { stop-color: #005c4d; stop-opacity: .2; }
.c-fade-bottom { stop-color: #005c4d; stop-opacity: 0; }
.c-area { fill: url(#c-fade); }

.c-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The first time the chart comes into view the line draws itself, left to right. */
.c-line.is-intro { stroke-dasharray: 1; stroke-dashoffset: 1; animation: line-draw 1.2s var(--ease) forwards; }
.c-area.is-intro { opacity: 0; animation: fade-in .4s ease .5s forwards; }

/* Until then the plot waits empty, so the whole line never shows first and is wiped to draw again. Its labels wait
   too, and the unseen dots take no hover or tap. */
.chart.is-waiting .c-line,
.chart.is-waiting .c-area,
.chart.is-waiting .c-label,
.chart.is-waiting .c-tick,
.chart.is-waiting .markers { opacity: 0; }
.chart.is-waiting .marker { pointer-events: none; }   /* still in the Tab order: focus shows the chart (main.js) */
.c-label.is-intro,
.c-tick.is-intro { opacity: 0; animation: fade-in .4s ease .5s forwards; }   /* with the area */

@keyframes line-draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* Post markers are real buttons laid over the chart. */
.markers { position: absolute; inset: 0; pointer-events: none; }

.marker {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Each circle is the model's call on one of his posts: green up, red down. */
.pin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 1.5px var(--card), 0 0 0 2.5px rgba(15, 46, 41, .28);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.marker.is-up .pin { background: var(--up-dot); }
.marker.is-down .pin { background: var(--down-dot); }

.marker:focus-visible,
.marker.is-active { z-index: 2; }

.marker:focus-visible .pin,
.marker.is-active .pin {
  transform: scale(1.5);
  box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--green-deep);
}

@media (hover: hover) and (pointer: fine) {
  .marker:hover { z-index: 2; }

  .marker:hover .pin {
    transform: scale(1.5);
    box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--green-deep);
  }
}

.marker:focus-visible { outline: none; }

.marker.is-intro .pin { animation: pop-in .3s var(--ease) both; animation-delay: calc(var(--at, 0) * 1.2s); }   /* as the line reaches it: main.js turns its place into the line's time */

@keyframes pop-in { from { opacity: 0; transform: scale(.3); } }

.chart-tip {
  position: absolute;
  z-index: 4;
  width: 270px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 14px 32px -12px rgba(15, 46, 41, .35);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tip-title { display: block; color: var(--ink); font-size: 15px; line-height: 21px; font-weight: 600; }

.tip-hint { display: block; margin-top: 4px; color: var(--ink-3); font-size: 13px; }

.tip-lean { margin-top: 4px; display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }

.chart-note { margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--ink-3); }

/* ---------- Reader: his post on a white card, beside it a sand panel with what happened next, the AI's call and the features ---------- */

/* Centred in the window. The dialog itself is clear: the post card lies over the left edge of the panel. "Read more"
   grows only the panel, evenly up and down, so the post card never moves from the middle of the screen. */
.reader {
  width: min(980px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}

.reader::backdrop {
  background: rgba(15, 46, 41, .36);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.reader[open] { animation: reader-in .3s var(--ease); }

@keyframes reader-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
}

/* The backdrop fades in and out with the reader (main.js fades the dialog itself out; that does not reach ::backdrop). */
.reader[open]::backdrop { animation: backdrop-in .3s ease; }

@keyframes backdrop-in {
  from { opacity: 0; }
}

.reader.is-closing::backdrop { opacity: 0; transition: opacity .18s ease; }
.reader.is-closing { pointer-events: none; }   /* a quick second tap lands on nothing while it fades */

/* Touch: the page stays put behind the reader. On body only, so the viewport stays the header's scroll container. */
@media (hover: none) {
  body.is-reading { overflow: hidden; }
}

.reader-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }

.reader-post {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-right: -24px;   /* over the panel's rounded corners */
  padding: 32px 32px 28px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 30px 70px -24px rgba(15, 46, 41, .5);
}

@media (min-width: 735px) {
  .reader-post,
  .reader-side {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.reader-head { display: flex; align-items: center; gap: 14px; }

.reader-head .who-name { font-size: 17px; line-height: 22px; }

.reader-title {
  margin-top: 22px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}

/* The post is the headline. */
.reader-text {
  margin-top: 10px;
  font-size: 22px;
  line-height: 34px;
  letter-spacing: -.014em;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Only shown when a phone folds a long post (main.js); [hidden] keeps it out otherwise. */
.reader-more { display: block; }

.reader-meta {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-3);
}

.reader-link { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

/* At least as tall as the post card; taller once the features are open. */
.reader-side {
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 34px 28px 18px 52px;   /* the first 24px lie under the post card */
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 40px 90px -24px rgba(15, 46, 41, .45);
}

.after-value {
  margin-top: 10px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.after-value.is-up { color: var(--up); }
.after-value.is-down { color: var(--down); }

/* A price that moved gets a tiny triangle in its own colour, pointing the way it went. Circles stay for the calls. */
.after-value.is-up::before,
.after-value.is-down::before {
  content: "";
  display: inline-block;
  width: .34em;
  height: .3em;
  margin-right: .24em;
  vertical-align: .16em;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.after-value.is-down::before { clip-path: polygon(0 0, 100% 0, 50% 100%); vertical-align: .12em; }
.after-value.is-empty { font-size: 22px; line-height: 30px; }

.after-sub { margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: pretty; }

.expect-v { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 20px; line-height: 26px; font-weight: 650; }
.expect-p { font-size: 14px; font-weight: 500; color: var(--ink-3); }

/* The features stay folded until asked for. */
.how-read { border-top: 1px solid var(--line-strong); }

.how-read > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  color: var(--green);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.how-read > summary::-webkit-details-marker { display: none; }

.how-read > summary::after {
  content: "+";
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  transition: transform .2s var(--ease);
}

.reader-side.is-expanded .how-read > summary::after { transform: rotate(45deg); }

.how-read-body { overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  .how-read > summary:hover { color: var(--green-deep); }
}

.how-read-intro { padding-top: 6px; font-size: 14px; line-height: 20px; color: var(--ink-3); text-wrap: pretty; }

.feat-list { margin-top: 6px; }

.feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.feat dt { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.feat dd { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }

.reader-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  color: var(--green-deep);
  z-index: 2;   /* above the post card, which sits on z-index 1 */
}

@media (hover: hover) and (pointer: fine) {
  .reader-close:hover { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); }
}

.reader-close svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* A direction is a circle: green for up, red for down, white for neither. */
.dot {
  flex: none;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
  forced-color-adjust: none;
}

.dot--up { background: var(--up-dot); box-shadow: none; }
.dot--down { background: var(--down-dot); box-shadow: none; }

/* The OpenAI mark, before GPT-6 Sol's name (one copy in the sprite at the top of the page). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.openai {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: .35em;
  vertical-align: -.2em;
  fill: var(--ink);
}

/* GitHub's mark before "here" in the model text: the link's own colour, its letters' height */
.gh-mark { display: inline-block; width: 1em; height: 1em; margin-right: .25em; vertical-align: -.14em; fill: currentColor; }

/* ---------- Why this analysis: a small, quiet quote ---------- */

.why { padding-block: 56px; border-top: 1px solid var(--line); background: #ffffff; }   /* the owner: "use white background" */

.pull-quote { max-width: 560px; margin: 0 auto; text-align: center; }

.pull-quote::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 24px;
  background: #b08a4c;   /* the gold of the landing pattern */
}

.pull-quote blockquote { margin: 0; }

.pull-quote p {
  font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}

.pull-quote figcaption {
  margin-top: 16px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (min-width: 1069px) {
  .why { padding-block: 52px; background-clip: padding-box; }   /* 64px on both sides of every hairline; the white stops under its own hairline, so the top edge is drawn over the ivory like the bottom one */
  .pull-quote::before { background: var(--gilt); }   /* the page's one solid gold, as every other rule, ordinal and bar */
  .pull-quote p { line-height: 32px; }   /* whole pixels, so the band and everything below it sit on whole pixels */
  .pull-quote figcaption { font-size: 11px; line-height: 16px; letter-spacing: .14em; }   /* the page's one caps-label step (11/16, .14em) */
}

/* The code, under Method (owner, 10 Oct 2026: "Access and review the code here [Github]", "Make it like the quoted
   section in white and black"): the quote's white band (.why), its gold rule and its black serif, on one line;
   "GitHub" with its mark is the link, underlined in gold. */
.code-cta { max-width: 560px; margin: 0 auto; font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; color: var(--ink); text-align: center; text-wrap: balance; }
.code-cta::before { content: ""; display: block; width: 40px; height: 2px; margin: 0 auto 24px; background: #9a7638; }
.code-gh { position: relative; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: #9a7638; white-space: nowrap; }
.code-gh .gh-mark { margin-right: .22em; vertical-align: -.1em; }
.code-gh:focus-visible { outline: 2px solid #015c4d; outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .code-gh:hover { text-decoration-thickness: 2px; }
}
@media (max-width: 734px) {
  .code-cta { font-size: 21px; line-height: 28px; }
  .code-gh::after { content: ""; position: absolute; inset: -10px -6px; }   /* a finger's height, no layout shift */
}

/* ---------- Limitations: four notes under the quote (owner, 2 Oct 2026) ----------
   Two by two on a wide screen, one column on a phone. Each note: a gold numeral and a hairline running to a small gold
   line drawing (the Method's dots, a balanced scale, candles, the stopwatch), then the title in green and the owner's
   words. The title is Method's (#limits-title shares #method-title's rules). The grid shares the 760px model column;
   Contact still starts at the axis + 32 (the headers pass, 7 Oct 2026). */
.report--limits { padding-block: 72px 112px; border-top: 1px solid var(--line); }
.limits { max-width: 760px; margin: 40px auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.limit-head { display: flex; align-items: center; gap: 14px; }
.limit-n { font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 17px; line-height: 20px; letter-spacing: 0; color: #9a7638; }   /* the serif at its own spacing, as every other Fraunces line (the headers pass, 7 Oct 2026) */
.limit-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(154, 118, 56, .55), rgba(154, 118, 56, .12)); }
.limit h3 { margin-top: 14px; font-size: 19px; line-height: 26px; font-weight: 650; letter-spacing: -.012em; color: #015c4d; }
.limit p { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--ink-2); text-wrap: pretty; }

@media (max-width: 734px) {
  .report--limits { padding-block: 56px 64px; border-top: 0; }   /* the phone rhythm: no grey hairline between sections; 64 to the footer's hairline */
  .limits { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 28px; }
}

@media (min-width: 1069px) {
  .report--limits { padding-block: 64px; }   /* 64px on both sides of the hairlines above and below, as the quote band */
  .limit-n { min-width: 21px; }   /* Fraunces numerals are proportional: one slot for all four, so the gold rules start at one x in each column */
  .limit p { letter-spacing: -.009em; }   /* Inter's tracking at 15px: the body's -0.198px, inherited as a length, is -.013em here and reads cramped */
}

/* ---------- Features analyzed: one question per slide ---------- */

.how { padding-block: 104px 112px; }

.deck { margin-top: 36px; }

/* A sideways scroller that rests on one slide at a time; the buttons, the bars and the arrow keys move it too. */
.deck-track {
  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  .deck-track { scroll-behavior: smooth; }
}

.deck-track::-webkit-scrollbar { display: none; }
.deck-track:focus-visible { outline-offset: 4px; }

.slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 52px 60px 56px;
  border-radius: 28px;
  background: var(--panel);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.slide-k {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}

.slide-n { font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.slide-q {
  max-width: 760px;
  margin-top: 22px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.slide-why { max-width: 700px; margin-top: 18px; font-size: 20px; line-height: 31px; color: var(--ink-2); text-wrap: pretty; }

.slide-values {
  margin-top: auto;
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 26px 32px;
}

.slide-values > div { padding-top: 14px; border-top: 1px solid var(--line-strong); }

.slide-values dt { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 24px; font-weight: 650; }
.slide-values dd { margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: pretty; }

.slide-foot { margin-top: 26px; font-size: 15px; line-height: 23px; color: var(--ink-3); }

.deck-nav { margin-top: 20px; display: flex; align-items: center; gap: 18px; }

.deck-dots { flex: 1; min-width: 0; display: flex; gap: 6px; }

.deck-dot {
  position: relative;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}

.deck-dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .deck-dot:hover::before { background: rgba(0, 92, 77, .45); }
}

.deck-dot[aria-current="true"]::before { background: var(--green); }

.deck-count { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.deck-btn {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--green-deep);
  transition: background-color .15s ease, opacity .15s ease;
}

.deck-btn[aria-disabled="true"] { opacity: .35; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .deck-btn:hover { background: var(--panel); }
  .deck-btn[aria-disabled="true"]:hover { background: var(--card); }
}

.deck-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Evaluation (hidden for now; ?dev shows it): the score, and two folds the owner will fill ---------- */

.evaluation { padding-block: 64px 72px; border-top: 1px solid var(--line); }

.evaluation .model-metrics { max-width: 700px; margin-inline: auto; }

/* The score in one sentence; the numbers in ink, so it reads as the model's score and not as prose. */
.metric { max-width: 700px; margin-top: 10px; font-size: 21px; line-height: 32px; color: var(--ink-2); text-wrap: pretty; }
.metric b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* What the score means and what it was tested on, folded like the reader's "Read more"; it fades in when opened. */
.model-more { max-width: 700px; margin-top: 20px; }   /* the sentence's measure, so the rule ends where it does */
.model-more + .model-more { margin-top: 0; }   /* "Metrics" and "Limitations" read as one list, a rule between them */
.model-more.is-open > summary::after { transform: rotate(45deg); }   /* main.js: turns as soon as it is clicked */
.model-more.is-folding { overflow: hidden; }   /* main.js folds its height open and shut, like the reader's */
.model-more p { padding-bottom: 16px; font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: pretty; }
.model-more[open] p { animation: answer-in .3s ease; }

/* ---------- Findings (hidden for now; ?dev shows it): one line each, opened for the detail ---------- */

.findings { padding-block: 72px 80px; border-top: 1px solid var(--line); }

.findings-inner { max-width: 1040px; margin-inline: auto; }

.finding-list { max-width: 720px; margin-top: 32px; }

.finding { border-top: 1px solid var(--line-strong); }
.finding:last-of-type { border-bottom: 1px solid var(--line-strong); }

.finding > summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 12px;
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.finding > summary::-webkit-details-marker { display: none; }

.finding > summary::after {
  content: "+";
  margin-left: auto;
  padding-left: 12px;
  font-size: 22px;
  font-weight: 400;
  color: var(--green);
  transition: transform .2s var(--ease);
}

.finding[open] > summary::after { transform: rotate(45deg); }

@media (hover: hover) and (pointer: fine) {
  .finding > summary:hover { color: var(--green-deep); }
}

.finding-n { flex: none; width: 24px; font-size: 14px; font-weight: 650; color: var(--green); font-variant-numeric: tabular-nums; }

.finding p { max-width: 560px; padding: 0 0 18px 38px; font-size: 16px; line-height: 25px; color: var(--ink-2); text-wrap: pretty; }

/* His post card with an empty text box: type a post, get the model's guess. */
.truth-card {
  padding: 20px 22px 16px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease;
}

.truth-card:focus-within { box-shadow: var(--shadow-card), 0 0 0 2px var(--green); }

.composer-text {
  display: block;
  width: 100%;
  min-height: 84px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 26px;
  overflow: hidden;   /* main.js grows the box with the post, so it never scrolls inside */
}

.composer-text::placeholder { color: #474747; }   /* darker (owner, 9 Oct 2026: "make the placeholder more darker"; was --ink-3), still lighter than typed text */
.composer-text:focus { outline: none; }

.composer-foot {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.composer-result { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.composer-result .dot { vertical-align: 0; }

/* Under a call, in grey, the step that makes it ("It cuts oil supply or shipping."). */
.composer-result .call-why { display: block; color: var(--ink-3); }

/* The answer fades in; while the model reads, "Reading…" breathes (after .4s, so a fast answer never flickers). */
.composer-result.is-in { animation: answer-in .25s ease; }
.composer[aria-busy="true"] .composer-result { animation: breathe 1.6s ease-in-out .4s infinite; }

@keyframes answer-in { from { opacity: 0; } }
@keyframes breathe { 50% { opacity: .55; } }

.composer-go {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .composer-go:hover { background: var(--green-deep); }
}

.composer-count { flex: none; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.composer-count.is-full { color: var(--ink); font-weight: 600; }   /* red is only for direction */
.composer-go:disabled { opacity: .6; cursor: progress; }

/* The line under the findings, in the gold of the landing pattern; "(see more)" goes to the method. */
.findings-signal { margin-top: 18px; font-size: 17px; line-height: 25px; font-weight: 600; color: #85652c; }
.findings-signal .see-more { margin-left: 2px; font-size: 13px; font-weight: 500; color: #85652c; text-decoration: underline; text-underline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .findings-signal .see-more:hover { color: var(--green-deep); }
}

/* Two quiet lines under the post box, in the faintest grey that still reads as text (4.6:1 on ivory). The mark takes
   the grey too, and the second line starts where the first one's words do. */
.composer-credit { margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--ink-4); text-wrap: pretty; }
.composer-credit .openai { fill: currentColor; }
.model-demo .composer-credit + .composer-note { margin-top: 4px; text-wrap: balance; }   /* the note tucked under the credit, in two even lines where it wraps (owner, 8 Oct 2026) */
/* The demo under the model's result (owner, 7 Oct 2026: "Put the demo under 'A model better than guessing..'"): the
   post box and its credit, centred under the sentence, as wide as it was in the hero. */
.model-demo { width: min(100%, 548px); margin: 36px auto 0; text-align: left; }
@media (min-width: 1069px) {
  .model-demo { margin-top: 24px; }   /* closer to the model's sentence (owner, 9 Oct 2026: "more compact") */
}
.composer-credit.composer-claim { margin-top: 2px; padding-left: 1.45em; }   /* the mark's 1.1em and its .35em gap; beats the phone credit's 14px */

/* Desktop: the post box is a white sheet like the chart's and the picked post's, with the same light grey edge, lifted a
   step higher as the thing to act on. Writing in it draws a fine gold edge and a gold caret (as on the phone);
   the edge is the text field's, so on the button only the button's own ring shows. */
@media (min-width: 1069px) {
  .model-demo .truth-card { box-shadow: 0 0 0 1px var(--sheet-edge), var(--elev-2); }
  .model-demo .truth-card:focus-within { box-shadow: 0 0 0 1.5px var(--gilt), var(--elev-2); }
  .model-demo .truth-card:focus-within:not(:has(.composer-text:focus)) { box-shadow: 0 0 0 1px var(--sheet-edge), var(--elev-2); }   /* browsers without :has keep the edge on any focus */
  .model-demo .composer-text { caret-color: var(--gilt); }
  .model-demo .composer-foot { border-top-color: var(--sheet-edge); }
}

/* A mouse over the button deepens it a shade in its own green (the phone's press colour, 10.25:1 with white); while
   the model reads, the button does not answer the mouse. */
@media (min-width: 1069px) and (hover: hover) and (pointer: fine) {
  .model-demo .composer-go { transition: background-color var(--t-quick) var(--ease); }
  .model-demo .composer-go:hover { background: #004a3e; }
  .model-demo .composer-go:disabled:hover { background: var(--green); }
}

/* While the model reads, "Reading…" fades in and breathes only down to .84 (about 4.9:1 at its faintest), as on the phone. */
@media (min-width: 1069px) and (prefers-reduced-motion: no-preference) {
  .composer[aria-busy="true"] .composer-result { animation: answer-in var(--t-fade) ease both, breathe-soft 2s ease-in-out .9s infinite; }
}

/* Names and numbers that must not break across lines ("GPT-6 Luna"). */
.nw { white-space: nowrap; }

/* ---------- Method, desktop: the owner's design (2 Oct 2026, made compact), built into index.html by web/build_method.py ----------
   The block is 960px wide (--mflow-w); its two lanes' centre (--mflow-c) sits under the title, the text column hanging to
   the left, and main.js scales it down to a narrower column. Tablets keep the plain flowchart; phones show .mphone (see
   "Phone (≤734px): METHOD"). */
.mflow-frame { display: none; }
.mphone { display: none; }   /* the phone's composition of the same design (≤734px: "Phone (≤734px): METHOD") */

@media (min-width: 1069px) {
  .report--method .flow { display: none; }
  #method-title, #limits-title { margin-inline: auto; text-align: center; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; line-height: round(nearest, 1.12em, 1px); font-weight: 700; letter-spacing: -.03em; color: #015c4d; }   /* a whole-pixel line, so the block under it sits on whole pixels (1.12 where round() is unknown) */
  .mflow-frame { display: block; position: relative; overflow: hidden; max-width: calc(var(--mflow-w) * 1px); height: calc(var(--mflow-h) * 1px); margin: 24px 0 0 max(-40px, calc(50% - var(--mflow-c) * 1px)); }   /* 24px: "Method" heads its diagram, 48 over 32 to the lane heads (the diagram's crop keeps the shadow room) (the headers pass, 7 Oct 2026); the lanes' centre under the title; below ~1150px the text column may hang up to 40px into the gutter, so it drifts half as far */
  #method { padding-bottom: 56px; }   /* the table's caption to the quote's band: 56 + the frame's 8px shadow room, as the bands' 64 */
  .mflow { transform-origin: 0 0; transform: translate(calc(var(--mflow-x) * -1px), calc(var(--mflow-y) * -1px)); }
}

/* Method, 03 → X: the small "Feature engineering" box the oil posts go into (a button), its "click me" note beside it,
   and the 17 features it opens: a light-dismiss popover (Esc or a click outside closes it), the owner's table, plain. */
.mflow-fe { position: absolute; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mflow-fe-box { display: flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; border-radius: 9px; background: #ffffff; border: 1px solid rgba(154, 118, 56, .5);
  box-shadow: 0 1px 2px rgba(38, 38, 38, .04), 0 10px 22px -14px rgba(92, 70, 38, .4); font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: -.005em; color: #015c4d;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.mflow-fe-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; transition: color .2s var(--ease); }
.mflow-fe-hint > span { color: #9a7638; }
@media (min-width: 1069px) and (hover: hover) and (pointer: fine) {   /* only a mouse: a touch screen this wide keeps no stuck hover */
  .mflow-fe:hover .mflow-fe-box { border-color: #015c4d; }   /* the edge turns green and the note darkens: it answers, it does not lift */
  .mflow-fe:hover .mflow-fe-hint { color: var(--ink); }
}
.mflow-fe:focus-visible { outline: none; }
.mflow-fe:focus-visible .mflow-fe-box { outline: 2px solid #015c4d; outline-offset: 3px; }

.features-pop { width: min(1080px, calc(100vw - 48px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid rgba(154, 118, 56, .3);
  border-radius: 18px; background: #fffdf8; color: var(--ink); box-shadow: 0 30px 80px -30px rgba(15, 46, 41, .45); overflow: hidden; }
.features-pop:popover-open { display: flex; flex-direction: column; }
.features-pop::backdrop { background: rgba(15, 46, 41, .22); }
.features-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px 12px; }
.features-head h3 { font-size: 20px; line-height: 26px; font-weight: 650; letter-spacing: -.015em; color: #015c4d; }
.features-close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(154, 118, 56, .35); background: transparent; color: var(--ink-2); cursor: pointer; }
.features-close:hover { background: rgba(154, 118, 56, .1); color: var(--ink); }
.features-scroll { overflow: auto; padding: 0 28px 22px; }
.features-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13.5px; line-height: 20px; }
.features-table th { position: sticky; top: 0; padding: 10px 16px 10px 0; border-bottom: 1px solid rgba(154, 118, 56, .4); background: #fffdf8; text-align: left;
  font-size: 10.5px; line-height: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.features-table td { padding: 10px 16px 10px 0; border-top: 1px solid rgba(154, 118, 56, .16); vertical-align: top; color: var(--ink-2); }
.features-table tbody tr:first-child td { border-top: 0; }
.features-table .ft-n { width: 26px; font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 14px; color: #9a7638; }
.features-table .ft-name { width: 210px; }
.features-table code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 20px; color: #015c4d; }
.features-table .ft-q { width: 250px; color: var(--ink); }
.features-table .ft-src { width: 160px; padding-right: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-3); }
.features-table .ft-gpt { color: #015c4d; }
.features-note { max-width: 780px; margin: 0 0 14px; font-size: 13.5px; line-height: 21px; color: var(--ink-2); text-wrap: pretty; }

/* The features sheet, minimal: four groups in two columns, one line per feature (its name and its question); a tap opens
   how the value is set. The source is said once, beside each group's name. */
.features-pop--min { width: min(940px, calc(100vw - 48px)); }
.features-pop--min .features-head { align-items: flex-start; padding: 22px 28px 6px; }
.features-lead { margin-top: 4px; font-size: 13.5px; line-height: 20px; color: var(--ink-3); }
.features-pop--min .features-scroll { padding: 8px 28px 24px; }
.ft-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.ft-group + .ft-group { margin-top: 22px; }
.ft-group h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(154, 118, 56, .4);
  font-size: 10.5px; line-height: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #015c4d; }
.ft-group h4 .ft-src { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.ft-list { list-style: none; margin: 0; padding: 0; }
.ft-list li + li { border-top: 1px solid rgba(154, 118, 56, .14); }
.ft-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 12px; column-gap: 14px; row-gap: 1px; padding: 9px 0; cursor: pointer; list-style: none; }
.ft-item summary::-webkit-details-marker { display: none; }
.ft-item .ft-q { grid-column: 1; grid-row: 1; font-size: 13.5px; line-height: 19px; color: var(--ink); text-wrap: pretty; }   /* the question first, the name under it */
.ft-item code { grid-column: 1; grid-row: 2; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 16px; color: #015c4d; opacity: .85; }
.ft-chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink-4); transition: transform .2s var(--ease); }
.ft-item[open] .ft-chev { transform: rotate(180deg); }
.ft-item summary:hover .ft-q { color: #015c4d; }
.ft-item summary:focus-visible { outline: 2px solid #015c4d; outline-offset: 2px; border-radius: 4px; }
.ft-how { margin: 0; padding: 0 26px 11px 0; font-size: 12.5px; line-height: 19px; color: var(--ink-3); text-wrap: pretty; }
/* Each input in a row (owner, 8 Oct 2026: "too much text, difficult to understand"): a short name, a grey example
   where one helps, the code name under them, and the values it takes in a small gold pill. Nothing to open. */
.ft-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 8px 0; }
.ft-l { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.ft-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.ft-hint { font-size: 12.5px; line-height: 20px; color: var(--ink-4); }
.ft-row code { flex-basis: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 16px; color: #015c4d; opacity: .8; overflow-wrap: anywhere; }
.ft-val { padding: 1px 8px; border: 1px solid rgba(154, 118, 56, .35); border-radius: 999px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 16px; color: #8a672b; white-space: nowrap; }
.features-pop--min .features-note { max-width: none; margin: 22px 0 0; padding-top: 12px; border-top: 1px solid rgba(154, 118, 56, .14); font-size: 12px; line-height: 18px; color: var(--ink-4); }
@media (max-width: 734px) {
  .features-pop--min .features-head { padding: 14px 10px 8px 20px; }   /* the close button where the other four sheets have it (the phone pass, 7 Oct 2026) */
  .features-pop--min .features-scroll { padding: 0 20px 20px; border-top: 1px solid transparent; }
  .features-pop--min.is-scrolled .features-scroll { border-top-color: rgba(154, 118, 56, .2); }   /* once the list moves, a hairline under the head: the rows pass under it (main.js initFeatures) */
  .ft-cols { grid-template-columns: minmax(0, 1fr); }
  .ft-cols > div + div, .ft-group + .ft-group { margin-top: 16px; }
  /* each group's name and source stay over its rows while they scroll (the 6px the list's top padding was is now the head's) */
  .ft-group h4 { position: sticky; top: 0; z-index: 1; padding-top: 6px; background: #fffdf8; font-size: 11px; }
  .ft-group h4 .ft-src { font-size: 13px; text-align: right; }
  .ft-item summary { padding: 10px 0; column-gap: 10px; }   /* a 306px name column at 402 */
  /* at full strength. The longest name (41 characters) is 304px in Safari's SF Mono at 12px (296 in Chrome's Menlo), so
     it holds one line at 402 and wider; narrower, it breaks only after an underscore (main.js initFeatures adds the
     break chances on phones), never inside a word */
  .ft-item code { font-size: 12px; line-height: 17px; opacity: 1; overflow-wrap: break-word; }
  .ft-how { font-size: 13px; line-height: 19px; }
  .features-pop--min .features-note { font-size: 13px; line-height: 19px; }
  .ft-name { font-size: 15px; line-height: 21px; }
  .ft-hint { font-size: 13px; line-height: 21px; }
  .ft-row code { font-size: 12px; line-height: 17px; opacity: 1; }
  .ft-val { font-size: 12px; line-height: 18px; }
}
/* A phone held sideways (tablet-wide, but short and touch): as upright, the page holds still behind an open sheet and
   the list's end does not hand the swipe on to the page. Not on tablets: headless Chrome draws the sheet's text with
   different anti-aliasing under these rules, and tablets must stay pixel-identical. */
@media (max-width: 1068px) and (max-height: 500px) and (pointer: coarse) {
  html:has(.features-pop:popover-open) { overflow: hidden; }
  .features-scroll { overscroll-behavior: contain; }
  /* and it is a phone's sheet: a 44px close button, the phone's type (nothing under the 13px and 11px floors, the names
     at full strength), each group's name pinned over its rows; the two columns stay, 826px holds them */
  .features-close { width: 44px; height: 44px; }
  .ft-group h4 { position: sticky; top: 0; z-index: 1; padding-top: 6px; background: #fffdf8; font-size: 11px; }
  .ft-group h4 .ft-src { font-size: 13px; }
  /* as upright: the list's top padding is the heads' own (a pinned head sat 8px down, cut rows showing above it), and
     once the list moves a hairline under the sheet's head (main.js initFeatures) */
  .features-pop--min .features-scroll { padding-top: 0; border-top: 1px solid transparent; }
  .features-pop--min.is-scrolled .features-scroll { border-top-color: rgba(154, 118, 56, .2); }
  .ft-item code { font-size: 12px; line-height: 17px; opacity: 1; overflow-wrap: break-word; }
  .ft-how { font-size: 13px; line-height: 19px; }
  .features-pop--min .features-note { font-size: 13px; line-height: 19px; }
}
/* No sticky hover on a touch screen (iOS keeps :hover on the last tapped element): a closed row's question goes back to
   ink, and the close button to its rest. A press shows instead. */
@media (hover: none) and (max-width: 734px), (hover: none) and (max-width: 1068px) and (max-height: 500px) and (pointer: coarse) {
  .ft-item summary:hover .ft-q { color: var(--ink); }
  .ft-item summary:active .ft-q { color: #015c4d; }
  .features-close:hover { background: transparent; color: var(--ink-2); }
  .features-close:active { background: rgba(154, 118, 56, .1); color: var(--ink); transition-duration: 0s; }
}
/* 320px (an iPhone SE, or Page Zoom): a group's source drops whole under its name, on the same left edge, rather than
   breaking mid-phrase on the right of a pinned head */
@media (max-width: 359px) {
  .ft-group h4 { flex-wrap: wrap; row-gap: 2px; }
  .ft-group h4 .ft-src { white-space: nowrap; text-align: left; }
}

/* Desktop: the button rests at the page's control elevation and answers in the quick hover time. The popover rises in
   over a fading backdrop (it closes at once), keeps the wheel to itself, and its header keeps its rule while the rows
   pass under it. Phones open the same popover from the footer and keep its look as it is. */
@media (min-width: 1069px) {
  .mflow-fe-box { box-shadow: var(--elev-1-sm); transition: border-color var(--t-quick) var(--ease); }
  .mflow-fe-hint { transition-duration: var(--t-quick); }
  .features-close { transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease); }
  .features-scroll { overscroll-behavior: contain; }   /* at the table's end the page behind does not scroll on */
  .features-table td { font-size: 13px; }
  .features-table th { border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(154, 118, 56, .4); letter-spacing: .14em; }   /* collapsed borders stay with the table; drawn inside the sticky th, the rule rides with it */
  .features-table .ft-name { width: 236px; }   /* every name but the longest stays on one line in Safari's wider SF Mono (209px for the status_ names, with 5% to spare) */
  .features-table .ft-src { font-size: 12px; }
}
@media (min-width: 1069px) and (forced-colors: active) {
  .features-table th { border-bottom: 1px solid CanvasText; }   /* shadows are dropped, so the header's rule is a border again */
}
@media (min-width: 1069px) and (prefers-reduced-motion: no-preference) {
  .features-pop:popover-open { animation: sheet-in var(--t-fade) var(--ease); }
  .features-pop:popover-open::backdrop { animation: backdrop-in var(--t-fade, .25s) ease; }   /* the fallback where ::backdrop does not inherit the page's names */
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Appendix sheets (footer): example posts, Brent data, data representation, code ----------
   They are the features sheet (.features-pop) with a subtitle, at their own widths; web/build_appendix.py writes them.
   One code palette serves the JSON and the Python: PIF green keywords, gold strings, warm grey comments, steel numbers. */
.apx-pop--posts { width: min(640px, calc(100vw - 48px)); }
@media (min-width: 735px) {
  .apx-pop--posts { margin-block: max(24px, 8vh) auto; }   /* hangs from the top: a shorter post never moves the buttons */
}
.apx-pop--brent { width: min(780px, calc(100vw - 48px)); }

/* Example of Trump posts, as Truth Social draws them: white, his picture, name, the verified mark, handle and time,
   the text, a quoted post or a video, the action row; the study's tags at the foot. */
.apx-pop--posts .features-scroll.ts-feed { padding: 0; background: #ffffff; border-top: 1px solid #ebebef; touch-action: pan-y; }   /* a sideways swipe steps (main.js) */
.apx-pop--posts .apx-step svg { transform: rotate(-90deg); }   /* one post at a time (owner, 8 Oct 2026): back and on point left and right */
.ts-list { list-style: none; margin: 0; padding: 0; }
.ts-post { padding: 16px 24px 12px; border-top: 1px solid #ebebef; color: #0f1419; }
.ts-post:first-child { border-top: 0; }
.ts-retruth { display: flex; align-items: center; gap: 6px; margin: 0 0 8px 30px; font-size: 13px; line-height: 18px; font-weight: 600; color: #6b7280; }
.ts-head { display: flex; align-items: center; gap: 11px; }
.ts-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
.ts-who { display: flex; flex-direction: column; min-width: 0; }
.ts-name { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; line-height: 20px; font-weight: 700; color: #0f1419; }
.ts-verified { flex: none; }
.ts-handle { font-size: 13.5px; line-height: 19px; color: #6b7280; }
.ts-handle a { color: inherit; text-decoration: none; }
.ts-handle a:hover { text-decoration: underline; }
.ts-text { margin: 10px 0 0; font-size: 15px; line-height: 22px; color: #0f1419; white-space: pre-line; overflow-wrap: anywhere; }
.ts-text a { color: #5448ee; text-decoration: none; }
.ts-text a:hover { text-decoration: underline; }
.ts-quote { margin-top: 12px; padding: 12px 14px; border: 1px solid #e3e3e8; border-radius: 12px; }
.ts-quote .ts-text { margin-top: 2px; font-size: 14px; line-height: 20px; }
.ts-quote-who { font-size: 13px; line-height: 18px; font-weight: 700; color: #0f1419; }
.ts-media { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; height: 168px; border-radius: 12px;
  background: linear-gradient(160deg, #23232b, #0d0d12); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.ts-media svg { padding: 8px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ts-actions { display: flex; justify-content: space-between; max-width: 360px; margin-top: 12px; color: #8b8f98; }
.ts-act { display: grid; place-items: center; width: 30px; height: 30px; }
.ts-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }

/* Example of Brent data: a year, a month, a minute and a second, as tabs; each a line chart and the rows as stored. */
.apx-brent-body .apx-tab { font-family: var(--font); font-size: 12.5px; }
.apx-bview { margin-top: 14px; }
.apx-bview[hidden] { display: none; }
.apx-chart { margin: 0; padding: 14px 14px 10px; border: 1px solid rgba(154, 118, 56, .24); border-radius: 14px; background: #ffffff; }
.apx-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.apx-svg .g { stroke: rgba(38, 38, 38, .08); stroke-width: 1; fill: none; }
.apx-svg .yl { font-size: 11px; fill: var(--ink-4); text-anchor: end; font-variant-numeric: tabular-nums; }
.apx-svg .xl { font-size: 11px; fill: var(--ink-4); text-anchor: middle; font-variant-numeric: tabular-nums; }
.apx-svg .a { fill: rgba(1, 92, 77, .07); stroke: none; }
.apx-svg .l { fill: none; stroke: #015c4d; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.apx-svg .d { fill: #015c4d; stroke: #ffffff; stroke-width: 1; }
.apx-svg .m { stroke: #9a7638; stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.apx-svg .ml { font-size: 11px; font-weight: 600; fill: #8a672b; text-anchor: middle; }
.apx-chart .apx-foot { margin-top: 8px; padding: 0 4px; }
@media (max-width: 734px) {   /* the chart shrinks to the phone: its labels grow in its own units to stay readable */
  .apx-chart { padding: 12px 10px 8px; }
  .apx-svg .yl, .apx-svg .xl, .apx-svg .ml { font-size: 21px; }
  .apx-svg .xl:nth-of-type(even) { display: none; }
}
.apx-pop--code { width: min(980px, calc(100vw - 48px)); }
.apx-pop--repr { width: min(1140px, calc(100vw - 48px)); }
.apx-head { align-items: flex-start; padding: 22px 28px 16px; }
.apx-titles { flex: 1 1 auto; min-width: 0; }
.apx-sub { margin-top: 3px; font-size: 13px; line-height: 19px; color: var(--ink-3); text-wrap: pretty; }
.apx-pop .features-scroll { padding-top: 2px; }

/* Example of Trump posts: a quiet ledger, the date on the left, the words on the right */
.apx-posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(154, 118, 56, .4); }
.apx-post { display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: 28px; padding: 18px 0 19px; border-top: 1px solid rgba(154, 118, 56, .16); }
.apx-post:first-child { border-top: 0; }
.apx-when { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 19px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.apx-when > span + span { font-weight: var(--text-weight); color: var(--ink-3); font-size: 12.5px; }
.apx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.apx-tag { padding: 1px 8px; border: 1px solid rgba(154, 118, 56, .4); border-radius: 999px; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.apx-tag--oil { border-color: transparent; background: var(--green-soft); color: #015c4d; }
.apx-tag--muted { border-style: dashed; color: var(--ink-4); }
.apx-text { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; }

/* Example of Brent data */
.apx-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
.apx-table th { position: sticky; top: 0; padding: 10px 0 10px 14px; background: #fffdf8; box-shadow: inset 0 -1px 0 rgba(154, 118, 56, .4); text-align: right;
  font-size: 10.5px; line-height: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.apx-table th:first-child { padding-left: 12px; text-align: left; }
.apx-table td { padding: 8px 0 8px 14px; border-top: 1px solid rgba(154, 118, 56, .16); text-align: right; color: var(--ink-2); white-space: nowrap; }
.apx-table tbody tr:first-child td { border-top: 0; }
.apx-table .apx-t { padding-left: 12px; text-align: left; color: var(--ink); font-weight: 600; }
.apx-ch { font-weight: 600; }
.apx-ch span { font-size: 9px; position: relative; top: -1px; }
.apx-ch--up { color: var(--up); }
.apx-ch--down { color: var(--down); }
.apx-ch--flat { color: var(--ink-4); }
.apx-table .apx-note { width: 1%; padding-right: 4px; text-align: left; }
.apx-row-hit td { background: rgba(154, 118, 56, .085); }
.apx-row-hit td:first-child { box-shadow: inset 2px 0 0 #9a7638; }
.apx-hit { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #8a672b; }
.apx-hit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9a7638; }
.apx-label { margin: 22px 0 8px; font-size: 10.5px; line-height: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.apx-raw, .apx-json { margin: 0; padding: 13px 16px; border: 1px solid rgba(154, 118, 56, .24); border-radius: 12px; background: #fbf8f1; overflow: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 20px; color: var(--ink); }
.apx-raw-h { color: var(--ink-4); }
.apx-foot { margin-top: 12px; font-size: 12.5px; line-height: 18px; color: var(--ink-3); }

/* Data representation: post → features → X, ten examples behind the up and down arrows */
.apx-nav { display: flex; align-items: center; gap: 6px; flex: none; margin-right: 6px; }
.apx-count { min-width: 52px; margin-right: 4px; text-align: right; font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-size: 15px; line-height: 36px; color: #9a7638; font-variant-numeric: tabular-nums; }
.apx-count b { font-weight: 400; color: #015c4d; }
.apx-step { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(154, 118, 56, .35); background: #fffdf8; color: #015c4d; cursor: pointer; }
.apx-step:hover { background: rgba(154, 118, 56, .1); }
.apx-step:focus-visible, .apx-tab:focus-visible, .apx-code:focus-visible { outline: 2px solid #015c4d; outline-offset: 2px; }
.apx-ex { display: grid; grid-template-columns: minmax(0, 1.12fr) 22px minmax(0, 1fr) 22px minmax(0, .92fr); column-gap: 16px; align-items: start; padding-top: 4px; }
.apx-ex[hidden] { display: none; }
.apx-col h4 { display: flex; align-items: center; gap: 8px; height: 26px; margin: 0 0 10px; font-size: 10.5px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #015c4d; }
.apx-n { font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-size: 14px; letter-spacing: 0; color: #9a7638; position: relative; top: -1px; }
.apx-arrow { align-self: start; margin-top: 150px; color: #9a7638; }
.apx-card { max-height: 410px; overflow: auto; padding: 16px 18px 18px; border: 1px solid rgba(38, 38, 38, .1); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(38, 38, 38, .04), 0 16px 34px -22px rgba(92, 70, 38, .3); }
.apx-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.apx-who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.apx-who > span { display: flex; flex-direction: column; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.apx-who b { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); }
.apx-card .apx-text { font-size: 14px; line-height: 21px; }
.apx-json { font-size: 11.5px; line-height: 19px; }
.apx-jb, .apx-jl { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.apx-jl { padding-left: 4ch; text-indent: -2ch; }   /* a long value wraps under its key's text, not under the brace */
.apx-json .tk-k { font-weight: 500; color: #0f2e29; }
.apx-rule { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; line-height: 18px; color: var(--ink-3); }
.apx-dir { display: inline-flex; gap: 4px; padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.apx-dir--up { background: var(--up-soft); color: var(--up); }
.apx-dir--down { background: var(--down-soft); color: var(--down); }
.apx-vec { margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(154, 118, 56, .24); border-radius: 12px; background: #fbf8f1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 19px; color: var(--ink-4); overflow-wrap: anywhere; }
.apx-vec b { font-weight: 600; color: #015c4d; }
.apx-xi { font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-size: 15px; color: #015c4d; }
.apx-xi sub { font-family: var(--font); font-size: 9.5px; }
.apx-x { list-style: none; margin: 0; padding: 0; }
.apx-x li { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: baseline; padding: 2px 0 2px 10px; border-top: 1px solid rgba(154, 118, 56, .13); }
.apx-x li:first-child { border-top: 0; }
.apx-x code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 17px; color: var(--ink-4); }
.apx-x span { text-align: right; font-size: 12px; line-height: 17px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.apx-x li.on { box-shadow: inset 2px 0 0 #9a7638; background: rgba(154, 118, 56, .06); }
.apx-x li.on code, .apx-x li.on span { color: #015c4d; font-weight: 600; }

/* Code example: two files behind a pill switch, in a quiet ivory editor */
.apx-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(154, 118, 56, .3); border-radius: 999px; background: #fffdf8; }
.apx-tab { padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 18px; color: var(--ink-3); cursor: pointer; }
.apx-tab:hover { color: var(--ink); }
.apx-tab[aria-selected="true"] { background: #015c4d; color: #fffdf8; }
.apx-codebox { margin-top: 14px; border: 1px solid rgba(154, 118, 56, .28); border-radius: 14px; background: #fcfaf5; overflow: hidden;
  box-shadow: 0 1px 2px rgba(38, 38, 38, .04), 0 16px 34px -22px rgba(92, 70, 38, .3); }
.apx-codebox[hidden] { display: none; }
.apx-codebar { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-bottom: 1px solid rgba(154, 118, 56, .2); background: #f6f0e4;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 16px; color: var(--ink-3); }
.apx-codebar > span:last-child { margin-left: auto; font-family: var(--font); color: var(--ink-4); }
.apx-dots { display: flex; gap: 6px; }
.apx-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(154, 118, 56, .5); }
.apx-dots i:first-child { background: rgba(154, 118, 56, .45); }
.apx-code { margin: 0; padding: 14px 24px 18px 0; max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); overflow: auto; overscroll-behavior: contain;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 21px; color: #262626; tab-size: 4; }
.apx-ln { display: inline-block; width: 52px; padding-right: 20px; text-align: right; color: rgba(154, 118, 56, .6); user-select: none; -webkit-user-select: none; }
.tk-k { color: #015c4d; font-weight: 600; }
.tk-f { color: #0f2e29; font-weight: 600; }
.tk-b { color: #2c7a68; }
.tk-s { color: #8a672b; }
.tk-d { color: #9a7638; font-style: italic; }
.tk-cm { color: #8f877a; font-style: italic; }
.tk-n, .tk-c { color: #2f6680; }
.tk-o { color: #7d7d7d; }

@media (min-width: 1069px) {
  .apx-step, .apx-tab { transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease); }
}
@media (prefers-reduced-motion: no-preference) {
  .apx-ex:not([hidden]) { animation: apx-in var(--t-fade, .25s) var(--ease); }
}
@keyframes apx-in { from { opacity: 0; transform: translateY(4px); } }

/* Tablets and phones: the three steps stack, the arrows turn down */
@media (max-width: 1068px) {
  .apx-ex { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .apx-arrow { margin: 0 auto; transform: rotate(90deg); }
  .apx-card { max-height: none; }
}
@media (max-width: 734px) {
  html:has(.apx-pop:popover-open) { overflow: hidden; }
  .apx-pop { width: calc(100vw - 32px); }
  .apx-head { flex-wrap: wrap; padding: 14px 10px 10px 20px; row-gap: 10px; }
  .apx-titles { flex-basis: calc(100% - 64px); }
  .apx-nav { order: 3; flex-basis: 100%; justify-content: flex-start; margin: 0; }
  .apx-count { order: 3; min-width: 0; margin: 0 0 0 6px; text-align: left; }
  .apx-step { width: 44px; height: 44px; }
  .apx-card { max-height: 300px; }   /* a long post scrolls in its card, so the features and X stay near */
  .apx-pop .features-scroll { overflow-x: auto; }
  .apx-post { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .apx-when { flex-direction: row; flex-wrap: wrap; column-gap: 8px; }
  .apx-tags { flex-basis: 100%; margin-top: 4px; }
  .apx-text { font-size: 15px; line-height: 22px; }
  .apx-table th:nth-child(2), .apx-table td:nth-child(2), .apx-table th:nth-child(3), .apx-table td:nth-child(3) { display: none; }
  .apx-table .apx-note { display: none; }
  .apx-code { max-height: calc(100svh - 250px); font-size: 12px; }
  .apx-ln { width: 40px; padding-right: 14px; }
  .apx-codebar > span:last-child { display: none; }
}

/* ---------- Method: the owner's whiteboard as a flowchart, black and white until the design is set ---------- */

/* Everything flows down, in two lanes: the posts on the left (1 → 2 → 3), and on the right, a little higher, the
   prices feeding the labels (4 → 5). The oil posts' timestamps go up and right into the labels. The prices lane sits on
   the posts lane's foot, lifted by --flow-lift, so the labels always span the end of that arrow, however the boxes'
   text wraps. Arrows are the steps' pseudo-elements: a 1px line and a solid head. */
.report--method { padding-top: 0; }   /* Findings' foot is the gap */

.flow {
  --flow-gap: 48px;     /* between a lane's boxes: the arrows down */
  --flow-cross: 64px;   /* between the lanes: the arrow up and right, "timestamps" along it */
  --flow-rise: 48px;    /* how far that arrow climbs (4:3 to --flow-cross, the angle its label is set at) */
  --flow-y: 40px;       /* where it leaves "About oil", from the box's top */
  --flow-lift: 40px;    /* the prices lane ends this far above the posts lane */
  --arrow-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E");
  --arrow-ur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M0 48L57.6 4.8' stroke='%23000' fill='none'/%3E%3Cpath d='M64 0l-3.7 8.4-5.4-7.2z'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--flow-cross) minmax(0, 1fr);
  max-width: 760px;
  margin: 48px auto 0;
  color: #000;
}

.flow-lane { display: flex; flex-direction: column; gap: var(--flow-gap); margin: 0; padding: 0; list-style: none; }
.flow-lane--posts { grid-column: 1; align-self: start; }
.flow-lane--prices { grid-column: 3; align-self: end; padding-bottom: var(--flow-lift); }

.flow-step { position: relative; padding: 18px 20px 20px; border: 1px solid #000; background: #fff; }
.flow-n { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; }
/* The model's terms, in the box's top right corner: X on the oil posts (their features), Y on the labels. */
.flow-var { position: absolute; top: 12px; right: 18px; font-size: 24px; line-height: 28px; font-weight: 650; letter-spacing: 0; }
.flow-t { margin-top: 8px; font-size: 17px; line-height: 24px; font-weight: 650; letter-spacing: -.01em; }
.flow-v { margin-top: 8px; font-size: 30px; line-height: 36px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.flow-d { margin-top: 8px; font-size: 14px; line-height: 21px; text-wrap: pretty; }
.flow-list { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid #000; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.flow-list li { padding: 5px 0; border-bottom: 1px solid #000; }

/* Down, within a lane. */
.flow-step--posts::after,
.flow-step--features::after,
.flow-step--prices::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: calc(50% - 5px);
  width: 11px;
  height: var(--flow-gap);
  background: var(--arrow-d) center bottom / 11px 8px no-repeat, linear-gradient(#000 0 0) center top / 1px calc(100% - 7px) no-repeat;
}

/* Up and right, from the oil posts into the labels, with "timestamps" along it. */
.flow-step--oil::after {
  content: "";
  position: absolute;
  top: calc(var(--flow-y) - var(--flow-rise));
  left: calc(100% + 1px);
  width: var(--flow-cross);
  height: var(--flow-rise);
  background: var(--arrow-ur) center / 100% 100% no-repeat;
}
.flow-step--oil::before {
  content: "timestamps";
  position: absolute;
  top: calc(var(--flow-y) - var(--flow-rise) / 2 - 7px);
  left: calc(100% + 1px + var(--flow-cross) / 2 - 5px);
  transform: translate(-50%, -50%) rotate(-36.87deg);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}

@media (max-width: 734px) {
  .flow { --flow-gap: 40px; --flow-cross: 60px; --flow-rise: 45px; --flow-y: 34px; --flow-lift: 32px; margin-top: 32px; }   /* a 75px arrow: room for its label */
  .flow-step { padding: 12px 12px 14px; }
  .flow-var { top: 8px; right: 12px; font-size: 20px; line-height: 24px; }
  .flow-t { margin-top: 6px; font-size: 15px; line-height: 20px; }
  .flow-v { margin-top: 6px; font-size: 24px; line-height: 30px; }
  .flow-d { margin-top: 6px; font-size: 13px; line-height: 19px; }
  .flow-list { font-size: 14px; line-height: 20px; }
  .flow-step--oil::before { font-size: 10px; line-height: 12px; }
}

/* ---------- Footer ---------- */

/* Quiet and plain (owner, 2 Oct 2026: "more minimalistic and simple"): the author and, under his line, the appendix
   stacked (owner: "Put the appendix under the 'developed in consultation with Claude'"); the contact beside them;
   the sources and the small print on one line each under a hairline. Smaller text, links without underlines until
   hovered. "Features description" opens Method's #features table; the other appendix entries wait for their pages. */
.site-footer {
  padding-block: 48px 32px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  line-height: 22px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
}

.footer-name { font-size: 16px; line-height: 22px; font-weight: 650; letter-spacing: -.01em; }
.footer-about { max-width: 380px; margin-top: 6px; color: var(--ink-3); text-wrap: pretty; }

.footer-col h2 { margin-bottom: 10px; }

.site-footer .label,
.site-footer a { color: var(--ink); }

.site-footer a:not(.logo), .footer-link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .2s var(--ease); }
.footer-link { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }

@media (hover: hover) and (pointer: fine) {
  .site-footer a:not(.logo):hover, .footer-link:hover { text-decoration-color: currentColor; }
}

.footer-links { list-style: none; padding: 0; display: grid; gap: 6px; }
.footer-appendix-nav { margin-top: 24px; }
.footer-appendix-nav h2 { margin-bottom: 10px; }
.footer-appendix li { display: flex; align-items: baseline; }   /* no numerals (owner, 3 Oct 2026: "Remove the numbers on the appendix and so on") */
.footer-soon { color: var(--ink-4); }

.contact { font-style: normal; }
.footer-place { color: var(--ink-3); }
.footer-note { color: var(--ink-3); }   /* what each source gave, after its link */

.footer-base {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-3);
}
.footer-base a { color: var(--ink-2); }

@media (min-width: 1069px) {
  .site-footer { letter-spacing: -.006em; }   /* Inter's tracking at 14px (the body's -0.198px is -.014em here) */
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }   /* Contact starts on the axis + 32px, under Limitations' right column, at every width */
  .site-footer .label { font-size: 11px; line-height: 16px; letter-spacing: .14em; }   /* the page's one caps-label step (11/16, .14em) */
  .footer-col h2 { margin: 5px 0 7px; }   /* "Contact" on the baseline of "Majd Jamal", and the first link level with the about text's first line */
  .footer-appendix-nav h2 { margin-bottom: 7px; }   /* the same label-to-list step as Contact's */
  .footer-base { letter-spacing: 0; }   /* 12px small print wants Inter's own spacing */
  .site-footer a:not(.logo), .footer-link { transition-duration: var(--t-quick); }   /* the page's one hover timing */
  .site-footer a:focus-visible, .footer-link:focus-visible { border-radius: 4px; }   /* the ring follows a small radius, as every other ring */
}

/* ---------- Tablet: 735–1068px ---------- */

@media (max-width: 1068px) {
  .composer-col { max-width: 560px; }   /* the question over the post box, in one column */
  .slide { padding: 44px 44px 48px; }
  .slide-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Phone: up to 734px ---------- */

@media (max-width: 734px) {
  /* The logo and the pill sit 8px lower than the header's middle (16px above the mark, 8px below), so the logo
     does not look pinned to the top of the screen. .container is content-box, so the padding comes off the height. */
  .logo { gap: 14px; }
  .logo-mark { width: 37px; height: 64px; }
  .logo-by { font-size: 13px; line-height: 18px; }

  .post { padding: 18px 18px 20px; }
  .post-src:not(.post-src--hypo) { display: none; }   /* narrow cards: keep the name on one line; the demo's label stays */

  .header-end { gap: 8px; }

  .after-value { font-size: 26px; line-height: 32px; }

  .pull-quote p { font-size: 21px; }

  body { font-size: 17px; line-height: 26px; }
  .findings { padding-block: 56px 64px; }
  .finding > summary { font-size: 17px; line-height: 24px; }
  .finding p { padding-left: 0; }
  .deck-nav { gap: 10px; }
}

/* ---------- Phone (≤734px): FOUNDATION ---------- */

@media (max-width: 734px) {
  /* The pill says whose sentiment it is: "Trump’s sentiment" over the circle and the word. The full label stays for
     screen readers. Its tip hangs from the header, on the gutter. */
  .now { flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; min-width: 44px; padding: 0; }
  .now-k { font-size: 13px; line-height: 16px; color: var(--ink-3); text-align: right; }
  .now-k-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .now-k-short { display: inline; white-space: nowrap; }
  .now-v { font-size: 16px; line-height: 20px; }
  .now-wrap { position: static; }
  .now-tip { top: calc(100% + 4px); right: var(--gutter); max-width: calc(100vw - 2 * var(--gutter)); }

  /* The lattice as a fine texture: its own phone drawing at 1:1, so the 1px lines stay crisp at 3x. The offset is a
     whole number (a centred tile lands on half pixels at odd widths); 33px puts a column on the centre line of a
     402px iPhone, a few px off on other phones. (Lisbon was 56 x 79 at .16; F was 45 x 66 at .2.) */
  body::before {
    background-image: var(--hero-screen-sm);
    background-size: 84px 132px;
    background-position: 33px 0;
    opacity: .24;
  }

  .composer-credit.composer-claim { padding-left: 1.35em; }   /* the phone mark is 1em */

  .lead { font-size: 17px; line-height: 26px; }
}

/* Below 420px "Trump’s sentiment" would reach the byline, so it stacks in two lines. */
@media (max-width: 419px) {
  .now-k-2 { display: block; }
}

/* ---------- Phone (≤734px): DEMO ---------- */

@media (max-width: 734px) {
  /* The count on the left, a thumb-sized button on the right, and the answer on its own line under both. The empty
     answer stays a 0-height row: it is the live region, so VoiceOver still hears "Analyzing the post…" and the call. */
  .composer-foot { flex-wrap: wrap; row-gap: 0; }
  .composer-count { order: 1; margin-right: auto; }
  .composer-go { order: 2; margin-left: 0; min-height: 44px; padding: 0 20px; font-size: 15px; }
  .composer-result { order: 3; flex: 1 0 100%; font-size: 16px; line-height: 24px; color: var(--ink); text-wrap: pretty; }
  .model-more { margin-top: 16px; }

  /* The metrics and how they were tested stay quiet on a phone, in the faintest grey and two sizes down, the
     numbers no bolder than a medium, so the post box leads. */
  .model-metrics .label { color: var(--ink-4); }
  .metric { font-size: 14px; line-height: 21px; color: var(--ink-4); }
  .metric b { font-weight: 500; color: var(--ink-3); }
  .model-more > summary { color: var(--ink-4); font-size: 14px; font-weight: 500; }
  .model-more p { font-size: 14px; line-height: 21px; color: var(--ink-4); }

  /* The OpenAI mark reads as one of the credit's words. */
  .composer-credit { text-wrap: pretty; }
  .openai { fill: currentColor; width: 1em; height: 1em; vertical-align: -.14em; }
}

/* ---------- Phone (≤734px): RHYTHM ---------- */

@media (max-width: 734px) {
  /* The gold rule and the space around it set the quote apart, so no grey hairline above it. */
  .why { padding-block: 56px; border-top: 0; }
  .pull-quote figcaption { margin-top: 14px; font-size: 11px; line-height: 16px; letter-spacing: .14em; }   /* the page's one caps-label step, as the desktop's (the phone pass, 7 Oct 2026; was 13px) */
  .pull-quote::before { background: #9a7638; }   /* the page's one solid gold, as the desktop's --gilt (only defined from 1069px) */

  .how { padding-block: 64px 72px; border-top: 1px solid var(--line); }
  .deck { margin-top: 28px; }

  /* Every slide stretches to the track, which main.js holds at the tallest slide with its values folded: the values
     sit at the foot and the controls below never move on a swipe, only when a value opens or closes. */
  .deck-track { align-items: stretch; overflow-y: hidden; border-radius: 22px; transition: height .25s var(--ease); }

  /* One question per slide; each definition folds behind its value's name (main.js adds the buttons). */
  .slide { padding: 26px 18px 24px; border-radius: 22px; }   /* the one 18px inner edge: text at x 38 */
  .slide-k { font-size: 13px; }
  .slide-q { margin-top: 14px; font-size: 26px; line-height: 30px; letter-spacing: -.025em; }
  .slide-why { margin-top: 12px; font-size: 16px; line-height: 25px; }
  .slide-values { grid-template-columns: minmax(0, 1fr); padding-top: 20px; gap: 0; }
  .slide-values > div { padding: 0; border-top: 1px solid var(--line); }
  .value-toggle {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: 600 16px/22px var(--font);
    letter-spacing: -.011em;
    text-align: left;
  }
  .value-name { display: flex; align-items: center; gap: 8px; }
  .value-toggle::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 400; color: var(--ink-3); transition: transform .2s var(--ease); }
  .value-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
  .slide-values dd { margin: -4px 0 0; padding-bottom: 12px; font-size: 15px; line-height: 22px; }
  /* Folded only once the buttons are there, so without the script every definition still shows. */
  .has-toggles .slide-values dd { display: none; }
  .has-toggles .slide-values .is-open dd { display: block; animation: value-in .2s ease both; }
  .slide-foot { margin-top: 14px; font-size: 14px; line-height: 21px; text-wrap: pretty; }

  /* A quiet progress rule instead of bars, a counter and buttons all at once; the count stays for screen readers. */
  .deck-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .deck-dots { gap: 5px; }
  .deck-dot { flex: 1; width: auto; }
  .deck-dot::before { height: 2px; margin-top: -1px; }

  /* The footer ends the page calmly: every source and credit stays, each link a full thumb tall. */
  .site-footer { padding-block: 48px 32px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-appendix-nav { margin-top: 32px; }   /* about, Appendix, Sources and Contact 32px apart, as the grid's gap (the phone pass, 7 Oct 2026) */
  .footer-about { font-size: 15px; line-height: 23px; }
  .footer-place { min-height: 44px; display: flex; align-items: center; }   /* in step with the links' thumb-tall rows */
  .footer-links { gap: 0; margin-block: -11px; }   /* the 44px rows' 11px half-row overhangs the label and the next group, so each label sits on its list and every group break is the grid's 32 (the headers pass, 7 Oct 2026) */
  .footer-links a, .contact a, .footer-link { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-appendix li { align-items: center; }
  .footer-soon { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-base { margin-top: 32px; font-size: 13px; line-height: 19px; }   /* the caption step (the headers pass, 7 Oct 2026) */
}

@keyframes value-in { from { opacity: 0; } }

/* On touch the bars only show progress: swipes and the two buttons move the deck, and keyboard focus still works. */
@media (pointer: coarse) {
  .deck-dot { pointer-events: none; }
}

/* ---------- Phone (≤734px): POSTS ---------- */

@media (max-width: 734px) {
  /* The row opens on the headline's left edge and holds its height before the posts arrive, so nothing below moves.
     12 + a 190px card + 36 of shadow room. The margin sits outside the translated width, so the loop stays seamless. */
  .lane {
    margin-top: 36px;
    min-height: 238px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 48px), transparent 100%);
  }
  .track { margin-left: var(--gutter); }
  .post-text { margin-top: 12px; font-size: 16px; line-height: 24px; -webkit-line-clamp: 4; line-clamp: 4; }

  /* The reader is one sand sheet with the white post card lying on it. The grid scrolls, not the dialog, so the
     close button stays pinned in the corner while the post scrolls under it. */
  .reader { max-height: none; overflow: hidden; border-radius: 22px; background: var(--panel); box-shadow: 0 40px 90px -24px rgba(15, 46, 41, .45); }
  .reader-grid {
    grid-template-columns: minmax(0, 1fr);
    max-height: calc(100vh - 32px);
    max-height: calc(100svh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .reader-post { margin-right: 0; padding: 22px 18px 16px; border-radius: 22px; box-shadow: 0 10px 24px -14px rgba(15, 46, 41, .3); }
  .reader-head { padding-right: 44px; }
  .reader-close { top: 12px; right: 12px; background: var(--panel); }
  .reader-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reader-text { margin-top: 12px; font-size: 17px; line-height: 26px; letter-spacing: -.011em; text-wrap: pretty; }
  .reader-text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }
  .reader-more { min-height: 44px; padding: 0; border: 0; background: none; color: var(--green); font: 600 15px/21px var(--font); text-align: left; }
  .reader-more:not([hidden]) + .reader-meta { margin-top: 8px; }   /* the button's own 44px already gives it air */
  .reader-time { white-space: nowrap; }
  .reader-side { gap: 22px; padding: 26px 18px 8px; border-radius: 0; box-shadow: none; }
  .after-sub { text-wrap: pretty; }

  /* Read more: the question gets the wider column, and the one "+" (colour from the green label). */
  .feat { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; }
  .how-read > summary::after { font-size: 22px; line-height: 1; font-weight: 400; }
}

/* ---------- Phone (≤734px): CHART ---------- */

@media (max-width: 734px) {
  .market { padding-block: 64px 80px; }
  .chart-card { padding: 20px 18px 16px; border-radius: 22px; }
  .chart { height: 240px; }
  .chart-svg { overflow: hidden; }
  .c-line { stroke-width: 1.75; }   /* a narrow plot: a touch finer, so it reads calm */
  .chart-note { text-wrap: pretty; }
}

/* Touch: main.js resolves a tap on the chart to the nearest dot, so the dots themselves take no touches.
   The lead says "Tap" instead of "Click". */
@media (pointer: coarse) {
  .markers .marker { pointer-events: none; }
  .t-touch { display: inline; }
  .t-mouse { display: none; }
}

/* Phones held sideways (touch, 735px and wider, under 500px tall): the first screen shows the question and the whole
   post box down to its button, with a two-line box and a thumb-sized button, as upright. */
@media (max-height: 500px) and (min-width: 735px) and (hover: none) and (pointer: coarse) {
  /* The post box's button on the first screen: a two-line box, a thumb-sized button, the question a little smaller. */
  .hero { padding-block: 8px 20px; }
  .hero-main { margin-block: 0 auto; }
  .hero-inner { gap: 20px; }
  .hero h1 { font-size: 38px; }
  .composer-text { min-height: 52px; }
  .composer-go { min-height: 44px; padding: 0 20px; font-size: 15px; }
  .composer-go[aria-disabled="true"] { opacity: .6; cursor: progress; }   /* asked from the keyboard upright, then turned: as :disabled */
  /* As upright: "Analyzing the post…" breathes only down to .84 (the base .55 is under AA), and the caption is --ink-3, since the
     lattice runs unmasked behind it here. */
  .composer[aria-busy="true"] .composer-result { animation: breathe-soft 2s ease-in-out .9s infinite; }
  .composer-credit { color: var(--ink-3); }
  /* The chart's sheet and its toggle fit the screen, so its time axis shows and a tap can bring the card up. */
  .reaction-chart { height: max(200px, calc(100vh - 150px)); height: max(200px, calc(100svh - 150px)); }   /* svh: steady while Safari's bars collapse */
}

/* ---------- Phone (≤734px): RHYTHM 2 — sections 64, parts 48 ---------- */

@media (max-width: 734px) {
  #findings .report-part + .report-part { margin-top: 48px; }   /* a part inside a section: less than a section break */
  #method { padding-bottom: 56px; }         /* the white quote band's edge separates; 56 on each side of it */
}

/* ---------- Phone (≤734px): FINDINGS 2 — the figures on the full rail ---------- */

@media (max-width: 734px) {
  /* Each comparison: the name and the figure on one line, the bar under them across the whole rail, so 1% against 33% reads at a glance. */
  .rs-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who v" "bar bar"; row-gap: 6px; min-height: 0; }
  .rs-who { grid-area: who; }
  .rs-v { grid-area: v; text-align: right; }
  .rs-pct { font-weight: var(--text-weight); }   /* the text weight, as on the desktop, not Inter 400 (the phone pass, 7 Oct 2026) */
  .rs-bar { grid-area: bar; height: 8px; border-radius: 0 2px 2px 0; }   /* no track, as on the desktop: the axis under the bars gives the scale */
  .rs-axis { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }   /* the axis across the whole rail, as the bars (owner, 3 Oct 2026: "update the graphs on the phone too") */
  .rs-ticks { grid-column: 1; }
  /* the end labels flush with the rail, not hanging into the gutter; the end ticks stay on 0% and 100% (the phone pass, 7 Oct 2026) */
  .rs-ticks > span:first-child { transform: none; }
  .rs-ticks > span:first-child::before { left: -.5px; }
  .rs-ticks > span:last-child { transform: translateX(-100%); }
  .rs-ticks > span:last-child::before { left: calc(100% - .5px); }
  .rs-bar::before { border-radius: 0 2px 2px 0; }
  .rs-row + .rs-row { margin-top: 14px; }
  .rs-chart figcaption { margin-bottom: 14px; }
  .rs-foot { font-size: 13px; line-height: 19px; }   /* the 13px floor, and the desktop's own note size; the model sentence stays one step up at 14/22 */
  .reaction-note { text-wrap: balance; }   /* at 320 the logo and "Dukascopy." never sit alone on the second line */
  .reaction-post .rp-meta { font-size: 13px; line-height: 18px; }   /* the card's last line at the 13px floor (only .rp-k is a recorded exception) */
  .reaction-post .rp-k { letter-spacing: 0; text-transform: none; }   /* the desktop's sentence case, so the owner's "Move, 30 s before" keeps its small "s"; 11px stays (recorded exception) */
  .reaction-chart:focus-visible { outline: 2px solid #265b4e; outline-offset: 6px; }   /* the page's 2px green ring, as the toggle's, not the 1px gold one */
  .model-text .nw-d { white-space: nowrap; }   /* "oil-related" never splits at its hyphen (the copy review, 8 Oct 2026) */
  .gh-link { position: relative; }
  .gh-link::after { content: ""; position: absolute; inset: -14px 0; }   /* 47x17 to 47x45 to a finger, no layout shift, as .rp-link's; never past the column at 320 (the phone pass, 7 Oct 2026) */
}

/* ---------- Phone (≤734px): TAIL 2 — the quote, Limitations and the colophon ---------- */

@media (max-width: 734px) {
  .pull-quote p { line-height: 28px; text-wrap: pretty; }   /* the owner's 21px on whole pixels; the last line never one word (with the no-break space in "Truth posts.") */
  .limit-n { min-width: 21px; }   /* the desktop's slot: the four gold rules start at one x */
  .limit h3 { text-wrap: balance; }   /* at 320 no one-word second line ("war", "trading"): two even lines (the headers pass, 7 Oct 2026) */

  /* The colophon: every live row (five appendix sheets, the email, the site) a full 44px thumb row of its own, so
     adjacent rows never share a band, and the grey rows on the same 44px pitch, so each list reads as one even column. */
  .footer-soon, .footer-place { min-height: 44px; }
  .footer-links a, .contact a, .footer-link { min-height: 44px; }
  .site-footer { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }   /* room under the last line; the inset is 0 until the viewport meta says viewport-fit=cover (it does not), so today this is 48px */
  /* Gold hairlines on the 20px rail, as every other rule on the phone: the footer's own top border stays (transparent,
     so nothing moves) and its rule is drawn on the container, from gutter to gutter. */
  .site-footer { border-top-color: transparent; }
  .site-footer > .container { position: relative; }
  .site-footer > .container::before { content: ""; position: absolute; top: -49px; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--gilt-line); }
  .footer-base { border-top-color: var(--gilt-line); }
  .footer-base { line-height: 19px; text-wrap: balance; }   /* 13/19, the caption step and the phone's 13px floor: the small print sits under the captions, not over them; even lines: no "·" left dangling, no "Majd Jamal" alone (the headers pass, 7 Oct 2026) */
  .footer-base a { padding-block: 2px; }   /* the sources: 21px tall to a finger, 1px apart (WCAG 2.5.8's inline exception covers them anyway) */
  .site-footer .label { font-size: 11px; line-height: 16px; letter-spacing: .14em; }   /* the page's one caps-label step, as the desktop's (the phone pass, 7 Oct 2026) */
  .site-footer { font-size: 15px; }   /* the links, the source notes and the grey rows at the about line's 15px; .footer-base keeps its explicit 13/19 and .label its 11/16 (the headers pass, 7 Oct 2026) */
  .footer-name { font-size: 17px; line-height: 24px; }   /* the name a clear step over the 15px text under it (the headers pass, 7 Oct 2026) */
  #limits-title { text-align: center; color: #015c4d; }   /* green and centred, as the other section titles (the phone pass, 7 Oct 2026) */
  #method-title, #limits-title { line-height: 1.12; line-height: round(nearest, 1.12em, 1px); letter-spacing: -.03em; }   /* the finding titles' line and tracking, whole pixels, as on the desktop (the headers pass, 7 Oct 2026) */
}

@media (hover: none) and (max-width: 734px) {
  .site-footer a:not(.logo):active, .footer-link:active { text-decoration-color: currentColor; transition-duration: 0s; }   /* the desktop's hover underline, shown on press */
  .footer-base a:not(.logo) { text-decoration-color: rgba(154, 118, 56, .45); }   /* no hover to find them by: the sources keep a fine gold underline at rest, so they read as links in their grey line */
  /* The appendix sheets' controls: iOS keeps :hover after a tap, so the hover tints rest, and a press shows instead. */
  .apx-step:hover { background: #fffdf8; }
  .apx-tab:not([aria-selected="true"]):hover { color: var(--ink-3); }
  .apx-step:active { background: rgba(154, 118, 56, .1); transition-duration: 0s; }
  .apx-tab:not([aria-selected="true"]):active { color: var(--ink); transition-duration: 0s; }
  .ts-handle a:hover, .ts-text a:hover { text-decoration: none; }   /* no sticky underline after a tap (the phone pass, 7 Oct 2026) */
  .ts-handle a:active, .ts-text a:active { text-decoration: underline; }
  .gh-link:active { text-decoration: underline; }   /* the desktop's hover underline, shown on press */
  /* Example of Trump posts: the video panel is a picture (no player behind it), so its triangle drops the button's disc
     and reads with "Video" as a label; nothing on a phone looks tappable that is not. */
  .ts-media svg { padding: 0; background: none; }
}

/* The appendix sheets on phones (their own block, "Appendix sheets", is the desktop session's; these only override it). */
@media (max-width: 734px) {
  /* Reading sizes: text at the 13px floor, caps labels on the 11px label step, code at 13 as in the features sheet. */
  .apx-tag, .apx-col h4, .apx-label { font-size: 11px; }
  .apx-xi sub { font-size: 11px; }
  .apx-foot, .apx-rule, .apx-who > span, .apx-x span { font-size: 13px; }
  .apx-json, .apx-vec { font-size: 13px; line-height: 20px; }
  .apx-x code { font-size: 12px; overflow-wrap: anywhere; }   /* the X list's names, one step under the code; at 320 only the longest takes a second line, never over its value */
  .apx-raw { padding-inline: 10px; font-size: 13px; }   /* the stored rows scroll in their box, as the code does */
  .apx-code { font-size: 13px; }
  .apx-codebar { font-size: 13px; }
  /* The excerpt's length stays in view ("Lines 1–71 of 223", "48 lines"), so it never reads as the whole file. Where the
     bar is too narrow for both, it takes a second line under the file name: the dots sit in the bar's 69px left inset
     (16 + 39px of dots + the 14px gap) and the name grows, so a wrapped note starts on the name's edge, not the right. */
  .apx-codebar { position: relative; flex-wrap: wrap; row-gap: 2px; padding-left: 69px; }
  .apx-dots { position: absolute; top: 9px; left: 16px; height: 16px; align-items: center; }
  .apx-codebar > span:nth-child(2) { flex-grow: 1; }
  .apx-codebar > span:last-child { display: inline; margin-left: 0; color: var(--ink-3); }   /* the note at AA on the bar's sand (#636363, 5.3:1; the desktop's #707070 is 4.4:1 there at 13px) */
  /* Tabs: one line each, at least 44px to a finger (the band reaches 8px over and under the 28px pill, and meets its
     neighbour's), and Brent's four spans fill the row as one segmented control, so the sheet never pans sideways. */
  .apx-tab { position: relative; font-size: 13px; white-space: nowrap; }
  .apx-tab::before { content: ""; position: absolute; inset: -8px -1px; }
  .apx-brent-body .apx-tabs { display: flex; }
  .apx-brent-body .apx-tab { flex: 1 1 auto; padding-inline: 4px; font-size: 13px; }
  /* Data representation: the post runs in the sheet's one scroller (no nested 300px box that cuts it mid-sentence),
     the steppers sit 8px apart, and their chevrons point back and on, not up and down in a sheet that scrolls down. */
  .apx-pop--repr .apx-card { max-height: none; overflow: visible; }
  .apx-nav { gap: 8px; }
  .apx-step svg { transform: rotate(-90deg); }
  /* The steppers on the thumb's side: the count, then back and on, flush right under the close button. */
  .apx-pop--repr .apx-nav, .apx-pop--posts .apx-nav { justify-content: flex-end; }
  .apx-pop--repr .apx-count, .apx-pop--posts .apx-count { order: 0; margin: 0 6px 0 0; text-align: right; }
  /* ...and at the sheet's foot, under the thumb: a row of their own below the scroller (the sheet's ivory, a gold
     hairline over it, 12px round the 44px buttons), so ten examples step through without a reach to the top. The ×
     stays where it is; the sheet's scroll shade sits just over the hairline. */
  .apx-pop--repr, .apx-pop--posts { padding-bottom: 69px; }
  .apx-pop--repr .apx-nav, .apx-pop--posts .apx-nav { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 10px 12px 20px; border-top: 1px solid var(--gilt-line); background: #fffdf8; }
  /* The scrollers that take the keyboard on a phone (main.js initAppendix): the page's green ring, inside their edge */
  .apx-pop .features-scroll:focus-visible, .apx-raw:focus-visible { outline: 2px solid #265b4e; outline-offset: -2px; }
  .ts-handle a { padding-block: 14px; }   /* inline padding: each line of the date is 44px to a finger, and the line box does not change, so nothing moves (the phone pass, 7 Oct 2026) */
}

/* ---------- Phone (≤734px): METHOD 2 — the features sheet, a tidy flow ---------- */

@media (max-width: 734px) {
  .flow-nw { white-space: nowrap; }   /* "GPT-6 Sol" never splits (tablets leave the span unstyled) */
  html:has(.features-pop:popover-open) { overflow: hidden; }   /* the page holds still behind the sheet (iOS 16+) */
  .features-pop { width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); border-radius: 16px; }
  .features-head { padding: 14px 10px 6px 20px; }
  .features-head h3 { font-size: 19px; line-height: 24px; }   /* one line at 320 */
  .features-close { width: 44px; height: 44px; }
  .features-scroll { padding: 0 20px 20px; overflow-x: hidden; overscroll-behavior: contain; }
  /* Each feature as one stacked entry, in the table's order and words: numeral, name, question, how it is computed,
     and "Source" (the owner's own column head, repeated because the head row is hidden). */
  .features-table, .features-table tbody { display: block; min-width: 0; }
  .features-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .features-table tr { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; padding: 14px 0 15px; border-top: 1px solid rgba(154, 118, 56, .16); }
  .features-table tbody tr:first-child { border-top: 1px solid rgba(154, 118, 56, .4); }
  .features-table td { display: block; grid-column: 2; width: auto; padding: 0; border: 0; font-size: 14px; line-height: 20px; }
  .features-table .ft-n { grid-column: 1; grid-row: 1 / span 4; width: auto; font-size: 15px; }
  .features-table .ft-name, .features-table .ft-q, .features-table .ft-src { width: auto; }
  .features-table code { font-size: 13px; overflow-wrap: anywhere; }   /* the 13px floor; anywhere keeps the long status_ names in the column */
  .features-table .ft-q { margin-top: 4px; font-size: 15px; line-height: 21px; color: var(--ink); }
  .features-table td:nth-child(4) { margin-top: 2px; }
  .features-table .ft-src { margin-top: 6px; font-size: 13px; line-height: 18px; }
  .features-table .ft-src::before {
    content: "Source\00a0\00a0";         /* fallback */
    content: "Source\00a0\00a0" / "";    /* empty alt text: VoiceOver already reads the (visually hidden) head row once */
    font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
}
/* The close button's press: with the rows' (the touch block after the sheet's phone rules, upright and sideways). */
/* 320px and Page Zoom: a narrower gap between the lanes and a slimmer inner edge, so "trumpstruth.org" fits its box. */
@media (max-width: 359px) {
  .flow { --flow-cross: 52px; --flow-rise: 39px; }   /* still 4:3, the angle "timestamps" is set at; 52 is the least that holds the word's ink clear of both boxes */
  .flow-step { padding-inline: 8px; }   /* with the 52px gap, a 96px text column at 320 */
  .flow-step--oil::before { left: calc(100% + 1px + var(--flow-cross) / 2 - 2px); top: calc(var(--flow-y) - var(--flow-rise) / 2 - 10px); }   /* the label spans most of the shorter arrow: centred on it, and lifted clear of its head */
  .flow-d { overflow-wrap: break-word; }   /* only a word that cannot fit (130% zoom) breaks */
}

/* ---------- Phone (≤734px): METHOD — the owner's desktop design, one lane, two chapters ----------
   Owner, 2 Oct 2026: "I have a wonderful method version on the desktop! That is the one I wanted to create on the mobile
   version". web/build_method.py writes .mphone after the desktop block: the Input lane (01 → 02 → 03 → Feature
   engineering → X) under its gold serif head, then the Target lane (04 → 05) under its own; X and Y come down into 06
   side by side, and 07's table closes. One centred column the thumb can follow, a station a screen; the cards, the globe,
   the funnel and the charts drawn at phone size; body 15px, notes 13px, caps 11px. Tablets keep the flowchart.
   A phone held sideways (874×402) is tablet-wide but short and touch: it keeps the same composition, at the width it
   was drawn for (the second query; main.js initSphere uses the same list). */
@media (max-width: 734px), (max-width: 1068px) and (max-height: 500px) and (pointer: coarse) {
  .report--method .flow { display: none; }
  #method-title { text-align: center; color: #015c4d; }   /* over its centred column, in the headlines' green, as on the desktop (owner, 3 Oct 2026) */
  .mphone { display: block; max-width: 400px; margin: 36px auto 0; text-align: center; color: var(--ink); }   /* 400: the column at 440; wider, the cards and figures would stretch past what they were drawn for */
  /* Everything in it 7% smaller but the globe (owner, 3 Oct 2026: "The elements, almost all of them… a tiny bit smaller,
     but not the sphere, keep its size", then "even smaller. Like 7% smaller"): drawn at 93% in 93% of the width, so it is
     laid out exactly as before and every line breaks where it did; the globe and his portrait take their size back
     (1 / .93), and the stream and the funnel under them move down by what the globe keeps (280 / .93 − 280 = 21.075px). */
  .mphone { zoom: .93; width: 93%; }
  .mp-filter > img, .mp-filter > canvas { zoom: 1.075269; }
  .mp-filter > div { margin-top: 21.075px; }
  .mp-chapter + .mp-chapter { margin-top: 76px; }   /* a pause between the lanes, not an exit: about 84px from X to "Target" (owner, 3 Oct: "a tiny more space") */

  /* the lanes' heads: the gold serif word between two hairlines that fade out, as on the desktop */
  .mp-lane { display: flex; align-items: center; gap: 16px; font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: 0; color: #9a7638; }
  .mp-lane::before, .mp-lane::after { content: ""; flex: 1; height: 1.075269px; background: linear-gradient(90deg, rgba(154, 118, 56, 0), rgba(154, 118, 56, .55)); }   /* one pixel at the column's 93% (Chrome draws no line under a pixel) */
  .mp-lane::after { background: linear-gradient(90deg, rgba(154, 118, 56, .55), rgba(154, 118, 56, 0)); }
  .mp-lane + .mp-st { margin-top: 30px; }

  /* a station's head: the gold serif numeral and the green spaced caps (05's Y badge after them) */
  .mp-k { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 28px; margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: 0; }
  .mp-n { position: relative; top: -2px; font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-size: 17px; line-height: 20px; color: #8a672b; }
  .mp-t { font-size: 11.5px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #015c4d; }
  .mp-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 28px; height: 28px; margin-left: 1px; border-radius: 50%;
    border: 1px solid rgba(154, 118, 56, .6); background: #fffdf8; font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-size: 15px; line-height: 1; color: #015c4d; }
  .mp-badge--big { width: 34px; height: 34px; margin: 0; font-size: 18px; }
  /* 05's words sit on the column's axis, as every other head, and its Y hangs to their right: an empty twin of the
     badge's room (9 + 1 + 28px) on the left balances it, and gives way first where the column is too short for both */
  .mp-k:has(> .mp-badge)::before { content: ""; flex: 0 1 38px; min-width: 0; margin-right: -9px; }
  .mp-k:has(> .mp-badge) > .mp-t { flex: none; }   /* only the twin gives way (at 360 the caps would wrap) */
  .mp-big { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 12px; }
  .mp-num { font-size: 52px; line-height: 58px; font-weight: 600; letter-spacing: -.035em; color: #015c4d; font-variant-numeric: tabular-nums; }
  .mp-unit { font-size: 18px; line-height: 22px; font-weight: 500; color: var(--ink); }
  .mp-cap { max-width: 336px; margin: 14px auto 0; font-size: 15px; line-height: 23px; color: var(--ink-3); text-wrap: balance; }   /* centred lines of even length, as .mp-ai under them (no stub last line) */
  .mp-cap b { font-weight: 600; color: #015c4d; }
  .mp-cap--231 { margin-top: 6px; }
  .mp-ai { max-width: 336px; margin: 12px auto 0; font-size: 13px; line-height: 19px; color: var(--ink-3); text-wrap: balance; }
  .mp-ai svg { display: inline-block; margin-right: 6px; vertical-align: -2px; }
  .mp-down { display: block; margin: 18px auto; }

  /* the white cards with their two ghosts above (8 and 16px up, narrower): his post, the prices, the labels */
  .mp-stack { position: relative; margin-top: 30px; }
  .mp-stack::before, .mp-stack::after, .mp-card { box-sizing: border-box; border-radius: 14px; background: #ffffff; border: 1px solid rgba(154, 118, 56, .22); box-shadow: 0 1px 2px rgba(38, 38, 38, .04), 0 16px 34px -22px rgba(92, 70, 38, .3); }
  .mp-stack::before, .mp-stack::after { content: ""; position: absolute; }
  .mp-stack::before { inset: -16px 22px 16px; opacity: .4; }
  .mp-stack::after { inset: -8px 11px 8px; opacity: .7; }
  .mp-card { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 16px; text-align: left; }
  .mp-stack + .mp-cap { margin-top: 16px; }
  .mp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
  .mp-head > svg { display: block; flex: none; }
  .mp-rule { display: block; height: 1.075269px; margin-top: 12px; background: rgba(154, 118, 56, .2); }   /* one pixel at 93%, as the lanes' lines */
  .mp-handle { font-size: 13px; line-height: 18px; color: var(--ink-3); }
  .mp-card .mp-big { justify-content: flex-start; margin-top: 10px; }
  .mp-dates { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
  .mp-duka { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
  .mp-duka svg { display: block; flex: none; }
  .mp-pair { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; color: var(--ink-3); }
  .mp-dot { width: 3px; height: 3px; border-radius: 50%; background: #9a7638; }
  .mp-span { margin-top: 10px; font-size: clamp(17px, 5.3vw, 21px); line-height: 26px; font-weight: 600; letter-spacing: -.02em; color: #015c4d; white-space: nowrap; }
  .mp-candles { display: block; width: 100%; height: auto; margin-top: 12px; }

  /* 02 → 03: the globe, the sieve and the funnel, one figure */
  .mp-filter { position: relative; margin-top: 30px; }
  .mp-st--03 { margin-top: calc(36px + 21.075px); }   /* 03's head under its oil posts (no timestamps arrow on the phone since 3 Oct); + the globe's kept size (above) */

  /* 05: the labels card; the scale's words are type, the drawing follows the card's width */
  .mp-title { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
  .mp-legend { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
  .mp-swatch { width: 6px; height: 10px; border-radius: 1.5px; background: #9a7638; }
  .mp-legend i, .mp-scale-bot i { font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-style: normal; color: #015c4d; }
  .mp-legend i { font-size: 15px; line-height: 16px; }
  .mp-scale-set { display: block; }
  .mp-scale-set--n { display: none; }   /* the 320 drawing (below) */
  .mp-scale-top, .mp-scale-bot { position: relative; display: block; }
  .mp-scale-top { height: 14px; margin-top: 14px; }
  .mp-scale-top > span, .mp-scale-bot > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
  .mp-scale-top > span { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a672b; }
  .mp-scale { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
  .mp-scale-bot { height: 24px; margin-top: 8px; color: #015c4d; }
  .mp-scale-bot i { font-size: 18px; line-height: 22px; }
  .mp-scale-bot sub { position: relative; top: 1px; margin-left: 1px; font-size: 11px; line-height: 0; font-weight: 500; vertical-align: baseline; }
  .mp-target { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }   /* 05 since 12 Oct 2026: t, 30 s later, up, still or down; it scales with the card */

  /* 03 → X: the feature engineering box (it opens the 17 features), the owner's note under it, pointing up at it */
  .mp-fe { display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 0 auto; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mp-fe-box { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; box-sizing: border-box; width: 184px; height: 44px; border-radius: 11px; background: #ffffff;
    border: 1px solid rgba(154, 118, 56, .5); box-shadow: 0 1px 2px rgba(38, 38, 38, .04), 0 10px 22px -14px rgba(92, 70, 38, .4); font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.005em; color: #015c4d;
    transition: border-color .2s var(--ease), transform .2s var(--ease); }
  .mp-fe-box svg { display: block; flex: none; }
  .mp-fe-hint { font-size: 13px; line-height: 17px; color: var(--ink-3); white-space: nowrap; }
  .mp-fe-hint > span { color: #9a7638; }
  .mp-fe-hint > span > svg { transform: rotate(90deg); }   /* the desktop's drawn ←, turned up at the box */
  .mp-fe:focus-visible { outline: none; }
  .mp-fe:focus-visible .mp-fe-box { outline: 2px solid #015c4d; outline-offset: 3px; }
  .mp-x { display: flex; justify-content: center; margin-top: -16px; }

  /* X and Y come down into the model side by side, each with its own arrow, as on the desktop */
  .mp-join { position: relative; height: 66px; margin-top: 64px; }   /* 05's note to X and Y (owner, 3 Oct: "a tiny bit more space"; was 48) */
  .mp-join-x, .mp-join-y { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateX(-50%); }
  .mp-join-x { left: 28%; }
  .mp-join-y { left: 72%; }
  .mp-join .mp-down { margin: 0; }
  .mp-join + .mp-st--06 { margin-top: 2px; }

  /* 06: the model, a plain card; its settings wrap as the column allows (no fixed rows: Safari's SF Mono is wider) */
  .mp-card--model .mp-head { flex-wrap: wrap; row-gap: 6px; }   /* at 320 the maker may drop under the station's name */
  .mp-card--model .mp-k { justify-content: flex-start; min-height: 22px; }
  .mp-sk { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: var(--ink-3); }
  .mp-sk img { display: block; flex: none; }
  .mp-model { margin-top: 12px; font-size: clamp(22px, 6.8vw, 27px); line-height: 1.2; font-weight: 600; letter-spacing: -.025em; color: #015c4d; }
  .mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }   /* in pairs from 440 (2/2/2/1); narrower, a list (below) */
  .mp-chip { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(154, 118, 56, .42); background: #fffdf8; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 17px; color: var(--ink); white-space: nowrap; }
  .mp-chip b { font-weight: 600; color: #015c4d; }

  /* 07: the results, one row per label */
  .mp-st--07 { margin-top: 72px; }   /* 06's note to the table (owner, 3 Oct: "some tiny more space"; was 56) */
  .mp-results { width: 100%; margin-top: 14px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; text-align: right; }   /* separate (spacing 0, so the hairlines look the same): a collapsed table ignores the band's rounded ends */
  .mp-results thead th { padding: 0 0 8px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .mp-results th:first-child { text-align: left; }
  .mp-results tbody > tr > * { height: 42px; padding: 6.5px 0 0; vertical-align: baseline; border-top: 1px solid rgba(154, 118, 56, .22); }   /* the serif label, F1 and the numbers share one baseline (middle alignment drifted them 0.5–1.5px apart); 6.5px keeps it where F1 sat, the digits optically centred */
  .mp-results tbody > tr:last-child > * { border-bottom: 1px solid rgba(154, 118, 56, .22); }
  .mp-results tbody th { font-weight: 400; color: #015c4d; white-space: nowrap; }
  .mp-results tbody th i { font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-style: normal; font-size: 20px; }
  .mp-results tbody th sub { position: relative; top: 2px; margin-left: 1px; font-size: 11.5px; line-height: 0; font-weight: 500; vertical-align: baseline; }
  .mp-results td { font-size: 15px; color: var(--ink); }
  .mp-results td:nth-child(2) { font-size: 16px; font-weight: 500; }
  .mp-results .mp-sig td:nth-child(2) { font-weight: 600; color: #015c4d; }
  .mp-results td:nth-child(3) { color: var(--ink-3); }
  /* The rows on white and the 30-second row on beige (owner, 3 Oct 2026: "make the rows in the diagram white and beige
     the y + 30s row"). The colour reaches 10px past the label and the p-value (a shadow, so the columns stay where they
     are), the block is rounded at its top and foot, the hairlines stay between the rows, inset, and give way round the
     beige row. From 360px up the table is inset by the same 10px, which brings the band's edges to the cards' edges. */
  .mp-results tbody { --row: #ffffff; }
  .mp-results tbody > tr.mp-hl { --row: #f0e8db; }   /* the site's sand */
  .mp-results tbody > tr > * { background: var(--row); }
  .mp-results tbody > tr > :first-child { box-shadow: -10px 0 0 var(--row); }
  .mp-results tbody > tr > :last-child { box-shadow: 10px 0 0 var(--row); }
  .mp-results tbody > tr:first-child > *, .mp-results tbody > tr.mp-hl > *, .mp-results tbody > tr.mp-hl + tr > * { border-top-color: transparent; }
  .mp-results tbody > tr:last-child > * { border-bottom-color: transparent; }
  .mp-results tbody > tr:first-child > :first-child { border-top-left-radius: 12px; }
  .mp-results tbody > tr:first-child > :last-child { border-top-right-radius: 12px; }
  .mp-results tbody > tr:last-child > :first-child { border-bottom-left-radius: 12px; }
  .mp-results tbody > tr:last-child > :last-child { border-bottom-right-radius: 12px; }
  .mp-cap--table { margin-top: 12px; font-size: 13px; line-height: 19px; text-wrap: balance; }   /* centred, as every note in the column */
  @media (min-width: 360px) and (max-width: 734px) { .mp-results { width: calc(100% - 20px); margin: 14px 10px 0; } }   /* the phone pass, 7 Oct 2026: the band's edges on the cards' (at 320 the headers need the room) */
}
/* The feature engineering box answers a press as the desktop's answers the mouse: its edge turns green (and it gives a
   little); a narrow mouse window keeps the hover. */
@media (hover: none) and (max-width: 734px), (hover: none) and (max-width: 1068px) and (max-height: 500px) and (pointer: coarse) {
  .mp-fe:active .mp-fe-box { border-color: #015c4d; transform: scale(.98); transition-duration: 0s; }
  .mp-fe:active .mp-fe-hint { color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) and (max-width: 734px) {
  .mp-fe:hover .mp-fe-box { border-color: #015c4d; }
  .mp-fe:hover .mp-fe-hint { color: var(--ink); }
}
/* 320px (an iPhone SE, or Page Zoom): the caps a little tighter so every station's head (05's with its Y) stays on one
   line, and the labels chart redrawn with its six words evenly apart (about 11px; y t+30s and y t+60s touched at the
   desktop's spacing). The labels card's legend keeps the 13px floor and drops under its title. */
/* Under 440px the model's last three settings can never pair at 13px monospace (min_samples_leaf 10 and
   l2_regularization 1.0 need 351px; the card gives 328 at 402, 301 at 375), so all seven stand one a row, in the
   owner's order, as a list rather than a 2/2/1/1/1 pile. */
@media (max-width: 439px) {
  .mp-chips { flex-direction: column; align-items: flex-start; gap: 5px; }
}
@media (max-width: 359px) {
  .mp-k { gap: 7px; }
  .mp-k:has(> .mp-badge)::before { display: none; }   /* too short for the balance: the head stays in one line, as it was */
  .mp-t { letter-spacing: .12em; }
  .mp-head { gap: 8px; }
  .mp-title { white-space: nowrap; }
  .mp-card--labels .mp-head { flex-wrap: wrap; row-gap: 4px; }
  .mp-legend { gap: 5px; }
  .mp-scale-set--w { display: none; }
  .mp-scale-set--n { display: block; }
}
/* Under 280px (402 at 150% Page Zoom) the 280px globe is wider than the column and its gutters: the section trims its
   edges at the screen's, so the page never scrolls sideways (clip, not hidden: no scroll box, nothing else changes). */
@media (max-width: 279px) {
  .report--method { overflow-x: clip; }
}

/* ---------- Phone (≤734px): GLOBAL — small gold numerals and the sheets' code at AA ---------- */

@media (max-width: 734px) {
  /* Small gold numerals take the site's small-label gold (#8a672b, ≈5:1 on white, 4.8:1 on ivory; #9a7638 is ≈4:1 at
     13–15px). The Limitations numerals keep #9a7638: SPEC records them as they are. */
  .apx-count, .apx-n, .apx-pop .tk-d { color: #8a672b; }
  /* The sheets' code: comments and punctuation at AA on the code box (#6f685c 5.3:1, #707070 4.8:1 on #fcfaf5). */
  .apx-pop .tk-cm { color: #6f685c; }
  .apx-pop .tk-o { color: #707070; }
  /* Every sheet (features and the four appendix sheets) hangs 16px under the top and stops 96px over the bottom, the
     foot bringCard keeps, so its last lines clear Safari's toolbar band (the page is locked, so the bar never hides).
     Top-anchored, a sheet that changes height (Brent's spans) grows downward and its tabs stay put. */
  .features-pop { margin-block: 16px auto; max-height: calc(100vh - 112px); max-height: calc(100svh - 112px); }
  .apx-code { max-height: calc(100vh - 308px); max-height: calc(100svh - 308px); }   /* the code sheet's head, tabs and bar (174px) plus 16 + 22 + 96 */
  /* A sheet whose list goes on below its edge says so: a faint warm shade along the bottom while there is more, gone at
     the end (a cover in the sheet's own paper rides with the content and slides over it). A sheet that fits never shows it. */
  .features-pop .features-scroll {
    background:
      linear-gradient(rgba(255, 253, 248, 0), #fffdf8 50%) center bottom / 100% 40px no-repeat local,
      linear-gradient(to top, rgba(110, 80, 34, .12), rgba(110, 80, 34, 0)) center bottom / 100% 14px no-repeat scroll;
  }
  .apx-pop--posts .features-scroll.ts-feed {
    background:
      linear-gradient(rgba(255, 255, 255, 0), #ffffff 50%) center bottom / 100% 40px no-repeat local,
      linear-gradient(to top, rgba(110, 80, 34, .12), rgba(110, 80, 34, 0)) center bottom / 100% 14px no-repeat scroll,
      #ffffff;   /* the feed's white paper */
  }
  /* Under an open sheet the page goes quieter, so the sheet reads as the one thing on the screen (not darker: no dark
     panels). The tap there only closes the sheet (main.js initFeatures). */
  .features-pop::backdrop { background: rgba(15, 46, 41, .4); }
  /* The 13–14px captions and small print at Inter's own spacing, as on the desktop (the body's −.011em is set for 18px).
     Not the model sentence, the bars' footnote or the post box's credit: at 0 they take a line more at 402 or 375 (a
     ragged break before "macro F1 score of 0.59", "your text." alone), so they keep the tighter spacing that holds them. */
  .reaction-note, .rs-row, .rs-who, .rs-v, .footer-link, .footer-base p, .who-handle { letter-spacing: 0; }
  .rs-chart figcaption { letter-spacing: -.006em; }
}
/* The sheets rise in over a fading backdrop, the desktop's own entrance (closing stays a cut, as there). */
@media (max-width: 734px) and (prefers-reduced-motion: no-preference) {
  .features-pop:popover-open { animation: sheet-in .25s var(--ease); }
  .features-pop:popover-open::backdrop { animation: backdrop-in .25s ease; }
}

/* The iPhone 17 Pro pass (owner, 9 Oct 2026: "Fix the presentation on the phone … the spacings and the font sizes and
   everything! Optimize for iPhone 17 pro", 402 x 874): each finding's sentence one step (15/23, --ink-3), every caption
   one step (13/19, --ink-3), and one rhythm: 14 under a title, 24 to a sheet, 14 under it, 48 between parts and sections. */
@media (max-width: 734px) {
  .report-text.model-text, .report-text.finding-sub { margin-top: 14px; font-size: 15px; line-height: 23px; letter-spacing: -.009em; color: var(--ink-3); }
  .model-demo { margin-top: 24px; }
  .timing { margin-top: 24px; }
  .timing-note { margin-top: 14px; }
  .rs-foot { margin-top: 24px; color: var(--ink-3); }
  #findings { padding-bottom: 48px; }
  .why { padding-block: 44px; }
  .report--method.is-folded { padding-block: 44px 0; }   /* the glimpse's faded foot is the air under it */
  .report--fold { --glimpse: 150px; }
  .report--limits { padding-block: 40px 56px; }
}

/* ---------- Phone owner blocks: insert above this line ---------- */

/* Touch: presses sink a little and take the hover colour, and never stay pressed during a drag. After the owner
   blocks, so their transitions cannot override these (the phone hero, below, sets its own press for its button). */
@media (hover: none) {
  .post { transition: box-shadow .25s ease, transform .15s var(--ease); }
  .post:has(.post-open:active) { transform: scale(.98); }
  .lane.is-dragging .post { transform: none; }
  .composer-go, .deck-btn, .reader-close { transition: background-color .15s ease, transform .12s var(--ease), opacity .15s ease; }
  .composer-go:active { background: var(--green-deep); transform: scale(.97); }
  .deck-btn:active:not([aria-disabled="true"]) { background: var(--panel); transform: scale(.96); }
  .reader-close:active { background: var(--card); transform: scale(.96); }
  .scroll-cue:active, .how-read > summary:active, .reader-more:active { color: var(--green-deep); }
  .value-toggle:active { color: var(--green-deep); }
}

/* Very narrow screens (and large text zoom): the circle and the word; the label stays for screen readers. */
@media (max-width: 359px) {
  .now-k-short { display: none; }
}

/* ---------- Phone (≤734px): THE HERO, one composition ---------- */

/* The first screen reads like the opening page of a magazine piece: the lattice as a letterhead, the byline over the
   question set large, the post box laid on the page like a sheet of paper, a caption under it, and at the foot of the
   screen the top of "Findings", faded, as the turn of the page (the owner: no scroll cue on a phone).
   Everything hangs from the top at distances set only by the screen's size, so the answer, the keyboard or a long post
   only ever grow the page downwards: nothing above the box moves. Desktop is untouched. */
@media (max-width: 734px) {
  /* The spare height of the first screen: what is left after the byline and its band (56), the row of posts (190; since
     7 Oct the hero holds no box at rest, no caption and no answer room), the least gaps (16 + 32 + 44), the foot (20),
     the question (three lines, .418 of the column, capped at 56px type; two lines from 585px) and the 93px the scroll
     cue had, which leaves at least ~45px under the row where the spare is near zero (the phone pass, 7 Oct 2026; it
     counted the old 216px box, its 56px caption and 42px of answer room, so a quarter of the screen sat empty under the
     row). It is shared out, so the space sits between the parts rather than around them: a third above
     the byline (20–96px), a little to the byline's gap (16–24) and more to the gap under the question (32–48); what is
     left lies under the row, down to "Findings". --header-h is the band above the question. --peek is how much of
     "Findings" shows at the foot of the small viewport: the upper half of the word, clear of Safari's bottom bar. */
  :root {
    --screen-h: 100vh;
    --h1-h: min(.479 * (100vw - 2 * var(--gutter)), 231px);   /* the headline's four lines (4 × 1.03 × the column / 8.6, capped at 56px type; 9 Oct 2026) */
    /* A screen under 860px tall (svh: Safari's first view of every iPhone, 760–842) has no room under the caption for
       an answer's 135px tier (119 + its 16px margin, since the forty-first revision): there the spare height counts the
       42px more, so an answer no longer pushes "Findings" off the screen. A step on svh, so it never flips while scrolling;
       taller screens keep their places exactly. Since 7 Oct the spare no longer counts it (there is no answer in the
       hero); it stays for the --question-gap clamp and the hero's padding. */
    --answer-room: clamp(0px, (860px - var(--screen-h)) * 1000, 42px);
    --hero-spare: calc(var(--screen-h) - 451px - var(--h1-h));   /* the phone pass, 7 Oct 2026: counts the 190px row of posts (no box at rest, no caption, no answer room); was 533px + --answer-room */
    --hero-top: calc(clamp(20px, var(--hero-spare) / 3, 96px) + var(--screen-h) * .05);   /* + 5% of the screen: the byline and all under it lower (owner, 3 Oct 2026: "lowering the banner 5% from 'research by majd'"); the hero's height takes it back, so the finding's headline keeps its place */
    --byline-gap: calc(clamp(16px, 12px + var(--hero-spare) * .04, 24px) + var(--screen-h) * .02);   /* + 2% of the screen: the question that much further under the byline, which stays (owner, 3 Oct 2026: "move the Can trump's posts help.. like 2% from the research by Majd") */
    --question-gap: calc(clamp(calc(48px - var(--answer-room) / 10.5), 36px + var(--hero-spare) * .12, 64px) - var(--screen-h) * .03);   /* 16px lower than the question's own room (owner, 3 Oct 2026: "Lower the trump demo a bit"), then 4% of the screen more ("move the demo 4% from the banner"), then 5% back up ("Lift the demo up a bit, like 5% back up"), then 2% higher again ("lift it up a tiny bit"): 3% of the screen under the clamp */
    --header-h: calc(56px + var(--byline-gap) + var(--hero-top));
    --peek: 62px;   /* "Here is my learnings" whole (26px and its 18px gap, since 8 Oct 2026) and then the top 18px of the finding's first line at the foot of the first screen, cut through its letters (owner, 3 Oct 2026: "the text should only show part of 'Oil prices react within…'") */
    --report-top: 40px;   /* Findings' top padding (.report), which the hero's height counts on: the least air between an answer and the headline (72 before the box went 16px lower; the headline's place at rest is set by --peek) */
    --paper: #fffdf9;
    --gilt-line: rgba(154, 118, 56, .26);
  }
  @supports (height: 100svh) {
    :root { --screen-h: 100svh; }
  }

  /* "Research by Majd Jamal" is the question's byline: the serif, on the column's left edge, over it. */
  .header-inner { height: calc(100% - var(--byline-gap)); padding: 0 var(--gutter) var(--byline-gap); align-items: flex-end; }
  .byline { margin-left: 0; color: var(--ink-3); }   /* a touch dimmer than the question's ink-2 neighbours (owner, 3 Oct 2026) */
  .summary-btn { position: absolute; top: 16px; right: var(--gutter); margin: 0; }   /* the top right corner of the screen, over the letterhead (owner, 8 Oct 2026) */

  /* The hero ends so that Findings' top padding (--report-top) brings "Findings" up to --peek above the foot of the small
     viewport (svh: it stays put while Safari's bars collapse, and is never under them). A taller hero (an answer on a
     small phone) only pushes it further down. */
  /* A post's third line (main.js sets --post-extra, up to its 26px) is taken from the air above "Findings" rather than
     added to the page: the hero grows by it and overlaps Findings' top padding by as much, so "Findings" stays where it
     was, with or without an answer, and the gap over it narrows from 74px to 48. */
  .hero {
    min-height: calc(var(--screen-h) - var(--header-h) - var(--report-top) - var(--peek) + var(--post-extra, 0px));
    margin-bottom: calc(-1 * var(--post-extra, 0px));
    padding-block: 0 calc(20px - var(--answer-room) * .43);
  }
  .hero-main { margin-block: 0; }
  .hero-inner { gap: var(--question-gap); }

  /* The question is the object: three lines, as large as the gold line allows ("predict oil prices?" measures 7.38em
     as a Range, in Chrome and WebKit alike, so the column / 7.4), so the gold runs exactly as wide as the paper below it.
     The first line balances into "Can Trump’s / posts help" (a no-break space holds "posts help" together where
     balance is not supported). */
  /* The headline since 9 Oct 2026 ("Trump’s posts do move the oil market, but mostly when they’re about Iran."): each
     clause balanced into two lines, four in all; its widest half, "move the oil market,", measures 8.5em, so the column / 8.6. */
  .hero h1 { font-size: clamp(28px, calc((100vw - 2 * var(--gutter)) / 8.6), 56px); line-height: 1.03; letter-spacing: -.034em; }
  .h1-in { text-wrap: balance; }
  .hero h1 { margin-inline-end: -2px; }   /* 2px of slack past the column: a font that measures a hair wider overhangs by a pixel rather than adding a fourth line, and the gold line can still wrap under large text spacing rather than widen the page */

  /* The lattice is a letterhead: at full strength over the byline's band, quiet behind the question, the box and the
     caption (about a third of its strength, so it reads as a texture under the type rather than lines through it), and
     then gone: it fades out across the open space under the caption, ending 18px above "Findings" (whose letters start
     about 6px under its top), so the faded word, Findings and the footer lie on plain ivory. */
  /* The full-strength band ends above the byline (it is quiet by the byline's top, 4px over it), so the serif sits on
     the same texture as the question rather than on hairlines at three-quarter strength. */
  body::before {
    --letterhead: linear-gradient(#000 0, #000 calc(var(--header-h) - var(--byline-gap) - 104px),
      rgba(0, 0, 0, .36) calc(var(--header-h) - var(--byline-gap) - 24px),
      rgba(0, 0, 0, .36) calc(var(--screen-h) - var(--peek) - 196px), transparent calc(var(--screen-h) - var(--peek) - 18px));   /* gone over "Findings" */
    -webkit-mask-image: var(--letterhead);
    mask-image: var(--letterhead);
  }

  /* The post box as a sheet of warm paper: a hairline edge and a long, soft, warm shadow, so it rests on the ivory
     rather than floats. Focus draws the edge in gold (1.5px #9a7638, 3.9:1 on the ivory) instead of a green ring; the
     edge and its deeper shadow are a layer that fades in (opacity only), while the keyboard opens. */
  .truth-card {
    position: relative;
    padding: 20px 20px 16px;
    border-radius: 16px;
    background: #fff;   /* white, not the beige paper (owner, 9 Oct 2026) */
    box-shadow:
      0 0 0 1px rgba(92, 70, 38, .07),
      0 1px 2px rgba(92, 70, 38, .05),
      0 24px 48px -24px rgba(92, 70, 38, .3);
    transition: none;
  }
  .truth-card:focus-within {
    box-shadow:
      0 0 0 1px rgba(92, 70, 38, .07),
      0 1px 2px rgba(92, 70, 38, .05),
      0 24px 48px -24px rgba(92, 70, 38, .3);
  }
  .truth-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 1.5px #9a7638, 0 28px 56px -24px rgba(92, 70, 38, .14);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ease);
  }
  .truth-card:focus-within::after { opacity: 1; }

  /* The avatar's hairline seat, drawn over the photo (an inset shadow on the circle itself would sit under it). */
  .truth-card .avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(38, 38, 38, .08);
    pointer-events: none;
  }
  .truth-card .who-name { font-size: 16px; line-height: 21px; letter-spacing: -.012em; }

  /* Two lines tall, as the placeholder is, so the whole question fits above the card when the keyboard is up. The
     caret and a selection take the gold of the focus edge. */
  .composer-text { margin-top: 14px; min-height: 52px; caret-color: #9a7638; }
  .composer-text::selection { background: rgba(176, 138, 76, .24); }
  .composer-text::placeholder { color: #474747; }   /* as the desktop's (9 Oct 2026), 9.3:1 on the white card */

  .composer-foot { margin-top: 10px; padding-top: 14px; border-top-color: var(--gilt-line); }
  .composer-count { color: var(--ink-4); letter-spacing: .01em; }

  /* The one green on the page: a lacquered pill, with a faint top light and a close shadow. While the model reads it
     keeps its colour, and its label rests at .72 white, so it reads as taken rather than switched off. */
  .composer-go {
    letter-spacing: -.005em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 46, 38, .22);
    transition: background-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), color .35s ease;
  }
  .composer-go:is(:disabled, [aria-disabled="true"]) { opacity: 1; cursor: progress; color: rgba(255, 255, 255, .72); }   /* aria-disabled: asked from the keyboard, it keeps its focus (main.js) */

  /* The answer, a tier of its own under the count and the button, below a gold hairline. It opens once, smoothly, to
     one height (the tallest call's at that width, below) the moment "Analyzing the post…" shows, and every outcome sits
     in that slot: a call, "No call" and the busy line hang from the slot's top, so the answer lands where the busy line
     was; a note sits centred in it; so the box never grows twice or shrinks back. A call reads
     as a label in the serif over the call itself in ink; the circle hangs beside the call. */
  .composer-result {
    min-height: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    color: var(--ink-2);
    transition: min-height .5s var(--ease), margin-top .5s var(--ease), padding-top .5s var(--ease), border-color .5s ease;
  }
  .composer-result:not(:empty) { margin-top: 16px; padding-top: 16px; border-top-color: var(--gilt-line); }
  .composer-result.is-turning { transition: none; }   /* a turn of the phone (main.js): the tier is at its new place at once, no glide */
  /* The tier is as tall as the tallest call at that width (16 + the label's 20 + 6 + the call's lines of 25 + 8 + the
     step's lines of 18 + 1), so no call grows the box after "Analyzing the post…": from 440px every call is one line
     over at most two lines of step (112, within 119); from 393px the longest step takes three (130); under that the
     call takes two lines over up to three of step (155). */
  .composer-result:is([data-kind="busy"], [data-kind="call"], [data-kind="none"], [data-kind="note"]) { min-height: 119px; }
  @media (max-width: 439px) {
    .composer-result:is([data-kind="busy"], [data-kind="call"], [data-kind="none"], [data-kind="note"]) { min-height: 130px; }
  }
  @media (max-width: 392px) {
    .composer-result:is([data-kind="busy"], [data-kind="call"], [data-kind="none"], [data-kind="note"]) { min-height: 155px; }
  }
  /* While it reads, the tier's height is its gliding min-height alone: "Analyzing the post…" never snaps it open by its
     own line before the glide. A call, "No call" and a note still grow it if they need more. */
  .composer-result[data-kind="busy"] { contain: size; }
  .composer-result:is([data-kind="busy"], [data-kind="note"]) { display: flex; flex-direction: column; justify-content: center; }
  .composer-result[data-kind="busy"] { justify-content: flex-start; }   /* "Reading…" sits where the call's label lands: nothing moves */
  .composer-result[data-kind="hint"] { margin-top: 12px; padding-top: 0; border-top-color: transparent; }

  .composer-result .call-k,
  .composer-result[data-kind="busy"] {
    font-family: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-3);
  }
  .composer-result[data-kind="busy"] { color: var(--ink-2); }   /* it breathes down to .84: 4.9:1 at its faintest */
  .composer-result .call-k { display: block; }
  .composer-result[data-kind="call"],
  .composer-result[data-kind="none"] {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
    align-content: start;   /* a call and "No call." hang from the tier's top like "Analyzing the post…", so the answer lands where it stood; a short one leaves its spare below */
  }
  .composer-result[data-kind="call"] .call-k { grid-row: 1; grid-column: 1 / -1; }
  .composer-result[data-kind="call"] .dot { grid-row: 2; grid-column: 1; margin-top: 8px; }
  .composer-result[data-kind="call"] .call-v { grid-row: 2; grid-column: 2; }
  .composer-result[data-kind="call"] .call-why { grid-row: 3; grid-column: 2; margin-top: 2px; font-size: 13px; line-height: 18px; text-wrap: pretty; }
  .composer-result[data-kind="none"] .dot { grid-column: 1; margin-top: 6px; }
  .composer-result[data-kind="none"] .call-v { grid-column: 2; font-size: 15px; line-height: 22px; text-wrap: pretty; }   /* "No call" and why, up to four lines at 320, within the tier */
  .composer-result[data-kind="none"] .call-no { font-weight: 600; color: var(--ink); }   /* "No call." reads as the model's result; the reason follows in grey */
  .composer-result[data-kind="call"] .call-v {
    font-size: 19px;
    line-height: 25px;
    font-weight: 600;
    letter-spacing: -.018em;
    color: var(--ink);
    text-wrap: balance;
  }
  .composer-result .call-line { display: block; }   /* a note: one sentence per line */

  /* The row fades in (say() restarts the fade for every answer, "Reading…" to the call included). "Reading…" breathes
     from .9s, gently. */
  .composer-result.is-in { animation: answer-in .5s ease both; }
  .composer[aria-busy="true"] .composer-result { animation: answer-in .5s ease both, breathe-soft 2s ease-in-out .9s infinite; }

  /* The caption under the paper, in --ink-3 so it holds AA where the lattice's hairlines cross it. The credit hangs its
     OpenAI mark in the margin, so where it wraps (narrow phones) its second line starts under its words, as the claim's
     line does. */
  .composer-credit { margin-top: 16px; padding-left: 1.35em; text-indent: -1.35em; color: var(--ink-3); }
  .composer-credit.composer-claim { margin-top: 2px; text-indent: 0; }
  .model-demo .composer-credit { padding-left: 0; text-indent: 0; text-align: center; text-wrap: balance; }   /* centred under the model's centred card, as the desktop's (the phone pass, 7 Oct 2026) */
  /* The credit and the note run on as one paragraph, on the same lines (owner, 9 Oct 2026: "The GPT-6 Luna text should be on
     the similar line as Try the model.."). */
  .composer-notes { margin-top: 16px; font-size: 13px; line-height: 19px; color: var(--ink-3); text-align: center; text-wrap: balance; }
  .model-demo .composer-notes > .composer-credit { display: inline; margin: 0; }

  /* No scroll cue on a phone (the owner): "Findings", faded at the foot of the screen, is the invitation instead. Gone
     from the accessibility tree too; the tablet and the desktop keep it. */
  .scroll-cue { display: none; }
}

@keyframes breathe-soft { 50% { opacity: .84; } }
@keyframes call-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes line-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes quiet-in { from { opacity: 0; } }
@keyframes findings-ink { from { opacity: .3; } }

/* The page opens quickly and almost without motion: the running head, the question line by line, the paper (all in
   place by about 1.1s, so the box is ready when the thumb is). No blur; the gold catches the light once.
   The call and its circle rise 4px after the label (on the spans themselves, which are new with every answer). */
@media (max-width: 734px) and (prefers-reduced-motion: no-preference) {
  .byline { animation: quiet-in .7s ease both; }
  .h1-in { animation: line-rise .9s cubic-bezier(.22, 1, .36, 1) .05s both; }
  .h1-in.h1-gold { animation: line-rise .9s cubic-bezier(.22, 1, .36, 1) .15s both, gilt 2.6s cubic-bezier(.45, 0, .2, 1) .9s both; }
  .hero .composer-col, .hero .lane { animation: line-rise .9s cubic-bezier(.22, 1, .36, 1) .25s both; }
  .composer-result[data-kind="call"] .call-v,
  .composer-result[data-kind="call"] .dot { animation: call-in .7s var(--ease) .12s both; }
  .composer-result[data-kind="call"] .call-why { animation: call-in .7s var(--ease) .24s both; }
  /* A part that has risen (main.js marks it is-in) stays put when the phone is turned and back: the rise is not replayed. */
  .composer-result[data-kind="call"] :is(.call-v, .dot, .call-why).is-in { animation: none; }

  /* The finding's headline (in "Findings"' place since 3 Oct) waits at the foot of the first screen at .3 and comes to full ink as it rises into view, tied to the
     scroll itself: from its top's entry at the foot to about a third of the way up the screen. Where scroll-driven
     animations are not supported, and with reduced motion, it is simply in ink. It shows after the page itself: a
     second, time-based fade brings it from nothing up to the scroll ink's .3 (its open end takes the ink's value),
     once the question and the paper are in place. */
  @supports (animation-timeline: view()) {
    .hero + .report .report-part:first-of-type > .report-finding { animation: findings-ink 1ms linear both, quiet-in .6s ease .9s both; animation-timeline: view(), auto; animation-range: entry 0% cover 30%, normal; }
    html.is-entered .hero + .report .report-part:first-of-type > .report-finding { animation: findings-ink 1ms linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }   /* turning the phone never replays the fade */
  }
}

/* Every width: the entrance plays once. main.js sets html.is-entered when it is over, so turning a phone (which swaps
   the phone and the wide animations) never plays it again over a post or an answer. */
html.is-entered .byline,
html.is-entered .h1-in,
html.is-entered .hero .composer-col,
html.is-entered .hero .lane,
html.is-entered .scroll-cue > * { animation: none; }

/* Phones held sideways: once the cue has faded (main.js), its bead stops too, so nothing animates unseen. */
@media (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .scroll-cue.is-gone .cue-line::after, .scroll-cue.is-gone .cue-head { animation-play-state: paused; }
}

/* Touch, phones: the button sinks at once under the finger, a shade deeper in its own green, and comes back slowly. */
@media (hover: none) and (max-width: 734px) {
  .composer-go:active,
  .composer-go.is-pressed {
    background: #004a3e;
    transform: scale(.97);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 rgba(0, 46, 38, 0);
    transition-duration: .06s;
  }
  .composer-go:is(:disabled, [aria-disabled="true"]):active { transform: none; background: var(--green); }   /* a tap while it reads (a press that began before stays) */
}

/* Reduced motion: the press is the colour alone. */
@media (hover: none) and (max-width: 734px) and (prefers-reduced-motion: reduce) {
  .composer-go:active,
  .composer-go.is-pressed { transform: none; }
}

/* ---------- Reduced motion: nothing drifts, draws or bounces; the row scrolls sideways instead ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .track { animation: none !important; padding-inline: var(--gutter); margin-left: 0; }

  .lane {
    scroll-padding-inline: var(--gutter);
    touch-action: auto;
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scroll-snap-type: x proximity;
  }

  .float { scroll-snap-align: start; }
}

/* ---------- Forced colours: shadows are dropped, so give edges back ---------- */

@media (forced-colors: active) {
  .post, .reader, .chart-card, .chart-tip, .now-tip, .slide, .truth-card { border: 1px solid CanvasText; }
  .reader-close, .deck-btn, .composer-go { border: 1px solid ButtonText; }
}

/* The sentences under the findings' headers a step bigger (owner, 10 Oct 2026: "Make the texts under the headers a bit
   bigger in font size"): 17/26 on every width (they were 15/23; the model's 14/22 on a desktop). Their colours stay. */
.report-text.model-text, .report-text.finding-sub, .reaction-take { font-size: 17px; line-height: 26px; }

/* Phones: the footer's lists closer together (owner, 10 Oct 2026: "Make the distance between each appendix thing
   closer"): 32px rows (were 44) for the Appendix, Sources and Contact alike, the lists' overhang halved with them so
   every label-to-list and group step stays. Each link is still a 44px target: its extra 6px above and below lies over
   the next row's edge. */
@media (max-width: 734px) {
  .footer-links { margin-block: -5px; }
  .footer-links a, .contact a, .footer-link { position: relative; min-height: 32px; }
  .footer-soon { min-height: 32px; }   /* "LinkedIn post", not yet a link, on the same rows */
  .footer-links a::after, .contact a::after, .footer-link::after { content: ""; position: absolute; inset: -6px 0; }
}