/* ─────────────────────────────────────────────────────────────────────────────
   The public site's stylesheet. Hand-authored, no framework, no build step.

   🛑 THE PALETTE IS THE APP'S, NOT A NEW ONE. Every colour below is copied from
   `src/theme/tokens.css` — the default "Paper & Ink" scaffold a first-ever visitor
   sees when they open the app itself. A visitor who reads a guide here and then
   opens the tracker must not feel they have changed planets, and the way to
   guarantee that is to spend the same ink rather than to choose a nice one.
   `site/site.contract.test.tsx` fails the build if the two ever drift apart.

   ⚠ ONE DELIBERATE DEPARTURE: the type is bigger here. The app's `--text-body` is
   14px, which is right for a dense working surface kept open all day; it is wrong
   for a 1,500-word essay. The reading sizes below are the only values on this page
   that are not the app's.

   Why plain CSS and not Tailwind: this file ships as ONE request with no JavaScript
   behind it, to a reader who may be on a phone on a train. The app's Tailwind build
   also resolves colours through `color-mix()` against a runtime-themed <html>, which
   nothing here has — these pages are static files on a web server.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Fonts: self-hosted, no external request (same policy as the app) ─── */
/* Lantern's pairing (X-125): Manrope for text, Cormorant Garamond for display — the same two faces as
   the app, which is one product with this site. */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Cormorant Garamond Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2-variations');
  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;
}

/* ─── Tokens ─── */
:root {
  color-scheme: light;

  --font-sans: 'Manrope Variable', Manrope, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond Variable', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* The flame, the one colour that follows no theme — the app's token of the same name (X-125). */
  --flame: #E9A23B;

  --bg: #FAF7F5;
  --surface: #FFFFFF;
  --surface-2: #F2EDE9;
  --border: #E6DED8;
  --border-strong: #D6C9C0;
  --text: #1C1614;
  --text-2: #4A403C;
  --muted: #6B605B;
  /* The app's chart status marks (src/theme/tokens.css, X-170) and its long wait (--status-out), for the
     pictures of its charts (X-162). The contract test holds them to the app's values in both modes. */
  --chart-offer: #C97A06;
  --chart-reading: #4E9A6A;
  --chart-out: #5B5F9A;
  --status-out: #2A2D5E;
  --primary: #6B1324;
  --primary-dark: #560f1d;
  --primary-light: #e9dcde;
  --primary-fg: #FFFFFF;
  --accent: #4A7C7F;
  --accent-dark: #3b6366;
  --accent-light: #e4ebec;

  /* The ink a link is drawn in. Light: the maroon, which reads at 11:1 on paper. */
  --link: #6B1324;

  /* The small uppercase label over a heading. It is a SEPARATE token because the teal cannot
     carry it on the dark page, and the first version of this comment bonded a real number to the
     wrong colour — the same defect D-03p-b shipped, caught here by the evidence-pack reviewer.
     Measured: `--accent` #4A7C7F is 4.00:1 on `--bg` and 3.67:1 on `--surface`; the app's own
     `--accent-dark` #3b6366 is worse, 2.82:1 and 2.59:1. Both are under the 4.5 floor for 12px
     bold, so the conclusion held and only the numbers were wrong. In dark the label takes the
     palette's own dusty rose instead of an invented lighter teal. Both values are the app's. */
  --eyebrow-ink: #3b6366;

  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(28, 22, 20, 0.05);
  --shadow-md: 0 4px 10px rgba(28, 22, 20, 0.08), 0 2px 4px rgba(28, 22, 20, 0.04);
  --shadow-lg: 0 10px 25px rgba(28, 22, 20, 0.10), 0 4px 10px rgba(28, 22, 20, 0.05);
  /* A picture's drop shadow (2026-09-24). Deeper than a panel's: the panel shadows darken the page
     under a photo, in light mode, by about 6% on average and 9% at most (23 of 255) at their strongest,
     which read as no shadow at all. */
  --photo-shadow-1: 0 2px 8px rgba(28, 22, 20, 0.22);
  --photo-shadow-2: 0 8px 20px rgba(28, 22, 20, 0.28), 0 2px 6px rgba(28, 22, 20, 0.14);
  --photo-shadow-3: 0 16px 38px rgba(28, 22, 20, 0.34), 0 5px 12px rgba(28, 22, 20, 0.18);

  /* GLASS (X-122), from the Project Virgil redesign page the owner sent, 2026-09-25. The rim is the
     page's own ink at 5%, so it is a tint of whatever is behind it; the hairline is the ink at 9%; the
     catch of light along the top is white — strong on paper, a whisper in the dark. The ambient
     shadow is the redesign's long, soft one, for things that float: the menu, the gathered cards. */
  --glass-rim: color-mix(in srgb, var(--text) 5%, transparent);
  --glass-hair: color-mix(in srgb, var(--text) 9%, transparent);
  --glass-light: rgba(255, 255, 255, 0.9);
  --glass-bar: color-mix(in srgb, var(--surface) 72%, transparent);
  --shadow-ambient: 0 30px 60px -30px rgba(28, 22, 20, 0.22), 0 8px 24px -12px rgba(28, 22, 20, 0.08);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  /* Reading sizes — the one departure from the app's scale, explained at the top. */
  --read: 1.0625rem;      /* 17px body */
  --read-lh: 1.72;
  --measure: 34rem;       /* ~66 characters of Manrope at 17px */
}

/* Dark is the app's dark scaffold, and it follows the reader's OS unless they say
   otherwise. The toggle writes data-theme; the media query answers when it has not. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #16110F;
    --surface: #201A17;
    --surface-2: #2B2320;
    --border: #3A302C;
    --border-strong: #4C403A;
    --text: #F2EDE9;
    --text-2: #D8CFC8;
    --muted: #A79A93;
    --chart-offer: #F0A83A;
    --chart-reading: #86BC95;
    --chart-out: #A3A7E4;
    --status-out: #E4E5FF;
    /* Dark mode's buttons are the lamp's amber (owner, 2026-09-29, picking amber over rose and oxblood). */
    --primary: #E9A23B;
    --primary-dark: #F2B24A;
    --primary-light: #3b2f2c;
    --primary-fg: #1C1406;
    --accent: #4A7C7F;
    --accent-dark: #3b6366;
    --accent-light: #262927;
    --link: #D4A5A5;
    --eyebrow-ink: #D4A5A5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
    --photo-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.55);
    --photo-shadow-2: 0 8px 20px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --photo-shadow-3: 0 16px 38px rgba(0, 0, 0, 0.7), 0 5px 12px rgba(0, 0, 0, 0.45);
    --glass-light: rgba(255, 255, 255, 0.07);
    --shadow-ambient: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 8px 24px -12px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #16110F;
  --surface: #201A17;
  --surface-2: #2B2320;
  --border: #3A302C;
  --border-strong: #4C403A;
  --text: #F2EDE9;
  --text-2: #D8CFC8;
  --muted: #A79A93;
  --chart-offer: #F0A83A;
  --chart-reading: #86BC95;
  --chart-out: #A3A7E4;
  --status-out: #E4E5FF;
  /* Dark mode's buttons are the lamp's amber (owner, 2026-09-29, picking amber over rose and oxblood). */
  --primary: #E9A23B;
  --primary-dark: #F2B24A;
  --primary-light: #3b2f2c;
  --primary-fg: #1C1406;
  --accent: #4A7C7F;
  --accent-dark: #3b6366;
  --accent-light: #262927;
  --link: #D4A5A5;
  --eyebrow-ink: #D4A5A5;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
  --photo-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.55);
  --photo-shadow-2: 0 8px 20px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --photo-shadow-3: 0 16px 38px rgba(0, 0, 0, 0.7), 0 5px 12px rgba(0, 0, 0, 0.45);
  --glass-light: rgba(255, 255, 255, 0.07);
  --shadow-ambient: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 8px 24px -12px rgba(0, 0, 0, 0.35);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--read);
  line-height: var(--read-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  /* Cormorant Garamond is drawn for open spacing; the tight tracking Fraunces wore crowds it (X-125). */
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text);
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  z-index: 50;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ─── Layout ─── */
.wrap {
  width: 100%;
  max-width: 68rem;          /* 1088px — the app's own page width */
  margin-inline: auto;
  padding-inline: 1.25rem;
}
/* The reading column. ⚠ ONE WIDTH FOR THE WHOLE ARTICLE — the heading, the contents box and
   the paragraphs share an edge. The first cut gave the wrapper 46rem and the prose 34rem, so
   the text sat inside its own heading with the page's whitespace all on one side. */
.wrap-narrow { max-width: 40rem; }
.article .prose,
.article-head .lede { max-width: none; }

/* The FLOATING GLASS MENU (X-122), from the Project Virgil redesign page the owner sent, 2026-09-25:
   *"I like the glass floating menu up top."* The header is a clear strip that sticks to the top; the
   bar inside it is one centered pill of glass, floating 1rem down, the page blurred behind it.
   ⚠ The blur and the tint are on a layer BEHIND the pill (::before), never on the pill itself: a
   backdrop-filter makes an element the box its fixed-position children are placed in, and the phone
   menu below is a fixed, full-screen sheet that would otherwise be shut inside the pill. The strip
   ignores the pointer, so a click beside the pill reaches the page under it. */
.site-header {
  position: sticky;
  top: 1rem;
  z-index: 20;
  margin-top: 1rem;
  padding-inline: 0.75rem;
  pointer-events: none;
}
/* 🛑 THE SAME GLASS AS THE APP'S TOP BAR, VALUE FOR VALUE (owner, 2026-09-25: "why doesn't the center
   bar on the Vox Novum page match the header bar on the app? ... You keep thinking of these as separate
   things"). The recipe is `.app-glass-bar` in src/theme/globals.css: a 5px frosted RIM (::after) with a
   hairline outside it, a CORE (::before) with a catch of light and a hairline inside the rim, 4px of
   padding, and every control inside fully round. Change one, change both. */
.site-header .wrap {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.25rem;
  border: 5px solid transparent;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--glass-hair), var(--shadow-ambient);
  white-space: nowrap;
}
.site-header .wrap::before,
.site-header .wrap::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.site-header .wrap::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass-light) 25%, transparent), transparent 60%),
    var(--glass-bar);
  box-shadow: inset 0 0 0 1px var(--glass-hair), inset 0 1px 1px var(--glass-light);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  /* 🛑 ITS OWN COMPOSITED LAYER — Pete's bug, 2026-09-28: the bar flickered on his Mac in Chrome, across
     versions, badly enough that he had stopped using blur. Chrome on macOS repaints a backdrop-filter
     on a sticky element as the page scrolls under it and can drop frames doing it; putting each glass
     layer on its own GPU layer is the standard remedy. On the pseudo-elements, never on the pill: a
     transform there would shut the phone menu's fixed sheet inside the pill, as the note above says. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.site-header .wrap::after {
  inset: -5px;
  z-index: -2;
  background: color-mix(in srgb, var(--surface) 28%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.6);
  backdrop-filter: blur(8px) saturate(1.6);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.site-header .wrap :is(a, button, summary) { border-radius: 999px; }

/* The floating menu switched off (X-123, `look-no-floating-header`): the bar sits flat across the top
   of the page, a plain strip with a line under it — no pill, no glass, nothing floating over the page. */
html.look-no-floating-header .site-header {
  top: 0; margin-top: 0; padding-inline: 0; pointer-events: auto;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
html.look-no-floating-header .site-header .wrap {
  width: auto; max-width: 68rem; padding: 0.5rem 1.25rem; border: 0; border-radius: 0; box-shadow: none;
  justify-content: space-between;
}
html.look-no-floating-header .site-header .wrap::before,
html.look-no-floating-header .site-header .wrap::after { content: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.85rem 0.25rem 0.375rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand svg { display: block; flex: none; }
.brand img { border-radius: 6px; display: block; }  /* 🛑 His logo keeps its own shape — never cropped round to match the pill (owner, 2026-09-25). */
.brand span { white-space: nowrap; }
/* The one-line wordmark (2026-09-27): Cormorant at 600, "Project" in small caps in the quieter ink, the
   lantern (38px) twice the height of the words' ink. */
.brand-name { font-size: 1.55rem; font-weight: 600; letter-spacing: 0; line-height: 1; }
.brand-project { font-variant-caps: small-caps; color: var(--muted); }
/* The narrowest phones: at 320px the full-size mark pushed the menu button out of the pill (Omega review,
   2026-09-27). The same lockup, smaller — the lantern still twice the words' height. */
@media (max-width: 24rem) {
  .brand-name { font-size: 1.2rem; }
  .brand .lantern-mark { width: 30px; height: 30px; }
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.site-nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  transition: background-color 500ms var(--ease-spring), color 500ms var(--ease-spring);
}
.site-nav a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.site-nav a[aria-current='page'] { color: var(--text); font-weight: 600; }
.site-header .btn-sm { border-radius: 999px; padding: 0.6rem 1rem; }

/* Where the links no longer fit in the pill, they move behind a button onto a full-screen sheet of
   glass, set large — the redesign's phone menu. Opened by a <details>, so it needs no script. */
.nav-more { display: none; }
.nav-burger {
  list-style: none;
  position: relative;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  z-index: 1;
}
.nav-burger::-webkit-details-marker { display: none; }
.nav-burger:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.nav-burger span {
  position: absolute; left: 11px; top: 50%;
  width: 16px; height: 1.5px; border-radius: 2px;
  background: currentColor;
  transition: transform 600ms var(--ease-spring);
}
.nav-burger span:nth-child(1) { transform: translateY(-4px); }
.nav-burger span:nth-child(2) { transform: translateY(4px); }
.nav-more[open] .nav-burger span:nth-child(1) { transform: rotate(45deg); }
.nav-more[open] .nav-burger span:nth-child(2) { transform: rotate(-45deg); }
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 1.5rem 3rem;
  background: var(--glass-bar);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  /* Its own composited layer, like the bar's glass — the same Chrome-on-Mac flicker (Pete, 2026-09-28). */
  transform: translateZ(0);
  backface-visibility: hidden;
  white-space: normal;
  animation: nav-sheet-in 600ms var(--ease-spring) both;
}
.nav-sheet a {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--text);
  text-decoration: none;
  animation: nav-sheet-link 800ms var(--ease-spring) both;
}
.nav-sheet a:nth-child(2) { animation-delay: 60ms; }
.nav-sheet a:nth-child(3) { animation-delay: 120ms; }
.nav-sheet a:nth-child(4) { animation-delay: 180ms; }
.nav-sheet a:nth-child(n + 5) { animation-delay: 240ms; }
.nav-sheet .nav-sheet-demo { color: var(--primary); }
@keyframes nav-sheet-in { from { opacity: 0; } }
@keyframes nav-sheet-link { from { opacity: 0; transform: translateY(2rem); } }

@media (max-width: 64rem) {
  .site-header .site-nav { display: none; }
  .nav-more { display: block; }
}
/* A LONGER MENU MOVES BEHIND THE BUTTON SOONER. His menu holds up to ten links (X-116), and the pill
   never wraps, so where the links would not fit it would run off the screen. `Layout.tsx` measures the
   menu he saved and names how wide the bar must be; these are those widths. */
@media (max-width: 80rem) {
  .nav-fits-80 .site-nav { display: none; }
  .nav-fits-80 .nav-more { display: block; }
}
@media (max-width: 96rem) {
  .nav-fits-96 .site-nav { display: none; }
  .nav-fits-96 .nav-more { display: block; }
}
.nav-fits-never .site-nav { display: none; }
.nav-fits-never .nav-more { display: block; }
/* On a phone the pill runs the width of the screen, and the demo button moves into the sheet. */
@media (max-width: 40rem) {
  .site-header { top: 0.75rem; margin-top: 0.75rem; }
  .site-header .wrap { width: 100%; justify-content: space-between; }
  .header-actions .btn-sm { display: none; }
}
/* SIGNED IN OR NOT (X-152). Every page carries both sets of buttons; `THEME_SCRIPT` puts `signed-in`
   on <html> before first paint when the app left a session in this browser. Hiding only — each
   element keeps its own display, so the phone rule above still moves the header buttons into the sheet. */
:root:not(.signed-in) .signed-in-only { display: none; }
:root.signed-in .signed-out-only { display: none; }
/* ⚠ The nav's own link colour is more specific than `.btn-primary`, so without this the one
   button in the header renders maroon-on-maroon — which is exactly how it first shipped. */
.site-nav a.btn-primary { color: var(--primary-fg); }
.site-nav a.btn-primary:hover { background: var(--primary-dark); color: var(--primary-fg); }

/* ⟦app-blocks⟧ */
/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-sm { padding: 0.5rem 0.8rem; font-size: 0.9rem; }

/* ⟦/app-blocks⟧ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 500ms var(--ease-spring);
}
.theme-toggle:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
/* Without JS the control cannot do anything, so it is not shown at all. */
html:not(.js) .theme-toggle { display: none; }
/* The button shows the mode it would switch TO: a moon on paper, a sun in the dark. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme='light']) .theme-toggle .icon-moon { display: none; }
}

/* ─── Type helpers ─── */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
  margin: 0 0 0.9rem;
}
.lede { font-size: 1.15rem; color: var(--text-2); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* ─── Hero ─── */
.hero { padding-block: 3.5rem 2.5rem; }
.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 3rem; }
  .hero { padding-block: 4.5rem 3.5rem; }
}
.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.4rem);
  margin-bottom: 1.1rem;
}
.hero .lede { font-size: 1.2rem; }
/* ⟦app-blocks⟧ */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
/* ⟦/app-blocks⟧ */

/* ─── Bands ─── */
.band {
  border-block: 1px solid var(--border);
  background: var(--surface);
  padding-block: 4rem;
}
.band-plain { padding-block: 4rem; }
.band h2, .band-plain h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
}
.section-head { max-width: 40rem; margin-bottom: 2.25rem; }
.section-head p { color: var(--text-2); margin: 0.85rem 0 0; }

/* ─── Cards ─── */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* ⟦app-blocks⟧ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
}
.band .card { background: var(--bg); }
.card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}
.card p { margin: 0; color: var(--text-2); font-size: 0.97rem; line-height: 1.6; }
.card .eyebrow { margin-bottom: 0.55rem; }
/* ⟦/app-blocks⟧ */

a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
a.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
a.card h3 { color: var(--text); }
a.card:hover h3 { color: var(--primary); }

/* ─── Article list ─── */
.article-list { display: grid; gap: 1rem; }
.article-list .meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.75rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ─── Article body ─── */
.article { padding-block: 3rem 4rem; }
.article-head { margin-bottom: 2.5rem; }
.article-head h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  margin-bottom: 1rem;
}
.article-head .meta {
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.35rem; color: var(--text-2); }
.prose > p:first-of-type { font-size: 1.12rem; color: var(--text); }
.prose h2 {
  font-size: 1.6rem;
  margin: 2.75rem 0 0.9rem;
  scroll-margin-top: 5rem;
}
.prose h3 { font-size: 1.22rem; margin: 2rem 0 0.7rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.6rem; }
.prose strong { color: var(--text); font-weight: 650; }
.prose blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--primary);
  color: var(--text-2);
  font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.prose h4 { font-size: 1.05rem; margin: 1.75rem 0 0.6rem; }
/* X-112 — what the owner's editor can put in a body that the hand-written guides never used. */
.prose figure { margin: 2rem 0; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.prose figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--muted); }
.prose code { font-size: 0.92em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
.prose pre { background: var(--surface-2); padding: 1rem 1.1rem; border-radius: var(--radius); overflow-x: auto; margin: 0 0 1.35rem; }
.prose pre code { background: none; padding: 0; }
.prose s { color: var(--muted); }
.article-head .byline { color: var(--text-2); font-weight: 600; }
.back-link { margin-top: 2rem; }
.empty-section { margin-top: 1rem; }

.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0;
}
.callout p { margin: 0; font-size: 0.97rem; }
.callout p + p { margin-top: 0.75rem; }
.callout .callout-title {
  font-weight: 700;
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.toc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.35rem;
  margin-bottom: 2.5rem;
}
.toc p {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: 0.35rem; font-size: 0.95rem; }

/* The one line at the end of a guide that says the app exists. It is a note, not
   an advertisement dressed as a paragraph — see site/README.md. */
.after-note {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.97rem;
  color: var(--muted);
  max-width: var(--measure);
}
.after-note a { font-weight: 600; }

/* ─── The pipeline illustration (a drawing, not a screenshot) ─── */
.board {
  /* Sized by the space it is given, not by the window: a board in a narrow column on a wide screen,
     or in the editor's phone preview, folds the same as on a phone (X-114). */
  container: board / inline-size;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
}
.board-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.board-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.board-col {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 0.55rem;
  min-height: 9.5rem;
}
.board-col > .col-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.board-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.55rem;
  margin-bottom: 0.45rem;
  box-shadow: var(--shadow-sm);
}
.board-card .name { font-size: 0.8rem; font-weight: 650; color: var(--text); line-height: 1.25; }
.board-card .agency { font-size: 0.7rem; color: var(--muted); line-height: 1.3; }
.pill {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  white-space: nowrap;      /* a pill never breaks across lines */
}
.pill-wait { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.pill-live { background: var(--accent-light); color: var(--accent-dark); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.pill-offer { background: var(--primary-light); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
:root[data-theme='dark'] .pill-live,
:root[data-theme='dark'] .pill-offer { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .pill-live,
  :root:not([data-theme='light']) .pill-offer { color: var(--text); }
}

/* Four stages across while they fit; two by two when the board is narrow; one above the other when
   it is narrower still. Empty stages shrink rather than holding their full height. */
@container board (max-width: 32rem) {
  .board-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-col { min-height: 0; }
}
@container board (max-width: 18rem) {
  .board-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Footer ─── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 2.5rem;
  margin-top: 1rem;
}
.footer-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.site-footer h2 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
  font-weight: 700;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer a { color: var(--text-2); text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.colophon {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.colophon p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    /* The delay too: the stacked cards wait their turn hidden, and a shortened animation after a
       full delay is still a blank box that snaps in (X-122 review). */
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  a.card:hover { transform: none; }
}
.hero-note { margin-top: 0.9rem; }
.closing { text-align: center; }
.closing .lede { margin: 0.9rem auto 0; }
.closing .cta-row { justify-content: center; }
.lost-quote { margin: 0 0 1.25rem; padding-left: 1.1rem; border-left: 3px solid var(--primary); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.55; color: var(--text-2); }
.lost-quote p { margin: 0 0 0.4rem; }
.lost-quote footer { font-family: var(--font-sans); font-style: normal; font-size: 0.85rem; color: var(--muted); }
.lost-stars { font-family: var(--font-display); font-style: italic; color: var(--text-2); margin: 0 0 1rem; }
.lost-stars span { font-family: var(--font-sans); font-style: normal; font-size: 0.85rem; color: var(--muted); margin-left: 0.4rem; }
.lost-code { font-family: var(--font-display); font-weight: 600; font-size: clamp(4.5rem, 3rem + 7vw, 8rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--primary); margin: 0 0 0.75rem; }

/* ⟦app-blocks⟧ */
/* ─── Home and What it does: columns of stacked boxes (X-114) ───
   A section holds rows; a row holds columns; a column stacks its boxes, packed tight. The gap under
   a box is the gap beside it. A row is a WRAPPING flex line: each column grows in proportion to its
   width in twelfths (cs-N), and keeps that share until it would drop below a readable width — then it
   folds under the others. Continuous at every width, down to one column on a phone; the app's own
   dashboard and agent card move this way, which is where the owner sent me to look (2026-09-24).
   Everything is by class: the page's Content-Security-Policy refuses inline styles. */
.fl-section { padding-block: 4rem; }
.fl-hero { padding-block: 3.5rem 2.5rem; }
@media (min-width: 62rem) { .fl-hero { padding-block: 4.5rem 3.5rem; } }
.fl-tint { border-block: 1px solid var(--border); background: var(--surface); }
.fl-tint .card { background: var(--bg); }
.fl-rows { --fl-gap: 1.25rem; display: flex; flex-direction: column; gap: var(--fl-gap); }
.fl-reading { max-width: 44rem; }
.fl-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--fl-gap); }
.fl-col {
  display: flex;
  flex-direction: column;
  gap: var(--fl-gap);
  flex-basis: 0;
  /* The readable width below which a column folds under its neighbours. */
  min-width: min(100%, 15rem);
}
.fl-col-wide { min-width: min(100%, 22rem); }
.fl-block { min-width: 0; }
/* A panel (X-115): a box holding its own rows of columns. Its look is his, part by part — a
   background, a border, corners, a drop shadow (the sample agent board is all four, at their largest).
   Inside a shaded section a filled panel takes the page color, so it still stands out, and its cards
   take the section's. */
.fl-boxed { padding: 1.5rem; }
.fl-group.fl-fill { background: var(--surface); }
.fl-group.fl-fill .card { background: var(--bg); }
.fl-tint .fl-group.fl-fill { background: var(--bg); }
.fl-tint .fl-group.fl-fill .card { background: var(--surface); }
.fl-group.fl-border { border: 1px solid var(--border); }
.fl-r1 { border-radius: var(--radius); }
.fl-r2 { border-radius: var(--radius-lg); }
.fl-r3 { border-radius: var(--radius-xl); }
/* A glass panel with no drop shadow still draws its ring; kept ABOVE the shadow rules so a shadow,
   when set, is the one that wins — it carries the ring with it (X-122). */
.fl-glass { box-shadow: var(--fl-ring); }
/* 🛑 THE RING BELONGS TO THE BOX THAT ASKED FOR IT. A custom property is inherited, so a glass panel
   used to hand its ring to every box inside it, glass edge or not (X-122 review). Reset on every box
   that did not ask; `initial` makes the var() fallback in the shadow rules below apply again. */
:where(.fl-block, .fl-group):not(.fl-glass) { --fl-ring: initial; }
.fl-sh1 { box-shadow: var(--fl-ring, 0 0 #0000), var(--shadow-sm); }
.fl-sh2 { box-shadow: var(--fl-ring, 0 0 #0000), var(--shadow-md); }
.fl-sh3 { box-shadow: var(--fl-ring, 0 0 #0000), var(--shadow-lg); }
/* The same parts on a single box (2026-09-24). Stated on or off, after the card's own look, so a card
   he styles loses what he turned off. */
.fl-block.fl-fill:not(.fl-group) { background: var(--surface); }
/* Against a shaded section or a filled panel a filled box takes the page color, as cards do there;
   inside a filled panel in a shaded section it flips back, as cards do there. */
.fl-tint .fl-block.fl-fill:not(.fl-group), .fl-group.fl-fill .fl-block.fl-fill:not(.fl-group) { background: var(--bg); }
.fl-tint .fl-group.fl-fill .fl-block.fl-fill:not(.fl-group) { background: var(--surface); }
/* "No background" has to beat those same context rules for cards (up to four classes deep). */
.fl-rows .fl-block.fl-nofill.fl-nofill { background: transparent; }
.fl-block.fl-border:not(.fl-group) { border: 1px solid var(--border); }
.fl-block.fl-noborder { border: 0; }
.fl-block.fl-r0 { border-radius: 0; }
.fl-block.fl-r1 { border-radius: var(--radius); }
.fl-block.fl-r2 { border-radius: var(--radius-lg); }
.fl-block.fl-r3 { border-radius: var(--radius-xl); }
.fl-block.fl-sh0 { box-shadow: var(--fl-ring, none); }
.fl-block.fl-sh1 { box-shadow: var(--fl-ring, 0 0 #0000), var(--shadow-sm); }
.fl-block.fl-sh2 { box-shadow: var(--fl-ring, 0 0 #0000), var(--shadow-md); }
.fl-block.fl-sh3 { box-shadow: var(--fl-ring, 0 0 #0000), var(--shadow-lg); }
/* A picture's parts land on the picture. */
.im-framed .fl-figure img { border-radius: 0; }
.im-r1 .fl-figure img { border-radius: var(--radius); }
.im-r2 .fl-figure img { border-radius: var(--radius-lg); }
.im-r3 .fl-figure img { border-radius: var(--radius-xl); }
.im-border .fl-figure img { border: 1px solid var(--border); }
.im-sh1 .fl-figure img { box-shadow: var(--im-ring, 0 0 #0000), var(--photo-shadow-1); }
.im-sh2 .fl-figure img { box-shadow: var(--im-ring, 0 0 #0000), var(--photo-shadow-2); }
.im-sh3 .fl-figure img { box-shadow: var(--im-ring, 0 0 #0000), var(--photo-shadow-3); }
/* A GLASS EDGE (X-122) — a part of its own, beside the drop shadow. A see-through rim with a hairline
   outside it and a catch of light inside its top edge: the redesign's double bezel, drawn on ONE box.
   The rim is the box's border and the background stops inside it, so the page shows through the rim.
   The ring and the drop shadow are one box-shadow — the shadow rules above read --fl-ring — so turning
   either on never turns the other off. The rim wins over Border: a glass box already has an edge. */
.fl-glass {
  --fl-ring: 0 0 0 1px var(--glass-hair), inset 0 1px 1px var(--glass-light);
  background-clip: padding-box;
}
.fl-glass,
.fl-rows .fl-block.fl-glass.fl-glass { border: 7px solid var(--glass-rim); }
.im-glass .fl-figure img {
  --im-ring: 0 0 0 1px var(--glass-hair);
  border: 6px solid var(--glass-rim);
  background-clip: padding-box;
  box-shadow: var(--im-ring);
}

/* ─── THE LOOK (X-123) — his switches, one per style, for the public pages and the app together ───
   The owner, 2026-09-27: one Look panel, a switch per style; off hides the style everywhere and keeps
   every box's own setting, so on brings back exactly what was there. So a switch is a class on <html>
   (`look-no-glass`, `look-no-shadow`), set by the pages function here and by the app there, and these
   rules undo the style without touching a box's classes. This block is part of the app's copy of the
   box rules, so both read the same switches. */
html.look-no-glass .fl-glass { --fl-ring: initial; }
html.look-no-glass .fl-glass,
html.look-no-glass .fl-rows .fl-block.fl-glass.fl-glass { border: 0; }
html.look-no-glass .fl-group.fl-glass.fl-border,
html.look-no-glass .fl-rows .fl-block.fl-glass.fl-glass.fl-border { border: 1px solid var(--border); }
html.look-no-glass .im-glass .fl-figure img { --im-ring: initial; border: 0; box-shadow: none; }
html.look-no-glass .im-glass.im-border .fl-figure img { border: 1px solid var(--border); }
html.look-no-shadow .fl-sh1, html.look-no-shadow .fl-sh2, html.look-no-shadow .fl-sh3,
html.look-no-shadow .fl-block.fl-sh1, html.look-no-shadow .fl-block.fl-sh2, html.look-no-shadow .fl-block.fl-sh3 { box-shadow: var(--fl-ring, none); }
html.look-no-shadow .card { box-shadow: none; }
html.look-no-shadow .im-sh1 .fl-figure img, html.look-no-shadow .im-sh2 .fl-figure img, html.look-no-shadow .im-sh3 .fl-figure img { box-shadow: var(--im-ring, none); }

/* ⟦/app-blocks⟧ */
/* ─── The agent cards, gathered at the side (X-122) ───
   The redesign page's fanned stack: five cards, each with the glass edge, dropping into place one after
   another as the page opens and drawing apart under the pointer. CSS only — a keyframe with a delay per
   card — because the page's policy runs no script it has not named. The outer card holds its place in
   the fan (and moves when the fan opens); the inner one does the arriving, so the two never fight over
   one transform. Too narrow to fan them, the cards stand in a plain column, in pipeline order. */
.stk-box { container: stk / inline-size; padding-top: 2rem; }
.stk { position: relative; height: 37.5rem; }
.stk-title { position: absolute; left: 6%; top: -1.9rem; margin: 0; font-size: 0.9rem; color: var(--muted); }
.stk-title strong { color: var(--text); font-weight: 600; }
.stk-card {
  position: absolute; left: 50%; top: 50%;
  width: min(22.5rem, 88%);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform 900ms var(--ease-spring);
}
.stk:hover .stk-card { transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(var(--fr)); }
.stk-1 { --x: -60px; --y: -205px; --r: -5deg;   --fx: -110px; --fy: -240px; --fr: -8deg; --lift-delay: 250ms; }
.stk-2 { --x: 50px;  --y: -128px; --r: 3.5deg;  --fx: 100px;  --fy: -135px; --fr: 6deg;  --lift-delay: 390ms; }
.stk-3 { --x: -40px; --y: -52px;  --r: -2.5deg; --fx: -100px; --fy: -30px;  --fr: -4deg; --lift-delay: 530ms; }
.stk-4 { --x: 36px;  --y: 24px;   --r: 2.5deg;  --fx: 100px;  --fy: 75px;   --fr: 4deg;  --lift-delay: 670ms; }
.stk-5 { --x: 0px;   --y: 140px;  --r: -1deg;   --fx: -10px;  --fy: 210px;  --fr: -1deg; --lift-delay: 810ms; }
.stk-lift {
  /* Over its neighbours the rim is mostly page, so the card under it reads as behind glass, not through a hole. */
  --glass-rim: color-mix(in srgb, var(--bg) 70%, transparent);
  border-width: 6px;
  border-radius: calc(var(--radius-xl) + 6px);
  background: var(--surface);
  padding: 1rem 1.2rem;
  display: grid;
  gap: 0.2rem;
  box-shadow: var(--fl-ring), var(--shadow-ambient);
  animation: stk-arrive 1200ms var(--ease-spring) var(--lift-delay) both;
}
@keyframes stk-arrive {
  from { opacity: 0; transform: translateY(-60px) rotate(calc(var(--r) * 1.2)); }
}
.stk-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.stk-stage { font-size: 0.85rem; color: var(--muted); }
.stk-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.stk-agency { color: var(--text-2); font-size: 0.97rem; }
/* The offer is the one outlined — inside the rim, as the redesign draws it. */
.stk-offer { box-shadow: var(--fl-ring), inset 0 0 0 1.5px var(--primary), var(--shadow-ambient); }
.stk-offer-line {
  margin-top: 0.6rem; padding-top: 0.6rem;
  border-top: 1px dashed var(--border-strong);
  font-size: 0.92rem; color: var(--text-2);
}
@container stk (max-width: 26rem) {
  .stk-box { padding-top: 0; }
  .stk { height: auto; display: grid; gap: 0.75rem; }
  .stk-title { position: static; }
  .stk .stk-card, .stk:hover .stk-card { position: relative; left: auto; top: auto; width: 100%; transform: none; }
  .stk-lift { animation-name: stk-rise; }
}
@keyframes stk-rise {
  from { opacity: 0; transform: translateY(24px); }
}
/* ⟦app-blocks⟧ */
/* A picture keeps its native size — its own pixels, never stretched — and never runs wider than its
   box. The caption wraps to the picture's width rather than widening it. When he sets a width, the
   picture fills that share of its box. By class, as everything on the page is. */
.iw-10 .fl-figure { width: 10%; }
.iw-15 .fl-figure { width: 15%; }
.iw-20 .fl-figure { width: 20%; }
.iw-25 .fl-figure { width: 25%; }
.iw-30 .fl-figure { width: 30%; }
.iw-35 .fl-figure { width: 35%; }
.iw-40 .fl-figure { width: 40%; }
.iw-45 .fl-figure { width: 45%; }
.iw-50 .fl-figure { width: 50%; }
.iw-55 .fl-figure { width: 55%; }
.iw-60 .fl-figure { width: 60%; }
.iw-65 .fl-figure { width: 65%; }
.iw-70 .fl-figure { width: 70%; }
.iw-75 .fl-figure { width: 75%; }
.iw-80 .fl-figure { width: 80%; }
.iw-85 .fl-figure { width: 85%; }
.iw-90 .fl-figure { width: 90%; }
.iw-95 .fl-figure { width: 95%; }
.iw-100 .fl-figure { width: 100%; }
.fl-image[class*='iw-'] .fl-figure img { width: 100%; }
.fl-center .fl-figure { margin-inline: auto; }
.fl-text > :last-child, .fl-text .ProseMirror > :last-child { margin-bottom: 0; }
.fl-text h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); margin: 0 0 1rem; }
.fl-hero .fl-text h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.4rem); margin-bottom: 1.1rem; }
.fl-text h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); margin: 0 0 0.85rem; }
.fl-text h3 { font-size: 1.22rem; margin: 0 0 0.7rem; }
.fl-text p, .fl-text ul, .fl-text ol { margin: 0 0 1.1rem; color: var(--text-2); }
.fl-text p.eyebrow { color: var(--eyebrow-ink); margin: 0 0 0.9rem; }
.fl-hero .fl-text p.lede { font-size: 1.2rem; }
.fl-text p.small { color: var(--muted); }
.fl-text ul, .fl-text ol { padding-left: 1.3rem; }
.fl-text strong, .fl-card strong { color: var(--text); font-weight: 650; }
.fl-card p { margin: 0 0 0.45rem; }
.fl-card > :last-child, .fl-card .ProseMirror > :last-child { margin-bottom: 0; }
.fl-block .cta-row { margin-top: 0; }
.fl-center { text-align: center; }
.fl-center .cta-row { justify-content: center; }
.fl-center .lede { margin-inline: auto; }
.fl-figure { margin: 0; width: fit-content; max-width: 100%; }
.fl-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.fl-figure figcaption { width: 0; min-width: 100%; margin-top: 0.6rem; font-size: 0.88rem; color: var(--muted); }
.cs-1 { flex-grow: 1; }
.cs-2 { flex-grow: 2; }
.cs-3 { flex-grow: 3; }
.cs-4 { flex-grow: 4; }
.cs-5 { flex-grow: 5; }
.cs-6 { flex-grow: 6; }
.cs-7 { flex-grow: 7; }
.cs-8 { flex-grow: 8; }
.cs-9 { flex-grow: 9; }
.cs-10 { flex-grow: 10; }
.cs-11 { flex-grow: 11; }
.cs-12 { flex-grow: 12; }
/* A box whose height he set (Fit to text off): at least this tall, never shorter than its contents. */
.mh-1 { min-height: 1rem; }
.mh-2 { min-height: 2rem; }
.mh-3 { min-height: 3rem; }
.mh-4 { min-height: 4rem; }
.mh-5 { min-height: 5rem; }
.mh-6 { min-height: 6rem; }
.mh-7 { min-height: 7rem; }
.mh-8 { min-height: 8rem; }
.mh-9 { min-height: 9rem; }
.mh-10 { min-height: 10rem; }
.mh-11 { min-height: 11rem; }
.mh-12 { min-height: 12rem; }
.mh-13 { min-height: 13rem; }
.mh-14 { min-height: 14rem; }
.mh-15 { min-height: 15rem; }
.mh-16 { min-height: 16rem; }
.mh-17 { min-height: 17rem; }
.mh-18 { min-height: 18rem; }
.mh-19 { min-height: 19rem; }
.mh-20 { min-height: 20rem; }
.mh-21 { min-height: 21rem; }
.mh-22 { min-height: 22rem; }
.mh-23 { min-height: 23rem; }
.mh-24 { min-height: 24rem; }
.mh-25 { min-height: 25rem; }
.mh-26 { min-height: 26rem; }
.mh-27 { min-height: 27rem; }
.mh-28 { min-height: 28rem; }
.mh-29 { min-height: 29rem; }
.mh-30 { min-height: 30rem; }
.mh-31 { min-height: 31rem; }
.mh-32 { min-height: 32rem; }
.mh-33 { min-height: 33rem; }
.mh-34 { min-height: 34rem; }
.mh-35 { min-height: 35rem; }
.mh-36 { min-height: 36rem; }
.mh-37 { min-height: 37rem; }
.mh-38 { min-height: 38rem; }
.mh-39 { min-height: 39rem; }
.mh-40 { min-height: 40rem; }
.mh-41 { min-height: 41rem; }
.mh-42 { min-height: 42rem; }
.mh-43 { min-height: 43rem; }
.mh-44 { min-height: 44rem; }
.mh-45 { min-height: 45rem; }
.mh-46 { min-height: 46rem; }
.mh-47 { min-height: 47rem; }
.mh-48 { min-height: 48rem; }
.mh-49 { min-height: 49rem; }
.mh-50 { min-height: 50rem; }
.mh-51 { min-height: 51rem; }
.mh-52 { min-height: 52rem; }
.mh-53 { min-height: 53rem; }
.mh-54 { min-height: 54rem; }
.mh-55 { min-height: 55rem; }
.mh-56 { min-height: 56rem; }
.mh-57 { min-height: 57rem; }
.mh-58 { min-height: 58rem; }
.mh-59 { min-height: 59rem; }
.mh-60 { min-height: 60rem; }

/* ⟦/app-blocks⟧ */
/* ── A piece arranged in blocks (X-118) ──
   Its title sits in the reading column as always; the layout under it runs the page's width. The
   default layout's one section is the reading column itself, lined up with the title, its writing
   as wide as a guide's always was. */
.article-arranged .article-top { padding-bottom: 0; }
.article-arranged .article-top .article-head { margin-bottom: 0; }
.article-arranged section.fl-section:first-of-type { padding-top: 2.5rem; }
.article-arranged .fl-reading { max-width: 40rem; }
.article-arranged .fl-reading .prose { max-width: none; }
.article-arranged .back-link { padding-bottom: 4rem; }

/* A collection's list page (X-121): its heading, what he writes above the list, then the list — spaced
   as the single block it was before he could edit it, so an untouched list page looks exactly as built. */
.list-page-head.article { padding-bottom: 0; }
.section-pieces.article { padding-top: 0; }

/* HIS LANTERN's colours (X-125) — oxblood lantern, the flame always amber (owner,
   2026-09-26: "the flame is always yellow or amber"). The app's twin is in src/theme/globals.css. */
.lantern-body { fill: #6B1324; }
/* Fixed brand colours, the same as the app's rail (2026-09-27): the designer's red in dark, where the
   site's own --primary turns pink. */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lantern-body { fill: #9C1C34; } }
:root[data-theme='dark'] .lantern-body { fill: #9C1C34; }
.lantern-flame { fill: var(--flame); }
/* The lit glass behind the flame: white in light, parchment in dark — the same as the app's rail. */
.lantern-glass { fill: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lantern-glass { fill: #F1E9DA; } }
:root[data-theme='dark'] .lantern-glass { fill: #F1E9DA; }
.brand .lantern-mark { display: block; flex: none; }


/* THE LANTERN HOME'S OWN COLOURS (X-135), from the Lantern v2 design — fixed, like the flame: the night band,
   the parchment inks on it, the paper of a picture, the pencil. Named here so every colour below is a token. */
:root {
  --ln-glow: rgba(240, 168, 58, 0.30);
  --ln-glow-soft: rgba(240, 168, 58, 0.08);
  --ln-glow-drop: rgba(240, 168, 58, 0.35);
  --ln-veil: rgba(240, 228, 205, 0.07);
  --ln-veil-2: rgba(240, 228, 205, 0.1);
  --ln-veil-line: rgba(240, 228, 205, 0.14);
  --ln-veil-4: rgba(240, 228, 205, 0.15);
  --ln-veil-strong: rgba(240, 228, 205, 0.28);
  --ln-veil-5: rgba(240, 228, 205, 0.3);
  --ln-veil-hair: rgba(240, 228, 205, 0.08);
  --ln-paper-line: rgba(34, 32, 28, 0.2);
  --ln-deep-shadow: rgba(0, 0, 0, 0.8);
  --ln-page-shade: rgba(0, 0, 0, 0.06);
  --ln-page-shade-2: rgba(0, 0, 0, 0.08);
  --ln-spread-shadow: rgba(60, 45, 20, 0.5);
  --ln-night: #13110D;
  --ln-night-2: #1E1B15;
  --ln-night-3: #26221B;
  --ln-night-4: #1A1712;
  --ln-night-5: #2A2418;
  --ln-parchment: #F1E9DA;
  --ln-parchment-2: #BDB3A1;
  --ln-parchment-3: #A69C8B;
  --ln-dusk-ink: #857C6D;
  --ln-lamp: #F0A83A;
  --ln-lamp-hi: #F2B24A;
  --ln-ink-on-lamp: #1C1406;
  --ln-moss-light: #8DBB86;
  --ln-dusk-light: #A3A7E4;
  --ln-ember: #B8472E;
  --ln-moss: #4E7A4B;
  --ln-dusk: #3F63B8;
  --ln-paper: #F7F6F2;
  --ln-paper-2: #ECEAE3;
  --ln-paper-ink: #22201C;
  --ln-paper-ink-2: #56524A;
  --ln-paper-muted: #6E685C;
  --ln-oxblood: #6B1324;
  --ln-white: #FFFFFF;
}

/* ─── THE LANTERN HOME (X-135): the night band, the path down the page, the pictures of the app ───
   From the Lantern v2 design the owner approved (docs/design/lantern-v2/public-home.html, 2026-09-26:
   "Yes to everything"), built as parts of his block editor rather than a fixed page — a section style
   (Night), a section setting (Path) and a box (Picture of the app), each his to use anywhere. */

/* NIGHT — the lamp lit in the dark. Its own inks, so every box inside reads on it; the flame's amber is
   the one warm colour, and buttons take it (the design's; oxblood on near-black measured 1.9:1). */
.fl-night {
  --night: var(--ln-night);
  --night-2: var(--ln-night-2);
  --text: var(--ln-parchment);
  --text-2: var(--ln-parchment-2);
  --muted: var(--ln-parchment-3);
  --eyebrow-ink: var(--flame);
  --link: var(--flame);
  --border: var(--ln-veil-line);
  --border-strong: var(--ln-veil-strong);
  --surface: var(--ln-night-2);
  --surface-2: var(--ln-night-3);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: var(--text);
  padding-block: 4.5rem 4rem;
}
@media (min-width: 62rem) { .fl-night { padding-block: 6.5rem 6rem; } }
/* The lamp's glow, breathing slowly, behind whatever sits on the right. */
.fl-night::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -10rem;
  top: -6rem;
  width: min(48rem, 110vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--ln-glow), var(--ln-glow-soft) 55%, transparent);
  pointer-events: none;
  animation: fl-breathe 8s cubic-bezier(0.32, 0.72, 0, 1) infinite alternate;
}
@keyframes fl-breathe { from { opacity: 0.75; transform: scale(0.97); } to { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .fl-night::before { animation: none; } }
/* The first band of a page runs up behind the floating menu, so the night starts at the top of the
   window rather than under a pale strip. With the menu flat (Look), it starts under the menu. */
.fl-page > .fl-night:first-child { margin-top: -7rem; padding-top: 10.5rem; }
@media (min-width: 62rem) { .fl-page > .fl-night:first-child { padding-top: 12.5rem; } }
html.look-no-floating-header .fl-page > .fl-night:first-child { margin-top: 0; padding-top: 4.5rem; }
.fl-night .fl-text h1 { font-size: clamp(2.9rem, 1.2rem + 5.4vw, 6.25rem); line-height: 0.95; letter-spacing: -0.015em; font-weight: 500; }
.fl-night .fl-text h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1; font-weight: 500; }
.fl-night .fl-text p.lede { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem); color: var(--text-2); max-width: 32em; }
.fl-night .fl-text p.note { color: var(--muted); }
.fl-night .btn-primary { background: var(--flame); color: var(--ln-ink-on-lamp); }
.fl-night .btn-primary:hover { background: var(--ln-lamp-hi); }
.fl-night .btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.fl-night .btn-secondary:hover { background: var(--ln-veil-hair); }
.fl-night .card { background: var(--surface); border-color: var(--border); }

/* THE PATH — one thin line at the page's left, running from section to section, a stop on each. It sits
   in the gutter the section's content is pushed away from, so it never runs under words. */
.fl-path { position: relative; --path-x: max(1.35rem, calc((100% - 68rem) / 2 + 1.35rem)); }
.fl-path > .wrap { padding-left: 3.25rem; }
@media (min-width: 62rem) { .fl-path > .wrap { padding-left: 4.5rem; } }
.fl-path::before {
  content: '';
  position: absolute;
  left: var(--path-x);
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--border-strong);
}
/* It begins in the lamp's amber and cools to the page's own line. */
.fl-path-start::before { background: linear-gradient(var(--flame), var(--border-strong) 11rem); }
/* A stop: a small ring on the line, level with the section's first line of words. */
.fl-path-stop::after,
.fl-path-lit::after {
  content: '';
  position: absolute;
  left: calc(var(--path-x) - 5px);
  top: calc(4rem + 0.35rem);
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--muted);
}
.fl-path-lit::after {
  background: var(--flame);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--flame) 16%, transparent), 0 0 22px 6px color-mix(in srgb, var(--flame) 38%, transparent);
}
.fl-path.fl-tint::after { background: var(--surface); }
.fl-path.fl-tint.fl-path-lit::after { background: var(--flame); }
.fl-path-start .fl-text h2 { font-size: clamp(2.6rem, 1rem + 5.6vw, 7rem); line-height: 0.92; letter-spacing: -0.015em; font-weight: 500; }
.fl-path-start .fl-text p.lede { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); line-height: 1.35; max-width: 30em; }
.fl-path:is(.fl-path-stop, .fl-path-lit) .fl-text h2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1; font-weight: 500; }
.fl-path:is(.fl-path-stop, .fl-path-lit) .fl-row { align-items: center; }

/* THE PICTURES OF THE APP (X-135, `site/components/Scenes.tsx`). Sized by the box they are given, like
   the board, so a narrow column folds them the way a phone does. The ground of a picture is the page's
   own surface; the orbit is the night, as the design draws it. */
.sc { container: sc / inline-size; font-size: 0.9rem; color: var(--text); }
.sc p { margin: 0; }
.sc-tray { border-radius: 1.75rem; padding: 0.45rem; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
.sc-plate { border-radius: 1.4rem; background: var(--surface); box-shadow: var(--shadow-ambient), inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent); padding: 1.5rem 1.6rem; }
@container sc (max-width: 26rem) { .sc-plate { padding: 1.1rem; } }
.sc .sc-label { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 650; color: var(--text-2); }
.sc-flame-dot { width: 0.5rem; height: 0.5rem; border-radius: 99px; background: var(--flame); box-shadow: 0 0 10px 3px color-mix(in srgb, var(--flame) 45%, transparent); }
.sc .sc-step { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 1rem + 1.6vw, 2.1rem); line-height: 1.05; margin: 0.55rem 0 0.5rem; color: var(--text); }
.sc .sc-detail { font-size: 0.85rem; color: var(--text-2); }
.sc .sc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.sc-chips span { font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 99px; background: var(--surface-2); color: var(--text); }
.sc-chips small { font-weight: 500; color: var(--muted); margin-left: 0.25rem; }
.sc .sc-acts { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.sc-btn { font-size: 0.8rem; font-weight: 650; padding: 0.45rem 0.95rem; border-radius: 99px; background: var(--primary); color: var(--primary-fg); }
.sc-btn-quiet { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.sc .sc-letter { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); margin-bottom: 1rem; }
.sc-letter span { color: var(--muted); }
.sc-then { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: start; gap: 0.6rem; padding: 0.75rem 0; border-top: 1px solid var(--border); font-size: 0.83rem; color: var(--text-2); margin-top: 0.9rem; }
.sc-then + .sc-then { margin-top: 0; }
.sc-then > span { font-size: 0.75rem; font-weight: 650; color: var(--muted); }
.sc-then b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--text); line-height: 1.15; }
.sc-then > .sc-btn { justify-self: end; }
.sc-btn-sm { font-size: 0.72rem; padding: 0.3rem 0.7rem; white-space: nowrap; }
.sc .sc-more { margin-top: 0.6rem; }
.sc .sc-due { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--border); font-size: 0.83rem; color: var(--text-2); }
.sc-cal { width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; box-shadow: inset 0 0 0 1.5px var(--text-2), inset 0 3px 0 0 var(--text-2); flex: none; }
.sc .sc-hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.6rem; }
@container sc (max-width: 26rem) { .sc-then { grid-template-columns: 1fr; gap: 0.2rem; } .sc-then > .sc-btn { justify-self: start; } }

/* The lamp: his lantern, large and glowing, with the next step floating in front of it. */
.sc-lamp { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 0.5rem; }
.sc-lamp .sc-lamp-mark { width: min(20rem, 70%); height: auto; filter: drop-shadow(0 0 60px var(--ln-glow-drop)); }
.fl-night .sc-lamp-mark .lantern-body { fill: var(--ln-parchment); }
.fl-night .sc-lamp-mark .lantern-glass { fill: var(--ln-night-5); }
.sc-float { position: relative; width: min(27rem, 100%); margin-top: -4.5rem; border-radius: 1.9rem; padding: 0.4rem; background: var(--ln-veil); box-shadow: inset 0 0 0 1px var(--ln-veil-2); transform: rotate(-1.5deg); }
.sc-float .sc-plate { --text: var(--ln-paper-ink); --text-2: var(--ln-paper-ink-2); --muted: var(--ln-paper-muted); --surface: var(--ln-paper); --surface-2: var(--ln-paper-2); --border-strong: var(--ln-paper-line); --primary: var(--ln-oxblood); --primary-fg: var(--ln-white); color: var(--ln-paper-ink); box-shadow: 0 40px 80px -30px var(--ln-deep-shadow); }
@media (prefers-reduced-motion: reduce) { .sc-float { transform: none; } }

/* Still on the road. */
.sc .sc-head { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--text); margin-bottom: 0.6rem; }
.sc-head small { white-space: nowrap; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-left: 0.4rem; }
.sc .sc-group { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 0.8rem; }
.sc-group::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 99px; background: var(--c); }
.sc-offer { --c: var(--flame); }
.sc-reading { --c: var(--ln-moss); }
.sc-queried { --c: var(--ln-dusk); }
.sc-wait { display: grid; grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1.45fr); gap: 0.75rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--border); font-size: 0.83rem; }
.sc-wait b { font-weight: 650; }
.sc-wait small { display: block; color: var(--muted); font-size: 0.75rem; }
.sc .sc-day { color: var(--text-2); font-size: 0.78rem; text-align: right; }
.sc-day b { color: var(--text); }
/* A late wait, as the app draws one (PipelineClimbView): the whole caption in the long-wait dusk — never red. */
.sc .sc-is-late .sc-day, .sc-is-late .sc-day b { color: var(--status-out); }
.sc .sc-note { font-size: 0.75rem; color: var(--muted); }
/* The 0–90 day bar, placed on percentages so the dot stays a circle and the square a square at any width. */
.sc-bar { display: block; width: 100%; height: 12px; overflow: visible; }
.sc-bar-track { fill: var(--surface-2); }
.sc-bar-day { fill: var(--text-2); stroke: var(--surface); stroke-width: 1.5; }
.sc-bar-mark { fill: var(--surface); stroke: var(--muted); stroke-width: 1.25; }
.sc-w-reading .sc-bar-day { fill: var(--ln-moss-light); }
.sc-w-queried .sc-bar-day { fill: var(--ln-dusk-light); }
.sc-late .sc-bar-fill, .sc-late .sc-bar-end { fill: var(--status-out); }
.sc-late .sc-bar-mark { fill: var(--surface); stroke: var(--status-out); }
/* The square that marks a late wait when the bars are hidden at narrow widths. */
.sc-late-mark { display: none; background: var(--status-out); }
@container sc (max-width: 30rem) {
  .sc-wait { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .sc-wait > svg, .sc-wait > .sc-note { display: none; }
  .sc-is-late .sc-late-mark { display: inline-block; width: 7px; height: 7px; border-radius: 1px; margin: 0 0.4rem 0.1em 0; vertical-align: middle; background: var(--status-out); }
}

/* The record as a spread. */
.sc-spread { display: grid; grid-template-columns: 1fr 1fr; border-radius: 0.8rem; overflow: hidden; box-shadow: 0 40px 70px -40px var(--ln-spread-shadow), 0 0 0 1px var(--border); font-size: 0.8rem; }
.sc-page { position: relative; background: var(--surface); padding: 1.3rem 1.2rem 2.4rem; min-height: 18rem; }
.sc-left { background: linear-gradient(270deg, var(--ln-page-shade), transparent 1.8rem), var(--surface); }
.sc-right { background: linear-gradient(90deg, var(--ln-page-shade-2), transparent 2rem), var(--surface); }
.sc .sc-rh { font-family: var(--font-display); font-style: italic; font-size: 0.85rem; color: var(--text-2); margin-bottom: 0.8rem; }
.sc-rh span { color: var(--muted); margin-left: 0.3rem; }
.sc .sc-name { font-family: var(--font-display); font-weight: 500; font-size: 2.4rem; line-height: 0.95; }
.sc .sc-sub { color: var(--text-2); margin-top: 0.4rem; }
.sc-stats, .sc-mine { margin: 0.9rem 0 0; display: grid; gap: 0.5rem; }
.sc-stats div, .sc-mine div { border-top: 1px solid var(--border); padding-top: 0.4rem; }
.sc-stats dt, .sc-mine dt { font-size: 0.7rem; color: var(--muted); }
.sc-stats dd { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.1; }
.sc-mine dd { margin: 0; color: var(--text); font-weight: 600; }
.sc .sc-k { font-size: 0.7rem; color: var(--muted); margin-top: 0.8rem; }
.sc .sc-line { position: relative; display: flex; justify-content: space-between; margin-top: 0.4rem; }
.sc-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-strong); }
.sc-line i { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 99px; background: var(--text-2); }
.sc-line i.sc-now { background: var(--flame); }
.sc .sc-note-line { color: var(--text); margin-top: 0.3rem; }
.sc .sc-folio { position: absolute; bottom: 0.8rem; font-family: var(--font-display); font-style: italic; font-size: 0.75rem; color: var(--muted); }
.sc-left .sc-folio { left: 1.2rem; }
.sc-right .sc-folio { right: 1.2rem; }
@container sc (max-width: 30rem) { .sc-spread { grid-template-columns: 1fr; } .sc-page { min-height: 0; } }

/* Company on the road. */
.sc-heard { border-radius: 1rem; background: color-mix(in srgb, var(--flame) 13%, var(--surface)); padding: 0.9rem 1rem; }
.sc-heard > p { font-weight: 650; color: var(--text); }
.sc-heard ul { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.sc-heard li { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.83rem; color: var(--text-2); padding: 0.45rem 0.7rem; border-radius: 0.7rem; background: var(--surface); margin-top: 0.35rem; }
.sc-heard li span { color: var(--muted); white-space: nowrap; }
.sc .sc-open { font-size: 0.83rem; color: var(--text-2); margin-top: 0.3rem; }
.sc-open b { color: var(--text); }

/* The orbit — "Around the book" as the app's Charts card draws it (X-162): its title and pickers above, the
   chart in a tray, the paths in the app's chart tokens (mirrored at the top of this file), light or dark with
   the reader. Every colour is named in "Where they are"; nothing is told by colour alone. */
.sc .sc-orr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.7rem; }
.sc .sc-orr-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; line-height: 1.1; color: var(--text); }
.sc-orr-title small { font-family: var(--font-sans); font-size: 0.8rem; color: var(--muted); margin-left: 0.4rem; }
.sc .sc-orr-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.sc-orr-book { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-size: 0.8rem; color: var(--text); }
.sc-seg { display: inline-flex; gap: 0.1rem; padding: 0.15rem; border-radius: 99px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-sans); font-size: 0.72rem; }
.sc-seg > span { padding: 0.2rem 0.65rem; border-radius: 99px; color: var(--text-2); white-space: nowrap; }
.sc-seg > span.on { background: var(--primary); color: var(--primary-fg); font-weight: 600; }
.sc-short { display: none; }
.sc-orr-plate { padding: 1.1rem 1.2rem 1.2rem; }
.sc .sc-orr-style { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.sc-tick-box { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--text); }
.sc-tick-box i { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 0.25rem; background: var(--primary); color: var(--primary-fg); }
.sc-dial { display: block; width: 100%; max-width: 27rem; height: auto; margin: 0.4rem auto 0; overflow: visible; }
.sc-dial text { font-family: var(--font-sans); font-size: 11px; fill: var(--muted); }
.sc-rings circle { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.sc-rim-tick { stroke: var(--border-strong); }
.sc-dial .sc-ring-name { font-size: 12px; font-weight: 500; }
.sc-dial .sc-day-mark { font-size: 12px; }
.sc-glow-in { stop-color: var(--flame); stop-opacity: 0.28; }
.sc-glow-out { stop-color: var(--flame); stop-opacity: 0; }
.sc-sun { fill: var(--flame); }
.sc-dial .sc-sun-name { font-size: 13px; font-weight: 600; fill: var(--text); }
.sc-dial .sc-sun-note { font-size: 12px; fill: var(--muted); }
.sc-path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke: var(--chart-out); }
.sc-p-reading { stroke: var(--chart-reading); }
.sc-p-offer { stroke: var(--chart-offer); }
.sc-p-past { stroke: var(--status-out); stroke-dasharray: 4 3.2; }
.sc-usual { stroke: var(--text-2); stroke-width: 1.4; }
.sc-body circle { fill: var(--c, var(--chart-out)); stroke: var(--surface); stroke-width: 1.5; }
.sc-b-offer { --c: var(--chart-offer); }
.sc-b-reading { --c: var(--chart-reading); }
.sc-b-queried { --c: var(--chart-out); }
.sc-b-past { --c: var(--status-out); }
.sc-dial .sc-body-name { font-size: 12.5px; font-weight: 600; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.sc-closed .sc-path { stroke: var(--muted); opacity: 0.22; }
.sc-closed polygon { fill: var(--muted); }
.sc .sc-orr-hint { margin-top: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 0.8rem; box-shadow: inset 0 0 0 1px var(--border); font-size: 0.75rem; color: var(--text-2); }
.sc .sc-replay { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem; font-size: 0.75rem; color: var(--text-2); }
.sc-rbtn { padding: 0.3rem 0.85rem; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--primary); color: var(--text); font-weight: 600; }
.sc .sc-scrub { margin-top: 0.5rem; }
.sc-track { position: relative; flex: 1; height: 4px; border-radius: 9px; background: var(--primary); }
.sc-track b { position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 99px; background: var(--primary); }
.sc-orr-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 1.4rem; align-items: start; }
.sc-where { margin-top: 0.4rem; }
.sc .sc-where-head { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--text); }
.sc-where ul { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; }
.sc-where li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; color: var(--text); }
.sc-where li span { display: inline-flex; align-items: center; gap: 0.5rem; }
.sc-where li b { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sc-key { width: 0.5rem; height: 0.5rem; border-radius: 99px; background: var(--muted); }
.sc-key-offer { background: var(--chart-offer); }
.sc-key-reading { background: var(--chart-reading); }
.sc-key-queried { background: var(--chart-out); }
.sc-key-past { width: 0.8rem; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--status-out); }
@container sc (max-width: 30rem) {
  .sc-long { display: none; }
  .sc-short { display: inline; }
  .sc-orr-foot { grid-template-columns: 1fr; gap: 0.6rem; }
  .sc-where { margin-top: 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
  .sc-orr-plate { padding: 0.9rem; }
}
/* On a phone the dial is half as wide, so its words are drawn larger to read at the app's caption size. */
@container sc (max-width: 26rem) {
  .sc-dial .sc-ring-name, .sc-dial .sc-day-mark { font-size: 16px; }
  .sc-dial .sc-body-name { font-size: 16.5px; }
  .sc-dial .sc-sun-name { font-size: 17px; }
  .sc-dial .sc-sun-note { font-size: 15px; }
  .sc-orr-plate { padding: 0.8rem 0.7rem; }
}
@container sc (max-width: 26rem) { .sc-replay .sc-seg { display: none; } }

/* Your other work. */
.sc-work { list-style: none; margin: 0; padding: 0; }
.sc-work li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.8rem; padding: 0.65rem 0; border-top: 1px solid var(--border); }
.sc-work li:first-child { border-top: 0; }
.sc-work b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text); }
.sc-work small { grid-column: 1 / -1; color: var(--text-2); font-size: 0.8rem; }
.sc-tag { align-self: center; font-size: 0.78rem; color: var(--text-2); }

/* ─── X-180: What it does — each section heading slides beside its prose ───
   docs/design/round-2026-10-03-sliding-labels/what-it-does.html, approved by the owner 2026-10-03 ("fuck yes on
   all of them"). The behaviour he admired on azuolas.com, and the same one the app's Pipeline, Release notes and
   Discover use: the heading is `position: sticky` INSIDE its own section's box, so it stays beside its prose while
   the prose scrolls past and leaves with the last paragraph; it can never overlap the next one.
   ⚠ NO SCRIPT. The site's rule is that the only JavaScript is the theme toggle, the analytics tag and admin.js
   (site/README.md), so everything here is CSS:
    · the home page's rail runs down the label column, a hairline with a hollow stop at each heading;
    · the lamp lights in the stop of the heading that is pinned now, by a scroll-state container query. A browser
      without one shows the hollow stop and pins exactly the same; only the light is missing.
   Grid placement by `:has()` rather than new markup, because these are his blocks: a text block that opens with
   a heading becomes heading-beside-prose, whatever he writes in it. The editor's own canvas (a ProseMirror
   inside the block) does not match `> h2:first-child`, so arranging is untouched. */
.fl-slide .fl-text:has(> h2:first-child) > h2:first-child { position: sticky; align-self: start; z-index: 2; }
@media (min-width: 48rem) {
  .fl-slide .fl-reading { max-width: 60rem; }
  .fl-slide .fl-text:has(> h2:first-child) {
    position: relative;
    display: grid;
    grid-template-columns: 16.25rem minmax(0, var(--measure));
    column-gap: 3.5rem;
    padding-bottom: 3.25rem;
  }
  .fl-slide .fl-text:has(> h2:first-child)::before {
    content: '';
    position: absolute;
    /* Down through the gap to the next section, so the rail is one line. */
    top: 0;
    bottom: calc(-1 * var(--fl-gap, 1.25rem));
    left: 0;
    width: 1px;
    background: var(--border);
  }
  .fl-slide .fl-text:has(> h2:first-child) > h2:first-child {
    grid-column: 1;
    grid-row: 1 / span 40;
    top: 6.5rem;
    margin: 0;
    padding: 0.375rem 0 1.25rem 1.5rem;
    font-size: 2rem;
    line-height: 1.12;
    letter-spacing: -0.01em;
    container-type: scroll-state;
  }
  .fl-slide .fl-text:has(> h2:first-child) > :not(h2:first-child) { grid-column: 2; }
  /* The rail's stop, and the lamp that lights in it. */
  .fl-slide .fl-text:has(> h2:first-child) > h2:first-child::before,
  .fl-slide .fl-text:has(> h2:first-child) > h2:first-child::after {
    content: '';
    position: absolute;
    left: -0.22rem;
    top: 1.1rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
  }
  .fl-slide .fl-text:has(> h2:first-child) > h2:first-child::before { background: var(--bg); box-shadow: inset 0 0 0 1px var(--muted); }
  .fl-slide .fl-text:has(> h2:first-child) > h2:first-child::after {
    background: var(--flame);
    box-shadow: 0 0 0 3px var(--bg), 0 0 12px 2px color-mix(in srgb, var(--flame) 45%, transparent);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1), transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @container scroll-state(stuck: top) {
    .fl-slide .fl-text:has(> h2:first-child) > h2:first-child::after { opacity: 1; transform: scale(1); }
  }
  /* What follows the last section (the buttons and the line under them) sits in the prose column. */
  .fl-slide .fl-text:has(> h2:first-child) ~ .fl-block:not(:has(> h2:first-child)) { margin-left: calc(16.25rem + 3.5rem); }
}
/* On a phone the heading is a band across the top of its prose, pinned at the menu's edge; the next section's band
   pushes it away. While it is pinned its ground reaches up behind the menu, so no prose shows between them. */
@media (max-width: 47.99rem) {
  .fl-slide .fl-text:has(> h2:first-child) { padding-bottom: 1.5rem; }
  .fl-slide .fl-text:has(> h2:first-child) > h2:first-child {
    top: 4.5rem;
    margin: 0 0 0.85rem;
    padding: 0.75rem 0 0.7rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    container-type: scroll-state;
  }
  @container scroll-state(stuck: top) {
    .fl-slide .fl-text:has(> h2:first-child) > h2:first-child::before {
      content: '';
      position: absolute;
      inset-inline: -1rem;
      bottom: 100%;
      height: 5rem;
      background: var(--bg);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-slide .fl-text:has(> h2:first-child) > h2:first-child::after { transition: none; }
}