@import "/bookfonts/fonts.css";
/* ═══════════════════════════════════════════════════════════════════
   RUBRICA — an illuminated scholarly edition
   Parchment ground · iron-gall ink · vermilion rubrication · gilt rules
   Display: Cormorant   Body: EB Garamond   (bundled in fonts/, w/ fallback)
   ═══════════════════════════════════════════════════════════════════ */
:root,:root[data-theme="light"]{
  --bg:#f4ead1; --bg2:#efe3c6; --panel:#f7efdb;
  --ink:#2b2118; --ink-soft:#5a4a35; --muted:#8b7856;
  --rubric:#a02c17; --rubric-deep:#7e2110;
  --gold:#9b7a2f; --gold-bright:#b8933b;
  --rule:#d8c69c; --rule-soft:#e4d6b2;
  --mark:rgba(184,147,59,.30);
  --sel:rgba(160,44,23,.16);
  --noise:.42; --noise-blend:multiply;
  --disp:"Cormorant","EB Garamond","Iowan Old Style",Georgia,serif;
  --body:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16110a; --bg2:#1d1810; --panel:#201a11;
    --ink:#eaddc0; --ink-soft:#c6b591; --muted:#9a875f;
    --rubric:#d95f42; --rubric-deep:#e5754f;
    --gold:#c6a65e; --gold-bright:#dcbd76;
    --rule:#38301f; --rule-soft:#2a2315;
    --mark:rgba(198,166,94,.20);
    --sel:rgba(217,95,66,.22);
    --noise:.30; --noise-blend:screen;
  }
}
:root[data-theme="dark"]{
    --bg:#16110a; --bg2:#1d1810; --panel:#201a11;
    --ink:#eaddc0; --ink-soft:#c6b591; --muted:#9a875f;
    --rubric:#d95f42; --rubric-deep:#e5754f;
    --gold:#c6a65e; --gold-bright:#dcbd76;
    --rule:#38301f; --rule-soft:#2a2315;
    --mark:rgba(198,166,94,.20);
    --sel:rgba(217,95,66,.22);
    --noise:.30; --noise-blend:screen;
}
*{box-sizing:border-box}
html{scroll-padding-top:4.25rem}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--body); font-size:1.18rem; line-height:1.72;
  font-feature-settings:"onum" 1,"liga" 1,"kern" 1;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
/* layered leaf: warm wash + edge vignette + fibrous grain */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(135% 100% at 50% -10%, rgba(255,247,222,.55), transparent 46%),
    radial-gradient(130% 118% at 50% 52%, transparent 54%, rgba(74,48,20,.16) 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--noise); mix-blend-mode:var(--noise-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--sel)}

/* ── running-header / folio nav ─────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  gap:.5rem; flex-wrap:wrap; padding:.42rem clamp(.7rem,3vw,1.4rem);
  background:color-mix(in srgb,var(--bg2) 88%,transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gold);
  box-shadow:0 1px 0 var(--rule-soft), 0 6px 16px -12px rgba(60,40,15,.5);
  font-family:var(--disp);
}
.bar a{color:var(--ink-soft); text-decoration:none; transition:color .2s}
.bar a:hover{color:var(--rubric)}
.bar .disabled{opacity:.28; pointer-events:none}
.nav-prev,.nav-next{font-size:1.5rem; line-height:1; display:inline-flex;
  align-items:baseline; gap:.12rem}
.nav-prev i,.nav-next i{font-style:normal; font-size:.82rem; letter-spacing:.03em;
  color:var(--muted)}
.nav-next{margin-left:.2rem}
.nav-home{font-size:.9rem; letter-spacing:.14em; text-transform:uppercase;
  padding:0 .3rem}
.nav-missal{font-size:.9rem; letter-spacing:.14em; text-transform:uppercase;
  padding:0 .55rem 0 .3rem; margin-right:.15rem; border-right:1px solid var(--rule-soft)}
.brand{font-size:1.12rem; letter-spacing:.05em; font-weight:600;
  color:var(--ink)!important; margin-right:auto}
.brand:hover{color:var(--rubric)!important}
/* ── catchword foot: "turn the leaf", narrow/mobile only ─────────── */
.leaf-foot{display:none}
@media (max-width:46rem){
  .leaf-foot{
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    margin:3.4rem clamp(.7rem,3vw,1.4rem) 2.2rem; padding-top:1rem;
    border-top:1px solid var(--gold); font-family:var(--disp); font-size:1.32rem;
    color:var(--ink-soft); line-height:1.25;
  }
  .leaf-foot a{color:var(--ink-soft); text-decoration:none; transition:color .2s}
  .leaf-foot a:active,.leaf-foot a:hover{color:var(--rubric)}
  .leaf-foot .disabled{opacity:.28}
  .leaf-foot .foot-home{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); align-self:center}
  .leaf-foot .foot-next{text-align:right; max-width:62%}
  .leaf-foot .catchword{font-style:italic; font-size:.86em; color:var(--muted)}
}
/* Dz seek field */
.jump{margin-left:auto; display:flex; align-items:stretch; gap:0;
  border:1px solid var(--rule); border-radius:2px; overflow:hidden;
  background:var(--panel); transition:border-color .2s, box-shadow .2s}
.jump:focus-within{border-color:var(--gold); box-shadow:0 0 0 2px var(--mark)}
.jump.miss{border-color:var(--rubric); animation:shake .5s}
.jump-sigil{display:flex; align-items:center; padding:0 .5rem; font-family:var(--disp);
  font-weight:600; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--panel); background:var(--rubric)}
.jump input{width:6.2rem; border:0; outline:0; background:transparent;
  padding:.22rem .5rem; font-family:var(--disp); font-size:1rem; color:var(--ink)}
.jump input::placeholder{color:var(--muted); opacity:.7}
.jump button{border:0; cursor:pointer; padding:0 .7rem; font-size:1.05rem;
  color:var(--panel); background:var(--gold); transition:background .2s}
.jump button:hover{background:var(--rubric)}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ── the leaf ───────────────────────────────────────────────────── */
main{
  max-width:44rem; margin:0 auto; padding:2.6rem 1.5rem 6rem; position:relative;
  animation:leaf .7s ease both;
}
@keyframes leaf{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:60rem){
  main{padding-left:7.5rem}
  /* ruled margin between rubric gutter and text column */
  main::before{content:""; position:absolute; top:2.6rem; bottom:6rem;
    left:5.9rem; width:1px;
    background:linear-gradient(var(--gold),transparent 92%); opacity:.5}
  /* masthead & lacuna have no marginal numbers — centre them, drop the rule */
  main:has(.home),main:has(.lacuna){padding-left:1.5rem}
  main:has(.home)::before,main:has(.lacuna)::before{content:none}
}

/* page incipit header */
.pagehead{margin:0 0 2rem; padding-bottom:1rem; text-align:center;
  border-bottom:1px solid var(--rule)}
.pagehead .folio{margin:0; font-family:var(--disp); letter-spacing:.32em;
  text-transform:uppercase; font-size:.68rem; color:var(--gold)}
.pagehead h1{margin:.35rem 0 .1rem; font-family:var(--disp); font-weight:500;
  font-size:1.5rem; letter-spacing:.02em; color:var(--ink)}
.pagehead .sub{margin:.15rem 0 0; font-style:italic; font-size:.9rem; color:var(--muted)}

/* ── prose ──────────────────────────────────────────────────────── */
p{margin:0 0 1.05rem}
main > p:first-of-type,.pagehead + p{margin-top:.4rem}
a{color:var(--rubric); text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .3s}
a:hover{background-size:100% 1px}
h2,h3,h4{font-family:var(--disp); line-height:1.2; font-weight:600}
/* council / document title */
h2{font-size:1.85rem; letter-spacing:.03em; text-align:center; text-transform:uppercase;
  color:var(--ink); margin:2.6rem 0 .3rem; padding-top:1.4rem; position:relative}
h2::before{content:"✠"; display:block; color:var(--gold); font-size:1rem;
  margin-bottom:.5rem; opacity:.85}
h2 + p em, h2 + p{font-style:italic}
/* topical subtitle */
h3{font-size:1.28rem; font-style:italic; font-weight:500; text-align:center;
  color:var(--rubric); margin:1.8rem 0 .6rem}
/* Chap. N. */
h4{font-size:.82rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); text-align:center; margin:1.6rem 0 .5rem}
strong{font-weight:600}
em{font-style:italic}
blockquote{margin:1rem 0; padding-left:1.1rem; border-left:2px solid var(--gold);
  color:var(--ink-soft); font-style:italic}
/* editorial [bracketed] direction lines read as rubrics */
main > p:only-child, main p{}
hr{border:0; height:1px; background:var(--rule); margin:2rem 0}

/* ── rubricated marginal Denzinger numbers ──────────────────────── */
a[id^="dz-"]{scroll-margin-top:4.75rem}
a[id^="dz-"] + strong{
  font-family:var(--disp); font-weight:600; color:var(--rubric);
  font-size:1.08em; letter-spacing:.01em;
}
@media (min-width:60rem){
  a[id^="dz-"] + strong{
    float:left; width:5rem; margin-left:-6.6rem; margin-top:.1rem;
    text-align:right; padding-right:.15rem; font-size:1.3rem; line-height:1.35;
    color:var(--rubric);
  }
}
a[id^="dz-"]:target + strong{
  animation:illumine 2.4s ease; border-radius:2px;
}
@keyframes illumine{
  0%,55%{background:var(--mark); box-shadow:0 0 0 .35rem var(--mark)}
  100%{background:transparent; box-shadow:0 0 0 0 transparent}
}

/* ── footnote apparatus ─────────────────────────────────────────── */
sup a, .footnote-ref{text-decoration:none; background:none; color:var(--rubric);
  font-weight:600; padding:0 .05em}
.footnote,.footnotes{margin-top:3rem; font-size:.92rem; color:var(--ink-soft)}
.footnote hr,.footnotes hr{background:var(--gold); opacity:.5; margin:0 0 .8rem;
  width:34%}
.footnote ol,.footnotes ol{padding-left:1.3rem}
.footnote li,.footnotes li{margin:.2rem 0}
.footnote-backref{background:none}

/* ── ledger tables (index / TOC pages) ──────────────────────────── */
table{border-collapse:collapse; width:100%; margin:1.4rem 0; font-size:1rem}
caption{font-family:var(--disp); font-style:italic; color:var(--muted); padding:.3rem}
th,td{padding:.4rem .6rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--rule-soft)}
thead th{font-family:var(--disp); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:.74rem; color:var(--gold);
  border-bottom:1.5px solid var(--gold)}
tbody td:first-child{font-family:var(--disp); color:var(--rubric); font-weight:600;
  white-space:nowrap; width:1%}
tbody td:last-child{text-align:right; color:var(--ink-soft); white-space:nowrap;
  font-variant-numeric:oldstyle-nums}
tbody tr:hover td{background:color-mix(in srgb,var(--gold) 8%,transparent)}

/* ── the masthead (index.html) ──────────────────────────────────── */
.home{text-align:center; padding:1.5rem 0 1rem; margin-bottom:1rem}
.home .ornament{font-size:2rem; color:var(--gold); line-height:1;
  animation:rise .8s .05s ease both}
.masthead{font-family:var(--disp); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.9rem,6vw,3.4rem); line-height:1.05; margin:.7rem 0 .4rem;
  animation:rise .8s .16s ease both}
.rule-orn{display:flex; align-items:center; gap:1rem; justify-content:center;
  color:var(--gold); margin:.5rem auto 1rem; max-width:24rem;
  animation:rise .8s .28s ease both}
.rule-orn::before,.rule-orn::after{content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rule-orn span{font-size:1.1rem}
.home .sub{font-style:italic; font-size:1.15rem; color:var(--ink-soft); margin:.3rem 0;
  animation:rise .8s .4s ease both}
.home .meta{font-family:var(--disp); letter-spacing:.22em; text-transform:uppercase;
  font-size:.72rem; color:var(--muted); margin-top:.7rem;
  animation:rise .8s .52s ease both}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1;transform:none}}
.toc-title{font-family:var(--disp); font-style:italic; font-weight:500;
  text-transform:none; letter-spacing:.02em; font-size:1.5rem; color:var(--rubric);
  text-align:center; margin:2.4rem 0 1.4rem}
.toc-title::before{content:none}

/* dotted-leader contents */
.toc{list-style:none; padding:0; margin:0; columns:2; column-gap:3rem}
@media (max-width:680px){.toc{columns:1}}
.toc li{break-inside:avoid; padding:.12rem 0}
.toc a{display:flex; align-items:baseline; gap:.4rem; text-decoration:none;
  background:none; color:var(--ink)}
.toc a:hover .toc-name{color:var(--rubric)}
.toc-name{font-family:var(--disp); font-size:1.05rem; transition:color .2s}
.toc .leader{flex:1; align-self:flex-end; height:.72em; margin:0 .2rem;
  border-bottom:1px dotted color-mix(in srgb,var(--gold) 65%,var(--muted)); opacity:.6}
.toc .folio{font-family:var(--disp); color:var(--rubric); font-weight:600;
  font-variant-numeric:oldstyle-nums}
.warn{color:var(--gold); font-size:.7em; vertical-align:.2em}

/* ── lacuna (content-filter-blocked leaf) ───────────────────────── */
.lacuna{text-align:center; margin:3rem auto; max-width:34rem; padding:2.2rem 1.5rem;
  border:1px solid var(--gold); border-radius:2px; background:var(--panel);
  box-shadow:inset 0 0 0 3px var(--bg2), inset 0 0 0 4px var(--rule-soft)}
.lacuna-mark{display:block; font-size:2rem; color:var(--rubric); line-height:1}
.lacuna-title{font-family:var(--disp); font-style:italic; font-size:1.35rem;
  color:var(--ink); margin:.6rem 0 .3rem}
.lacuna-note{font-size:.95rem; color:var(--muted); margin:0}
.ocr{max-width:44rem; margin:1.5rem auto 0}
.ocr summary{cursor:pointer; font-family:var(--disp); font-style:italic;
  color:var(--gold); font-size:.95rem; list-style:none}
.ocr summary::-webkit-details-marker{display:none}
.ocr summary::before{content:"❧ "; color:var(--gold)}
.ocr pre{white-space:pre-wrap; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.78rem; line-height:1.55; color:var(--ink-soft); margin-top:.8rem;
  padding:1rem 1.1rem; background:var(--bg2); border-left:2px solid var(--rule)}

/* ── search: nav link, masthead field, results ──────────────────── */
.nav-search{font-size:.9rem; letter-spacing:.12em; text-transform:uppercase;
  padding:0 .4rem}
.home-search{display:flex; max-width:28rem; margin:1.4rem auto 0;
  border:1px solid var(--rule); border-radius:2px; overflow:hidden;
  background:var(--panel); animation:rise .8s .6s ease both;
  transition:border-color .2s, box-shadow .2s}
.home-search:focus-within{border-color:var(--gold); box-shadow:0 0 0 2px var(--mark)}
.home-search input{flex:1; border:0; outline:0; background:transparent;
  padding:.55rem .9rem; font-family:var(--body); font-size:1.05rem; color:var(--ink)}
.home-search input::placeholder{color:var(--muted); font-style:italic}
.home-search button{border:0; cursor:pointer; padding:0 1rem; font-size:1.1rem;
  color:var(--panel); background:var(--gold); transition:background .2s}
.home-search button:hover{background:var(--rubric)}

.searchhead{text-align:center; margin-bottom:1.5rem}
.searchhead .ornament{font-size:1.7rem; color:var(--gold)}
.search-title{font-family:var(--disp); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:clamp(1.6rem,5vw,2.4rem); color:var(--ink);
  margin:.4rem 0 .8rem}
.bigsearch{display:flex; max-width:34rem; margin:0 auto;
  border:1px solid var(--gold); border-radius:2px; background:var(--panel);
  box-shadow:0 6px 20px -14px rgba(60,40,15,.6);
  transition:box-shadow .2s}
.bigsearch:focus-within{box-shadow:0 0 0 2px var(--mark),0 6px 20px -14px rgba(60,40,15,.6)}
.bigsearch input{flex:1; border:0; outline:0; background:transparent;
  padding:.7rem 1rem; font-family:var(--body); font-size:1.15rem; color:var(--ink)}
.bigsearch input::placeholder{color:var(--muted); font-style:italic}
.search-hint{text-align:center; color:var(--muted); font-size:.9rem; font-style:italic;
  margin:.9rem 0 0}
.search-hint b{color:var(--rubric); font-style:normal; font-family:var(--disp)}

.results{max-width:40rem; margin:2rem auto 0}
.jumprow{margin-bottom:1.2rem; text-align:center}
.jump-hit{display:inline-block; font-family:var(--disp); font-size:1.15rem;
  color:var(--rubric); background:none; padding:.4rem .9rem;
  border:1px solid var(--gold); border-radius:2px}
.jump-hit:hover{background:var(--mark)}
.rcount{font-family:var(--disp); font-style:italic; letter-spacing:.04em;
  color:var(--muted); text-align:center; margin:0 0 1.4rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--rule-soft)}
.rhit{display:block; background:none; text-decoration:none; color:var(--ink);
  padding:.75rem 0; border-bottom:1px solid var(--rule-soft)}
.rhead{display:flex; align-items:baseline; gap:.5rem}
.rtitle{font-family:var(--disp); font-size:1.18rem; color:var(--ink); transition:color .2s}
.rhit:hover .rtitle{color:var(--rubric)}
.rfolio{margin-left:auto; font-family:var(--disp); color:var(--gold); font-weight:600;
  font-variant-numeric:oldstyle-nums; white-space:nowrap}
.rsnip{display:block; margin-top:.2rem; color:var(--ink-soft); font-size:.98rem; line-height:1.55}
.rsnip mark{background:var(--mark); color:inherit; padding:0 .1em; border-radius:2px}
.pend{font-family:var(--disp); font-style:italic; font-size:.7em; color:var(--gold);
  border:1px solid var(--rule); border-radius:2px; padding:0 .35em; vertical-align:.12em}

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


/* ── manual light/dark toggle (follows OS by default) ─────────────── */
#book-theme{position:fixed; right:14px; bottom:14px; z-index:60;
  width:42px; height:42px; border-radius:50%; cursor:pointer; line-height:1;
  font-size:19px; color:var(--gold-bright);
  background:color-mix(in srgb,var(--bg2) 82%,#000); border:1px solid var(--gold);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5); transition:transform .2s,color .2s}
#book-theme:hover{transform:translateY(-2px) rotate(-8deg); color:var(--rubric)}
@media (prefers-reduced-motion:reduce){#book-theme{transition:none}}

/* ── Liturgical Year → Missal cross link (Denzinger's ✠ Missal flavour) ── */
.ly-missal{display:inline-flex!important; align-items:center;
  font-family:var(--disp)!important; letter-spacing:.12em; text-transform:uppercase;
  font-size:.78rem; color:var(--ink-soft)!important; text-decoration:none!important;
  border:1px solid var(--gold)!important; border-radius:6px; padding:.4em .85em!important;
  background:none!important; white-space:nowrap; transition:all .2s}
.ly-missal::before{content:"\2720\00a0"; color:var(--gold)}   /* ✠ + nbsp */
.ly-missal:hover{color:var(--rubric)!important; border-color:var(--rubric)!important;
  background:color-mix(in srgb,var(--gold) 10%,transparent)!important}