/* =========================================================================
   THE LEDGER — the reckoning
   Where the two paths meet again: five lives, the mirror, the patterns,
   and the source record for everything in the piece.
   ========================================================================= */

body.reckoning{
  background:var(--ink); color:var(--on-ink);
  --rule:rgba(232,224,213,.16);
  --rule-bone:rgba(26,21,18,.18);
  color-scheme:dark;
}

/* reuse the path top bar */
#bar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem clamp(1rem,3vw,2rem);
  background:rgba(12,10,9,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
#bar a{ text-decoration:none; color:var(--on-ink-dim); }
#bar a:hover{ color:var(--gold); }
#bar .here{ color:var(--gold); }
#bar .cross{ border:1px solid var(--rule); border-radius:999px; padding:.4rem .8rem; }
#bar .cross:hover{ border-color:var(--gold); }

/* ── masthead ──────────────────────────────────────────────────────────── */
#top{
  min-height:62svh; display:grid; align-items:center;
  padding:7rem clamp(1.2rem,4vw,3rem) 4rem;
  border-bottom:1px solid var(--rule);
}
#top .inner{ max-width:44rem; }
#top .meta{ color:var(--gold); }
#top h1{
  font-size:clamp(2.3rem,7vw,5rem); margin:1rem 0 1.4rem;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144; letter-spacing:-.03em;
}
#top p{ color:var(--on-ink-dim); max-width:36rem; }

/* ── section furniture ─────────────────────────────────────────────────── */
.section{ padding:clamp(4rem,13vh,9rem) clamp(1.2rem,4vw,3rem); }
.section-head{ max-width:44rem; margin:0 auto clamp(2.5rem,7vh,4.5rem); text-align:center; }
.section-head .meta{ color:var(--gold); }
.section-head h2{ font-size:clamp(1.9rem,5.2vw,3.4rem); margin:.9rem 0 1.1rem; }
.section-head p{ color:var(--on-ink-dim); max-width:34rem; margin-inline:auto; }

/* ── five lives ────────────────────────────────────────────────────────── */
.lives{ display:grid; gap:1.1rem; max-width:74rem; margin-inline:auto; }
.life{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
.life .side{ padding:clamp(1.4rem,3.2vw,2.4rem); }
.life .d{ background:var(--ink-2); }
.life .p{ background:var(--bone); color:var(--on-bone); }
.life .who{ display:flex; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.life .d .who{ color:var(--oxide-lift); }
.life .p .who{ color:var(--patina); }
.life h3{ font-size:1.4rem; margin:0 0 .7rem; }
.life .d p{ color:var(--on-ink-dim); margin:0; }
.life .p p{ color:var(--on-bone-dim); margin:0; }
.life em{
  font-style:normal; font-family:var(--font-meta); font-size:.8em;
  letter-spacing:.02em; color:var(--gold);
}
.life .p em{ color:var(--patina); }

/* ── the mirror ────────────────────────────────────────────────────────── */
#mirror{ background:var(--ink-2); }
.quiz{ max-width:46rem; margin-inline:auto; }
.q{ border-top:1px solid var(--rule); padding:clamp(1.5rem,4vh,2.4rem) 0; }
.q > p{
  font-family:var(--font-display); font-size:clamp(1.1rem,2.3vw,1.55rem);
  line-height:1.28; margin:0 0 1.2rem;
}
.q .opts{ display:grid; gap:.5rem; }
.opt{
  text-align:left; font:inherit; font-size:.92rem; cursor:pointer;
  background:none; color:var(--on-ink-dim); border:1px solid var(--rule);
  padding:.85rem 1.1rem; border-radius:2px;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.opt:hover{ border-color:var(--on-ink-dim); color:var(--on-ink); }
.opt[aria-pressed="true"]{ border-color:var(--gold); color:var(--ink); background:var(--gold); }

.verdict{
  margin-top:clamp(2rem,6vh,3.5rem); padding:clamp(1.7rem,4.5vw,2.8rem);
  background:var(--bone); color:var(--on-bone); display:none;
}
.verdict.on{ display:block; animation:rise .9s var(--ease) both; }
.verdict .meta{ color:var(--patina); }
.verdict h3{ font-size:clamp(1.7rem,4.6vw,2.8rem); margin:.6rem 0 1rem; }
.verdict p{ color:var(--on-bone-dim); max-width:42rem; margin:0; }
.verdict .again{
  margin-top:1.5rem; background:none; border:0; cursor:pointer; padding:0;
  font-family:var(--font-meta); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--patina); border-bottom:1px solid currentColor;
}

/* ── patterns ──────────────────────────────────────────────────────────── */
.patterns{ max-width:70rem; margin-inline:auto; }
.pattern{
  display:grid; grid-template-columns:auto 1fr 1fr; gap:clamp(1rem,3.5vw,3rem);
  border-top:1px solid var(--rule); padding:clamp(1.7rem,4.5vh,2.8rem) 0;
  align-items:start;
}
.pattern .n{ font-family:var(--font-meta); font-size:.78rem; color:var(--gold); padding-top:.35rem; }
.pattern h3{ font-size:clamp(1.15rem,2.5vw,1.75rem); }
.pattern .d{ color:var(--on-ink-dim); font-size:.94rem; margin:.7rem 0 0; }
.pattern .p{
  font-size:.94rem; border-left:1px solid var(--oxide); padding-left:1.2rem; margin:0;
}
.pattern .p .meta{ display:block; color:var(--oxide-lift); margin-bottom:.5rem; }

/* ── archive ───────────────────────────────────────────────────────────── */
#archive{ background:var(--bone); color:var(--on-bone); }
#archive .section-head h2{ color:var(--on-bone); }
#archive .section-head p{ color:var(--on-bone-dim); }
#archive .section-head .meta{ color:var(--patina); }

.note{
  max-width:44rem; margin:0 auto clamp(2.5rem,7vh,4rem);
  border:1px solid var(--rule-bone); padding:clamp(1.4rem,3.5vw,2.2rem);
  background:rgba(255,255,255,.36);
}
.note h3{ font-size:1.2rem; margin:0 0 .8rem; }
.note p{ font-size:.9rem; color:var(--on-bone-dim); }
.note p:last-child{ margin:0; }
.note a{ color:var(--patina); }

.ledger{ max-width:78rem; margin-inline:auto; }
.ledger-head,.ledger-row{
  display:grid; grid-template-columns:6rem 1fr 12rem 9rem 6rem; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--rule-bone);
  font-family:var(--font-meta); font-size:.66rem; align-items:baseline;
}
.ledger-head{
  text-transform:uppercase; letter-spacing:.18em; color:var(--patina);
  border-bottom-color:var(--on-bone);
}
.ledger-row{ color:var(--on-bone-dim); }
.ledger-row .t{ color:var(--on-bone); font-family:var(--font-body); font-size:.86rem; }
.ledger-row a{ color:var(--patina); text-decoration:none; border-bottom:1px solid currentColor; }
.ledger-row .thumb{ width:4.5rem; height:3rem; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.ledger-row .side-tag{ color:var(--oxide); }
.ledger-row .side-tag.p{ color:var(--patina); }

/* ── the way through to the other record ───────────────────────────────── */
/* This replaced a two-button switch that had no bottom padding, so it sat on the
   hard seam where the dark band meets the bone ledger, looking like it had
   slipped off the section above. It is one card now, not a toggle: there is one
   home page for both records and this is the door from it to the other one. */
.crossto{
  padding:clamp(2.5rem,7vh,4.5rem) clamp(1.2rem,4vw,3rem);
  max-width:46rem; margin-inline:auto;
}
.crossto a{
  display:block; text-decoration:none;
  padding:1.3rem 1.5rem;
  border:1px solid var(--rule); border-radius:3px;
  transition:border-color .2s;
}
.crossto a:hover,
.crossto a:focus-visible{ border-color:var(--gold); }
.crossto .meta{
  display:block; color:var(--gold);
  font-family:var(--font-meta); font-size:.55rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.crossto .t{
  display:block; margin:.45rem 0 .3rem;
  font-size:1.35rem; color:var(--on-ink);
}
.crossto .d{ display:block; font-size:.9rem; color:var(--on-ink-dim); }

@media (prefers-reduced-motion: reduce){
  .crossto a{ transition:none; }
}

/* ── back to top ───────────────────────────────────────────────────────── */
/* Fixed to the right, clear of the text column. Hidden until the reader is past
   the first screen, by the `hidden` attribute rather than opacity, so it is out
   of the tab order as well as out of sight while it has nothing to offer. */
#totop{
  position:fixed; right:clamp(.8rem,2.5vw,2rem); bottom:clamp(.8rem,2.5vw,2rem);
  z-index:40; display:grid; place-items:center;
  width:2.6rem; height:2.6rem;
  background:var(--ink); color:var(--on-ink);
  border:1px solid var(--rule); border-radius:50%;
  text-decoration:none; font-size:1rem; line-height:1;
  transition:border-color .2s, color .2s;
}
#totop[hidden]{ display:none; }
#totop:hover,
#totop:focus-visible{ color:var(--gold); border-color:var(--gold); }

/* One colour on both pages. The dark pill reads on the bone ledger as well as on
   the ink background, and an earlier attempt to invert it over #archive could
   never have worked: the button sits outside <main> and the two are not
   siblings, so the selector matched nothing. */

@media (prefers-reduced-motion: reduce){
  #totop{ transition:none; }
}

/* ── every source ──────────────────────────────────────────────────────── */
.cites{ max-width:62rem; margin-inline:auto; }
.cite{
  padding:1.1rem 0; border-bottom:1px solid var(--rule);
}
.cite-t{ font-size:.95rem; color:var(--on-ink); max-width:54rem; }
.cite-t a{ color:var(--on-ink); text-decoration:none; border-bottom:1px solid var(--gold); }
.cite-t a:hover,
.cite-t a:focus-visible{ color:var(--gold); }

/* The entries resting on a source, kept quieter than the source itself: this
   is the answer to "what stands on this", not a second list of entries. */
.cite-by{ margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.3rem .9rem; align-items:baseline; }
.cite-by .meta{ color:var(--gold); font-size:.55rem; margin-right:.3rem; }
.cite-ev{
  font-size:.8rem; color:var(--on-ink-dim); text-decoration:none;
  border-bottom:1px solid transparent;
}
.cite-ev:hover,
.cite-ev:focus-visible{ color:var(--on-ink); border-bottom-color:var(--on-ink-dim); }
.cite-ref{
  font-family:var(--font-meta); font-size:.58rem; letter-spacing:.12em;
  color:var(--gold); margin-right:.4rem;
}

/* ── close ─────────────────────────────────────────────────────────────── */
#close{
  min-height:70svh; display:grid; place-items:center; text-align:center;
  padding:clamp(4rem,13vh,9rem) clamp(1.2rem,4vw,3rem);
}
#close .inner{ max-width:44rem; }
#close h2{ font-size:clamp(2rem,6.5vw,4.4rem); }
#close h2 em{ font-style:italic; }
#close p{ margin-top:1.8rem; color:var(--on-ink-dim); }
#close .onward{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:clamp(2.5rem,7vh,4rem); text-align:left;
}
#close .onward a{
  text-decoration:none; border:1px solid var(--rule); padding:1.3rem;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
#close .onward a:hover{ border-color:var(--gold); background:var(--ink-2); }
#close .onward h3{ font-size:1.2rem; margin:.5rem 0 .3rem; }
#close .onward p{ margin:0; font-size:.86rem; }
#close .onward .meta{ color:var(--gold); }

footer.path-foot{
  padding:2rem clamp(1.2rem,4vw,3rem) 3rem; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-family:var(--font-meta); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-ink-dim);
}
footer.path-foot a{ color:var(--gold); text-decoration:none; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 820px){
  .life,.pattern,#close .onward{ grid-template-columns:1fr; }
  .life .p{ border-top:1px solid var(--rule); }
  .pattern .p{ border-left:0; border-top:1px solid var(--oxide); padding:1rem 0 0; }
  /* The header row is no use at this width, but display:none would take the
     column names out of the accessibility tree with it and leave a screen
     reader on a phone with unlabelled cells. Hidden from the eye only. */
  .ledger-head{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .ledger-row{ grid-template-columns:4.5rem 1fr; gap:.5rem 1rem; }
  .ledger-row .cr,.ledger-row .lic,.ledger-row .src{ grid-column:2; }
  #bar .cross span{ display:none; }
}

/* ── content note ──────────────────────────────────────────────────────── */
.content-note{
  margin-top:clamp(1.6rem,4vh,2.4rem);
  padding:1rem 1.1rem;
  border:1px solid var(--rule); border-left:2px solid var(--gold);
  font-size:.92rem; line-height:1.6; color:var(--fg-dim); max-width:38rem;
}
.content-note + .content-note{ margin-top:.7rem; }
.content-note b{ color:var(--fg); font-weight:400; }

/* ── the evidence chain under each pattern ─────────────────────────────── */
.pattern .chain{
  list-style:none; margin:1rem 0 0; padding:0;
  border-left:1px solid var(--rule);
}
.pattern .chain li{
  position:relative; padding:.45rem 0 .45rem 1.1rem;
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .7rem;
  align-items:baseline;
}
.pattern .chain li::before{
  content:""; position:absolute; left:-3px; top:.95rem;
  width:5px; height:5px; border-radius:50%; background:var(--rule);
}
.pattern .chain li:hover::before{ background:var(--gold); }
.pattern .chain .cy{
  font-size:.58rem; letter-spacing:.14em; color:var(--gold);
  white-space:nowrap;
}
.pattern .chain .ct{ font-size:.92rem; color:var(--fg); }
.pattern .chain .cn{
  grid-column:2; font-size:.86rem; line-height:1.55; color:var(--fg-dim);
}
.pattern .counter{
  margin-top:1rem; padding:.8rem .95rem;
  border:1px solid var(--rule); border-left:2px solid var(--gold);
}
.pattern .counter .m-tag{ display:block; font-size:.55rem; margin-bottom:.35rem; color:var(--gold); }
.pattern .counter p{ margin:0; font-size:.88rem; line-height:1.6; color:var(--fg-dim); }
@media (max-width:700px){
  .pattern .chain li{ grid-template-columns:1fr; }
  .pattern .chain .cn{ grid-column:1; }
}

/* Shown only when JavaScript is off, where the five lives, the eight patterns and
   the archive would otherwise be three empty headings. */
.noscript-note{
  max-width:34rem; margin:5rem auto; padding:0 1.4rem;
  font-family:var(--font-meta); font-size:.66rem; line-height:2.1;
  color:var(--on-bone-dim);
}
.noscript-note a{ color:var(--patina); }

/* Every other stylesheet here honours this; this one did not, and the
   reckoning is the one page that animates a result at the reader. */
@media (prefers-reduced-motion: reduce){
  .verdict.on{ animation:none; }
  .opt, #close .onward a{ transition:none; }
}

/* ── the patterns page ───────────────────────────────────────────────────
   Added 20 September. patterns.html shares this stylesheet with the sources
   and credits pages because it is the same kind of page: a long reference
   list, read rather than walked. The two sections alternate ground so the
   subject patterns and the argument patterns cannot be mistaken for one
   list run twice. */
.section.alt{ background:var(--ink-2); }

.pats{ max-width:66rem; margin-inline:auto; display:grid; gap:1.1rem; }

.pat{
  border:1px solid var(--rule);
  border-radius:.5rem;
  padding:clamp(1.3rem,3vw,2.1rem);
  background:var(--ink);
}
.section.alt .pat{ background:var(--ink); }

.pat-head .kind{ color:var(--gold); }
.pat-head h3{ font-size:clamp(1.15rem,2.5vw,1.6rem); margin:.55rem 0 0; }
.pat-head .pat-d{ color:var(--on-ink-dim); font-size:.94rem; margin:.6rem 0 0; max-width:46rem; }

/* The entries. One per line, number first, then the year, then the title, so
   the eye can run down the years and see the repetition without reading a
   single title. That is the whole point of the list. */
.pat-entries{
  list-style:none; margin:1.4rem 0 0; padding:0;
  border-top:1px solid var(--rule);
}
.pat-entries li{ border-bottom:1px solid var(--rule); }
.pat-entries a{
  display:grid;
  grid-template-columns:4.2rem 8.5rem 1fr;
  gap:.9rem; align-items:baseline;
  padding:.62rem .2rem;
  text-decoration:none; color:var(--on-ink-dim);
}
.pat-entries a:hover,
.pat-entries a:focus-visible{ color:var(--on-ink); background:var(--ink-2); }
.pat-entries .e-ref{ color:var(--gold); }
.pat-entries .e-y{ color:var(--on-ink-dim); }
.pat-entries a:hover .e-t{ color:var(--gold); }
.pat-entries .e-t{ font-family:var(--font-body); font-size:.92rem; color:var(--on-ink); }

.pat-count{ margin-top:.9rem; color:var(--on-ink-dim); }

/* Arriving from an entry on one of the paths. The pattern the reader was sent
   to is marked, briefly, so they can see which of twenty-five they landed on. */
.pat.landed{ border-color:var(--gold); }

@media (max-width:40rem){
  .pat-entries a{ grid-template-columns:4.2rem 1fr; row-gap:.15rem; padding:.7rem .2rem; }
  .pat-entries .e-y{ grid-column:2; }
  .pat-entries .e-t{ grid-column:2; }
}