/* Hallmark · shape: the open Bible · genre: editorial · theme: custom · job: try · copy: verbatim · idea: "The site is the Bible itself, open on a lectern in window light: read the page, press Listen and hear it, turn to a verse for how you feel, then ask it" · vibe: "reverent, bright Bible paper, morning light"
 * paper: oklch(97.6% 0.008 88) · accent: oklch(62% 0.115 78) · display: Cormorant Garamond (the brand's colophon face) · body: Literata (the brand's reading face) · hero: a two-page spread in window light, a centred title page beside Psalm 23 with Listen in its running head, the ribbon in the gutter, and a row that turns the page to a verse for how you feel · nav: a quiet masthead, the wordmark, six links, the theme and the light's pause · footer: colophon block with the site's language links · imagery: the product itself, real Scripture in nine Bibles and the real narration · signature: the open Bible turning to the passage for a feeling, each verse warmed in gilt from the gutter as the narrator reads it
 * axes: light/roman-serif/warm · posture: full palette (leaf, linen ground, gilt signal, ribbon crimson seal) · contrast: pass · fold: pass · v2.0.0 · finish-review: subagent · 8 findings · 8 resolved */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a Bible page is the expected picture for a Bible site; made it the working product instead: the real psalm, the real narrator, the turning page, the real nine Bibles, notes, email and plan */
/* Hallmark · dismissed render · the file:// pass cannot reach the site's root /fonts/, so only that copy falls back; served through the site, Cormorant Garamond and Literata load */
/* Hallmark · dismissed 25 · the large verses (For the heart today, the verse of the day) are one or two sentences of Scripture set at statement size */
/* Hallmark · waive 37 · the extra families are the system serif stacks for Chinese, Korean and Arabic, the same stacks public/css/site.css names, never loaded as web fonts · each translated home sets its Scripture in its own script's book face */
/* Hallmark · waive 81 · four gradient shafts with no picture in them, three on the ground and one across the open leaves · they are the window light itself falling on the lectern and the Bible, not picture slots */
/* Hallmark · waive 29 · daylight drifting across the linen ground and one warm shaft across the open Bible · the owner asked for drifting light, and window light on an open Bible on a lectern is this page's scene */

/* The shared design system (tokens, type, colour, the masthead and its menu, buttons) is /site.css, loaded first. */

/* Base: what the Floor decided. */
html { scroll-padding-top: var(--space-3xl); }
h1, h2, h3 { margin: 0; min-width: 0; }
p { margin: 0; text-wrap: pretty; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
main, .colophon { position: relative; z-index: var(--z-base); }

/* The window light on the ground: three soft shafts of daylight, drifting slowly. Soft by gradient, not by filter,
   so a phone's GPU paints them cheaply while the page scrolls. */
.light { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.light i { position: absolute; top: -18vh; width: 22vw; min-width: 180px; height: 136vh; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-light) 88%, transparent), color-mix(in oklab, var(--color-light) 34%, transparent) 55%, transparent); transform: skewX(-17deg); animation: drift var(--dur-light) var(--ease-in-out) infinite alternate; will-change: transform; }
.light i:nth-child(1) { inset-inline-start: -4vw; }
.light i:nth-child(2) { inset-inline-start: 18vw; width: 12vw; animation-delay: -14s; }
.light i:nth-child(3) { inset-inline-start: 32vw; width: 16vw; opacity: 0.6; animation-delay: -27s; }
@keyframes drift { to { transform: skewX(-17deg) translateX(16vw); } }
:root[dir="rtl"] .light i { transform: skewX(17deg); animation-name: drift-rtl; }
@keyframes drift-rtl { to { transform: skewX(17deg) translateX(-16vw); } }
.light-paused .light i, .light-hidden .light i, .light-paused .book__shaft, .light-hidden .book__shaft, .shaft-off .book__shaft { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .light i, .book__shaft { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.lighttoggle { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-2xs); border: 0; background: none; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.lighttoggle svg { width: 13px; height: 13px; }
.lighttoggle .i-play, .lighttoggle[aria-pressed="true"] .i-pause { display: none; }
.lighttoggle[aria-pressed="true"] .i-play { display: inline; }
.lighttoggle .lt-short, .lighttoggle .lt-resume, .lighttoggle[aria-pressed="true"] .lt-pause { display: none; }
.lighttoggle[aria-pressed="true"] .lt-resume.lt-long { display: inline; }
.lighttoggle:hover, .iconbtn:hover { color: var(--color-ink); }
.lighttoggle:active, .iconbtn:active { transform: translateY(1px); }
/* The narrowest phones: the Menu and the light toggle keep their words for screen readers but show only their icons,
   so the brand, the Menu, the light and the theme fit inside the gutters in every language. */
@media (max-width: 24rem) {
  .lighttoggle { min-width: 44px; justify-content: center; padding-inline: 0; }
  .lighttoggle > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Home-only links and tools (.btn and .gilt-link are in /site.css) */
.more { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-gilt-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-accent) 60%, transparent); text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.more:hover { text-decoration-color: var(--color-gilt-ink); }
.tool { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: none; color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tool:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.tool:active { transform: translateY(1px); }
.tool:disabled { opacity: 0.55; cursor: not-allowed; }

/* The open Bible: one sheet of paper under both leaves, the fold between them, and a shaft of daylight crossing it. */
.opening { padding-block: var(--space-xs) calc(var(--section-gap-s) + var(--space-2xl)); }
.book { --fold: 48.45%; position: relative; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr); max-width: 1224px; margin-inline: auto; }
:root[dir="rtl"] .book { --fold: 51.55%; }
.book__paper { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: var(--radius-card); background: linear-gradient(to right, transparent calc(var(--fold) - 80px), color-mix(in oklab, var(--color-shade) 11%, transparent) var(--fold), transparent calc(var(--fold) + 80px)), var(--color-paper); box-shadow: var(--shadow-card); }
.book__shaft { position: absolute; top: -12%; bottom: -12%; left: -24%; width: 30%; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-sun) 52%, transparent) 42%, color-mix(in oklab, var(--color-sun) 52%, transparent) 58%, transparent); transform: skewX(-20deg) translateX(0); animation: shaft var(--dur-shaft) var(--ease-in-out) infinite alternate; will-change: transform; }
@keyframes shaft { to { transform: skewX(-20deg) translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .book__shaft { transform: skewX(-20deg) translateX(150%); } }
.book .leaf { position: relative; z-index: var(--z-base); isolation: isolate; padding: var(--space-xl) var(--space-2xl) var(--space-lg); }
.leaf { background-color: var(--color-paper); }
.book .leaf { background: none; }

/* The left leaf: a Bible's title page */
.leaf--title { display: flex; flex-direction: column; align-items: center; text-align: center; }
.title__main { margin-block: auto; display: flex; flex-direction: column; align-items: center; }
.leaf--title h1 { font-size: var(--text-display-s); font-weight: 500; line-height: 1.04; letter-spacing: var(--tracking-display); max-width: 14ch; }
.title__rule { width: 88px; height: 1px; margin-block: var(--space-lg); background: var(--color-accent); }
.lede { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-2); max-width: 28ch; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); }
.continue { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.continue span { display: block; }
.turn { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.turn__label { color: var(--color-muted); font-size: var(--text-xs); }
.turn__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-sm); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: none; color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chip:hover { color: var(--color-ink); border-color: var(--color-gilt-ink); }
.chip[aria-pressed="true"] { border-color: var(--color-seal); background: color-mix(in oklab, var(--color-seal) 9%, transparent); color: var(--color-ink); }
.chip:active { transform: translateY(1px); }
.imprint { padding-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); font-style: italic; }

/* The right leaf: the passage */
.leaf--psalm { padding-inline-start: calc(var(--space-2xl) + var(--space-sm)) !important; }
.ribbon { position: absolute; top: 0; inset-inline-start: var(--space-lg); z-index: var(--z-raised); width: 14px; height: calc(100% + var(--space-2xl)); background: var(--color-seal); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 13px), 0 100%); transform-origin: top; animation: ribbon-in 900ms var(--ease-out) both; }
@keyframes ribbon-in { from { transform: translateY(-10px); } }
.psalm__head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-lg); margin-bottom: var(--space-md); }
.psalm__no { position: relative; grid-row: span 2; font-size: var(--text-numeral); font-weight: 500; line-height: 0.82; letter-spacing: -0.03em; color: var(--color-seal); font-variant-numeric: lining-nums; }
.psalm__listen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2xs) var(--space-md); }
.psalm__title { justify-self: end; color: var(--color-ink-2); font-size: var(--text-sm); }
.page .v { font-size: var(--text-scripture); line-height: 1.66; max-width: 36em; }
.page .v + .v { margin-top: var(--space-2xs); }
.pages { display: grid; }
.pages > .page { grid-area: 1 / 1; }
.page:not(.is-current) { visibility: hidden; }
.page { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.page.is-leaving { opacity: 0; transform: translateX(-12px); }
.page.is-arriving { opacity: 0; transform: translateX(12px); }
:root[dir="rtl"] .page.is-leaving { transform: translateX(12px); }
:root[dir="rtl"] .page.is-arriving { transform: translateX(-12px); }
.psalm__read { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-xs); color: var(--color-gilt-ink); font-size: var(--text-sm); }
.v { position: relative; }
/* The verse being read warms from the gutter, in gilt light, and its number turns full gilt; the verse a feeling
   turned to keeps a quiet gilt underline. */
.v::before, .psalm__no::before { content: ""; position: absolute; top: -0.08em; bottom: -0.08em; inset-inline-start: calc(-1 * var(--space-xl)); inset-inline-end: 14%; z-index: -1; background: linear-gradient(var(--wash-from), color-mix(in oklab, var(--color-accent) 34%, transparent), color-mix(in oklab, var(--color-accent) 14%, transparent) 60%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-ink) 22%, var(--color-ink) 78%, transparent); mask-image: linear-gradient(to bottom, transparent, var(--color-ink) 22%, var(--color-ink) 78%, transparent); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.psalm__no::before { inset-inline-end: -40%; }
.v.is-reading::before, .psalm__no.is-reading::before { opacity: 1; }
.v.is-key span[data-ref] { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-accent) 70%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.28em; text-decoration-skip-ink: auto; }
.vn, sup.vnum { margin-inline-end: 0.35em; color: var(--color-gilt-ink); font-size: 0.62em; font-weight: 600; vertical-align: 0.5em; line-height: 0; font-variant-numeric: lining-nums tabular-nums; transition: color var(--dur-long) var(--ease-out); }
.v.is-reading .vn { color: var(--color-accent); }

.listen__btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md) 0 var(--space-2xs); border: 1px solid var(--color-seal); border-radius: var(--radius-pill); background: transparent; color: var(--color-seal); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.listen__btn:hover { background: color-mix(in oklab, var(--color-seal) 8%, transparent); }
.listen__btn:active { transform: translateY(1px); }
.listen__icon { width: 34px; height: 34px; }
.listen__icon .i-pause, .listen__btn.is-playing .i-play { display: none; }
.listen__btn.is-playing .i-pause { display: inline; }
.voices summary { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; list-style: none; }
.voices summary::-webkit-details-marker { display: none; }
.voices summary::after { content: ""; width: 7px; height: 7px; margin-inline-start: var(--space-2xs); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.voices[open] summary::after { transform: translateY(2px) rotate(225deg); }
.voices summary:hover { color: var(--color-ink); }
.voices:not([open]) .voices__panel { display: none; }
.voices__panel { position: absolute; top: calc(100% + var(--space-2xs)); inset-inline-end: 0; z-index: var(--z-dropdown); width: min(27rem, 100%); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.voices__hint { color: var(--color-muted); font-size: var(--text-xs); }
.voices__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-lg); margin: var(--space-xs) 0 0; padding: 0; border: 0; }
.voices__list label { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-xs); align-items: baseline; min-height: 44px; padding: var(--space-2xs) 0; cursor: pointer; }
.voices__list input { accent-color: var(--color-seal); margin: 0; transform: translateY(2px); }
.voices__name { font-size: var(--text-sm); font-weight: 600; }
.voices__about { grid-column: 2; color: var(--color-muted); font-size: var(--text-xs); }
.listen__status { color: var(--color-error); font-size: var(--text-xs); }
.listen__status:empty { display: none; }

/* Section heads */
.where h2, .ask h2, .notes h2, .polyglot h2, .morning h2, .plan h2, .books h2, .plus h2 { font-size: var(--text-section); font-weight: 500; line-height: 1.04; letter-spacing: var(--tracking-display); max-width: 18ch; }

/* For the heart today: a Bible's "where to turn" page, an index with dotted leaders */
.where { padding-block: var(--space-xl) var(--section-gap-s); }
.where__leaf { padding: var(--space-2xl); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.where__leaf h2 { margin-inline: auto; text-align: center; }
.where__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; margin-top: var(--space-xl); }
.where__index { display: grid; }
.feeling { display: flex; align-items: baseline; gap: var(--space-sm); min-height: 56px; padding: var(--space-sm) 0; border: 0; border-bottom: 1px solid var(--color-rule); background: none; color: var(--color-ink-2); text-align: start; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.feeling__name { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.2; }
.feeling__ref { flex: 1; display: flex; gap: var(--space-xs); color: var(--color-gilt-ink); font-size: var(--text-xs); white-space: nowrap; }
.feeling__ref::before { content: ""; flex: 1; min-width: var(--space-md); border-bottom: 1px dotted var(--color-rule-strong); transform: translateY(-0.3em); }
.feeling:hover, .feeling[aria-selected="true"] { color: var(--color-ink); }
.feeling[aria-selected="true"] .feeling__name { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.where__verses { display: grid; }
.verse { margin: 0; }
.verse blockquote { margin: 0; }
.verse blockquote p { font-size: clamp(1.625rem, 1.2vw + 1.2rem, 2.25rem); line-height: 1.45; max-width: 34ch; text-wrap: balance; }
.verse figcaption { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin-top: var(--space-md); }
.verse figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-gilt-ink); font-size: var(--text-sm); font-weight: 600; }
.verse:not([hidden]) { animation: settle var(--dur-long) var(--ease-out); }
@keyframes settle { from { opacity: 0.4; } }
.where__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-lg); margin: var(--space-xl) 0 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-rule); list-style: none; }
.where__more a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--color-ink-2); font-size: var(--text-sm); }

/* What is on your heart: the real Ask, centred, and a real answer set as a note on a leaf */
.ask { padding-block: var(--section-gap-s); }
.ask__wrap { display: grid; justify-items: center; }
.ask h2 { text-align: center; }
.askform { width: min(44rem, 100%); margin-top: var(--space-xl); }
.askform textarea { display: block; width: 100%; min-height: 96px; padding: var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: max(16px, var(--text-md)); line-height: 1.5; resize: vertical; }
.askform textarea::placeholder { color: var(--color-muted); }
.askform textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.askform__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-top: var(--space-sm); }
.askform__note { color: var(--color-muted); font-size: var(--text-xs); }
.note { width: 100%; margin: var(--space-2xl) 0 0; padding: var(--space-xl) var(--space-2xl); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.note__key { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); }
.note__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); margin-top: var(--space-lg); }
.note h3 { font-size: var(--text-xl); font-weight: 500; line-height: 1.15; }
.note__answer p { margin-top: var(--space-sm); font-size: var(--text-sm); line-height: 1.65; }
.note__verse { margin: 0; padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--color-accent); }
.note__verse p { font-size: var(--text-md); line-height: 1.65; }
.ref { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.ref a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-gilt-ink); font-weight: 600; }
.note__checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-xl) 0 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-rule); list-style: none; color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.55; }
.note__checks strong { color: var(--color-ink); font-weight: 600; }

/* Every chapter explained: study notes keyed in gilt to the verses they explain */
.notes { padding-block: var(--space-xl) var(--section-gap-s); }
.notes__leaf { padding: var(--space-2xl); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.notes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.notes__title { color: var(--color-muted); font-size: var(--text-sm); }
.notes__list { columns: 2 22rem; column-gap: var(--space-2xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.notes__list li { break-inside: avoid; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); }
.notes__key { color: var(--color-gilt-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; font-variant-numeric: lining-nums; }
.notes__list p { font-size: var(--text-sm); line-height: 1.65; }
.notes__leaf .more { margin-top: var(--space-md); }

/* Nine languages: a polyglot page, the same verse in nine Bibles */
.polyglot { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.polyglot__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: end; }
.polyglot__head p { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 44ch; }
.polyglot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-2xl); border-top: 1px solid var(--color-rule-strong); border-inline-start: 1px solid var(--color-rule); }
.tongue { position: relative; display: grid; align-content: start; gap: var(--space-2xs); min-height: 168px; padding: var(--space-lg); border-inline-end: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); transition: background-color var(--dur-short) var(--ease-out); }
.tongue:hover { background: color-mix(in oklab, var(--color-paper) 60%, transparent); }
.tongue.is-on { background: var(--color-paper); }
.tongue__pick { justify-self: start; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin-block: calc(-1 * var(--space-sm)) calc(-1 * var(--space-2xs)); padding: 0; border: 0; background: none; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-align: start; white-space: nowrap; cursor: pointer; }
.tongue__pick::after { content: ""; position: absolute; inset: 0; }
.tongue__pick:focus-visible { outline: none; }
.tongue:has(.tongue__pick:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.tongue__bible { color: var(--color-muted); font-size: var(--text-xs); }
.tongue__verse { margin-top: var(--space-xs); font-size: var(--text-md); line-height: 1.55; }
.tongue__verse[dir="rtl"], .tongue__bible[dir="rtl"] { text-align: right; }
.tongue:lang(zh) .tongue__verse { font-family: var(--font-zh); }
.tongue:lang(ko) .tongue__verse { font-family: var(--font-ko); }
.tongue:lang(ar) .tongue__verse { font-family: var(--font-ar); }
.polyglot__read { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-sm) var(--space-2xl); margin-top: var(--space-xl); padding: var(--space-2xl); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.pgread__lang { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; }
.pgread__bible { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.pgread__text .v { font-size: var(--text-scripture); line-height: 1.72; max-width: 40em; }
.pgread__text .v + .v { margin-top: var(--space-2xs); }
.pgread__text:lang(zh) { font-family: var(--font-zh); }
.pgread__text:lang(ko) { font-family: var(--font-ko); }
.pgread__text:lang(ar) { font-family: var(--font-ar); }
.polyglot__read .more { grid-column: 2; }

/* A verse every morning: the verse of the day as the morning email sets it, beside the real sign-up */
.morning { padding-block: var(--section-gap); }
.morning__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.morning__lede { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-lead); }
.letter { margin: 0; padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-align: center; }
.letter__brand { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; }
.letter__tagline { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.letter__kicker { margin-top: var(--space-xl); color: var(--color-gilt-ink); font-size: var(--text-xs); font-weight: 600; }
.letter__kicker time { display: block; margin-top: var(--space-3xs); color: var(--color-muted); font-weight: 400; }
.letter__verse { margin: var(--space-sm) 0 0; }
.letter__verse p { margin-inline: auto; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.32; max-width: 24ch; }
.letter__ref { margin-top: var(--space-md); font-weight: 600; font-size: var(--text-sm); }
.letter__ref a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.letter__bible { color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; }
.letter__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-lg); margin-top: var(--space-sm); }
.letter__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-xs); }
.letter__rule { display: block; width: 112px; height: 1px; margin: var(--space-lg) auto; background: var(--color-accent); }
.letter__sign { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; }
.daily__state { margin-top: var(--space-lg); color: var(--color-success); font-size: var(--text-sm); }
.daily__state button { min-height: 44px; margin-inline-start: var(--space-xs); padding: 0 var(--space-sm); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: none; color: var(--color-ink); font-size: var(--text-xs); cursor: pointer; }
.daily { margin-top: var(--space-xl); }
.daily label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
.daily__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.daily input { flex: 1 1 14rem; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: max(16px, var(--text-md)); }
.daily input::placeholder { color: var(--color-muted); }
.daily input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
/* The notes the daily email's links come back with, shown at the top, where the reader lands */
.dailynotice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xs) var(--space-sm); max-width: 40rem; margin: var(--space-sm) auto var(--space-lg); padding: var(--space-xs) var(--space-lg); border: 1px solid var(--color-rule); border-inline-start: 3px solid var(--color-seal); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); color: var(--color-ink); font-size: var(--text-sm); text-align: center; }
.dailynotice button, .dailynotice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: none; color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; text-decoration: none; cursor: pointer; }
.dailynotice button:hover, .dailynotice a:hover { border-color: var(--color-ink); }
/* A psalm for today, the same for everyone, through all 150 */
.psalmday { display: grid; gap: var(--space-3xs); margin-top: var(--space-xl); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-inline-start: 3px solid var(--color-seal); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.psalmday:hover { border-color: var(--color-gilt-ink); border-inline-start-color: var(--color-seal); }
.psalmday__kicker { color: var(--color-gilt-ink); font-size: var(--text-xs); font-weight: 600; }
.psalmday__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; }
.psalmday__text { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.daily__note { min-height: 1lh; margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.daily.is-sent .daily__note { color: var(--color-success); }

/* A reading plan: seven days of Psalms that tick off, kept in the reader's own browser like the plans page */
.plan { padding-block: var(--space-xl) var(--section-gap-s); }
.plan__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.plan__head p { margin-top: var(--space-md); color: var(--color-ink-2); line-height: 1.6; max-width: 40ch; }
.plan__head .more { margin-top: var(--space-sm); }
.plan__card { margin: 0; }
.plan__card figcaption { display: grid; gap: var(--space-2xs); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule-strong); }
.plan__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; }
.plan__blurb { color: var(--color-muted); font-size: var(--text-sm); }
.plan__days { margin: 0; padding: 0; list-style: none; }
.plan__days li { position: relative; display: grid; grid-template-columns: 44px 4.5rem 7rem minmax(0, 1fr); align-items: center; column-gap: var(--space-sm); min-height: 52px; border-bottom: 1px solid var(--color-rule); }
/* The whole row ticks the day (its label stretches over it); the reading's link stays its own target above it. */
.plan__day::after { content: ""; position: absolute; inset: 0; }
.plan__read { position: relative; z-index: 1; }
.plan__days li:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.plan__days input { justify-self: center; width: 22px; height: 22px; margin: 0; accent-color: var(--color-seal); cursor: pointer; }
.plan__day { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; }
.plan__read { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.plan__read:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.plan__theme { color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; }
.plan__days li:has(input:checked) .plan__read { color: var(--color-muted); text-decoration: line-through; text-decoration-color: var(--color-accent); }
.plan__days li:has(input:checked) .plan__theme { color: var(--color-muted); }
.plan__progress { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }

/* The books: the Bible's contents */
.books { padding-block: var(--space-xl) var(--section-gap-s); }
.books__leaf { padding: var(--space-2xl); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.books__leaf h2 { margin-inline: auto; text-align: center; }
.books__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.books__testament h3 { font-size: var(--text-xl); font-weight: 500; }
.books__group { margin-top: var(--space-md); color: var(--color-gilt-ink); font-size: var(--text-xs); font-weight: 600; }
.books__list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-2xs); }
.books__list a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; }
.books__list a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* Keep asking with Plus: prices in the left column under the head */
.plus { padding-block: var(--space-xl) var(--section-gap-s); }
.plus__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.plus__prices { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); color: var(--color-ink-2); }
.price { margin-inline-end: var(--space-2xs); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.plus__list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; font-size: var(--text-lead); }
.plus__list li { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.plus__note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); max-width: 52ch; }
.plus__main .btn { margin-top: var(--space-lg); }

/* Colophon, with the language links the build adds */

/* The verse image sheet (public/js/verseimage.js) */
.imagesheet { width: min(25rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--space-sm) var(--space-md) var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); }
.imagesheet::backdrop { background: color-mix(in oklab, var(--color-shade) 55%, transparent); }
.imgclose { display: flex; justify-content: flex-end; margin: 0 calc(-1 * var(--space-xs)) var(--space-2xs) 0; }
.studyclose { width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-muted); font-size: var(--text-xl); cursor: pointer; }
.imagesheet img { display: block; width: 100%; height: auto; max-height: 64dvh; object-fit: contain; border-radius: var(--radius-card); }
.imgacts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-top: var(--space-md); }
.imgacts:has(> [hidden]) { grid-template-columns: 1fr; }
.imgacts button, .imgacts a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--color-muted); border-radius: var(--radius-pill); background: none; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer; }

/* One reveal: sections rise once as they enter. Visible by default, and never hidden under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveals .reveal:not(.is-in) > .container { opacity: 0; transform: translateY(10px); }
  .reveals .reveal > .container { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
}

@media (max-width: 72rem) {
  .nav a { padding-inline: var(--space-xs); }
}
@media (max-width: 64rem) {
  /* Phones and tablets: the title, then the open page, then the row that turns it. */
  .book { display: flex; flex-direction: column; align-items: center; }
  .leaf--title, .title__main { display: contents; }
  .continue { margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); text-align: center; }
  .leaf--psalm { order: 1; align-self: stretch; }
  .turn { order: 2; align-self: stretch; margin-top: var(--space-lg); padding-top: 0; border-top: 0; text-align: center; }
  .book__paper { display: none; }
  .book .leaf--title { padding: var(--space-md) 0 var(--space-xl); }
  .imprint { display: none; }
  .book .leaf--psalm { background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
  .ribbon { inset-inline-start: auto; inset-inline-end: var(--space-sm); top: calc(-1 * var(--space-xs)); width: 13px; height: 132px; }
  .where__grid, .polyglot__head, .plan__grid, .plus__grid, .note__cols, .morning__grid, .books__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .note__checks { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .polyglot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .lighttoggle .lt-long, .lighttoggle[aria-pressed="true"] .lt-resume.lt-long { display: none; }
  .lighttoggle:not([aria-pressed="true"]) .lt-pause.lt-short, .lighttoggle[aria-pressed="true"] .lt-resume.lt-short { display: inline; }
  .opening { padding-top: 0; }
  .book .leaf--title { padding: 0 0 var(--space-md); }
  .leaf--title h1 { font-size: clamp(1.875rem, 6.6vw, 2.375rem); max-width: 16ch; }
  .title__rule { margin-block: var(--space-sm); }
  .lede { max-width: none; font-size: var(--text-md); }
  .actions { margin-block: var(--space-md) var(--space-lg); gap: var(--space-sm) var(--space-md); }
  .turn { margin-top: var(--space-md); padding-top: var(--space-md); }
  .chip { font-size: var(--text-md); padding-inline: var(--space-sm); }
  .book .leaf--psalm { padding: var(--space-sm) var(--space-lg) var(--space-sm) !important; }
  .ribbon { inset-inline-end: var(--space-xs); width: 11px; height: 104px; }
  .psalm__head { column-gap: var(--space-xs); margin-bottom: var(--space-xs); }
  .psalm__no { font-size: 3.75rem; }
  .psalm__listen { justify-content: flex-start; column-gap: var(--space-xs); }
  .listen__btn { padding-inline-end: var(--space-sm); }
  .psalm__title { justify-self: start; grid-column: 2; }
  .voices__panel { inset-inline-start: 0; width: 100%; padding: var(--space-md); }
  .voices__list { grid-template-columns: minmax(0, 1fr); }
  .where__leaf, .notes__leaf, .note, .polyglot__read, .letter, .plus__grid, .books__leaf { padding: var(--space-lg); }
  .polyglot__read { grid-template-columns: minmax(0, 1fr); }
  .polyglot__read .more { grid-column: 1; }
  .polyglot__grid { grid-template-columns: minmax(0, 1fr); }
  .tongue { min-height: 0; }
  .tongue__pick { white-space: normal; }
  .notes__list li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .plan__days li { grid-template-columns: 44px 3.5rem minmax(0, 1fr); }
  .plan__theme { grid-column: 3; padding-bottom: var(--space-xs); font-size: var(--text-md); }
  .light i:nth-child(3) { display: none; }
}
@media (max-width: 24rem) {
  /* Under 384px Listen and the voice always stack, so a one-digit numeral (Joshua 1, Philippians 4) never lets them share
     a line and change the open page's height. */
  .psalm__listen { flex-direction: column; align-items: flex-start; }
}