/* ==========================================================================
   Polyment public site — the illuminated folio.

   One parchment sheet laid on the workshop's navy desk. Ink for reading,
   verdigris for every action, gold only for what has been earned. The tokens
   are the app's own (POLYMENT_DESCRIPTION.md Part 8), so the site a first
   learner reads and the product they log into are one material.

   Selectors the scripts depend on and that must keep their names:
   js/site.js: .site-header .menu-toggle, .nav-links, .nav-actions, [data-nav],
   .faq-item / .faq-question / .faq-answer / .open;
   js/waitlist.js: form[data-waitlist-form], .form-message, .turnstile-slot
   (and the .is-interactive it adds), [data-honeypot]; js/success.js:
   [data-confirm-state] and its children.

   The gold rule (24 Sep 2026; css/gold-rule.css until 3 Oct, now folded in here at each
   source rule): gold marks three things only, the hero's gilded node, the margin miniature and
   sparing manuscript ornament (the illuminated initial, the rubric fleurons). Everything that
   labels, links, numbers, borders or focuses is navy, slate, the neutral pill or verdigris.
   ========================================================================== */

/* ---------- metric-matched fallback faces (S5, 3 Oct) -----------------------
   Until the Google fonts arrive (display=swap), text is set in a local face resized to
   Fraunces' or Hanken Grotesk's measure, so the swap changes the letters, not the lines.
   size-adjust: the width ratio web/local, measured in Chrome on the site's own copy (every
   Fraunces/Hanken text element on 7 pages at 390 and 1440, set in its own size, weight, tracking
   and optical size, weighted by width; S5 fontratio2.cjs).
   ascent/descent/line-gap: the web font's own (Fraunces 1956/-510/0 per 2000 em,
   Hanken 1000/-303/0 per 1000 em, hhea = typo, USE_TYPO_METRICS) over size-adjust.
   Fraunces is narrow at its display optical size and wide at its text size (opsz 144 sets
   about 20% narrower than opsz 18), so it gets two fallback families: the text one for
   --font-serif and the display one for --font-display (every rule that sets "opsz" 96 or 144).
   Each fallback is a separate family per local face (Georgia: Windows, macOS, iOS; Times New
   Roman; Noto Serif / Roboto: Android), because size-adjust differs per face. The italic
   ratios assume Fraunces Italic sets as wide as the roman (no italic file to measure). */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); font-weight: 100 500; size-adjust: 106%; ascent-override: 92.3%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 900; size-adjust: 93%; ascent-override: 105.2%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; font-weight: 100 900; size-adjust: 102.5%; ascent-override: 95.4%; descent-override: 24.9%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); font-weight: 100 500; size-adjust: 116.9%; ascent-override: 83.7%; descent-override: 21.8%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback Times"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"); font-weight: 600 900; size-adjust: 111.5%; ascent-override: 87.7%; descent-override: 22.9%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback Times"; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); font-style: italic; font-weight: 100 900; size-adjust: 114.2%; ascent-override: 85.6%; descent-override: 22.3%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback Noto"; src: local("Noto Serif"), local("NotoSerif"), local("NotoSerif-Regular"); font-weight: 100 500; size-adjust: 98.5%; ascent-override: 99.3%; descent-override: 25.9%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback Noto"; src: local("Noto Serif Bold"), local("NotoSerif-Bold"); font-weight: 600 900; size-adjust: 94.5%; ascent-override: 103.5%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback Noto"; src: local("Noto Serif Italic"), local("NotoSerif-Italic"); font-style: italic; font-weight: 100 900; size-adjust: 99.3%; ascent-override: 98.5%; descent-override: 25.7%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Display Fallback"; src: local("Georgia"); font-weight: 100 500; size-adjust: 85.6%; ascent-override: 114.3%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Display Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 900; size-adjust: 75.4%; ascent-override: 129.7%; descent-override: 33.8%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Display Fallback Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); font-weight: 100 500; size-adjust: 93.8%; ascent-override: 104.3%; descent-override: 27.2%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Display Fallback Times"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"); font-weight: 600 900; size-adjust: 90.6%; ascent-override: 107.9%; descent-override: 28.1%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Display Fallback Noto"; src: local("Noto Serif"), local("NotoSerif"), local("NotoSerif-Regular"); font-weight: 100 500; size-adjust: 79.2%; ascent-override: 123.5%; descent-override: 32.2%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Display Fallback Noto"; src: local("Noto Serif Bold"), local("NotoSerif-Bold"); font-weight: 600 900; size-adjust: 76.4%; ascent-override: 128%; descent-override: 33.4%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 500; size-adjust: 100.6%; ascent-override: 99.4%; descent-override: 30.1%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); font-weight: 600 900; size-adjust: 94.3%; ascent-override: 106%; descent-override: 32.1%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 500; size-adjust: 101%; ascent-override: 99%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 900; size-adjust: 100.4%; ascent-override: 99.6%; descent-override: 30.2%; line-gap-override: 0%; }

:root {
  --navy: #081D3A;
  --navy-soft: #0E2748;
  --navy-line: #1C3559;
  --ink: #20241F;
  --slate: #4A4E47;
  --muted: #7C7A6E;
  --muted-light: #A39E8C;
  --cream: #F4ECDA;
  --cream-surface: #FFF9EF;
  --cream-2: #F8F0E1;
  --white: #FFFFFF;
  --peach: #FBEFDA;
  --peach-deep: #F4E2C2;
  --line: #E3D6BC;
  --line-soft: #EDE2CC;
  --line-control: var(--muted); /* a control's resting edge: 3.4:1 or more on every ground a form sits on (WCAG 1.4.11) */
  --verdigris: #2F7D6B;
  --verdigris-deep: #245F52;
  --verdigris-wash: #DCEAE4;
  --verdigris-ink: #1E5246;
  --gold: #B5832B;
  --gold-deep: #8F671F;
  --gold-light: #E8C566;
  --gold-wash: #F4E8C8;
  --gold-text: #7A5719;        /* gold for small text: 5.2:1 on parchment */
  --gold-rubric: #83601C;      /* gold for rubrics: 4.9:1 on parchment */
  --orange-text: #9A5208;      /* the streak's word: 5.1:1 on peach */
  --orange: #F09A22;
  --orange-dark: #D7760C;
  --terracotta: #B5563F;
  --terracotta-deep: #8F4231;
  --terracotta-wash: #F3E0D6;
  --graphite: #9A9484;
  --graphite-soft: #C3BCA9;
  --on-navy: #F4ECDA;
  --on-navy-soft: #C7D2E0;

  --font-serif: "Fraunces", "Fraunces Fallback", "Fraunces Fallback Times", "Fraunces Fallback Noto", Georgia, "Times New Roman", serif;
  --font-display: "Fraunces", "Fraunces Display Fallback", "Fraunces Display Fallback Times", "Fraunces Display Fallback Noto", Georgia, "Times New Roman", serif;   /* with "opsz" 96 or 144 */
  --font-sans: "Hanken Grotesk", "Hanken Fallback", "Hanken Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;

  --shadow-card: 0 14px 32px -12px rgba(8, 29, 58, .18);
  --shadow-soft: 0 8px 20px -10px rgba(8, 29, 58, .14);
  --shadow-pop: 0 28px 70px -24px rgba(0, 0, 0, .55);
  --shadow-gold: 0 10px 22px -10px rgba(143, 103, 31, .55);
  --shadow-verdigris: 0 10px 24px -10px rgba(47, 125, 107, .6);

  --sheet-max: 1240px;
  --rail-w: 344px;
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --measure: 66ch;

  /* The type scale (THEME-04), in rem, so the reader's default font size carries through (WCAG 1.4.4).
     The fluid roles are clamp(floor, rem + vw, cap), fitted to within half a pixel of the old px clamps
     at 390, 800 and 1440, so the boards render as before. SVG drawing labels stay in px: they are the
     drawing's own units and scale with it. */
  --fs-body: 1.09375rem;                                          /* 17.5px: running text */
  --fs-body-lead: clamp(1.09375rem, 1.075rem + .1vw, 1.1875rem);  /* 17.5 → 19: reading paragraphs a touch up */
  --fs-lead: clamp(1.125rem, .8875rem + .44vw, 1.3125rem);        /* 18 → 21: leads and the onward lines */
  --fs-title: clamp(1.3125rem, 1.05rem + .54vw, 1.5625rem);       /* 21 → 25: h3 */
  --fs-section: clamp(1.625rem, .7rem + 1.63vw, 2.125rem);        /* 26 → 34: a quiet section's h2 */
  --fs-subhead: clamp(1.625rem, .3375rem + 2.37vw, 2.5rem);       /* 26 → 40: a moment's h3, a clear step under its h2 */
  --fs-headline: clamp(1.875rem, .5625rem + 2.55vw, 2.625rem);    /* 30 → 42: h2 */
  --fs-moment: clamp(2rem, .2rem + 3.66vw, 3.375rem);             /* 32 → 54: a moment's h2 */
  --fs-poster: clamp(2.25rem, .1rem + 4.86vw, 4.5rem);            /* 36 → 72: the problem poster's headline */
  --fs-display: clamp(2.5rem, .2rem + 4.86vw, 4.5rem);            /* 40 → 72: the hero question, a page's title */
}

/* ---------- base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* The sticky header's room, kept on the scroller rather than on [id] targets, so it
   covers every scroll the browser makes for us: anchor jumps, and keyboard focus
   moving to a control that has no id (WCAG 2.4.11). A scroll-margin on the targets
   as well would offset anchors twice. 24px, not less: while scrolling smoothly,
   Chrome brings a focused text field in by its text line, not its box, which leaves
   the field's top 16px higher than the padding. home-v2.css adds the phone sticky
   bar's room at the bottom (html.has-stickybar). */
html { scroll-padding-block-start: calc(var(--header-h) + 24px); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy) radial-gradient(1100px 520px at 50% -140px, #123763 0%, var(--navy) 62%) no-repeat;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
/* <picture> only chooses the file (WebP, with the PNG/JPEG as fallback). As a block
   wrapped tight around its block <img> it sits in every grid, flex row and frame
   exactly where the bare <img> did; its <source> is an empty inline and takes no room. */
picture { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; color: var(--navy); }
em { font-style: italic; }
hr { border: 0; }
/* The scripts hide things with the hidden attribute (js/success.js the retry
   link, js/waitlist.js each message's parts); author display rules must never
   outrank it. */
[hidden] { display: none !important; }

/* The browser's own surfaces, themed from the palette. */
::selection { background: var(--verdigris-wash); color: var(--navy); }
* { caret-color: var(--verdigris); scrollbar-color: var(--graphite) var(--navy-soft); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--navy-soft); }
::-webkit-scrollbar-thumb { background: var(--navy-line); border-radius: 8px; border: 2px solid var(--navy-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--graphite); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--on-navy); outline-offset: 3px; border-radius: 4px; }   /* on the desk */
.sheet :focus-visible { outline-color: var(--verdigris); }
.invite :focus-visible { outline-color: var(--on-navy); }                                      /* on the navy band */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--navy); color: var(--cream);
  border-radius: var(--r-sm); font-weight: 700; transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------- type ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
  letter-spacing: -.015em;
}
h1 { font-family: var(--font-display); font-size: clamp(2.5rem, .2375rem + 4.78vw, 4.125rem); line-height: 1.04; font-variation-settings: "opsz" 144; }
h2 { font-size: var(--fs-headline); line-height: 1.1; font-weight: 600; color: var(--navy); }
h3 { font-size: var(--fs-title); line-height: 1.25; font-weight: 600; }
h4 { font-size: 1.125rem; line-height: 1.3; font-weight: 700; font-family: var(--font-sans); letter-spacing: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--slate); }
.mono { font-family: var(--font-mono); font-size: .78125rem; letter-spacing: .06em; color: var(--slate); }
.prose p + p { margin-top: 1em; }
.prose a {
  color: var(--verdigris-ink);
  text-decoration: underline;
  text-decoration-color: rgba(47, 125, 107, .45);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  transition: text-decoration-color .2s;
}
.prose a:hover { text-decoration-color: var(--verdigris); }

/* ---------- running header ------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 236, 218, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header::after {
  content: ""; display: block; height: 1px; background: var(--line-soft); margin: 0 var(--gutter);
  transform: translateY(2px);
}
.navbar {
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.5625rem; letter-spacing: -.02em;
  color: var(--navy); white-space: nowrap;
}
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--navy);
  display: inline-grid; place-items: center; position: relative; flex: none;
}
.logo-mark span { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--cream); line-height: 1; transform: translate(-1px, 1px); }
.logo-mark::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light); top: 5px; inset-inline-end: 5px; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: .9375rem; font-weight: 600; color: var(--slate); }
.nav-links a {
  padding: 6px 0; position: relative;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px;
  transition: color .2s, text-decoration-color .2s;
}
.nav-links a:hover { color: var(--navy); text-decoration-color: var(--verdigris); }
.nav-links a.active { color: var(--navy); text-decoration-color: var(--verdigris); }
.nav-drawer { display: contents; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle {
  display: none; width: 46px; height: 46px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--cream-surface); color: var(--navy); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .ico-close { display: none; }
body.menu-open .menu-toggle .ico-menu { display: none; }
body.menu-open .menu-toggle .ico-close { display: block; }

/* ---------- buttons ------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-sans); font-weight: 700; font-size: .96875rem; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--verdigris); color: #fff; box-shadow: var(--shadow-verdigris); }
.btn-primary:hover { background: var(--verdigris-deep); }
.btn-secondary { background: var(--cream-surface); color: var(--navy); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--graphite-soft); background: #fff; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 1.03125rem; }
.on-navy .btn-secondary { background: transparent; color: var(--on-navy); border-color: rgba(244, 236, 218, .35); box-shadow: none; }
.on-navy .btn-secondary:hover { background: rgba(244, 236, 218, .08); border-color: rgba(244, 236, 218, .6); }
/* A dead button looks dead: no lift, no glow (js/waitlist.js disables the
   submit while a sign-up is sending; .is-busy in home-v2.css keeps that one
   looking at work). */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(35%); }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; }

/* ---------- the sheet ----------------------------------------------------- */

.sheet {
  position: relative;
  max-width: var(--sheet-max);
  margin: 0 auto;
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  isolation: isolate;
}
/* paper grain, drawn by the browser: no raster, no request */
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .33 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.folio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  column-gap: clamp(36px, 4.5vw, 64px);
  padding: 0 var(--gutter);
}
.text { min-width: 0; padding-bottom: 8px; position: relative; }
/* the scribe's bounding lines: one on each side of the text block */
.text::before { content: ""; position: absolute; top: 40px; bottom: 40px; inset-inline-start: calc(-1 * clamp(10px, 1.6vw, 22px)); width: 1px; background: linear-gradient(var(--line) 0 70%, transparent); }
/* the bounding line a scribe rules before lettering */
.rail-col { position: relative; }
.rail-col::before {
  content: ""; position: absolute; top: 40px; bottom: 40px; inset-inline-start: calc(-1 * clamp(18px, 2.25vw, 32px));
  width: 1px; background: linear-gradient(var(--line) 0 70%, transparent);
}
.rail { position: sticky; top: calc(var(--header-h) + 22px); padding: 34px 0 40px; }
.folio-mark {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--slate);
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 18px;
}
.folio-mark b { color: var(--slate); font-weight: 600; }

/* ---------- passages ------------------------------------------------------ */

.passage { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3.5vw, 44px); position: relative; }
.passage + .passage { border-top: 1px solid var(--line); }
.passage.incipit { padding-top: clamp(44px, 6vw, 84px); border-top: 0; }
.passage > h2 { margin-bottom: 18px; max-width: 14.795em; }   /* = 22ch of Fraunces 600 at 22px; em, not ch, so the fallback face keeps the measure (S5) */
.passage .prose { max-width: var(--measure); }
.passage .prose p { color: var(--ink); }

/* rubric: heading with a gold pilcrow drawn beside it */
.rubric { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.rubric svg { width: 22px; height: 22px; flex: none; color: var(--gold); margin-top: .35em; }
.rubric h2 { margin: 0; }

/* the illuminated initial: a lettered ground, not a gradient headline */
.initial {
  float: left; float: inline-start; margin: .12em 0 6px; margin-inline-end: 18px;
  width: 92px; height: 92px; border-radius: 12px;
  background: radial-gradient(circle at 38% 30%, var(--gold-light), var(--gold) 78%);
  border: 1.5px solid var(--gold-deep);
  box-shadow: inset 0 -6px 12px rgba(143, 103, 31, .45), 0 4px 10px -6px rgba(143, 103, 31, .6);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 62px; line-height: 1; color: var(--navy);
  font-variation-settings: "opsz" 144;
  text-shadow: 0 1px 0 rgba(255, 246, 222, .55);
}
.initial::after {
  content: ""; position: absolute; width: 92px; height: 92px; border-radius: 12px;
  box-shadow: inset 0 0 0 4px rgba(255, 246, 222, .35); pointer-events: none;
}
.initial-wrap { position: relative; }

/* catchword: the first words of the next passage, sitting at the foot */
.catchword {
  clear: both; display: flex; justify-content: flex-end;
  font-family: var(--font-serif); font-style: italic; font-size: .96875rem; color: var(--slate);
  margin-top: 28px;
}
/* The catchword is a link, so it takes the acting colour; no appended arrow (the gold rule) */
.catchword a {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; margin: -10px 0; color: var(--verdigris-ink);
  text-decoration: underline; text-decoration-color: rgba(47, 125, 107, .45); text-decoration-thickness: 1.5px; text-underline-offset: .2em;
}
.catchword a:hover { text-decoration-color: var(--verdigris); }
.catchword a svg { display: none; }

/* the marginal gloss: Leo's hand in the margin */
.gloss {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start;
  padding: 18px 0 0; margin-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--font-serif); font-style: italic; font-size: 1.03125rem; line-height: 1.5; color: var(--slate);
}
.gloss img { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--cream-surface); object-fit: cover; }
.gloss p { color: var(--slate); }
.gloss b { display: block; font-style: normal; font-family: var(--font-sans); font-weight: 700; font-size: .78125rem; letter-spacing: .04em; color: var(--slate); margin-bottom: 4px; }
.rail .gloss { background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--line-soft) 27px 28px); background-position: 0 14px; }
.rail .gloss p { transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
/* At rail widths the in-flow gloss is hidden visually, never removed: the rail copy is
   aria-hidden (it swaps on scroll), so this one is what screen readers get. */
.text .gloss { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: 0; border: 0; }
.text .codex-fig { display: none; }

/* ---------- the Codex miniature ------------------------------------------- */

.codex-fig { width: 100%; max-width: 344px; margin: 0 auto; }
.codex-fig svg { width: 100%; height: auto; overflow: visible; }
.codex-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin-top: 10px; font-family: var(--font-sans); font-size: .78125rem; letter-spacing: .02em; font-weight: 600; color: var(--slate);
}
.codex-legend span { display: inline-flex; align-items: center; gap: 6px; }
.codex-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.codex-legend .lk { border: 1.5px dashed var(--graphite); background: var(--cream-surface); }
.codex-legend .ik { border: 1.5px solid var(--verdigris); background: var(--verdigris-wash); }
.codex-legend .gd { border: 1.5px solid var(--gold-deep); background: radial-gradient(circle at 40% 30%, var(--gold-light), var(--gold) 80%); }

.cx .edge { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; transition: stroke .6s; }
.cx .edge.is-ink { stroke: var(--verdigris); stroke-dasharray: 1; stroke-dashoffset: 0; }
.cx .edge.is-gold { stroke: var(--gold); }
.cx .node { transition: opacity .5s; }
.cx .node text { font-family: var(--font-sans); font-size: 10.6px; font-weight: 700; fill: var(--navy); text-anchor: middle; }
.cx .node .glyph { font-family: var(--font-serif); font-weight: 600; font-size: 19px; fill: var(--slate); text-anchor: middle; dominant-baseline: central; }
.cx .ring { fill: var(--cream-surface); stroke: var(--graphite); stroke-width: 2; transition: stroke .6s, fill .6s, stroke-dasharray .6s; }
.cx .halo { fill: none; stroke: var(--gold-wash); stroke-width: 5; opacity: 0; transition: opacity .6s; }
.cx .wash { fill: var(--verdigris-wash); transform: translateY(100%); transition: transform 1.1s var(--ease-out); }
.cx .flourish { fill: var(--gold); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.15); transition: opacity .35s, transform .55s var(--ease-out); filter: drop-shadow(0 1px 1px rgba(143, 103, 31, .4)); }
.cx .node.is-locked { opacity: .82; }
.cx .node.is-locked .ring { stroke: var(--graphite-soft); stroke-width: 1.5; stroke-dasharray: 3 4; }
.cx .node.is-locked .glyph { fill: var(--graphite-soft); }
.cx .node.is-locked text.title { fill: var(--slate); }
.cx .node.is-available .ring { stroke: var(--graphite); }
.cx .node.is-ink .ring { stroke: var(--verdigris); stroke-width: 2.5; }
.cx .node.is-ink .glyph { fill: var(--verdigris-ink); }
.cx .node.is-ink .wash { transform: translateY(var(--ink, 55%)); }
.cx .node.is-gold .ring { stroke: var(--gold); stroke-width: 2.5; fill: url(#goldleaf); }
.cx .node.is-gold .glyph { fill: #FFF8E6; }
.cx .node.is-gold .halo { opacity: 1; }
.cx .node.is-gold .flourish { opacity: 1; transform: scale(.7); }
.cx .node.is-gold .wash { opacity: 0; }
.cx .node.is-core .ring { fill: url(#coreink); stroke: var(--gold); stroke-width: 2.5; }
.cx .node.is-core .glyph { fill: var(--gold-light); font-size: 26px; }
.cx .node.is-core .halo { opacity: 1; stroke: rgba(181, 131, 43, .22); stroke-width: 6; }
.cx .node.is-core text.title { font-size: 11.5px; }

/* ---------- pills ---------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: .78125rem; letter-spacing: .02em; font-weight: 600; white-space: nowrap;
  background: var(--cream-2); border: 1px solid var(--line); color: var(--slate);
}
.pill.verd { background: var(--verdigris-wash); border-color: var(--verdigris); color: var(--verdigris-ink); }
/* Status label for something built but not yet on for learners (deck: "In testing").
   A raised white pill with navy text; never gold (nothing is earned) and never orange. */
.pill.testing { background: var(--white); border-color: var(--line); color: var(--navy); }
.pill svg { width: 13px; height: 13px; }

/* ---------- the register (waitlist) --------------------------------------- */

.register {
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: clamp(24px, 3.4vw, 40px);
  background: linear-gradient(180deg, var(--peach), var(--cream-2));
  border: 1px solid var(--peach-deep);
  border-radius: var(--r-2xl);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 40px; align-items: start;
}
.register h2 { color: var(--navy); }
.register .lead { margin-top: 12px; }

/* js/waitlist.js rewrites .form-message's class list when it writes a message, which
   drops .full; the row placement must not depend on that class surviving. */
.input, select.input, textarea.input {
  width: 100%; min-height: 52px; padding: 0 16px; font-size: 1rem; color: var(--ink);
  background: var(--cream-surface); border: 1px solid var(--line-control); border-radius: var(--r-md);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input::placeholder { color: var(--slate); opacity: 1; }
.input:hover { border-color: var(--slate); }
.input:focus { border-color: var(--verdigris); box-shadow: 0 0 0 4px var(--verdigris-wash); background: #fff; }
.input:focus-visible { outline-offset: 1px; }
select.input {
  appearance: none; -webkit-appearance: none; padding-inline-end: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4E47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
}
textarea.input { min-height: 108px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
/* Turnstile's slot takes room only while Cloudflare shows its check
   (js/waitlist.js sets .is-interactive from before-interactive-callback): the
   invisible widget it holds the rest of the time never opens a gap in the form. */
.turnstile-slot { margin-top: 2px; }
.turnstile-slot.is-interactive { min-height: 65px; margin-top: 12px; }
.form-message { min-height: 22px; font-size: .875rem; font-weight: 600; color: var(--slate); }

/* ---------- the invite band (pages without the register) ------------------ */

.invite {
  margin: clamp(30px, 4vw, 52px) 0 0; padding: clamp(24px, 3.4vw, 40px);
  background: radial-gradient(900px 300px at 20% 0%, #173B66, var(--navy) 70%);
  color: var(--on-navy); border-radius: var(--r-2xl);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 36px; align-items: center;
}
.invite h2, .faq-groups .invite h2 { color: var(--on-navy); font-size: clamp(1.625rem, .575rem + 2.11vw, 2.25rem); }
.invite p { color: var(--on-navy-soft); margin-top: 10px; max-width: 52ch; }
.invite .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.invite .btn-primary { box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6); }
@media (max-width: 760px) { .invite { grid-template-columns: 1fr; } .invite .actions .btn { width: 100%; } }

/* ---------- FAQ ----------------------------------------------------------- */

.faq-list { display: grid; gap: 10px; max-width: 800px; }
.faq-item { background: var(--cream-surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .2s; }
.faq-item.open { border-color: var(--graphite-soft); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 18px 20px; border: 0; background: transparent; color: var(--navy); text-align: start; cursor: pointer;
  font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.3;
}
.faq-question .plus { width: 26px; height: 26px; flex: none; color: var(--navy); transition: transform .25s var(--ease-out); }
.faq-question .plus svg { width: 26px; height: 26px; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-question:focus-visible { outline-offset: -4px; }
.faq-answer { display: none; padding: 0 20px 20px; color: var(--ink); font-size: 1.03125rem; line-height: 1.6; max-width: 70ch; }
.faq-answer p + p { margin-top: .7em; }
.faq-answer a { color: var(--verdigris-ink); text-decoration: underline; text-underline-offset: .15em; }
.faq-item.open .faq-answer { display: block; }
.faq-groups h2 { margin: 34px 0 14px; color: var(--navy); font-size: 1.375rem; }
.faq-groups h2:first-child { margin-top: 0; }

/* ---------- small folios: success and 404 --------------------------------- */

.small-folio { text-align: center; padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(56px, 8vw, 96px); max-width: 720px; margin: 0 auto; }
.small-folio img { width: 150px; height: 150px; margin: 0 auto 8px; object-fit: contain; }
.small-folio h1 { font-size: clamp(2.125rem, .325rem + 4.01vw, 3.25rem); margin: 10px 0 16px; }
.small-folio .lead { max-width: 52ch; margin: 0 auto; }
.small-folio .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* ---------- colophon (footer) --------------------------------------------- */

.site-footer { color: var(--on-navy-soft); padding: 44px var(--gutter) 40px; max-width: var(--sheet-max); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.site-footer .logo { color: var(--on-navy); }
.site-footer .logo-mark { background: var(--cream); }
.site-footer .logo-mark span { color: var(--navy); }
.site-footer p { color: var(--on-navy-soft); font-size: .90625rem; margin-top: 14px; max-width: 34ch; }
.footer-links { display: grid; gap: 0; font-size: .9375rem; align-content: start; }
.footer-links strong { color: var(--on-navy); margin-bottom: 4px; font-weight: 700; }
.footer-links a { padding: 10px 0; color: var(--on-navy-soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: color .2s, text-decoration-color .2s; }
.footer-links a:hover { color: var(--on-navy); text-decoration-color: var(--on-navy); }
.footer-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--navy-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-size: .84375rem; color: var(--on-navy-soft); }

/* ---------- pages that are mostly text ------------------------------------ */

.page-head { padding: clamp(40px, 6vw, 72px) 0 10px; }
.page-head h1 { max-width: 9.624em; }   /* = 16ch of Fraunces 500 at opsz 144 (em: see .passage > h2) */
.page-head .lead { max-width: 60ch; margin-top: 18px; }
.page-head .initial { margin-top: .2em; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --rail-w: 300px; }
}
@media (max-width: 980px) {
  .folio { grid-template-columns: minmax(0, 1fr); }
  .rail-col { display: none; }
  .text .gloss { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 18px 0 0; margin-top: 22px; border-top: 1px solid var(--line); display: grid; max-width: var(--measure); }
  .text .codex-fig { display: block; margin: 28px 0 8px; max-width: 360px; }
  .text::before { display: none; }
  .passage[data-folio]::before { content: attr(data-folio); display: block; text-align: end; font-family: var(--font-mono); font-size: .71875rem; letter-spacing: .08em; color: var(--slate); margin-bottom: 14px; }
  .register { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { gap: 20px; }
}
@media (max-width: 860px) {
  /* The drawer and its scrim exist only here, so the page under them stops scrolling only here: an
     open menu never leaves a wide page unable to scroll (js/site.js also closes it past 860px). */
  body.menu-open { overflow: hidden; }
  .menu-toggle { display: inline-flex; }
  .nav-drawer {
    display: none; position: fixed; top: calc(var(--header-h) + 8px); inset-inline: 14px; z-index: 60;
    background: var(--cream-surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 10px;
    max-height: calc(100vh - var(--header-h) - 16px); max-height: calc(100dvh - var(--header-h) - 16px); overflow-y: auto;
  }
  body.menu-open .nav-drawer { display: block; }
  .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { padding: 13px 14px; border-radius: var(--r-sm); text-decoration: none; font-size: 1.0625rem; }
  .nav-links a:hover, .nav-links a.active { background: var(--cream-2); }
  .nav-actions { display: flex; flex-direction: column; gap: 10px; padding: 12px 4px 4px; margin-top: 8px; border-top: 1px solid var(--line); }
  .nav-actions .btn { width: 100%; }
  /* The sheet is an isolated stacking context that holds the header (z 50) and the
     drawer; a scrim in the root context would cover both. Draw it INSIDE the sheet,
     under the header. .sheet::before is the paper grain, so ::after is free. */
  body.menu-open .sheet::after { content: ""; position: fixed; inset: 0; background: rgba(8, 29, 58, .45); z-index: 40; }
  /* No CSS order: every page writes the header as logo, .nav-cta (tablets), toggle, drawer, so the Tab
     order is the order on screen, and the drawer's links follow the button that opens them. */
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  body { font-size: 1.03125rem; }
  .initial { width: 72px; height: 72px; font-size: 48px; margin-inline-end: 14px; }
  .initial::after { width: 72px; height: 72px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .faq-question { font-size: 1.0625rem; padding: 16px; }
  .faq-answer { padding: 0 16px 16px; }
}

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

/* The owner's logo (assets/mark.png) replaces the CSS-built mark in the header and the footer, used as supplied. */
.logo-mark, .site-footer .logo-mark { background: url(../assets/mark.png) center / 30px 30px no-repeat; border-radius: 0; }
.logo-mark span, .logo-mark::after { display: none; }

/* One logo on every surface (3 Oct): the owner's mark beside the word in two colours, set in Fraunces 700.
   "Poly" takes its ground's text colour: navy on parchment, cream on the desk. "ment" is the logo's own
   orange, the ink of the mark's dot. It is not Streak Orange at work, and nothing else on a page takes it
   (LV-6). The word is one element, so the lockup's gap never opens inside it. On navy the mark's square
   would sink into the ground, so there it takes a cream hairline. */
.logo-word { flex: none; }
.logo-ment { color: var(--orange); }
.site-footer .logo-mark { border-radius: 25%; box-shadow: 0 0 0 1px rgba(244, 236, 218, .3); }