/* church.css — the Religious Studies Department.
 *
 * Shared by the two rooms the department holds: the Church of the Absolute
 * Beginner (/college/religious-studies/) and Lesson One
 * (/college/religious-studies/the-rite/). It sits beside them rather than in
 * assets/site.css because nothing else on the site uses a line of it.
 *
 * Nothing in it moves, so there is nothing here for a reduced-motion setting
 * to stop. Keep it that way: a rite that fidgets is a show.
 */

/* ── The Church of the Absolute Beginner ──────────────────────────────
   One room, one column. The site's tokens throughout; the single local
   colour is the candle, used only where the church itself is speaking —
   its mark, its numerals, its hymn — so the department's prose and the
   church's own words can be told apart at a glance. Nothing here moves. */
.cab, .cab-scope { --candle: #E9CF9A; --candle-dim: rgba(233, 207, 154, 0.28); }

.cab { max-width: 42rem; margin: 0 auto; }
.cab-section { margin-top: clamp(4rem, 9vw, 6.5rem); }
.cab-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--candle);
  margin: 0 0 0.9rem;
}
.cab-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--white);
  margin: 0 0 1.8rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.cab p {
  font-size: 1.14rem;
  line-height: 1.8;
  color: rgba(240, 237, 255, 0.84);
  margin: 0 0 1.15rem;
}
.cab p em { color: var(--white); }
.cab p strong { color: var(--white); font-weight: 400; }
.cab a { color: var(--signal-glow); text-decoration: none; border-bottom: 1px solid rgba(143, 169, 255, 0.35); }
.cab a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.cab a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.cab sup { font-family: 'DM Mono', monospace; font-size: 0.6em; line-height: 0; }
.cab sup a { border-bottom: 0; color: var(--candle); padding: 0 0.1em; }

/* ── The Statement ── */
.cab-statement {
  text-align: center;
  padding: clamp(2.4rem, 6vw, 3.6rem) clamp(1.2rem, 5vw, 3rem);
  border: 1px solid var(--candle-dim);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(233, 207, 154, 0.07), transparent 62%),
    rgba(11, 15, 42, 0.45);
}
.cab-mark { width: 84px; height: 84px; display: block; margin: 0 auto 1.8rem; }
.cab-statement .cab-eyebrow { margin-bottom: 2rem; }
.cab-statement p {
  font-size: clamp(1.18rem, 2.6vw, 1.36rem);
  line-height: 1.7;
  color: var(--white);
  max-width: 31rem;
  margin: 0 auto 1.3rem;
}
.cab-statement .cab-close {
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
  line-height: 1.35;
  color: var(--candle);
  margin: 2.2rem auto 0;
}
.cab-statement .cab-source {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.2rem auto 0;
}
.cab-statement .cab-source a { color: var(--muted); border-bottom-color: var(--border); }

/* ── The company ── */
.cab-company { list-style: none; margin: 2rem 0; padding: 0; border-top: 1px solid var(--border); }
.cab-company li { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.cab-company .cab-who {
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--candle);
  margin: 0 0 0.6rem;
}
.cab-company p { font-size: 1.06rem; line-height: 1.75; margin: 0; }
.cab-company q { font-style: italic; color: var(--white); quotes: "\201C" "\201D"; }

/* ── The hymn ── */
.cab-hymn-wrap {
  margin: 0 0 2.6rem;
  padding: clamp(0.6rem, 2vw, 1rem) clamp(1rem, 4vw, 2.4rem) clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--candle-dim);
}
.cab-hymn { list-style: none; margin: 0; padding: 0; counter-reset: verse; }
.cab-hymn li {
  counter-increment: verse;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: baseline;
  gap: 0.6rem;
  font-style: italic;
  font-size: clamp(1.3rem, 3.3vw, 1.75rem);
  line-height: 1.35;
  color: var(--white);
  padding: 0.5rem 0;
}
.cab-hymn li::before {
  content: counter(verse);
  font-family: 'DM Mono', monospace;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--candle);
}

/* ── The rite ──
   The order of service is printed in full in the markup, so a reader with
   scripts off has the whole rite in front of them and can say it without the
   page. assets/rite.js only adds the answering: it sets data-state on each
   line (waiting → current → said) and shows the form. With no data-state at
   all, every line reads as printed. */
.cab-rite {
  margin: 2.2rem 0 0;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid var(--candle-dim);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(233, 207, 154, 0.06), transparent 60%),
    rgba(11, 15, 42, 0.45);
}
.cab .cab-rubric {
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--candle);
  margin: 0 0 0.9rem;
}
.cab-order { list-style: none; margin: 1.8rem 0 0; padding: 0; counter-reset: line; border-top: 1px solid var(--border); }
.cab-order li {
  counter-increment: line;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0 0.6rem;
  padding: 0.95rem 0.6rem 0.95rem 0;
  border-bottom: 1px solid var(--border);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.35;
}
.cab-order li::before {
  content: counter(line);
  grid-row: 1 / span 2;
  padding: 0.55em 0 0 0.6rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.cab-call { grid-column: 2; color: var(--white); }
.cab-response { grid-column: 2; font-style: italic; color: var(--muted); }
.cab-order li[data-state="waiting"] .cab-call { color: rgba(240, 237, 255, 0.58); }
.cab-order li[data-state="current"] { background: rgba(233, 207, 154, 0.05); }
.cab-order li[data-state="current"]::before { color: var(--cyan); }
.cab-order li[data-state="current"] .cab-response { color: var(--lavender); }
.cab-order li[data-state="said"]::before { color: var(--candle); }
.cab-order li[data-state="said"] .cab-response { color: var(--candle); }

.cab-rite form { margin-top: 1.8rem; }
.cab-rite noscript .cab-rubric { margin: 1.4rem 0 0; }
.cab-rite .cab-now {
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1.1rem;
}
.cab-field-label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.cab-rite input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--white);
  background: var(--void);
  border: 1px solid var(--border);
  padding: 0.75rem 0.9rem;
}
.cab-rite input[type="text"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cab-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }
.cab-actions button {
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.85rem 1.3rem;
  color: var(--void);
  background: var(--candle);
  border: 1px solid var(--candle);
  cursor: pointer;
}
.cab-actions button[type="button"] { color: var(--white); background: transparent; border-color: var(--border); }
.cab-actions button:hover { filter: brightness(1.08); }
.cab-actions button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.cab-rite .cab-status {
  font-family: 'DM Mono', monospace;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--muted);
  min-height: 1.7em;
  margin: 1.2rem 0 0;
}
/* ── Lesson One ── */
.cab-lessons {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.cab-lessons li { background: var(--void); padding: 1.6rem 1.5rem 1.7rem; }
.cab-lessons .cab-num {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--candle);
  margin: 0 0 0.7rem;
}
.cab-lessons h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: var(--lavender);
  margin: 0 0 0.6rem;
}
.cab-lessons p { font-size: 0.98rem; line-height: 1.65; color: var(--muted); margin: 0; }

/* ── What it does not claim ── */
.cab-bounds { margin: 0; }
.cab-bounds div { padding: 1.2rem 0; border-bottom: 1px solid var(--border); }
.cab-bounds div:first-child { padding-top: 0; }
.cab-bounds dt {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.45rem;
}
.cab-bounds dd { margin: 0; font-size: 1.06rem; line-height: 1.7; color: rgba(240, 237, 255, 0.8); }

/* ── Notes ── */
.cab .cab-stamp {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
}
.cab-notes { margin: 0; padding-left: 1.4rem; }
.cab-notes li { font-size: 0.95rem; line-height: 1.65; color: var(--muted); margin-bottom: 0.7rem; }
.cab-notes li:target { color: var(--white); }
.cab .cab-back {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3rem;
}

/* A lesson that has a page: the card's title is the door. */
.cab-lessons h3 a { color: inherit; border-bottom: 1px solid rgba(192, 132, 252, 0.4); }
.cab-lessons h3 a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.cab-lessons .cab-num b { font-weight: 400; color: var(--cyan); }

/* ── The lesson pages ── */
.cab .cab-claim {
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
  line-height: 1.45;
  color: var(--white);
  margin: 0 0 1.6rem;
}
.cab-def {
  margin: 1.8rem 0;
  padding: 1.4rem 0 1.4rem 1.6rem;
  border-left: 2px solid var(--candle);
}
.cab .cab-def p {
  font-style: italic;
  font-size: clamp(1.2rem, 2.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}
.cab-terms { margin: 1.6rem 0 0; }
.cab-terms div { padding: 1.1rem 0; border-top: 1px solid var(--border); }
.cab-terms dt { font-style: italic; font-size: 1.2rem; color: var(--candle); margin: 0 0 0.35rem; }
.cab-terms dd { margin: 0; font-size: 1.08rem; line-height: 1.72; color: rgba(240, 237, 255, 0.82); }
.cab-kind {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.35);
  padding: 0.3rem 0.6rem;
  margin: 0 0 1.4rem;
}
.cab-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.08em;
  line-height: 1.15;
  color: var(--lavender);
  margin: 2.4rem 0 0.9rem;
}