/* ==========================================================
   TYPOGRAPHY — what is printed on the page
   Running heads, entry titles, body text, dropcaps, marginalia, title page, TOC, plates, sealed page.
   ========================================================== */

/* ============ TYPOGRAPHY OF THE PAGE ============ */
.running-head{
  font-family:'IM Fell English SC', serif;
  font-size:calc(var(--page-w) * .0165); letter-spacing:.32em; text-indent:.32em;
  text-align:center; color:var(--ink-faint);
  margin-bottom:1.6em;
}
/* Printed on every page — desktop, tablet, and mobile alike — inside the
   7% strip book.css reserves at the foot of .page / .page.m. It's moved out
   of .page-inner by JS (book.js: fillSlot / buildScrollBook), so it sits in
   that reserved strip rather than the clipped, padded content box, and can
   never collide with body text. Tapping it opens the same jump pad the old
   floating badge did (see jump.js + .jump in ui.css). */
.folio{
  /* left:50%+transform, not left:0/right:0 — the box must hug the text, not
     span the whole strip, or the entire margin becomes a click target. */
  position:absolute; left:50%; bottom:0; height:7%;
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  padding:0 .5em;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  /* 25% larger than the book's usual .0165 baseline — a deliberate exception
     to §3's "type scales with the page" rule, made because this is a UI
     control (it opens the jump pad) rather than book prose. Height stays a
     fixed 7% regardless: enlarging the glyph must never eat into the word
     budget above it. Tablet/mobile go further still — see responsive.css. */
  font-size:calc(var(--page-w) * .020625); letter-spacing:.1em;
  color:var(--ink-faint);
  cursor:var(--cursor-point); transition:color .2s;
}
.folio:hover{ color:var(--rubric); }
/* Only the numeral gets the "ruled blank" treatment — the same dashed
   underline .jump-badge (ui.css) sits on while idle — so it, not the quiet
   "of n" beside it, reads as the part you can tap to edit. Hovering the
   folio recolours it to rubric right alongside the rest of the label. */
.folio-n{
  /* margin, not a relied-on space in the markup: .folio is a flex row, and
     flex trims leading whitespace off an anonymous text item, which silently
     ate the gap before "of" here. */
  margin-right:.28em;
  padding-bottom:.05em;
  border-bottom:1px dashed rgba(156,124,60,.85);
}
.folio:hover .folio-n{ border-color:var(--rubric); }

.entry-no{
  font-family:'IM Fell English SC', serif;
  text-align:center; font-size:calc(var(--page-w) * .0175); letter-spacing:.4em; text-indent:.4em;
  color:var(--rubric); margin-bottom:.9em;
}
h2.entry-title{
  font-family:'IM Fell English SC', serif;
  font-weight:400; text-align:center;
  font-size:calc(var(--page-w) * .046);
  letter-spacing:.12em; line-height:1.25;
  margin-bottom:.4em;
}
.ornament{
  text-align:center; color:var(--brass);
  font-size:calc(var(--page-w) * .026); margin:.6em 0 1.1em;
  letter-spacing:.6em; text-indent:.6em;
}
/* a book glyph standing in for the centre ✦ of an ornament, on the rare
   page that asks for one by name. Line art (currentColor stroke), same
   family as the sigil's own glyphs, sized off the ornament's own
   font-size so it scales exactly like the ✦s flanking it — never a raw px. */
.orn-book{
  width:1.05em; height:.78em;
  display:inline-block;
  vertical-align:-0.05em;
}

.body-text{
  font-family:'IM Fell English', Georgia, serif;
  font-size:calc(var(--page-w) * .034);
  line-height:1.62;
  text-align:justify;
  hyphens:auto;
}
.body-text p + p{ text-indent:1.6em; margin-top:.15em; }

.dropcap::first-letter{
  font-family:'IM Fell English SC', serif;
  float:left;
  font-size:3.4em; line-height:.82;
  padding:.06em .12em 0 0;
  color:var(--rubric);
}

.marginal{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-size:calc(var(--page-w) * .0255);
  color:var(--ink-faint);
  border-left:1px solid rgba(122,47,29,.4);
  padding-left:.9em; margin:1.1em 0 1.1em .5em;
}

.xref{ font-variant:small-caps; letter-spacing:.06em; color:var(--rubric); font-style:normal; }

/* title page */
.title-page{ text-align:center; justify-content:center; }
.title-page .tp-small{
  font-family:'IM Fell English SC', serif; font-size:calc(var(--page-w) * .0155);
  letter-spacing:.4em; text-indent:.4em; color:var(--ink-faint);
}
.title-page h1{
  font-family:'IM Fell English SC', serif; font-weight:400;
  font-size:calc(var(--page-w) * .07); letter-spacing:.14em;
  margin:.7em 0 .3em; line-height:1.2;
}
.title-page .tp-rule{ color:var(--brass); margin:1em 0; letter-spacing:.5em; text-indent:.5em; }
.title-page .tp-edition{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:calc(var(--page-w) * .029); color:var(--ink-faint); line-height:1.7;
}

/* contents */
.toc{ list-style:none; font-size:calc(var(--page-w) * .0305); }
.toc li{
  display:flex; align-items:baseline; gap:.5em;
  margin-bottom:.85em; line-height:1.4;
}
.toc .t{ font-variant:small-caps; letter-spacing:.05em; }
.toc .dots{ flex:1; border-bottom:1px dotted rgba(93,76,53,.6); transform:translateY(-3px); }
.toc .n{ font-family:'Cormorant Garamond', serif; color:var(--ink-faint); }
.toc .sealed-mark{ color:var(--rubric); font-size:.85em; }

/* PLATES FILL THE MEASURE. Both kinds default to the full text column —
   a page never writes a width unless it wants one NARROWER, and then in % only.
   flex:none matters: .page-inner is a column flexbox, and a plate in one gets
   SQUASHED (aspect ratio silently altered) when the page overruns, instead of
   clipped. flex:none makes an overlong page fail honestly, per conventions §1. */

/* vector plates — the animated sigil illustration */
.plate{
  margin:1.2em auto .4em; width:100%;
  display:block;
  flex:none;
}
/* raster plates (AI-painted illustrations): multiply blend prints them
   into the parchment rather than pasting them onto it */
.plate-img{
  display:block;
  width:100%;
  margin:1em auto .3em;
  mix-blend-mode:multiply;
  height:auto;
  flex:none;
}
/* caption sits narrower than the plate above it — a whisper beneath the image,
   not a second column of text */
.plate-caption{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-weight:500;
  text-align:center; font-size:calc(var(--page-w) * .028); color:var(--ink-faint);
  width:70%; line-height:1.45;
  margin:0 auto 1em;
}
/* .sigil-rotate / .sigil-pulse animations live in animations.css */

/* sealed / paywall page */
.sealed{ justify-content:center; text-align:center; }
.sealed .seal-glyph{ font-size:calc(var(--page-w) * .07); color:var(--rubric); margin-bottom:.5em;}
.sealed h3{
  font-family:'IM Fell English SC', serif; font-weight:400;
  letter-spacing:.2em; font-size:calc(var(--page-w) * .032); margin-bottom:1em; color:var(--ink);
}
.sealed p{
  font-size:calc(var(--page-w) * .03); line-height:1.7; color:var(--ink-faint);
  max-width:26ch; margin:0 auto 1.6em; font-style:italic;
}
.sealed button{
  font-family:'IM Fell English SC', serif;
  letter-spacing:.25em; text-indent:.25em; font-size:calc(var(--page-w) * .024);
  background:none; color:var(--rubric);
  border:1px solid var(--rubric); border-radius:2px;
  padding:.9em 1.6em; cursor:var(--cursor-point);
  transition:background .3s, color .3s;
}
.sealed button:hover, .sealed button:focus-visible{
  background:var(--rubric); color:var(--paper);
  outline:none;
}

/* blurred teaser text behind the seal */
.veiled{
  filter:blur(4px); opacity:.5; user-select:none;
  margin-bottom:1.4em; font-size:calc(var(--page-w) * .03); text-align:justify;
}