/* ============================================================
   THE ILLUMINATED MISSAL — St. Peter's African Orthodox Cathedral
   missal.css — the paper system, inks, type, and print furniture
   Set in IM Fell English + EB Garamond · Rubricated by the church year
   In Tenebris Lumen
   ============================================================ */

/* ---------- 1. THE PAPER LAWS ---------- */
:root {
  /* Aged vellum — warm cream/ivory, never flat, never #fff */
  --paper:        #f3ead4;
  --paper-warm:   #efe4c9;
  --paper-deep:   #e8dab8;
  --paper-edge:   #d9c89e;

  /* Body ink — warm near-black, never #000 */
  --ink:          #241c14;
  --ink-soft:     #4a3e2c;
  --ink-faint:    #756248;

  /* Rubric red — reserved for rubrics, red-letter, directive text */
  --rubric:       #9e2b25;
  --rubric-deep:  #7c1f1a;

  /* Gold — display accents; gold-leaf gradient lives inside ornament only */
  --gold:         #a67c1e;
  --gold-deep:    #8a6516;
  --gold-pale:    #c9a84c;
  --gold-leaf-1:  #8a6b1c;
  --gold-leaf-2:  #c9a84c;
  --gold-leaf-3:  #ecd9a4;

  /* Season inks — set by missal.js from the engine; default green Ordinary */
  --season-ink:   #2f5d3f;
  --season-name:  "The Season after Pentecost";
  --season-color-name: "green";

  /* Rule lines */
  --rule:         #c4b389;
  --rule-fine:    #d4c6a0;

  /* Typography */
  --fell:         'IM Fell English', 'EB Garamond', Georgia, serif;
  --fell-sc:      'IM Fell English SC', 'IM Fell English', serif;
  --garamond:     'EB Garamond', Georgia, serif;
  --blackletter:  'UnifrakturMaguntia', 'IM Fell English', serif;

  /* Page geometry */
  --measure:      66ch;
  --margin-outer: clamp(48px, 12vw, 140px);
  --margin-inner: clamp(24px, 4vw, 48px);
  --gutter:       clamp(20px, 3vw, 40px);
}

/* Season ink presets (missal.js swaps --season-ink, but we declare all) */
[data-season="advent"]          { --season-ink: #5b2a86; }
[data-season="christmastide"]   { --season-ink: #a67c1e; }
[data-season="epiphany_feast"]  { --season-ink: #a67c1e; }
[data-season="epiphanytide"]    { --season-ink: #2f5d3f; }
[data-season="pre_lent"]        { --season-ink: #5b2a86; }
[data-season="lent"]            { --season-ink: #5b2a86; }
[data-season="passiontide"]     { --season-ink: #7c1f1a; }
[data-season="holy_week"]       { --season-ink: #7c1f1a; }
[data-season="maundy_thursday"] { --season-ink: #a67c1e; }
[data-season="good_friday"]     { --season-ink: #9e2b25; }
[data-season="holy_saturday"]   { --season-ink: #7d6f57; }
[data-season="eastertide"]      { --season-ink: #a67c1e; }
[data-season="ascension"]       { --season-ink: #a67c1e; }
[data-season="pentecost"]       { --season-ink: #9e2b25; }
[data-season="trinity"]         { --season-ink: #a67c1e; }
[data-season="season_after_pentecost"] { --season-ink: #2f5d3f; }
[data-season="christ_the_king"] { --season-ink: #a67c1e; }

/* ---------- 2. RESET & GROUND ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--garamond);
  font-size: 1.111rem;
  line-height: 1.72;
  color: var(--ink);
  background-color: var(--paper);
  /* Paper-fiber texture: inline SVG turbulence, no image files */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.82  0 0 0 0 0.74  0 0 0 0 0.56  0 0 0 0.07 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 50% 0%, rgba(255,250,235,0.4), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(180,160,110,0.15), transparent 50%);
  background-attachment: fixed;
  background-size: 200px 200px, 100% 100%, 100% 100%;
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

/* Gilded page-edge — faint warm border as though the book's edge is gilded */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(166,124,30,0.12),
    inset 0 0 60px rgba(166,124,30,0.05),
    inset 0 0 120px rgba(100,75,20,0.04);
}

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
  font-family: var(--fell);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: 0.005em;
}

.fell-sc { font-family: var(--fell-sc); letter-spacing: 0.04em; }
.rubric  { color: var(--rubric); font-style: italic; }
.gold-text { color: var(--gold); }
.season-text { color: var(--season-ink); }

p { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--rubric);
  text-decoration: none;
  border-bottom: 1px solid rgba(158,43,37,0.25);
  transition: border-color 0.2s, color 0.2s;
}
a:hover, a:focus {
  color: var(--rubric-deep);
  border-bottom-color: var(--rubric);
}

/* Old-style figures everywhere by default */
body { font-feature-settings: "kern" 1, "liga" 1, "onum" 1; }

/* ---------- 4. PRINT FURNITURE ---------- */

/* The book page — wide outer margin for marginalia */
.book-page {
  max-width: 100%;
  margin: 0 auto;
  padding:
    clamp(40px, 6vw, 72px) var(--margin-outer)
    clamp(60px, 8vw, 96px) var(--margin-inner);
  position: relative;
  z-index: 2;
}

.leaf {
  max-width: var(--measure);
  margin: 0 auto;
  position: relative;
}

/* Running head — slim persistent band on scroll */
.running-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(to bottom,
    rgba(243,234,212,0.96) 0%,
    rgba(243,234,212,0.88) 70%,
    rgba(243,234,212,0) 100%);
  padding: 8px var(--margin-outer) 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fell-sc);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, padding 0.3s;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.running-head.is-pinned {
  border-bottom-color: var(--rule);
  padding-bottom: 10px;
}
.running-head .rh-left { color: var(--ink-soft); }
.running-head .rh-right { display: flex; gap: 12px; align-items: baseline; }
.running-head .rh-season { color: var(--season-ink); }
.running-head .rh-folio { font-variant-numeric: oldstyle-nums; color: var(--ink-faint); }
.running-head .rh-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--season-ink);
  border-radius: 50%;
  vertical-align: middle;
}

/* Masthead — the head of the book */
.masthead-block {
  text-align: center;
  padding: clamp(14px, 2vw, 24px) 0;
}
.masthead-blackletter {
  font-family: var(--blackletter);
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.masthead-rule {
  margin: 14px auto;
  width: min(420px, 80%);
  height: 8px;
}

/* Contents line — leader-dot styling */
.contents-line {
  font-family: var(--fell-sc);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.4em;
  padding: 6px 0 4px;
}
.contents-line a {
  color: var(--ink-soft);
  border-bottom: none;
  white-space: nowrap;
}
.contents-line a:hover { color: var(--rubric); }

/* Mobile contents drawer */
.contents-drawer {
  display: none;
}

/* Engraved rule with center device */
.engraved-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(20px, 3vw, 32px) auto;
  max-width: 520px;
  color: var(--rule);
}
.engraved-rule::before,
.engraved-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--rule) 20%, var(--rule) 80%, transparent);
}
.engraved-rule .device {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}

/* Hairline rule */
.hairline {
  border: none;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--rule) 15%, var(--rule) 85%, transparent);
  margin: clamp(16px, 2vw, 24px) auto;
  max-width: 480px;
}

/* Section label — spaced small caps, metal-type letter-spacing */
.section-label {
  font-family: var(--fell-sc);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--season-ink);
  text-transform: uppercase;
  margin-bottom: 0.6em;
}

/* ---------- 5. ILLUMINATED INITIALS ---------- */
.illum-initial {
  float: left;
  width: clamp(56px, 5vw, 78px);
  height: clamp(56px, 5vw, 78px);
  margin: 6px 12px 0 0;
  shape-outside: circle(50% at 50% 50%);
}

/* The letter itself — Fell-form, gold-leaf gradient body */
.illum-initial .initial-letter {
  font-family: var(--fell);
  font-size: clamp(3.2rem, 5vw, 4.6rem);
  line-height: 0.82;
  text-anchor: middle;
}

/* The versal — a full-height illuminated initial spanning the incipit */
.incipit-block {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.5vw, 18px);
  margin-bottom: 1.2em;
}
.illum-versal {
  flex: none;
  width: clamp(52px, 5vw, 72px);
  height: auto;
  /* The SVG viewBox is 78x108 (2:2.77 ratio) — height scales with width */
  /* At 72px width, height = ~100px, matching the two-line incipit at ~2rem/1.3lh */
}
.incipit-text {
  font-family: var(--fell);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  padding-top: 0.05em;
  flex: 1;
}
@media (max-width: 720px) {
  .illum-versal {
    width: clamp(44px, 12vw, 58px);
  }
  .incipit-text {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    line-height: 1.35;
  }
}

/* ---------- 6. PLATES (tipped-in photographs) ---------- */
.plate {
  margin: clamp(36px, 5vw, 56px) auto;
  max-width: 680px;
  break-inside: avoid;
}
.plate-frame {
  background: var(--paper-warm);
  padding: clamp(10px, 1.5vw, 16px);
  border: 1px solid var(--rule);
  box-shadow:
    0 1px 0 rgba(36,28,20,0.08),
    0 2px 8px rgba(36,28,20,0.06),
    inset 0 0 0 1px rgba(255,250,235,0.3);
  position: relative;
}
/* Plate-mark corners */
.plate-frame::before,
.plate-frame::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--gold);
  opacity: 0.5;
}
.plate-frame::before { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.plate-frame::after  { bottom: 4px; right: 4px; border-left: none; border-top: none; }

.plate-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.08) contrast(1.02) saturate(0.95);
}

.plate-caption {
  margin-top: 14px;
  text-align: center;
}
.plate-number {
  font-family: var(--fell-sc);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.plate-caption-text {
  font-family: var(--garamond);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 6px;
}
.plate-credit {
  font-family: var(--fell-sc);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ---------- 7. CATCHWORDS (page-foot links) ---------- */
.catchword {
  text-align: right;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-fine);
  font-family: var(--fell);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}
.catchword a {
  color: var(--ink-soft);
  border-bottom: none;
  font-style: italic;
}
.catchword a:hover { color: var(--rubric); }
.catchword .cw-arrow {
  font-family: var(--fell-sc);
  font-style: normal;
  color: var(--gold);
  margin-right: 6px;
}

/* ---------- 8. THE RIBBON (silk bookmark) ---------- */
.ribbon {
  position: fixed;
  top: 0;
  right: clamp(20px, 6vw, 80px);
  width: 14px;
  z-index: 40;
  pointer-events: none;
  transform-origin: top center;
  transition: height 0.15s linear;
}
.ribbon-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* The ribbon's color is set by --season-ink via JS */
.ribbon-silk {
  fill: var(--season-ink);
}
.ribbon-sheen {
  fill: rgba(255,255,255,0.22);
}
.ribbon-shadow {
  fill: rgba(0,0,0,0.18);
}
/* Subtle sway on scroll stop — JS toggles .sway */
.ribbon.sway .ribbon-svg {
  animation: ribbon-sway 0.6s ease-out;
}
@keyframes ribbon-sway {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(1.2deg); }
  60%  { transform: rotate(-0.6deg); }
  100% { transform: rotate(0deg); }
}

/* ---------- 9. MARGINALIA ---------- */
.marginalia {
  font-family: var(--garamond);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 32ch;
}
.marginalia .m-rubric {
  color: var(--rubric);
  font-style: italic;
}

/* ---------- 10. ORDER OF SERVICE ---------- */
.order-line {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--fell);
}
.order-line .ol-day {
  font-family: var(--fell-sc);
  letter-spacing: 0.06em;
  font-size: 1.1rem;
  color: var(--ink);
  min-width: 5em;
}
.order-line .ol-what {
  flex: 1;
  font-size: 1.05rem;
  color: var(--ink);
}
.order-line .ol-when {
  font-family: var(--fell);
  font-style: italic;
  color: var(--rubric);
  font-size: 1.05rem;
  white-space: nowrap;
}
.order-note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  padding: 6px 0 0;
}

/* ---------- 11. TITLE PAGE ---------- */
.title-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(16px, 3vw, 32px) var(--gutter) clamp(8px, 1vw, 16px);
  position: relative;
}
.title-frame {
  position: relative;
  border: 1px solid rgba(166,124,30,0.35);
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px);
  max-width: 480px;
  width: 100%;
}
.title-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(166,124,30,0.18);
  pointer-events: none;
}
.title-frame-inner {
  position: relative;
  z-index: 1;
}
.tf-corner {
  position: absolute;
  width: 22px;
  height: 16px;
  opacity: 0.65;
}
.tf-tl { top: -3px; left: -3px; }
.tf-tr { top: -3px; right: -3px; transform: scaleX(-1); }
.tf-bl { bottom: -3px; left: -3px; transform: scaleY(-1); }
.tf-br { bottom: -3px; right: -3px; transform: scale(-1,-1); }
.title-masthead {
  font-family: var(--blackletter);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: clamp(12px, 2vw, 20px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.title-sublines {
  font-family: var(--fell-sc);
  font-size: clamp(0.72rem, 1.2vw, 0.92rem);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: clamp(14px, 2vw, 24px);
}
.title-cross {
  margin: clamp(10px, 1.5vw, 18px) auto clamp(4px, 0.5vw, 8px);
  width: clamp(40px, 5vw, 56px);
  height: auto;
}
.title-today {
  font-family: var(--fell);
  font-style: italic;
  color: var(--rubric);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  max-width: 36ch;
  margin: 0 auto;
  line-height: 1.5;
}

/* ---------- 12. KALENDAR ---------- */
.kalendar-hero {
  text-align: center;
  padding: clamp(30px, 5vw, 60px) var(--gutter) clamp(20px, 3vw, 36px);
}
.kalendar-hero h1 {
  font-family: var(--fell);
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.05;
  margin-bottom: 12px;
}
.kalendar-hero .kh-sub {
  font-family: var(--fell);
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 44ch;
  margin: 0 auto;
}

.wheel-container {
  display: flex;
  justify-content: center;
  padding: clamp(20px, 3vw, 40px) var(--gutter);
  position: relative;
}
.wheel-svg {
  max-width: min(680px, 92vw);
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Wheel arcs — manuscript wash of season ink over paper */
.wheel-arc {
  fill: color-mix(in srgb, var(--arc-ink) 16%, var(--paper-warm));
  stroke: color-mix(in srgb, var(--arc-ink) 40%, var(--rule));
  stroke-width: 0.6;
  cursor: pointer;
  transition: fill 0.3s, stroke-width 0.3s;
}
.wheel-arc:hover,
.wheel-arc:focus,
.wheel-arc.is-active {
  fill: color-mix(in srgb, var(--arc-ink) 30%, var(--paper-warm));
  stroke: var(--arc-ink);
  stroke-width: 1.2;
  outline: none;
}
.wheel-arc.is-today {
  fill: color-mix(in srgb, var(--arc-ink) 22%, var(--paper-warm));
}
.wheel-arc.is-today:hover,
.wheel-arc.is-today.is-active {
  fill: color-mix(in srgb, var(--arc-ink) 36%, var(--paper-warm));
}
.wheel-arc:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.wheel-label {
  font-family: var(--fell-sc);
  font-size: 11px;
  letter-spacing: 0.04em;
  fill: var(--arc-ink);
  pointer-events: none;
}
.wheel-label-outside {
  font-family: var(--fell-sc);
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--arc-ink);
  pointer-events: none;
}

.wheel-feast-mark {
  fill: var(--rubric);
  stroke: var(--paper);
  stroke-width: 0.8;
}
.wheel-feast-mark.principal {
  fill: var(--gold);
}

.wheel-today {
  animation: today-pulse 3s ease-in-out infinite;
}
.wheel-today-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
}
@keyframes today-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Marginalia panel for wheel */
.wheel-marginalium {
  max-width: 460px;
  margin: clamp(20px, 3vw, 36px) auto;
  padding: clamp(20px, 3vw, 32px);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--season-ink);
  position: relative;
  min-height: 140px;
  display: none;
}
.wheel-marginalium.is-open { display: block; }
.wheel-marginalium .wm-season {
  font-family: var(--fell);
  font-size: 1.4rem;
  color: var(--arc-ink, var(--season-ink));
  margin-bottom: 6px;
}
.wheel-marginalium .wm-color {
  font-family: var(--fell-sc);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.wheel-marginalium .wm-explain {
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 12px;
}
.wheel-marginalium .wm-span {
  font-family: var(--fell);
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.wheel-marginalium .wm-today {
  color: var(--rubric);
  font-style: italic;
}

/* Manuscript season list */
.season-list {
  max-width: 680px;
  margin: clamp(40px, 6vw, 72px) auto;
}
.season-entry {
  margin-bottom: clamp(32px, 5vw, 52px);
  position: relative;
  padding-left: 0;
}
.season-entry .se-roman {
  font-family: var(--fell);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--se-ink, var(--season-ink));
  line-height: 1;
  margin-bottom: 4px;
}
.season-entry .se-name {
  font-family: var(--fell);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 8px;
}
.season-entry .se-color-line {
  font-family: var(--fell-sc);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--rubric);
  margin-bottom: 14px;
}
.season-entry .se-rule {
  border: none;
  height: 1px;
  background: var(--se-ink, var(--season-ink));
  opacity: 0.5;
  margin: 0 0 14px;
  max-width: 180px;
}
.season-entry .se-meaning {
  font-family: var(--garamond);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: 56ch;
}

/* ---------- 13. COLOPHON ---------- */
.colophon {
  text-align: center;
  padding: clamp(40px, 6vw, 64px) var(--gutter) clamp(30px, 4vw, 48px);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-faint);
  max-width: 52ch;
  margin: 0 auto;
}
.colophon .col-name {
  font-family: var(--fell);
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.colophon .col-addr {
  font-style: italic;
  margin-bottom: 2px;
}
.colophon .col-rule {
  width: 60px;
  height: 1px;
  background: var(--rule);
  margin: 14px auto;
  border: none;
}
.colophon .col-types {
  font-family: var(--fell-sc);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.colophon .col-credits {
  font-size: 0.76rem;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 10px;
}
.colophon .col-device {
  margin: 16px auto 0;
  width: 32px;
  height: 32px;
}
.colophon a {
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--rule);
}
.colophon a:hover { color: var(--rubric); }

/* ---------- 14. TODAY'S LEAF NOTICE ---------- */
.today-leaf {
  font-family: var(--fell);
  font-style: italic;
  color: var(--rubric);
  font-size: 1rem;
  line-height: 1.5;
}
.today-leaf .tl-season-name { color: var(--season-ink); font-style: normal; }
.today-leaf .tl-vestments { color: var(--rubric); }

/* ---------- 15. UTILITY ---------- */
.center { text-align: center; }
.mt-lg { margin-top: clamp(32px, 5vw, 56px); }
.mb-lg { margin-bottom: clamp(32px, 5vw, 56px); }
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width: 720px) {
  html { font-size: 17px; }
  body { font-size: 1.06rem; }

  .book-page {
    padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 32px) clamp(40px, 6vw, 56px);
  }
  :root {
    --margin-outer: clamp(20px, 5vw, 32px);
    --margin-inner: clamp(20px, 5vw, 32px);
  }

  .running-head {
    padding: 6px 16px 10px;
    font-size: 0.66rem;
  }
  .running-head .rh-right { gap: 8px; }
  .running-head .rh-folio { display: none; }

  /* Contents becomes a bookmark drawer on mobile */
  .contents-line { display: none; }
  .contents-drawer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--fell-sc);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    padding: 4px 0;
  }
  .contents-drawer summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 14px;
    border: 1px solid var(--rule);
    background: var(--paper-warm);
  }
  .contents-drawer summary::-webkit-details-marker { display: none; }
  .contents-drawer[open] summary {
    border-bottom-color: transparent;
  }
  .contents-drawer .cd-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em 1em;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    border-top: none;
    background: var(--paper-warm);
    margin-top: -1px;
  }
  .contents-drawer .cd-links a {
    color: var(--ink-soft);
    border-bottom: none;
    white-space: nowrap;
    font-size: 0.78rem;
  }

  .title-masthead { font-size: clamp(1.6rem, 7vw, 2.6rem); }
  .title-sublines { font-size: 0.72rem; letter-spacing: 0.1em; }

  .ribbon { right: clamp(10px, 3vw, 20px); width: 10px; }

  .plate { margin: 32px auto; }
  .engraved-rule { max-width: 90%; }

  .wheel-label { font-size: 9px; }
  .wheel-marginalium { margin: 20px 16px; padding: 20px; }
}

/* ---------- 17. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ribbon.sway .ribbon-svg { animation: none; }
  .wheel-today { animation: none; }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 18. NO-JS FALLBACKS ---------- */
.no-js .wheel-marginalium { display: block; }
.no-js .ribbon { display: none; }
.no-js .running-head .rh-season::after { content: ""; }

/* ============================================================
   PHASE 2 ADDITIONS — additive only; sealed pages unchanged
   ============================================================ */

/* ---------- 19. FORM (prayer page) ---------- */
.missal-form {
  max-width: 560px;
  margin: clamp(24px, 4vw, 40px) auto;
}
.missal-form .field {
  margin-bottom: 1.2em;
}
.missal-form label {
  display: block;
  font-family: var(--fell-sc);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.missal-form input[type="text"],
.missal-form input[type="email"],
.missal-form textarea {
  width: 100%;
  font-family: var(--garamond);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: 10px 14px;
  border-radius: 0;
  transition: border-color 0.2s;
}
.missal-form input[type="text"]:focus,
.missal-form input[type="email"]:focus,
.missal-form textarea:focus {
  outline: none;
  border-color: var(--season-ink);
}
.missal-form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.missal-form .hint {
  display: block;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 4px;
}
.missal-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 1em 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.missal-form .consent input[type="checkbox"] {
  margin-top: 4px;
  flex: none;
}
.missal-form .consent label {
  font-family: var(--garamond);
  font-size: 0.92rem;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0;
}
.missal-form .turnstile-mount {
  margin: 1em 0;
  min-height: 65px;
}
.missal-form .form-submit {
  font-family: var(--fell);
  font-size: 1.1rem;
  color: var(--rubric);
  background: transparent;
  border: 1px solid var(--rubric);
  padding: 10px 28px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.02em;
}
.missal-form .form-submit:hover,
.missal-form .form-submit:focus {
  background: var(--rubric);
  color: var(--paper);
}
.missal-form .form-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
.missal-form .form-status {
  display: none;
  margin-top: 1em;
  padding: 14px 18px;
  font-family: var(--garamond);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--season-ink);
  background: var(--paper-warm);
  color: var(--ink);
}
.missal-form .form-status#error {
  border-left-color: var(--rubric);
  color: var(--rubric-deep);
}

/* ---------- 20. MAP PLATE (worship) ---------- */
.map-plate {
  margin: clamp(28px, 4vw, 44px) auto;
  max-width: 640px;
}
.map-plate .plate-frame iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: none;
  filter: sepia(0.06) contrast(1.01);
}

/* ---------- 21. FILM PLATE (history, church, gallery) ---------- */
.film-plate {
  margin: clamp(28px, 4vw, 44px) auto;
  max-width: 640px;
}
.film-plate .plate-frame {
  position: relative;
  cursor: pointer;
}
.film-plate .film-facade {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.12) contrast(1.02) saturate(0.9);
}
.film-plate .film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(243,234,212,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fell);
  font-size: 1.4rem;
  color: var(--gold-deep);
  transition: background 0.2s, transform 0.2s;
}
.film-plate .plate-frame:hover .film-play {
  background: rgba(243,234,212,0.9);
  transform: translate(-50%, -50%) scale(1.08);
}
.film-plate .film-embed {
  display: none;
  width: 100%;
  height: 360px;
  border: none;
}
.film-plate.is-playing .film-facade,
.film-plate .film-play { display: none; }
.film-plate.is-playing .film-embed { display: block; }
.film-plate.is-playing .plate-frame { cursor: default; }

/* ---------- 22. PLATE ALBUM (gallery) ---------- */
.plate-album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 30vw, 380px), 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin: clamp(28px, 4vw, 44px) auto;
  max-width: 900px;
}
.plate-album .plate {
  margin: 0;
}
.plate-album .plate-frame img {
  max-height: 400px;
  object-fit: contain;
}
@media (max-width: 720px) {
  .plate-album { grid-template-columns: 1fr; gap: 24px; }
  .map-plate .plate-frame iframe { height: 240px; }
  .film-plate .film-embed { height: 240px; }
}

/* ---------- 23. HERITAGE TIMELINE (history) ---------- */
.heritage-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 22vw, 280px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(24px, 3vw, 36px) auto;
  max-width: 720px;
}
.heritage-timeline .ht-cell {
  text-align: center;
  padding: 0 8px;
}
.heritage-timeline .ht-year {
  font-family: var(--fell);
  font-size: 1.3rem;
  color: #6f5210; /* darkened gold — passes 4.5:1 on paper (6.07:1) */
  margin-bottom: 4px;
}
.heritage-timeline .ht-title {
  font-family: var(--fell-sc);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.heritage-timeline .ht-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ============================================================
   WAVE N ADDITIONS — invisible excellence; sealed pages unchanged
   ============================================================ */

/* ---------- 24. TEXT-SAFE SEASON INKS (contrast ≥ 4.5:1 on paper) ---------- */
/* Used only for small-text elements that inherit --season-ink */
/* Full-saturation season inks remain for large display, rules, arcs, ribbon */
:root {
  --season-ink-safe: var(--season-ink); /* default: same as display ink */
}
/* Override for seasons whose display ink fails 4.5:1 as small text */
[data-season="christmastide"]   { --season-ink-safe: #866418; }  /* gold 4.55:1 */
[data-season="epiphany_feast"]  { --season-ink-safe: #866418; }
[data-season="eastertide"]      { --season-ink-safe: #866418; }
[data-season="ascension"]       { --season-ink-safe: #866418; }
[data-season="trinity"]         { --season-ink-safe: #866418; }
[data-season="christ_the_king"] { --season-ink-safe: #866418; }
[data-season="lent"]            { --season-ink-safe: #5b2a86; }  /* violet already passes */
[data-season="holy_saturday"]   { --season-ink-safe: #756851; }  /* lenten_array 4.55:1 */

/* Section labels use the text-safe ink (12px small text) */
.section-label {
  color: var(--season-ink-safe);
}

/* ---------- 25. SKIP LINK (accessibility) ---------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
  font-family: var(--fell-sc);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--rubric);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 8px 16px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- 26. PICTURE ELEMENT (image pipeline) ---------- */
.picture img, .plate-frame picture, .plate-frame picture img {
  display: block;
  width: 100%;
  height: auto;
}
.plate-frame picture {
  display: block;
}

/* ============================================================
   WAVE D ADDITIONS — The Daily Leaf; existing pages unchanged
   ============================================================ */

/* ---------- 27. DAILY LEAF (today.html) ---------- */
.lection-block {
  margin: clamp(20px, 3vw, 32px) auto;
  max-width: var(--measure);
}
.lection-section {
  margin-bottom: clamp(20px, 3vw, 32px);
}
.lection-heading {
  font-family: var(--fell-sc);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--season-ink-safe);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-fine);
}
.lection-entry {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  padding: 6px 0;
  font-family: var(--garamond);
}
.lection-entry .le-label {
  font-family: var(--fell-sc);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  flex: none;
  min-width: 5em;
}
.lection-entry .le-citation {
  font-family: var(--fell);
  font-size: 1.05rem;
  color: var(--ink);
}
.lection-entry .le-citation.rubric-cite {
  color: var(--rubric);
  font-style: italic;
}
.psalm-pair {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 4px 0;
  font-family: var(--fell);
  font-size: 1.02rem;
  color: var(--ink);
}
.psalm-pair .pp-label {
  font-family: var(--fell-sc);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  flex: none;
  min-width: 5em;
}
.lection-rest {
  font-style: italic;
  color: var(--ink-faint);
  text-align: center;
  padding: clamp(20px, 3vw, 32px) 0;
}
/* Sunday block on homepage */
.sunday-block {
  margin: clamp(20px, 3vw, 32px) auto;
  max-width: var(--measure);
  padding: clamp(16px, 2vw, 24px);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--season-ink);
}
.sunday-block .sb-label {
  font-family: var(--fell-sc);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--season-ink-safe);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sunday-block .sb-title {
  font-family: var(--fell);
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.sunday-block .sb-citations {
  font-family: var(--garamond);
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 10px;
}
.sunday-block .sb-citations .sb-cite {
  color: var(--rubric);
  font-style: italic;
}
.sunday-block .sb-link {
  font-family: var(--fell);
  font-style: italic;
  font-size: 0.95rem;
}
.sunday-block.is-empty {
  display: none;
}

/* ============================================================
   WAVE P ADDITIONS — announcements, bulletin, livestream, visit
   ============================================================ */

/* ---------- 28. ANNOUNCEMENTS RAIL ---------- */
.parish-notices {
  margin: clamp(20px, 3vw, 32px) auto;
  max-width: var(--measure);
}
.parish-notices:not(.is-populated) {
  display: none;
}
.parish-notices .pn-label {
  font-family: var(--fell-sc);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--season-ink-safe);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-fine);
}
.ann-entry {
  margin-bottom: 1em;
  padding-bottom: 0.8em;
  border-bottom: 1px dotted var(--rule-fine);
}
.ann-entry:last-child {
  border-bottom: none;
}
.ann-title {
  font-family: var(--fell-sc);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 4px;
}
.ann-body {
  font-family: var(--garamond);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ann-date {
  font-family: var(--fell-sc);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--rubric);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ---------- 29. LIVESTREAM RAIL ---------- */
.livestream-section {
  margin: clamp(20px, 3vw, 32px) auto;
  max-width: var(--measure);
  padding: clamp(16px, 2vw, 24px);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rubric);
  text-align: center;
}
.livestream-section:not(.is-active) {
  display: none;
}
.livestream-label {
  font-family: var(--fell-sc);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--rubric);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.livestream-link {
  font-family: var(--fell);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  border-bottom: 1px solid var(--rubric);
}

/* ---------- 30. BULLETIN PRINT STYLESHEET ---------- */
@media print {
  /* Black ink on white, no backgrounds */
  body {
    background: #ffffff !important;
    color: #000000 !important;
    background-image: none !important;
  }
  body::before { display: none !important; }

  /* Hide navigation, ribbon, skip link, catchwords, colophon, form */
  .ribbon, .running-head, .skip-link, .catchword, .contents-line,
  .contents-drawer, .masthead-block, .colophon, .missal-form,
  .engraved-rule, .print-trigger {
    display: none !important;
  }

  /* Main content: full width, minimal margins for US Letter */
  .book-page {
    padding: 0.5in 0.75in !important;
    max-width: 100% !important;
  }
  .leaf {
    max-width: 100% !important;
  }

  /* Keep typography but in black */
  h1, h2, h3, h4, .incipit-text, .lection-heading, .ann-title {
    color: #000000 !important;
  }
  .lection-entry .le-citation, .lection-entry .le-label,
  .psalm-pair, .psalm-pair .pp-label,
  .ann-body, .ann-date, .section-label, .order-line,
  .order-note, .today-leaf, .sunday-block {
    color: #000000 !important;
    border-color: #999999 !important;
    background: transparent !important;
  }

  /* Page break avoidance */
  .lection-section, .ann-entry, .order-line {
    break-inside: avoid;
  }

  /* Links: no decoration in print */
  a { color: #000000 !important; text-decoration: none !important; border: none !important; }

  /* Font sizes: fit one US Letter sheet */
  html { font-size: 11pt; }
  .incipit-text { font-size: 18pt !important; }
  .lection-heading { font-size: 9pt !important; }
  .lection-entry .le-citation { font-size: 11pt !important; }
  .ann-body { font-size: 10pt !important; }
}

/* Print trigger link (on-screen only) */
.print-trigger {
  font-family: var(--fell);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--rubric);
  cursor: pointer;
  border-bottom: 1px solid var(--rubric);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 0;
}
.print-trigger:hover {
  color: var(--rubric-deep);
}

/* ---------- 31. VISIT PAGE ---------- */
.visit-reassurance {
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 1em 0;
}

/* ============================================================
   WAVE R ADDITIONS — homily rail, Spanish leaf
   ============================================================ */

/* ---------- 32. HOMILY RAIL ---------- */
.homily-section {
  margin: clamp(20px, 3vw, 32px) auto;
  max-width: var(--measure);
}
.homily-section:not(.is-populated) {
  display: none;
}
.homily-entry {
  margin-bottom: 1.2em;
  padding: clamp(12px, 2vw, 18px);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
}
.homily-title {
  font-family: var(--fell-sc);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 4px;
}
.homily-date {
  font-family: var(--fell-sc);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--rubric);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.homily-entry audio {
  width: 100%;
  height: 36px;
}

/* ---------- 33. SPANISH LEAF (es.html) ---------- */
.es-note {
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 0.8em;
}