@charset "utf-8";
/* ==========================================================================
   THE GREATER HORIZON — the only stylesheet.

   ⛔ WHY THIS FILE EXISTS AT ALL, AND WHY NOTHING MAY MOVE INTO index.html
      Apache sends:  default-src 'self'; img-src 'self' data:; frame-ancestors 'none'
      There is no style-src, so style-src inherits default-src 'self'. A <style> block,
      a style="" attribute, and any <script> are DROPPED by the browser — the page
      renders naked. Everything visual lives here. There is no JavaScript on this site.

   ⛔ NO WEBFONTS. There are no font files on this server and none may be fetched.
      The titling face is therefore set in UPPERCASE ONLY, always, at ≥.12em tracking.
      That is not taste: capitals are where Didot, Bodoni MT, Hoefler Text, Garamond and
      Times converge — the divergence between a Didone and a Times lives almost entirely
      in the lowercase, which this stack never sets. A bare Windows box lands on Times
      New Roman caps and reads as a deliberate titling decision, not a fallback.

   ⛔ THE GOVERNING COLOUR LAW — the first thing a future editor will break.
      Gold is decoration on the light field and typography on the dark one. Not taste:
      gold on parchment is 1.84:1, gold on ink is 7.22:1. Gold may never be body text,
      a link colour, an underline, or a focus ring on parchment. It has exactly two
      appearances on the light field — the hairline inside the versal panel and the sun
      disc on each horizon rule — and each has an olive structural partner that still
      carries the meaning at 4.91:1 if the gold is invisible on a bad panel.
      This is chrysography, not rubrication: the second colour here is gold rather than
      red, which keeps the palette to the brand's own three sampled values.

   If motion is ever added: the base declarations below are the finished page.
   Animation is only ever an enhancement layered on top of a page that is already done.
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Colour — three sampled from the logo, one derived, one composited. */
  --parchment: #F7F3E8;  /* seal.png's own field, decoded from the artwork.
                            ⛔ HARD-COUPLED: seal-320.png is OPAQUE. Move this value one
                            step and a cream square appears around the seal. */
  --olive:     #616F3F;  /* brand, ~60% of the mark. The only ink in both PNG stencils. */
  --gold:      #DEAE4F;  /* brand, ~22% of the mark. */
  --ink:       #252A18;  /* DERIVED: brand olive's hue and saturation, lightness 34%→13%.
                            Exists because olive on parchment is 4.91:1 — legal, but thin
                            for 19px long-form. This is 13.31:1. */
  --rule-soft: #B4B89C;  /* olive at 45% over parchment, written as a literal hex so it
                            composites and prints identically in every engine.
                            Separators between list items only. Never structural. */

  /* The measured ground line of the artwork. tree.png row 653 of 1024 is the trunk
     waist — minimum ink coverage between canopy and root flare. The bounding-box
     centre (50.4%) is 443px of solid canopy; a line there slices through foliage.
     This number is drawn, not computed. */
  --ground-y: 63.8%;

  --face-text: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               "URW Palladio L", P052, Georgia, "Times New Roman", Times, serif;
  --face-titling: Didot, "Didot LT STD", "Bodoni 72", "Bodoni MT", "Hoefler Text",
                  Garamond, "Times New Roman", Times, serif;

  --f-label:    clamp(.75rem, .72rem + .15vw, .8125rem);
  --f-fine:     .8125rem;
  --f-gloss:    clamp(.875rem, .85rem + .12vw, .9375rem);
  --f-body-sm:  clamp(1rem, .97rem + .15vw, 1.0625rem);
  --f-body:     clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --f-specimen: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
  --f-lede:     clamp(1.1875rem, 1.09rem + .5vw, 1.5rem);
  --f-h2:       clamp(1.5rem, 1.28rem + 1vw, 2rem);
  --f-cadence:  clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  --f-lead:     clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  --lh-body: 1.72;

  --versal-lines: 3;
  --versal-letter: 3.4;   /* tune ONLY this. Above 3.8 the T's serifs touch the gold rule. */
  --versal-trim: .17;     /* optically pulls the square inside cap-height and baseline */
  --versal-size: calc(var(--versal-lines) * var(--f-body) * var(--lh-body)
                      - 2 * var(--versal-trim) * var(--f-body));

  --leaf-max: 46rem;
  --leaf-pad: clamp(1.25rem, 5vw, 3rem);
  --measure: 36rem;                      /* rem, never ch — a ch measure resizes the
                                            ruled frame between a Palatino machine and
                                            a Times machine. */
  --gutter: clamp(1.5rem, 3vw, 2rem);
  --sp-xs: .5rem; --sp-s: .75rem; --sp-m: 1.25rem; --sp-l: 2rem;
  --sp-xl:  clamp(2.25rem, 5vw, 3.25rem);
  --sp-2xl: clamp(3rem, 7vw, 4.5rem);

  color-scheme: light;   /* committed. A printed leaf has one colour — see §9. */
}

/* ── 2. RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }   /* clip, NOT hidden — hidden creates a scroll container */
body {
  margin: 0;
  /* The page's outer gutter lives here, so .frame and .colophon can both simply be
     `max-inline-size + margin-inline: auto` and stay aligned with each other. */
  padding-inline: clamp(.75rem, 3vw, 2rem);
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--f-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
img { max-inline-size: 100%; block-size: auto; display: block; }
h1, h2, h3, h4, p, dl, dd, ul, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--olive);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--ink); }

/* currentColor is 13.31:1 on parchment, 13.31:1 in the miniature, and 7.22:1 on gold
   text — every ground on the page at once, in one declaration. */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 1px; }

.skip {
  position: absolute; inset-block-start: -100vh; inset-inline-start: .5rem;
  z-index: 10;
  background: var(--ink); color: var(--parchment);
  padding: .6rem 1rem; text-decoration: none;
  font-family: var(--face-titling); text-transform: uppercase;
  font-size: var(--f-label); letter-spacing: .14em;
}
.skip:focus { inset-block-start: .5rem; }

/* ── 3. THE LEAF AND ITS RULING ────────────────────────────────────────── */
/* Olive on the OUTSIDE, gold on the inside, deliberately: if the gold hairline is
   invisible on a poor panel, the frame still reads. */
.frame {
  max-inline-size: var(--leaf-max);
  margin-inline: auto;
  margin-block: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--olive);
  position: relative;
}
.frame::before {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid var(--gold); pointer-events: none;
}
.leaf { padding: var(--leaf-pad); }

/* ── 4. INCIPIT ────────────────────────────────────────────────────────── */
.incipit { text-align: center; }
.seal {
  inline-size: clamp(120px, 26vw, 156px);
  block-size: auto;
  margin-inline: auto;
  margin-block-end: var(--sp-l);
}
.wordmark { max-inline-size: 30rem; margin-inline: auto; position: relative; }
.wordmark img { inline-size: 100%; }
.tagline {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: var(--f-label);
  color: var(--olive);
  margin-block: var(--sp-m) var(--sp-xl);
  /* Tracking is added AFTER the final glyph too, so centred tracked text sits half a
     tracking-unit left of true centre. Compensate by half, not by the full amount. */
  text-indent: .11em;
}

.prose {
  max-inline-size: var(--measure);
  margin-inline: auto;
  text-align: start;
}
.prose + .prose { margin-block-start: var(--sp-m); }

/* ── 4a. THE HISTORIATED VERSAL ────────────────────────────────────────── */
/* Four layers, one isolated stacking context, no extra markup and no duplicate
   letter for screen readers — the T is a real text node, read straight through.
   A negative z-index child inside an isolated context paints ABOVE the element's
   own background but BELOW its in-flow text. That single fact is the whole device:
      olive panel  →  gold oak  →  parchment letter
   ::first-letter is deliberately NOT used — its box is the glyph box, which differs
   per face, and this device needs exact square geometry. */
.versal {
  float: left;
  inline-size: var(--versal-size);
  block-size: var(--versal-size);
  margin-inline-end: .4em;
  margin-block-start: .12em;
  position: relative;
  isolation: isolate;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--face-titling);
  font-size: calc(var(--versal-letter) * var(--f-body));
  line-height: 1;
  letter-spacing: 0;
  color: var(--parchment);
}
.versal::before {                       /* the gold ruling — its own layer, not a border
                                           on the panel: a border would eat the panel's
                                           inside and shrink the letter's field. */
  content: ""; position: absolute; inset: 4px; z-index: 2;
  border: 1px solid var(--gold); pointer-events: none;
}
/* The oak, ghosted behind the letter. The default is ABSENT and the mask block turns it
   on — not the reverse. Unmasked, this would be a flat gold rectangle, which is worse
   than nothing; and a browser too old for @supports would apply exactly that if the
   base state were visible. Degradation lands on a clean olive panel with a gold rule. */
.versal::after { content: ""; position: absolute; inset: 9px; z-index: -1; display: none; }
@supports ((mask-image: url("tree-512.png")) or (-webkit-mask-image: url("tree-512.png"))) {
  .versal::after {
    display: block;
    background-color: var(--gold);
    opacity: .20;
    -webkit-mask-image: url("tree-512.png");
            mask-image: url("tree-512.png");
    -webkit-mask-size: contain;   mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
  }
}

/* ── 4b. THE HORIZON RULE — the seal reduced to punctuation ────────────── */
/* The oak is translated UP so the measured trunk waist, not the bounding-box centre,
   lands on the hairline. Canopy above the line, roots below it, gold sun sitting ON
   it, trunk crossing. calc(50% - 63.8%) = −13.8% of the ornament's own height. */
.horizon {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin-block: var(--sp-2xl);
}
.horizon::before, .horizon::after {
  content: ""; block-size: 1px; background: var(--olive);
}
.horizon .mark { display: none; }   /* enabled only where masks work — see below */

@supports ((mask-image: url("tree-96.png")) or (-webkit-mask-image: url("tree-96.png"))) {
  .horizon { gap: 1.1rem; }
  .horizon .mark {
    display: block;
    position: relative;
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }
  .horizon .mark::before {          /* the sun, on the line, behind the tree */
    content: ""; position: absolute;
    inline-size: .5rem; block-size: .5rem;
    inset-inline-start: 50%; inset-block-start: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--gold);
  }
  .horizon .mark::after {           /* the oak, sitting on the line */
    content: ""; position: absolute; inset: 0;
    translate: 0 calc(50% - var(--ground-y));
    background-color: var(--olive);
    -webkit-mask-image: url("tree-96.png");
            mask-image: url("tree-96.png");
    -webkit-mask-size: contain;   mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
  }
}

/* ── 5. SECTION FURNITURE ──────────────────────────────────────────────── */
.label {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: var(--f-label);
  font-weight: 400;
  color: var(--olive);
  text-indent: .11em;
  text-align: center;
  margin-block-end: var(--sp-l);
}
.section-sub {
  font-style: italic; color: var(--olive);
  font-size: var(--f-gloss);
  text-align: center;
  margin-block-start: calc(-1 * var(--sp-m));
  margin-block-end: var(--sp-l);
}
.kicker {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: var(--f-label);
  font-weight: 400;
  color: var(--olive);
  margin-block-end: var(--sp-s);
}

/* ── 6. THE LATEST ─────────────────────────────────────────────────────── */
.latest { max-inline-size: var(--measure); margin-inline: auto; }
.lead-headline {
  font-family: var(--face-titling);
  font-size: var(--f-lead);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-block-end: var(--sp-m);
  text-wrap: balance;
}
.lede {
  font-size: var(--f-lede);
  line-height: 1.5;
  border-inline-start: 1px solid var(--olive);
  padding-inline-start: var(--sp-m);
}

/* ── 7. THE TWO STREAMS ────────────────────────────────────────────────── */
/* The gutter is a GRID CELL, not a border. A border-inline-start would have to be
   nulled and re-added as border-block-start when the columns stack, and that is the
   edit somebody gets wrong later. */
.streams { display: grid; gap: var(--sp-xl) var(--gutter); }
.gutter { background: var(--olive); block-size: 1px; inline-size: 100%; }
.stream-name {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--f-h2);
  font-weight: 400;
  color: var(--ink);
}
.stream-sub {
  font-style: italic; color: var(--olive);
  font-size: var(--f-body-sm);
  margin-block: .35rem var(--sp-s);
}
.gloss, .blurb { font-size: var(--f-gloss); line-height: 1.6; }
.gloss { color: var(--olive); }
.blurb { margin-block-start: var(--sp-s); }
.specimen {
  font-style: italic;
  color: var(--olive);
  font-size: var(--f-specimen);
  line-height: 1.45;
  margin-block: var(--sp-m);
  padding-block: var(--sp-s);
  border-block: 1px solid var(--rule-soft);
}
.in-this-part {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: var(--f-label);
  font-weight: 400;
  color: var(--olive);
  margin-block-end: var(--sp-s);
}
/* .contents li and .contents li a are styled identically apart from the underline, so
   linking these pieces later is a markup-only change with no visual re-tuning. */
.contents li { padding-block: var(--sp-s); border-block-start: 1px solid var(--rule-soft); }
.contents li:first-child { border-block-start: 0; padding-block-start: 0; }
.piece, .contents li a {
  display: block;
  font-size: var(--f-body-sm);
  line-height: 1.3;
  color: var(--ink);
}
.contents .attrib {
  display: block;
  font-style: italic;
  color: var(--olive);
  font-size: var(--f-gloss);
  margin-block-start: .15rem;
}
.contents .dek {
  display: block;
  font-size: var(--f-gloss);
  line-height: 1.55;
  margin-block-start: .4rem;
}
.resetting {
  font-style: italic;
  color: var(--olive);
  font-size: var(--f-gloss);
  text-align: center;
}

/* ── 8. THE MINIATURE — the one dark field ─────────────────────────────── */
/* Bleeds to the ruling with a negative margin equal to the leaf padding.
   NEVER 100vw: that excludes the scrollbar and produces horizontal body scroll. */
.miniature {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ink);
  color: var(--parchment);
  /* Bleed out to the ruling and STOP 1px inside it — the frame's gold hairline sits at
     inset 4px..5px of the frame border box, so a full -leaf-pad bleed would paint over
     it. 6px lands the dark field just inside the gold. */
  margin-inline: calc(6px - var(--leaf-pad));
  margin-block: var(--sp-2xl);
  padding: clamp(2rem, 7vw, 3.5rem) var(--leaf-pad);
  text-align: center;
}
/* Same rule as the versal: absent by default, switched on only where masks work. */
.miniature::before {
  content: ""; position: absolute; z-index: -1; display: none;
  inline-size: 22rem; block-size: 22rem;
  inset-inline-start: 50%;
  inset-block-end: -8rem;
  translate: -50% 0;
}
@supports ((mask-image: url("tree-512.png")) or (-webkit-mask-image: url("tree-512.png"))) {
  .miniature::before {
    display: block;
    background-color: var(--gold);
    opacity: .12;
    -webkit-mask-image: url("tree-512.png");
            mask-image: url("tree-512.png");
    -webkit-mask-size: contain;   mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
  }
}
.cadence {
  font-family: var(--face-titling);
  font-size: var(--f-cadence);
  line-height: 1.35;
  text-wrap: balance;
}
.from {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: var(--f-label);
  color: var(--gold);          /* 7.22:1 on --ink. The ONLY gold text on the page. */
  text-indent: .09em;
  margin-block-start: var(--sp-m);
}

/* ── 9. THE LEXICON ────────────────────────────────────────────────────── */
.lexicon { display: grid; gap: var(--sp-m) var(--gutter); }
.lexicon dt {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--f-label);
  color: var(--olive);
  margin-block-end: .3rem;
}
.lexicon dd { margin: 0; font-size: var(--f-gloss); line-height: 1.6; }

/* ── 10. THE SOURCES ───────────────────────────────────────────────────── */
.alongside { max-inline-size: var(--measure); margin-inline: auto; margin-block-start: var(--sp-s); }
.alongside li { padding-block: var(--sp-xs); border-block-start: 1px solid var(--rule-soft); }
.alongside li:first-child { border-block-start: 0; }
.who {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--f-label);
  color: var(--olive);
  display: block;
}
.alongside cite { font-style: italic; font-size: var(--f-gloss); }
/* NOT `section > .kicker` — that would also catch the left-aligned "Scripture · 21 April
   2026" kicker in The Latest, which is a direct child of its section too. */
.kicker--center { text-align: center; text-indent: .09em; margin-block-start: var(--sp-l); }

/* ── 11. COLOPHON ──────────────────────────────────────────────────────── */
.colophon {
  max-inline-size: var(--leaf-max);
  margin-inline: auto;
  margin-block-end: clamp(2rem, 6vw, 4rem);
  text-align: center;
}
.colophon p {
  max-inline-size: 32rem; margin-inline: auto;
  font-size: var(--f-gloss); line-height: 1.6; color: var(--olive);
}
.colophon p + p { margin-block-start: var(--sp-s); }
.colophon .production {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: var(--f-label);
  color: var(--olive);
  text-indent: .11em;
  margin-block-start: var(--sp-l);
}
/* A hand-maintained index.html goes stale silently. Update this on every content edit. */
.colophon .fine { font-size: var(--f-fine); color: var(--olive); margin-block-start: var(--sp-s); }
.horizon--wide { margin-block: var(--sp-2xl) var(--sp-l); }

/* ── 12. RESPONSIVE ────────────────────────────────────────────────────── */
/* 54rem = 864px, chosen so each stream column still has ≥280px before it splits. */
@media (min-width: 54rem) {
  .streams { grid-template-columns: 1fr 1px 1fr; }
  .gutter { block-size: auto; inline-size: 1px; }
  .resetting { grid-column: 1 / -1; }
  .lexicon { grid-template-columns: 1fr 1fr; }
}
/* Three lines beside a big square runs at about four characters a line on a small
   phone. Two lines, smaller letter, tighter insets. */
@media (max-width: 30rem) {
  :root { --versal-lines: 2; --versal-letter: 2.6; }
  .versal::before { inset: 3px; }
  .versal::after  { inset: 7px; }
  /* ~34 characters a line at 360px. Safe: lang="en" is set on <html>. */
  .prose, .dek, .blurb, .gloss { hyphens: auto; }
}

/* ── 13. MOTION ────────────────────────────────────────────────────────── */
/* The page has no animation and no transition that moves anything. The one transition
   in the file is declared INSIDE no-preference rather than declared-then-disabled —
   that direction is the correct one and leaves nothing live in engines that mishandle
   the query. There is no scroll-behavior: smooth anywhere; the skip link jumps.
   `prefers-reduced-motion: reduce` therefore needs no override block at all. */
@media (prefers-reduced-motion: no-preference) {
  a { transition: text-decoration-color 120ms ease, text-decoration-thickness 120ms ease; }
}

/* ── 14. FORCED COLOURS ────────────────────────────────────────────────── */
/* Images are not recoloured, so the seal's opaque cream field would sit as a bright
   block on black. Drop it and every mask ornament; keep the versal as a real square.
   ⚠️ §24 deliberately overrides `.seal { display: none }` for the two transparent
   seals (.landing .seal and .seal--titular) — the leaf's win is a source-order
   tie at equal specificity, so do not reorder these sections. */
@media (forced-colors: active) {
  .seal { display: none; }
  .horizon .mark, .miniature::before, .versal::after { display: none; }
  .versal { forced-color-adjust: none; background: #616F3F; color: #F7F3E8; }
  /* border-color on the frame, background-color on the hairlines — NOT both on both.
     `background-color: CanvasText` on .frame would flood the entire leaf with ink. */
  .frame { border-color: CanvasText; }
  .frame::before { display: none; }
  .gutter, .horizon::before, .horizon::after { background-color: CanvasText; }
  .miniature { border: 1px solid CanvasText; }
  /* The wordmark is an image, and forced-colors does not recolour images — olive on a
     black canvas is 2.2:1. Because wordmark.png is an alpha stencil, it can be re-drawn
     as a masked block in the user's own text colour. The <img> stays at opacity 0 rather
     than display:none so it keeps supplying the h1's accessible name. */
  .wordmark img { opacity: 0; }
  .wordmark::after {
    content: ""; position: absolute; inset: 0;
    background-color: CanvasText;
    -webkit-mask-image: url("wordmark.png");
            mask-image: url("wordmark.png");
    -webkit-mask-size: contain;   mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
  }
}

/* ── 15. PRINT ─────────────────────────────────────────────────────────── */
@media print {
  .skip, .horizon .mark { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .frame { border-color: #000; max-inline-size: none; margin: 0; }
  .frame::before { display: none; }
  .miniature { background: none; color: #000; border-block: 1px solid #000; }
  .miniature::before { display: none; }
  .from { color: #000; }
  .streams { grid-template-columns: 1fr 1px 1fr; }
}

/* ==========================================================================
   §16–§22 — ADDED 2026-08-01, when the site became more than one page.

   Everything above this line was written for a single hand-set leaf. What
   follows extends the same system to four more kinds of page — a stream index,
   a piece, the method essay, and the posture comparison — WITHOUT relaxing any
   of the three laws stated at the top of this file. In particular:

     · Gold is still decoration on the light field and typography on the dark
       one. Nothing below sets gold as body text, a link colour, an underline
       or a focus ring on parchment. The two permitted light-field appearances
       are unchanged; the running head and the piece rule reuse the SAME
       horizon ornament rather than inventing a second gold mark.
     · The titling face is still set uppercase only, at ≥.12em tracking,
       everywhere it appears.
     · Still no webfont, no inline style, no script outside /book3.
   ========================================================================== */

/* ── 16. THE RUNNING HEAD ──────────────────────────────────────────────────
   The landing page deliberately does NOT carry this. A title page has no
   running head; the front door is not a page you navigate away from, it is the
   page you arrive at. Every other page carries it, which is also what makes
   the landing page feel like a front door rather than one tab among five. */
.masthead {
  max-inline-size: var(--leaf-max);
  margin-inline: auto;
  padding-block-start: clamp(1.25rem, 4vw, 2.25rem);
  text-align: center;
}
.masthead-mark { display: block; inline-size: 1.75rem; margin-inline: auto; text-decoration: none; }
.masthead-mark img { inline-size: 100%; }
.rubric {
  margin-block-start: var(--sp-m);
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: var(--f-label);
  text-indent: .09em;
  line-height: 2.1;
}
/* A flex row with a real gap, not `·` separators in the markup: a screen reader
   reading five interpuncts is noise, and the separators would need hiding. */
.rubric ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-m); }
.rubric a { color: var(--olive); text-decoration: none; }
.rubric a:hover { text-decoration: underline; text-decoration-color: var(--olive);
                  text-underline-offset: .3em; }
/* aria-current, not a class — the state is in the markup for assistive tech and
   the styling follows it, rather than the two being maintained separately.
   Bare [aria-current], not ="page": an index page carries "page", a piece page
   carries "true" on its section (the piece is not the index, and "page" there
   would announce the link's target as the page being read). Both get the mark. */
.rubric [aria-current] { color: var(--ink); }
.rubric [aria-current]::before { content: "— "; color: var(--olive); }

/* ── 17. A STREAM INDEX ────────────────────────────────────────────────────
   Reuses .contents from §7 for the list itself, so a piece looks identical
   whether it is listed on the landing page or on its own stream index. */
.stream-head { text-align: center; }
.stream-head .stream-name { display: block; margin-block-end: .35rem; }
.stream-intro { max-inline-size: var(--measure); margin-inline: auto; margin-block-start: var(--sp-l); }
.stream-count {
  font-family: var(--face-titling);
  text-transform: uppercase; letter-spacing: .18em;
  font-size: var(--f-label); color: var(--olive); text-indent: .09em;
  text-align: center; margin-block-start: var(--sp-s);
}
.archive-note {
  max-inline-size: var(--measure); margin-inline: auto;
  font-size: var(--f-gloss); line-height: 1.6; color: var(--olive);
  font-style: italic; text-align: center;
}

/* ── 18. A PIECE ───────────────────────────────────────────────────────────
   Long-form reading at the site's measure. The subheads inside a piece are the
   only place a WordPress <h2> survived the migration, and they are set as the
   titling face at label size — a heading INSIDE a piece must not compete with
   the piece's own title. */
.piece-head { text-align: center; margin-block-end: var(--sp-xl); }
.piece-title {
  font-family: var(--face-titling);
  font-size: var(--f-lead); line-height: 1.08; letter-spacing: -.01em;
  font-weight: 400; text-wrap: balance;
  margin-block: var(--sp-s) var(--sp-m);
}
.piece-meta {
  font-family: var(--face-titling);
  text-transform: uppercase; letter-spacing: .18em;
  font-size: var(--f-label); color: var(--olive); text-indent: .09em;
}
.piece-body { max-inline-size: var(--measure); margin-inline: auto; }
.piece-body > p + p { margin-block-start: var(--sp-m); }
.piece-body h2 {
  font-family: var(--face-titling);
  text-transform: uppercase; letter-spacing: .18em;
  font-size: var(--f-label); font-weight: 400; color: var(--olive);
  text-indent: .09em;
  margin-block: var(--sp-xl) var(--sp-m);
}
.piece-body h2:first-child { margin-block-start: 0; }
.piece-body blockquote {
  font-size: var(--f-specimen); font-style: italic; line-height: 1.5;
  border-inline-start: 1px solid var(--olive);
  padding-inline-start: var(--sp-m);
  margin-block: var(--sp-l);
}
.piece-body blockquote p + p { margin-block-start: var(--sp-s); }
/* The asterism the original set between movements. An <hr> is a real thematic
   break for assistive tech; the glyph is decoration hung on it. */
.piece-body hr {
  border: 0; text-align: center; margin-block: var(--sp-xl);
  color: var(--olive);
}
.piece-body hr::before {
  content: "✸"; font-size: var(--f-body-sm); letter-spacing: .4em; text-indent: .4em;
}

/* The foot of a piece: where it came from, and where to go next. */
.piece-foot { max-inline-size: var(--measure); margin-inline: auto; text-align: center; }
.piece-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-m);
  margin-block-start: var(--sp-l);
  font-family: var(--face-titling);
  text-transform: uppercase; letter-spacing: .16em;
  font-size: var(--f-label); text-indent: .08em;
}
.piece-nav a { text-decoration-color: var(--rule-soft); }
.piece-nav a:hover { text-decoration-color: var(--ink); }   /* same idiom as .onward */
.piece-nav .to-prev { margin-inline-end: auto; text-align: start; }
.piece-nav .to-next { margin-inline-start: auto; text-align: end; }
.piece-nav .to-index { flex-basis: 100%; order: 3; }
@media (min-width: 40rem) { .piece-nav .to-index { flex-basis: auto; order: 0; } }

/* ── 19. PROVENANCE ────────────────────────────────────────────────────────
   ⛔ THE SWITCH. Four postures for how openly a page carries its own making
      are all present in the markup of every piece; `data-prov` on <html>
      selects which is shown. To change the site's posture, change that one
      attribute — build/build.py writes it from a single constant.

        a  the method essay is linked, and a quiet colophon sits at the foot
        b  the method essay is linked, and the pieces carry nothing at all
        c  stated above the piece, before it is read
        d  one line in the site footer, nothing else

      Default-hidden and switched ON, never the reverse: an engine that fails
      to match the attribute selector shows nothing, which is the posture that
      cannot mislead. */
.prov-head, .prov-foot, .prov-site { display: none; }
[data-prov="a"] .prov-foot { display: block; }
[data-prov="c"] .prov-head { display: block; }
[data-prov="d"] .prov-site { display: block; }

.prov-foot {
  max-inline-size: var(--measure); margin-inline: auto;
  margin-block-start: var(--sp-l);
  padding-block-start: var(--sp-m);
  border-block-start: 1px solid var(--rule-soft);
  font-size: var(--f-fine); line-height: 1.65; color: var(--olive);
  text-align: start;
}
.prov-head {
  max-inline-size: var(--measure); margin-inline: auto;
  margin-block-end: var(--sp-xl);
  padding: var(--sp-m);
  border: 1px solid var(--rule-soft);
  font-size: var(--f-gloss); line-height: 1.6; color: var(--ink);
  text-align: start;
}
.prov-site { font-size: var(--f-fine); color: var(--olive); }

/* ── 20. THE METHOD ESSAY ──────────────────────────────────────────────────
   The one page that argues the site's own case. It is set at the same measure
   as a piece, with one difference: a standfirst, ruled off, which no other
   page carries — because this is the only page whose claim needs stating
   before it is argued. */
.standfirst {
  max-inline-size: var(--measure); margin-inline: auto;
  font-size: var(--f-lede); line-height: 1.45; font-style: italic;
  text-align: center; text-wrap: balance;
  padding-block-end: var(--sp-l);
  margin-block-end: var(--sp-l);
  border-block-end: 1px solid var(--rule-soft);
}
.essay { max-inline-size: var(--measure); margin-inline: auto; }
.essay > p + p { margin-block-start: var(--sp-m); }
.essay h2 {
  font-family: var(--face-titling);
  text-transform: uppercase; letter-spacing: .18em;
  font-size: var(--f-label); font-weight: 400; color: var(--olive);
  text-indent: .09em;
  margin-block: var(--sp-xl) var(--sp-m);
}
.essay blockquote {
  font-size: var(--f-specimen); font-style: italic; line-height: 1.5;
  border-inline-start: 1px solid var(--olive);
  padding-inline-start: var(--sp-m);
  margin-block: var(--sp-l);
}

/* ── 21. THE POSTURE COMPARISON ────────────────────────────────────────────
   A working page, not a finished one: it exists so a decision can be made by
   looking rather than by imagining. Delete it, and §21, once the posture is
   chosen — build/build.py has a POSTURE constant and this page has served its
   purpose the moment that constant is set deliberately. */
.postures { display: grid; gap: var(--sp-l); margin-block-start: var(--sp-l); }
@media (min-width: 44rem) { .postures { grid-template-columns: 1fr 1fr; } }
.posture {
  border: 1px solid var(--rule-soft);
  padding: var(--sp-m);
}
.posture h3 {
  font-family: var(--face-titling);
  text-transform: uppercase; letter-spacing: .16em;
  font-size: var(--f-label); font-weight: 400; color: var(--olive);
  text-indent: .08em;
  margin-block-end: var(--sp-s);
}
.posture p { font-size: var(--f-gloss); line-height: 1.6; }
.posture .see { display: block; margin-block-start: var(--sp-m); font-size: var(--f-fine); }
.posture--live { border-color: var(--olive); }
.posture--live h3::after { content: " — set now"; color: var(--ink); }

/* ── 22. UTILITY ───────────────────────────────────────────────────────────
   One class, used where a marker must be legible to a screen reader and absent
   to the eye. clip-path, not clip: `clip` is deprecated and `display:none`
   would remove it from the accessibility tree, which is the whole point of it. */
.u-sr {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The strip at the head of a posture sample, so it is never mistaken for the
   real page. Part of §21 and deleted with it. */
.posture-strip {
  max-inline-size: var(--leaf-max);
  margin-inline: auto;
  margin-block-start: var(--sp-m);
  padding: var(--sp-s) var(--sp-m);
  background: var(--ink); color: var(--parchment);
  font-family: var(--face-titling);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: var(--f-label); text-indent: .07em;
  text-align: center;
}
.posture-strip a { color: var(--parchment); text-decoration-color: var(--gold); }
.u-nowrap { white-space: nowrap; }

/* The subtitle every migrated piece carries, lifted out of the body by
   build/build.py. Godlore sets one line ("The Life of Saint Zoe of Caesarea");
   Scripture sets two, the second naming the appointed readings. Olive italic,
   never gold — see the colour law. */
.piece-attrib {
  font-style: italic; color: var(--olive);
  font-size: var(--f-body-sm); line-height: 1.4;
  max-inline-size: var(--measure); margin-inline: auto;
  text-wrap: balance;
}
.piece-readings {
  font-family: var(--face-titling);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: var(--f-fine); color: var(--olive); text-indent: .07em;
  line-height: 1.7;
  max-inline-size: var(--measure); margin-inline: auto;
  margin-block-start: var(--sp-s);
}

/* The onward link — the one piece of furniture the landing page did not need
   when nothing on it led anywhere. Set as the titling face at label size so it
   reads as a rubric rather than as body text with a link in it, and centred so
   it cannot be mistaken for the last line of the paragraph above. */
.onward {
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: var(--f-label);
  text-indent: .09em;
  text-align: center;
  margin-block-start: var(--sp-l);
}
.onward a { text-decoration-color: var(--rule-soft); }
.onward a:hover { text-decoration-color: var(--ink); }

/* ── 23. THE V2 LANDING — the mark alone ───────────────────────────────────
   ADDED 2026-08-05, when the v1 site moved wholesale to /v1/ and the apex was
   cleared back to its mark while v2 is written. This is the ONLY page that uses
   these rules; everything above is still what /v1/ is set in.

   No frame. §3's ruled leaf is the furniture of a page that has text on it —
   drawn around a mark on an otherwise empty field it reads as a bookplate, not
   as an incipit. The mark is left to hold the field on its own.

   The seal is set far larger here than the clamp in §4 (which sizes it as an
   ornament above a title block). It is the whole page now, so it is allowed to be.

   ✅ This page is EXEMPT from §1's parchment hard-coupling. It does not use
   seal-320.png. It uses seal-620/1240.png, cut from the 4000px original by
   build/seal-from-original.mjs with the alpha channel intact, so the ground
   behind it can be any colour without a cream square appearing. §1's warning
   still binds everywhere else — /v1/ and §4 are both still on the opaque file. */
.landing {
  /* ONE KNOB, and now the only one — the mark is a single square image.

     The seal is square, so this is nearly the whole height of the page's content
     and the vh ceiling is what keeps a logo-only page from scrolling on a short
     laptop or a phone in landscape. vh deliberately, NOT svh: this is a custom property,
     so on an engine that does not know svh the substitution fails, inline-size
     falls back to auto, and the image lands at its intrinsic 620px regardless of
     the viewport. vh is safe everywhere.

     ⛔ 620 is also the pixel width of seal-620.png. Raising this ceiling without
     re-cutting the assets puts the page back to upscaling, which is the fault
     this replaced — the sizes live in build/seal-from-original.mjs.

     74vh, not 78, since the production line joined the page: the mark plus that
     line plus the block padding all have to clear the viewport, or a page whose
     whole point is to sit still starts scrolling. */
  --mark: min(clamp(260px, 62vw, 620px), 74vh);

  min-block-size: 100vh;
  min-block-size: 100svh;   /* small-viewport unit, so a phone's collapsing
                               toolbar cannot push the mark off-centre */
  display: grid;
  /* Two rows, NOT place-content:center. The mark centres in the space that is
     left over; the credit is pinned to the bottom of the field. Centring both
     together would float the credit up under the seal and it would read as a
     caption on the mark rather than as a line at the foot of the page. */
  grid-template-rows: 1fr auto;
  justify-items: center;
  padding-block: var(--sp-xl);
}
/* margin-block-end unsets §4's var(--sp-l), which sized the seal as an ornament
   above a title block. There is nothing directly below it now, so that margin
   would just push the mark off centre by a rem. */
.landing .seal { inline-size: var(--mark); margin-block-end: 0; }
.landing .seal-mark { align-self: center; line-height: 0; }  /* no strut under the image */

/* The cover opens (2026-08-09): the seal is now the one link on the page, into
   /leaf/ — the inner front page. Its only content is the image, so there is no
   underline to manage; keyboard focus gets §2's currentColor outline. */
.seal-gate { display: inline-block; line-height: 0; }

/* Very small print, and olive because it has to be: olive on parchment is 4.91:1
   and still AA at this size, where gold would be 1.84:1 and is forbidden as body
   text by the colour law in §1. Uppercase titling face at .24em, per the rule
   that this face is never set lowercase.
   text-indent is HALF the tracking, not all of it — tracking is added after the
   final glyph too, so centred tracked text sits half a unit left of true centre
   (the same compensation as .tagline in §4). */
.landing .production {
  align-self: end;
  font-family: var(--face-titling);
  text-transform: uppercase;
  letter-spacing: .24em;
  text-indent: .12em;
  font-size: .6875rem;
  line-height: 1.6;
  color: var(--olive);
  text-align: center;
}

/* ── 24. THE LEAF — the inner front page ───────────────────────────────────
   ADDED 2026-08-09, when the apex became a cover that opens: the seal alone,
   linking in. /leaf/ is the page it opens onto — the v1 landing's structure
   remade by build/daily.py with fresh content: the incipit, the day's
   reading, Book Three, the method. Everything on it is §2–§22 furniture
   except what follows.

   The incipit seal does two jobs now — ornament AND wordmark. It sets
   "THE GREATER HORIZON" across its own band and the h1 wraps it with the
   site's name as its alt, so it is sized between §4's ornament clamp and the
   cover's full-field --mark. Like the cover it is seal-620/1240, cut with the
   alpha channel intact — EXEMPT from §1's parchment hard-coupling, which
   still binds §4's seal-320 and all of /v1/. */
.seal-mark { line-height: 0; }            /* no strut under the image */
.seal--titular {
  inline-size: clamp(200px, 44vw, 300px);
  margin-block-end: 0;                    /* .tagline's own margin does the spacing */
}

/* The day's headline on the leaf is a link — the quietest underline the site
   has, so it reads as a title first. Gold takes no part; see the colour law. */
.lead-headline a { text-decoration-color: var(--rule-soft); }
.lead-headline a:hover { text-decoration-color: var(--ink); }

/* §14 hides .seal under forced colours because seal-320's opaque cream field
   would sit as a bright block on black — but the cover's and the leaf's seals
   are transparent cuts, AND each is its page's only <h1> content: display:none
   would empty the heading for assistive tech. Keep them drawn; the artwork's
   own olive and gold stand on the user's canvas. */
@media (forced-colors: active) {
  .landing .seal, .seal--titular { display: block; }
}