/* =========================================================================
   Coinherence: an illuminated-manuscript theme, sleeker than the old web.
   Colours are warm parchment and ink; ornaments are ruby (rubrication) and
   aged gold. Type pairs a blackletter masthead, Roman capitals for headings,
   and a humanist serif for reading.
   ========================================================================= */

/* ---- Self-hosted typefaces ---------------------------------------------- */
/* Fonts live in /assets/fonts so the site depends on nothing external. */
@font-face {
  font-family: "Alegreya";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/alegreya-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/alegreya-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/alegreya-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: italic; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/alegreya-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/alegreya-latin-600-normal.woff2") format("woff2");
}
@font-face {
  /* Latin Extended (macrons and the like) — used by the Latin footer motto.
     Declared after the basic-latin faces so it wins for these characters. */
  font-family: "Alegreya";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/alegreya-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cinzel-decorative-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/cinzel-decorative-latin-700-normal.woff2") format("woff2");
}
@font-face {
  /* Latin Extended (macrons) for Cinzel Decorative — used by the Latin hearth heading. */
  font-family: "Cinzel Decorative";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cinzel-decorative-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Uncial Antiqua";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/uncial-antiqua-latin-400-normal.woff2") format("woff2");
}
@font-face {
  /* Kept for the illuminated opening initial of each essay only. */
  font-family: "UnifrakturMaguntia";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/unifrakturmaguntia-latin-400-normal.woff2") format("woff2");
}

/* OpenDyslexic (OFL): loaded only when the reader turns on the accessible-type
   toggle, since a browser fetches a face only when it is actually rendered. */
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/opendyslexic-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/opendyslexic-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/opendyslexic-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: italic; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/opendyslexic-latin-700-italic.woff2") format("woff2");
}

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Parchment & ink */
  --paper:        #f4ecd8;
  --paper-light:  #faf5ea;
  --paper-deep:   #ece0c6;
  --panel:        #f0e7d1;
  --ink:          #2a2118;
  --ink-soft:     #6b5a45;
  --ink-faint:    #93826a;

  /* Ornament colours */
  --rubric:       #8b1e2d;   /* ruby red: initials, accents */
  --rubric-bright:#a3222f;
  --gold:         #b08331;   /* aged gold: rules, ornaments (decorative) */
  --gold-soft:    #cda866;
  --gold-deep:    #6e4f18;   /* darker gold for TEXT (AA-contrast on parchment) */
  --azure:        #234a86;   /* manuscript blue (ultramarine): second rubrication */
  --azure-soft:   #3a5f9c;
  --line:         #d7c9a8;   /* soft rule / leader dots */

  /* Type */
  --font-body:    "Alegreya", Georgia, Cambria, "Times New Roman", serif;
  --font-display: "Cinzel Decorative", Georgia, serif;
  --font-black:   "Uncial Antiqua", "Cinzel Decorative", serif;
  --font-initial: "UnifrakturMaguntia", "Uncial Antiqua", serif;  /* essay opening drop-cap */
  --font-dyslexic:"OpenDyslexic", "Comic Sans MS", "Trebuchet MS", sans-serif;

  /* Measure & rhythm */
  --measure:      42rem;
  --measure-wide: 46rem;
}

/* ---- Reset-ish ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--paper);
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.22rem);
  line-height: 1.72;
  font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  /* A soft warm glow at the top that fades into solid parchment: works on
     pages of any length, no banding. */
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 540px at 50% -160px,
      var(--paper-light) 0%,
      rgba(250, 245, 234, 0) 72%),
    radial-gradient(320px 240px at 14% 26%, rgba(120, 88, 46, 0.05), rgba(0, 0, 0, 0) 70%),
    radial-gradient(300px 240px at 86% 62%, rgba(120, 88, 46, 0.045), rgba(0, 0, 0, 0) 70%),
    radial-gradient(260px 220px at 72% 14%, rgba(120, 88, 46, 0.04), rgba(0, 0, 0, 0) 68%),
    radial-gradient(280px 220px at 24% 82%, rgba(120, 88, 46, 0.04), rgba(0, 0, 0, 0) 68%);
  background-repeat: no-repeat;
}

/* Faint paper grain, kept very subtle so it warms rather than distracts. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; }

::selection {
  background: var(--rubric);
  color: var(--paper-light);
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper-light);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Links -------------------------------------------------------------- */
a { color: var(--rubric); text-decoration: none; }
a:hover, a:focus { color: var(--rubric-bright); }

/* Prose links get a warm underline */
.content a {
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.content a:hover {
  text-decoration-color: var(--rubric);
}

/* ---- Masthead ----------------------------------------------------------- */
.masthead {
  padding: 3rem 1.5rem 0;
}
.masthead__inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  text-align: center;
}
.masthead__title {
  display: inline-block;
  font-family: var(--font-black);
  font-size: clamp(2.9rem, 2rem + 4vw, 4.4rem);
  line-height: 1;
  color: var(--rubric);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.6);
}
.masthead__title:hover { color: var(--rubric-bright); }

.masthead__tagline {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.masthead__nav {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.masthead__nav a {
  color: var(--ink-soft);
  padding: 0 0.15rem;
  transition: color 0.15s ease;
}
.masthead__nav a + a { margin-left: 0.35rem; }
.masthead__nav a + a::before {
  content: "\269C\FE0E"; /* ⚜ fleur-de-lis between nav items (text style, not emoji) */
  color: var(--gold);
  margin-right: 0.7rem;
  text-decoration: none;
}
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] {
  color: var(--rubric);
}

/* ---- Ornamental rules --------------------------------------------------- */
.rule {
  border: 0;
  margin: 2.4rem auto;
  max-width: var(--measure);
}
.rule--ornate {
  position: relative;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rule--ornate::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}
.rule--ornate::before {
  content: "\2766"; /* ❦ */
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-size: 1.15rem;
  padding: 0 1.1rem;
  background: var(--paper);
}
.rule--plain {
  height: 1px;
  max-width: 8rem;
  background: linear-gradient(to right,
    transparent, var(--gold-soft), transparent);
}

/* ---- Main content column ------------------------------------------------ */
.content {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.6rem 1.5rem 0;
}

/* Section headings (Roman capitals) */
.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rubric);
  text-align: center;
  margin: 0 0 1.6rem;
}
.section-heading--page {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

/* ---- Home hearth (landing) --------------------------------------------- */
.hearth {
  padding-top: 0.5rem;
  overflow: hidden;
}
.hearth__initial {
  float: left;
  font-family: var(--font-initial);
  color: var(--rubric);
  font-size: 6rem;
  line-height: 0.72;
  margin: 0.3rem 0.7rem 0 0;
  padding: 0.05em 0.14em 0.02em;
  background: linear-gradient(158deg, #faf3df, #ecdcb4);
  border: 1px solid var(--gold);
  border-radius: 5px;
  box-shadow:
    0 2px 4px rgba(90, 60, 20, 0.2),
    inset 0 0 0 2px rgba(255, 253, 246, 0.5);
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.6);
}
.hearth__welcome {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
  letter-spacing: 0.02em;
  margin: 0.2rem 0 0.6rem;
  color: var(--ink);
}
.hearth__lede {
  margin: 0 0 1.1rem;
  font-size: 1.16rem;
}
.hearth__cta { margin: 0; }

/* Buttons */
.button {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rubric);
  border: 1px solid var(--gold);
  padding: 0.6rem 1.2rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.button:hover, .button:focus {
  background: var(--rubric);
  border-color: var(--rubric);
  color: var(--paper-light);
}

/* ---- Post lists (home "Lately" + full archive) -------------------------- */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-list__item { margin: 0 0 1.5rem; }
.post-list__item--empty {
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}
.post-list__link {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--ink);
  text-decoration: none;
}
.post-list__title {
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--ink);
  flex: 0 1 auto;
}
/* dotted "leader" between title and date, as in a table of contents */
.post-list__link::after {
  content: "";
  flex: 1 1 auto;
  order: 1;
  margin: 0 0.2rem 0 0.5rem;
  transform: translateY(-0.22em);
  border-bottom: 1px dotted var(--line);
  min-width: 1.5rem;
}
.post-list__date {
  order: 2;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.post-list__link:hover .post-list__title { color: var(--rubric); }
.post-list__blurb {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  font-style: italic;
}
.recent__more, .archive__intro {
  text-align: center;
  color: var(--ink-soft);
}
.recent__more {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2rem;
}
.archive__intro {
  font-style: italic;
  margin-bottom: 2.2rem;
}

/* FAQ question headings: rubricated and left-aligned, set in the reading face
   (the display face is capitals-only, which a full question would render unreadable). */
.faq-q {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.35;
  color: var(--rubric);
  margin: 1.9rem 0 0.5rem;
}
.section-heading + .faq-q { margin-top: 0.6rem; }

/* ---- A single post ------------------------------------------------------ */
.post__header {
  text-align: center;
  margin-bottom: 2rem;
}
.post__kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 0.8rem;
}
.post__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.7rem);
  line-height: 1.16;
  color: var(--ink);
  margin: 0 0 0.9rem;
  letter-spacing: 0.01em;
}
.post__meta {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}
.post__meta .post__tags { font-style: normal; }
.post__meta .post__tags::before { content: "·"; margin: 0 0.5rem; color: var(--gold); }
.post__tag {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.post__tag:hover { color: var(--rubric); }

/* The reading itself */
.post__body { font-size: 1.16rem; }
.post__body p { margin: 0 0 1.3rem; }

/* Footnotes (markdown-it-footnote): ruby markers in the text, a gilded
   rule, and the notes gathered in smaller type at the foot of the piece. */
.footnote-ref a {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--rubric);
  text-decoration: none;
  padding: 0 0.12em;
}
.footnote-ref a:hover { color: var(--rubric-bright); }
.footnotes {
  margin-top: 2.6rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.footnotes-sep {
  border: 0;
  height: 1px;
  max-width: 8rem;
  margin: 2.6rem 0 1.3rem;
  background: linear-gradient(to right, var(--gold), rgba(176, 131, 49, 0));
}
.footnotes-list { padding-left: 1.3rem; margin: 0; }
.footnotes-list li { margin: 0 0 0.6rem; }
.footnotes-list li::marker { color: var(--gold-deep); }
.footnotes-list p { margin: 0; }
.footnote-backref {
  text-decoration: none;
  color: var(--gold-deep);
  margin-left: 0.35rem;
}
.footnote-backref:hover { color: var(--rubric); }

/* ---- Responses: webmentions from the web + a letter form --------------- */
.responses {
  max-width: var(--measure);
  margin: 3rem auto 0;
}
.responses .section-heading { margin-bottom: 1.4rem; }
.responses__likes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0 0 1.6rem;
}
.responses__likes img {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  object-fit: cover;
}
.responses__list { list-style: none; padding: 0; margin: 0 0 2rem; }
.response { border-top: 1px solid var(--line); padding: 1rem 0; }
.response__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.response__avatar { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--gold); }
.response__author {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rubric);
  text-decoration: none;
}
.response__body { color: var(--ink-soft); }
.response__body p { margin: 0.3rem 0; }
.responses__empty { color: var(--ink-faint); font-style: italic; margin: 0 0 2rem; }

.comment { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.responses__subhead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--rubric);
  margin: 0 0 0.4rem;
}
.responses__note { color: var(--ink-soft); margin: 0 0 1.2rem; }
.comment-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 32rem; }
.comment-form__bot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.comment-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
.comment-form__field span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.comment-form input[type="text"],
.comment-form textarea {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.55rem 0.7rem;
  width: 100%;
}
.comment-form input[type="text"]:focus,
.comment-form textarea:focus {
  outline: 2px solid var(--azure);
  outline-offset: 1px;
  border-color: var(--gold);
}
.comment-form textarea { resize: vertical; }
.comment-form .button { align-self: flex-start; cursor: pointer; }

/* Illuminated initial: a blackletter capital set in a gilded versal panel */
.post__body > p:first-of-type::first-letter {
  font-family: var(--font-initial);
  font-size: 4.2em;
  line-height: 0.72;
  float: left;
  color: var(--rubric);
  margin: 0.04em 0.16em -0.04em 0;
  padding: 0.08em 0.12em 0.02em;
  background: linear-gradient(158deg, #faf3df, #ecdcb4);
  border: 1px solid var(--gold);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(90, 60, 20, 0.22),
    inset 0 0 0 2px rgba(255, 253, 246, 0.55);
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.6);
}

/* Rubricated incipit: the opening line in ruby small-caps, as scribes set it */
.post__body > p:first-of-type::first-line {
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--rubric);
}

/* Alternating initials, essay by essay: every other essay opens on an
   ultramarine versal instead of a ruby one, so the archive alternates red and
   blue from one piece to the next the way a scribe alternated them down a page. */
.post--blue-initial .post__body > p:first-of-type::first-letter {
  color: var(--azure);
}

.post__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: 0.02em;
  color: var(--rubric);
  margin: 2.4rem 0 0.9rem;
}
.post__body h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 1.24rem;
  color: var(--ink);
  margin: 2rem 0 0.7rem;
}

.post__body blockquote {
  margin: 1.6rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  font-style: italic;
  font-size: 1.14rem;
}
.post__body blockquote p:last-child { margin-bottom: 0; }

.post__body ul, .post__body ol {
  margin: 0 0 1.3rem;
  padding-left: 1.6rem;
}
.post__body li { margin: 0.35rem 0; }
.post__body ul li::marker { color: var(--gold); }
.post__body ol li::marker { color: var(--gold); font-family: var(--font-display); }

.post__body hr {
  border: 0;
  height: 1.6rem;
  margin: 1.6rem 0;
  text-align: center;
}
.post__body hr::before {
  content: "\2766"; /* ❦ */
  color: var(--gold);
  font-size: 1.1rem;
}

.post__body code {
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  background: var(--panel);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.post__body pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
}
.post__body pre code { background: none; padding: 0; }

.post__body strong { color: var(--ink); font-weight: 600; }
.post__body em { color: inherit; }

/* Post footer */
.post__footer { margin-top: 3rem; text-align: center; }
.post__mark {
  color: var(--gold);
  font-size: 1.3rem;
  margin: 0 0 1rem;
}
.post__back {
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Signature (about page etc.) */
.signature {
  text-align: right;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--rubric);
  margin-top: 2rem;
}

/* ---- Colophon / footer -------------------------------------------------- */
.colophon {
  max-width: var(--measure);
  margin: 4rem auto 0;
  padding: 0 1.5rem 3rem;
  text-align: center;
}
.colophon .rule--ornate { margin-bottom: 1.4rem; }
.colophon__mark {
  color: var(--gold);
  font-size: 1.3rem;
  margin: 0 0 0.6rem;
}
.colophon__text {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 0.15rem;
}
.colophon__motto {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}
.colophon__links {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.colophon__links a { color: var(--ink-soft); }
.colophon__links a:hover { color: var(--rubric); }

/* ---- Responsive tweaks -------------------------------------------------- */
@media (max-width: 34rem) {
  .masthead { padding-top: 2.2rem; }
  .hearth__initial { font-size: 5rem; }
  .post__body > p:first-of-type::first-letter { font-size: 3.6em; }
  .post-list__link { flex-wrap: wrap; }
  .post-list__link::after { display: none; }
  .post-list__date { order: 0; flex-basis: 100%; margin-top: 0.15rem; }
}

/* ---- Motion & print ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  body { background: #fff; color: #000; }
  body::before, .masthead__nav, .post__back, .colophon__links, .skip-link, .page-frame { display: none; }
  a { color: #000; text-decoration: underline; }
}

/* =========================================================================
   EMBELLISHMENTS: ornamented headings & dividers, decorative
   marginal notes, a ruled page frame, and a candlelit dark mode.
   ========================================================================= */

/* ---- Ornamented headings ------------------------------------------------ */
.post__body h2::before {
  content: "\2767\00a0"; /* ❧ rotated fleuron + space */
  color: var(--gold);
  font-weight: 400;
}
.section-heading::before,
.section-heading::after {
  color: var(--gold);
  font-size: 0.62em;
  vertical-align: 0.14em;
}
.section-heading::before { content: "\2767"; margin-right: 0.9em; } /* ❧ */
.section-heading::after  { content: "\2619"; margin-left: 0.9em; }  /* ☙ */

/* ---- Varied dividers ---------------------------------------------------- */
.post__body hr::before {
  content: "\2766\2003\2767\2003\2766"; /* ❦ ❧ ❦ with em spaces */
  color: var(--gold);
  font-size: 1rem;
}

/* ---- Ornamental list markers (fleuron + optional manicule) -------------- */
.post__body ul { list-style: none; }
.post__body ul > li {
  position: relative;
  padding-left: 0.2rem;
}
.post__body ul > li::before {
  content: "\2767"; /* ❧ */
  position: absolute;
  left: -1.35rem;
  color: var(--gold);
  font-size: 0.95em;
  line-height: 1.5;
}
/* Add class="pointing" to a list for manicules instead */
.post__body ul.pointing > li::before {
  content: "\261E"; /* ☞ */
  left: -1.6rem;
  font-size: 0.9em;
}

/* ---- Decorative page frame (ruled margins + corner bosses) -------------- */
.page-frame {
  position: absolute;
  inset: 12px;
  z-index: 5;
  pointer-events: none;
  border: 1.5px solid var(--gold-soft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='%23b7893a'%3E%3Cpath d='M11 2 C13 6 13 8 11 11 C9 8 9 6 11 2 Z'/%3E%3Cpath d='M11 20 C13 16 13 14 11 11 C9 14 9 16 11 20 Z'/%3E%3Cpath d='M2 11 C6 13 8 13 11 11 C8 9 6 9 2 11 Z'/%3E%3Cpath d='M20 11 C16 13 14 13 11 11 C14 9 16 9 20 11 Z'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%238b1e2d'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='%23b7893a'%3E%3Cpath d='M11 2 C13 6 13 8 11 11 C9 8 9 6 11 2 Z'/%3E%3Cpath d='M11 20 C13 16 13 14 11 11 C9 14 9 16 11 20 Z'/%3E%3Cpath d='M2 11 C6 13 8 13 11 11 C8 9 6 9 2 11 Z'/%3E%3Cpath d='M20 11 C16 13 14 13 11 11 C14 9 16 9 20 11 Z'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%238b1e2d'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='%23b7893a'%3E%3Cpath d='M11 2 C13 6 13 8 11 11 C9 8 9 6 11 2 Z'/%3E%3Cpath d='M11 20 C13 16 13 14 11 11 C9 14 9 16 11 20 Z'/%3E%3Cpath d='M2 11 C6 13 8 13 11 11 C8 9 6 9 2 11 Z'/%3E%3Cpath d='M20 11 C16 13 14 13 11 11 C14 9 16 9 20 11 Z'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%238b1e2d'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='%23b7893a'%3E%3Cpath d='M11 2 C13 6 13 8 11 11 C9 8 9 6 11 2 Z'/%3E%3Cpath d='M11 20 C13 16 13 14 11 11 C9 14 9 16 11 20 Z'/%3E%3Cpath d='M2 11 C6 13 8 13 11 11 C8 9 6 9 2 11 Z'/%3E%3Cpath d='M20 11 C16 13 14 13 11 11 C14 9 16 9 20 11 Z'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%238b1e2d'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position:
    left 4px top 4px,
    right 4px top 4px,
    left 4px bottom 4px,
    right 4px bottom 4px;
}
.page-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--gold-soft);
  opacity: 0.6;
}
@media (max-width: 34rem) {
  .page-frame { inset: 7px; }
}

/* ---- Marginal notes (sidenotes) ---------------------------------------- */
/* Use <span class="sidenote">…</span> inside a post. On wide screens the
   note floats into the margin; on narrow screens it becomes an indented aside. */
.post__body .sidenote {
  float: right;
  clear: right;
  width: 12rem;
  margin: 0.3rem -13.5rem 1rem 1.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-soft);
  border-top: 1px solid var(--gold-soft);
  padding-top: 0.35rem;
}
@media (max-width: 70rem) {
  .post__body .sidenote {
    float: none;
    width: auto;
    margin: 1rem 0;
    padding: 0.3rem 0 0.3rem 1rem;
    border-top: 0;
    border-left: 2px solid var(--gold-soft);
  }
}

/* ---- Candlelit dark mode ----------------------------------------------- */
/* The dark palette is keyed to [data-theme="dark"] on <html>. A small script
   in the page head sets that attribute before first paint: a saved day/night
   choice wins, and otherwise it follows the reader's device setting. So dark
   mode still turns on by itself, but the corner button can now override it. */
:root[data-theme="dark"] {
  --paper:        #1d1712;
  --paper-light:  #241d16;
  --paper-deep:   #15100b;
  --panel:        #2a2119;
  --ink:          #ece0c8;
  --ink-soft:     #b3a084;
  --ink-faint:    #8c7c64;
  --rubric:       #de9990;
  --rubric-bright:#ecaaa0;
  --gold:         #c6a15e;
  --gold-soft:    #977c46;
  --gold-deep:    #cda971;
  --azure:        #90aada;
  --azure-soft:   #7f9ccb;
  --line:         #3b3024;
}
:root[data-theme="dark"] body {
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 540px at 50% -160px,
      #2a2218 0%, rgba(29, 23, 18, 0) 72%);
}
:root[data-theme="dark"] body::before { opacity: 0.08; }

:root[data-theme="dark"] ::selection { color: #1d1712; }

:root[data-theme="dark"] .masthead__title { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .rule--ornate::before { background: var(--paper); }

/* Gilded initials sit on a dark, candle-warmed panel */
:root[data-theme="dark"] .post__body > p:first-of-type::first-letter,
:root[data-theme="dark"] .hearth__initial {
  background: linear-gradient(158deg, #322715, #241c12);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 0 0 2px rgba(120, 95, 45, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .post__body code,
:root[data-theme="dark"] .post__body pre { border-color: var(--line); }

/* =========================================================================
   FURTHER EMBELLISHMENTS: vine border, pull-quotes, decorated blockquotes,
   and a reading-progress ribbon bookmark.
   ========================================================================= */

/* ---- Illuminated vine, trailing from the opening initial down the margin */
.post__body { position: relative; }
.post__body::before {
  content: "";
  position: absolute;
  left: -3.4rem;
  top: 0.4rem;
  width: 2.6rem;
  height: 21rem;
  background: url("/assets/vine.svg") no-repeat top center;
  background-size: contain;
  pointer-events: none;
}
@media (max-width: 58rem) {
  .post__body::before { display: none; }
}

/* ---- Pull-quotes -------------------------------------------------------- */
.post__body .pullquote {
  text-align: center;
  font-style: italic;
  color: var(--rubric);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.4;
  max-width: 32rem;
  margin: 2.6rem auto;
  padding-top: 1.3rem;
}
.post__body .pullquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 2.8rem;
  line-height: 0.1;
  margin-bottom: 0.8rem;
}

/* ---- Decorated blockquotes --------------------------------------------- */
.post__body blockquote {
  position: relative;
  padding-left: 2.8rem;
}
.post__body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.6rem;
  top: 0.3rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold-soft);
}

/* ---- Ribbon bookmark (fills as you scroll a page) ---------------------- */
.ribbon {
  position: fixed;
  top: 0;
  right: 2.4rem;
  width: 13px;
  height: calc(46px + var(--p, 0) * 24vh);
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, #a5273a, #7c1a28);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  transition: height 0.15s ease-out;
}
.ribbon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1.5px;
  height: 100%;
  background: rgba(201, 163, 92, 0.7);
}
@media (max-width: 40rem) {
  .ribbon { right: 1rem; width: 11px; }
}
@media print { .ribbon { display: none; } }

/* =========================================================================
   UTILITY PAGES: rights line, tag cloud, post navigation, search theming.
   ========================================================================= */

.colophon__rights {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

/* ---- Tag cloud (/tags/) ------------------------------------------------- */
.tag-cloud {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 34rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.tag-cloud__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 0.35rem 0.8rem;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.tag-cloud__tag:hover,
.tag-cloud__tag:focus {
  background: var(--rubric);
  border-color: var(--rubric);
  color: var(--paper-light);
}

/* ---- Previous / next post navigation ----------------------------------- */
.post__nav {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin: 0 auto 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
.post__nav-side { flex: 1 1 0; }
.post__nav-side--next { text-align: right; }
.post__nav-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}
.post__nav-side a {
  font-style: italic;
  color: var(--rubric);
}

/* ---- Pagefind search UI, themed to the parchment palette --------------- */
.search { margin-top: 1.5rem; }
#searchbox {
  --pagefind-ui-primary: var(--rubric);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--paper-light);
  --pagefind-ui-border: var(--line);
  --pagefind-ui-tag: var(--panel);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-font: var(--font-body);
}
#searchbox .pagefind-ui__result-title a { color: var(--rubric); }
#searchbox .pagefind-ui__result-excerpt { color: var(--ink-soft); }

/* =========================================================================
   MEDIEVAL DEEPENING: justified columns, red-and-blue rubrication
   (alternating pilcrows), and azure section-opening lettrines.
   ========================================================================= */

/* Justify the reading like a manuscript column, with hyphenation to keep it even */
.post__body p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.post__body .pullquote { text-align: center; } /* keep pull-quotes centered */

/* Rubricated pilcrows between consecutive prose paragraphs, alternating
   red and blue as a scribe would. (Opening and section-opening paragraphs,
   which begin with a decorated initial instead, are skipped automatically.) */
.post__body p + p::before {
  content: "\00B6\00A0";
  color: var(--rubric);
  font-weight: 400;
}
.post__body p:nth-of-type(2n) + p::before { color: var(--azure); }

/* Section-opening lettrines: a smaller decorated initial begins each section,
   alternating blue and red down the essay. In a red-opening essay the sections
   run blue, red, blue, …; the ".post--blue-initial" rules below flip the whole
   sequence so a blue-opening essay stays in step, continuing the alternation. */
.post__body h2 + p::first-letter {
  font-family: var(--font-black);
  font-size: 2.6em;
  line-height: 0.72;
  float: left;
  color: var(--azure);
  margin: 0.05em 0.14em -0.02em 0;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.6);
}
.post__body h2:nth-of-type(2n) + p::first-letter { color: var(--rubric); }

/* Blue-opening essays: flip the section sequence so it keeps alternating */
.post--blue-initial .post__body h2 + p::first-letter { color: var(--rubric); }
.post--blue-initial .post__body h2:nth-of-type(2n) + p::first-letter { color: var(--azure); }

/* Headpiece band atop each essay */
.post__headpiece {
  display: block;
  width: min(320px, 66%);
  height: auto;
  margin: 0 auto 1.4rem;
}

/* Tailpiece + Explicit: the scribal close of an essay. The ornament is a
   cul-de-lampe that narrows to a point, and "Explicit" (Latin: "here it ends")
   answers the gold "An Essay" kicker at the top, set in ruby to bookend it. */
.post__explicit {
  margin: 2.8rem 0 0.4rem;
  text-align: center;
}
.post__tailpiece {
  display: block;
  width: min(220px, 54%);
  height: auto;
  margin: 0 auto 0.75rem;
}
.post__explicit-word {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* balance the trailing letter-spacing so it sits centred */
  text-transform: uppercase;
  color: var(--rubric);
}

/* The Tironian et (⁊): the medieval scribal "and". No self-hosted text or
   display face carries U+204A, so we host just that one glyph — Cardo's
   Tironian et (David Perry, SIL Open Font License) with a crossbar added for
   the barred Insular form — scoped by unicode-range so this face supplies the
   ⁊ and nothing else. */
@font-face {
  font-family: "Tironian";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/tironian-et.woff2") format("woff2");
  unicode-range: U+204A;
}
.tet {
  font-family: "Tironian", "Cardo", serif;
  font-style: normal;
  font-size: 0.72em;
  margin: 0 0.03em;
}
/* Among capitals (the tagline and section headings) lift it a touch so it
   centres in the cap band instead of hanging below the baseline. */
.masthead__tagline .tet,
.section-heading .tet {
  vertical-align: 0.08em;
}

/* Diminuendo opening: the first words step down from the great initial to body size */
.post__body .dim1 { font-size: 1.5em; line-height: 1; }
.post__body .dim2 { font-size: 1.28em; line-height: 1; }
.post__body .dim3 { font-size: 1.12em; line-height: 1; }

/* Interlace (knotwork) divider: markdown --- renders as a woven band */
.post__body hr {
  border: 0;
  height: 28px;
  margin: 2.2rem auto;
  background: url("/assets/knotwork.svg") no-repeat center / auto 26px;
}
.post__body hr::before { content: ""; }

/* =========================================================================
   ACCESSIBLE TYPE: a reader-controlled toggle that swaps the whole site to
   OpenDyslexic and relaxes the page (even spacing, ragged edge) for reading.
   ========================================================================= */

/* When on, every typeface becomes the dyslexia-friendly face, and the
   manuscript habits that can hinder reading (justification, hyphenation,
   tight tracking, oldstyle ligatures) give way to a calm, evenly spaced,
   left-aligned column. */
html.dyslexic {
  --font-body:    var(--font-dyslexic);
  --font-display: var(--font-dyslexic);
  --font-black:   var(--font-dyslexic);
  --font-initial: var(--font-dyslexic);
}
html.dyslexic body {
  line-height: 1.95;
  letter-spacing: 0.01em;
  word-spacing: 0.06em;
  font-feature-settings: "kern" 1;
}
html.dyslexic .post__body p {
  text-align: left;
  -webkit-hyphens: none;
  hyphens: none;
}
html.dyslexic .masthead__title { letter-spacing: 0.005em; line-height: 1.2; }
/* keep the great initial from ballooning in a bulkier face */
html.dyslexic .post__body > p:first-of-type::first-letter,
html.dyslexic .hearth__initial { line-height: 0.82; }

/* ---- The toggle controls (fixed lower corner) -------------------------- */
.controls {
  position: fixed;
  right: max(1.15rem, env(safe-area-inset-right, 0px));
  bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.type-toggle, .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.52rem 0.95rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--paper-light);
  border: 1px solid var(--gold);
  border-radius: 999px;
  /* a double rule, as on a ruled page: outer border + inner gold hairline */
  box-shadow:
    inset 0 0 0 2.5px var(--paper-light),
    inset 0 0 0 3.5px rgba(176, 131, 49, 0.5),
    0 2px 8px rgba(60, 40, 10, 0.16);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.type-toggle:hover, .theme-toggle:hover { background: var(--paper); color: var(--rubric); }
.type-toggle:focus-visible,
.theme-toggle:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; }
.type-toggle:active, .theme-toggle:active { transform: translateY(1px); }
.type-toggle__icon, .theme-toggle__icon { width: 1.2rem; height: 1.2rem; flex: none; display: block; }
.type-toggle__label, .theme-toggle__label { white-space: nowrap; }

/* Day/night: show the icon + word for the mode a click will switch TO */
.theme-toggle .icon-sun, .theme-toggle .label-night { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root[data-theme="dark"] .theme-toggle .label-day { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .label-night { display: inline; }

/* Pressed state: a gilded ruby wash, so the reader can see it is on */
html.dyslexic .type-toggle {
  color: var(--paper-light);
  background: var(--rubric);
  border-color: var(--rubric-bright);
  box-shadow:
    inset 0 0 0 2.5px var(--rubric),
    inset 0 0 0 3.5px rgba(255, 244, 232, 0.4),
    0 2px 8px rgba(60, 40, 10, 0.22);
}
html.dyslexic .type-toggle:hover { background: var(--rubric-bright); color: #fff8f0; }

/* Small screens: collapse to round icon-only pebbles */
@media (max-width: 40rem) {
  .controls { right: 0.85rem; bottom: 0.85rem; gap: 0.45rem; }
  .type-toggle, .theme-toggle { padding: 0.62rem; }
  .type-toggle__label, .theme-toggle__label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media print { .controls { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .type-toggle, .theme-toggle { transition: none; }
}

/* ---- Pilcrows (¶): rubricated paragraph marks, alternating red/blue like
   the essay initials. Used on the About page. --------------------------- */
.pilcrow {
  color: var(--rubric);
  font-weight: 600;
  margin-right: 0.3em;
}
.pilcrow--azure { color: var(--azure); }

/* ---- Illuminated initial on the About page (mirrors the essay versal) --- */
.about__opening { margin: 0 0 1.15rem; }
.about__opening::first-letter {
  font-family: var(--font-initial);
  font-size: 4.2em;
  line-height: 0.72;
  float: left;
  color: var(--rubric);
  margin: 0.04em 0.16em -0.04em 0;
  padding: 0.08em 0.12em 0.02em;
  background: linear-gradient(158deg, #faf3df, #ecdcb4);
  border: 1px solid var(--gold);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(90, 60, 20, 0.22),
    inset 0 0 0 2px rgba(255, 253, 246, 0.55);
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.6);
}
.about__opening::first-line {
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--rubric);
}
:root[data-theme="dark"] .about__opening::first-letter {
  background: linear-gradient(158deg, #322715, #241c12);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 0 0 2px rgba(120, 95, 45, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
html.dyslexic .about__opening::first-letter { line-height: 0.82; }
@media (max-width: 640px) {
  .about__opening::first-letter { font-size: 3.6em; }
}

/* Diminuendo on the About opening, matching the essay incipit */
.about__opening .dim1 { font-size: 1.5em;  line-height: 1; }
.about__opening .dim2 { font-size: 1.28em; line-height: 1; }
.about__opening .dim3 { font-size: 1.12em; line-height: 1; }

/* ---- Interlaced Trinity emblem (masthead, colophon, essay end, 404) ---- */
:root { --ring-a: var(--rubric); --ring-b: var(--azure); --ring-c: #8a6a1c; }
:root[data-theme="dark"] { --ring-a: var(--gold); --ring-b: var(--gold); --ring-c: var(--gold); }
.emblem-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.emblem { display: block; }
.masthead__emblem { width: 58px; height: 58px; margin: 0 auto 0.5rem; }
.colophon__emblem { width: 44px; height: 44px; margin: 0 auto 0.4rem; }
.post__emblem { width: 62px; height: 62px; margin: 0 auto 0.6rem; }
.content { position: relative; z-index: 0; }
.page-watermark { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(62vw, 440px); z-index: -1; opacity: 0.055; pointer-events: none; }
.page-watermark .emblem { width: 100%; height: auto; }

/* ---- Subscribe (Buttondown) ------------------------------------------- */
.subscribe { max-width: var(--measure); margin: 2rem auto; }
.subscribe__blurb { color: var(--ink-soft); margin: .25rem 0 1rem; }
.subscribe__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.subscribe__label { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.subscribe__input { flex: 1 1 16rem; padding: .6rem .8rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper-light); border: 1px solid var(--line); border-radius: 2px; }
.subscribe__input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---- Refinement: tighten the top gap between masthead and content ------- */
.masthead .rule--ornate { margin-top: 1.6rem; margin-bottom: 1.6rem; }
.content { padding-top: 1.4rem; }

/* ---- Liturgical accent (season colour set at runtime; nothing fetched) --- */
:root { --liturgical: var(--rubric); }
:root[data-liturgical="green"]  { --liturgical: #4f7355; }
:root[data-liturgical="violet"] { --liturgical: #6a4a86; }
:root[data-liturgical="white"]  { --liturgical: #b0842f; }
:root[data-liturgical="red"]    { --liturgical: #8b1e2d; }
:root[data-liturgical="rose"]   { --liturgical: #b06a86; }
:root[data-theme="dark"]                           { --liturgical: var(--rubric); }
:root[data-theme="dark"][data-liturgical="green"]  { --liturgical: #86ad7f; }
:root[data-theme="dark"][data-liturgical="violet"] { --liturgical: #b79ad6; }
:root[data-theme="dark"][data-liturgical="white"]  { --liturgical: #cdac6a; }
:root[data-theme="dark"][data-liturgical="red"]    { --liturgical: #de9990; }
:root[data-theme="dark"][data-liturgical="rose"]   { --liturgical: #d6a3b8; }
.ribbon {
  background-color: var(--liturgical);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.22));
}
.colophon__season {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--liturgical);
}
.colophon__season::before { content: "\231B\FE0E\00A0"; }
.colophon__season:empty { display: none; }