/* ─────────────────────────────────────────────────────────────────
   The Byzantic Scriptorium — stylesheet
   An illuminated folio rendered in CSS.

   Restraint > gilding. The page is parchment;
   gold and porphyry earn their weight as accents.
   Marginalia is in cinnabar. Body is in sepia.
   We do not chase fashion; the customary suffices.
   ─────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Cormorant+SC:wght@400;500;600;700&family=Cutive+Mono&display=swap');

:root {
  /* ── Parchment surfaces ──────────────────────────────── */
  --parchment:        #f1e7d0;
  --parchment-dim:    #ebdfc1;
  --parchment-edge:   #d6c597;
  --vellum:           #f8efd9;
  --vellum-shadow:    #e8dcc0;

  /* ── Sepia ink hierarchy ─────────────────────────────── */
  --sepia:            #2c1810;
  --sepia-mid:        #6b5440;
  --sepia-pale:       #a39579;
  --sepia-faint:      #c2b599;

  /* ── Burnished gold (never gaudy yellow) ─────────────── */
  --gold:             #b8893a;
  --gold-bright:      #d4a847;
  --gold-deep:        #8a651e;
  --gold-soft:        #d9bd7e;

  /* ── Imperial porphyry ───────────────────────────────── */
  --porphyry:         #5c2538;
  --porphyry-deep:    #421a28;
  --porphyry-light:   #7a3a4c;

  /* ── Lapis lazuli (for highlights, glossators) ───────── */
  --lapis:            #1f3a5f;
  --lapis-bright:     #2d5380;

  /* ── Cinnabar / rubric ink (for marginalia) ──────────── */
  --cinnabar:         #a82d18;
  --cinnabar-deep:    #7a2010;

  /* ── Manuscript ruling (fine hairlines) ──────────────── */
  --rule:             rgba(184, 137, 58, 0.32);
  --rule-strong:      var(--gold);
  --rule-faint:       rgba(107, 84, 64, 0.18);
  --rule-cinnabar:    rgba(168, 45, 24, 0.30);

  /* ── Shadows: parchment never floats; it rests ───────── */
  --shadow-folio:
    0 1px 0 rgba(255, 251, 235, 0.6) inset,
    0 1px 2px rgba(44, 24, 16, 0.05),
    0 6px 16px rgba(44, 24, 16, 0.06);
  --shadow-emboss:    inset 0 1px 0 rgba(255, 251, 235, 0.6);

  /* ── Typography ──────────────────────────────────────── */
  --font-display:     'Cinzel', 'Trajan Pro', 'EB Garamond', serif;
  --font-body:        'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-meta:        'Cormorant SC', 'Cinzel', serif;
  --font-mono:        'Cutive Mono', 'IBM Plex Mono', monospace;
}

/* ── Reset (minimal) ──────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: var(--sepia);
  background: var(--parchment);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Parchment grain — fixed SVG noise overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.20 0 0 0 0 0.10 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Soft light atmosphere — gold leaf wash + corner stains */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(184, 137, 58, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(92, 37, 56, 0.045) 0%, transparent 45%),
    radial-gradient(ellipse at 0% 30%, rgba(31, 58, 95, 0.025) 0%, transparent 50%);
}

/* Selection */
::selection {
  background: var(--gold-soft);
  color: var(--porphyry-deep);
}

/* ── Page frame ───────────────────────────────────────── */
.frame {
  position: relative;
  z-index: 3;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ── Folio mark (top-right corner, every page) ────────── */
.folio-mark {
  position: absolute;
  top: 1.5rem;
  right: 0;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  text-transform: uppercase;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.folio-mark .verso { color: var(--cinnabar); font-style: normal; }
.folio-mark .ornament {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ── HEADER / MASTHEAD ────────────────────────────────── */
header.masthead {
  position: relative;
  padding: 4.5rem 0 1.2rem;
  text-align: center;
}

.crown {
  display: block;
  margin: 0 auto 1.4rem;
  width: 64px;
  height: 64px;
  color: var(--gold);
  filter: drop-shadow(0 1px 0 rgba(212, 168, 71, 0.4));
}

.title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0.05em;
  line-height: 1.08;
  color: var(--porphyry);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.title em {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--gold);
}

.title a {
  color: inherit;
  text-decoration: none;
}

.subtitle {
  font-family: var(--font-meta);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--sepia-mid);
  text-transform: uppercase;
}

.subtitle em {
  font-family: var(--font-body);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--cinnabar);
  font-size: 1.05em;
}

/* Frieze divider */
.frieze {
  display: block;
  margin: 1.85rem auto 1.25rem;
  width: 100%;
  max-width: 480px;
  height: 28px;
  color: var(--gold);
  opacity: 0.92;
}

/* ── NAVIGATION ───────────────────────────────────────── */
nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.4rem;
  font-family: var(--font-meta);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0.4rem 0 0;
}

nav a {
  position: relative;
  color: var(--sepia-mid);
  text-decoration: none;
  padding: 0.32rem 0;
  transition: color 0.4s ease;
}

nav a::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  transform: translateX(-50%);
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s ease;
}

nav a:hover { color: var(--porphyry); }
nav a:hover::before { width: 100%; }
nav a.active { color: var(--porphyry); }
nav a.active::before { width: 18px; }

/* ── BULLETIN / COLOPHON-STRIP (top notice) ──────────── */
.colophon-strip {
  position: relative;
  margin: 2.85rem 0 2rem;
  padding: 1.45rem 1.85rem 1.45rem 2.6rem;
  background: var(--vellum);
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--sepia);
  box-shadow: var(--shadow-folio);
}

.colophon-strip::before {
  content: "❡";
  position: absolute;
  left: -0.5em;
  top: 50%;
  transform: translateY(-52%);
  width: 1.4em;
  text-align: center;
  background: var(--parchment);
  color: var(--cinnabar);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 1.7em;
  line-height: 1;
}

.colophon-strip::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

.colophon-strip em {
  font-style: italic;
  color: var(--cinnabar);
}

.colophon-strip .attribution {
  display: block;
  margin-top: 0.55rem;
  font-style: normal;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia-pale);
}

/* ── DISPATCHES (index post cards) ────────────────────── */
.dispatches {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  margin: 2.25rem 0 3rem;
}

.dispatch {
  position: relative;
  background: var(--vellum);
  padding: 2.1rem 2.3rem 2.3rem;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-folio);
  transition: box-shadow 0.5s ease;
}

.dispatch:hover {
  box-shadow:
    0 1px 0 rgba(255, 251, 235, 0.6) inset,
    0 1px 2px rgba(44, 24, 16, 0.06),
    0 10px 28px rgba(44, 24, 16, 0.10);
}

/* Inner double-rule, like manuscript margin lines */
.dispatch::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

/* Folio badge — top-right scroll */
.dispatch::before {
  content: attr(data-folio);
  position: absolute;
  top: -0.8rem;
  right: 1.6rem;
  background: var(--porphyry);
  color: var(--parchment);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  padding: 0.36rem 0.95rem;
  z-index: 2;
  box-shadow: var(--shadow-folio), var(--shadow-emboss);
}

/* Meta row — date · scribe-with-seal · source */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.3rem;
  font-family: var(--font-meta);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--sepia-pale);
  text-transform: uppercase;
  margin-bottom: 0.65rem;
  position: relative;
  z-index: 1;
}

.meta .date  { color: var(--lapis); font-weight: 500; }
.meta .scribe {
  color: var(--sepia-mid);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.meta .source {
  color: var(--sepia-pale);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  font-size: 0.96rem;
}

.byline-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 0 0 1px var(--rule-faint);
}

.dispatch h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: 0.012em;
  line-height: 1.25;
  color: var(--porphyry-deep);
  margin: 0.55rem 0 0.85rem;
  position: relative;
  z-index: 1;
}

.dispatch h2 a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to right, var(--gold), var(--gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.45s ease;
}

.dispatch h2 a:hover { background-size: 100% 1px; }

/* The marginalia quote shown inline on a dispatch */
.marginalia {
  position: relative;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--cinnabar);
  margin: 0.85rem 0 0.8rem;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 2px solid var(--gold);
  z-index: 1;
}

.marginalia::before {
  content: "“";
  position: absolute;
  font-family: var(--font-display);
  left: -0.05em; top: -0.5em;
  font-size: 1.4em;
  color: var(--gold);
  line-height: 1;
  opacity: 0.55;
}

/* Editorial commentary — paleographer's mono note */
.commentary {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--sepia-mid);
  margin-top: 0.95rem;
  padding-top: 0.9rem;
  border-top: 1px dotted var(--rule);
}

.commentary .label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
}

/* Catchword — bottom-left of a dispatch (small italic next-word hint) */
.dispatch .catchword {
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 1px dotted var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--sepia-pale);
}

.dispatch .catchword .label {
  font-family: var(--font-meta);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

/* Tags / rubrics on a dispatch */
.tags {
  position: relative;
  z-index: 1;
  margin-top: 1.05rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  font-family: var(--font-meta);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--sepia-mid);
  font-weight: 500;
}

/* ── LECTERN (sidebar panels on index) ────────────────── */
.lectern {
  position: relative;
  background: var(--vellum);
  border: 1px solid var(--rule);
  padding: 1.65rem 1.85rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-folio);
}

.lectern::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

.lectern h3 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.95rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--rule);
}

.counter {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.6rem;
  letter-spacing: 0.02em;
  color: var(--porphyry);
  line-height: 1;
  margin-bottom: 0.45rem;
}

.lectern p {
  position: relative;
  z-index: 1;
  font-size: 0.96rem;
  color: var(--sepia-mid);
  font-style: italic;
}

.lectern ul {
  position: relative;
  z-index: 1;
  list-style: none;
  margin-top: 0.4rem;
}

.lectern li {
  font-size: 0.97rem;
  padding: 0.36rem 0;
  color: var(--sepia);
  border-bottom: 1px dashed var(--rule);
}

.lectern li:last-child { border-bottom: none; }

.lectern li::before {
  content: "✠";
  margin-right: 0.55rem;
  color: var(--gold);
  font-size: 0.85em;
  letter-spacing: 0;
}

.lectern li .progress {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--sepia-pale);
  margin-left: 0.4rem;
  letter-spacing: 0;
}

/* ── SINGLE FOLIO PAGE (post / about / contact) ───────── */
.folio-page {
  position: relative;
  background: var(--vellum);
  padding: 3rem 3.25rem 3.5rem;
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-folio);
}

.folio-page::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

/* Folio badge for the page itself */
.folio-page::before {
  content: attr(data-folio);
  position: absolute;
  top: -0.85rem;
  right: 1.6rem;
  background: var(--porphyry);
  color: var(--parchment);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  padding: 0.36rem 0.95rem;
  z-index: 2;
}

.folio-page > * { position: relative; z-index: 1; }

.folio-page h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 4.2vw, 2.5rem);
  letter-spacing: 0.012em;
  line-height: 1.18;
  color: var(--porphyry-deep);
  margin: 0.85rem 0 1.2rem;
}

/* Post byline: avatar seal + meta */
.post-byline {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 0.5rem;
}

.post-byline .meta-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 0 0 1px var(--rule-faint);
}

.post-byline .meta {
  margin-bottom: 0;
  flex: 1;
}

/* Marginalia block (the centred quote being commented on) */
.marginalia-block {
  position: relative;
  margin: 2.1rem 0;
  padding: 2rem 2.25rem;
  background: var(--parchment);
  border: 1px solid var(--gold);
  text-align: center;
}

.marginalia-block::before,
.marginalia-block::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--rule);
}

.marginalia-block::before { top: 8px; }
.marginalia-block::after  { bottom: 8px; }

.marginalia-block .english {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--sepia);
  margin-bottom: 0.7rem;
  line-height: 1.5;
}

.marginalia-block .latin {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--cinnabar);
}

/* A small ornamental rule between English and Latin in marginalia block */
.marginalia-block .english::after {
  content: "❦";
  display: block;
  margin: 0.65rem auto 0;
  color: var(--gold);
  font-style: normal;
  font-size: 0.9rem;
}

/* Body sections inside a folio (Abstract / Context / Note) */
.section {
  margin: 1.85rem 0;
}

.section .label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--cinnabar);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.section .label::before,
.section .label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.section p {
  margin-bottom: 0.95rem;
  font-size: 1.06rem;
  line-height: 1.72;
}

.section p:last-child { margin-bottom: 0; }

.section em { font-style: italic; color: var(--cinnabar-deep); }

/* Drop initial — the lettrine on the abstract's first paragraph */
.section.abstract p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.4em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.18em -0.05em 0;
  padding: 0.18em 0.18em 0.06em;
  color: var(--parchment);
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-deep) 100%);
  border: 1px solid var(--gold-deep);
  box-shadow: var(--shadow-emboss);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* Footnotes — at the foot of the folio, in mono */
.footnotes {
  margin-top: 2.5rem;
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--sepia-mid);
}

.footnotes h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.footnotes ol { padding-left: 1.5rem; }
.footnotes li { margin-bottom: 0.55rem; }

/* Closing colophon block — scribe blessing + acknowledgements */
.colophon-end {
  position: relative;
  margin-top: 2.25rem;
  padding: 1.6rem 1.85rem 1.6rem 1.65rem;
  background: var(--parchment);
  border-left: 3px solid var(--cinnabar);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.99rem;
  line-height: 1.65;
  color: var(--sepia-mid);
}

.colophon-end::before {
  content: "Colophon";
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: 0.22em;
  color: var(--cinnabar);
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 500;
}

.colophon-end strong {
  font-style: normal;
  font-weight: 500;
  color: var(--sepia);
}

.colophon-end .latin {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.05rem;
  color: var(--cinnabar);
  letter-spacing: 0.01em;
}

/* Return-to-index link */
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem 0 0.5rem;
  font-family: var(--font-meta);
  font-size: 0.78rem;
  letter-spacing: 0.20em;
  color: var(--sepia-mid);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
}

.back::before {
  content: "❦";
  color: var(--gold);
  font-size: 0.95em;
}

.back:hover { color: var(--porphyry); }

/* ── COMMENTS — annotations from other hands ───────────
   Styled as marginal glosses. Each "hand" alternates ink
   tone subtly. A manicule (☞) points at the locus. */
.comments {
  margin-top: 2.75rem;
  padding-top: 1.85rem;
  border-top: 1px solid var(--rule);
}

.comments-label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--cinnabar);
  text-transform: uppercase;
}

.comments-label::before,
.comments-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.comments-subtitle {
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--sepia-pale);
  text-align: center;
}

.comment-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.comment {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  padding: 1.05rem 1.25rem 1.05rem 1.4rem;
  background: var(--parchment);
  border: 1px solid var(--rule-faint);
}

.comment-avatar {
  width: 44px;
  height: 44px;
  display: block;
  box-shadow: 0 0 0 1px var(--rule-faint);
}

.comment-body {
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sepia);
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-bottom: 0.4rem;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--sepia-pale);
  text-transform: uppercase;
}

.comment-meta .hand { color: var(--sepia-mid); font-weight: 500; }
.comment-meta .locus {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--sepia-pale);
}

/* Manicule preceding each comment body */
.comment-text::before {
  content: "☞";
  margin-right: 0.45em;
  color: var(--cinnabar);
  font-style: normal;
  vertical-align: -0.05em;
}

/* Different "hands" — alternating ink tones, subtle */
.comment:nth-child(2n)  .comment-body { color: #3a2218; }
.comment:nth-child(2n)  .comment-text::before { color: var(--lapis); }
.comment:nth-child(3n)  .comment-body { font-style: italic; }
.comment:nth-child(3n)  .comment-text::before { color: var(--gold-deep); }
.comment:nth-child(5n)  .comment-body { color: #3a2820; }
.comment:nth-child(5n)  .comment-text::before { color: var(--porphyry-light); }

.comments-empty {
  margin-top: 0.5rem;
  padding: 1rem 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--sepia-pale);
}

.comments-empty::before {
  content: "—";
  display: block;
  margin-bottom: 0.4rem;
  color: var(--gold);
  font-size: 1.2em;
  letter-spacing: 0.5em;
}

/* ── SCRIPTORIUM — scribe roster ──────────────────────── */
.roster-intro {
  margin: 2rem 0 2.5rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--sepia-mid);
  text-align: center;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.roster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.85rem 0 2.5rem;
}

.scribe-card {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1.65rem;
  align-items: start;
  padding: 1.65rem 1.85rem;
  background: var(--vellum);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-folio);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.scribe-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 251, 235, 0.6) inset,
    0 1px 2px rgba(44, 24, 16, 0.06),
    0 12px 30px rgba(44, 24, 16, 0.10);
}

.scribe-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

.scribe-card .seal {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 0 0 1px var(--rule-faint);
}

.scribe-card .body {
  position: relative;
  z-index: 1;
}

.scribe-card .name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: 0.012em;
  color: var(--porphyry-deep);
  margin-bottom: 0.25rem;
}

.scribe-card .title-line {
  font-family: var(--font-meta);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.scribe-card .bio {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sepia);
}

.scribe-card .bio em {
  color: var(--cinnabar);
  font-style: italic;
}

/* Last card (Pangur) — porphyry tinted accent border */
.scribe-card.feline {
  border-color: var(--rule-cinnabar);
}

.scribe-card.feline .title-line { color: var(--cinnabar); }

/* ── 404 — illuminated lost-folio treatment ──────────── */
.lost {
  position: relative;
  text-align: center;
  padding: 5rem 0 3rem;
}

.lost .number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 14vw, 8.5rem);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--porphyry);
  margin-bottom: 0.85rem;
  text-shadow: 1px 2px 0 rgba(184, 137, 58, 0.35);
}

.lost h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  letter-spacing: 0.05em;
  color: var(--porphyry-deep);
  text-transform: uppercase;
  margin-bottom: 1.85rem;
}

.lost .epitaph {
  max-width: 560px;
  margin: 0 auto 2.5rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--sepia-mid);
}

/* ── FOOTER / closing colophon ────────────────────────── */
footer.colophon-foot {
  position: relative;
  z-index: 3;
  margin-top: 4rem;
  padding: 2.5rem 0 4rem;
  text-align: center;
  font-family: var(--font-meta);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--sepia-pale);
  text-transform: uppercase;
}

footer.colophon-foot::before {
  content: "";
  display: block;
  margin: 0 auto 1.85rem;
  width: 64px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

footer .colophon-text {
  max-width: 560px;
  margin: 1.25rem auto 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  line-height: 1.65;
  color: var(--sepia-mid);
  text-transform: none;
}

footer .colophon-text .latin {
  color: var(--cinnabar);
  display: block;
  margin-bottom: 0.4rem;
}

footer a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

footer a:hover { border-bottom-color: var(--gold); }

/* ── Quire signature: tiny text in deep footer ────────── */
.quire-sig {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--sepia-faint);
  text-transform: uppercase;
}

/* ── PAGE LOAD CHOREOGRAPHY ──────────────────────────── */
@keyframes folio-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes folio-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes draw-rule {
  from { stroke-dashoffset: 480; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  header.masthead > *,
  .colophon-strip,
  .dispatch,
  .lectern,
  .folio-page,
  .scribe-card,
  .lost > * {
    animation: folio-rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  header .crown    { animation-delay: 0.05s; }
  header .title    { animation-delay: 0.18s; }
  header .subtitle { animation-delay: 0.32s; }
  header .frieze   { animation-delay: 0.46s; }
  header nav       { animation-delay: 0.58s; }

  .colophon-strip          { animation-delay: 0.72s; }
  .dispatch:nth-child(1)   { animation-delay: 0.84s; }
  .dispatch:nth-child(2)   { animation-delay: 0.94s; }
  .dispatch:nth-child(3)   { animation-delay: 1.04s; }
  .dispatch:nth-child(4)   { animation-delay: 1.13s; }
  .dispatch:nth-child(5)   { animation-delay: 1.21s; }
  .dispatch:nth-child(6)   { animation-delay: 1.29s; }
  .dispatch:nth-child(7)   { animation-delay: 1.36s; }
  .dispatch:nth-child(8)   { animation-delay: 1.43s; }
  .lectern                 { animation-delay: 1.55s; }

  .folio-page                  { animation-delay: 0.46s; }
  .scribe-card:nth-child(1)    { animation-delay: 0.4s; }
  .scribe-card:nth-child(2)    { animation-delay: 0.5s; }
  .scribe-card:nth-child(3)    { animation-delay: 0.6s; }
  .scribe-card:nth-child(4)    { animation-delay: 0.7s; }
  .scribe-card:nth-child(5)    { animation-delay: 0.8s; }
  .scribe-card:nth-child(6)    { animation-delay: 0.9s; }
  .scribe-card:nth-child(7)    { animation-delay: 1.0s; }
  .scribe-card:nth-child(8)    { animation-delay: 1.1s; }
  .scribe-card:nth-child(9)    { animation-delay: 1.2s; }
  .scribe-card:nth-child(10)   { animation-delay: 1.3s; }
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 640px) {
  .frame              { padding: 0 1.4rem; }
  header.masthead     { padding: 2.75rem 0 1.2rem; }
  .crown              { width: 54px; height: 54px; }
  nav                 { gap: 1.4rem; }
  .colophon-strip     { padding: 1.1rem 1.3rem 1.1rem 2rem; }
  .dispatch           { padding: 1.6rem 1.5rem 1.7rem; }
  .folio-page         { padding: 2.1rem 1.6rem 2.4rem; }
  .lectern            { padding: 1.3rem 1.45rem; }
  .marginalia-block   { padding: 1.5rem 1.4rem; }
  .marginalia-block .latin { font-size: 1.2rem; }
  .scribe-card        { grid-template-columns: 64px 1fr; gap: 1.1rem; padding: 1.3rem 1.45rem; }
  .scribe-card .seal  { width: 64px; height: 64px; }
  .comment            { grid-template-columns: 36px 1fr; gap: 0.85rem; padding: 0.95rem 1rem 0.95rem 1.1rem; }
  .comment-avatar     { width: 36px; height: 36px; }
  .folio-mark         { right: 1.2rem; top: 1rem; font-size: 0.65rem; }
  .meta               { font-size: 0.7rem; }
  .meta .source       { font-size: 0.9rem; }
  .post-byline .meta-avatar { width: 48px; height: 48px; }

  .section.abstract p:first-of-type::first-letter {
    font-size: 3.6em;
  }
}