/* =========================================================================
   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); }

/* ── 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; }
}