/* ==========================================================================
   OnMeaning — design system
   Palette: warm paper, deep ink, gold light (brand: light over dark water)
   Type: Newsreader (essays & headings), Inter (interface)
   ========================================================================== */

:root {
  --paper: #fbf9f4;
  --surface: #f3efe5;
  --ink: #221d14;
  --ink-soft: #5f5741;
  /* Was #8a8069, which gave only 3.72:1 on --paper and failed WCAG AA for
     small text. This carries the same warm grey at 4.57:1. It is used for
     read times, card meta, footer text and publication dates — all small. */
  --ink-faint: #7a715d;
  --gold: #a97e2b;
  --gold-deep: #8a6620;
  --gold-bright: #d9ae54;
  --dark: #14110b;
  --dark-soft: #1e1a12;
  --line: #e7e0ce;
  --line-strong: #d8cfb6;
  --card: #ffffff;
  --shadow: 0 1px 2px rgb(34 29 20 / 0.05), 0 8px 24px rgb(34 29 20 / 0.06);
  --shadow-lift: 0 2px 4px rgb(34 29 20 / 0.06), 0 16px 40px rgb(34 29 20 / 0.12);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 4.25rem;
}

:root[data-theme="dark"] {
  --paper: #16130d;
  --surface: #1d1912;
  --ink: #ece5d4;
  --ink-soft: #b3a98e;
  /* Was #857c64 at 4.47:1 — just under AA. Lifted so it clears 4.5:1 on the
     raised card surface too (#1d1912), not only on the page ground, since
     form notes and card meta sit on cards. 4.5 on card, 4.77 on page. */
  --ink-faint: #898169;
  --gold: #d0a548;
  --gold-deep: #b98f38;
  --gold-bright: #e3bc63;
  --dark: #0e0c07;
  --dark-soft: #16130d;
  --line: #2c261a;
  --line-strong: #3b3322;
  --card: #1d1912;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.45), 0 16px 40px rgb(0 0 0 / 0.5);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* The `hidden` attribute is only `display: none` in the UA sheet, so any
   author `display` rule (.btn is inline-flex, .form-row is grid) silently
   overrides it. Keep this above component styles. */
[hidden] {
  display: none !important;
}

a {
  color: var(--gold-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

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

::selection {
  background: rgb(169 126 43 / 0.25);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.container {
  width: min(100% - 3rem, 68.75rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--dark);
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-size: 0.875rem;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgb(34 29 20 / 0.05);
}

/* ---------- Header over the hero ----------
   The homepage opens on a full-bleed photograph. A cream bar sitting on top
   of it cuts the image off at the top of the screen; in light mode that reads
   as a stark white band. Until the reader scrolls off the image the bar
   carries no surface of its own and its contents go light, because the
   photograph is dark in both themes. Everything returns on scroll, where the
   bar is over the page again and needs to be legible against it. */
/* A sticky header still occupies its space in flow, so the image began below
   it. Pulling the hero up by exactly the header's height lets the bar float
   over the photograph instead of cropping it. */
.site-header.over-hero + main .hero {
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(6rem + var(--header-h));
}

.site-header.over-hero:not(.is-scrolled) {
  background: transparent;
  /* blur(0) rather than none: `none` is not a length, so it cannot be
     interpolated and the blur would snap on instead of fading in. */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* The bar and its contents cross-fade together as the hero scrolls away.
   `is-animated` is added a frame after load so a page opened part-way down
   arrives already solid rather than animating into it. */
.site-header.over-hero.is-animated,
.site-header.over-hero.is-animated .brand,
.site-header.over-hero.is-animated .site-nav > ul > li > a,
.site-header.over-hero.is-animated .theme-toggle,
.site-header.over-hero.is-animated .nav-toggle {
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    -webkit-backdrop-filter 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .site-header.over-hero.is-animated,
  .site-header.over-hero.is-animated .brand,
  .site-header.over-hero.is-animated .site-nav > ul > li > a,
  .site-header.over-hero.is-animated .theme-toggle,
  .site-header.over-hero.is-animated .nav-toggle {
    transition: none;
  }
}

.site-header.over-hero:not(.is-scrolled) .brand,
.site-header.over-hero:not(.is-scrolled) .site-nav a,
.site-header.over-hero:not(.is-scrolled) .theme-toggle,
.site-header.over-hero:not(.is-scrolled) .nav-toggle {
  color: #f4eee1;
}

.site-header.over-hero:not(.is-scrolled) .site-nav a:hover,
.site-header.over-hero:not(.is-scrolled) .theme-toggle:hover {
  color: #fff;
  background: rgb(244 238 225 / 0.12);
  border-color: transparent;
}

.site-header.over-hero:not(.is-scrolled) .site-nav a[aria-current="page"] {
  color: var(--gold-bright);
}

.site-header.over-hero:not(.is-scrolled) .nav-toggle {
  border-color: rgb(244 238 225 / 0.45);
}

/* The mobile menu drops a solid panel below the bar; a transparent bar above
   a solid panel reads as a mistake, so the bar comes back for that moment. */
.site-header.over-hero.is-nav-open {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header.over-hero.is-nav-open .brand,
.site-header.over-hero.is-nav-open .nav-toggle,
.site-header.over-hero.is-nav-open .theme-toggle {
  color: var(--ink);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

.brand svg {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  color: var(--gold);
}

.brand-name {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--surface);
}

.site-nav a[aria-current="page"] {
  color: var(--gold-deep);
}

/* Nav and the two icon buttons share the right end of the header. On a phone
   the nav drops out of flow (absolutely positioned), leaving the buttons. */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Each theme shows its own mark: a moon while dark, a sun while light. The
   button's accessible name says what pressing it will do. */
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 40em) {
  .theme-toggle {
    width: 2.75rem;
    height: 2.75rem;
    border-color: var(--line-strong);
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 40em) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: none;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1.5rem 1.25rem;
  }

  .site-nav a {
    display: block;
    padding: 0.85rem 0.5rem;
    font-size: 1.05rem;
    border-radius: 8px;
  }
}

/* ---------- Reading progress (essay pages) ---------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(88vh, 46rem);
  padding: 6rem 0;
  background: #0a0805;
  color: #f4eee1;
  overflow: hidden;
  text-align: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  opacity: 0.9;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center 70%, transparent 0%, rgb(5 4 2 / 0.55) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  padding-inline: 1.5rem;
}

.hero-logo {
  width: min(15rem, 60vw);
  margin: 0 auto 2.5rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.75rem);
  font-weight: 500;
  color: #faf6ec;
  margin-bottom: 0.5em;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-bright);
}

.hero p {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  line-height: 1.6;
  color: rgb(244 238 225 / 0.85);
  max-width: 34em;
  margin: 0 auto 2.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-solid {
  background: var(--gold);
  color: #17120a;
  box-shadow: 0 4px 16px rgb(169 126 43 / 0.35);
}

.btn-solid:hover {
  background: var(--gold-bright);
  color: #17120a;
  transform: translateY(-1px);
}

/* The timeline is the only thing on this page you operate rather than read,
   so it takes a third treatment: glass against the hero photograph, edged in
   gold, carrying the spine mark it uses inside. It sits between the two
   existing buttons, which puts it at the centre of a centred row without
   demoting the essays from primary. */
.btn-feature {
  color: #fff;
  background: rgb(19 15 9 / 0.55);
  border-color: rgb(255 206 138 / 0.5);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-feature:hover {
  color: #fff;
  background: rgb(19 15 9 / 0.72);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.38);
}

.btn-feature .btn-spine {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  margin-left: -0.15rem;
  color: var(--gold);
}

.btn-ghost {
  color: #f4eee1;
  border-color: rgb(244 238 225 / 0.35);
}

.btn-ghost:hover {
  color: #fff;
  border-color: rgb(244 238 225 / 0.7);
  background: rgb(244 238 225 / 0.08);
}

.btn-outline {
  color: var(--gold-deep);
  border-color: var(--line-strong);
}

.btn-outline:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}

/* ---------- Sections ---------- */

.section {
  padding: 5rem 0;
}

.section + .section {
  padding-top: 0;
}

.section-head {
  max-width: 40rem;
  margin-bottom: 3rem;
}

.section-head.is-centered {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.85rem;
}

.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 500;
}

.section-head p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0.75rem 0 0;
}

/* ---------- Essay cards ---------- */

.essay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.75rem;
}

.essay-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.essay-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.essay-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.essay-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.essay-card:hover .essay-card-media img {
  transform: scale(1.04);
}

.essay-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: 1.5rem 1.5rem 1.4rem;
}

.essay-card .card-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.essay-card h2,
.essay-card h3 {
  font-size: 1.45rem;
  font-weight: 600;
  margin: 0;
}

.essay-card h2 a,
.essay-card h3 a {
  color: inherit;
  text-decoration: none;
}

/* Whole card is clickable */
.essay-card h2 a::after,
.essay-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.essay-card p {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.essay-card .card-meta {
  font-size: 0.83rem;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}

/* ---------- Quote band (home) ---------- */

.quote-band {
  background: var(--dark);
  color: #efe8d8;
  padding: 5.5rem 0;
  text-align: center;
}

.quote-band blockquote {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
}

.quote-band blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.quote-band cite {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* ---------- Page header (inner pages) ---------- */

.page-head {
  padding: 4.5rem 0 3rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.page-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  font-weight: 500;
  margin-bottom: 0.35em;
}

.page-head p {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 38em;
  margin: 0;
}

/* ---------- Article (essay) ---------- */

.article-header {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4rem 0 0;
  text-align: center;
}

.article-header .eyebrow {
  margin-bottom: 1rem;
}

.article-header h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.4rem);
  font-weight: 500;
  margin-bottom: 0.6em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.article-meta .sep {
  color: var(--line-strong);
}

.article-art {
  max-width: 52rem;
  margin: 2.75rem auto 0;
}

.article-art img {
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
}

.article-body {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 0 5rem;
}

/* Contents card */
.toc {
  margin: 0 0 3.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.toc-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.6rem;
}

.toc ol {
  margin: 0;
  padding: 0 0 0 1.4rem;
  columns: 2;
  column-gap: 2.5rem;
  font-size: 0.95rem;
}

.toc li {
  margin: 0.3rem 0;
  break-inside: avoid;
}

.toc a {
  color: var(--ink-soft);
  text-decoration: none;
}

.toc a:hover,
.toc a.is-active {
  color: var(--gold-deep);
}

@media (max-width: 34em) {
  .toc ol {
    columns: 1;
  }
}

/* Prose typography */

.prose {
  font-family: var(--serif);
  font-size: 1.185rem;
  line-height: 1.75;
  color: var(--ink);
}

.prose p {
  margin: 0 0 1.35em;
}

.prose h2 {
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 2.6em 0 0.9em;
  padding-top: 1.4rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}

.prose h3 {
  font-size: 1.35rem;
  margin: 2em 0 0.7em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.prose a {
  color: var(--gold-deep);
}

/* A button inside prose is still a button. `.prose a` outranks `.btn-solid`
   on specificity, which was repainting the gold button's label gold — 1.3:1
   against its own background, effectively invisible. These restore each
   button's own colour and are written per variant so a new one added inside
   prose fails visibly rather than silently. */
.prose a.btn-solid {
  color: #17120a;
}

.prose a.btn-ghost {
  color: #f4eee1;
}

.prose a.btn-feature {
  color: #fff;
}

.prose ul,
.prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.5em;
}

.prose li {
  margin: 0.45em 0;
}

.prose li::marker {
  color: var(--gold-deep);
}

.prose hr {
  border: 0;
  height: 1px;
  background: var(--line-strong);
  margin: 3em auto;
  width: 6rem;
}

.prose strong {
  font-weight: 600;
}

/* Opening drop cap */
.prose .dropcap::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  font-weight: 500;
  color: var(--gold-deep);
}

/* Scripture / pull quotes */
.prose blockquote {
  margin: 2em 0;
  padding: 1.4rem 1.75rem;
  background: var(--surface);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  font-size: 1.08rem;
}

.prose blockquote p {
  margin-bottom: 0.85em;
}

.prose blockquote p:last-of-type {
  margin-bottom: 0;
}

.prose blockquote cite {
  display: block;
  margin-top: 0.9em;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.prose blockquote.scripture cite {
  margin-top: 0;
  margin-bottom: 0.75em;
}

/* Poetic / verse lines */
.prose .verse {
  font-style: italic;
}

.prose .verse span {
  display: block;
}

/* Emphasis litany (short stacked lines) */
.prose .litany span {
  display: block;
}

/* Footnotes */
.footnote-ref a {
  font-family: var(--sans);
  font-size: 0.7em;
  text-decoration: none;
  vertical-align: super;
  line-height: 1;
}

.footnotes {
  max-width: 44rem;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.footnotes h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.footnotes ol {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.footnotes li {
  margin-bottom: 0.75em;
}

.footnotes li:target {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

/* Prev / next navigation */
/* The publication date lives here rather than under the title. These are
   essays, not issues of a periodical — a date at the top invites the reader
   to weigh how current it is before they have read a word. At the foot it is
   still on the record, for anyone who wants it. */
.article-published {
  max-width: 44rem;
  margin: 3rem auto 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.article-nav {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 0 5rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.article-nav a {
  display: block;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  background: var(--card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.article-nav a:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.article-nav .nav-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.article-nav .nav-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.article-nav .is-next {
  text-align: right;
}

@media (max-width: 34em) {
  .article-nav {
    grid-template-columns: 1fr;
  }

  .article-nav .is-next {
    text-align: left;
  }
}

/* ---------- About page ---------- */

.about-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: center;
  padding: 4.5rem 0;
}

.about-split .prose {
  font-size: 1.15rem;
}

.about-figure img {
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  width: 100%;
  object-fit: cover;
}

.about-figure.is-tall img {
  aspect-ratio: 3 / 4;
}

.about-split .btn {
  margin-top: 1.25rem;
}

@media (max-width: 50em) {
  .about-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ---------- Contact ---------- */

.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  padding: 4.5rem 0 5.5rem;
  align-items: start;
}

@media (max-width: 50em) {
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.contact-intro h2 {
  font-size: 1.9rem;
  font-weight: 500;
}

.contact-intro p {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.contact-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: var(--shadow);
  display: grid;
  gap: 1.15rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

@media (max-width: 34em) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.field .required {
  color: var(--gold-deep);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent);
}

.field textarea {
  resize: vertical;
  min-height: 8.5rem;
}

.contact-form .btn {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

.form-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0;
}

.form-status {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
}

.form-status.is-success {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  color: var(--gold-deep);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.form-status.is-error {
  background: color-mix(in srgb, #b3402e 10%, transparent);
  border: 1px solid color-mix(in srgb, #b3402e 35%, transparent);
  color: #a03a2a;
}

[data-theme="dark"] .form-status.is-error {
  color: #e08a77;
}

/* ---------- Feature band (Road to Emmaus) ---------- */

.feature-band {
  background: var(--dark);
  color: #efe8d8;
  padding: 5.5rem 0;
  overflow: hidden;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.feature-band .eyebrow {
  color: var(--gold-bright);
}

.feature-band h2 {
  color: #faf6ec;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 500;
}

.feature-band > .container > .feature-grid p,
.feature-copy p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgb(239 232 216 / 0.75);
  max-width: 36em;
}

.feature-threads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

.feature-threads li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgb(239 232 216 / 0.65);
}

.feature-threads .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--thread-color);
}

.feature-figure {
  display: flex;
  justify-content: center;
}

.feature-figure svg {
  width: min(15rem, 55vw);
  height: auto;
}

@media (max-width: 50em) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .feature-figure {
    order: -1;
  }

  .feature-figure svg {
    width: 11rem;
  }
}

/* ---------- Thread pages ---------- */

.thread-head {
  padding: 4.5rem 0 3.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.thread-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--thread-color);
}

.thread-head .eyebrow {
  color: var(--thread-color);
  filter: saturate(0.9) brightness(0.72);
}

[data-theme="dark"] .thread-head .eyebrow {
  filter: none;
}

.thread-head h1 {
  font-size: clamp(2.4rem, 6vw, 3.5rem);
  font-weight: 500;
  margin-bottom: 0.15em;
}

.thread-subtitle {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

.thread-meta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.75rem;
}

.thread-meta .swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--thread-color);
}

.thread-body {
  max-width: 44rem;
  padding: 3.5rem 0 1rem;
}

.thread-body .prose p:first-child::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  font-weight: 500;
  color: var(--thread-color);
  filter: saturate(0.85) brightness(0.7);
}

[data-theme="dark"] .thread-body .prose p:first-child::first-letter {
  filter: none;
}

.thread-section-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 3.5rem 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

/* The walk: every stop in order, promise rising then arriving */
.thread-arc {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.thread-arc::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  background: var(--thread-color);
  opacity: 0.35;
}

.thread-arc li {
  position: relative;
  padding: 0 0 1.75rem 2.25rem;
}

.thread-arc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--thread-color);
  outline: 4px solid var(--paper);
}

.thread-arc li.is-fulfillment::before {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold);
}

.thread-arc .arc-ref {
  display: block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.3rem;
}

.thread-arc .arc-ref a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.thread-arc .arc-ref a:hover {
  border-bottom-color: var(--thread-color);
}

.thread-arc li.is-fulfillment .arc-ref::before {
  content: "\2726\00a0";
  color: var(--gold-deep);
}

.thread-arc .arc-text {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.thread-arc li.is-fulfillment .arc-text {
  color: var(--ink);
}

/* Closing statement */
.thread-close {
  margin-top: 1rem;
  padding: 1.75rem 2rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}

.thread-close h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.9rem;
}

.thread-close p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.65;
  margin: 0;
}

/* Thread-to-thread navigation */
.thread-nav {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 0 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.thread-nav a {
  display: block;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--nav-color, var(--line-strong));
  border-radius: 12px;
  text-decoration: none;
  background: var(--card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.thread-nav a:hover {
  transform: translateY(-2px);
}

.thread-nav .is-next {
  text-align: right;
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--nav-color, var(--line-strong));
}

.thread-nav .nav-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}

.thread-nav .nav-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 34em) {
  .thread-nav {
    grid-template-columns: 1fr;
  }

  .thread-nav .is-next {
    text-align: left;
    border-left: 3px solid var(--nav-color, var(--line-strong));
    border-right: 1px solid var(--line);
  }
}

/* Floating return to the timeline — appears once you have read a way down */
.floating-back {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.3rem;
  border-radius: 999px;
  background: var(--dark);
  color: #f4eee1;
  border: 1px solid var(--thread-color, var(--gold));
  box-shadow: 0 6px 28px rgb(0 0 0 / 0.35);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}

.floating-back.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.floating-back:hover {
  color: #fff;
  box-shadow: 0 8px 34px rgb(0 0 0 / 0.45);
}

.floating-back svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--thread-color, var(--gold));
}

@media (max-width: 34em) {
  .floating-back {
    right: 1rem;
    bottom: 1rem;
    padding: 0.7rem 1.1rem;
    font-size: 0.85rem;
  }
}

/* Thread index cards */
.thread-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.thread-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 1.75rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--thread-color);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.thread-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.thread-card h2 {
  font-size: 1.5rem;
  margin: 0;
}

.thread-card h2 a {
  color: inherit;
  text-decoration: none;
}

.thread-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.thread-card .card-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.thread-card p {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.35rem 0 0;
  flex: 1;
}

.thread-card .card-meta {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.9rem;
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding: 4.5rem 0;
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 500;
}

.cta-band p {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 36em;
  margin: 0.5rem auto 1.75rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--dark);
  color: #b9ae95;
  padding: 4rem 0 2.5rem;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.footer-brand img {
  width: 10.5rem;
}

.footer-brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  margin: 1rem 0 0;
  color: #8f8569;
}

.footer-nav {
  display: flex;
  gap: 2.5rem;
}

.footer-nav h3,
.footer-nav .footer-head {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8f8569;
  margin: 0 0 0.85rem;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin: 0.5rem 0;
}

.footer-nav a {
  color: #d6ccb2;
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-nav a:hover {
  color: var(--gold-bright);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 2rem;
  font-size: 0.85rem;
  /* Was #7d7357 at 4.0:1 on the footer's near-black. The footer stays dark in
     both themes, so this is a fixed value rather than a token. */
  color: #877e64;
}

.footer-bottom a {
  color: inherit;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}