/* === Catholic Intelligence: the canon pages ================================
   Shared chrome for the standalone essay pages (/communion/, /the-diocese/,
   /the-parish/, ...). Same Marian palette as the homepage: day is ivory and
   lapis with antique gold; night is the mantle. Three-way theme via
   assets/theme.js stamping html[data-theme]; Auto follows the OS.
   ========================================================================= */

:root {
  color-scheme: light dark;
  --bg: #faf9f5; --card: #ffffff; --card-warm: #f3f2ec;
  --rule: #e2e1d8; --rule-strong: #c6c5b6;
  --ink: #232a3d; --ink-muted: #46506a; --ink-subtle: #6a718a; --ink-ghost: #6b7085;
  --gold: #a8862f; --gold-deep: #7d6420;
  --marian: #27447e; --marian-deep: #1b3160;
  --field-focus: rgba(39, 68, 126, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1420; --card: #141a2a; --card-warm: #192134;
    --rule: #26304a; --rule-strong: #394668;
    --ink: #e7e4d8; --ink-muted: #b6b8c8; --ink-subtle: #9298b0; --ink-ghost: #7d8299;
    --gold: #d8ba6a; --gold-deep: #b39440;
    --marian: #8fb0e8; --marian-deep: #a9c2ee;
    --field-focus: rgba(143, 176, 232, 0.35);
  }
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1420; --card: #141a2a; --card-warm: #192134;
  --rule: #26304a; --rule-strong: #394668;
  --ink: #e7e4d8; --ink-muted: #b6b8c8; --ink-subtle: #9298b0; --ink-ghost: #7d8299;
  --gold: #d8ba6a; --gold-deep: #b39440;
  --marian: #8fb0e8; --marian-deep: #a9c2ee;
  --field-focus: rgba(143, 176, 232, 0.35);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #faf9f5; --card: #ffffff; --card-warm: #f3f2ec;
  --rule: #e2e1d8; --rule-strong: #c6c5b6;
  --ink: #232a3d; --ink-muted: #46506a; --ink-subtle: #6a718a; --ink-ghost: #6b7085;
  --gold: #a8862f; --gold-deep: #7d6420;
  --marian: #27447e; --marian-deep: #1b3160;
  --field-focus: rgba(39, 68, 126, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: var(--marian); color: #ffffff; }
html, body {
  background: var(--bg); color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ---- Page body ---------------------------------------------------------- */

.cn-wrap { max-width: 44rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem; }
.cn-hero { padding: clamp(2rem, 5vw, 3.25rem) 0 0; text-align: center; }
.cn-hero .cn-rose { display: block; width: 66px; height: 66px; margin: 0 auto 1.25rem; color: var(--gold); opacity: 0.8; }
.cn-kicker {
  font-family: "Cinzel", Georgia, serif; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-subtle);
  margin-bottom: 0.9rem;
}
.cn-hero h1 {
  font-family: "EB Garamond", Georgia, serif; font-style: italic; font-weight: 400;
  /* One line, always: the quote is a single breath. The vw term is tuned to
     the longest hero quote in the canon ("It claims no authority; it renders
     an account.") so no page's quote can wrap or overflow the column. */
  white-space: nowrap;
  font-size: clamp(1rem, 4vw, 2rem); line-height: 1.12; margin: 0 0 0.9rem;
}
.cn-lede {
  max-width: 34rem; margin: 0 auto; font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.6; color: var(--ink-muted);
}

/* THE MEASURE. The wrap is 44rem, and 44rem of EB Garamond at 1.06rem runs to
   about 91 characters a line: measured at 1280px on 2026-08-05, against the 45
   to 75 that sustained reading wants. A line that long makes the eye lose its
   place on the carriage return, which is the commonest reason a good page goes
   unread. Narrowed here rather than on .cn-wrap so the hero, the rules and the
   footnotes keep the width they were designed at; only the reading column
   changes. On a phone the wrap is already narrower than this, so nothing moves.

   30rem, not 34: the root font-size on these pages is 18px, so 34rem measured
   612px and still ran to 79 characters. Set from the measurement, not the
   arithmetic. */
.cn-essay {
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: left;
  max-width: 30rem;
  margin-inline: auto;
}
.cn-essay + .cn-essay { margin-top: clamp(1.8rem, 4vw, 2.4rem); }
.cn-essay h2 {
  font-family: "Cinzel", Georgia, serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--marian);
  text-align: center; margin: 0 0 1rem;
}
.cn-essay h2::after { content: "\2726"; display: block; margin: 0.55rem auto 0; color: var(--gold); font-size: 0.6rem; line-height: 1; }
.cn-essay p, .cn-essay li { font-size: clamp(1rem, 1.4vw, 1.06rem); line-height: 1.68; color: var(--ink-muted); }
.cn-essay p { margin: 0 0 0.9rem; }
.cn-essay p:last-child { margin-bottom: 0; }
.cn-essay em { color: var(--ink); }
.cn-essay a { color: var(--marian); text-decoration: none; border-bottom: 1px solid rgba(168, 134, 47, 0.45); }
.cn-essay a:hover { border-bottom-color: var(--gold); }
.cn-essay blockquote {
  margin: 1.1rem 0; padding: 0 1.25rem; border-left: 2px solid var(--gold);
  font-style: italic; color: var(--ink);
}
.cn-essay blockquote p { color: var(--ink); }

sup.fn { font-size: 0.55em; line-height: 0; vertical-align: super; }
sup.fn a { color: var(--gold-deep); text-decoration: none; border: 0; padding: 0 0.1em; }
sup.fn a:hover { color: var(--marian); }

.cn-notes { margin-top: clamp(1.8rem, 4vw, 2.4rem); padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.cn-notes h2 {
  font-family: "Cinzel", Georgia, serif; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-subtle);
  text-align: center; margin: 0 0 0.75rem;
}
.cn-notes ol { margin: 0; list-style: lower-roman; padding-left: 2.2rem; }
.cn-notes li { font-size: 0.84rem; line-height: 1.6; color: var(--ink-subtle); margin-bottom: 0.3rem; }
.cn-notes li::marker { color: var(--gold-deep); font-size: 0.78rem; }
.cn-notes a { color: var(--marian); text-decoration: none; }
.cn-notes a:hover { border-bottom: 1px solid var(--gold); }

/* ---- The communion register --------------------------------------------- */

.cn-church { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.cn-church:last-child { border-bottom: 0; }
.cn-church h3 { font-size: 1.12rem; font-weight: 600; color: var(--ink); margin: 0 0 0.25rem; }
.cn-church h3 a { color: inherit; text-decoration: none; border: 0; }
.cn-church-meta {
  font-family: "Cinzel", Georgia, serif; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 0.35rem;
}
.cn-church p { margin: 0; font-size: 0.97rem; line-height: 1.6; color: var(--ink-muted); }
.cn-tradition { margin-top: clamp(1.8rem, 4vw, 2.4rem); }
.cn-tradition > p { margin: 0 0 0.4rem; }

/* ---- Onward links + footer ---------------------------------------------- */

.cn-onward {
  margin-top: clamp(2.25rem, 5vw, 3rem); padding-top: clamp(1.4rem, 3vw, 1.9rem);
  border-top: 1px solid var(--rule); text-align: center;
  font-size: 0.95rem; font-style: italic; color: var(--ink-subtle);
}
.cn-onward a { color: var(--marian); text-decoration: none; border-bottom: 1px solid rgba(168, 134, 47, 0.45); font-style: normal; }
.cn-onward a:hover { border-bottom-color: var(--gold); }
.cn-onward .sep { color: var(--rule-strong); margin: 0 0.4rem; }

.cn-foot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--rule); text-align: center;
  font-size: 0.78rem; line-height: 1.65; color: var(--ink-ghost);
}
.cn-foot-laudetur { display: block; font-size: 0.95rem; color: var(--gold-deep); letter-spacing: 0.04em; margin-bottom: 1rem; }
.cn-foot a { color: var(--gold-deep); text-decoration: none; }
.cn-foot a:hover { color: var(--gold); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .cn-foot-laudetur, html:not([data-theme]) .cn-foot a { color: var(--gold); }
}
html[data-theme="dark"] .cn-foot-laudetur, html[data-theme="dark"] .cn-foot a { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after { transition: none !important; }
}

/* Prose links inside an essay carry an underline, not colour alone. axe reports
   colour-only link distinction as a SERIOUS 1.4.1 failure and it is right: at
   #7d6420 on #46506a a reader with any red-green deficiency cannot find them.
   Found 2026-08-08 on /the-parish/ ("their dioceses", "the times of their
   Masses") and /the-title-of-the-church/.
   The footnote markers stay bare on purpose: `sup.fn > a` is a superscript
   numeral, which is a non-colour distinction of its own, and the direct-child
   selector below steps over them without needing an exception. */
.cn-essay p > a[href],
.cn-essay li > a[href],
.cn-lede a[href],
/* The notes list lives in `aside.cn-notes`, OUTSIDE .cn-essay, so the first
   pass at this underlined the prose and left the citations bare. They are the
   links that carry the evidence for the essay, which makes them the last ones
   that should be findable by colour alone. */
.cn-notes li > a[href] {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.cn-essay p > a[href]:hover,
.cn-essay li > a[href]:hover,
.cn-notes li > a[href]:hover {
  text-decoration-color: var(--gold-deep);
}

/* === The one form these pages carry ========================================
   /licensing/ asks two questions and posts them to /api/store/request. The
   tokens above already anticipated a field (--field-focus); this is the rest
   of it. Scoped to .cn-form so no essay page can inherit a control it does
   not have. The honeypot is positioned off-screen rather than display:none,
   because a bot that reads styles skips what is not rendered.
   ========================================================================= */
.cn-form {
  display: grid;
  gap: 0.55rem;
  max-width: 34rem;
  margin: 1.4rem 0 0.4rem;
}
.cn-form label {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.cn-form input[type="email"],
.cn-form input[type="text"],
.cn-form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.6rem 0.7rem;
  width: 100%;
  min-height: 44px;
}
.cn-form textarea { min-height: 7.5rem; resize: vertical; }
.cn-form input:focus-visible,
.cn-form textarea:focus-visible {
  outline: none;
  border-color: var(--marian);
  box-shadow: 0 0 0 3px var(--field-focus);
}
.cn-form button {
  font: inherit;
  justify-self: start;
  min-height: 44px;
  padding: 0.55rem 1.4rem;
  color: var(--bg);
  background: var(--marian);
  border: 1px solid var(--marian-deep);
  border-radius: 3px;
  cursor: pointer;
}
.cn-form button:hover { background: var(--marian-deep); }
.cn-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cn-form-status {
  min-height: 1.3em;
  margin: 0;
  color: var(--ink-subtle);
  font-size: 0.92rem;
}