/* Father Blackwood — the liturgy of embodiment.
   Committed, precompiled per xstatic (README §3, §7). Ported from mockup/index.html;
   self-contained (no Bootstrap). One column, always. One accent, used sparingly. */

:root {
  --lime: #F2F0E9;        /* limewash */
  --lime-2: #E9E6DC;
  --stone: #4A4740;
  --stone-soft: #7E7A70;
  --slate: #33353A;
  --edge: #CFCABA;
  --ochre: #8A6A3B;       /* the only accent */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lime);
  color: var(--stone);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 19px;        /* mobile-first: reading size, not UI size */
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--edge); color: var(--slate); }

@media (min-width: 768px) { body { font-size: 20px; } }

/* measure: one column, always. no grid of cards anywhere. */
.measure { max-width: 34rem; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 768px) { .measure { max-width: 36rem; } }

.util {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-soft);
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--ochre); outline-offset: 4px; }

/* ---------- site header (the name, plainly) ---------- */
.site-head { padding-block: 2rem 1rem; }
.name {
  font-size: 1rem; letter-spacing: .34em; text-transform: uppercase;
  font-family: "Inter Tight", sans-serif; font-weight: 400; color: var(--slate);
  text-decoration: none;
}

/* ---------- threshold (home hero) ---------- */
.threshold { padding-block: 2.5rem 1rem; }
.threshold .tagline { margin: 0 0 1rem; }
.threshold h1 {
  font-family: "EB Garamond", serif; font-weight: 400;
  font-size: clamp(2rem, 8.5vw, 2.9rem);
  line-height: 1.24; margin: 0; color: var(--slate);
}
.threshold h1 em { font-style: italic; }

/* the hero map: a coastline drawn firm on the left, the rest of the sheet blank —
   the site's whole argument, in one photograph. */
.hero-figure { margin: 2.25rem 0 0; }
.hero-figure img { display: block; width: 100%; height: auto; }

/* THE SIGNATURE: a line that draws its known part firmly, then admits its edge. */
.edge-mark { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--edge); position: relative; }
.edge-mark::after { content: ""; position: absolute; left: 0; top: -1px; width: 38%; height: 1px; background: var(--stone); }
.edge-note { margin: 0; font-size: .95rem; color: var(--stone-soft); }
.unknown { font-family: "EB Garamond", serif; font-style: italic; color: var(--ochre); font-size: 1.05rem; margin: .75rem 0 0; }

/* ---------- the corpus: a list, not a grid ---------- */
.corpus { padding-block: clamp(3rem, 10vw, 5rem); }
.sec-label { margin-bottom: 2rem; }

.work { display: block; text-decoration: none; color: inherit; padding: 1.75rem 0; border-bottom: 1px solid var(--edge); }
.work:first-of-type { border-top: 1px solid var(--edge); }
.work .seq { margin: 0; }
.work h2 { font-size: 1.5rem; font-weight: 400; margin: .4rem 0 .5rem; color: var(--slate); line-height: 1.3; }
.work .dek { margin: 0; color: var(--stone-soft); font-size: .95rem; }
.work:hover h2, .work:focus-visible h2 { color: var(--ochre); }
.seq { font-variant-numeric: tabular-nums; }

.corpus-foot { margin-top: 2rem; color: var(--edge); }

/* ---------- a section landing (Ask the Apostate) ---------- */
.section-title {
  font-family: "EB Garamond", serif; font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.22; color: var(--slate);
  margin: .5rem 0 1rem;
}
.section-intro { color: var(--stone-soft); font-size: 1.02rem; max-width: 32rem; margin: 0 0 1rem; }
.section-sub { margin: 0 0 2.75rem; }
.section-sub a { text-decoration: none; }
.section-sub a:hover { color: var(--ochre); }

.pagination { display: flex; gap: 1.5rem; margin-top: 2rem; }
.pagination a { color: var(--stone-soft); text-decoration: none; font-family: "Inter Tight", sans-serif; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.pagination a:hover { color: var(--ochre); }

/* ---------- an essay ---------- */
.essay { padding-block: 2.5rem clamp(3rem, 10vw, 5rem); }
.backlink { text-decoration: none; }
.backlink:hover { color: var(--ochre); }
.essay-head { margin: 1.5rem 0 2rem; }
.essay-head h1 {
  font-family: "EB Garamond", serif; font-weight: 400; font-style: normal;
  font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.24; color: var(--slate); margin: 0;
}

.essay-figure { margin: 0 0 2rem; }
.essay-figure img { display: block; width: 100%; height: auto; }

.prose { font-size: 1.08rem; color: var(--stone); }
.prose p { margin: 0 0 1.3rem; }
/* the first line, set as liturgy: a drop cap in the one accent. */
.prose > p:first-of-type::first-letter {
  float: left; font-size: 3.1rem; line-height: .86; padding: .25rem .55rem 0 0;
  color: var(--ochre); font-family: "EB Garamond", serif;
}
/* pages (about, the cornerstone) and theme intros share the essay's typography but
   not its liturgical drop cap — they open in a plainer, more expository register. */
.essay.page .prose > p:first-of-type::first-letter,
.theme-intro.prose > p:first-of-type::first-letter,
.essay.question .prose > p:first-of-type::first-letter,
.essay.liturgy .prose > p:first-of-type::first-letter {
  float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit;
}

/* ---------- a liturgy: the KJV register, set apart from the essays ---------- */
.essay.liturgy .essay-head::before {
  content: "A liturgy"; display: block;
  font-family: "Inter Tight", sans-serif; font-weight: 500;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ochre); margin-bottom: 1rem;
}
.essay.liturgy .essay-head h1 { font-style: italic; }
.essay.liturgy .prose { font-size: 1.1rem; line-height: 1.72; }
.essay.liturgy .prose p { margin: 0 0 1.5rem; }  /* verse spacing */
.prose em { font-style: italic; }

/* ---------- a question piece: the short answer, then the longer answer ----------
   The site's second article type. A searchable question, a liftable short answer
   set as a lead, then the essayistic dive under a quiet divider. */
.essay.question .essay-head h1 { font-size: clamp(1.45rem, 4.4vw, 2rem); }

/* the short answer: a lead with the one accent, not an essay opening */
.essay.question .prose > p:first-of-type {
  font-size: 1.18rem; line-height: 1.5; color: var(--slate);
  border-left: 2px solid var(--ochre); padding-left: 1.15rem; margin: 0 0 2.4rem;
}
.essay.question .prose > p:first-of-type strong {
  display: block; margin-bottom: .45rem;
  font-family: "Inter Tight", sans-serif; font-weight: 500;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ochre);
}

/* the divider into the deeper dive */
.essay.question .prose h2 {
  font-family: "Inter Tight", sans-serif; font-weight: 500;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone-soft);
  margin: 0 0 1.7rem; padding-top: 1.7rem; border-top: 1px solid var(--edge);
}

/* the longer answer opens with the liturgical drop cap the short answer forgoes */
.essay.question .prose h2 + p::first-letter {
  float: left; font-size: 3.1rem; line-height: .86; padding: .25rem .55rem 0 0;
  color: var(--ochre); font-family: "EB Garamond", serif;
}
.prose h2, .prose h3 { font-family: "EB Garamond", serif; font-weight: 500; color: var(--slate); line-height: 1.3; margin: 2.2rem 0 .8rem; }
.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.2rem; }
.prose blockquote { margin: 1.6rem 0; padding-left: 1.1rem; border-left: 2px solid var(--edge); color: var(--stone-soft); font-style: italic; }
.prose a { color: var(--ochre); text-decoration: none; border-bottom: 1px solid var(--edge); }
.prose a:hover { border-bottom-color: var(--ochre); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--lime-2); padding: .1em .35em; border-radius: 3px; }

/* the read-next module: conceptual anchors to sibling essays, not a bare list of
   "related posts". the note states the relationship; the title names the essay. */
.essay-related { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--edge); }
.rel-label { margin: 0 0 1.25rem; }
.rel-link { display: block; text-decoration: none; color: inherit; padding: 1rem 0; border-bottom: 1px solid var(--edge); }
.rel-link:first-of-type { border-top: 1px solid var(--edge); }
.rel-note { display: block; font-family: "EB Garamond", serif; font-style: italic; font-size: 1.15rem; color: var(--slate); line-height: 1.3; }
.rel-title { display: block; margin-top: .3rem; font-family: "Inter Tight", sans-serif; font-size: .8rem; letter-spacing: .06em; color: var(--stone-soft); }
.rel-link:hover .rel-note { color: var(--ochre); }

.essay-foot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; gap: 1rem; }
.tag-chip { text-decoration: none; }
.tag-chip:hover { color: var(--ochre); }

/* ---------- a theme page: authored intro above the essays ---------- */
.theme-intro { margin: 0 0 1rem; }
.theme-intro p { margin: 0 0 1.3rem; }
.theme-related { margin: 1.5rem 0 0; font-size: .95rem; }
.theme-related .util { margin-right: .5rem; }
.theme-related a { color: var(--ochre); text-decoration: none; border-bottom: 1px solid var(--edge); }
.theme-related a:hover { border-bottom-color: var(--ochre); }
.theme-related a + a { margin-left: .9rem; }
.essays-label { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--edge); }

/* ---------- by-theme index ---------- */
/* two territories, set apart: the embodiment work, and the separate preoccupation
   with the edge of what can be known. */
.theme-group { margin: 0 0 1.5rem; }
.theme-group + .theme-list + .theme-group,
.theme-list + .theme-group { margin-top: 3rem; }
.theme-list { list-style: none; padding: 0; margin: 0; }
.theme-list li { padding: 1.1rem 0; border-bottom: 1px solid var(--edge); font-size: 1.25rem; }
.theme-list li:first-child { border-top: 1px solid var(--edge); }
.theme-list a { color: var(--slate); text-decoration: none; }
.theme-list a:hover { color: var(--ochre); }
.theme-list .count { font-family: "Inter Tight", sans-serif; font-size: .75rem; color: var(--stone-soft); }

/* ---------- bands + footer ---------- */
.band { background: var(--lime-2); border-block: 1px solid var(--edge); }
.site-foot { margin-top: clamp(3rem, 10vw, 5rem); }
.site-foot .measure { padding-block: 3rem; }
.foot-name { display: block; font-size: .85rem; margin-bottom: 1.5rem; }
.foot-blurb { color: var(--stone-soft); font-size: .95rem; max-width: 30rem; margin: 0; }
.foot-links { display: flex; flex-direction: column; gap: .6rem; margin-top: 2rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--ochre); }

/* ---------- signup: quiet, one accent, one column ---------- */
.signup { margin-top: 2rem; }
.signup-note { margin: 0 0 1rem; color: var(--stone); }
.signup-label { display: block; margin-bottom: .5rem; }
.signup-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.signup-input {
  flex: 1 1 12rem; min-width: 0;
  font-family: "EB Garamond", Georgia, serif; font-size: 1rem; color: var(--stone);
  background: var(--lime); border: 1px solid var(--edge); border-radius: 0;
  padding: .55rem .7rem;
}
.signup-input::placeholder { color: var(--stone-soft); opacity: .8; }
.signup-input:focus-visible { outline: 1px solid var(--ochre); outline-offset: 2px; border-color: var(--ochre); }
.signup-btn {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lime); background: var(--ochre);
  border: 1px solid var(--ochre); border-radius: 0;
  padding: .55rem 1.15rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.signup-btn:hover { background: var(--slate); border-color: var(--slate); }
/* honeypot: off-screen, never shown to humans */
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.foot-legal { margin: 2.5rem 0 0; color: var(--edge); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }