/* ==========================================================================
   TODAY'S WORD — the daily scripture band (front page) and its archive (/word/)

   DIRECTION: a lectern on the oak page. The scripture is set apart in the
   DISPLAY face at reading size behind a brass rule down its start edge, so
   the passage reads as something to dwell on rather than as another card in a
   grid. Boldness is spent in exactly one place — that passage block. The
   eyebrow, the heading, the reflection body and the quiet mono link are the
   site's existing voice, untouched.

   WHY NO SERIF. The brief suggested "larger serif-feel". This site declares
   exactly three families (Inter Tight display / Inter body / JetBrains Mono
   label) and there is not one serif rule anywhere in styles.css. A fourth
   webfont would be a new render-blocking download on the FRONT page — the
   surface whose first paint was cut on 2026-08-16 specifically by getting
   styles.css off the critical path — and a system serif (Georgia) is the one
   thing on the page whose metrics were never measured against the
   metric-matched Arial fallbacks in styles.css, so a lost font race would
   move this block and nothing else. The reverence is bought with the register
   instead: the display face at 21-27px, weight 600, leading 1.5 and open
   tracking is a genuinely distinct THIRD voice against the section heading
   (37px+/700/-0.025em, leading ~1.05) and the body (16.5px/400/1.6). It reads
   as set-apart text, which is the actual requirement.

   Its own sheet, per the per-page rule in the head of index.html: styles.css
   is shared by all fourteen youth pages and is served immutable for a year,
   so a rule added there costs a ?v= bump on every one of them.
   ========================================================================== */

/* ── the band ───────────────────────────────────────────────────────────── */

/* The band sits between the events rail (on the bare cream body) and the
   photo shelf (.on-grain, oak-100 with its own hairlines). --bone is a step
   darker than both, so the alternation is visible in both directions and the
   paper card below lifts off it instead of tinting into it. */
.dw-band .dw-head { margin-bottom: 18px; }
/* THE BAND GOES INK (2026-09-21, the owner: "do you think we need less text
   and more differentiation between sections on the front page?"). Six cream
   sections in a row read as one long page; the reading is the longest of them
   and he has ruled twice that it is never cut (09-06, 09-18). So the words
   stay and the room changes: the hero's ink comes back once, mid-page, and the
   reading sits in it. Everything in this sheet is drawn from tokens, so the
   band re-points the tokens and no rule below needs a dark twin. /word/ has no
   .dw-band and keeps its paper. Contrast on #141d31: body #d9d3c6 11.4:1,
   quiet #aab0ba 7.6:1, gold #ecc35c 9.9:1. */
.dw-band.on-light {
  background: #0d1526;
  --paper: #141d31;
  --ink: #fbf7ef;
  --ink-rgb: 251, 247, 239;
  --graphite: #d9d3c6;
  --steel: #aab0ba;
  --fg-quiet: #aab0ba;
  --gold-text: #ecc35c;
  --line: rgba(251, 247, 239, 0.14);
  --control-bg: rgba(251, 247, 239, 0.06);
  --shadow-card: 0 1px 0 rgba(251, 247, 239, 0.05) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.6);
  color: #fbf7ef;
}
.dw-band.on-light .eyebrow { color: #ecc35c; }
.dw-band.on-light .dw-chip { background: rgba(251, 247, 239, 0.06); }
/* REFRAMED 2026-08-20 (Daniel: "it doesn't make it clear what this is").
   The head now says what the feature IS in the site's ordinary voice, and the
   day's title moved inside the card, so the card edge is where the reading
   starts and its foot is where it ends. */
.dw-lede {
  margin: 10px 0 0;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--steel);
}
.dw-card-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(16px, 1.4vw + 10px, 22px);
}
.dw-card-head h2 {
  /* the DAY'S OWN title — a step below the section-heading scale now that it
     titles the card, not the band */
  margin: 0;
  font-size: clamp(24px, 1.5rem + 0.8vi, 30px);
  line-height: 1.12;
}
/* ── THE CHIP ROW (2026-08-19) ──────────────────────────────────────────────
   The owner, on the v6 readings: "it seems like just plain text… people aren't
   gonna read this whole massive section." A 210-word reading is a one-minute
   read, but nothing on the page SAID so, and the eye priced it by height.

   So the head now carries three mono tokens — the day, the reference, and the
   honest read time — before the reading starts. They are the scan anchors: you
   learn what this is and what it costs you before you commit to the first line.
   The read time is computed from the entry's own word count at 200 wpm, never
   typed (the "every number real" rule): every entry in the file lands at 1. */
.dw-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.dw-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}
/* The baked fallback ships the DAY chip EMPTY on purpose and daily-word.js
   fills it. A date is the one thing in the band that goes stale: hard-coding
   "Tuesday, August 18" into the static fallback would print a wrong day on any
   later morning the API happens to be down. Empty claims nothing, collapses. */
.dw-chip:empty { display: none; }
/* the reference is the one chip that names the reading itself, so it carries
   the ink voice; the day and the time are meta around it */
/* the read time is the answer to "is this a wall?", so it is the one tinted
   token in the row — gold, the site's only accent, with the same live dot the
   rest of the site uses for a "right now" fact */
.dw-chip-time {
  color: var(--gold-text);
  background: rgba(201, 154, 46, 0.11);
  border-color: rgba(201, 154, 46, 0.42);
}
.dw-chip-time::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-deep);
}

/* ── the card ───────────────────────────────────────────────────────────── */
.dw-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 2vw + 14px, 34px);
  display: grid;
  gap: clamp(22px, 2vw + 14px, 30px);
}

/* Two columns only where there is room for both to keep a readable measure.
   Below this the passage simply leads and the reflection follows it, which is
   the order you would read them in anyway. */
@media (min-width: 900px) {
  .dw-card {
    grid-template-columns: 1.02fr 1fr;
    gap: clamp(30px, 3vw, 48px);
    align-items: start;
  }
  /* The head went INSIDE the card on 2026-08-20; without this span it lands in
     a grid cell BESIDE the passage, leaving a hole under the title exactly as
     tall as the quote (Daniel saw it on the Mac the same evening). Full width:
     title row first, then reflection and passage start level together. */
  .dw-card-head { grid-column: 1 / -1; }
  /* The two columns are rarely the same length. The passage used to be CENTRED
     against the taller one, which was right while it was bare text on paper —
     it had no edges, so the air around it read as air. Since 2026-08-19 it
     carries its own wash, and a tinted block floating in the middle of an empty
     column reads as a mistake instead of as a decision. It now sits at the TOP,
     level with the first line of the reflection: the two movements start
     together and the air falls to the foot of the card, where the controls are. */
  .dw-passage { align-self: start; }
  .dw-foot { grid-column: 1 / -1; }
}

/* ── THE SIGNATURE: the passage ─────────────────────────────────────────── */
.dw-passage {
  margin: 0;
  padding-inline-start: clamp(18px, 1.5vw + 12px, 26px);
  padding-inline-end: 14px;
  padding-block: 13px;
  border-inline-start: 3px solid var(--accent);
  /* 2026-08-19: the rule alone left the quotation sitting in the same white as
     the paragraph under it, so the two movements read as one column of text.
     A short wash off the brass rule gives the scripture its own ground and
     fades out before the measure ends, so it reads as a lit lectern rather
     than as a second card inside the card. No new colour: it is the accent at
     8%, the same family as every other tint on the page. */
  background: linear-gradient(to right, rgba(201, 154, 46, 0.085), rgba(201, 154, 46, 0) 72%);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.dw-passage p {
  font-family: var(--font-display);
  /* min 21 / max 27 — a 1.29x range, well inside the 2.5x ceiling, and the
     preferred value carries its rem term so text-only zoom still resizes it */
  font-size: clamp(21px, 1.3125rem + 0.55vi, 27px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

/* ── POETRY IS SET AS POETRY ────────────────────────────────────────────────
   Ten of the thirty readings are psalms or prophets, and the content file
   carries their verse lines as real newlines. The first pass rendered them
   with white-space: pre-line, which was wrong on a phone in a way that only a
   screenshot shows: at 390px a verse line is wider than the column, so it
   WRAPS — and a wrapped continuation looked exactly like the next verse line.
   Psalm 25 read as nine ragged lines instead of five couplets, and the
   parallelism, which is the whole shape of Hebrew poetry, was unreadable.

   So each verse line is its own block with a HANGING INDENT — the way a
   printed Bible sets poetry. A true verse line starts hard against the brass
   rule; a wrapped continuation is indented under it. The two can no longer be
   confused at any width. daily-word.js builds the spans; the baked fallback
   ships them already built. */
.dw-line {
  display: block;
  padding-inline-start: 1.15em;
  text-indent: -1.15em;
}
/* Verse sets one step smaller than prose so fewer lines need to wrap at all —
   the hanging indent makes a wrap legible, but not wrapping is better still. */
.dw-passage.is-verse p {
  font-size: clamp(19px, 1.1875rem + 0.5vi, 25px);
}

/* ── ON A PHONE THE VERSE IS A QUOTATION, NOT A POEM (Daniel, 2026-08-21) ───
   The hanging indent above was the right answer to the WRONG problem. It made
   a wrapped continuation tellable from a real verse line, which is true — but
   at 390px almost EVERY verse line wraps, so what a reader actually got was
   Proverbs 4:23 set as "Keep your heart with / all vigilance," — two short
   ragged lines, the second one indented, then a full-width third. Daniel's
   screenshot of the front page is that, and he is right that it reads badly:
   a couplet broken for a wide column and then broken again by the phone is
   not poetry, it is a typographic accident.

   So below the width where a verse line actually FITS, the hard breaks are
   dropped and the scripture flows as one clean quotation. Nothing is lost:
   the line breaks the content file carries are still in the markup, still in
   what the Copy button puts on somebody's clipboard, and still set as poetry
   the moment there is a column wide enough to hold a line. This is a change of
   SETTING at one width, not a change of content.

   620px, not 430: the phones are 375/390/430, but the failure is the column
   being too narrow for a line, and that is still true on a small tablet in
   portrait. Above it the printed-Bible setting stands exactly as it was.

   `display: inline` runs the spans together with no separator (the spans are
   built adjacent, with no whitespace between them), so the ::before restores
   the space that the line break used to be. Without it a reader gets
   "vigilance,for". */
@media (max-width: 620px) {
  .dw-line {
    display: inline;
    padding-inline-start: 0;
    text-indent: 0;
  }
  .dw-line + .dw-line::before { content: ' '; }
  /* the smaller verse step existed only to make fewer lines wrap; flowing as
     prose there is nothing left to protect, so the scripture reads at the one
     size every other passage reads at */
  .dw-passage.is-verse p {
    font-size: clamp(21px, 1.3125rem + 0.55vi, 27px);
  }
  .dw-passage.is-verse.is-long p {
    font-size: clamp(18px, 1.125rem + 0.35vi, 22px);
    line-height: 1.55;
  }
}
/* Longer passages set smaller — the ordinary typographic answer, and the one
   that keeps a 750-character gospel reading (Luke 18:9-14 is the longest in
   the file) from turning the front-page band into two screens of one voice.
   daily-word.js adds the class from the passage's own length; nothing is ever
   truncated, because clipping scripture with an ellipsis is not an option. */
.dw-passage.is-long p {
  font-size: clamp(18px, 1.125rem + 0.35vi, 22px);
  line-height: 1.55;
}
.dw-ref {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;          /* <cite> italicises by default */
  color: var(--steel);
  margin-top: 16px;
}
/* The reference itself, bold and directly under the quotation (Daniel,
   2026-08-20: "the bible verse should be more prevalent right next to the
   actual text") — it speaks in the display voice, not the mono chrome the
   rest of the attribution line uses. */
.dw-cite-ref {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-text);
}
/* the translation is rendered as its own token so the attribution can never
   be lost to a content edit, and can never be written twice */
.dw-version {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-pill);
  color: var(--gold-text);
  letter-spacing: 0.14em;
}

/* ── THE CONNECTION CHIP — the feature's signature ──────────────────────────
   "August 18 · Romans 8:18": the calendar date read as chapter:verse. It sits
   directly under the reference because it is a statement ABOUT the reference,
   and it is the one thing on the card a returning visitor looks for.

   It is a FILLED gold-tinted chip so it never reads as a second copy of the
   ESV pill beside it — that one is a bare outline and names a translation,
   this one is tinted and names the day's tie. Gold is already the accent, so
   the twist gets colour without the card gaining a new hue.

   Shown ONLY when the entry carries the field: the pages leave the element
   empty otherwise and :empty collapses it, so an entry with no tie loses the
   chip rather than printing an empty pill.

   IT IS A <div>, NOT A <p>, AND THAT IS LOAD-BEARING. The chip lives inside
   the blockquote (it has to — on the ≥900px card the blockquote is a grid
   ITEM, so a sibling after it would jump into the reflection's column). But
   `.dw-passage p` above sets the scripture voice at specificity (0,1,1),
   which beats this rule's (0,1,0) — as a <p> the chip silently rendered at
   23px in the display face in ink, three lines tall, with none of the type
   below applying. Measured, not guessed: font-size 23.145px, colour
   rgb(13,21,38), height 83px. Keeping the chip a non-<p> element keeps
   `.dw-passage p` honest — the only <p> in that blockquote IS the passage. */
.dw-connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(201, 154, 46, 0.13);
  border: 1px solid rgba(201, 154, 46, 0.42);
  color: var(--gold-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* the tie is two halves joined — never let it break across lines mid-pair */
  text-wrap: balance;
}
.dw-connection:empty { display: none; }
/* the knot: a tiny filled diamond, the one mark that says "these two are the
   same thing". Not an emoji, not a decorative eyebrow — it encodes the join. */
.dw-connection::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  transform: rotate(45deg);
  background: var(--accent-deep);
}

/* ── the reading half ───────────────────────────────────────────────────── */
.dw-read { display: grid; gap: 20px; align-content: start; }

/* ── THE REFLECTION IS SET IN STANZAS (2026-08-19) ──────────────────────────
   The v6 readings run 142-168 words of reflection in a dozen short sentences,
   and the first pass printed all of it as ONE paragraph. That is the "massive
   section of text" the owner saw: a fourteen-line block at 390px with no place
   for the eye to rest, so it reads as an obligation before it reads as a
   thought.

   Nothing is cut and nothing is rewritten — the same words are broken at their
   own sentence boundaries into three near-equal stanzas (daily-word.js and the
   staging script use the same rule, so the API paint and the baked fallback
   break in the same places). Three short blocks with air between them is the
   ordinary editorial answer, and it is the whole difference between a wall and
   a page.

   The first stanza sets one step up, in ink rather than graphite: it is the
   stand-first that carries you off the scripture and into the thought. */
.dw-reflection {
  display: grid;
  gap: 15px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 0;
  max-width: 56ch;
}
.dw-stanza { margin: 0; }
.dw-stanza:first-child {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink);
}

/* ── THE CHARGE IS THE CLOSING MOMENT ───────────────────────────────────────
   It was a fourth paragraph under a hairline, which is where a reader's
   attention is lowest. It is now a tinted panel — the one accented surface on
   the card — so the last thing on screen is the thing you are meant to carry
   out the door, and the three movements (passage · reflection · charge) each
   have a shape of their own. The tint is the same gold family as the wash on
   the passage, one step stronger. */
.dw-charge {
  margin: 0;
  padding: 15px 17px 16px;
  border: 1px solid rgba(201, 154, 46, 0.38);
  border-radius: var(--radius-card);
  background: linear-gradient(140deg, rgba(201, 154, 46, 0.14), rgba(201, 154, 46, 0.045));
}
.dw-charge-k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
/* the same filled diamond the connection chip uses — on this site that mark
   means "this is the point of the two things above it" */
.dw-charge-k::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  transform: rotate(45deg);
  background: var(--accent-deep);
}
.dw-charge-t {
  display: block;
  margin: 8px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

/* ── the foot: copy control + the way to every other day ─────────────────
   The archive link is a BUTTON, not a bare text line (Daniel 2026-08-20: the
   path to the rest of the readings "isn't very clear"), and the hairline above
   the row closes the card the same way the head's hairline opens it. */
.dw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: clamp(16px, 1.4vw + 10px, 20px);
}
.dw-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(201, 154, 46, 0.55);
  background: rgba(201, 154, 46, 0.10);
  color: var(--gold-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--press-up) var(--ease-press),
              border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.dw-all:active { transition-duration: var(--press-down); transform: scale(0.97); }
.dw-all:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; }
@media (any-hover: hover) {
  .dw-all:hover { border-color: var(--gold-ring); background: rgba(201, 154, 46, 0.16); }
}
/* when the copy button is absent (no clipboard / JS off), the way to the
   archive holds the row alone and stays full-width tappable on a phone */
@media (max-width: 430px) {
  .dw-all { flex: 1; }
}
/* ships hidden and is unhidden by daily-word.js once it is wired, so a dead
   control is never shown to a visitor with JS off (the rail-nav idiom) */
.dw-copy[hidden] { display: none; }
.dw-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  border: 1.5px solid var(--control-line);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--press-up) var(--ease-press),
              border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.dw-copy:active { transition-duration: var(--press-down); transform: scale(0.97); }
.dw-copy:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; }
@media (any-hover: hover) {
  .dw-copy:hover { border-color: var(--ink); background: rgba(var(--ink-rgb), 0.04); }
}
.dw-copy svg { width: 15px; height: 15px; flex: none; }
.dw-copy.is-done { border-color: var(--gold-ring); color: var(--gold-text); }

/* ══════════════════════════════════════════════════════════════════════════
   /word/ — the archive
   ═════════════════════════════════════════════════════════════════════════ */

.dw-archive { padding-top: clamp(28px, 3vw + 16px, 46px); }

/* one hairline-separated column, exactly like .ministry-list on /serve/ —
   thirty entries is a LIST, and giving each one a card would make the page a
   grid of thirty boxes that all look equally important */
.dw-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  max-width: 780px;
}
.dw-entry { border-bottom: 1px solid var(--line); }

/* native <details>: no hand-rolled show/hide, keyboard and find-in-page work
   for free, and the open row is a real disclosure (TECHNIQUES §5 primitives) */
.dw-entry summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 17px 4px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  box-sizing: border-box;
}
.dw-entry summary::-webkit-details-marker { display: none; }
.dw-entry summary:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: -2px; border-radius: var(--radius); }
@media (any-hover: hover) {
  .dw-entry summary:hover .dw-entry-t { color: var(--gold-text); }
}
.dw-entry-d {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  flex: none;
  /* a fixed column so thirty dates form a true left rail rather than a ragged
     edge; sized against the longest real string ("SEP 30") plus air */
  min-width: 62px;
}
.dw-entry-t {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  transition: color var(--t-fast) var(--ease);
}
.dw-entry-r {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-quiet);
  flex: none;
  text-transform: uppercase;
}
/* the reference is the least useful of the three on a phone — the title and
   the date are what you scan by, so it steps out rather than wrapping the row
   onto a second line */
@media (max-width: 559px) {
  .dw-entry-r { display: none; }
}
.dw-chev {
  flex: none;
  width: 16px; height: 16px;
  color: var(--steel);
  transition: transform var(--t-fast) var(--ease);
  align-self: center;
}
.dw-entry[open] .dw-chev { transform: rotate(90deg); }

.dw-body {
  padding: 2px 4px 26px;
  display: grid;
  gap: 20px;
}
/* The open entry gets the same read-time token as the band — it is the answer
   to "how long is this", asked at the moment the row opens. The reference now
   rides the quote's own attribution line (2026-08-20), so no chip carries it. */
.dw-body .dw-chips { margin: 0 0 -4px; }
.dw-body .dw-passage { padding-inline-start: clamp(16px, 1.2vw + 11px, 22px); }
.dw-body .dw-passage p { font-size: clamp(19px, 1.1875rem + 0.4vi, 23px); }
.dw-body .dw-reflection { max-width: 62ch; }

/* the ESV licence line — required wherever the text is published */
.dw-legal {
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 780px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-quiet);
}

/* designed states, never a blank hole — the #week-fallback idiom */
.dw-note {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  max-width: 780px;
  color: var(--steel);
  font-size: 16px;
}
.dw-note[hidden] { display: none; }

/* Entrances are motion.js's job via [data-reveal]; nothing here animates on
   its own, so there is no infinite loop to kill. The only movement this sheet
   owns is the chevron and the press scales, and both are transitions the
   sitewide reduced-motion clamp already flattens. */

/* ── the bridge + the sermon footnote (new voice, 2026-08-20) ──────────────
   The bridge lands the reading in a young person's actual week; the deeper
   line names the sermon the idea was drawn from. Both are quiet on purpose:
   the entry is a complete one-minute read on its own and the sermon is an
   optional deeper dive, never the point (Daniel's ruling 2026-08-20). */
.dw-bridge {
  margin: -6px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--steel);
}
/* Quiet is COLOUR here, not size (audit 2026-08-30). This line sat at 14.5px —
   under the 16px body floor, and it carries the only link in the block, so the
   tap target was set in undersized type too. It reads as the aside it is
   through --fg-quiet and its position, exactly like .dw-bridge above, which is
   the same voice at the body size. Nothing else about the block changes. */
.dw-deeper {
  margin: -4px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-quiet);
}
.dw-deeper a {
  color: var(--graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--oak-400);
}
.dw-bridge[hidden], .dw-deeper[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   THE TWO MARKS A MEMBER CAN LEAVE ON A READING (2026-08-21)
   ═════════════════════════════════════════════════════════════════════════
   A heart ("this landed") and a bookmark ("keep it for me"). Built by
   daily-word.js and ONLY for a signed-in member — a visitor who is not signed
   in never has this row in their page at all, so none of these rules ever
   paint a control nobody may use.

   NO COUNT IS EVER RENDERED HERE. There is no number in this row and no room
   made for one: how many people hearted a reading is a back-office number, not
   a score on a devotional (Daniel, 2026-08-21).

   The row borrows .dw-copy's shape rather than inventing a control voice —
   same pill, same mono lettering, same press-down — because it sits inches
   from that button on the band and a second button language would read as a
   different site.

   TWO CHANGES BETWEEN OFF AND ON, never one: the icon fills solid AND the
   border and lettering go brass. Colour alone is not a state.
   NO ENTRANCE ANIMATION: the row appears with the reading it belongs to. */
.dw-marks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}
.dw-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 44px is the tap target, not a nicety — this is a phone control */
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  border: 1.5px solid var(--control-line);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--press-up) var(--ease-press),
              border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.dw-mark svg { width: 15px; height: 15px; flex: none; }
.dw-mark:active { transition-duration: var(--press-down); transform: scale(0.97); }
.dw-mark:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; }
@media (any-hover: hover) {
  .dw-mark:hover { border-color: var(--ink); background: rgba(var(--ink-rgb), 0.04); }
}
.dw-mark.is-on {
  border-color: var(--gold-ring);
  background: rgba(201, 154, 46, 0.10);
  color: var(--gold-text);
}
@media (any-hover: hover) {
  .dw-mark.is-on:hover { background: rgba(201, 154, 46, 0.16); border-color: var(--gold-ring); }
}
/* on a 390px phone the two controls hold the row together rather than leaving
   a ragged gap on the right — the same rule .dw-all follows one row below */
@media (max-width: 430px) {
  .dw-mark { flex: 1; padding: 0 12px; }
}
/* in the archive the row closes an entry, so it needs the breathing space the
   band's foot hairline gives it there */
.dw-body .dw-marks { margin-top: 6px; }