/* public/site.css
   Orthodox Wisdom — styles for the home, conversation and About pages.
   Tokens from the Claude Design handoff: a warm parchment ground, ink text,
   and the accent used as a stroke only, never as a fill. Structure is carried
   by 1px hairlines, not by shadows or fills. */

:root {
  --ground: #f9ecd6;
  --panel: #fff7ea;
  --mat: #f0dfbb;
  --band: #f5dfb4;
  --ink: #201f1d;
  --ink-mid: #444141;
  --ink-soft: #5c5245;
  --ink-faint: #6b6155;
  --accent: #ab7a2d;
  --accent-text: #6c480d;
  --line: rgba(60, 42, 12, 0.26);
  --hair: rgba(60, 42, 12, 0.18);
  --hair-faint: rgba(60, 42, 12, 0.16);
  --accent-tint: rgba(171, 122, 45, 0.11);
  --radius-inner: 2px;
  --radius: 4px;
  --radius-overlay: 7px;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --reading: 'Cormorant Garamond', Garamond, Georgia, serif;
  --ui: 'Lora', Georgia, serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; flex-direction: column; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: #a06f24; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(171, 122, 45, 0.26); }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.overlay-open { overflow: hidden; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px 44px; border-bottom: 1px solid var(--hair);
}
.wordmark { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.wordmark:hover { color: inherit; }
/* No font-family here, on purpose: the glyph falls back to the system serif. */
.wordmark-cross { font-size: 84px; line-height: 0.8; color: var(--accent); }
.wordmark-name {
  font-family: var(--display); font-weight: 500; font-size: 23px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; font-family: var(--ui); font-size: 13px; line-height: 1.3;
  border-radius: var(--radius); padding: 9px 18px; background: transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.btn-neutral { color: var(--ink-soft); border: 1px solid var(--line); }
.btn-neutral:hover { border-color: var(--accent); color: var(--ink); }
.btn-accent { color: var(--accent-text); border: 1px solid var(--accent); padding: 9px 20px; letter-spacing: 0.03em; }
.btn-accent:hover { background: var(--accent-tint); color: var(--accent-text); }

/* ── Shared type ────────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--ui); font-weight: 400; font-size: 11.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px;
}
.section-label {
  font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 12px;
}

/* ── Home ───────────────────────────────────────────────────────────────── */
.home { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 48px 44px 60px; }
.home-intro { text-align: center; margin-bottom: 38px; }
.lede {
  font-family: var(--reading); font-style: italic; font-weight: 400; font-size: 27px; line-height: 1.45;
  color: var(--ink-mid); margin: 0 auto; max-width: 560px;
}
.fathers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 48px; }
.father-card {
  display: block; width: 100%; padding: 16px 12px 14px; background: transparent; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.18s ease;
}
.father-card:hover { border-color: var(--accent); }
/* The 3px top rule is paid for by 2px less padding, so the grid never shifts. */
.father-card[aria-pressed="true"] { border-color: var(--accent); border-top: 3px solid var(--accent); padding-top: 14px; }
.portrait {
  display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-inner); overflow: hidden;
  background: var(--mat); border: 1px solid var(--hair-faint);
}
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.father-name {
  display: block; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  line-height: 1.5; text-transform: uppercase; color: var(--ink); padding: 14px 4px 0; text-align: center;
}
.father-rule { display: block; width: 28px; height: 1px; background: rgba(32, 31, 29, 0.2); margin: 12px auto; }
.father-blurb {
  display: block; font-family: var(--reading); font-style: normal; font-size: 18px; line-height: 1.45;
  color: var(--ink-soft); padding: 0 6px 4px; text-align: center;
}
/* "In the manner of" sits on its own line, so the capitalized phrase after it reads as a second sentence. */
.father-blurb em { display: block; font-style: italic; }
.father-selected {
  display: block; min-height: 14px; margin-top: 2px; text-align: center; font-family: var(--ui);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text);
}
.father-card:not([aria-pressed="true"]) .father-selected { visibility: hidden; }

/* ── The question box (moves between home and conversation) ──────────────── */
.ask-wrap { max-width: 760px; margin: 0 auto; }
.ask-shell {
  display: flex; align-items: flex-end; gap: 18px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  transition: border-color 0.15s ease;
}
.ask-shell:focus-within { border-color: var(--accent); }
.ask-shell textarea {
  flex: 1; min-width: 0; max-height: 120px; background: transparent; border: 0; outline: none; resize: none;
  font-family: var(--reading); font-size: 22px; line-height: 1.6; color: var(--ink); padding: 4px 0;
}
.ask-shell textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.ask-button {
  align-self: flex-end; font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text); background: transparent; border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 12px 28px; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease;
}
.ask-button:hover:not(:disabled) { background: var(--accent-tint); }
.ask-button:disabled { opacity: 0.45; cursor: not-allowed; }
.home-disclaimer {
  text-align: center; font-family: var(--reading); font-style: italic; font-size: 19px; color: var(--ink-soft);
  margin: 14px 0 34px;
}
.openings { border-top: 1px solid var(--hair); padding-top: 22px; }
.openings .section-label { text-align: center; font-size: 11px; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  font-family: var(--ui); font-size: 13px; color: var(--ink-mid); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 18px; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.chip:hover { border-color: var(--accent); background: var(--accent-tint); }
.more-toggle {
  align-self: center; font-family: var(--ui); font-size: 13.5px; color: var(--accent-text); background: transparent;
  border: 0; border-bottom: 1px solid rgba(171, 122, 45, 0.55); padding: 0 2px 3px; margin: 8px 6px; cursor: pointer;
}
.more-toggle:hover { border-bottom-color: var(--accent); }

/* ── Conversation ───────────────────────────────────────────────────────── */
.chat { flex: 1; display: flex; flex-direction: column; }
.rail { background: var(--band); border-bottom: 1px solid var(--hair); }
.rail-inner { max-width: 900px; margin: 0 auto; padding: 11px 44px; display: flex; align-items: center; gap: 16px; }
.rail-label {
  font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.rail-tiles { display: flex; gap: 8px; }
.rail-tile {
  width: 36px; height: 48px; padding: 0; overflow: hidden; cursor: pointer; opacity: 0.55;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-inner);
  transition: border-color 0.15s ease;
}
.rail-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rail-tile:hover { border-color: var(--accent); }
.rail-tile[aria-pressed="true"] { opacity: 1; border-color: var(--accent); }
.rail-name {
  font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink);
}
.thread { width: 100%; max-width: 900px; margin: 0 auto; padding: 40px 44px 8px; }
.followup { width: 100%; max-width: 900px; margin: 0 auto; padding: 28px 44px 64px; }
.exchange + .exchange { margin-top: 64px; }
.question { display: flex; justify-content: flex-end; margin-bottom: 34px; }
.question-bubble {
  max-width: 66%; margin: 0; padding: 15px 20px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); font-family: var(--reading); font-size: 20px; line-height: 1.55;
  color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.answer { animation: owFade 0.5s ease; }
@keyframes owFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.attribution {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.attribution-portrait {
  width: 50px; height: 68px; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-inner);
  background: var(--mat); border: 1px solid var(--line);
}
.attribution-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.attribution-cross { display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--accent); }
.attribution-name {
  margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
}
.attribution-note { margin: 5px 0 0; font-family: var(--ui); font-size: 12px; color: var(--ink-soft); }
.prose p {
  font-family: var(--reading); font-size: 23px; line-height: 1.72; color: var(--ink); margin: 0 0 18px;
  text-align: justify; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  animation: owFade 0.5s ease;
}
.stream-cursor {
  display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom;
  background: var(--accent); animation: blink 0.8s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.loading { display: flex; align-items: center; gap: 16px; padding: 6px 0 10px; }
.quill-wrap { position: relative; display: block; width: 36px; height: 36px; flex-shrink: 0; }
.quill-svg { width: 36px; height: 36px; animation: quillRock 1.8s ease-in-out infinite; transform-origin: 80% 80%; }
@keyframes quillRock {
  0% { transform: rotate(-8deg); } 30% { transform: rotate(4deg); } 60% { transform: rotate(-6deg); }
  80% { transform: rotate(3deg); } 100% { transform: rotate(-8deg); }
}
.ink-dot {
  position: absolute; right: 4px; bottom: 2px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); animation: inkDrop 1.8s ease-in-out infinite;
}
@keyframes inkDrop {
  0%, 60% { opacity: 0; transform: scale(0); } 75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0) translateY(3px); }
}
.answer-extras:empty { display: none; }
.answer-extras { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 4px 0 8px; }
.answer-error {
  margin: 0; padding: 12px 18px; border-left: 2px solid var(--accent); font-family: var(--reading);
  font-style: italic; font-size: 20px; line-height: 1.55; color: var(--ink-mid);
}
.continue-button {
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.06em; color: var(--accent-text);
  background: transparent; border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 9px 18px; cursor: pointer; transition: background-color 0.15s ease;
}
.continue-button:hover:not(:disabled) { background: var(--accent-tint); }
.continue-button:disabled { opacity: 0.5; cursor: default; }
/* Never conditional: it closes every reply, between the prose and the citations. */
.answer-disclaimer {
  margin: 26px 0 0; padding: 14px 18px; border-left: 2px solid var(--accent); background: rgba(171, 122, 45, 0.07);
  font-family: var(--reading); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink-soft);
}
.citations { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hair); }
.citation-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.citation {
  max-width: 100%; text-align: left; font-family: var(--ui); font-size: 12.5px; line-height: 1.4;
  color: var(--accent-text); background: transparent; border: 1px solid rgba(171, 122, 45, 0.6);
  border-radius: var(--radius); padding: 8px 15px; cursor: pointer; font-feature-settings: 'tnum';
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.citation:hover:not(:disabled) { background: var(--accent-tint); border-color: var(--accent); }
.citation:disabled { cursor: default; opacity: 0.6; }
.citation.secondary { border-style: dashed; font-style: italic; }
.share-button {
  margin-left: auto; font-family: var(--ui); font-size: 12.5px; color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 15px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.share-button:hover { border-color: var(--accent); color: var(--accent-text); }
.switch-note {
  display: flex; align-items: center; gap: 14px; margin: 56px 0 0; font-family: var(--ui); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
}
.switch-note::before, .switch-note::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.switch-note + .exchange { margin-top: 40px; }

/* The platform's own "I'm new here" reply */
.prose.intro p, .intro-list li { font-size: 21px; line-height: 1.65; }
.intro-list { list-style: none; margin: 0 0 18px; padding: 0; }
.intro-list li {
  position: relative; margin: 0 0 12px; padding-left: 26px; font-family: var(--reading); color: var(--ink);
}
.intro-list li::before { content: ''; position: absolute; left: 2px; top: 0.85em; width: 12px; height: 1px; background: var(--accent); }
.intro-list strong { font-weight: 600; }
.prose .intro-closer { font-style: italic; color: var(--ink-soft); }

/* ── Overlays: the source viewer and the share card ─────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  padding: 32px; background: rgba(45, 43, 43, 0.5);
}
.overlay-share { z-index: 950; background: rgba(45, 43, 43, 0.55); }
.viewer {
  display: flex; flex-direction: column; width: 100%; max-width: 660px; max-height: 86vh; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-overlay);
  box-shadow: 0 12px 32px rgba(45, 43, 43, 0.22);
}
.viewer-head { padding: 26px 34px 20px; border-bottom: 1px solid var(--hair); }
.viewer-kicker {
  margin: 0 0 10px; font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-text);
}
.viewer-title {
  margin: 0 0 6px; font-family: var(--reading); font-weight: 600; font-size: 26px; line-height: 1.28; color: var(--ink);
}
.viewer-sub { margin: 0; font-family: var(--ui); font-style: italic; font-size: 13px; color: var(--ink-soft); font-feature-settings: 'tnum'; }
.viewer-body { padding: 26px 34px; overflow-y: auto; overscroll-behavior: contain; }
.viewer-body .passage {
  margin: 0 0 16px; font-family: var(--reading); font-size: 21px; line-height: 1.72; color: var(--ink);
  text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}
.viewer-body.letter .passage + .passage { text-indent: 1.5em; }
.excerpt-note { margin: 20px 0 0; font-family: var(--ui); font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.source-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
.source-block .label {
  margin: 0 0 14px; font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-text);
}
.source-row { display: flex; gap: 18px; margin-bottom: 8px; }
.source-key {
  flex: 0 0 92px; padding-top: 3px; font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.source-value { flex: 1; font-family: var(--ui); font-size: 14px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.viewer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 34px;
  border-top: 1px solid var(--hair);
}
.viewer-foot-note { font-family: var(--reading); font-style: italic; font-size: 17px; color: var(--ink-soft); }
.close-button, .share-native {
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text); background: transparent; border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 10px 24px; cursor: pointer; transition: background-color 0.15s ease;
}
.close-button:hover, .share-native:hover { background: var(--accent-tint); }
.share-card {
  width: 100%; max-width: 440px; padding: 38px 36px 28px; text-align: center; background: var(--panel);
  border: 1px solid var(--accent); border-radius: var(--radius-overlay); box-shadow: 0 12px 32px rgba(45, 43, 43, 0.24);
}
.share-cross { margin-bottom: 16px; font-size: 56px; line-height: 0.9; color: var(--accent); }
.share-quote {
  margin: 0 0 24px; text-align: left; font-family: var(--reading); font-style: italic; font-size: 23px;
  line-height: 1.65; color: var(--ink);
}
.share-rule { width: 44px; height: 1px; margin: 0 auto 18px; background: var(--accent); }
.share-name {
  margin: 0 0 6px; font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink);
}
.share-url {
  margin: 0 0 28px; font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.share-copy {
  font-family: var(--ui); font-size: 12.5px; color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 22px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.share-copy:hover { border-color: var(--accent); }
.share-native { letter-spacing: 0.14em; padding: 11px 24px; }

/* ── About ──────────────────────────────────────────────────────────────── */
.about { width: 100%; max-width: 760px; margin: 0 auto; padding: 56px 44px 84px; }
.about .kicker { font-size: 11.5px; letter-spacing: 0.2em; margin-bottom: 16px; font-feature-settings: 'tnum'; }
.about-title {
  margin: 0 0 26px; font-family: var(--reading); font-weight: 400; font-size: 52px; line-height: 1.14;
  letter-spacing: -0.01em; color: var(--ink);
}
.about-rule { width: 56px; height: 1px; margin-bottom: 26px; background: var(--accent); }
.about-text {
  margin: 0 0 18px; font-family: var(--ui); font-size: 16px; line-height: 1.85; color: var(--ink-mid);
  text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}
.stats {
  display: flex; flex-wrap: wrap; gap: 52px; margin: 40px 0 44px; padding: 22px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.stat { display: flex; flex-direction: column-reverse; margin: 0; }
.stat dd {
  margin: 0; font-family: var(--ui); font-size: 31px; font-weight: 400; line-height: 1; color: var(--accent-text);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat dt {
  margin-top: 8px; font-family: var(--ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.about-section { padding: 26px 0; border-top: 1px solid var(--hair); scroll-margin-top: 16px; }
.about-section h2 {
  margin: 0 0 12px; font-family: var(--display); font-weight: 600; font-size: 13.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-text);
}
.about-section p {
  margin: 0; font-family: var(--ui); font-size: 16px; line-height: 1.85; color: var(--ink-mid);
  text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}
.about-section p + p { margin-top: 14px; }
.about-text u { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── About: the September 2026 milestone ───────────────────────────────────
   Emphasis, not categories: the gold is the story (translated for this
   project), the warm gray is context (the 19th-century NPNF). Checked with the
   dataviz validator on the parchment ground: the pair is 21.7 apart for full
   color vision and 21.1 under deuteranopia; the gray is faint (1.5:1), so every
   bar also states its figures in words. */
.about-section .milestone-mark {
  margin: 0 0 8px; font-family: var(--ui); font-size: 11px; line-height: 1.4; letter-spacing: 0.2em;
  text-transform: uppercase; text-align: left; color: var(--accent-text); font-feature-settings: 'tnum';
}
.chart { margin: 26px 0 28px; padding: 22px 24px 20px; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius); }
.chart-caption { margin: 0 0 12px; font-family: var(--ui); font-size: 14px; line-height: 1.5; color: var(--ink); }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; padding: 0; list-style: none;
  font-family: var(--ui); font-size: 12.5px; line-height: 1.4; color: var(--ink-soft);
}
.chart-legend li { display: flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: var(--radius-inner); flex: none; }
.swatch-new, .seg-new { background: var(--accent); }
.swatch-old, .seg-old { background: #cdc2ad; }
/* Each row is its own grid: the Father and his share of his known writings on
   the left, the bar (his words in the collection) and its figures on the
   right. The share sits by the name, not the bar, because it measures
   something else: Gregory's short bar is 95% of what he wrote. */
.chart-rows { display: flex; flex-direction: column; gap: 16px; }
.chart-row {
  display: grid; grid-template-columns: 196px 1fr; grid-template-areas: "name bar" "share figure";
  column-gap: 16px; row-gap: 2px; align-items: center;
}
.chart-name { grid-area: name; font-family: var(--reading); font-size: 18px; line-height: 1.2; color: var(--ink); }
.chart-share {
  grid-area: share; align-self: baseline; font-family: var(--ui); font-size: 12.5px; line-height: 1.3;
  color: var(--ink-soft);
}
.chart-share strong {
  font-family: var(--ui); font-weight: 600; font-size: 19px; color: var(--accent-text);
  font-variant-numeric: lining-nums tabular-nums;
}
.bar {
  grid-area: bar; display: flex; gap: 2px; width: var(--w); min-width: 6px; height: 14px;
  border-left: 1px solid var(--line);
}
.seg { flex: var(--part) 1 0; min-width: 2px; height: 100%; }
.seg:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.chart-figure {
  grid-area: figure; align-self: baseline; margin: 0; font-family: var(--ui); font-size: 13px; line-height: 1.4;
  color: var(--ink-soft); font-feature-settings: 'tnum';
}
.about-section .chart-note {
  margin: 20px 0 0; font-family: var(--ui); font-size: 13px; line-height: 1.6; color: var(--ink-soft); text-align: left;
}
.about-section .milestone-subhead {
  margin-top: 24px; font-family: var(--display); font-weight: 600; font-size: 12px; line-height: 1.4;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: left; color: var(--accent-text);
}
.milestone-list { margin: 10px 0 0; padding: 0 0 0 20px; font-family: var(--ui); font-size: 16px; line-height: 1.75; color: var(--ink-mid); }
.milestone-list li + li { margin-top: 6px; }
.milestone-list li::marker { color: var(--accent); }
.about-section .milestone-note { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); font-style: italic; }
/* What the corpus holds: one list per Father, each item a kind of writing. */
.corpus-father { margin-top: 22px; }
.about-section .corpus-name {
  margin: 0 0 8px; font-family: var(--reading); font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--ink);
}
.corpus-share {
  display: block; margin-top: 2px; font-family: var(--ui); font-weight: 400; font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-text); font-feature-settings: 'tnum';
}
.corpus-list { margin: 0; padding: 0 0 0 20px; font-family: var(--ui); font-size: 15.5px; line-height: 1.75; color: var(--ink-mid); }
.corpus-list li + li { margin-top: 8px; }
.corpus-list li::marker { color: var(--accent); }
.corpus-list strong { font-weight: 600; color: var(--ink); }
.corpus-list .corpus-missing { color: var(--ink-soft); font-style: italic; }
.corpus-list .corpus-missing strong { font-style: normal; color: var(--ink-soft); }
.corpus-list .corpus-missing em { font-style: normal; }
.corpus-father + p { margin-top: 26px; }
@media (max-width: 640px) {
  .chart { padding: 18px 16px 14px; }
  .chart-row { grid-template-columns: 1fr; grid-template-areas: "name" "share" "bar" "figure"; row-gap: 2px; }
  .bar { margin: 6px 0 2px; }
  .corpus-list { font-size: 15px; }
}

.noscript { max-width: 760px; margin: 24px auto 0; padding: 0 20px; font-family: var(--reading); font-size: 20px; text-align: center; }

/* ── Small screens: two columns, nothing fixed, the rail stays a row ─────── */
@media (max-width: 640px) {
  .site-header { padding: 12px 20px; gap: 12px; }
  .wordmark { gap: 10px; }
  .wordmark-cross { font-size: 57px; }
  .wordmark-name { font-size: 15px; letter-spacing: 0.12em; }
  .header-actions { gap: 6px; }
  .btn, .btn-accent { font-size: 9.5px; padding: 5px 9px; letter-spacing: 0.02em; }
  .home { padding: 32px 20px 44px; }
  .lede { font-size: 22px; }
  .fathers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 36px; }
  .father-blurb { font-size: 16px; }
  .ask-shell { gap: 12px; padding: 14px; }
  .ask-shell textarea { font-size: 19px; }
  .ask-button { padding: 11px 16px; }
  .home-disclaimer { font-size: 17px; }
  .rail-inner { padding: 10px 20px; gap: 10px; flex-wrap: wrap; }
  .rail-name { flex-basis: 100%; font-size: 12px; }
  .thread { padding: 28px 20px 8px; }
  .followup { padding: 24px 20px 48px; }
  .question-bubble { max-width: 84%; font-size: 18px; }
  .attribution-name { font-size: 15px; }
  .prose p, .prose.intro p, .intro-list li { font-size: 19px; }
  .answer-disclaimer { font-size: 17px; }
  .share-button { margin-left: 0; }
  .overlay { padding: 12px; }
  .viewer { max-height: 92vh; }
  .viewer-head, .viewer-body, .viewer-foot { padding-left: 20px; padding-right: 20px; }
  .viewer-title { font-size: 22px; }
  .viewer-body .passage { font-size: 19px; }
  .source-row { flex-direction: column; gap: 2px; }
  .source-key { flex: none; }
  .share-card { padding: 30px 22px 22px; }
  .share-quote { font-size: 20px; }
  .about { padding: 36px 20px 56px; }
  .about-title { font-size: 36px; }
  .stats { gap: 24px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Contact form ───────────────────────────────────────────────────────── */
.contact-form { display: flex; flex-direction: column; gap: 18px; margin: 26px 0 30px; }
.contact-field { display: flex; flex-direction: column; gap: 7px; }
.contact-label {
  font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-text);
}
.contact-field input, .contact-field textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font-family: var(--reading); font-size: 19px; line-height: 1.55;
  color: var(--ink); transition: border-color 0.15s ease;
}
.contact-field textarea { resize: vertical; min-height: 150px; }
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--accent); }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.contact-actions .ask-button[disabled] { opacity: 0.55; cursor: default; }
.contact-status { margin: 0; font-family: var(--ui); font-size: 14px; line-height: 1.6; color: var(--ink-faint); }
.contact-error { color: #8a2f22; }
.contact-sent { font-family: var(--reading); font-size: 20px; color: var(--ink-mid); }

@media (max-width: 640px) {
  .contact-form { gap: 14px; }
  .contact-field input, .contact-field textarea { font-size: 17px; padding: 10px 12px; }
  .contact-actions { gap: 12px; }
}