/* ==========================================================================
   File     : www/assets/css/site.css
   Project  : articulatefaith-library
   Version  : 0.2.0
   Date     : 2026-10-14
   Changes  : 0.2.0 Replaced TBSS navy palette with Vellum & Oxblood (warm
              paper, oxblood accent, warm-ink headings). Renamed --navy,
              --navy-deep, --navy-mute to role names --accent, --ink,
              --accent-mute; added --accent-deep for the steel-man rule.
              Assessment block now ink-dark with rose links, replacing the
              gold link colour that sat too close to semantic amber.
              0.1.0 Initial. Tokens, apparatus rail, entry render, landing.
   --------------------------------------------------------------------------
   Design note. The apparatus is the subject of this site, so it gets
   permanent screen real estate rather than a footer. Amber is reserved as a
   semantic colour: it means "not yet satisfied / verification outstanding".
   It is never used decoratively. If amber appears, something is unverified.
   ========================================================================== */

:root {
  /* Palette: Vellum & Oxblood. Deliberately distinct from the TBSS navy so
     the library reads as a scholarly publication, not an IT product. Oxblood
     is for headings, rules and links only, never alerts: it must not compete
     with amber as a status signal. */
  --accent:      #7A1F2B;
  --accent-deep: #5C1520;
  --accent-mute: #6B5A55;
  --ink:         #2A2522;
  --amber:       #F0A500;
  --amber-deep:  #9A6B00;
  --amber-wash:  #FFF6E0;

  --paper:       #FAF7F0;
  --paper-alt:   #F2EDE2;
  --paper-sunk:  #E9E2D3;
  --rule:        #DDD4C4;
  --rule-strong: #B8AC98;

  --text:        #2E2926;
  --text-mute:   #6B625A;

  --ok:          #2E6B4F;
  --ok-wash:     #EAF3EE;

  /* Calibri is the TBSS brand face; Carlito is metric-compatible and is what
     Linux/Android users will actually get. No webfonts: page speed is an SEO
     commitment in the kickoff, and scholars are not an audience that rewards
     a 300kb font payload. */
  --ui:   Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
  --read: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --measure: 34rem;         /* ~68 characters at the reading size */
  --rail: 16.5rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--accent); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 1px;
}

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 50;
}
.skip:focus { left: 0; }

/* ---------- masthead ---------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead__inner {
  max-width: 68rem; margin: 0 auto; padding: .9rem 1.25rem;
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--read);
  font-size: 1.25rem; letter-spacing: .01em;
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.wordmark span { font-weight: 400; color: var(--accent-mute); }
.masthead nav { margin-left: auto; display: flex; gap: 1.25rem; font-size: .92rem; }
.masthead nav a { color: var(--accent-mute); text-decoration: none; }
.masthead nav a:hover,
.masthead nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* ---------- generic page furniture -------------------------------------- */

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; }

h1, h2, h3 { font-family: var(--read); color: var(--ink); line-height: 1.2; font-weight: 600; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2.4rem 0 .7rem; }
h3 { font-size: 1.08rem; margin: 1.6rem 0 .4rem; font-family: var(--ui); font-weight: 700; color: var(--accent); }

.lede { font-family: var(--read); font-size: 1.16rem; line-height: 1.55; color: var(--text); }

.sitefoot {
  margin-top: 4rem; border-top: 1px solid var(--rule);
  background: var(--paper-alt); color: var(--text-mute);
  font-size: .86rem;
}
.sitefoot .wrap { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.sitefoot p { max-width: 42rem; }

/* ---------- status markers (the three) ---------------------------------- */

.markers { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.marker {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .55rem;
  align-items: start; font-size: .84rem; line-height: 1.35;
}
.marker__box {
  width: 1.1rem; height: 1.1rem; border-radius: 2px; margin-top: .1rem;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  border: 1.5px solid var(--rule-strong); background: var(--paper);
  color: transparent;
}
.marker--met .marker__box { border-color: var(--ok); background: var(--ok-wash); color: var(--ok); }
.marker--unmet .marker__box { border-color: var(--amber); background: var(--amber-wash); }
.marker__name { font-weight: 600; color: var(--ink); }
.marker--unmet .marker__name { color: var(--amber-deep); }
.marker__note { color: var(--text-mute); display: block; }

/* ---------- apparatus rail ---------------------------------------------- */

.entrygrid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-top: 2rem;
}
@media (min-width: 62rem) {
  .entrygrid { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 3.5rem; }
  .rail { position: sticky; top: 1.5rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; }
}

.rail { font-size: .86rem; }
.rail section { padding: 0 0 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
.rail section:last-child { border-bottom: 0; }
.rail h2 {
  font-family: var(--ui); font-size: .76rem; letter-spacing: .04em;
  color: var(--text-mute); margin: 0 0 .5rem; font-weight: 700;
}
.rail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; }
.rail dt { color: var(--text-mute); }
.rail dd { margin: 0; color: var(--ink); }
.rail__id {
  font-family: var(--read); font-size: 1.5rem; color: var(--ink);
  display: block; margin-bottom: .1rem;
}
.rail__type { color: var(--text-mute); display: block; margin-bottom: 1rem; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rail ol a { color: var(--accent); text-decoration: none; }
.rail ol a:hover { text-decoration: underline; }

.tierctl { display: grid; gap: .35rem; }
.tierctl label { color: var(--text-mute); }
.tierctl select { font-family: var(--ui); font-size: .86rem; padding: .25rem; border: 1px solid var(--rule-strong); background: var(--paper); border-radius: 2px; }

/* ---------- entry body -------------------------------------------------- */

.entry { max-width: var(--measure); }
.entry__head { margin-bottom: 2rem; }
.entry__title { font-size: 2.05rem; margin-bottom: .4rem; }
.entry__standfirst { font-family: var(--read); font-size: 1.1rem; color: var(--text-mute); line-height: 1.5; margin: 0; }

.section { margin: 2.75rem 0; }
.section__kind {
  font-size: .78rem; color: var(--text-mute); margin: 0 0 .15rem;
}
.section > h2 { margin-top: 0; }
.section p, .section li { font-family: var(--read); line-height: 1.62; }
.section p { margin: 0 0 1.05em; }
.section ul { padding-left: 1.1rem; margin: 0 0 1.05em; }
.section li { margin-bottom: .5em; }

/* Documentary vs interpretive separated structurally, per C-5. The rule on
   the left is the structural signal; the label names it in words. */
.section--documentary { border-left: 3px solid var(--accent); padding-left: 1.25rem; }
.section--interpretive { border-left: 3px solid var(--rule-strong); padding-left: 1.25rem; }
.section--documentary .section__kind { color: var(--accent); }

.section--steelman {
  background: var(--paper-alt); padding: 1.35rem 1.5rem; border-radius: 3px;
  border-left: 3px solid var(--accent-deep);
}
.section--steelman .section__kind { color: var(--accent-deep); font-weight: 700; }

.section--self-discipline {
  border-left: 3px solid var(--amber); padding-left: 1.25rem;
}
.section--self-discipline .section__kind { color: var(--amber-deep); font-weight: 700; }

.section--assessment {
  background: var(--ink); color: #F3EDE4; padding: 1.5rem 1.6rem; border-radius: 3px;
}
.section--assessment h2, .section--assessment .section__kind { color: #fff; }
.section--assessment a { color: #E9B8BC; }

blockquote.voice {
  margin: 0 0 1.05em; padding: 1rem 1.25rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent-mute);
  background: var(--paper);
}
blockquote.voice > .voice__who {
  font-family: var(--ui); font-size: .84rem; font-weight: 700;
  color: var(--ink); margin: 0 0 .1rem;
}
blockquote.voice > .voice__src {
  font-family: var(--ui); font-size: .8rem; color: var(--text-mute); margin: 0 0 .7rem;
}

/* ---------- claim level (C-15) ------------------------------------------ */

.claims { display: grid; gap: .6rem; margin: 0 0 1.05em; padding: 0; list-style: none; }
.claim { border: 1px solid var(--rule); border-radius: 3px; padding: .8rem 1rem; }
.claim__level {
  font-size: .76rem; font-weight: 700; letter-spacing: .03em;
  display: inline-block; padding: .1rem .45rem; border-radius: 2px; margin-bottom: .35rem;
}
.claim--derivable  .claim__level { background: var(--ok-wash); color: var(--ok); }
.claim--available  .claim__level { background: var(--paper-sunk); color: var(--ink); }
.claim--read-into  .claim__level { background: var(--amber-wash); color: var(--amber-deep); }
.claim p { margin: 0; font-family: var(--read); }
.claim__note { font-family: var(--ui) !important; font-size: .86rem; color: var(--text-mute); margin-top: .4rem !important; }

/* ---------- objections (C-12 / C-14) ------------------------------------ */

.objection {
  border: 1px solid var(--rule); border-radius: 3px;
  margin: 0 0 1rem; padding: 1rem 1.15rem;
}
.objection__bar { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.objection__label { font-size: .78rem; font-weight: 700; color: var(--ink); }
.strength { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-mute); }
.strength__pips { display: flex; gap: 2px; }
.strength__pip { width: 9px; height: 9px; border-radius: 1px; background: var(--paper-sunk); border: 1px solid var(--rule-strong); }
.strength__pip--on { background: var(--accent); border-color: var(--accent); }
.strength--5 .strength__pip--on { background: var(--amber); border-color: var(--amber-deep); }
.objection__text { font-family: var(--read); margin: 0 0 .8rem; }
.objection__response { font-family: var(--read); margin: 0; padding-top: .8rem; border-top: 1px dashed var(--rule); }
.objection__response::before {
  content: "Response"; display: block; font-family: var(--ui);
  font-size: .78rem; font-weight: 700; color: var(--text-mute); margin-bottom: .25rem;
}

/* ---------- citations and links ----------------------------------------- */

/* External citation markers are superscript numerals resolved at render time
   from the citations collection. Body text never carries hand-authored
   anchors — see docs/link-policy.md for why. */
a.citemark {
  font-family: var(--ui); font-size: .68em; vertical-align: super;
  line-height: 0; text-decoration: none; color: var(--accent);
  padding: 0 .1em; font-weight: 700;
}
a.citemark:hover { text-decoration: underline; }

/* Internal cross-reference: solid underline, stays in the library. */
a.xref {
  color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
/* External link in prose (rare): dotted underline signals "leaves the site". */
a.ext {
  color: var(--accent); text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.references { margin-top: 3rem; padding-top: 1.25rem; border-top: 2px solid var(--accent); }
.references ol { padding-left: 1.6rem; margin: 0; }
.references li { margin-bottom: .85rem; font-size: .92rem; line-height: 1.45; }
.ref__tier {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: .05rem .35rem; border-radius: 2px; margin-right: .4rem;
  background: var(--paper-sunk); color: var(--ink);
}
.ref__tier--primary { background: var(--accent); color: #fff; }
.ref__tier--tradition-internal { background: var(--accent-mute); color: #fff; }
.ref__meta { color: var(--text-mute); font-size: .84rem; display: block; margin-top: .15rem; }
.ref__unverified { color: var(--amber-deep); font-weight: 600; }
.ref__archive { color: var(--text-mute); }

/* ---------- glossary popover -------------------------------------------- */

button.gloss {
  font: inherit; background: none; border: 0; padding: 0; cursor: help;
  color: inherit; border-bottom: 1px dashed var(--accent-mute);
}
button.gloss:hover { border-bottom-style: solid; }

.glosspop {
  position: absolute; z-index: 40; max-width: 22rem;
  background: var(--paper); border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--accent); border-radius: 3px;
  box-shadow: 0 6px 20px rgba(42, 37, 34, .16);
  padding: .9rem 1rem; font-family: var(--ui); font-size: .88rem; line-height: 1.45;
}
.glosspop[hidden] { display: none; }
.glosspop h3 { margin: 0 0 .1rem; font-size: 1rem; font-family: var(--read); color: var(--ink); }
.glosspop .glosspop__pron { color: var(--text-mute); font-size: .82rem; margin: 0 0 .5rem; }
.glosspop p { margin: 0 0 .5rem; }
.glosspop .glosspop__etym { color: var(--text-mute); font-size: .82rem; margin: 0; }
.glosspop__close { position: absolute; top: .35rem; right: .5rem; background: none; border: 0; cursor: pointer; color: var(--text-mute); font-size: 1.1rem; line-height: 1; }

/* ---------- open items / changelog -------------------------------------- */

.openitems { background: var(--amber-wash); border: 1px solid #F2DDA8; border-radius: 3px; padding: 1.1rem 1.3rem; margin: 2.5rem 0 0; }
.openitems h2 { margin-top: 0; font-size: 1.05rem; font-family: var(--ui); color: var(--amber-deep); }
.openitems ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.openitems li { margin-bottom: .4rem; }

details.changelog { margin-top: 1.5rem; font-size: .9rem; }
details.changelog summary { cursor: pointer; color: var(--accent); }
details.changelog table { border-collapse: collapse; margin-top: .7rem; width: 100%; }
details.changelog th, details.changelog td { text-align: left; padding: .35rem .6rem .35rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
details.changelog th { color: var(--text-mute); font-weight: 600; }

/* ---------- landing ----------------------------------------------------- */

.hero { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--rule); }
.hero__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: minmax(0,1fr) 18rem; gap: 4rem; } }
.hero h1 { font-size: 2.5rem; max-width: 18ch; }
.hero .lede { max-width: var(--measure); }
.hero__apparatus {
  border: 1px solid var(--rule); border-radius: 3px; padding: 1.1rem 1.25rem;
  background: var(--paper-alt); align-self: start;
}
.hero__apparatus h2 { font-family: var(--ui); font-size: .82rem; color: var(--text-mute); margin: 0 0 .6rem; font-weight: 700; }
.hero__apparatus p { font-size: .84rem; color: var(--text-mute); margin: .75rem 0 0; }

.curator {
  display: grid; gap: .3rem; padding: 1.25rem 0 0; margin-top: 1.5rem;
  border-top: 1px solid var(--rule); max-width: var(--measure);
}
.curator strong { color: var(--ink); }
.curator span { color: var(--text-mute); font-size: .92rem; }

.entrycards { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .entrycards { grid-template-columns: 1fr 1fr; } }
.entrycard {
  border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  padding: 1.25rem 1.35rem; display: grid; gap: .5rem; align-content: start;
}
.entrycard__id { font-size: .8rem; color: var(--text-mute); }
.entrycard h3 { margin: 0; font-family: var(--read); font-size: 1.22rem; color: var(--ink); font-weight: 600; }
.entrycard h3 a { color: inherit; text-decoration: none; }
.entrycard h3 a:hover { text-decoration: underline; }
.entrycard p { margin: 0; font-size: .95rem; color: var(--text); }
.entrycard .markers { margin-top: .5rem; }

.notlist { display: grid; gap: 1.1rem; margin: 1rem 0 0; padding: 0; list-style: none; max-width: 44rem; }
.notlist li { padding-left: 1.5rem; position: relative; }
.notlist li::before {
  content: "—"; position: absolute; left: 0; color: var(--accent-mute);
}
.notlist strong { color: var(--ink); }

.panel {
  border: 1px solid var(--rule); border-radius: 3px; padding: 1.4rem 1.5rem;
  background: var(--paper-alt); max-width: 44rem;
}
.panel h2 { margin-top: 0; }

table.crit { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 1rem 0; }
table.crit th, table.crit td { text-align: left; padding: .5rem .7rem .5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.crit th { color: var(--ink); }
table.crit td:first-child { white-space: nowrap; color: var(--accent); font-weight: 600; }

.loading, .errorbox { font-size: .95rem; color: var(--text-mute); padding: 2rem 0; }
.errorbox { color: var(--amber-deep); max-width: var(--measure); }
.errorbox code { background: var(--paper-alt); padding: .1rem .3rem; }

/* ---------- print: a reviewer will print this --------------------------- */

@media print {
  .masthead nav, .rail__nav, .tierctl, .skip { display: none; }
  body { font-size: 11pt; }
  .entrygrid { display: block; }
  .rail { margin-bottom: 1.5rem; }
  a.ext::after, .references a::after { content: " <" attr(href) ">"; font-size: .85em; word-break: break-all; }
  .section--assessment { background: none; color: var(--text); border: 1px solid var(--rule); }
  .section--assessment h2 { color: var(--ink); }
}