/* ============================================================
   WORDS FOR MY WARRIORS · Launch site stylesheet
   The warm house. Palette drawn from the owner's chosen
   pictures: evening gold over the lake, worn khaki and olive,
   walnut tabletops, old-photograph sepia and cream.
   No corporate blue. No cold gray.

   DESIGN-ELEVATION PASS 2026-08-11 — same craft discipline as
   the certified sibling (The Reader's Verdict), album warmth:
   · type: one heading ladder, one kicker voice (600 / 0.18em),
     display headings tracked -0.01em, all rhythm on the token scale
   · surfaces: band seams shaded, the dusk bands carry evening
     light-into-night depth (layered neutral gradients over the
     palette variables, so all three LOOK ROUND themes inherit)
   · states: every interactive element has a considered hover and
     a warm-gold focus ring (gold-bright on the dark beds);
     transitions 160–180ms; prefers-reduced-motion honored
   · details: in-palette selection, the service-star fleuron on a
     fading gold rule, the tricolor ribbon edged to the pixel,
     the footer closed like a folded flag
   · print: what-it-offers / for-organizations print clean
     black-on-white, no nav, mailto shown in plain text

   All text contrast pairs computed >= 4.5:1 — including every
   gradient-blended stop — for ALBUM, FLAG and HONOR. See the
   contrast tables here and in the theme files.
     selection #241C10 on gold-bright #E2B562 . 8.83 (all themes)
     dusk band lightest stop #33291C: dusk-text 12.24 ·
       dusk-soft 8.35 · gold-bright 7.47
     footer lightest stop #302519: dusk-soft 8.77 · dusk-text 12.85
     care band darkest stop #DDCEB3: brick 5.83 · ink 9.03
     album seam stop #ECE1CD: ink 10.81 · ink-soft 5.32 ·
       kicker-olive 6.23 · link gold-deep 4.87 · brick 6.98
     deep seam stop #E2D3B7: ink 9.49 · ink-soft 4.67 · brick 6.13
     poster: title #242913 on head 12.09 (8.59 at the corner
       tint's darkest point) · whisper #6F5B2C 5.28
     btn ink on gold-bright 7.35 · nav hover brick on paper 8.25

   Motif: the small gold service star and the open family-album
   photograph — never boxed, caption in quiet italic below.
   ============================================================ */

:root {
  /* Color — sampled from the pictures */
  --paper: #FAF4E8;        /* warm cream page bed                              */
  --album: #F3E7D3;        /* album parchment band                             */
  --album-deep: #E9D9BC;   /* deeper album mat / care band                     */
  --ink: #38291A;          /* dark walnut ink        12.78:1 on paper          */
  --ink-soft: #6A573F;     /* softened sepia          6.29:1 on paper          */
  --olive: #55512E;        /* worn khaki / olive      7.37:1 on paper          */
  --gold: #B9862F;         /* evening gold — decoration, rules, stars          */
  --gold-deep: #7C5A17;    /* gold dark enough for text  5.75:1 on paper       */
  --gold-bright: #E2B562;  /* gold on the dusk band   8.26:1 on dusk           */
  --brick: #7E3018;        /* flag brick — care emphasis 6.51:1 on album-deep  */
  --dusk: #2C2114;         /* evening umber band                               */
  --dusk-text: #F6EDDA;    /* 13.52:1 on dusk                                  */
  --dusk-soft: #D9C49A;    /*  9.22:1 on dusk                                  */
  --flag-red: #8C3B2A;     /* muted old-glory red — accent hairline only       */
  --flag-white: #FFFDF7;   /* the white of the ribbon                          */
  --flag-blue: #46536E;    /* muted flag dusk — accent hairline only, never a bed */

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  /* Scale — 1.24 ratio on a 19px base */
  --step--2: 0.78rem;
  --step--1: 0.92rem;
  --step-0: 1.1875rem;
  --step-1: 1.45rem;
  --step-2: 1.8rem;
  --step-3: 2.25rem;
  --step-4: 2.8rem;
  --step-5: 3.5rem;

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4.5rem; --s-9: 6rem;

  /* Motion — gentle, one tempo for the whole house */
  --ease: 180ms ease;

  /* Layered warm shadows — lamplight, not fluorescence */
  --shadow-1: 0 1px 2px rgba(56, 41, 26, 0.07), 0 3px 8px rgba(56, 41, 26, 0.06);
  --shadow-2: 0 1px 3px rgba(56, 41, 26, 0.08), 0 6px 14px rgba(56, 41, 26, 0.08), 0 16px 32px rgba(56, 41, 26, 0.09);
  --shadow-3: 0 2px 5px rgba(35, 25, 12, 0.10), 0 10px 22px rgba(35, 25, 12, 0.10), 0 30px 56px rgba(35, 25, 12, 0.13);

  --radius: 8px;
  --radius-lg: 14px;
  --measure: 65ch;
}

/* ---------- Reset & base ---------- */

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

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Display sizes sit a touch tighter; reading sizes stay open. */
h1, h2 { letter-spacing: -0.01em; }

h1 { font-size: clamp(var(--step-3), 5vw, var(--step-5)); }
h2 { font-size: clamp(var(--step-2), 4vw, var(--step-4)); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, blockquote { max-width: var(--measure); }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.4em; }
li { margin-bottom: var(--s-2); }

a {
  color: var(--gold-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover { color: var(--brick); text-decoration-thickness: 2px; }

strong { color: var(--ink); }

::selection { background: var(--gold-bright); color: #241C10; } /* 8.83:1, all themes */

.center { text-align: center; }
.center p, .center ul, .center ol, .center blockquote { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.list-plain { list-style: none; padding-left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem;
  background: var(--dusk); color: var(--dusk-text);
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--radius) var(--radius);
  z-index: 100; transition: top 160ms ease;
}
.skip-link:focus { top: 0; }

/* The warm gold ring — never the default blue. Bright on dark beds. */
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
.band--dusk :focus-visible,
.site-foot :focus-visible,
.gate-body :focus-visible { outline-color: var(--gold-bright); }

/* ---------- The tricolor thread (red, white and blue — the quiet way) ----------
   Edged with a one-pixel hairline top and bottom so the white of the
   ribbon reads as a ribbon against the cream, never a gap. Thirds exact. */

.tricolor {
  height: 4px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    var(--flag-red) 0 33.333%,
    var(--flag-white) 33.333% 66.667%,
    var(--flag-blue) 66.667% 100%
  );
  box-shadow: inset 0 1px 0 rgba(56, 41, 26, 0.14), inset 0 -1px 0 rgba(56, 41, 26, 0.14);
}

.foot-tricolor {
  width: min(16rem, 70%);
  margin: 0 auto var(--s-5);
  border-radius: 999px;
}

/* ---------- The star rule (the room's fleuron) ----------
   One weight of gold, the lines breathing out from the star. */

.star-rule {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-4); margin: var(--s-5) auto; max-width: 22rem;
  color: var(--gold); font-size: var(--step-0); line-height: 1;
}
.star-rule::before, .star-rule::after {
  content: ""; flex: 1; height: 1px;
}
.star-rule::before { background: linear-gradient(90deg, rgba(185, 134, 47, 0), var(--gold)); }
.star-rule::after  { background: linear-gradient(90deg, var(--gold), rgba(185, 134, 47, 0)); }

/* ---------- Masthead & nav ---------- */

.site-head {
  background: var(--paper);
  padding: var(--s-6) var(--s-5) 0;
  text-align: center;
}

.masthead-title {
  margin: 0;
  max-width: none;    /* frees the brand line from the reading-measure cap */
  text-wrap: balance; /* small screens: the name breaks evenly, stars held */
  font-size: clamp(var(--step-2), 4.5vw, var(--step-4));
  font-weight: 700;
  letter-spacing: 0.06em;
}
.masthead-title a { color: var(--ink); text-decoration: none; transition: color 160ms ease; }
.masthead-title a:hover { color: var(--olive); text-decoration: none; }
.masthead-title .star { color: var(--gold); font-size: 0.7em; vertical-align: 0.18em; padding: 0 0.35em; }

.masthead-sub {
  margin: var(--s-2) 0 var(--s-4);
  max-width: none;    /* frees the whisper line from the reading-measure cap */
  color: var(--olive);
  font-style: italic;
  font-size: var(--step-0);
}

.site-nav { padding-bottom: var(--s-4); }

.nav-toggle {
  display: none;
  font: inherit; font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--album); color: var(--ink);
  border: 1px solid var(--album-deep); border-radius: var(--radius);
  padding: var(--s-2) var(--s-5); cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.nav-toggle:hover { background: var(--album-deep); border-color: var(--gold); }

/* OWNER RULING 2026-08-11 — one straight line, guaranteed:
   exactly eight doors, 0.7rem type, letter-spacing <= 0.05em,
   tight gaps, flex-wrap nowrap. Measured rendered row width must
   stay <= 960px so the line holds at every viewport >= 1000px;
   below 1000px the Menu button takes over. No wrapping state
   exists at any width. The elevation pass touched color and
   motion ONLY — every width-bearing value is untouched. */
.nav-list {
  list-style: none; margin: 0; padding: 0;
  max-width: none;    /* the reading-measure cap must never box the nav row */
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: var(--s-2);
  white-space: nowrap;
}
.nav-list a {
  display: inline-block;
  color: var(--olive); text-decoration: none;
  font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--s-2) 1px;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.nav-list a:hover { color: var(--brick); border-bottom-color: var(--gold-bright); }
.nav-list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

.nav-door a.btn--doortab {
  background: var(--gold-bright); color: var(--ink);
  border-radius: 999px; padding: var(--s-2) var(--s-4);
  border-bottom: none; font-weight: 700;
  box-shadow: var(--shadow-1);
  transition: background 160ms ease, box-shadow 160ms ease;
}
.nav-door a.btn--doortab:hover { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-2); }

@media (max-width: 999px) {
  .nav-toggle { display: inline-block; margin-bottom: var(--s-3); }
  .nav-list { display: none; flex-direction: column; align-items: center; gap: var(--s-1); padding-bottom: var(--s-3); }
  .nav-list.open { display: flex; }
  .nav-list a { font-size: var(--step--1); padding: var(--s-2) var(--s-4); }
}

/* ---------- Bands & wraps ----------
   Elder spacing pass (owner 2026-08-11): more air between sections.
   Elevation: album bands carry a soft seam shadow at their top edge
   so the page reads as laid leaves, not flat stripes; the dusk bands
   hold evening light falling into night. Neutral overlays over the
   palette variables — all LOOK ROUND themes inherit the depth.
   Blended-stop contrast computed in the header table. */

.band { padding: var(--s-9) var(--s-5); }
.band--album {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.028), rgba(0, 0, 0, 0) 3.5rem),
    var(--album);
}
.band--deep {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.028), rgba(0, 0, 0, 0) 3.5rem),
    var(--album-deep);
}
.band--dusk {
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(226, 181, 98, 0.05), rgba(226, 181, 98, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0.18) 100%),
    var(--dusk);
  color: var(--dusk-text);
}
.band--dusk h2, .band--dusk h3, .band--dusk strong { color: var(--dusk-text); }
.band--dusk a { color: var(--gold-bright); }
.band--dusk a:hover { color: var(--dusk-text); }
.band--dusk .soft { color: var(--dusk-soft); }
.band--dusk .lede { color: var(--dusk-soft); }

.wrap { max-width: 62rem; margin: 0 auto; }
.wrap--narrow { max-width: 46rem; margin: 0 auto; }

/* One kicker voice for the whole house: 600 weight, 0.18em air. */
.kicker {
  display: inline-block;
  color: var(--olive);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); }

.soft { color: var(--ink-soft); }

/* ---------- The mission lines (owner ruling 2026-09-08) ----------
   Two verbatim lines, permanent: the open, large, under welcome's
   first heading; the close, in every footer, above the copyright. */
.mission-line {
  font-size: clamp(var(--step-1), 3vw, var(--step-2));
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-5);
}
.mission-close {
  color: var(--dusk-text);
  font-weight: 700;
  font-style: italic;
  max-width: 46rem;
  margin-top: var(--s-5);
  margin-bottom: 0;
}

/* ---------- The welcome slot (owner ruling 2026-09-08 — THE LIVE WELCOME) ----------
   One spoken welcome (no autoplay — the veteran presses play), the same
   script printed in full underneath for anyone deaf, hard of hearing, or
   who would rather read, and one button after it. */
.welcome-slot {
  margin: var(--s-7) 0;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--album-deep);
  border-bottom: 1px solid var(--album-deep);
}
.welcome-label {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  font-size: var(--step-0);
  margin: 0 0 var(--s-4);
}
.welcome-slot audio {
  width: 100%;
  max-width: 32rem;
  display: block;
  margin: 0 auto var(--s-6);
}
.welcome-script {
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 42rem;
  text-align: left;
  color: var(--ink);
  margin: 0 auto var(--s-6);
}
.welcome-script p { margin: 0 0 1em; }
.welcome-script p:last-child { margin-bottom: 0; }

.button.begin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 var(--s-8);
  font: inherit;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  border-radius: 999px;
  background: var(--gold-bright);
  color: var(--ink);
  box-shadow: var(--shadow-2);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.button.begin:hover { background: var(--gold); color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-3); }
.button.begin:active { transform: translateY(0); box-shadow: var(--shadow-2); }
.button.begin:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }

/* ---------- The room voice (owner ruling 2026-09-08 — "a voice on some of the
   rooms... it really makes them feel they are live voices and real companions") ----------
   Same no-autoplay pattern as the welcome slot, compact: a short spoken description on
   four rooms, the player, and the script printed underneath. */
.room-voice {
  margin: var(--s-6) 0;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--album-deep);
  border-bottom: 1px solid var(--album-deep);
}
.room-voice-label {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  font-size: var(--step-0);
  margin: 0 0 var(--s-3);
}
.room-voice audio {
  width: 100%;
  max-width: 28rem;
  display: block;
  margin: 0 auto var(--s-4);
  min-height: 3rem;
}
.room-voice-script {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 40rem;
  text-align: left;
  color: var(--ink);
  margin: 0 auto;
}

/* ---------- The open photograph (figure treatment) ----------
   OWNER RULING 2026-08-11: no pictures in boxes. The photograph
   stands free — soft-rounded corners, a gentle shadow at most,
   the caption in quiet italic below. No mat, no border, no tilt. */

.print {
  margin: var(--s-7) auto;
  max-width: 46rem;
}
.print img {
  border-radius: 10px;
  box-shadow: var(--shadow-2);
}
.print figcaption {
  font-style: italic;
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.55;
  letter-spacing: 0.005em;
  padding-top: var(--s-4);
  text-align: center;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Door cards ---------- */

.door-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: var(--s-6) 0;
  text-align: left;
}

.door-card {
  background: var(--paper);
  border: 1px solid var(--album-deep);
  border-left: 4px solid var(--olive);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-5);
  transition: box-shadow var(--ease), border-color var(--ease);
}
.door-card:hover { box-shadow: var(--shadow-2); border-left-color: var(--gold); }
.door-card h3, .door-card h4 { margin-bottom: var(--s-2); font-size: var(--step-1); }
.door-card p { font-size: var(--step-0); margin-bottom: 0; }
.door-card .kicker { margin-bottom: var(--s-1); }

.band--album .door-card { background: var(--paper); }
.band .door-card--album { background: var(--album); }

/* ---------- What It Offers (one door at a time) ----------
   OWNER RULING 2026-08-11: the ten capabilities each get their
   own row — generous space, large text, the photograph standing
   open and unboxed, simple words. Where the owner's photograph
   has not arrived yet, the row stays elegant type only: the
   small gold star over the line in quiet italic. No boxes. */

.offer h2 { margin-bottom: var(--s-4); }
.offer .kicker { font-size: var(--step-0); letter-spacing: 0.18em; }
.offer p { font-size: var(--step-1); line-height: 1.6; }
.offer .print { margin: var(--s-6) auto; max-width: 42rem; }

.offer-star {
  color: var(--gold);
  font-size: var(--step-2);
  line-height: 1;
  margin: var(--s-5) 0 var(--s-3);
}
.offer-motto {
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: var(--s-5);
}
.band--dusk .offer-motto { color: var(--dusk-soft); }

/* ---------- The full close (Get the Room) ----------
   The group picture goes full: edge to edge, the flag thread
   beneath it, the evening band closing under all of them. ---------- */

.full-bleed { margin: 0; }
.full-bleed img { width: 100%; height: auto; display: block; }

/* ---------- The gentle walk (numbered steps) ---------- */

.walk { list-style: none; padding: 0; margin: var(--s-6) auto; max-width: var(--measure); counter-reset: walk; text-align: left; }
.walk > li {
  counter-increment: walk;
  position: relative;
  padding: 0 0 var(--s-5) 3.4rem;
  margin: 0;
}
.walk > li::before {
  content: counter(walk);
  position: absolute; left: 0; top: 0.1rem;
  width: 2.3rem; height: 2.3rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--olive); color: var(--paper);
  border-radius: 50%;
  font-weight: 700; font-size: var(--step-0);
  box-shadow: var(--shadow-1);
}
.walk > li:not(:last-child)::after {
  content: "";
  position: absolute; left: 1.12rem; top: 2.7rem; bottom: 0.3rem;
  width: 2px;
  background: linear-gradient(180deg, var(--album-deep), rgba(233, 217, 188, 0.35));
}
.walk h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.walk p { margin-bottom: 0; }

/* ---------- Pull quote ---------- */

blockquote.pull {
  margin: var(--s-6) auto;
  padding: 0 var(--s-5);
  border-left: 4px solid var(--gold);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
}
blockquote.pull--center { border-left: none; text-align: center; padding: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font: inherit; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: var(--s-4) var(--s-7);
  background: var(--gold-bright); color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.btn:hover { background: var(--gold); color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }

.btn--quiet {
  background: var(--album); color: var(--ink);
  border: 1px solid var(--album-deep);
}
.btn--quiet:hover { background: var(--album-deep); color: var(--ink); }

/* ---------- The gate (index) ----------
   THE GATE IS SACRED. Typography and the poster seam only. */

.gate-body { background: var(--dusk); }

.gate-main {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-5);
}

/* The gate poster — live HTML title over the owner's cropped cover.
   The head's bed is the cover's own top-edge cream (#EEE6D8 vs the
   measured edge #EEE5D7), with the cover's corner vignette carried
   up into the head — a deeper breath at the lower left (the cover
   edge reads #CBB99F there), a faint one at the lower right — so
   the printed page and the live title meet without a seam at any
   width. Title contrast at the tint's darkest point: 8.59:1. */
.poster {
  max-width: min(30rem, 100%);
  background: #EEE6D8;            /* cover cream, sampled           */
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.poster-head {                     /* beneath the poster since 2026-10-05: the hero shape */
  padding: var(--s-4) var(--s-4) var(--s-5);
  text-align: center;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(74, 52, 24, 0.20), rgba(74, 52, 24, 0) 36%),
    radial-gradient(110% 80% at 100% 0%, rgba(74, 52, 24, 0.06), rgba(74, 52, 24, 0) 30%),
    #EEE6D8;
}
.poster-whisper {
  margin: 0 0 var(--s-3);
  text-align: center;
  color: #6F5B2C;                 /* cover bronze, deepened to 5.28:1 — a whisper, not a voice */
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;            /* recenters tracked caps         */
  text-transform: uppercase;
}
.poster-title {
  margin: 0;
  color: #242913;                 /* cover deep green, sampled: 12.09:1 */
  font-weight: 700;
  font-size: clamp(1.9rem, 7.6vw, 2.95rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
}
.poster img { width: 100%; }

/* THE ONE GOLD ENTER beneath the poster (the hero shape, owner 2026-10-05 — as TRV and SRV): the poster's own width. */
.gate-enter {
  width: min(30rem, 100%);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;            /* recenters tracked caps         */
  padding: var(--s-3) var(--s-5);
  background: var(--gold-bright);
  opacity: 0.92;
  box-shadow: var(--shadow-1);
  transition: opacity var(--ease), box-shadow var(--ease), background var(--ease);
}
.gate-enter:hover, .gate-enter:focus-visible { opacity: 1; box-shadow: var(--shadow-2); transform: none; }

/* ---------- The Dayroom shelves ---------- */

.shelf { margin: var(--s-6) 0; text-align: left; }
.shelf-list { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s-4); }
.shelf-list li {
  background: var(--paper);
  border: 1px solid var(--album-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-4) var(--s-5);
  margin-bottom: 0;
  transition: box-shadow var(--ease), border-color var(--ease);
}
.shelf-list li:hover { box-shadow: var(--shadow-2); border-color: var(--gold); }
.shelf-list a { font-weight: 700; }
.shelf-list .out { color: var(--ink-soft); font-size: var(--step--1); }
.shelf-list p { margin: var(--s-1) 0 0; font-size: var(--step-0); }

/* ---------- The care band (every page) ---------- */

.care-band {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.05) 100%),
    var(--album-deep);
  border-top: 4px solid var(--gold);
  padding: var(--s-7) var(--s-5);
  text-align: center;
}
.care-band .care-head {
  color: var(--brick);
  font-weight: 700;
  font-size: var(--step-1);
  margin-bottom: var(--s-3);
  letter-spacing: 0.02em;
}
.care-band p { margin-left: auto; margin-right: auto; }
.care-band p:last-child { margin-bottom: 0; }

/* ---------- Footer (the evening band) ----------
   The close of every page, folded like the flag: the ribbon, the
   star, the name, the line — then the doors, the promise, and the
   house whisper, the light settling deeper toward the last line. */

.site-foot {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 18%, rgba(0, 0, 0, 0.28) 100%),
    var(--dusk);
  color: var(--dusk-soft);
  text-align: center;
  padding: var(--s-8) var(--s-5) var(--s-7);
  font-size: var(--step--1);
}
.site-foot p { margin-left: auto; margin-right: auto; }
.site-foot a { color: var(--gold-bright); }
.site-foot a:hover { color: var(--dusk-text); }
.foot-star { color: var(--gold-bright); font-size: var(--step-1); line-height: 1; margin-bottom: var(--s-3); }
.foot-brand {
  color: var(--dusk-text);
  font-size: var(--step-1); font-weight: 700; letter-spacing: 0.1em;
  margin-bottom: var(--s-2);
}
.foot-line { color: var(--dusk-soft); font-style: italic; margin-bottom: var(--s-5); }
.foot-nav {
  list-style: none; margin: 0 auto var(--s-6); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-2) var(--s-5); max-width: 46rem;
}
.foot-nav li { margin-bottom: 0; }
.foot-nav a {
  color: var(--dusk-soft); text-decoration: none;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step--1);
  padding: var(--s-1) 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.foot-nav a:hover { color: var(--dusk-text); border-bottom-color: var(--gold-bright); }
.foot-pen { color: var(--dusk-soft); max-width: 46rem; }
.foot-free { color: var(--gold-bright); font-weight: 700; letter-spacing: 0.06em; }
.foot-house {
  color: var(--dusk-soft);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: var(--s-5);
  margin-bottom: 0;
}
.foot-legal { color: var(--dusk-soft); margin-top: var(--s-2); margin-bottom: 0; }

/* ---------- Small screens ----------
   The 375px pass: open figures full-width with their captions in
   easy measure, offer rows breathing, buttons that wrap with grace,
   the masthead held to one dignified line wherever it fits. */

@media (max-width: 560px) {
  .masthead-title { letter-spacing: 0.04em; }
  .masthead-title .star { padding: 0 0.22em; }
}

@media (max-width: 480px) {
  .band { padding: var(--s-7) var(--s-4); }
  blockquote.pull { padding: 0 var(--s-4); }
  .btn { padding: var(--s-4) var(--s-6); line-height: 1.45; }
  .print { margin: var(--s-6) auto; }
  .print figcaption { padding-left: var(--s-3); padding-right: var(--s-3); }
  .care-band { padding: var(--s-6) var(--s-4); }
  .site-foot { padding: var(--s-7) var(--s-4) var(--s-6); }
  .walk > li { padding-left: 3rem; }
  .walk > li::before { width: 2.1rem; height: 2.1rem; }
  .walk > li:not(:last-child)::after { left: 1rem; top: 2.5rem; }
}

/* ---------- Print (facility directors print things) ----------
   Clean black-on-white, no nav, the photographs retained, every
   mailto shown in plain text beside its words. Applies house-wide;
   written for What It Offers and For Organizations first. */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.5; }
  .skip-link, .site-nav, .nav-toggle, .tricolor, .foot-nav, .foot-star { display: none !important; }
  .band, .band--album, .band--deep, .band--dusk, .care-band, .site-foot, .site-head {
    background: #fff; color: #000; padding: 1.2rem 1rem;
  }
  h1, h2, h3, h4, strong, .kicker, .lede, .soft, .care-head, .offer-motto,
  .band--dusk h2, .band--dusk h3, .band--dusk strong, .band--dusk .soft, .band--dusk .lede,
  .masthead-title a, .masthead-sub,
  .foot-brand, .foot-line, .foot-pen, .foot-free, .foot-house, .foot-legal { color: #000; }
  .star-rule, .offer-star, .masthead-title .star { color: #000; }
  a, .band--dusk a, .site-foot a { color: #000; text-decoration: underline; }
  .btn {
    background: none; color: #000; box-shadow: none;
    border: 1px solid #000; border-radius: 6px; padding: 0.3rem 1rem;
    transform: none;
  }
  .door-card, .shelf-list li { box-shadow: none; border: 1px solid #000; break-inside: avoid; }
  .print { break-inside: avoid; }
  .print img { box-shadow: none; }
  .print figcaption { color: #000; }
  /* The site's one address, in plain ink beside every mailto door
     whose visible words are not already the address itself. */
  main a[href^="mailto:"]:not(.mail-text)::after {
    content: " (info@lovingmywords.com)";
    font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none;
  }
}

/* THE SPOKEN PEN — the green block, alive (owner mandate 2026-08-11) */
.spoken-pen { margin: 2.5rem auto 1.5rem; max-width: 34rem; }
.pen-block {
  display: inline-flex; align-items: center; gap: 0.9rem;
  background: linear-gradient(180deg, #2a5a44, #1f4d3a);
  color: #F3EBD9; border: 1px solid #16382a; border-radius: 14px;
  padding: 1rem 1.6rem; font: inherit; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 2px 6px rgba(31,42,36,.25), 0 10px 24px rgba(31,42,36,.18);
  transition: transform 170ms var(--ease, ease), box-shadow 170ms var(--ease, ease);
}
.pen-block:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(31,42,36,.3), 0 14px 30px rgba(31,42,36,.22); }
.pen-block:focus-visible { outline: 3px solid var(--gold-bright, #E2B562); outline-offset: 3px; }
.pen-block.listening { background: linear-gradient(180deg, #37725a, #2a5a44); }
.pen-block.listening .pen-label::after { content: " — listening…"; font-style: italic; }
.pen-page {
  margin: 1.4rem auto 0; background: #FFFDF6; border: 1px solid #E5D9BE;
  border-radius: 10px; padding: 2rem 2.2rem; text-align: left;
  box-shadow: 0 1px 3px rgba(56,41,26,.12), 0 8px 22px rgba(56,41,26,.10);
}
.pen-chapter { font-variant: small-caps; letter-spacing: .2em; color: #7C5A17; margin: 0 0 1rem; text-align: center; }
.pen-words { font-size: 1.3rem; line-height: 1.8; color: #38291A; margin: 0; min-height: 3.6rem; }
.pen-words::first-letter { font-size: 2.1em; line-height: 1; color: #1f4d3a; font-weight: 600; padding-right: .08em; }
.pen-honest { font-size: 0.95rem; color: var(--ink-soft, #6A573F); margin-top: 1rem; }
.pen-fallback { font-style: italic; color: var(--ink-soft, #6A573F); }

/* small companion portrait (owner ruling) */
.print--small{max-width:280px;margin:1.2rem auto}
.print--small figcaption{text-align:center}

/* the btn label always visible — no state may hide it (owner 2026-08-11) */
.btn, .btn:link, .btn:visited { color: var(--ink) !important; opacity: 1 !important; }

/* ============================================================
   THE SITE PASS, 2026-09-08 — accessibility and the free door.
   Three small additions, nothing removed:
   · the four setup steps and the device sheet print LARGE, because
     the people this door is for are often reading it at arm's length
     with tired eyes, and the guide is the one page that must not be
     squinted at;
   · the footer comes up to the body size (19px) — it carries the
     free-always line and the address, and 14.7px was too small for
     this room's readers;
   · the door's stacked cards get air between them.
   Contrast is unchanged: every pair here is one of the tables above.
   ============================================================ */

.walk.bigstep h3 { font-size: var(--step-2); }
.walk.bigstep p  { font-size: var(--step-1); line-height: 1.6; }
.walk.bigstep p + p { margin-top: var(--s-3); }

.door-card + .door-card { margin-top: var(--s-5); }
.door-card + p { margin-top: var(--s-5); }

/* The footer at reading size. The uppercase micro-lines keep their own scale. */
.site-foot { font-size: var(--step-0); }
.site-foot .foot-legal { font-size: var(--step--1); }
/* THE INDEPENDENCE DISCLAIMER (owner ruling 2026-09-09) — the short form, in the footer's
   own colour at the footer's small scale, plain: it is a statement of fact, never emphasis. */
.site-foot .independence {
  font-size: var(--step--1); color: var(--dusk-soft);
  max-width: 46rem; margin-top: var(--s-4); font-weight: 400; font-style: normal;
}

/* The address, shown as itself, never doubled by the print rule. */
.mail-text { word-break: break-word; }

/* The care band is a focus target (the first tab stop on every page jumps to it);
   it must never take a focus ring that looks like an error, and never move. */
.care-band:focus { outline: none; }
.care-band:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: -6px; }

/* ============================================================
   THE FINISH PASS, 2026-09-08 — type controls, the note page,
   the Quiet Hour stations. Nothing above this line changed.
   ============================================================ */

/* ---------- Type controls (owner spec) ----------
   Three size steps and one font toggle, living in the header next to the
   nav on every page except the gate (index.html stays sacred — the owner's
   2026-08-11 ruling: nothing is ever added to it). The buttons never sit
   before the two skip-links in the document, so the crisis line keeps the
   first Tab stop everywhere this control appears. */

.type-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2); margin: 0 auto var(--s-4); max-width: none;
}
.type-controls-label {
  font-size: var(--step--2);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: var(--s-1);
}
.type-btn, .font-toggle {
  font-family: inherit;
  background: var(--album);
  color: var(--ink);
  border: 1px solid var(--album-deep);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.type-btn {
  font-weight: 700;
  padding: var(--s-1) var(--s-3);
  font-size: var(--step--1);
  line-height: 1;
  min-width: 2.4rem;
}
.type-btn[data-type="2"] { font-size: var(--step-0); }
.type-btn[data-type="3"] { font-size: var(--step-1); }
.type-btn:hover, .font-toggle:hover { background: var(--album-deep); border-color: var(--gold); }
.type-btn[aria-pressed="true"], .font-toggle[aria-pressed="true"] {
  background: var(--gold-bright); border-color: var(--gold); color: var(--ink);
}
.font-toggle {
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  padding: var(--s-1) var(--s-4);
}

/* The three sizes. The whole site's scale (headings, spacing, body) is
   built on rem, so moving the root percentage moves all of it together —
   "headings scaling with rem". Expressed as a percentage of the browser's
   own default (not a fixed px), so a reader who has already enlarged their
   browser's own text size is never fought; this only adds the room's own
   step on top of whatever that is. Default (no class): the site's current
   19px body stands as size 1, unchanged. */
html.type-2 { font-size: 116%; }  /* body text ~22px on a 16px browser default */
html.type-3 { font-size: 137%; }  /* body text ~26px on a 16px browser default */

/* Easier-to-read font: a plain, high-legibility system stack, never an
   external font file. The whole page reads --serif for both body and
   headings, so redefining that one variable on <html> is enough to carry
   every heading and every paragraph without touching them individually. */
html.font-easy {
  --serif: Verdana, "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

@media (max-width: 560px) {
  .type-controls { gap: var(--s-1); }
  .type-controls-label { display: block; width: 100%; margin: 0 0 var(--s-1); }
}

/* ---------- The note page's grouped short lines ----------
   "We are here to keep you company." and its neighbors stand as the owner
   wrote them: one small block, each line its own line, never re-flowed
   into one sentence. */
.note-lines { line-height: 1.55; }

/* ---------- The Quiet Hour stations (verbatim list, generous tap targets) ----------
   Large type, one station per row, the whole row a comfortable target even
   though only the name itself is the link. */
ul.quiet-hour {
  list-style: none; padding: 0; margin: var(--s-5) auto; max-width: var(--measure);
  text-align: left; display: grid; gap: var(--s-3);
}
ul.quiet-hour li {
  font-size: var(--step-1);
  line-height: 1.5;
  background: var(--paper);
  border: 1px solid var(--album-deep);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-1);
  margin-bottom: 0;
}
ul.quiet-hour a {
  font-weight: 700;
  display: inline-block;
  padding: var(--s-2) 0;
}
.qh-note {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-style: italic;
}
.qh-law {
  font-size: var(--step-0);
  color: var(--ink-soft);
  margin-top: var(--s-5);
}

@media print {
  .type-controls { display: none !important; }
}

/* the Pen is tried at the room's own door — one honest line where the widget stood */
.pen-first{font-size:1.1rem;line-height:1.6;margin:1rem 0 1.5rem;max-width:42rem}

/* the gate's headline lives in HTML, never in the image (owner visual law 2026-09-08) */
.gate-headline{font-size:1.5rem;line-height:1.35;margin:.6rem 0 .3rem;font-weight:600}
.gate-underline{font-size:1.15rem;line-height:1.5;margin:0 0 1rem}

/* the welcome image beside the player (owner image 2026-09-08, cleaned to the visual law) */
#the-welcome{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:start}
@media (min-width:56rem){#the-welcome{grid-template-columns:minmax(16rem,22rem) minmax(0,1fr)}#the-welcome .welcome-figure{grid-row:1/span 6}}
.welcome-figure{margin:0}.welcome-figure img{width:100%;height:auto;border-radius:.6rem;display:block}

.welcome-heading{font-size:1.6rem;line-height:1.3;margin:0 0 .4rem}

.mission-tagline{font-weight:600;letter-spacing:.01em}


/* ── NEED HELP? and QUESTIONS ABOUT THIS ROOM (the CE's fixes, owner 2026-09-09) ──
   Native <details>: no script, keyboard and screen-reader ready, closed until asked. The road
   before the manual on Sign Up; one plain Q&A at the foot of every room. */
details.need-help, details.ask { max-width: 46rem; margin: 1.2rem auto; border: 1px solid rgba(90, 70, 40, .25); border-radius: .5rem; background: rgba(255,255,255,.35); text-align: left; }
details.need-help > summary, details.ask > summary { cursor: pointer; padding: 1rem 1.2rem; font-size: 1.15em; font-weight: 600; list-style: none; }
details.need-help > summary::-webkit-details-marker, details.ask > summary::-webkit-details-marker { display: none; }
details.need-help > summary::before, details.ask > summary::before { content: "\2726\00a0"; }
details[open] > summary { border-bottom: 1px solid rgba(90, 70, 40, .2); }
details.need-help > section { padding-top: 0; }
details.ask .ask-q { padding: .6rem 1.2rem; }
details.ask .ask-question { margin: 0 0 .25rem 0; }
details.ask .ask-answer { margin: 0; }
.two-things { max-width: 46rem; margin: 1.2rem auto 1.6rem; }

/* ── THE SPOKEN GUIDE AND THE THRESHOLD ─────────────────────────────────────────────
   THE SPOKEN NAVIGATION LAW (owner ruling, 2026-09-09). Every one of these controls
   ships in the HTML carrying the `hidden` attribute and is un-hidden only by voice.js,
   so a page with JavaScript off looks and behaves exactly as it did before. High
   contrast on the house's own paper, large targets for a hand that shakes, and a
   threshold band wide enough that "tap anywhere" is nearly true.                     */
.voice-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2); margin: 0 auto var(--s-4);
}
.voice-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.2;
  min-height: 3rem;
  padding: var(--s-2) var(--s-4);
  background: var(--album);
  color: var(--ink);
  border: 2px solid var(--gold-deep);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.voice-btn:hover { background: var(--album-deep); border-color: var(--gold); }
.voice-btn[aria-pressed="true"] { background: var(--gold-bright); border-color: var(--gold-deep); }
.voice-btn--tour { font-weight: 400; }
.voice-status {
  margin: 0; font-size: var(--step--1); color: var(--ink-soft); font-style: italic;
}
.voice-status[data-on="yes"] { color: var(--brick); font-style: normal; font-weight: 700; }

.voice-threshold { margin: 0 0 var(--s-4); text-align: center; }
.voice-threshold--banner { margin: var(--s-3) auto var(--s-5); max-width: 60rem; }
.voice-threshold--gate {
  display: block; width: 100%; margin: var(--s-4) 0 var(--s-3);
}
.voice-begin {
  display: block; width: 100%;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.35;
  min-height: 5.5rem;
  padding: var(--s-4) var(--s-3);
  background: var(--dusk);
  color: var(--dusk-text);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.voice-begin:hover { background: var(--olive); color: var(--flag-white); }
/* THE SECOND LINE of the threshold (THE SPOKEN WAKE, owner 2026-09-09): the other two
   ways through the door — a word, or any key at all — under the words that were there. */
.voice-begin-say { display: block; margin-top: var(--s-2); font-size: var(--step-0); font-weight: 600; }
.voice-threshold--gate .voice-begin { margin-bottom: var(--s-3); }

@media print {
  .voice-controls, .voice-threshold { display: none !important; }
}

/* THE DEDICATION (owner 2026-09-10: released on September 11 "for all veterans and emergency… all of the people we've lost and… the services we are so proud and thankful for") */
.dedication { font-style: italic; margin: 0.6rem auto 1.2rem; max-width: 34rem; }

/* THE WELCOME AS A PAGE FROM A BOOK (owner 2026-09-10: "add the picture to the top of the page and the tab for the
   voice. then the dialogue write it like it is actually a page in a book… make the image thin across the top" ·
   "i asked for a page not a long single column" · "the image is cut off") — the welcome slot was a grid that
   shrank the page to its content; the page now takes the full width, opens as a two-column spread on a wide
   screen, and the band keeps the veteran's face in the frame. */
.welcome-band .wrap--narrow { max-width: 62rem; }
#the-welcome.welcome-slot, .welcome-band .welcome-slot { display: block; grid-template-columns: none; text-align: center; }   /* the old two-column grid of the first welcome (line ~1007) squeezed the page to its content; the book page takes the width */
@media (min-width:56rem) { #the-welcome.welcome-slot { grid-template-columns: none; } }
.banner { margin: 0 0 var(--s-6); }
.banner img { display: block; width: 100%; height: clamp(200px, 30vw, 320px); object-fit: cover; object-position: 50% 14%; border-radius: 6px; }
.book-page {
  display: block; width: 100%; max-width: 62rem; box-sizing: border-box;
  background: #FFFDF7; color: var(--ink); text-align: left;
  border: 1px solid rgba(56, 41, 26, 0.18); box-shadow: 0 12px 34px rgba(56, 41, 26, 0.14);
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 5vw, 3.4rem); margin: var(--s-6) auto; position: relative;
}
.book-page::before { content: ""; display: block; height: 2px; background: var(--ink); opacity: 0.25; margin: 0 auto 1.4rem; width: 5rem; }
.book-page .welcome-heading { text-align: center; font-variant: small-caps; letter-spacing: 0.08em; font-size: var(--step-1); margin: 0 0 1.4rem; }
.book-page .welcome-script { margin: 0; max-width: none; width: 100%; font-size: 1.08rem; line-height: 1.72; text-align: left; }
.book-page .welcome-script p { margin: 0 0 0.95em; break-inside: avoid; }
.book-page .welcome-script p:first-of-type::first-letter { float: left; font-size: 3.2em; line-height: 0.82; padding: 0.06em 0.12em 0 0; font-weight: 600; }
.book-page::after { content: "\2767"; display: block; text-align: center; margin-top: 1.2rem; opacity: 0.6; font-size: 1.4rem; }
@media (min-width: 56rem) {
  .book-page .welcome-script { column-count: 2; column-gap: 3.4rem; column-rule: 1px solid rgba(56, 41, 26, 0.16); }
}
@media (max-width: 40rem) { .book-page { padding: 1.3rem 1.05rem; } .book-page .welcome-script { font-size: 1.04rem; } .banner img { height: clamp(170px, 46vw, 240px); object-position: 50% 10%; } }
@media (prefers-reduced-motion: reduce) { .book-page { box-shadow: none; } }
@media print { .book-page { box-shadow: none; border-color: #999; } .book-page .welcome-script { column-count: 1; } }

/* HELP US PRESERVE THEIR STORIES (the CE's ruling 2026-10-06; supersedes on WMW the 2026-10-05 footer block) — the
   sponsorship section, immediately before the footer on every public page (never the gate, never the door's pages),
   on the album bed so it reads apart from the evening footer below it. Contrast on --album #F3E7D3: ink 11.6 ·
   ink-soft 5.6 · olive 6.6 · gold-deep link 5.1; on --paper (the two cards): ink 12.78 · ink-soft 6.29. The two buttons
   are the house's own gold .btn (ink on gold-bright 7.35), wrapping with grace at 375px, the warm focus ring kept. */
.preserve .kicker { margin-bottom: var(--s-2); }
.preserve-free {
  font-size: clamp(var(--step-1), 3vw, var(--step-2)); font-weight: 700; line-height: 1.35;
  color: var(--olive); letter-spacing: 0.02em; margin: 0 auto var(--s-6);
}
.preserve-ways-head { font-size: var(--step-1); margin-top: var(--s-6); }
.preserve-ways {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5); margin: var(--s-5) 0 var(--s-6); text-align: center;
}
.preserve-way {
  min-width: 0; background: var(--paper); border: 1px solid var(--album-deep); border-radius: var(--radius);
  padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; justify-content: space-between;
}
.preserve-way h4 { margin-bottom: var(--s-2); }
.preserve .btn.preserve-btn { padding: var(--s-4) var(--s-5); line-height: 1.45; max-width: 100%; box-sizing: border-box; }
.preserve-fine { font-size: var(--step--1); color: var(--ink-soft); }
.preserve-close { margin-top: var(--s-5); margin-bottom: 0; }
.preserve-close strong { color: var(--ink); font-size: var(--step-1); }
@media print { .preserve-way { background: #fff; border-color: #999; } .preserve-free { color: #000; } }
/* the footer's small "Support WMW" link (every page with the site footer), in the footer nav's own voice */
.foot-support-link a { letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step--1); }
.foot-other { margin-top: var(--s-4); }
/* the footer's "Other systems" name in the footer's own light, on every page (the door's sheet darkens <strong>) */
.site-foot .foot-other strong { color: var(--dusk-text); }
@media print { .site-foot .foot-other strong { color: #000; } }
.site-foot .foot-support-link { margin-top: var(--s-5); }

/* ── 2026-10-11 (the canon): the feature status labels (WD9), the build stamp (N23), the help-now button (N1) ── */
.wmw-status-line { font-size: 0.92em; margin: 0.35em 0 0.8em; }
.wmw-status { display: inline-block; padding: 0 0.55em; border: 1px solid currentColor; border-radius: 0.7em; font-weight: 600; }
.build-stamp { font-size: 0.85em; opacity: 0.85; }
.help-now-row { text-align: center; margin: 0.6em 0; }
.help-now { font-weight: 700; }