/* The Watch We Keep - one stylesheet, every page.
   Design by Grok 4.6 (SpaceXAI, via OpenRouter), 2026-08-30,
   briefed on the IDEA behind the site, not just its markup.
   Returned in two passes: the first stopped mid-rule with the
   forms, the pager and the print block unwritten.

   The ten palettes and the @font-face block below are OURS and are
   byte-pinned (decisions 003 and 016). Every colour flows through
   the six theme tokens, so all ten hours repaint every page. */

/* --- the ten hours (The Vigil is :root; the default needs no JS) --- */
:root {
  --ground: #131a2b; --panel: #1c2438;
  --text: #f2ead8; --dim: #c9c0ab;
  --accent: #d9a05b; --hairline: rgba(217,160,91,0.45);
}
html[data-theme="lamplight"] {
  --ground: #211710; --panel: #2c2015;
  --text: #f4e9d3; --dim: #cdbfa4;
  --accent: #d8973f; --hairline: rgba(216,151,63,0.45);
}
html[data-theme="small-hours"] {
  --ground: #15171c; --panel: #1e2128;
  --text: #e8e6df; --dim: #b3b1a8;
  --accent: #9fb2c8; --hairline: rgba(159,178,200,0.4);
}
html[data-theme="gethsemane"] {
  --ground: #171d15; --panel: #212a1e;
  --text: #e9ead8; --dim: #b7bba3;
  --accent: #a8a04a; --hairline: rgba(168,160,74,0.45);
}
html[data-theme="ember"] {
  --ground: #251811; --panel: #322218;
  --text: #f2e8da; --dim: #c9b9a6;
  --accent: #c46a4a; --hairline: rgba(196,106,74,0.45);
}
html[data-theme="waiting"] {
  --ground: #1d1529; --panel: #281d38;
  --text: #efe8dc; --dim: #bfb6ab;
  --accent: #c9a227; --hairline: rgba(201,162,39,0.45);
}
html[data-theme="red-letter"] {
  --ground: #f8f3e7; --panel: #efe7d3;
  --text: #26221c; --dim: #5a5347;
  --accent: #8e2f26; --hairline: rgba(142,47,38,0.5);
}
html[data-theme="paper"] {
  --ground: #f1e6cf; --panel: #e7d9bb;
  --text: #3a2f22; --dim: #6e5f4b;
  --accent: #7a3020; --hairline: rgba(122,48,32,0.5);
}
html[data-theme="dawn"] {
  --ground: #f2ede3; --panel: #e9e1d2;
  --text: #33383f; --dim: #6a7078;
  --accent: #a5552f; --hairline: rgba(165,85,47,0.5);
}
html[data-theme="daylight"] {
  --ground: #faf7f0; --panel: #f1ece0;
  --text: #2b2a26; --dim: #66645c;
  --accent: #b08d2e; --hairline: rgba(176,141,46,0.5);
}

/* --- the faces, served from this origin and nowhere else ---
   Spectral carries the prose: a serif cut for screens, cooler and more
   modern than the warm book faces, so a page of it reads as a publication
   rather than as a printed prayer book. Space Grotesk carries every piece of
   instrument chrome: the mark, the nav, the headings, the labels. It is
   drawn from grotesque skeletons with the corners left slightly technical,
   which is the whole idea here - the watch is kept at a machine.
   Both are SIL Open Font License; see assets/fonts/LICENSE.txt. */
@font-face {
  font-family: "Spectral"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/spectral-400.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral"; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url("/fonts/spectral-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/spectral-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("/fonts/space-grotesk.woff2") format("woff2");
}

:root {
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}

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

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

html[data-size="small"] {
  font-size: 15px;
}

html[data-size="large"] {
  font-size: 20px;
}

body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--text);
  background: var(--ground);
  min-height: 100vh;
  border-top: 2px solid var(--accent);
  overflow-x: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul,
ol {
  padding-left: 1.2em;
}

li + li {
  margin-top: 0.28em;
}

li::marker {
  color: var(--dim);
}

::selection {
  background: var(--accent);
  color: var(--ground);
}

:focus {
  outline: none;
}

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

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.frame {
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem 0.8rem;
  background: var(--ground);
  border-bottom: 1px solid var(--hairline);
}

.home {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.home svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  fill: currentColor;
  color: var(--accent);
}

.home span {
  font-size: 0.72rem;
}

.home:hover,
.home:focus-visible {
  color: var(--accent);
}

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.95rem;
  max-width: 100%;
}

.top a {
  font-family: var(--font-display);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--dim);
  padding: 0.15rem 0;
}

.top a:hover,
.top a:focus-visible,
.top a[aria-current] {
  color: var(--text);
}

.rail-foot {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--dim);
  max-width: 38rem;
}

#theme-picker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--dim);
}

#theme-picker[hidden] {
  display: none;
}

/* The fold around the picker. Hidden entirely while the picker is (no
   scripts: no empty disclosure sitting in the rail). The summary is the
   picker's own mono label, so the fold reads as one control, not a widget. */
.hours:not(:has(#theme-picker:not([hidden]))) {
  display: none;
}

.hours > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.hours > summary::-webkit-details-marker {
  display: none;
}

.hours > summary::before {
  content: "+ ";
}

.hours[open] > summary::before {
  content: "- ";
}

.hours > summary:hover,
.hours > summary:focus-visible {
  color: var(--accent);
}

/* The notice the build stamps on a future table packet while the tables are
   paused (decision 018). Set apart by a rule, not by colour or a box: it is
   a fact about the page, said once, in the page's own type. */
.paused {
  margin: 0 0 1.6rem;
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 2px solid var(--accent);
  color: var(--dim);
}

.paused strong {
  color: var(--text);
}

#theme-picker .label {
  display: inline-block;
  margin-right: 0.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

#theme-picker button {
  display: inline-block;
  margin: 0.12rem 0.12rem 0.12rem 0;
  padding: 0.22rem 0.42rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.2;
}

#theme-picker button:hover,
#theme-picker button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.column {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.1rem 1rem 5.5rem;
}

main {
  position: relative;
  overflow-wrap: anywhere;
}

main p {
  margin: 0 0 1.05em;
}

main p a,
main li a,
main blockquote a,
.word a,
.letter a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--accent);
}

main p a:hover,
main li a:hover {
  color: var(--accent);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
}

h1 {
  font-size: clamp(2.05rem, 7.2vw, 3.4rem);
  letter-spacing: -0.038em;
  line-height: 1.02;
  margin: 0 0 1.1rem;
}

h2 {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 2.4rem 0 0.75rem;
}

h3 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 1.7rem 0 0.45rem;
}

.reading-no {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.2rem 0 0.85rem;
}

.subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.4;
  color: var(--dim);
  margin: -0.35rem 0 1.8rem;
}

.ref {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin: 0.3rem 0 1.6rem;
}

.attribution {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--dim);
  margin-top: 1.6rem;
}

blockquote {
  margin: 1.8rem 0;
  padding: 0.15rem 0 0.15rem 1.2rem;
  border-left: 1px solid var(--accent);
  font-size: 1.06em;
  line-height: 1.65;
}

blockquote p:last-child {
  margin-bottom: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  width: 3.4rem;
  margin: 2.6rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 1.4rem 0 1.8rem;
  table-layout: fixed;
  word-wrap: break-word;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.7rem 0.45rem 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
}

th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

.word {
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--hairline);
}

.word .first::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.7rem;
  line-height: 0.75;
  padding: 0.12rem 0.42rem 0 0;
  color: var(--accent);
}

.horizon {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  height: min(46vh, 22rem);
  min-height: 11.5rem;
  margin-bottom: 2.2rem;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--hairline) 0,
      var(--hairline) 1px,
      transparent 1px,
      transparent 5%
    ),
    repeating-linear-gradient(
      90deg,
      var(--hairline) 0,
      var(--hairline) 1px,
      transparent 1px,
      transparent 1.25%
    );
  background-size: 100% 0.7rem, 100% 0.38rem;
  background-position: 0 calc(61% - 0.7rem), 0 calc(61% - 0.38rem);
  background-repeat: no-repeat;
}

.horizon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 61%;
  border-top: 1px solid var(--hairline);
}

.horizon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 61%;
  width: min(72vw, 21rem);
  height: min(72vw, 21rem);
  transform: translate(-50%, -50%);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  pointer-events: none;
}

.horizon .star,
.horizon svg {
  position: absolute;
  left: 50%;
  top: 61%;
  width: 2.1rem;
  height: 2.1rem;
  transform: translate(-50%, -50%);
  fill: currentColor;
  color: var(--accent);
  z-index: 1;
}

main.cover {
  padding-top: 0.4rem;
  padding-bottom: 2rem;
}

main.cover h1 {
  font-size: clamp(2.6rem, 11vw, 5.4rem);
  letter-spacing: -0.048em;
  line-height: 0.9;
  max-width: 9ch;
  margin-bottom: 1.1rem;
}

.tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.4;
  color: var(--dim);
  margin: 0 0 2.2rem;
}

.tagline::before {
  content: "";
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.55rem;
  background: var(--accent);
  transform: rotate(45deg);
  vertical-align: 0.12em;
}

.maranatha {
  display: inline-block;
  margin-top: 2.8rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.doors {
  counter-reset: door;
  margin: 2.4rem 0 3rem;
  border-top: 1px solid var(--hairline);
}

a.door {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  column-gap: 0.7rem;
  padding: 1.05rem 0 1.1rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  counter-increment: door;
}

a.door::before {
  content: counter(door, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--dim);
  padding-top: 0.38em;
}

a.door b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

a.door span {
  display: block;
font-size: 0.95rem;
  line-height: 1.45;
  color: var(--dim);
  margin-top: 0.28rem;
  grid-column: 2;
}

a.door b {
  grid-column: 2;
}

a.door:hover b,
a.door:focus-visible b {
  color: var(--accent);
}

a.door:hover::before,
a.door:focus-visible::before {
  color: var(--accent);
}

.pager {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 3.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}

.pager a {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  min-width: 0;
}

.pager a:first-child {
  margin-right: auto;
}

.pager a:last-child {
  margin-left: auto;
  text-align: right;
}

.pager a:hover,
.pager a:focus-visible {
  color: var(--accent);
}

.notice {
  margin: 0 0 1.6rem;
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.98rem;
}

.empty {
  font-style: italic;
  color: var(--dim);
  margin: 1.6rem 0 2.2rem;
}

.print-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin: 0 0 1.4rem;
}

.letters {
  margin: 2.2rem 0 3rem;
  border-top: 1px solid var(--hairline);
}

.letter {
  padding: 1.35rem 0 1.45rem;
  border-bottom: 1px solid var(--hairline);
}

.letter p:last-child {
  margin-bottom: 0;
}

.letter-by {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 0.7rem;
}

.reply {
  margin: 1.1rem 0 0.2rem 0.4rem;
  padding: 0.85rem 0 0.2rem 1rem;
  border-left: 1px solid var(--hairline);
}

.reply + .reply {
  margin-top: 0.6rem;
}

.door-form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin: 1.6rem 0 2.6rem;
  max-width: 100%;
}

.door-form label {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.door-form input,
.door-form select,
.door-form textarea {
  width: 100%;
  max-width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0.55rem 0.7rem;
  line-height: 1.4;
}

.door-form textarea {
  min-height: 8.5rem;
  resize: vertical;
  font-family: var(--font-body);
}

.door-form select {
  font-family: var(--font-display);
}

.door-form input:hover,
.door-form select:hover,
.door-form textarea:hover {
  border-color: var(--dim);
}

.door-form button {
  align-self: flex-start;
  margin-top: 0.2rem;
  padding: 0.58rem 1.15rem;
  background: var(--text);
  color: var(--ground);
  border: 1px solid var(--text);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.door-form button:hover,
.door-form button:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ground);
}

.door-form .hint,
.hint {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dim);
  line-height: 1.45;
}

.cf-turnstile {
  width: 18.75rem;
  max-width: 100%;
  height: 4.05rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

@media (min-width: 58rem) {
  .frame {
    display: grid;
    grid-template-columns: 16.25rem minmax(0, 1fr);
    align-items: start;
  }

  .rail {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    border-bottom: 0;
    border-right: 1px solid var(--hairline);
    padding: 1.6rem 1.35rem 1.5rem 1.6rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .top {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.2rem;
    margin-top: 0.4rem;
  }

  .top a {
    font-size: 0.84rem;
    padding: 0.12rem 0;
  }

  #theme-picker {
    margin-top: 0.8rem;
  }

  .rail-foot {
    margin-top: auto;
    padding-top: 1.4rem;
    max-width: none;
  }

  /* The column was capped at 34rem and pinned to the left of a track more
     than twice that wide, so on a 1440px screen 41% of the page was empty
     and every bit of it sat in one dead slab on the right. Two changes:
     the measure grows to a proper reading width, and the column is given
     room for a MARGIN the page can actually use (see the marginalia rules
     at the wide breakpoint below). */
  .column {
    max-width: 74rem;
    margin: 0;
    padding: 2.6rem 2.4rem 6rem 3.2rem;
  }

  main {
    /* the reading measure: about 70 characters of Spectral, which is where
       a long passage stays comfortable. Wider than this and the eye loses
       the line return. */
    max-width: 38.5rem;
  }

  /* the cover and its instrument are not bound by the reading measure */
  main.cover {
    max-width: 52rem;
  }

  .horizon {
    left: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: min(42vh, 20rem);
  }

  main.cover h1 {
    font-size: clamp(3.1rem, 6vw, 5.6rem);
  }
}

/* THE MARGIN. Wide enough, and the scripture reference and the reading
   number step out of the text column into the space beside it, which is
   what that space is for. Below this width they stay in the flow, exactly
   as before. Nothing is hidden and nothing moves on a narrow screen. */
@media (min-width: 78rem) {
  main .ref,
  main .reading-no {
    float: right;
    clear: right;
    width: 15rem;
    margin: 0.15rem -18rem 0.6rem 0;
    text-align: left;
  }
  main .attribution {
    max-width: 41rem;
  }
}

@media (max-width: 57.99rem) {
  .frame {
    display: block;
    grid-template-columns: none;
  }

  .rail {
    height: auto;
    min-height: 0;
    border-right: 0;
  }

  /* On a phone the rail was the whole first screen: nav, thirteen buttons,
     and this line, with the H1 a full scroll down. The line is already the
     page footer, so here it is not said twice; and the picker folds (see
     .hours) so the rail is the name, the nav, and one closed control. */
  .rail-foot {
    display: none;
  }

  .column {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 22.5rem) {
  html {
    font-size: 15px;
  }

  .column {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .rail {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  table {
    font-size: 0.82rem;
  }

  th,
  td {
    padding-right: 0.4rem;
  }

  .reply {
    margin-left: 0;
  }
}

@media print {
  html {
    --ground: #ffffff;
    --panel: #f3f3f3;
    --text: #111111;
    --dim: #555555;
    --accent: #111111;
    --hairline: #cccccc;
    font-size: 11pt;
  }

  body {
    background: var(--ground);
    color: var(--text);
    border-top: 0;
    min-height: 0;
  }

  .rail,
  .pager,
  #theme-picker,
  .horizon,
  .door-form,
  .cf-turnstile,
  .print-note {
    display: none !important;
  }

  .frame {
    display: block;
  }

  .column {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--hairline);
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  blockquote,
  table,
  .word,
  .letter {
    break-inside: avoid;
  }

  .word .first::first-letter {
    color: var(--text);
  }

  .maranatha {
    color: var(--text);
  }

  a.door {
    break-inside: avoid;
  }
}