/* ------------------------------------------------------------- app.css ---
   The phone and projector page for brojudd.com.

   Type and palette tokens are NOT defined here. They live in one place —
   /seminary/type.css — which every page on this site links or imports. This
   file used to carry a verbatim copy of that block, which meant a colour
   changed in one place and not the other. The shell links type.css first, so
   every --token below is already defined by the time this file is parsed.  */

/* Legacy names kept so the 600 lines below don't all have to change at once.
   They now point at the Grounded Pillars palette. */
:root {
  --bg: var(--ink-3);
  --surface: var(--ink-2);
  --surface-2: var(--ink-1);
  --line: var(--rule);
  --line-soft: var(--rule-faint);
  --text: var(--parchment-1);
  --muted: var(--muted-1);
  --dim: var(--muted-2);
  --accent: var(--amber);
  --accent-quiet: rgba(232,180,100,.10);
  --radius: 10px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 20px/1.62 var(--serif);
  color: var(--parchment-2);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- header --- */

header { padding: 26px 0 4px; }

.brand {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}

.datebar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.daynote {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--dim);
}

.chip.black { background: #101114; color: #c8ced6; border-color: #2c3138; }
.chip.gold  { background: var(--accent-quiet); color: var(--accent); border-color: rgba(232,180,100,.35); }

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

section { margin-top: 22px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px;
}

.label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
  margin: 0 0 12px;
}

.today-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.today-focus {
  margin: 12px 0 0;
  color: #c6ccd3;
  font-size: 17px;
}

.empty {
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------ scripture -- */

.reading {
  font-size: 20px;
  line-height: 1.35;
  margin: 0;
  font-weight: 550;
}

.reading-dates {
  color: var(--dim);
  font-size: 14px;
  margin: 0 0 8px;
}

.refs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.refs a {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  font-weight: 550;
}
.refs a:hover { border-color: rgba(232,180,100,.45); text-decoration: none; }

/* --------------------------------------------------------------- quotes -- */

blockquote {
  margin: 0 0 16px;
  padding: 0 0 0 16px;
  border-left: 2px solid rgba(232,180,100,.45);
}
blockquote:last-child { margin-bottom: 0; }

blockquote p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: #dde1e6;
}

blockquote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 14px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- files -- */

.files { display: grid; gap: 10px; }

.file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  font-weight: 550;
}
.file:hover { border-color: rgba(232,180,100,.45); text-decoration: none; }
.file .kind {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
  white-space: nowrap;
}

/* ------------------------------------------------------------- details --- */

details {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
}
details + details { margin-top: 12px; }

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--dim);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}
details[open] summary::after { content: "\2212"; }
details[open] summary { margin-bottom: 14px; }

.dm { margin: 0; padding: 0; list-style: none; }
.dm li {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.dm li:first-child { border-top: 0; }
.dm a { font-weight: 600; display: block; font-size: 16px; }
.dm span { color: var(--muted); font-size: 15px; display: block; margin-top: 2px; }
/* The drill link under each passage. Quiet on purpose — the reference is still
   the thing being looked up, and twenty-four of these must not shout. */
.dm a.drill { font-weight: 400; font-size: 14px; color: var(--amber-deep);
              margin-top: 5px; }
.dm a.drill:hover { color: var(--amber); }

.facts { margin: 0; }
.facts div {
  display: flex;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--dim); min-width: 74px; margin: 0; font-size: 15px; }
.facts dd { margin: 0; font-size: 15px; }

footer {
  margin-top: 34px;
  color: var(--dim);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  h1 { font-size: 24px; }
  .today-title { font-size: 20px; }
  .card, details { padding: 16px; }
}

/* =======================================================================
   Display mode — brojudd.com/?screen
   The projected classroom screen. Same markup, sized to be read from the
   back of the room. Type scales with the viewport so it fits any projector.
   ======================================================================= */

body.screen {
  font-size: clamp(18px, 1.5vw, 30px);
  padding-bottom: 0;
  overflow: hidden;
}

body.screen .wrap {
  max-width: none;
  padding: clamp(20px, 3vw, 56px) clamp(24px, 4vw, 80px) 0;
}

body.screen header { padding: 0 0 clamp(10px, 1.5vw, 26px); }
body.screen .brand { font-size: clamp(13px, 1.05vw, 22px); letter-spacing: 0.2em; }
body.screen h1 { font-size: clamp(30px, 3.4vw, 68px); }
body.screen .chip { font-size: clamp(12px, 1vw, 21px); padding: 0.35em 0.9em; }
body.screen .daynote { font-size: clamp(13px, 1vw, 21px); }

body.screen section { margin-top: clamp(12px, 1.6vw, 30px); }
body.screen .card { padding: clamp(18px, 2.2vw, 44px); border-radius: clamp(14px, 1.1vw, 22px); }
body.screen .label { font-size: clamp(12px, 0.95vw, 20px); margin-bottom: clamp(8px, 1vw, 18px); }

body.screen .today-title { font-size: clamp(26px, 3vw, 60px); }
body.screen .today-focus { font-size: clamp(18px, 1.7vw, 34px); margin-top: clamp(10px, 1.1vw, 22px); }
body.screen .refs a { font-size: clamp(16px, 1.4vw, 28px); padding: 0.45em 0.9em; }
body.screen .reading { font-size: clamp(20px, 2vw, 40px); }
body.screen .reading-dates { font-size: clamp(13px, 1vw, 21px); }

/* One quote at a time, rotating. */
body.screen #quotes blockquote { display: none; margin: 0; border-left-width: 3px; }
body.screen #quotes blockquote.shown { display: block; }
body.screen blockquote p { font-size: clamp(20px, 2.1vw, 42px); line-height: 1.45; }
body.screen blockquote cite { font-size: clamp(13px, 1.05vw, 22px); margin-top: 0.6em; }

/* Reference material and anything tappable is for phones, not the wall. */
body.screen details,
body.screen #files-sec,
body.screen .refs li.gl { display: none; }

/* Tell the room where to find it themselves. */
body.screen footer {
  margin-top: clamp(14px, 1.6vw, 30px);
  font-size: clamp(15px, 1.5vw, 30px);
  color: var(--accent);
  letter-spacing: 0.04em;
  font-weight: 600;
}


/* ---------------------------------------------- live poll (screen only) --- */

#poll-sec { display: none; }
body.screen #poll-sec { display: block; }

.join { display: flex; align-items: center; gap: clamp(16px, 2vw, 40px); }
.qr {
  width: clamp(120px, 12vw, 260px);
  height: auto;
  border-radius: clamp(8px, .7vw, 14px);
  background: #fff;
  padding: clamp(6px, .5vw, 12px);
  flex: 0 0 auto;
}
.join-url {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 46px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--accent);
}
.join-sub { margin: .35em 0 0; color: var(--muted); font-size: clamp(14px, 1.3vw, 27px); }

.poll-q {
  margin: 0 0 clamp(10px, 1.4vh, 22px);
  font-size: clamp(18px, 1.9vw, 38px);
  line-height: 1.3;
  font-weight: 600;
}
.poll-opts { display: grid; gap: clamp(6px, .8vh, 12px); }
.poll-opt {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(9px, 1.1vh, 18px) clamp(12px, 1.1vw, 22px);
  border-radius: clamp(9px, .7vw, 14px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: clamp(15px, 1.5vw, 30px);
  font-weight: 550;
}
.poll-opt .fill {
  position: absolute; inset: 0 auto 0 0;
  background: rgba(232,180,100,.18);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.poll-opt .t { position: relative }
.poll-opt .p {
  position: relative;
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .3s;
}
.poll-opt.show .p { opacity: 1 }

/* On a wide screen the poll takes the right column, under the quotes. */


/* While a question is actually running, the poll is the point of the screen.
   The reference cards stand down so nothing is ever clipped on a projector. */


/* Slides fade rather than snap — a hard cut on a projector reads as a glitch. */

@keyframes slide-in { from { opacity: 0 } to { opacity: 1 } }

body.screen #quotes-sec .card,
body.screen #poll-sec .card { height: 100%; }

/* The join line kept on screen while a question is open, for latecomers. */
.poll-join {
  display: flex;
  align-items: center;
  gap: clamp(8px, .8vw, 16px);
  margin: clamp(12px, 1.6vh, 24px) 0 0;
  color: var(--muted);
  font-size: clamp(13px, 1.2vw, 24px);
  font-weight: 600;
}
.qr-mini {
  width: clamp(38px, 3.4vw, 74px);
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  flex: 0 0 auto;
}

/* =======================================================================
   Display mode, light. A dim projector puts out light for white pixels and
   nothing for black ones, so a dark theme that looks good on a monitor
   reads as grey mush on the wall. Screen mode only — phones stay dark.
   ======================================================================= */

/* The projector stays WHITE — that rule holds whatever the site does, because a
   dark deck washes out under a classroom bulb. What changes here is only the
   temperature: warm neutrals and the same amber, darkened until it clears
   contrast on white, so the wall and the site read as one hand. */
body.screen {
  --bg: #FFFDF9;
  --surface: #F7F2E8;
  --surface-2: #F0E9DA;
  --line: rgba(138,106,18,.28);
  --line-soft: rgba(138,106,18,.14);
  --text: #17130D;
  --muted: #554C3D;
  --dim: #776C59;
  --accent: #8A6A10;
  --accent-quiet: rgba(138, 106, 18, 0.10);
  background: #FFFDF9;
  color: #17130D;
}

body.screen .today-focus { color: #2c3138; }
body.screen blockquote p { color: #1c2026; }
body.screen blockquote { border-left-color: rgba(138,106,18,.6); }
body.screen .chip.black { background: #14171b; color: #fff; border-color: #14171b; }
body.screen .chip.gold  { background: var(--accent-quiet); color: #6f5510; border-color: rgba(138,106,18,.45); }
body.screen .poll-opt .fill { background: rgba(138,106,18,.20); }
body.screen .qr, body.screen .qr-mini { background: #fff; }

/* The join line lives in the footer so it is on screen on every slide —
   including while a quote is up, and for anyone without a camera. */
body.screen footer {
  color: var(--accent);
  font-weight: 650;
}
body.screen footer .join-hint { color: var(--muted); font-weight: 500; }

/* ------------------------------------------------- rolling poll (screen) ---
   The question stays open all period, so the QR stays up at full size next to
   a tally that moves. Nothing rotates while it is running. */


.rolling-join {
  margin-top: clamp(14px, 1.8vh, 28px);
  padding-top: clamp(12px, 1.5vh, 24px);
  border-top: 1px solid var(--line);
}
.rolling-join .qr { width: clamp(90px, 8vw, 180px); }
.rolling-join .join-url { font-size: clamp(17px, 1.8vw, 36px); }
.rolling-join .join-sub { font-size: clamp(12px, 1.05vw, 21px); }

/* Percentages are always on for a rolling question. */
body.screen.poll-rolling .poll-opt .p { opacity: 1; }


/* ---------------------------------------------- the screen, two columns ---
   Left: the welcome, permanently, with this week's Come, Follow Me rotating
   beneath it. Right: the poll and the QR, which never move. */

#stage-verse { display: none; }
body.screen #stage-verse { display: block; }
body.screen #stage-verse[hidden] { display: none; }

.verse {
  margin: 0;
  border-left: 3px solid rgba(138, 106, 18, .55);
  padding-left: clamp(14px, 1.4vw, 28px);
}
.verse p {
  margin: 0;
  font-size: clamp(19px, 2.15vw, 44px);
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.verse cite {
  display: block;
  margin-top: clamp(10px, 1.3vh, 22px);
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  font-size: clamp(14px, 1.25vw, 25px);
}
/* Long quotes step down rather than overflow — a projector has no scrollbar. */
.verse p.mid  { font-size: clamp(18px, 1.95vw, 39px); }
.verse p.long { font-size: clamp(17px, 1.75vw, 35px); line-height: 1.34; }

/* Attribution: the name carries the weight, the citation sits quietly under it. */
.verse cite b { display: block; }
.verse cite .src {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  color: var(--muted, #6b6459);
  font-size: .78em;
  letter-spacing: 0;
}

#stage-verse.fade { animation: slide-in .55s ease both; }

/* On the wall the chips duplicate the passage now showing, so they come off. */
body.screen #today-body .refs { display: none; }
body.screen #today-sec .today-focus { margin-bottom: clamp(16px, 2.2vh, 34px); }

@media (min-aspect-ratio: 3/2) {
  body.screen .wrap {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0 clamp(20px, 2.5vw, 48px);
    height: 100vh;
    align-content: start;
  }
  body.screen header,
  body.screen footer { grid-column: 1 / -1; }
  body.screen #today-sec { grid-column: 1; grid-row: 2; margin-top: 0; }
  body.screen #poll-sec  { grid-column: 2; grid-row: 2; margin-top: 0; }
  body.screen #today-sec .card,
  body.screen #poll-sec .card { height: 100%; }

  /* welcome pinned to the top, the passage centred in what remains */
  body.screen #today-sec .card {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  body.screen #stage-verse { align-self: center; }

  /* the wall shows the day and the passages; the rest is for phones */
  body.screen #quotes-sec,
  body.screen #week-sec,
  body.screen #extras-sec,
  body.screen #files-sec { display: none; }
}


/* ---------------------------------------------------------------- library
   Standing resources, above the archive. */
/* Library rows stack: the title needs the full width, the note sits under it. */
#library .file { display: block; }
.file-label { display: block; font-weight: 600; }
.file-note  { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35;
              color: #8b929b; font-weight: 400; }

/* ---------------------------------------------------------------- archive
   Past classes as collapsed entries, newest first. */
.arch-head { margin: 30px 0 10px; }
.more {
  display: block; width: 100%; margin-top: 0; padding: 15px 0;
  background: none; border: 0; border-top: 1px solid var(--rule-faint);
  color: var(--muted-1); cursor: pointer; text-align: left;
}
.more:hover { color: var(--amber); }

body.screen #library-sec, body.screen #archive-sec { display: none; }

/* The hidden attribute loses to any element rule that sets display (.chip does).
   Without this, a day with no chip renders an empty grey pill beside the date. */
[hidden] { display: none !important; }

/* Quotes that carry a leader's portrait. `.withpic` only appears when the
   lessons.json entry supplies `img`, so untouched quotes keep the old markup. */
blockquote.withpic { display: flex; gap: 14px; align-items: flex-start; }
blockquote.withpic img.ga {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; margin-top: 2px;
  border: 2px solid rgba(232,180,100,.55); background: #1b1f25;
}
blockquote.withpic .qb { min-width: 0; }
body.screen blockquote.withpic { gap: 2.2vw; align-items: center; }
body.screen blockquote.withpic img.ga {
  width: clamp(64px, 8vw, 190px); height: clamp(64px, 8vw, 190px);
  border-width: 3px; margin-top: 0;
}
@media (max-width: 420px) {
  blockquote.withpic { gap: 11px; }
  blockquote.withpic img.ga { width: 46px; height: 46px; }
}

/* ==========================================================================
   Grounded Pillars reskin — 2026-08-20
   The palette swap above carries most of it. This block does the two things
   tokens can't: put the label voice (DM Sans, tracked caps) everywhere a label
   belongs, and replace bordered cards with hairline rules and air.
   ========================================================================== */

/* ---- the label voice ---------------------------------------------------- */
.brand, .label, .arch-head, .daynote, .file .kind, .reading-dates, .facts dt {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.brand      { font-size: 11px; color: var(--muted-1); }
.label      { font-size: 11px; color: var(--muted-2); }
.arch-head  { font-size: 11px; color: var(--muted-2); }
.daynote    { font-size: 10px; color: var(--muted-2); }
.reading-dates { font-size: 10px; color: var(--muted-2); }
.file .kind { font-size: 9px;  color: var(--muted-2); letter-spacing: .22em; }
.facts dt   { font-size: 10px; color: var(--muted-2); }

/* ---- display: Cormorant, italic, generous ------------------------------- */
h1 { font: 400 clamp(2rem, 7vw, 3rem)/1.04 var(--serif); font-style: italic;
     letter-spacing: -.005em; color: var(--parchment-1); }
.today-title { font: 400 clamp(1.6rem, 5.4vw, 2.15rem)/1.12 var(--serif);
     font-style: italic; letter-spacing: 0; color: var(--parchment-1); }
.today-focus { font-family: var(--serif); font-size: 1.05rem; color: var(--parchment-2); }
.arch-title  { font-family: var(--serif); font-style: italic; font-size: 1.15rem;
     color: var(--parchment-1); }
.arch-date   { font-family: var(--sans); font-weight: 500; font-size: .72rem;
     letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
summary, .more { font-family: var(--serif); font-size: 1.06rem; }

/* ---- surfaces become rules ---------------------------------------------- */
.card {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 22px 0 26px;
}
section { margin-top: 0; }
.file, #library .file, details {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule-faint);
  border-radius: 0;
}
.file { padding: 13px 0; }
.file:hover { background: none; color: var(--amber); }
.refs a { background: none; border: 0; border-bottom: 1px solid var(--rule);
          border-radius: 0; padding: 3px 0; font-family: var(--serif);
          font-size: 1.02rem; color: var(--parchment-1); }
.refs a:hover { border-bottom-color: var(--amber); color: var(--amber); }
.chip { background: none; border: 1px solid var(--rule); border-radius: 999px;
        font: 700 9.5px/1 var(--sans); letter-spacing: .2em;
        text-transform: uppercase; padding: 6px 11px; color: var(--muted-1); }
.chip.gold  { border-color: var(--amber-deep); color: var(--amber); }
.chip.black { border-color: var(--muted-2);   color: var(--parchment-2); }

/* ---- quotes ------------------------------------------------------------- */
blockquote { border-left: 1px solid var(--rule); padding-left: 20px; }
blockquote p { font-family: var(--serif); font-style: italic; font-size: 1.12rem;
               line-height: 1.5; color: var(--parchment-1); }
blockquote cite { font: 400 .8rem/1.45 var(--sans); color: var(--muted-1);
                  letter-spacing: .01em; }
blockquote.withpic img.ga { border: 1px solid var(--rule); }

footer { border-top: 1px solid var(--rule-faint); color: var(--muted-2);
         font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; }

/* ---- projector, Grounded Pillars temperature --------------------------- */
body.screen .today-title { font-style: italic; color: #17130D; }
body.screen .today-focus { color: #3A3327; }
/* The wall reads in the sans. Cormorant has a small x-height and low stroke
   contrast — beautiful at arm's length, thin from the back of a classroom. */
body.screen blockquote p { color: #1B160E; font-family: var(--sans); font-weight: 500;
                           font-style: normal; letter-spacing: -.01em; }
body.screen blockquote { border-left-color: rgba(138,106,18,.55); }
body.screen blockquote cite { color: #6B5F4A; }
body.screen .chip.black { background: #17130D; color: #FFFDF9; border-color: #17130D; }
body.screen .chip.gold  { background: rgba(138,106,18,.10); color: #6F5510;
                          border-color: rgba(138,106,18,.5); }
body.screen .brand, body.screen .label, body.screen .daynote { color: #776C59; }
body.screen .verse p { font-family: var(--serif); font-style: italic; }
body.screen .verse cite b { font-family: var(--sans); }

/* Subtitles are prose, not labels — they describe the thing, they don't name a
   section. Serif, quiet, no tracking. */
.file-note, .join-sub {
  font-family: var(--serif); font-size: .95rem; line-height: 1.4;
  letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted-1);
}
.file-label { font-family: var(--serif); font-size: 1.06rem; color: var(--parchment-1); }

/* Anything the reskin coloured with a parchment token needs a dark counterpart
   on the wall, or it disappears into the white. */
body.screen h1,
body.screen .today-title,
body.screen .arch-title,
body.screen .file-label,
body.screen .refs a       { color: #17130D; }
body.screen .file-note,
body.screen .join-sub     { color: #554C3D; }
body.screen .refs a       { border-bottom-color: rgba(138,106,18,.35); }
body.screen .refs a:hover { color: #8A6A10; border-bottom-color: #8A6A10; }
body.screen .card         { border-top-color: rgba(138,106,18,.22); }
body.screen .file,
body.screen details       { border-top-color: rgba(138,106,18,.12); }

body.screen h1, body.screen .today-title, body.screen .arch-title {
  font-family: var(--sans); font-style: normal; font-weight: 800; letter-spacing: -.022em; }
body.screen .today-focus, body.screen .refs a, body.screen .file-label,
body.screen .reading b, body.screen #week-block {
  font-family: var(--sans); font-weight: 500; letter-spacing: -.008em; }
body.screen .verse p { font-family: var(--sans); font-weight: 600; font-style: normal;
                       letter-spacing: -.012em; }


/* =========================================================================
   Site chrome — home, nav, library, archive
   Added 2026-09-06. brojudd.com is a home page with three sections behind
   it (#/today, #/library, #/class) rather than one long scroll. The router
   in app.js turns sections on and off with .off; everything here is the
   look of that structure. On the wall (?screen) none of it appears.
   ========================================================================= */

.off { display: none !important; }

/* ---------------------------------------------------------------- header ---
   Brand and sections on one line, with the sections wrapping under the brand
   on a narrow phone rather than squeezing. */

header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding: 26px 0 14px;
  border-bottom: 1px solid var(--rule-faint);
}

/* The masthead is the logo now. It sits on the baseline the nav shares. */
header .logo { --logo-j: 40px; }

.nav {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

.nav a {
  font: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--amber); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--parchment-1); border-bottom-color: var(--amber); }

/* The lesson's heading, which used to live in the header itself. */
#day-head { flex: 1 0 100%; padding: 18px 0 0; }
#day-head .datebar { margin-top: 0; }

.back {
  display: inline-block;
  margin-top: 14px;
  font: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted-2);
}
.back::before { content: "\2190\00a0\00a0"; }
.back:hover { color: var(--amber); text-decoration: none; }

/* ------------------------------------------------------------------ home ---
   One card, and it is the lesson. A student who opens the site during class
   should be able to see what today is without reading anything else. */

#home-sec { margin-top: 26px; }

.home-today {
  display: block;
  padding: 4px 0 26px;
  border-bottom: 1px solid var(--rule-faint);
  color: inherit;
}
.home-today:hover { text-decoration: none; }
.home-today .label { display: block; margin-bottom: 10px; }
.ht-date {
  display: block;
  font: var(--label);
  /* Two facts on one line at 390px, so it never breaks into a second row of
     tracked caps — which reads as a heading the page does not have. */
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.ht-title {
  display: block;
  font: 400 clamp(1.9rem, 7vw, 2.6rem)/1.06 var(--serif);
  font-style: italic;
  color: var(--parchment-1);
  letter-spacing: -.005em;
}
.ht-focus {
  display: block;
  margin-top: 12px;
  font-size: 1.05rem;
  color: var(--parchment-2);
}
.ht-go {
  display: inline-block;
  margin-top: 18px;
  font: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--amber);
}
.ht-go::after { content: "\00a0\00a0\2192"; }
.home-today:hover .ht-title { color: var(--amber); }

/* The two doors off the front page. */
#home-more-sec { margin-top: 26px; }
.tiles { display: grid; gap: 0; }
.tile {
  display: block;
  padding: 20px 0;
  border-top: 1px solid var(--rule-faint);
  color: inherit;
}
.tile:hover { text-decoration: none; }
.tile-t {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--parchment-1);
}
.tile:hover .tile-t { color: var(--amber); }
.tile-n {
  display: block;
  margin-top: 3px;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--muted-1);
}

/* --------------------------------------------------------------- library ---
   Four groups, each a quiet label over a list. The lesson-page and handout
   groups are built from lessons.json, so they fill themselves. */

#library-sec { margin-top: 28px; }
.lib-group { margin-top: 30px; }
.lib-group:first-child { margin-top: 6px; }
.lib-group .label { margin-bottom: 4px; }

/* --------------------------------------------------------------- archive ---
   A row is a link to that day's own view. */

.arch-row {
  display: block;
  padding: 15px 0;
  border-top: 1px solid var(--rule-faint);
  color: inherit;
}
.arch-row:hover { text-decoration: none; }
.arch-row:hover .arch-title { color: var(--amber); }
.arch-row .arch-date  { display: block; line-height: 1.3; }
.arch-row .arch-title { display: block; line-height: 1.3; margin-top: 2px; }
/* The lesson titles are hooks for the room — "Real", "Lean". This is the
   sentence that tells a parent what the hour was about. */
.arch-row .arch-focus { display: block; margin-top: 4px; font-size: .95rem;
  line-height: 1.4; color: var(--muted-1); }

/* Same job in the library: when it was, what it was called, what it was. */
.file-when { display: block; font: var(--label); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 5px; }

/* ------------------------------------------------------------ class page ---
   Both panels are open by default now that they have a page to themselves. */

#extras-sec { margin-top: 26px; }
.count { color: var(--muted-2); font-weight: 400; }

/* ------------------------------------------------------------- the wall ---
   None of the above belongs on a projector. */

/* The wall keeps the plain brand line it always had — Jake's call: the logo
   does not go on the projector, where every line costs lesson space. So the
   lockup collapses to just its class line, styled as the old .brand was. */
body.screen header { display: block; border-bottom: 0; }
body.screen .logo-j, body.screen .logo-name { display: none; }
body.screen .logo { display: block; }
body.screen .logo-sub { margin: 0; font-size: clamp(13px, 1.05vw, 22px);
  letter-spacing: 0.2em; color: #776C59; }
body.screen .nav,
body.screen #home-sec,
body.screen #home-more-sec,
body.screen #day-back { display: none; }
body.screen #day-head { padding: 0 0 clamp(6px, 1vw, 16px); }

@media (max-width: 520px) {
  .nav { margin-left: 0; gap: 14px; }
}


/* --------------------------------------------------- the poll on the wall ---
   Everything projected is DM Sans (the day title, the focus line, the rotating
   quote). The poll panel was the one thing still inheriting the page's serif,
   which also meant oldstyle figures in the percentages — the worst possible
   numerals to read from the back row. */

body.screen #poll-sec { font-family: var(--sans); }
/* .join-sub carries its own font-family, and a direct declaration beats an
   inherited one however specific the ancestor rule is. */
body.screen #poll-sec .join-sub { font-family: var(--sans); }
body.screen .poll-q { font-weight: 600; }
body.screen .poll-opt { font-weight: 500; }
body.screen .poll-opt .p,
body.screen .join-url,
body.screen .count { font-variant-numeric: lining-nums tabular-nums; }


/* ------------------------------------------------------- lesson subjects ---
   The passage line that rides with a lesson's name. Set apart from the title
   by weight and colour rather than by a new line, so the two read as one
   thing: "Real · Psalms 3, 22, 51". */

.subj {
  font-style: normal;
  font-weight: 400;
  color: var(--muted-1);
  white-space: nowrap;
}
.subj::before { content: "\00a0\00a0\00b7\00a0\00a0"; color: var(--muted-2); }

/* Against the big display titles it steps well down; against an archive row's
   1.15rem title it only needs to step down a little. */
.ht-title .subj, .today-title .subj { font-size: .46em; letter-spacing: 0; }
.subj.small { font-size: .8em; }

/* A long passage line wraps rather than pushing the row sideways. */
@media (max-width: 460px) { .subj { white-space: normal; } }

.home-today:hover .subj { color: var(--muted-1); }
body.screen .today-title .subj { color: #776C59; }