/* ═══════════════════════════════════════════════════════════
   MOORSACHI · Reading-copy legibility (italic body, both registers)

   Why this exists: the italic reading voice (Newsreader italic, set at
   opsz 18, weight 400) has hairline strokes that thin out at 17–21px —
   worst as light ink on the dark surface (irradiation eats the thin
   strokes), and again in light mode where the purple <em> measured
   3.26:1 on cream (#9B6FD4 on #F4EFE3) and failed AA.

   The fix is three levers, all scoped to small italic reading copy:
     1. Optical size  18 → 12   sturdier hairlines, slightly wider spacing
     2. Weight        400 → 460 dark / 440 light (variable axis; the font
                                 <link> now requests 400..600)
     3. Ink / tracking           dark: brighter ink + 0.01em
                                 (design-system-governance: dark-mode
                                 optical corrections); light: purple <em>
                                 swaps to --moor-purple (4.88:1)

   Loaded AFTER each page's inline <style>, so same-specificity rules here
   win. Tokens are not changed — only how the reading voice uses them.
   Display-scale italics (hero title, section headings, vault passage,
   monument type) are deliberately NOT touched: they carry weight by size.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Purple as TEXT. Same lilac as --moor-purple-bright in dark; in light it
     steps to the canonical --moor-purple so small labels clear AA.
     Fills, outlines and hover backgrounds keep --moor-purple-bright. */
  --moor-purple-ink: var(--moor-purple-bright);   /* #B591E0 on #09080E */

  --read-opsz:     12;
  --read-wght:     460;
  --read-track:    0.01em;
  --read-ink:      rgba(240, 236, 245, 0.94);   /* was 0.85 secondary */
  --read-em:       var(--moor-purple-bright);   /* #B591E0 on #09080E — high */
}

[data-register="light"] {
  --moor-purple-ink: var(--moor-purple);          /* #7B54B2 on #F4EFE3 = 4.88:1, on #F8F5F0 = 5.1:1 */
  --read-wght:     440;
  --read-track:    0.005em;
  --read-ink:      var(--moor-ink-primary);     /* #1A1612 on #F4EFE3 */
  --read-em:       var(--moor-purple);          /* #7B54B2 on #F4EFE3 = 4.88:1 */
}

/* ─── Small italic reading copy (≈17–21px) ───────────────── */
.hero__subhead,
.glimpse__body,
.pathway-header__intro,
.pathway-closer,
.fold__body,
.inheritance__body,
.threshold__body,
.tenet__body,
.founder__body,
.drop__detail,
.symbolism__commentary,
.moor-footer__letter-lede,
.editorial-newsreader {
  font-variation-settings: "opsz" var(--read-opsz);
  font-weight: var(--read-wght);
  letter-spacing: var(--read-track);
  color: var(--read-ink);
}

/* The purple lead-in inside reading paragraphs. */
.glimpse__body em,
.pathway-header__intro em,
.pathway-closer em {
  color: var(--read-em);
  font-variation-settings: "opsz" var(--read-opsz);
  font-weight: var(--read-wght);
}

/* Emphasis inside reading copy inherits the same sturdier cut. */
.limb__body em,
.symbolism__commentary em {
  font-variation-settings: "opsz" var(--read-opsz);
  font-weight: var(--read-wght);
}

/* Phones: smaller glyphs, thinner strokes, read outdoors — lift one more
   notch (Calm Shift lens 8: one-handed on a phone in the sun). */
@media (max-width: 768px) {
  :root                { --read-wght: 480; --read-opsz: 10; }
  [data-register="light"] { --read-wght: 460; }
}

/* ═══════════════════════════════════════════════════════════
   READING LAMP (prototype · opt-in · see reading.js)
   Lit paragraph = --moor-ink-primary (≈17:1 dark, ≈16:1 light).
   Unlit = --moor-ink-soft (5.5:1 dark, 5.3:1 light): settled, never dim.
   Colour only. No weight/size change, so lines never reflow.
   ═══════════════════════════════════════════════════════════ */
.lamp { display: flex; justify-content: center; margin: 0 auto 2.25rem; }
.lamp__btn {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 1.1rem;
  background: none; border: 1px solid var(--moor-hairline); border-radius: 999px; cursor: pointer;
  font: 500 .68rem/1 var(--font-utility); letter-spacing: .22em; text-transform: uppercase;
  color: var(--moor-ink-secondary);
}
.lamp__btn:hover { border-color: var(--moor-purple-dim); color: var(--moor-ink-primary); }
.lamp__btn:focus-visible { outline: 2px solid var(--moor-purple-ink); outline-offset: 3px; }
.lamp__wick {
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--moor-ink-soft); flex: none;
  transition: background-color 400ms var(--ease-velvet), box-shadow 400ms var(--ease-velvet), border-color 400ms var(--ease-velvet);
}
.lamp__state { color: var(--moor-ink-soft); }
.lamp__btn[aria-pressed="true"] .lamp__wick {
  background: var(--moor-purple-ink); border-color: var(--moor-purple-ink); box-shadow: 0 0 0 4px var(--moor-purple-dim);
}
.lamp__btn[aria-pressed="true"] .lamp__state { color: var(--moor-purple-ink); }

.glimpse[data-lamp="on"] .glimpse__body {
  position: relative; margin-bottom: 2.75rem;
  color: var(--moor-ink-soft);
  transition: color 400ms var(--ease-velvet);
}
.glimpse[data-lamp="on"] .glimpse__body em { color: var(--moor-ink-soft); transition: color 400ms var(--ease-velvet); }
.glimpse[data-lamp="on"] .glimpse__body.is-lit { color: var(--moor-ink-primary); }
.glimpse[data-lamp="on"] .glimpse__body.is-lit em { color: var(--moor-purple-ink); }

/* The page measures itself. Marker = measured ratio on a 1→21 log scale;
   ticks at 3 (large-text floor), 4.5 (AA), 7 (AAA). Decorative: the figures are the content. */
.glimpse[data-lamp="on"] .glimpse__body.is-lit::before {
  content: ""; position: absolute; left: 50%; bottom: -1.05rem; width: 108px; height: 9px; transform: translateX(-50%);
  background:
    radial-gradient(circle at var(--lamp-pos, 90%) 50%, var(--moor-purple-ink) 0 2.6px, transparent 3.3px),
    linear-gradient(var(--moor-ink-soft), var(--moor-ink-soft)) 36% 50% / 1px 7px no-repeat,
    linear-gradient(var(--moor-ink-soft), var(--moor-ink-soft)) 49.4% 50% / 1px 7px no-repeat,
    linear-gradient(var(--moor-ink-soft), var(--moor-ink-soft)) 63.9% 50% / 1px 7px no-repeat,
    linear-gradient(var(--moor-hairline), var(--moor-hairline)) 0 50% / 100% 1px no-repeat;
}
.glimpse[data-lamp="on"] .glimpse__body.is-lit::after {
  content: attr(data-ratio); position: absolute; left: 0; right: 0; bottom: -2.15rem; text-align: center;
  font: 500 .62rem/1 var(--font-utility); letter-spacing: .24em; text-transform: uppercase; color: var(--moor-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .lamp__wick, .glimpse[data-lamp="on"] .glimpse__body, .glimpse[data-lamp="on"] .glimpse__body em { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ELEMENTAL SURFACES (prototype · section-scoped · proposal P3)
   A ground tuned to the element a passage names. Same type, same ink
   tokens, same brand laws: only the surface under the reading changes,
   and it is chosen so every ink pair still clears AA (measured below).

   SOURCE OF TRUTH: `elementalGrounds` in styles/tokens.ts. These --el-* values mirror
   it (static HTML cannot import TS); `npm run audit:elements` fails on drift.

   Set with data-element="earth|water|fire|air|aether" on a reading block.
   Aether is the default for book passages; the seven chakra rows take the
   element they already print (Ether, Light, Consciousness → aether).
   Never a fill for CTAs, never a section-wide wash: a ground, not a colour.

   Measured contrast of the lowest-ink pair on each ground
   (muted ink-soft / purple-ink; primary ink is 14.4:1 or higher everywhere)
     dark   earth 5.16 / 7.23   water 5.17 / 7.23   fire 5.24 / 7.33
            air   5.07 / 7.09   aether 5.28 / 7.39
     light  earth 5.01 / 4.64   water 5.11 / 4.73   fire 5.01 / 4.64
            air   5.14 / 4.75   aether 4.95 / 4.58
   ═══════════════════════════════════════════════════════════ */
:root {
  --el-earth:  #16110C;   /* umber-black */
  --el-water:  #0A1318;   /* deep tide */
  --el-fire:   #190D0B;   /* ember-black */
  --el-air:    #12141A;   /* slate */
  --el-aether: #110C1E;   /* violet-black */
}
[data-register="light"] {
  --el-earth:  #F2E9D7;   /* sand */
  --el-water:  #E4EEEC;   /* mist */
  --el-fire:   #F6E7DE;   /* ember blush */
  --el-air:    #E8EDF3;   /* sky frost */
  --el-aether: #ECE6F3;   /* lilac frost */
}
[data-element]            { background-color: var(--el-ground); }
[data-element="earth"]    { --el-ground: var(--el-earth); }
[data-element="water"]    { --el-ground: var(--el-water); }
[data-element="fire"]     { --el-ground: var(--el-fire); }
[data-element="air"]      { --el-ground: var(--el-air); }
[data-element="aether"]   { --el-ground: var(--el-aether); }

/* Chakra rows: the ground runs as a band; padding keeps text off its edge. */
.chakra[data-element] { padding-inline: clamp(.75rem, 3vw, 1.5rem); }

/* The book passage: a reading page with a hairline edge, not a rounded card. */
.glimpse[data-element] {
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.1rem, 4vw, 2.75rem) clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--moor-hairline-soft);
}
.glimpse[data-element] .glimpse__body:last-child { margin-bottom: 1rem; }

/* ═══════════════════════════════════════════════════════════
   RULED PROSE (prototype · proposal P4)
   A faint paper line under each line of italic reading copy, so the
   passage feels written rather than set. Opt-in per block: data-ruled.

   Alignment is the whole craft. The rule is drawn on the paragraph itself
   in em units, on the same 1.7em pitch as its line-height, so it can never
   drift from the text at any size or breakpoint. Newsreader italic puts the
   baseline at ~1.04em of each 1.7em line; the rule sits at 1.12em, just
   below it: letters rest on the line, only descenders cross it.
   One blank ruled line separates paragraphs (padding, not margin, so the
   ruling is continuous across the gap).
   Decorative: ~1.2:1 against the ground by design. The words carry the
   contrast; the line carries the feeling. Switched off for
   prefers-contrast: more and forced-colors.

   Worst case measured: a text pixel sitting exactly on the 1px rule
   (ground blended with the rule) on AETHER, the only ground validated here.
     dark   unlit ink-soft  4.62:1 (rule 10%; at 13% it was 4.39, so it was lowered)
     light  unlit ink-tertiary 5.12:1 (ink-soft would be 4.15, so ruled+lamp uses tertiary)
   Extending data-ruled to another elemental ground means re-measuring it first
   (dark Air at 10% is 4.38:1).
   ═══════════════════════════════════════════════════════════ */
:root                     { --read-rule: rgba(181, 145, 224, 0.10); }   /* lilac on aether-black */
[data-register="light"]   { --read-rule: rgba(123, 84, 178, 0.14); }    /* purple on lilac frost */

.glimpse[data-ruled] .glimpse__body {
  margin: 0 auto;
  padding-bottom: 1.7em;
  background-image: linear-gradient(to bottom,
    transparent calc(1.12em - 1px), var(--read-rule) calc(1.12em - 1px),
    var(--read-rule) 1.12em, transparent 1.12em);
  background-size: 100% 1.7em;
  background-repeat: repeat-y;
}
.glimpse[data-ruled] .glimpse__body:last-child { padding-bottom: 0; }

/* Lamp on, ruled: the page's own rule IS the contrast scale.
   Under the lit line, three blank ruled cells (1.7em each):
     cell 1  the ticks (3 / 4.5 AA / 7 AAA) and the marker dot sit ON the rule, full width,
             log scale 1 to 21. No second line is drawn: the paper line is the axis.
     cell 2  the measured figure hangs directly under the dot (clamped inside the panel),
             masked by the ground so the rule never runs through the numerals.
     cell 3  breathing room before the next paragraph.
   The last paragraph keeps only the two cells it needs and paints no trailing rules (content-box). */
.glimpse[data-ruled][data-lamp="on"] .glimpse__body { margin-bottom: 0; padding-bottom: 5.1em; }
.glimpse[data-ruled][data-lamp="on"] .glimpse__body:last-child { padding-bottom: 3.4em; background-clip: content-box; }
.glimpse[data-ruled][data-lamp="on"] .glimpse__body.is-lit::before {
  left: 0; right: 0; width: auto; transform: none; height: 9px;
  bottom: calc(3.98em - 4.5px);                         /* on the first blank rule */
  background:
    radial-gradient(circle at var(--lamp-pos, 90%) 50%, var(--moor-purple-ink) 0 2.6px, transparent 3.3px),
    linear-gradient(var(--moor-ink-soft), var(--moor-ink-soft)) 36% 50% / 1px 7px no-repeat,
    linear-gradient(var(--moor-ink-soft), var(--moor-ink-soft)) 49.4% 50% / 1px 7px no-repeat,
    linear-gradient(var(--moor-ink-soft), var(--moor-ink-soft)) 63.9% 50% / 1px 7px no-repeat;
}
.glimpse[data-ruled][data-lamp="on"] .glimpse__body.is-lit::after {
  right: auto; text-align: center; white-space: nowrap; padding: 0 .8em;
  left: clamp(3.6rem, var(--lamp-pos, 90%), calc(100% - 3.6rem)); transform: translateX(-50%);
  bottom: calc(2.28em - 5px);                           /* on the second blank rule */
  background-color: var(--el-ground, var(--moor-surface-base));
}
/* Lit last paragraph keeps the two trailing rules the scale rests on; unlit, it paints none. */
.glimpse[data-ruled][data-lamp="on"] .glimpse__body.is-lit:last-child { background-clip: padding-box; }
.glimpse[data-ruled][data-lamp="on"] .glimpse__body.is-lit:last-child::before { bottom: calc(2.28em - 4.5px); }
.glimpse[data-ruled][data-lamp="on"] .glimpse__body.is-lit:last-child::after  { bottom: calc(.58em - 5px); }

@media (prefers-contrast: more), (forced-colors: active) {
  .glimpse[data-ruled] .glimpse__body { background-image: none; }
}

/* Light + ruled + lamp: ink-soft would dip to 4.15:1 where text crosses the rule, so the
   dimmed state steps to ink-tertiary (5.12:1 worst case). Dark stays on ink-soft (4.62:1). */
[data-register="light"] .glimpse[data-ruled][data-lamp="on"] .glimpse__body:not(.is-lit),
[data-register="light"] .glimpse[data-ruled][data-lamp="on"] .glimpse__body:not(.is-lit) em { color: var(--moor-ink-tertiary); }

/* ═══════════════════════════════════════════════════════════
   GOLD INK (proposal P2) — gold as TEXT only
   Gold stays canon for hairlines and Roman-numeral labels. In light, #C8AF78 on cream is
   1.7 to 2.0:1, so the numerals and .drop__meta step to a bronze (#7D6218: 4.73 to 5.32:1
   on every light surface they land on). Dark is unchanged. Strokes and rules keep
   --moor-gold-hairline. SOURCE OF TRUTH: `moorsachiGoldInk` in styles/tokens.ts;
   `npm run audit:elements` fails on drift.
   ═══════════════════════════════════════════════════════════ */
:root                     { --moor-gold-ink: #C8AF78; }
[data-register="light"]   { --moor-gold-ink: #7D6218; }
.limb__numeral, .tenet__numeral, .fold__numeral, .chakra__numeral, .drop__meta { color: var(--moor-gold-ink); }
/* .limb__numeral carries opacity .85 (a dark-register softening); on cream that alone pulls the bronze
   to ~3.8:1, so in light it runs at full opacity (5.3:1). Dark keeps .85 (8.9:1 before it). */
[data-register="light"] .limb__numeral { opacity: 1; }