/* Christologia — one stylesheet, self-hosted fonts, no scripts. Session 8 redesign on the "Marian Palette":
   navy #1d2a68, gold #c4a95b, blue #4a79ba, white, charcoal #28282d. Light and dark schemes. */

/* Self-hosted web fonts (SIL Open Font License 1.1; see /fonts/LICENSES.txt). Latin + Latin Extended subsets only. */
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/cormorant-500-normal-latin-65fe45813c4055e2538f2312eaf1a11e.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/cormorant-500-normal-latin-ext-b51805d9eab01511b29e0512e666e47c.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: 'Cormorant'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-600-normal-latin-65fe45813c4055e2538f2312eaf1a11e.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-600-normal-latin-ext-b51805d9eab01511b29e0512e666e47c.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: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-400-normal-latin-1a4b137019bd3e19c2a8c541e7f5fde3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-400-normal-latin-ext-7b420e1876aa8d7222a3baafd80a380b.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: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-400-italic-latin-9f79ebd15d7567cfdaea785d7863b011.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-400-italic-latin-ext-a6d60ed06220f3f4bd549ab404e6e096.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: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-400-normal-latin-6a682eb0234e3dc8ebb67f4aff0abd31.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-400-normal-latin-ext-20f95b1e4359a54e756d099170f87ecb.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: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-400-italic-latin-e5fc844e2baa1f988a5191bf39196240.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-400-italic-latin-ext-fb43d3e01409f603686d796006068f41.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: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/source-serif-4-600-normal-latin-6a682eb0234e3dc8ebb67f4aff0abd31.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/source-serif-4-600-normal-latin-ext-20f95b1e4359a54e756d099170f87ecb.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: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/libre-caslon-text-400-normal-latin-001d520e0d8b44e0e75858636c45604b.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/libre-caslon-text-400-normal-latin-ext-22fac7cc1022be859a91201aa1a3d9d4.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: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/libre-caslon-text-400-italic-latin-da67fedc7811d07293240eb365cd6af0.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/libre-caslon-text-400-italic-latin-ext-411a82ccf8c77e996793863fdb30babc.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; }

:root {
  --navy: #1d2a68; --gold: #c4a95b; --blue: #4a79ba; --white: #ffffff; --charcoal: #28282d;
  --paper: #ffffff; --ink: #28282d; --muted: #5d5f6b; --rule: #dcd8ce; --note: #f4f0e6; --card: #ffffff;
  --accent: #3b66a6; --band: #1d2a68; --band-ink: #f3eedf; --band-muted: #c9c3b0; --band-link: #d8c27a;
  --ok: #2f6b3a; --bad: #9b2c2c;
  --measure: 42rem; --wide: 66rem;
  --body: "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --display: Cormorant, "Cormorant Garamond", Georgia, serif;
  --ui: "EB Garamond", Garamond, Georgia, serif;
  --quote: "Libre Caslon Text", "Adobe Caslon Pro", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #14172b; --ink: #ece7da; --muted: #b5b0a3; --rule: #2d3254; --note: #1b1f3d; --card: #181c35;
          --accent: #d8c27a; --band: #0f1330; --band-ink: #ece7da; --band-muted: #a9a394; --band-link: #d8c27a; --ok: #7fc48d; --bad: #e08a8a; }
}
* { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.6; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--note); color: var(--ink); padding: .5rem; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }
.wide { max-width: var(--wide); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: .005em; }
h1 { font-size: 2.6rem; margin: 0 0 .5rem; }
h2 { font-size: 1.75rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.35rem; margin: 1.25rem 0 .5rem; }
.lead { font-size: 1.15rem; }
.byline, .meta, .links, .pagination, .credits, nav.neighbours { font-family: var(--ui); }
.byline, .meta { color: var(--muted); font-size: 1rem; }
.byline a, .meta a { color: inherit; }
.empty { color: var(--muted); font-style: italic; }

/* ---- masthead: the arch above the navigation; navy band with the nav beneath it.
   On every page the arch is a fixed layer behind the flow (home: the full arch, inner pages: a cropped band), so the
   navigation band and the content scroll over it while it stays put — a parallax hero. --hero-h is the height the image
   has in flow; the home link keeps that height as a spacer, main gets an opaque background so the arch never shows
   through, and the band, main and footer sit at z-index 1. js/site.js sets --hero-progress (0 = uncovered, 1 = covered):
   the arch fades towards the navy behind it and drifts up by 18 % of its height — a fraction of the page's own travel, so
   the band always covers more than the drift exposes. Static again for reduced motion and print. */
.masthead { background: var(--navy); --hero-h: min(62vh, 640px, calc(100vw * 768 / 1376)); }
@supports (height: 1svh) { .masthead { --hero-h: min(62svh, 640px, calc(100vw * 768 / 1376)); } }
.masthead--band { --hero-h: clamp(7rem, 17vw, 13.5rem); }
.masthead__link { display: block; position: relative; height: var(--hero-h); color: inherit; text-decoration: none; }
.masthead__art { position: fixed; top: 0; left: 0; right: 0; height: var(--hero-h); z-index: 0; overflow: hidden; background: #0b0b0b; }
.masthead__art img { display: block; width: 100%; max-width: 1376px; margin: 0 auto; height: 100%; object-fit: cover; opacity: calc(1 - var(--hero-progress, 0) * .6); transform: translateY(calc(var(--hero-progress, 0) * -18%)); will-change: opacity, transform; }
.masthead--full .masthead__art img { object-position: center 46%; }
.masthead--band .masthead__art img { object-position: center 50%; }
.navband, .masthead ~ main, .masthead ~ footer { position: relative; z-index: 1; }
.masthead ~ main { background: var(--paper); }
@media print, (prefers-reduced-motion: reduce) {
  .masthead__link { height: auto; }
  .masthead__art { position: static; height: auto; overflow: visible; }
  .masthead__art img { height: auto; opacity: 1; transform: none; }
  .masthead--full .masthead__art img { max-height: min(62vh, 640px); }
  .masthead--band .masthead__art img { height: clamp(7rem, 17vw, 13.5rem); }
  .feature__bg img { inset: 0; height: 100%; transform: none; }
  .chr-art--banner img { top: 0; height: 100%; transform: none; }
}
.masthead__brand, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.navband { background: var(--band); color: var(--band-ink); border-top: 1px solid rgba(196, 169, 91, .45); border-bottom: 3px solid var(--gold); }
.navband .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.5rem; padding-top: .7rem; padding-bottom: .7rem; }
nav.primary ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin: 0; padding: 0; font-family: var(--ui); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
nav.primary a { color: var(--band-ink); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .1rem; }
nav.primary a:hover, nav.primary a[aria-current] { color: var(--band-link); border-bottom-color: var(--gold); }
.tagline { margin: 0; font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--band-muted); }

/* ---- home feature band (the cathedral) */
.feature { position: relative; isolation: isolate; background: var(--navy); color: #f6f1e3; overflow: hidden; --parallax-room: .5; }
/* The cathedral is twice the band's height so js/site.js can slide it (--parallax-shift, ± half the band) more slowly than
   the page scrolls; the band's overflow: hidden crops it. Without the script the shift is 0 and the band looks as before. */
.feature__bg img { position: absolute; inset: -50% 0; width: 100%; height: 200%; object-fit: cover; object-position: center 60%; z-index: -2; transform: translateY(var(--parallax-shift, 0px)); will-change: transform; }
.feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 20, 58, .55), rgba(14, 20, 58, .78)); }
.feature__text { padding-top: 3.5rem; padding-bottom: 3.5rem; text-align: center; }
.feature__text h1 { font-size: 3.2rem; margin: 0 0 .5rem; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.feature__text p { font-size: 1.2rem; margin: 0 auto; max-width: 38rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
main { padding: 2rem 0 3rem; }
main > .feature { margin-top: -2rem; margin-bottom: 2.25rem; }

/* ---- essay cards */
.essay-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; }
.card { height: 100%; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: .5rem; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 23, 43, .06); }
.card__art { display: block; }
.chr-art { display: block; }
.chr-art img { display: block; width: 100%; height: auto; }
.card .chr-art--card img { aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { padding: 1rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; }
.card__title { margin: 0; font-size: 1.6rem; line-height: 1.15; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.card .byline { margin: 0; font-size: .95rem; }
.excerpt p { margin: .25rem 0 0; }

/* ---- faces and portraits (AI illustrations) */
.face { display: inline-block; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); background: var(--note); vertical-align: middle; }
.face--xs { width: 1.7rem; height: 1.7rem; margin-right: .3rem; }
.face--sm { width: 2.4rem; height: 2.4rem; margin-right: .4rem; }
.face--md { width: 5.5rem; height: 5.5rem; border-width: 2px; }
.face--lg { width: 8.5rem; height: 8.5rem; border-width: 3px; }
.face--empty { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 2rem; color: var(--muted); }
.portrait { display: block; width: 100%; height: auto; border-radius: .5rem; border: 3px solid var(--gold); background: var(--note); }
.portrait--sm { width: 9rem; flex: none; }
.faces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem 1.4rem; }
.faces a { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 6.5rem; text-align: center; text-decoration: none; color: var(--ink); }
.faces a:hover .faces__name { text-decoration: underline; }
.faces__name { font-family: var(--ui); font-size: .95rem; line-height: 1.25; }
.strip { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.strip h2 { margin-top: 0; }

/* ---- essay page */
.essay__header, .page-header { margin: -2rem 0 1.75rem; }
/* Header art of essays (the featured image or the topic art), topics and pages: the picture is the clipped box and the
   image is half again as tall, so js/site.js can slide it (--parallax-shift, ± a quarter of the box) more slowly than the page. */
.chr-art--banner { position: relative; overflow: hidden; height: clamp(10rem, 28vw, 19rem); border-bottom: 3px solid var(--gold); --parallax-room: .25; }
.chr-art--banner img { position: absolute; left: 0; top: -25%; width: 100%; height: 150%; object-fit: cover; transform: translateY(var(--parallax-shift, 0px)); will-change: transform; }
.essay__header .wrap, .page-header .wrap { padding-top: 1.5rem; }
.essay__header h1, .page-header h1 { font-size: 2.8rem; margin: .35rem 0 .5rem; }
.topics { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; font-family: var(--ui); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
.topics a { border: 1px solid var(--gold); border-radius: 1rem; padding: .1rem .7rem; text-decoration: none; color: var(--ink); }
.topics a:hover { background: var(--note); }
.chr-disclosure { background: var(--note); border-left: 4px solid var(--gold); padding: .9rem 1.1rem; margin: 1.5rem 0; font-family: var(--ui); font-size: 1rem; }
.chr-disclosure p { margin: 0; }
.chr-disclosure p + p { margin-top: .5rem; }
.chr-disclosure__persona { color: var(--muted); }
.essay-body { font-size: 1.1rem; }
.essay-body p { margin: 0 0 1.15rem; }
.essay-body h2 { font-size: 1.9rem; }
.essay-body h3 { font-size: 1.45rem; }
.essay-body blockquote, .chr-citations blockquote { margin: 1.4rem 0; padding: .3rem 0 .3rem 1.25rem; border-left: 3px solid var(--gold); color: var(--muted); font-family: var(--quote); font-style: italic; font-size: 1.05rem; }
.essay-body blockquote cite { display: block; font-style: normal; font-family: var(--ui); font-size: .9rem; margin-top: .4rem; }
.essay-body img { display: block; margin: 1.5rem auto; }
.essay-body figure { margin: 1.5rem 0; }
.essay-body figcaption { font-family: var(--ui); font-size: .9rem; color: var(--muted); text-align: center; }
.chr-citations { border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1rem; font-size: .98rem; }
.chr-citations h2 { margin-top: 0; font-size: 1.5rem; }
.chr-citations ol { padding-left: 1.25rem; }
.chr-citations li { margin-bottom: .6rem; }
.chr-citations__kind { color: var(--muted); font-family: var(--ui); font-size: .85rem; }
.chr-verified { font-family: var(--ui); font-size: .8rem; border-radius: .3rem; padding: 0 .35rem; margin-left: .25rem; }
.chr-verified--yes { color: var(--ok); border: 1px solid var(--ok); }
.chr-verified--no { color: var(--bad); border: 1px solid var(--bad); }
.chr-verified--unknown { color: var(--muted); border: 1px solid var(--rule); }
nav.neighbours { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .95rem; }
nav.neighbours span { color: var(--muted); display: block; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }
.persona-box { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.persona-box h2 { margin: 0 0 .25rem; font-size: 1.5rem; }
.persona-box h2 a { color: var(--ink); text-decoration: none; }
.persona-box p { margin: .4rem 0 0; }

/* ---- author pages */
.persona-lead { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 1.75rem; align-items: start; margin-bottom: 1rem; }
.persona-lead__portrait { margin: 0; }
.persona-lead__portrait figcaption { font-family: var(--ui); font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.persona-lead__text h1 { margin-top: 0; }
.persona-lead .chr-disclosure { margin-bottom: 0; }
.section-heading { margin-top: 2.5rem; }
.links { font-size: .95rem; }
.links a { margin-right: .75rem; }
.persona-grid { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.5rem; }
.persona-grid li { border: 1px solid var(--rule); border-radius: .5rem; padding: 1.25rem 1rem; text-align: center; background: var(--card); }
.persona-grid__link { display: block; text-decoration: none; color: var(--ink); }
.persona-grid h2 { margin: .75rem 0 .2rem; font-size: 1.45rem; }
.persona-grid p { margin: .3rem 0 0; font-size: .95rem; }

/* ---- topics */
.topic-tiles { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.topic-tiles a { position: relative; display: block; border-radius: .5rem; overflow: hidden; text-decoration: none; color: #fff; border: 1px solid var(--rule); }
.topic-tiles .chr-art img { aspect-ratio: 16 / 10; object-fit: cover; transition: transform .3s ease; }
.topic-tiles a:hover .chr-art img { transform: scale(1.03); }
.topic-tiles__name, .topic-tiles__count { position: absolute; left: 1rem; right: 1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.topic-tiles__name { bottom: 1.8rem; font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
.topic-tiles__count { bottom: .7rem; font-family: var(--ui); font-size: .9rem; color: var(--band-link); }
.topic-tiles a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 20, 58, 0) 35%, rgba(14, 20, 58, .85)); }
.topic-tiles__name, .topic-tiles__count { z-index: 1; }

/* ---- misc */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; font-size: .95rem; }
.pagination .count { color: var(--muted); }
.archive-months { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; font-size: 1.1rem; }
.archive-months li { padding: .3rem 0; break-inside: avoid; }
.page-body p:first-child { margin-top: 0; }
footer.colophon { margin-top: 2rem; background: var(--band); color: var(--band-ink); border-top: 3px solid var(--gold); padding: 2rem 0 2.5rem; font-family: var(--ui); font-size: .95rem; }
footer.colophon a { color: var(--band-link); }
footer.colophon ul { list-style: none; padding: 0; margin: .75rem 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; letter-spacing: .05em; text-transform: uppercase; font-size: .85rem; }
footer.colophon .long-disclosure p { margin: 0 0 .75rem; }
footer.colophon .credits, footer.colophon p:last-child { color: var(--band-muted); font-size: .85rem; }
@media (max-width: 40rem) {
  html { font-size: 100%; }
  h1 { font-size: 2.1rem; }
  .essay__header h1, .page-header h1 { font-size: 2.2rem; }
  .feature__text h1 { font-size: 2.5rem; }
  .masthead--full { --hero-h: min(48vh, calc(100vw * 768 / 1376)); }
  @supports (height: 1svh) { .masthead--full { --hero-h: min(48svh, calc(100vw * 768 / 1376)); } }
  @media print, (prefers-reduced-motion: reduce) { .masthead--full .masthead__art img { max-height: 48vh; } }
  .navband .wrap { justify-content: center; text-align: center; }
  nav.primary ul { justify-content: center; gap: .2rem .9rem; font-size: .95rem; }
  .archive-months { columns: 1; }
  .persona-box { flex-direction: column; }
  .persona-lead { grid-template-columns: 1fr; }
  .persona-lead__portrait { max-width: 14rem; }
}