/* Selawik, shared with Ancestral Voices. Self-hosted; SIL OFL licence
   travels with the fonts in /static/fonts/LICENSE-selawik.txt. */
@font-face {
  font-family: "Selawik";
  src: url("/static/fonts/selawik-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Selawik";
  src: url("/static/fonts/selawik-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Selawik";
  src: url("/static/fonts/selawik-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Genuine Semilight outlines from Microsoft's Selawik 1.01 release. */
@font-face {
  font-family: "Selawik";
  src: url("/static/fonts/selawik-semilight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Archetypal Voices headings; SIL OFL in LICENSE-source-serif-4.txt. */
@font-face {
  font-family: "Source Serif 4 Display";
  src: url("/static/fonts/SourceSerif4Display-Black.ttf.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Approved Ysabeau Office body face; OFL and provenance alongside assets. */
@font-face {
  font-family: "Ysabeau Office";
  src: url("/static/fonts/ysabeau-office/YsabeauOffice-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ysabeau Office";
  src: url("/static/fonts/ysabeau-office/YsabeauOffice-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Design tokens — docs/05_design_language.md is the contract.
   Every colour pair's contrast ratio is annotated; re-verified by
   scripts/check.py (both themes, AA floor). */
:root {
  /* surfaces */
  --paper:      #f8f4ea;   /* AV Stone page ground */
  --paper-warm: #f2e7d7;   /* inset panels, pull quotes — goes INWARD */
  --header:     #e6a817;   /* saffron top and closing strip */
  --header-ink: #23201c;   /* 7.71:1 on header */
  --header-ink-soft: #493611; /* 5.49:1 on header */
  --leaf:       #f1ede4;   /* AV card stone: 70% white / 30% #cfc2a6 */
  /* ink */
  --ink:        #23201c;   /* body — 14.77:1 on the Stone page base */
  --ink-soft:   #554e45;   /* standfirsts, subtitles — 7.4:1 */
  --ink-faint:  #655b50;   /* captions/meta — >=4.60:1 on deepest Stone + 4% saffron breath */
  /* accent */
  --accent:     #00695b;   /* same teal, darkened for Stone: >=4.59:1 on its
                              deepest stop plus the full 4% saffron breath.
                              Links, rules and marks — NEVER a label. */
  --on-accent:  #ffffff;
  /* lines */
  --rule:       #ddd0bc;
  --frame:      #d9cbb4;
  /* Archetypal Voices Stone: page Lamp from light.css and card-lamp-stone-01
     from theme.css. Geometry/stops are retained; ink tokens above account
     for the website's lighter teal and small metadata text. */
  --stone-hi: #ffffff;
  --stone-lo: #cfc2a6;
  --stone-page-lift: color-mix(in srgb, var(--paper) 35%, var(--stone-hi));
  --stone-page-deep: color-mix(in srgb, var(--paper) 58%, var(--stone-lo));
  --stone-page-half: color-mix(in srgb, var(--paper) 80%, var(--stone-lo));
  /* Owner 2026-10-26: the lamp's far-corner breath is a touch of saffron,
     not the teal ported from AV. Tune by eye. */
  --stone-breath: color-mix(in srgb, var(--header) 4%, transparent);
  --stone-page-image:
    radial-gradient(ellipse 58% 48% at 92% 96%, var(--stone-breath), transparent 72%),
    radial-gradient(ellipse 96% 78% at 20% 8%,
      var(--stone-page-lift) 0%, var(--paper) 44%, var(--stone-page-half) 76%, var(--stone-page-deep) 100%);
  --stone-card-lift: #fffdf7;
  --stone-card-mid: color-mix(in srgb, #ffffff 78%, var(--stone-lo));
  --stone-card-half: color-mix(in srgb, #ffffff 62%, var(--stone-lo));
  --stone-card-deep: color-mix(in srgb, #ffffff 48%, var(--stone-lo));
  --stone-card-image:
    radial-gradient(ellipse 58% 48% at 92% 96%, var(--stone-breath), transparent 72%),
    radial-gradient(ellipse 96% 78% at 20% 8%,
      var(--stone-card-lift) 0%, var(--stone-card-mid) 44%, var(--stone-card-half) 76%, var(--stone-card-deep) 100%);
  /* layout */
  --measure:      34rem;
  --measure-wide: 60rem;
  --measure-fig:  64rem;
  --measure-shell: 72rem;
  --radius:    6px;
  --radius-sm: 2px;
  --radius-pill: 999px;
  /* A quiet lamp for outline/neutral pills: white light only,
     never a dark stop. Filled teal pills use the broader wash below. */
  --pill-sheen: linear-gradient(145deg, rgba(255, 255, 255, .08) 0%,
                       rgba(255, 255, 255, .025) 42%, transparent 78%);
  /* Filled teal pills carry a broader light wash: >=4.67:1 white text
     even at the brightest stop. Outline pills retain their quieter sheen. */
  --pill-teal-sheen: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%,
                       rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .015) 100%);
  /* Directional, ink-tinted — the sheet and images are lit from the
     top-left, as a leaf tipped into a book would be. */
  --card-shadow: 3px 5px 12px rgba(40, 35, 25, .10);
  /* Book-spread gutter (layout.css): shade and page-curve highlight as RGB
     triples, so one gradient serves both themes. --gutter-k scales every
     shade alpha; tune by eye, approved light value 1. */
  --gutter-shade: 90, 66, 30;
  --gutter-hi: 255, 255, 255;
  --gutter-hi-a: .28;
  --gutter-k: 1;
  /* type */
  --font-heading: "Source Serif 4 Display", var(--font-serif);
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
                "Book Antiqua", Georgia, serif;
  --font-sans:  "Selawik", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, sans-serif;
  /* Bounded rem + viewport scales preserve user font preferences and zoom.
     At a 16px browser default: body 17–22px, metadata 14–16px. */
  --text-sm:   clamp(.875rem, .8125rem + .1vw, 1rem);
  --text-base: clamp(1.0625rem, 1rem + .25vw, 1.375rem);
  --text-card: clamp(1rem, .95rem + .15vw, 1.1875rem);
  --text-interface: clamp(1rem, .94rem + .1vw, 1.125rem);
  --text-lg:   1.09em;     /* standfirst */
  --text-h3:   clamp(1.125rem, 1rem + .3vw, 1.5rem);
  --text-h2:   clamp(1.375rem, 1.15rem + .65vw, 2rem);
  --text-h1:   clamp(2rem, 1.4rem + 2vw, 3.75rem);
  /* spacing */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.5rem; --space-6: 2rem;
  --space-section: clamp(2.8rem, 7vw, 3.9rem);
  --space-figure:  clamp(2.1rem, 5.5vw, 3.1rem);
  --space-page:    clamp(3rem, 10vw, 6rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16150f;  --paper-warm: #1e1c15;
    --header: #e6a817; /* same saturated saffron in both themes */
    --header-ink: #23201c; /* 7.71:1 on header */
    --header-ink-soft: #493611; /* 5.49:1 on header */
    --ink: #ebe3d6;    --ink-soft: #b3aa9c;
    --ink-faint: #9e9383; /* >=4.57:1 on lifted page + full 4% saffron breath */
    --accent: #7fc4c0; --on-accent: #10201e;
    --rule: #35322a;   --frame: #3a362c;
    --leaf: #201e16;
    --stone-hi: #36322a;
    --stone-lo: #000000;
    --stone-page-lift: color-mix(in srgb, var(--paper) 50%, var(--stone-hi));
    --stone-page-deep: color-mix(in srgb, var(--paper) 66%, var(--stone-lo));
    --stone-page-half: color-mix(in srgb, var(--paper) 83%, var(--stone-lo));
    /* AV dark card-tabs-body: broader lamp, no added card breath. */
    --stone-card-image: radial-gradient(ellipse 200% 140% at 0% 0%,
      color-mix(in srgb, var(--leaf) 50%, var(--stone-hi)) 0%,
      var(--leaf) 44%,
      color-mix(in srgb, var(--leaf) 83%, var(--stone-lo)) 76%,
      color-mix(in srgb, var(--leaf) 66%, var(--stone-lo)) 100%);
    --card-shadow: 3px 5px 14px rgba(0, 0, 0, .38);
    --gutter-shade: 0, 0, 0;
    --gutter-hi-a: .035;
    --gutter-k: 2.5;
  }
}
/* Reset + typography. Docs/05 §2. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.66;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* AV's viewport-pinned Lamp: background-attachment:fixed is unreliable on
   iOS. Keep this below content without creating a body stacking context. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--stone-page-image);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}
h1 .sub {
  display: block;
  font-family: var(--font-serif);
  font-size: .45em;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: .9rem;
  letter-spacing: 0;
}
h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.01em;
  margin: var(--space-section) 0 1.15rem;
}
h2::before {
  content: "";
  display: block;
  width: 2.1rem;
  height: 2px;
  background: var(--accent);
  opacity: .75;
  margin-bottom: 1.1rem;
}
h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
}
h3 { font-size: 1.05em; margin: var(--space-6) 0 var(--space-3); }

p { margin: 0 0 1.32em; }
ul, ol { padding-left: 1.25rem; margin: 0 0 1.32em; }
li { margin-bottom: .7em; }

/* No underline at rest; it returns on hover and on keyboard focus.
   KNOWN WCAG 1.4.1 DEPARTURE, Reviewer's decision 2026-09-14, recorded in
   docs/13: the accent is 2.45:1 against body ink in light and 1.56:1 in dark,
   where 3:1 is required for colour-alone differentiation. No colour at any hue
   fixes it without pushing accent text on --paper-warm below 4.5:1, which is
   the worse failure. Do not "fix" this by restoring the underline — reopen the
   decision instead. */
a {
  color: var(--accent);
  text-underline-offset: .17em;
  text-decoration-thickness: 1px;
  text-decoration-line: none;
}
a:hover,
a:focus-visible { text-decoration-line: underline; }

blockquote {
  margin: var(--space-5) 0;
  padding-left: 1.6rem;
  border-left: 3px solid var(--rule);
  font-style: italic;
  color: var(--ink-soft);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-section) 0;
}

/* kicker — the folio line (docs/05 §2). Replaced an uppercase,
   letter-spaced sans label in accent (Reviewer, 2026-09-12: it reads as
   a generated layout; AV retired its own for the same reason on
   2026-09-07). The accent survives as the leading dash — accent marks,
   it never sets a label. Flex, so ::after fills whatever column it is
   given. */
.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.kicker::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 2px;
  background: var(--accent);
  opacity: .75;          /* matches the h2 stub, so the two read as kin */
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.kicker--bare::after { display: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); z-index: 10; }

/* Button — docs/06 #11, the one button system. Specificity note:
   .button--primary (0,1,0) beats the bare `a` rule (0,0,1), so the
   colour here actually wins rather than merely being declared.
   No per-component reduced-motion rule: the global reset at the foot
   of this file already kills every transition. */
/* One silhouette and directional light for every pill surface. Component
   states change background-color only, preserving this independent layer. */
.button, .tag-list a, .section-nav a, .ux-type, .page-edit {
  border-radius: var(--radius-pill);
  background-image: var(--pill-sheen);
}
.button {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: .02em;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--accent);
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.button--primary { background-color: var(--accent); color: var(--on-accent); }
.button--quiet   { background-color: transparent;   color: var(--accent); }
.button--primary:hover { background-color: transparent; color: var(--accent); }
.button--quiet:hover   { background-color: var(--accent); color: var(--on-accent); }
.button--primary,
.button--quiet:hover { background-image: var(--pill-teal-sheen); }
.button--primary:hover { background-image: var(--pill-sheen); }
.app-open { margin: var(--space-section) 0 0; }
.masthead-action { margin: var(--space-4) 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  :root { --paper: #fff; --ink: #000; --ink-soft: #333; --ink-faint: #555; --rule: #ccc; }
  body { font-size: 10.5pt; }
  body::before { display: none; }
  img { box-shadow: none; }
  h2 { page-break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .site-header, .site-footer, .hero { display: none; }
}

/* Approved body typography; headings and interface families stay explicit. */
main { font-family: "Ysabeau Office", var(--font-sans); font-weight: 300; }
main .kicker, main .button, main .ux-type, main .tag-list, main .section-nav,
main .ux-more, main .ux-links, main .ux-actions {
  font-family: var(--font-sans); font-weight: 300;
}
/* Page shell + measures. Docs/05 §4. */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.wrap-wide { max-width: var(--measure-wide); }

/* Inner pages keep their masthead and plate together, with a raised
   leaf below. Prose retains the reading measure inside the wider leaf. */
.page-shell {
  max-width: var(--measure-shell);
}
.page-header { margin-bottom: 44px; }
.page-header .masthead { max-width: var(--measure); margin: 0 auto; }
.page-header figure.plate { width: min(100%, 320px); margin-bottom: 0; }
.page-prose { max-width: var(--measure); margin-inline: auto; }
.page-prose > :first-child { margin-top: 0; }
.page-prose > :last-child { margin-bottom: 0; }

/* Editorial sections: complete thoughts read across each row, then down.
   Default informational-page layout; no fixed heights or flowing columns. */
.section-intro { max-width: var(--measure-wide); margin-bottom: var(--space-5); }
.section-intro > :last-child { margin-bottom: 0; }
.section-cards {
  display: grid;
  gap: var(--space-5);
  max-width: calc(var(--measure) + 4rem);
  margin-inline: auto;
}
.section-cards > .leaf { width: 100%; min-width: 0; margin: 0; }
.section-cards > .leaf + .leaf { margin-top: 0; }
.section-cards .leaf-body > :last-child { margin-bottom: 0; }
.section-media { margin-top: var(--space-section); }
.section-media > h2 { margin-top: 0; }
.link-cards--panels > .link-card { padding: var(--space-6); }
.link-cards.section-cards { margin-inline: auto; }
/* Continuous essays and transactional lists retain one reading path, with
   their outer card fitted to the text instead of a much wider empty sheet. */
.leaf.reading-card,
.reading-stack { max-width: calc(var(--measure) + 4rem); margin-inline: auto; }
/* A lone card is an intentionally centred reading surface, not an empty
   half-grid. Odd final cards use the same treatment. Include its padding. */
.section-cards > .leaf:last-child:nth-child(odd) {
  max-width: calc(var(--measure) + 4rem);
  justify-self: center;
}
@media (min-width: 960px) {
  .section-cards { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-cards .leaf h2 { font-size: calc(var(--text-h2) - 2px); }
  .section-cards .leaf { font-size: calc(var(--text-base) - 2px); }
  .section-cards > .leaf:only-child { grid-column: 1 / -1; }
}
@media print { .section-cards { display: block; } }

/* Book spreads (approved by eye 2026-10-26: soft gutter, one lamp per
   spread; docs/briefs/2026-10-26-book-spreads.md). From 960px each pair of
   section cards is one open book: odd = left page, even = right. They meet
   at the spine with no column gap; the row gap is the turn of the page.
   The lamp is drawn ONCE across a spread: each page paints the shared
   --stone-card-image at 200% width, anchored to its own half.
   Scoped to `> .leaf`: link-card lists also carry .section-cards.
   A sole card (:only-child) keeps the centred reading card above, no gutter.
   Specificity: the lone-left-page rule is (0,5,0) and beats the unscoped
   centring rule `.section-cards > .leaf:last-child:nth-child(odd)` (0,4,0)
   by specificity, not source order. */
@media screen and (min-width: 960px) {
  .section-cards { column-gap: 0; row-gap: clamp(2rem, 4vw, 3.5rem); }
  .section-cards > .leaf:not(:only-child) { position: relative; background-size: 200% 100%; }
  .section-cards > .leaf:nth-child(odd):not(:only-child) {
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background-position: 0 0;
  }
  .section-cards > .leaf:nth-child(even) {
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background-position: 100% 0;
    box-shadow: var(--card-shadow), inset 1px 0 0 rgba(var(--gutter-shade), calc(.16 * var(--gutter-k)));
  }
  .section-cards > .leaf:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1;
    max-width: none;
    justify-self: stretch;
  }
  .section-cards > .leaf:nth-child(odd):not(:only-child)::after,
  .section-cards > .leaf:nth-child(even)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 72px;
    pointer-events: none;
  }
  .section-cards > .leaf:nth-child(odd):not(:only-child)::after {
    right: 0;
    background: linear-gradient(to left,
      rgba(var(--gutter-shade), calc(.17 * var(--gutter-k))),
      rgba(var(--gutter-shade), calc(.07 * var(--gutter-k))) 22%,
      rgba(var(--gutter-shade), 0));
  }
  .section-cards > .leaf:nth-child(even)::before {
    left: 0;
    background: linear-gradient(to right,
      rgba(var(--gutter-shade), calc(.21 * var(--gutter-k))),
      rgba(var(--gutter-shade), calc(.06 * var(--gutter-k))) 18%,
      rgba(var(--gutter-hi), var(--gutter-hi-a)) 34%,
      rgba(var(--gutter-hi), 0));
  }
  /* Text clears the darkest band of the gutter. Tune by eye. */
  .section-cards > .leaf:nth-child(odd):not(:only-child) > .leaf-body { padding-right: 3rem; }
  .section-cards > .leaf:nth-child(even) > .leaf-body { padding-left: 3rem; }
  /* Page-turn arrow: the right page's bottom-right corner turns to the next
     spread. The body keeps a clear strip so the last line never sits under
     it. Tune by eye. */
  .section-cards > .leaf.has-turn > .leaf-body { padding-bottom: calc(var(--space-6) + 2.5rem); }
  .leaf-turn {
    place-items: center;
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Softest grey that keeps the 3:1 icon floor (WCAG 1.4.11) on the
       deepest stone in both themes. */
    color: color-mix(in srgb, var(--ink-faint) 76%, transparent);
  }
  .leaf-turn svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .leaf-turn:hover { background: color-mix(in srgb, var(--ink-faint) 12%, transparent); }
  .section-cards > .leaf[id] { scroll-margin-top: var(--space-4); }
}
/* Pages stack below 960px and in print, so there is nothing to turn.
   The (0,3,0) show rule beats this (0,1,0) hide by specificity. */
.leaf-turn { display: none; }
@media screen and (min-width: 960px) { .section-cards > .leaf > .leaf-turn { display: grid; } }

.page-columns { display: grid; gap: var(--space-5); align-items: start; }
.page-columns > .leaf { width: 100%; min-width: 0; }
/* The side column's cards stack inside ONE grid child. Without the wrapper a
   third child wraps into row 2 column 1 and lands under the prose — which is
   exactly what shipped to review on 2026-09-15. min-width:0 for the same
   reason as the leaf above it: a grid item's default min-width is auto, so
   long content pushes the track wider than its share and the card overruns. */
.page-columns > .page-aside {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  width: 100%;
  min-width: 0;
}
/* min-width:0 matters MORE here than it looks. These cards used to be direct
   children of .page-columns and took their min-width:0 from the rule above;
   nesting them in the wrapper put them out of its reach, so they fell back to
   a grid item's default min-width:auto and any wide content pushed the track
   past the column. */
.page-aside > .leaf { max-width: none; margin: 0; min-width: 0; width: 100%; }

/* Below the compact-page breakpoint (52rem; --measure-fig is now 64rem) the homepage leaf runs
   edge to edge because it sits directly under <main>, outside .wrap.
   Inner pages nest theirs inside .wrap's 1.5rem gutter; this cancels that
   gutter so every page reads the same on a phone. 1.5rem is .wrap's
   padding above; 3rem is both sides of it. Specificity (0,3,0) beats
   .leaf (0,1,0: margin: 0 auto, max-width) and .page-columns > .leaf
   (0,2,0: width: 100%) outright, not by source order. Media queries
   cannot read custom properties, hence the literal 52rem. */
@media (max-width: 52rem) {
  .wrap.page-shell .leaf {
    width: calc(100% + 3rem);
    max-width: none;
    margin-inline: -1.5rem;
  }
}

@media (min-width: 840px) {
  .page-header.has-plate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 3.5rem;
    align-items: center;
  }
  .page-header.has-plate .masthead { margin: 0; }
  .page-header.has-plate .standfirst { max-width: var(--measure); }
  .page-header.has-plate figure.plate { margin: 0; width: 100%; padding: 0 1rem; }
  .page-columns { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
  /* --even overrides the line above, which it must: both are (0,1,0), so this
     wins by SOURCE ORDER ALONE. Moving it above .page-columns silently
     restores 2fr/1fr on every even page with no error anywhere. The two
     ratios are not interchangeable: /homeopathy/'s second column is a compact
     list, /music/'s is link cards whose text track collapses at 1fr. */
  .page-columns--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The −2px step, so a narrower column still reads as prose. Origin:
   blocks.css:156, the homepage's half blocks — Reviewer, 2026-09-15: "that is
   part of the mutation which makes it work better". Deliberately OUTSIDE the
   840px query, matching blocks.css, which steps its blocks at every width.
   Three departures from the homepage's three lines, because a page column
   holds CARDS where the homepage's holds only prose:
     · p:not(.kicker) — .kicker is var(--text-sm), an absolute 0.795rem
       (base.css:166). A bare `p` rule drags it under its designed size. Do
       not "tidy" this back to `p`.
     · .link-card takes the step on the CONTAINER: .link-card h3 (1.05em) and
       .link-card-blurb (.92em) are em-relative (cards.css:41,45) and follow.
     · h3 is therefore not set at all; setting it would double-apply. */
.page-columns .leaf h2 { font-size: calc(var(--text-h2) - 2px); }
.page-columns .leaf p:not(.kicker),
.page-columns .leaf li { font-size: calc(var(--text-base) - 2px); }
.page-columns .link-card { font-size: calc(var(--text-base) - 2px); }

/* Literal, not --space-page: that token is fluid to 96px, so the air above
   the masthead was at its maximum on exactly the wide screens where it read as
   too much. Tuned by eye at 1265px, 2026-09-14 — see the brief, not here.
   The foot of the page keeps the fluid token; only the top was the problem. */
main {
  padding-top: 40px;
  padding-bottom: var(--space-page);
}

/* figure breakout — the signature move */
figure {
  width: min(calc(100vw - 3rem), var(--measure-fig));
  margin: var(--space-figure) 0;
  margin-left: 50%;
  transform: translateX(-50%);
}
figure img {
  border: 1px solid var(--frame);
  background: var(--paper);
  margin: 0 auto;
}
figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: var(--measure);
  margin: var(--space-3) auto 0;
}
/* Keep embedded figures on the raised sheet, including at 200% zoom. */
.page-prose figure {
  width: 100%;
  margin-inline: 0;
  transform: none;
}
@media (prefers-color-scheme: dark) {
  figure img {
    filter: brightness(.86) contrast(1.03);
  }
}

.hero { background: var(--paper-warm); }
.hero img {
  width: 100%;
  height: clamp(230px, 46vh, 520px);
  object-fit: cover;
  border: 0;
}

/* Etched plate — the image's wrapper carries the shared image lift so
   the PNG can retain its blend treatment without filtering the shadow. */
figure.plate {
  width: min(100%, 420px);            /* tune by eye */
  margin: var(--space-figure) auto;
  transform: none;
}
figure.plate .plate-image {
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
figure.plate img {
  width: 100%; height: auto;
  border: 0; border-radius: inherit; box-shadow: none;
  background: transparent;
  mix-blend-mode: multiply;
}
figure.plate--portrait img {
  mix-blend-mode: normal;
}
figure.plate--colour img {
  mix-blend-mode: normal;
}
@media (prefers-color-scheme: dark) {
  figure.plate img {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
  }
  figure.plate--portrait img {
    filter: none;
    mix-blend-mode: normal;
  }
  figure.plate--colour img {
    filter: none;
    mix-blend-mode: normal;
  }
}

@media print {
  figure.plate .plate-image { box-shadow: none; }
}
/* Site header + footer. Docs/06 #2, #3.
   Portrait phones use a native disclosure; larger/landscape screens
   retain wrapping navigation. Usable at 320px and 200% zoom, zero JS. */
.site-header {
  /* Owner preference: white menu ink; footer keeps the root dark inks. */
  --header-ink: #ffffff;
  --header-ink-soft: #ffffff;
  --header-burnt: #95620d;
  position: relative;
  isolation: isolate;
  z-index: 30;
  background: var(--header);
  border-bottom: 1px solid color-mix(in srgb, var(--header-ink) 35%, transparent);
  padding: var(--space-4) 0;
}
/* Calculator eyebrow-fade-01, mirrored: burnt yellow at the menu end,
   airbrushed diagonally toward the original saffron identity end. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 0 20%;
  z-index: -1;
  pointer-events: none;
  background: var(--header-burnt);
  opacity: .8;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 120px 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 160% at 100% 0, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 160% at 100% 0, #000 35%, transparent 100%);
}
/* Owner revision 2026-10-25: white menu ink on saffron in both themes. */
.site-header .wrap {
  max-width: clamp(72rem, 92vw, 104rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, .85rem + .4vw, 1.5rem);
  font-weight: 600;
  color: var(--header-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-logo {
  width: 2.75rem;
  height: auto;
  flex: none;
  box-shadow: none;
  filter: brightness(0) invert(1);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.site-nav li { margin: 0; }
.site-nav a {
  font-family: var(--font-sans);
  font-size: clamp(.92rem, .7rem + .3vw, 1.2rem);
  letter-spacing: .02em;
  color: var(--header-ink-soft);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--header-ink); text-decoration: underline; }
.site-nav a[aria-current] {
  color: var(--header-ink);
  border-bottom: 2px solid var(--header-ink);
  padding-bottom: 2px;
}
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--header-ink); }
.site-menu { display: none; }

@media (max-width: 58rem) {
  .site-header::before { display: none; }
  .site-header .wrap { position: relative; gap: var(--space-2); }
  .site-nav-desktop { display: none; }
  .site-menu { display: block; margin-left: auto; }
  .site-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--header-ink) 40%, transparent);
    border-radius: var(--radius);
    color: var(--header-ink);
    cursor: pointer;
    list-style: none;
  }
  .site-menu > summary::-webkit-details-marker { display: none; }
  .site-menu > summary::marker { content: ""; }
  .site-menu > summary:hover { background: color-mix(in srgb, var(--header-ink) 10%, transparent); }
  .site-menu > summary:focus-visible { outline: 2px solid var(--header-ink); outline-offset: 3px; }
  .menu-icon, .menu-icon::before, .menu-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
  }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { position: absolute; content: ""; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  .site-menu[open] .menu-icon { background: transparent; }
  .site-menu[open] .menu-icon::before { top: 0; transform: rotate(45deg); }
  .site-menu[open] .menu-icon::after { top: 0; transform: rotate(-45deg); }
  .site-menu-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    padding: var(--space-2);
    background: var(--header);
    border: 1px solid color-mix(in srgb, var(--header-ink) 40%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
  }
  .site-menu-panel ul { display: block; }
  .site-menu-panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-interface);
    border-radius: var(--radius-sm);
  }
  .site-menu-panel a:hover { background: color-mix(in srgb, var(--header-ink) 10%, transparent); }
  .site-menu-panel a[aria-current] { padding-bottom: var(--space-2); border-bottom: 0; background: color-mix(in srgb, var(--header-ink) 14%, transparent); }
}

/* Full-screen toggle, last in the bar. Revealed by back-to-top.js only where
   the Fullscreen API exists; the icon swaps with aria-pressed. */
.fullscreen-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--header-ink);
  opacity: .75;
  cursor: pointer;
}
.fullscreen-toggle[hidden] { display: none; }
.fullscreen-toggle:hover,
.fullscreen-toggle:focus-visible { opacity: 1; background: color-mix(in srgb, var(--header-ink) 10%, transparent); }
.fullscreen-toggle:focus-visible { outline: 2px solid var(--header-ink); outline-offset: 3px; }
.fullscreen-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-toggle .fs-exit,
.fullscreen-toggle[aria-pressed="true"] .fs-enter { display: none; }
.fullscreen-toggle[aria-pressed="true"] .fs-exit { display: block; }

/* Native disclosures preserve usable dropdowns without JavaScript. */
.site-nav-desktop { margin-left: auto; }
.site-nav-desktop > ul { gap: .25rem clamp(.25rem, .6vw, .9rem); }
.site-nav-desktop .nav-item { position: relative; display: flex; align-items: center; }
.site-nav-desktop .nav-item > a { display: flex; align-items: center; min-height: 44px; padding: .25rem .15rem; }
.nav-disclosure > summary {
  display: grid; place-items: center; width: 32px; height: 44px;
  color: var(--header-ink); cursor: pointer; list-style: none; border-radius: var(--radius-sm);
}
.nav-disclosure > summary::-webkit-details-marker { display: none; }
.nav-disclosure > summary::marker { content: ""; }
.nav-disclosure > summary::after {
  content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
.nav-disclosure[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.nav-disclosure > summary:hover { background: color-mix(in srgb, var(--header-ink) 10%, transparent); }
.site-nav-desktop .nav-submenu {
  display: block; position: absolute; top: 100%; left: 0; z-index: 20;
  width: max-content; min-width: 15rem; max-width: min(22rem, 85vw);
  max-height: min(32rem, 70vh); overflow-y: auto; padding: .5rem;
  background: var(--header); border: 1px solid color-mix(in srgb, var(--header-ink) 40%, transparent);
  border-radius: var(--radius); box-shadow: var(--card-shadow);
  scrollbar-width: thin; scrollbar-color: var(--header-ink-soft) transparent;
}
/* Trailing groups open toward the header's centre so their panels remain
   inside narrower desktop viewports as navigation type grows. */
.site-nav-desktop .nav-item:nth-last-child(-n+3) .nav-submenu { left: auto; right: 0; }
.nav-submenu::-webkit-scrollbar { width: 6px; }
.nav-submenu::-webkit-scrollbar-track { background: transparent; }
.nav-submenu::-webkit-scrollbar-thumb { background: var(--header-ink-soft); border-radius: 6px; }
.site-nav-desktop .nav-submenu a {
  display: flex; align-items: center; min-height: 44px; padding: .5rem .75rem;
  font-size: var(--text-interface); letter-spacing: 0; white-space: normal;
}
.site-nav-desktop .nav-submenu a:hover { background: color-mix(in srgb, var(--header-ink) 10%, transparent); }
@media (max-width: 58rem) {
  .site-menu-panel { max-height: 75vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--header-ink-soft) transparent; }
  .site-menu-panel .nav-submenu { margin: 0 0 .5rem .75rem; padding-left: .5rem; border-left: 1px solid color-mix(in srgb, var(--header-ink) 40%, transparent); }
  .site-menu-panel .nav-submenu a { font-size: var(--text-interface); }
}

/* Padding is literal, not --space-page: that token is the whitespace at the
   foot of a PAGE, and reusing it here put up to 96px under two lines of text.
   Tune-by-eye values, signed off 2026-09-14 — see
   docs/briefs/footer-and-tab-icon.md, not here. */
.site-footer {
  background: var(--header);
  border-top: 1px solid color-mix(in srgb, var(--header-ink) 35%, transparent);
  padding: 22px 0 27px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--header-ink-soft);
}
.site-footer .footer-line { margin: 0 0 10px; }
.site-footer .footer-links {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: center;
}
.site-footer .footer-links li { margin: 0; }
.site-footer .footer-app { display: inline-flex; align-items: center; gap: .45rem; }
/* The AV mark is a wide monogram (viewBox 1846x1179), never square. */
.site-footer .footer-app img {
  height: .95rem;
  width: auto;
  display: block;
  filter: brightness(0);
}
.site-footer .footer-legal { margin: 0; color: var(--header-ink-soft); }
.site-footer .wrap { max-width: var(--measure-shell); }
.site-footer a { color: var(--header-ink-soft); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--header-ink); }
@media (prefers-color-scheme: dark) {
  .site-footer .footer-app img { filter: brightness(0); }
}

/* Fixed public actions share a stack with the authenticated editor action.
   The editor's link is injected at the marker in page-actions.html. */
.page-actions {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}
.back-to-top {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--frame);
  border-radius: 50%;
  background: var(--leaf);
  color: var(--accent);
  box-shadow: var(--card-shadow);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}
.back-to-top[hidden] { display: none; }
.page-edit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .9rem;
  background-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--card-shadow);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-decoration: none;
}
.page-edit:hover { background-color: var(--ink); color: var(--on-accent); }

@media print {
  .page-actions { display: none; }
}
/* Article anatomy: masthead, standfirst, drop cap, pull quote, coda.
   Docs/06 #4–7, values from docs/05. */
.masthead { margin-bottom: var(--space-section); }
.standfirst {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.byline {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin-top: var(--space-3);
}

.lede::first-letter {
  font-family: var(--font-serif);
  float: left;
  font-size: 3.28em;
  line-height: .82;
  padding: .06em .09em 0 0;
  color: var(--accent);
  font-weight: 600;
}

.pull {
  padding: 1.5rem 1.6rem;
  background: var(--paper-warm);
  border-left: 3px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 1.02em;
  color: var(--ink-soft);
  margin: var(--space-5) 0;
}
.pull p:last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin-top: var(--space-3);
}

.note {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}

.coda {
  margin-top: var(--space-section);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.coda h2::before { display: none; }
.coda h2 { font-size: var(--text-interface); margin: 0 0 var(--space-4); }
/* Section-card sizing must not promote this quiet utility heading back to
   the editorial h2 scale when the coda lives in an article's final card. */
.section-cards .leaf .coda h2 { font-size: var(--text-interface); }
.reading {
  list-style: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-card);
}
.reading li {
  border-bottom: 1px solid var(--rule);
  padding: .52rem 0;
  margin: 0;
}
.reading .who { color: var(--ink-faint); }
.prevnext {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin-top: var(--space-6);
}
.article-footer {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--space-section);
}
/* Tag links for writing filters (docs/06 #9).
   Content index entries share the strand styles in blocks.css. */

.tag-list,
.section-nav {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.tag-list li, .section-nav li { margin: 0; }
.tag-list a, .section-nav a {
  display: inline-block;
  padding: .15rem .7rem;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  text-decoration: none;
}
.tag-list a:hover, .section-nav a:hover { border-color: var(--accent); color: var(--accent); }
.tag-list a[aria-current="true"],
.section-nav a[aria-current="page"] {
  background-color: var(--accent);
  background-image: var(--pill-teal-sheen);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Section pills sit under the masthead, above the leaf. */
.section-nav-wrap { margin: 0 0 var(--space-5); }
.section-nav--centred { justify-content: center; }

/* link-card — rich outward links (docs/06 #15): artwork, source kicker,
   title, blurb. Thumb column and play disc are tune-by-eye. */
.link-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.link-card {
  margin: 0;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  border-left: 1px solid var(--rule);
  padding-left: var(--space-4);
}
.link-card-media { display: block; }
.link-card-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--frame); }
.link-card h3 { margin: 0 0 .25rem; font-size: 1.05em; }
.link-card h3 a { color: var(--ink); text-decoration: none; }
.link-card h3 a:hover { color: var(--accent); }
.link-card .kicker { margin: 0 0 .2rem; }
.link-card-blurb { margin: 0; font-size: .92em; color: var(--ink-soft); }

/* Video: the poster spans the card at 16:9 with a play mark; the facade
   swaps it for an iframe of the same box. A video never sits in a list
   beside audio cards (Reviewer, 2026-09-14: the mix read wrong, the
   poster alone reads right), so there is no compact variant. */
.link-card--video { grid-template-columns: 1fr; }
.link-card--video .link-card-media { position: relative; }
.link-card--video .link-card-media img { aspect-ratio: 16 / 9; }
.link-card-play { position: absolute; inset: 0; display: grid; place-items: center; }
.link-card-play::before {
  content: ""; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: rgba(20, 18, 14, .72); border: 2px solid rgba(255, 255, 255, .9);
}
.link-card-play::after {
  content: ""; position: absolute; margin-left: .3rem;
  border-style: solid; border-width: .9rem 0 .9rem 1.5rem;
  border-color: transparent transparent transparent #fff;
}
.link-card-media:hover .link-card-play::before,
.link-card-media:focus-visible .link-card-play::before { background: var(--accent); }
.link-card-frame {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius); box-shadow: var(--card-shadow);
}

/* A second leaf below the prose leaf (page.html renders cards there). */
.leaf + .leaf { margin-top: var(--space-5); }

/* Pay rows — the payments page's item list (docs/06 #16): one hairline row
   per item, name and description left, the Pay button right, wrapping to
   two lines when the row is narrower than the text's 16rem minimum. Nothing
   here shares a selector with blocks.css; no rule depends on file order.
   The h3 loses base.css's outer margins and its accent stub inside a row. */
.pay-list { list-style: none; margin: 0; padding: 0; }
.pay-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.pay-row:first-child { padding-top: 0; }
.pay-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pay-row-text { flex: 1 1 16rem; min-width: 0; }
.pay-row-text h3 { margin: 0 0 .2rem; font-size: 1.05em; }
.pay-row-text h3::before { display: none; }
.pay-row-text p { margin: 0; font-size: .92em; color: var(--ink-soft); }
.pay-row-action { flex: none; display: flex; align-items: center; }

/* visually-hidden — text for assistive technology only. First use is the
   video card's play name; move to base.css when a second user appears. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Blocks — the homepage's leaf grammar (docs/05 §7, docs/06 #13).
   Approved by eye 2026-09-12 against the "Adapted to paper" mock. */

.leaf {
  max-width: var(--measure-fig);
  margin: 0 auto;
  background: var(--leaf);
  border: 1px solid var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.leaf-body { padding: var(--space-6) clamp(1.1rem, 4vw, 2rem); }

/* The h2's own stub margin is for prose flow; inside a leaf the kicker
   above it already carries the accent, so the stub is suppressed and
   the top margin collapses to the body padding. */
.leaf-body > h2 { margin-top: 0; }
.leaf-body > h2::before { display: none; }

/* Where a leaf has no kicker the stub returns — the block still needs
   its accent mark, or it reads as an untitled slab. Specificity (0,1,2)
   beats the (0,1,1) suppression above; that is why this wins. */
.leaf-body > h2:first-child::before { display: block; }

.leaf-subtitle {
  font-style: italic;
  color: var(--ink-soft);
  margin: -0.7rem 0 1.1rem;
}

.leaf-foot {
  margin: 0;
  padding: var(--space-4) clamp(1.1rem, 4vw, 2rem);
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Between blocks: the page rule, full column width, outside the leaf. */
.block-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.block { padding-block: clamp(1.4rem, 3.5vw, 2.4rem); }

/* Strand grid inside a leaf. */
.strands { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strand {
  border-left: 1px solid var(--rule);
  padding-left: var(--space-4);
}
.strand h2, .strand h3 { margin: 0 0 .25rem; font-size: 1.05em; }
.strand h2::before { display: none; }
.strand h2 a, .strand h3 a { color: var(--ink); text-decoration: none; }
.strand h2 a:hover, .strand h3 a:hover { color: var(--accent); }
.strand p { margin: 0; font-size: .92em; color: var(--ink-soft); }
.strand-list { list-style: none; margin: 0; padding: 0; row-gap: var(--space-6); }
.strand-list > li { margin: 0; min-width: 0; }
.strand .strand-meta { margin-bottom: var(--space-2); font-size: var(--text-sm); }

/* Strand cards — the homepage's four sections, each with its plate. Visual
   language from Ancestral Voices' four-voices cards. The numbers below are
   tune-by-eye and signed off 2026-09-14: see
   docs/briefs/homepage-strand-cards.md. Change them there, not here.
   Deliberately does NOT reuse .strand — those rules style the old text-only
   cell and would fight this one over type size. */
.strand-cards { list-style: none; margin: 0; padding: 0; gap: 19px; }
.strand-card {
  margin: 0; min-width: 0; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: 37px;
  background: var(--paper-warm);
  border: 1px solid var(--frame);
  border-radius: 13px;
  box-shadow: 0 2px 14px rgba(40, 35, 25, .12);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.strand-card:hover { transform: translateY(-3px); border-color: var(--accent); }
/* The wrapper carries the shared image lift and the img drops it, exactly as
   figure.plate does (layout.css): in dark the PNG is inverted, and a filter
   inverts the element's own box-shadow with it, turning the black lift white.
   Keep the shadow OUTSIDE the filtered element. */
.strand-card-media {
  display: block; align-self: center; width: 260px; max-width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.strand-card-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  border-radius: inherit; box-shadow: none;
  mix-blend-mode: multiply;          /* the etched-plate treatment */
}
.strand-card-media--colour img { mix-blend-mode: normal; }
.strand-card h3 { margin: 0 0 .3rem; font-size: var(--text-h3); font-weight: 900; }
.strand-card h3::before { display: none; }
.strand-card h3 a { color: var(--ink); text-decoration: none; }
.strand-card:hover h3 a { color: var(--accent); }
.strand-card p { margin: 0; font-size: var(--text-card); line-height: 1.55; color: var(--ink-soft); }
@media (prefers-color-scheme: dark) {
  .strand-card { box-shadow: 0 2px 14px rgba(0, 0, 0, .36); }
  .strand-card-media img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
  .strand-card-media--colour img { filter: none; mix-blend-mode: normal; }
}

/* Voice cards — the four Ancestral Voices inside the Ancestral Voices leaf.
   Design follows that app's .layer cards. Calibration signed off 2026-09-14:
   see docs/briefs/homepage-voice-cards.md. NOT links — no hover lift, no
   focus ring, no pointer cursor, because there is nowhere to go. */
.voice-row {
  list-style: none; margin: var(--space-5) 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.voice-card {
  margin: 0; min-width: 0; box-sizing: border-box;
  background: var(--paper-warm);
  border: 1px solid var(--frame);
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(40, 35, 25, .12);
  padding: 23px 29px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.voice-glyphs { display: flex; gap: 7px; align-items: flex-end; color: var(--accent); }
.voice-glyphs svg { display: block; overflow: visible; }
.voice-card h3 { margin: 0; font-size: var(--text-h3); font-weight: 900; }
.voice-card h3::before { display: none; }
.voice-alt { color: var(--ink-faint); }
.voice-pair { font-style: italic; font-size: var(--text-card); color: var(--ink-soft); }
.voice-card p { margin: .15rem 0 0; font-size: var(--text-card); color: var(--ink-soft); line-height: 1.45; }
@media (prefers-color-scheme: dark) {
  .voice-card { box-shadow: 0 2px 14px rgba(0, 0, 0, .36); }
}
@media (max-width: 700px) { .voice-row { grid-template-columns: 1fr; } }

/* The practice sidebar is a second leaf, with quiet, separated rows. */
.patient-concerns .leaf-body { padding-inline: var(--space-5); }
.patient-concerns h2 { font-size: var(--text-h2); }
/* BEATS the line above, deliberately. That rule is (0,2,0) and re-asserts the
   base h2 size; layout.css's `.page-columns .leaf h2` step is ALSO (0,2,0) and
   blocks.css is concatenated LAST (content/_site.yaml css_order), so the step
   lost and this card's heading stayed full size while its sibling
   .testimonials — which has no h2 rule of its own — was stepped. Two cards in
   one column, two heading sizes. This is (0,3,0), so it wins on specificity
   rather than on where anyone puts it. Do not "simplify" it away without
   deleting the rule above it too. */
.page-columns .patient-concerns h2 { font-size: calc(var(--text-h2) - 2px); }
.patient-concerns ul { list-style: none; margin: 0; padding: 0; }
.patient-concerns li {
  margin: 0;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .92em;
  line-height: 1.5;
}
.patient-concerns li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Testimonials — the concerns block's sibling in the same column. Quiet by
   design: three long quotes in a narrow column go heavy fast, so the base
   blockquote's italic is dropped and the accent rule is the only ornament.
   No font-size here — the column's own −2px step (layout.css) reaches these
   through .page-columns .leaf p, which is the point of putting it there. */
.testimonials .leaf-body { padding-inline: var(--space-5); }
/* TAMES layout.css's `figure` breakout — the site's signature move, which is
   a BARE ELEMENT selector: width: min(100vw - 3rem, --measure-fig) with
   margin-left: 50% and translateX(-50%). Applied to a quote inside a narrow
   card it renders each figure 832px wide and shifts it half its width left, so
   the text leaves the card AND its min-content drags the whole grid track
   wider than the column. Same three properties .page-prose figure resets for
   the same reason (layout.css). A `margin` shorthand alone is NOT enough — it
   cancels margin-left and leaves width and transform doing the damage. */
.testimonials figure {
  width: 100%;
  margin: 0 0 var(--space-5);
  margin-inline: 0;
  transform: none;
}
.testimonials figure:last-child { margin-bottom: 0; }
.testimonials blockquote {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--rule);
  font-style: normal;
  color: var(--ink-soft);
}
.testimonials blockquote p { margin: 0; }
.testimonials figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  padding-left: calc(var(--space-4) + 2px);
}

@media (max-width: 700px) {
  .strands { grid-template-columns: 1fr; }
}

@media print {
  .leaf { background: #fff; border: 0; box-shadow: none; }
  .strand-card-media { box-shadow: none; }   /* base.css drops img shadows in
                                                print; the lift now lives here */
  .page-columns { display: block; }
  .patient-concerns { margin-top: var(--space-6); }
}

/* Two-column blocks. The grid spans the SHELL (1152px, the masthead's bounds),
   not the leaf's own --measure-fig cap, so each column is ~488px and the prose
   runs ~68 characters — against 77 at the site's normal measure. Values signed
   off 2026-09-14: see docs/briefs/homepage-two-column-blocks.md, not here. */
.block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;          /* equal heights per row — the blocks run
                                    757–1021 chars and a step is visible */
}
.block-grid > .block { padding-block: 0; }
/* An ODD run leaves a last block with no partner. It used to sit half-width
   with an equal width of dead space beside it — measured at 1280px as one
   464px cell on a 940px grid. Reachable today from the Console's visibility
   toggle, with no editable width needed: hiding the FIRST of four half blocks
   shortens the run to three rather than splitting it.
   `:last-child:nth-child(odd)` is true only when the child COUNT is odd, so
   an even run is untouched. It also makes `width` genuinely per-block — no
   save has to be refused for a layout reason (codex gpt-6-astra pre-flight,
   docs/reviews/2026-09-15-astra-width-as-a-choice-field.md, BLOCKER 1).
   Harmless below 700px, where the grid is already one column. */
.block-grid > .block:last-child:nth-child(odd) { grid-column: 1 / -1; }
.block-grid .leaf { max-width: none; height: 100%; padding: 32px; }
/* −2px throughout a half block, so the narrower column still reads as prose. */
.block-grid .leaf h2 { font-size: calc(var(--text-h2) - 2px); }
.block-grid .leaf p,
.block-grid .leaf li { font-size: calc(var(--text-base) - 2px); }
@media (max-width: 700px) { .block-grid { grid-template-columns: 1fr; } }
/* Four approved page layouts; scoped classes leave other views unchanged. */
/* ---------- Shared ---------- */
.ux-page { font-size: var(--text-base); }
.ux-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.ux-actions .button, .ux-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .6rem 1.4rem;
  font-size: var(--text-interface); letter-spacing: .01em;
}
.ux-context {
  margin: 0;
  color: var(--ink-soft);
}
.ux-section { margin: 0 0 clamp(2.4rem, 6vw, 3.4rem); }
.ux-section > h2 { margin-top: 0; }
.ux-lead { max-width: var(--measure); color: var(--ink-soft); }
.ux-more { font-family: var(--font-sans); margin: 1rem 0 0; }
.ux-more a { font-weight: 600; }

/* Headings and plates inherit the shared page layout. Contact controls sit
   below that row, so their height cannot alter the image/text alignment. */
.ux-followup { max-width: var(--measure); margin: 0 auto 44px; }
@media (min-width: 840px) {
  .ux-followup { margin-inline: 0; }
}

/* Layout from Radar UK Home ribbon, layout_src/83, revision 9643ba9.
   Owner revision: leave the band transparent to the page's Stone ground.
   The shell, responsive layout and pill surfaces stay intact. */
.ux-home > .wrap > .page-header { margin-bottom: 24px; }
.ux-home > .ux-ribbon {
  margin-bottom: 44px;
}
.ux-home .ux-ribbon-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px 36px; padding-block: 16px 28px;
}
.ux-home .ux-ribbon .ux-context { min-width: 0; flex: 1; margin: 0; font-size: var(--text-h3); line-height: 1.2; color: var(--ink); }
.ux-home .ux-ribbon .ux-context::before { display: none; }
.ux-home .ux-ribbon .ux-actions {
  min-width: 0; flex: 0 1 auto; justify-content: flex-end; gap: 10px; margin: 0;
}
@media (max-width: 850px) {
  .ux-home .ux-ribbon-inner { flex-direction: column; align-items: stretch; gap: 18px; padding-block: 12px 24px; }
  .ux-home .ux-ribbon .ux-actions { justify-content: flex-start; gap: 8px; }
}
/* Practice pills: comfortable tap height. */
.ux-page .section-nav a { padding: .4rem .85rem; min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- Home: four cornerstones, Projects-sized cards in one desktop row ---------- */
.ux-routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ux-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Only a full-width homepage block can break out of the reading shell.
   Half-width editor groups keep their normal grid and container bounds. */
@media (min-width: 1024px) {
  .ux-home > .wrap > .block > .ux-section > .ux-routes {
    width: min(90rem, calc(100vw - 3rem));
    margin-left: calc(50% - min(45rem, calc(50vw - 1.5rem)));
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ux-route {
  position: relative; margin: 0; min-width: 0;
  display: grid; grid-template-columns: 1fr; gap: .9rem; align-content: start;
  padding: 14px;
  background: var(--paper-warm);
  border: 1px solid var(--frame);
  border-radius: 12px;
  transition: border-color .2s, transform .2s;
}
@media (min-width: 640px) { .ux-route { padding: 18px; } }
.ux-route:hover { border-color: var(--accent); transform: translateY(-2px); }
.ux-route:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ux-route img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--card-shadow); }
.ux-route h3 { margin: 0 0 .2rem; font-size: var(--text-h3); font-weight: 900; }
.ux-route h3 a { color: var(--ink); text-decoration: none; }
.ux-route h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.ux-route h3 a:focus-visible { outline: none; }
.ux-route:hover h3 a { color: var(--accent); }
.ux-route p { margin: 0; font-size: var(--text-card); line-height: 1.5; color: var(--ink-soft); }

/* ---------- Home: working with me ---------- */
.ux-work .leaf-body { max-width: calc(var(--measure) + 4rem); }
.ux-work-portrait { padding: 0 clamp(1.1rem, 4vw, 2rem) var(--space-6); }
.ux-work-portrait img { width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
@media (min-width: 840px) {
  .ux-home > .wrap > .block > .ux-work { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; }
  .ux-home > .wrap > .block > .ux-work .ux-work-portrait { padding: var(--space-6) clamp(1.1rem, 4vw, 2rem) var(--space-6) 0; }
}

.ux-work .ux-links { font-family: var(--font-sans); margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; }

/* ---------- Home: flagship ---------- */
.ux-feature .leaf-body { display: grid; gap: 1.6rem; }
@media (min-width: 900px) {
  .ux-feature .leaf-body { grid-template-columns: minmax(0, 1fr) 280px; gap: 2.6rem; align-items: start; }
}
.ux-feature-text > h2 { margin-top: 0; }
.ux-feature-text > h2::before { display: none; }
.ux-feature-text > :last-child { margin-bottom: 0; }
.ux-feature-media { margin: 0; }
.ux-feature-media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 899px) {
  .ux-feature-media { order: -1; }
  .ux-feature-media img { aspect-ratio: 16 / 8; }
}
.ux-feature .ux-actions { margin-top: 1.4rem; align-items: center; }
.ux-feature .ux-actions a:not(.button) { font-family: var(--font-sans); }

/* ---------- Home: teaching, writing and tools ---------- */
.ux-trio { display: grid; gap: 1.4rem 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ux-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ux-trio > div { min-width: 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
.ux-trio h3 { margin: 0 0 .5rem; font-size: var(--text-h3); }
.ux-trio p { margin: 0 0 .8rem; font-size: var(--text-card); color: var(--ink-soft); }
.ux-trio ul.ux-plain { list-style: none; padding: 0; margin: 0 0 .8rem; font-size: var(--text-card); }
.ux-trio ul.ux-plain li { margin: 0 0 .45rem; }
.ux-trio .section-nav { margin: 0 0 .8rem; }

/* ---------- Consultations ---------- */
.ux-contact {
  margin: 0; padding: 1.1rem 1.2rem 1.2rem;
  background: var(--leaf);
  border: 1px solid var(--frame);
  border-radius: var(--radius); box-shadow: var(--card-shadow);
}
.ux-contact p { margin: 0 0 .85rem; }
.ux-contact p:last-child { margin-bottom: 0; }
.ux-address { font-family: var(--font-sans); color: var(--ink-soft); }
.ux-select {
  user-select: all; -webkit-user-select: all;
  font-weight: 600; color: var(--ink); overflow-wrap: anywhere;
}
.ux-hint { font-size: var(--text-card); color: var(--ink-soft); }

.ux-rows { margin: 0; padding: 0; }
.ux-rows > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
}
.ux-rows > div:first-child { padding-top: 0; }
.ux-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 560px) {
  .ux-rows > div { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.2rem; align-items: baseline; }
}
.ux-rows dt { font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
.ux-rows dd { margin: 0; color: var(--ink-soft); }
.ux-fees > div { grid-template-columns: minmax(0, 1fr) auto !important; gap: 1rem; align-items: baseline; }
.ux-fees dd { font-family: var(--font-sans); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ux-note { margin: 1.1rem 0 0; font-size: var(--text-card); color: var(--ink-soft); }

.ux-panelgrid { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .ux-panelgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ux-panelgrid > .leaf { width: 100%; max-width: none; margin: 0; min-width: 0; }
@media (max-width: 52rem) {
  .wrap.page-shell .ux-panelgrid > .leaf { width: calc(100% + 3rem); margin-inline: -1.5rem; }
}
.ux-narrow { max-width: calc(var(--measure) + 4rem); margin-inline: auto; }
.ux-page .leaf.ux-narrow { max-width: calc(var(--measure) + 4rem); }
@media (max-width: 52rem) { .wrap.page-shell .leaf.ux-narrow { max-width: none; } }

/* ---------- Writing ---------- */
.ux-start { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .ux-start { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ux-start > li {
  margin: 0; min-width: 0; padding: 1.3rem 1.4rem;
  background: var(--paper-warm); border: 1px solid var(--frame);
  border-radius: 12px;
}
.ux-start h3 { margin: 0 0 .8rem; font-size: var(--text-h3); }
.ux-start ul { list-style: none; margin: 0; padding: 0; }
.ux-start ul li { margin: 0 0 .9rem; }
.ux-start ul li:last-child { margin: 0; }
.ux-start a { font-family: var(--font-serif); font-size: 1em; font-weight: 600; }
.ux-start ul p { margin: .15rem 0 0; font-size: var(--text-card); line-height: 1.5; color: var(--ink-soft); }

.ux-essays { list-style: none; margin: 0; padding: 0; }
.ux-essays > li { margin: 0; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
.ux-essays > li:first-child { padding-top: 0; }
.ux-essays > li:last-child { border-bottom: 0; padding-bottom: 0; }
.ux-essays .ux-date { margin: 0 0 .2rem; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-faint); }
.ux-essays h3 { margin: 0 0 .35rem; font-size: var(--text-h3); line-height: 1.3; }
.ux-essays h3 a { color: var(--ink); text-decoration: none; }
.ux-essays h3 a:hover, .ux-essays h3 a:focus-visible { color: var(--accent); text-decoration: underline; }
.ux-essays p { margin: 0; color: var(--ink-soft); }
.ux-essays .ux-tags { margin-top: .35rem; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-faint); }
.ux-page .tag-list { margin: 0; }
.ux-page .tag-list a { padding: .4rem .85rem; min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- Projects ---------- */
.ux-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ux-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ux-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ux-project {
  position: relative; margin: 0; min-width: 0;
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 14px;
  background: var(--paper-warm); border: 1px solid var(--frame);
  border-radius: 12px;
  transition: border-color .2s, transform .2s;
}
@media (min-width: 640px) {
  .ux-project { grid-template-columns: 1fr; padding: 18px; gap: .9rem; }
}
.ux-project:hover { border-color: var(--accent); transform: translateY(-2px); }
.ux-project:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ux-project img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; box-shadow: var(--card-shadow); }
@media (min-width: 640px) { .ux-project img { aspect-ratio: 16 / 10; } }
.ux-type {
  display: inline-block; margin: 0 0 .35rem;
  font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: .03em;
  color: var(--ink-soft);
  padding: .05rem .55rem; border: 1px solid var(--rule);
  background-color: var(--leaf);
}
.ux-project h3 { margin: 0 0 .3rem; font-size: var(--text-h3); line-height: 1.3; }
.ux-project h3 a { color: var(--ink); text-decoration: none; }
.ux-project h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.ux-project h3 a:focus-visible { outline: none; }
.ux-project:hover h3 a { color: var(--accent); }
.ux-project p.ux-summary { margin: 0; font-size: var(--text-card); line-height: 1.5; color: var(--ink-soft); }
.ux-project .ux-extra { position: relative; z-index: 1; margin: .7rem 0 0; font-family: var(--font-sans); font-size: var(--text-card); }

@media (prefers-reduced-motion: reduce) {
  .ux-route, .ux-project { transition: none; }
  .ux-route:hover, .ux-project:hover { transform: none; }
}

.ux-subjects { margin: 0 0 1.6rem; }
.ux-contact-end .ux-address { margin-top: .9rem; }
.ux-home .block { padding-block: 0; margin: 0 0 clamp(2.4rem, 6vw, 3.4rem); }
.ux-home .block > .ux-section { margin: 0; }
.ux-home .block-grid .block { margin: 0; }
.ux-home .block-grid { margin-bottom: clamp(2.4rem, 6vw, 3.4rem); }
.ux-home .ux-trio .section-nav { justify-content: flex-start; }
.ux-page .ux-feature-media img { filter: none; }
.ux-page .ux-more { margin-top: 1rem; }

/* One explicitly selected main event per page; ordinary cards stay quiet.
   This final rule also beats interactive card hover borders. */
@media screen {
  .page-highlight, .page-highlight:hover { border-left: 3px solid var(--header); }
  .ux-writing > section.page-highlight { padding-left: 1.4rem; }
}

/* Source: AV card-lamp-stone-01, adapted to this site's actual card families.
   Background-image only: neutral frames, the sole featured edge and pill
   sheen remain independent; nested text containers do not repaint the lamp. */
.leaf, .strand-card, .voice-card, .ux-route, .ux-start > li, .ux-project, .ux-contact {
  background-image: var(--stone-card-image);
}
/* Existing opening dashes alternate in reading order, assigned by the static
   renderer after optional blocks are omitted. Text/link colours are untouched. */
h2[data-accent="saffron"]::before,
.kicker[data-accent="saffron"]::before { background: var(--header); }