/* Verselark — the hymn board.
   One world, two lights: the enamel board never changes colour. Light mode is
   that board on a limewashed nave wall; dark mode is the same board after the
   lamps go down, when its chalk numerals are the brightest thing in the room.
   The palette is never inverted, because an object does not invert. */

:root {
  /* Limewash nave — cool chalk-green, deliberately not a warm cream. */
  --ground: #e6e9e2;
  --ground-sunk: #dce0d7;
  --ink: #12201b;
  --ink-soft: #4a5a50;          /* tinted from the ground, never grey */
  --enamel: #0e1a16;            /* the board itself */
  --enamel-deep: #071310;
  --chalk: #f2efe6;
  --brass: #8a6520;
  --brass-bright: #b8862f;
  --oxblood: #8c3b30;
  --rule: rgba(18, 32, 27, .18);

  --measure: 44rem;
  --step: 1.5rem;

  --face-board: Bevan, "Bevan Fallback", Georgia, serif;
  --face-read: Literata, "Literata Fallback", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0e1a16;
    --ground-sunk: #091411;
    --ink: #ede9dc;
    --ink-soft: #a3b3a6;
    --enamel: #071310;
    --enamel-deep: #040c0a;
    --brass: #c79a3e;
    --brass-bright: #dcb45c;
    --oxblood: #d08a7c;
    --rule: rgba(237, 233, 220, .16);
  }
}
:root[data-theme="dark"] {
  --ground: #0e1a16;
  --ground-sunk: #091411;
  --ink: #ede9dc;
  --ink-soft: #a3b3a6;
  --enamel: #071310;
  --enamel-deep: #040c0a;
  --brass: #c79a3e;
  --brass-bright: #dcb45c;
  --oxblood: #d08a7c;
  --rule: rgba(237, 233, 220, .16);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--face-read);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* The browser surfaces the design system usually forgets. */
::selection { background: var(--brass-bright); color: var(--enamel); }
:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
  border-radius: 1px;
}
html { scrollbar-color: var(--brass) var(--ground-sunk); }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: from-font; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--enamel);
  color: var(--chalk);
  padding: .85rem 1.1rem;
  z-index: 10;
  font: 400 .8rem/1 var(--face-board);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* Cross-link line under a verse. */
.verse__also { margin: .65rem 0 0; font-size: .875rem; color: var(--ink-soft); }
.verse__also a { color: var(--ink); }

/* ── The board ─────────────────────────────────────────────────────────────
   The masthead is a real enamel plate: it keeps its own colour in both lights,
   because the board is an object in the room, not a themed surface. */
.board {
  background: var(--enamel);
  color: var(--chalk);
  padding: clamp(1.5rem, 5vw, 2.75rem) 0 clamp(1.25rem, 4vw, 2rem);
  box-shadow: 0 1px 0 var(--brass) inset, 0 14px 28px -18px rgba(0,0,0,.65);
}
.board__inner, .sheet { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

.board a { color: var(--chalk); }

.board__rail {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  font: 400 .75rem/1 var(--face-board);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.board__rail a { text-decoration: none; }
.board__rail a:hover { text-decoration: underline; }

h1 {
  font: 400 clamp(2rem, 8vw, 3.25rem)/1.02 var(--face-board);
  letter-spacing: -.005em;
  margin: 1.1rem 0 .5rem;
  text-wrap: balance;
}
.board__count {
  font: 400 .8rem/1 var(--face-board);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.board__blurb {
  margin: .9rem 0 0;
  max-width: 30rem;
  color: color-mix(in srgb, var(--chalk) 82%, var(--enamel));
  font-size: .975rem;
}

/* ── Verse rows ────────────────────────────────────────────────────────────
   No cards, no boxes, no rules between rows. Separation is rhythm plus the
   brass rail the reference sits on. */
.verses { margin: clamp(2rem, 7vw, 3.25rem) 0 0; padding: 0; list-style: none; }

.verse { padding-block: clamp(1.4rem, 4.5vw, 2rem); scroll-margin-top: 1.5rem; }
.verse + .verse { border-top: 1px solid var(--rule); }

.verse__ref {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font: 400 clamp(.95rem, 3.4vw, 1.05rem)/1 var(--face-board);
  color: var(--ink);
  text-decoration: none;
  padding: .3rem .55rem .34rem;
  background: var(--ground-sunk);
  box-shadow: inset 0 -2px 0 var(--brass);
}
.verse__ref:hover { box-shadow: inset 0 -2px 0 var(--brass-bright), inset 0 0 0 100vmax rgba(184,134,47,.08); }

.verse__text {
  margin: .95rem 0 0;
  font-size: clamp(1.125rem, 4.4vw, 1.3125rem);
  line-height: 1.62;
}
.verse__text .vn {
  font: 400 .7em/1 var(--face-board);
  color: var(--brass);
  vertical-align: .45em;
  margin-inline-end: .3em;
}
.verse__note {
  margin: .7rem 0 0;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.58;
  font-style: italic;
}

.verse__tools { display: flex; gap: .15rem; align-items: center; margin-top: .55rem; flex-wrap: wrap; margin-inline-start: -.7rem; }

button {
  font: 400 .72rem/1 var(--face-board);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 0;
  /* 44px minimum touch target. This traffic is overwhelmingly phone, and the
     row of translation slots is the most-tapped control on the site. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 .7rem;
  cursor: pointer;
  transition: color .18s cubic-bezier(.2,.7,.3,1), background-color .18s cubic-bezier(.2,.7,.3,1);
}
button:hover { color: var(--ink); background: color-mix(in srgb, var(--brass) 14%, transparent); }
button:disabled { color: var(--ink-soft); opacity: .5; cursor: default; }
button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass-bright); }

/* Translation switcher: numerals re-slotting into the board. */
.slots { display: flex; gap: .15rem; }

/* The one authored motion: text setting into its slot. */
@keyframes settle {
  from { opacity: 0; transform: translateY(-.28em); }
  to   { opacity: 1; transform: none; }
}
.is-settling { animation: settle .34s cubic-bezier(.16,.84,.28,1) both; }
@media (prefers-reduced-motion: reduce) {
  .is-settling { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Cross-links: the rail continuing to the next board ────────────────── */
.onward { margin: clamp(2.5rem, 8vw, 4rem) 0 0; padding-block: clamp(1.75rem, 5vw, 2.5rem); border-top: 2px solid var(--brass); }
.onward h2 {
  font: 400 .78rem/1 var(--face-board);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.1rem;
}
.onward ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.onward a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem .55rem;
  text-decoration: none;
  font: 400 1.0625rem/1.3 var(--face-board);
  transition: background-color .18s cubic-bezier(.2,.7,.3,1);
}
.onward a:hover { background: color-mix(in srgb, var(--brass) 13%, transparent); }
.onward a span { font: 400 .8rem/1 var(--face-read); color: var(--ink-soft); white-space: nowrap; }

main h2 {
  font: 400 1.15rem/1.25 var(--face-board);
  margin: 2.25rem 0 .6rem;
  color: var(--ink);
}
main > p { margin: 0 0 1rem; }
main > p + h2 { margin-top: 2.5rem; }

/* Variants that used to be inline style attributes. A strict style-src blocks
   those outright, so they must live here or they silently do not apply. */
.verse--solo { border: 0; padding-top: 0; }
.tools--lead { margin-top: 1.75rem; }
.btn--lead { font-size: .85rem; padding: 0 .9rem; box-shadow: inset 0 -2px 0 var(--brass); color: var(--ink); }
.btn--lead:hover { box-shadow: inset 0 -2px 0 var(--brass-bright); }
.onward--flush { border-top: 0; margin-top: 0; }

footer {
  margin-top: clamp(3rem, 9vw, 5rem);
  background: var(--enamel);
  color: color-mix(in srgb, var(--chalk) 74%, var(--enamel));
  padding: clamp(2rem, 6vw, 3rem) 0;
  font-size: .875rem;
}
footer a { color: var(--chalk); }
footer p { margin: 0 0 .6rem; max-width: 34rem; }

.note {
  margin: 1.5rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .9rem;
}

/* ── Print: the board becomes paper ───────────────────────────────────── */
@media print {
  :root { --ground: #fff; --ink: #000; --ink-soft: #333; --rule: #ccc; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .board { background: none; color: #000; box-shadow: none; padding-block: 0 1rem; border-bottom: 2px solid #000; }
  .board__rail, .verse__tools, .onward, footer, .slots { display: none !important; }
  .board__blurb, .board__count { color: #333; }
  .verse { break-inside: avoid; padding-block: .6rem; }
  .verse__ref { background: none; box-shadow: none; padding: 0; }
  .verse__text { font-size: 11pt; }
}