/* Ensarkosi: serious theology for slow reading. Same design language as Vera and Vita (hairlines, generous
   space, golden-ratio spacing, serif headings) in a medieval manner: inscriptional capitals, rubricated
   labels, an illuminated first letter, ornamental rules and a pointed-arch frame. Light = vellum and
   Prussian ink with gold leaf; dark = candlelit night. */
:root {
  --ink: #1b2a41; --paper: #f4efe4; --line: #d9d0bd; --gold: #a8843f; --rubric: #8a2f2c; --muted: #5d6572; --tint: rgba(27, 42, 65, 0.045);
  --btn-bg: #1b2a41; --btn-fg: #f4efe4;
  --s1: 8px; --s2: 13px; --s3: 21px; --s4: 34px; --s5: 55px; --s6: 89px;
  --caps: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --display: "Cormorant Garamond", "Cardo", Georgia, serif;
  --text: "Cardo", "EB Garamond", Georgia, serif;
  --ui: "DM Sans", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e9e3d6; --paper: #16151a; --line: #2e2c35; --gold: #c2a25f; --rubric: #c9706a; --muted: #a49f98; --tint: rgba(194, 162, 95, 0.06);
    --btn-bg: #c2a25f; --btn-fg: #16151a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e9e3d6; --paper: #16151a; --line: #2e2c35; --gold: #c2a25f; --rubric: #c9706a; --muted: #a49f98; --tint: rgba(194, 162, 95, 0.06);
  --btn-bg: #c2a25f; --btn-fg: #16151a; color-scheme: dark;
}
/* The blog reader (Scroll / Pages, assets/css/blog-reader.css, assets/js/blog-pages.js) takes its colours from these. */
:root { --forest: var(--btn-bg); --white: var(--btn-fg); --wash: var(--tint); --grid-line: transparent; --display-font: var(--display); --reader-surface: #f8f3e6; --reader-cover: #1b2a41; --reader-cover-light: #34476a; --reader-cover-dark: #0f1828; }
:root[data-theme="dark"] { --reader-surface: #1d1b22; --reader-cover: #3a3326; --reader-cover-light: #5a4d36; --reader-cover-dark: #231f16; --reader-sheen-top: transparent; --reader-sheen-bottom: transparent; --reader-edge: #2e2c35; --reader-edge-dark: #4a4437; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --reader-surface: #1d1b22; --reader-cover: #3a3326; --reader-cover-light: #5a4d36; --reader-cover-dark: #231f16; --reader-sheen-top: transparent; --reader-sheen-bottom: transparent; --reader-edge: #2e2c35; --reader-edge-dark: #4a4437; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 19px/1.7 var(--text); text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
/* No underlines anywhere: links in running text are shown in the rubric colour and brighten to gold on hover. */
.ek-body a, .ek-prose a, .ek-notes a, .ek-section > p a, .ek-reading a { color: var(--rubric); }
.ek-body a:hover, .ek-prose a:hover, .ek-notes a:hover, .ek-section > p a:hover, .ek-reading a:hover, .ek-list h3 a:hover, .ek-card h3 a:hover, .ek-continue:hover, .ek-continue-slot a:hover { color: var(--gold); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.12; text-wrap: balance; margin: 0; }
.ek-main, .ek-header, .ek-footer { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.ek-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); position: relative; }
.ek-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; border-bottom: 1px solid var(--line); }
.ek-wordmark { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 22px/1 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.ek-mark { width: 46px; height: 46px; }
.ek-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s3); font: 500 12px/1 var(--caps); letter-spacing: 0.14em; text-transform: uppercase; }
.ek-nav a, .ek-theme { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); }
.ek-nav a:hover { color: var(--ink); }
.ek-nav a[aria-current="page"] { color: var(--rubric); }
.ek-theme { border: 1px solid var(--line); background: transparent; padding: 0 14px; border-radius: 2px; font: inherit; cursor: pointer; }
.ek-theme:hover { border-color: var(--gold); color: var(--ink); }
.ek-caps, .rubric { font: 500 12px/1.4 var(--caps); letter-spacing: 0.18em; text-transform: uppercase; }
.rubric { color: var(--rubric); margin: 0 0 var(--s2); }
.ek-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); align-items: center; padding: var(--s5) 0 var(--s4); }
.ek-hero h1 { font-size: clamp(36px, 5.6vw, 62px); max-width: 14em; }
.ek-hero p.lede { font-size: 22px; color: var(--muted); max-width: 32em; margin: var(--s3) 0 var(--s4); }
.ek-rose { width: 100%; height: auto; fill: none; stroke: var(--gold); stroke-width: 1.1; }
.ek-rose .r { stroke: var(--rubric); }
.cut { stroke: var(--paper) !important; stroke-width: 6 !important; }
.ek-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ek-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); font: 500 12px/1 var(--caps); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 2px; }
.ek-button.quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.ek-button:hover { border-color: var(--gold); }
.ornament { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0; }
.ornament .ek-bar { flex: 1; height: 24px; min-width: 0; }
.ornament .ek-medal { width: 54px; height: 54px; flex: none; }
.ek-section { padding: var(--s4) 0; }
.ek-section > h2 { font-size: 30px; margin-bottom: var(--s3); }
.ek-section > h2::before { content: "\00b6\00a0"; color: var(--rubric); }
.ek-traditions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.ek-card { position: relative; padding: var(--s3); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 4px; background: var(--tint); }
.ek-card h3 { font-size: 24px; margin: 0 0 var(--s1); }
.ek-card p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.ek-card a { text-decoration: none; }
.ek-card a::after { content: ""; position: absolute; inset: 0; }
.ek-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ek-list li { position: relative; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.ek-list h3 { font-size: 26px; margin: var(--s1) 0; }
.ek-list p { margin: 0; color: var(--muted); }
.ek-meta { font: 400 13px/1.5 var(--ui); color: var(--muted); }
.ek-article { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--s5); padding: var(--s5) 0; }
.ek-article h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: var(--s2); }
.ek-byline { font: 400 14px/1.6 var(--ui); color: var(--muted); padding-bottom: var(--s3); margin-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.ek-body { max-width: 34em; font-size: 20px; }
.ek-body p { margin: 0 0 var(--s3); }
.ek-body > p:first-of-type::first-letter { float: left; font: 500 4.1em/0.82 var(--display); color: var(--rubric); padding: 7px 10px 2px 8px; margin: 4px 12px 0 0; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: 3px; background: var(--tint); }
.ek-body blockquote { margin: var(--s4) 0; padding: 0 0 0 var(--s3); border-left: 2px solid var(--gold); font-style: italic; color: var(--ink); }
.ek-body h2 { font-size: 30px; margin: var(--s4) 0 var(--s2); }
.ek-body h2::before { content: "\00b6\00a0"; color: var(--rubric); }
.ek-body sup a { color: var(--rubric); text-decoration: none; font: 500 12px var(--ui); }
.ek-notes { max-width: 34em; margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--line); font: 400 14px/1.6 var(--ui); color: var(--muted); }
.ek-side { align-self: start; border-top: 2px solid var(--gold); padding-top: var(--s2); font: 400 14px/1.6 var(--ui); color: var(--muted); }
.ek-side p { margin: 0 0 var(--s2); }
.ek-footer { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); padding: var(--s3) 0 var(--s4); border-top: 1px solid var(--line); color: var(--muted); font: 400 12px/1.6 var(--ui); }
.ek-seal-small { width: 26px; height: 26px; vertical-align: middle; margin-right: 10px; }
.ek-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.ek-prose { max-width: 36em; padding: var(--s5) 0; }
.ek-prose h1 { font-size: 46px; margin-bottom: var(--s3); }
.ek-prose h2 { font-size: 28px; margin: var(--s4) 0 var(--s2); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 760px) {
  body { font-size: 18px; }
  .ek-header { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .ek-hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--s4); }
  .ek-hero .ek-rose { max-width: 240px; margin: 0 auto; }
  .ek-article { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .ek-side { order: -1; }
}
@media print { .ek-header, .ek-footer, .ek-side { display: none; } body { background: #fff; color: #000; } }

/* A long work set in the blog reader. */
.ek-reader-page { padding: var(--s5) 0 var(--s4); }
.ek-reader-page > header { max-width: 36em; margin-bottom: var(--s3); }
.ek-reader-page h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: var(--s2); }
.ek-toc-inline { margin: 0 0 var(--s3); max-width: 36em; }
.ek-toc-inline summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ek-reading { font: 20px/1.72 var(--text); color: var(--ink); }
.ek-reading p { margin: 0 0 1em; text-align: left; hyphens: auto; }
/* In Scroll view the text keeps a comfortable line (about 65 characters), not the whole width of the screen. */
.blog-viewer:not(.is-paged) .ek-reading { max-width: 38em; margin-inline: auto; }
.ek-intro { margin: 0 0 var(--s4); font-size: 0.9em; }
.ek-chapter { margin: 0 0 var(--s4); }
.ek-chapter h2 { margin: 0 0 var(--s1); font-size: 14px; line-height: 1.5; }
.ek-chno { display: block; overflow-wrap: anywhere; font: 500 13px/1.5 var(--caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ek-chno::before { content: "\00b6\00a0"; color: var(--gold); }
.ek-argument { font-style: italic; color: var(--muted); font-size: 0.9em; line-height: 1.55; }
.ek-ref { font: 400 0.7em/1 var(--ui); color: var(--rubric); white-space: nowrap; }
/* A group of references (the proof-texts of a clause, a footnote) may run to several lines. */
.ek-ref-long { white-space: normal; line-height: 1.35; }
.ek-footnotes .ek-ref { font-size: 1em; }
.ek-reading p.ek-first::first-letter { float: left; font: 500 4.1em/0.82 var(--display); color: var(--ink); padding: 7px 10px 2px 8px; margin: 4px 12px 0 0; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: 3px; background: var(--tint); }
.ek-toc-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s1) 0 var(--s2); }
.ek-toc-grid a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); text-decoration: none; font: 500 13px var(--ui); color: var(--muted); }
.ek-toc-grid a:hover { border-color: var(--gold); color: var(--ink); }

/* Reading progress */
.ek-continue { display: inline-block; margin-top: var(--s1); font: 500 12px/1.4 var(--caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubric);  }
.ek-continue-slot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 4px; background: var(--tint); }
.ek-continue-slot[hidden] { display: none; }
.ek-continue-slot .rubric { margin: 0; }
.ek-continue-slot a { font: 500 22px/1.2 var(--display); }

/* The Fathers: portraits drawn as engravings, coloured by the theme (ink on vellum, gold on night). */
.ek-portrait-frame { display: block; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 999px 999px 3px 3px; background: var(--paper); overflow: hidden; line-height: 0; }
.ek-portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* Two ready-coloured pictures (ink on vellum, gold on night): the one for the theme is shown, so every browser draws them alike. */
.ek-portrait-dark { display: none; }
:root[data-theme="dark"] .ek-portrait-light { display: none; }
:root[data-theme="dark"] .ek-portrait-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ek-portrait-light { display: none; }
  :root:not([data-theme="light"]) .ek-portrait-dark { display: block; }
}
.ek-era { margin: var(--s4) 0; }
.ek-era > h2 { font-size: 30px; margin-bottom: 4px; }
.ek-era > h2::before { content: "\00b6\00a0"; color: var(--rubric); }
.ek-era-note { margin: 0 0 var(--s3); max-width: 40em; }
.ek-fathers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4) var(--s3); margin: 0 0 var(--s3); padding: 6px 6px 0; list-style: none; }
.ek-father { display: grid; justify-items: center; gap: 4px; text-decoration: none; text-align: center; padding-bottom: var(--s1); }
.ek-father .ek-portrait-frame { width: 100%; max-width: 160px; transition: outline-offset 0.18s ease; }
.ek-father:hover .ek-portrait-frame, .ek-father.is-open .ek-portrait-frame { outline-offset: 7px; }
.ek-father-name { margin-top: var(--s2); font: 500 21px/1.15 var(--display); }
.ek-father-dates { font: 400 13px/1.4 var(--ui); color: var(--muted); }
.ek-father.is-open .ek-father-name { color: var(--rubric); }
.ek-detail { margin: var(--s2) 0 var(--s3); padding: var(--s3); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 4px; background: var(--tint); }
.ek-detail[hidden] { display: none; }
.ek-detail-name { font-size: 32px; margin: 0 0 var(--s1); }
.ek-detail-bio { max-width: 40em; color: var(--muted); margin: 0 0 var(--s3); }
.ek-father-page { padding: var(--s5) 0 var(--s4); }
.ek-father-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s4); align-items: center; margin-bottom: var(--s4); }
.ek-father-head h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: var(--s2); }
.ek-lede-text { max-width: 34em; color: var(--muted); font-size: 21px; margin: 0; }
.ek-works-heading { font-size: 30px; margin-bottom: var(--s2); }
.ek-credit { margin-top: var(--s4); font: 400 13px/1.6 var(--ui); color: var(--muted); max-width: 42em; }
.ek-credit a { color: var(--rubric); }
.ek-parttitle { margin: var(--s4) 0 var(--s2); font: 500 34px/1.15 var(--display); }
.ek-subtitle { margin: var(--s3) 0 var(--s2); font: 500 24px/1.2 var(--display); }
.ek-part { margin: 0 0 var(--s4); }
@media (max-width: 760px) { .ek-father-head { grid-template-columns: minmax(0, 1fr); } .ek-father-head .ek-portrait-frame { max-width: 180px; } .ek-fathers { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }

/* Long editorial text is shortened where it stands and given in full as a footnote at the foot of the chapter. */
.ek-fn { color: var(--ink); font: 500 0.8em/1 var(--ui); vertical-align: super; margin-left: 2px; }
.ek-footnotes { margin: 1em 0 0; padding-top: 0.55em; border-top: 1px solid var(--line); font: 400 0.76em/1.55 var(--ui); color: var(--muted); }
.ek-reading .ek-footnotes p { margin: 0 0 0.45em; text-align: left; hyphens: manual; }
.ek-emblem-frame { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.ek-emblem { width: 72%; height: auto; }

/* Questions on the home page */
.ek-faq { border-top: 1px solid var(--line); padding: 0; }
.ek-faq:last-child { border-bottom: 1px solid var(--line); }
.ek-faq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 500 22px/1.25 var(--display); padding: var(--s1) 0; }
.ek-faq p { margin: 0 0 var(--s3); max-width: 38em; color: var(--muted); }

/* Section numbers of a Latin text (book.chapter.section), set small and gold before the paragraph. */
.ek-secno { color: var(--gold); font: 500 0.6em/1 var(--ui); margin-right: 0.35em; vertical-align: 0.5em; letter-spacing: 0.04em; }

/* Bilingual pages: each language's passage starts a new column, so the Latin is the left page and the English the right. */
.ek-reading .ek-bi-start { -webkit-column-break-before: always; break-before: column; margin-top: 0; }
.ek-reading .ek-bi-blank { height: 1px; }
.ek-reading .ek-cont { text-indent: 0; }
.ek-langswitch strong { color: var(--ink); font-weight: 600; }

/* A plain list of links on the Traditions page. */
.ek-plainlist { margin: 0 0 14px; padding-left: 1.1em; }
.ek-plainlist li { margin: 0 0 6px; }

/* A catechism's question stands out from its answer. */
.ek-reading p.ek-question { font-weight: 600; margin-bottom: 0.35em; }