/* ============================================================
   WHO DECIDED — the marked-up document.
   Two inks on warm stock. Red is the other hand, and nothing else.
   ============================================================ */

:root{
  --paper:#FBF8F1;
  --ink:#14120E;
  --other:#C02A1E;
  --mine:#1B4D8F;
  --rule:#8C8271;
  --wash:#F2EDE1;

  --pad:clamp(1.1rem,4vw,3rem);
  --ease:cubic-bezier(.2,.9,.25,1);
  --display:"Archivo Black","Arial Black",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:clamp(1rem,.95rem + .3vw,1.1rem);
  line-height:1.65;overflow-x:hidden;
}
.wrap{max-width:62rem;margin-inline:auto}
a{color:var(--mine)}
code{font-family:var(--mono);font-size:.88em;background:var(--wash);padding:.08em .3em}

.skip{
  position:absolute;left:-999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
  padding:.7rem 1.2rem;font:700 .8rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:0}
:where(a,button,input):focus-visible{outline:2px solid var(--mine);outline-offset:2px}

/* ---------- Top ---------- */
.top{padding:clamp(2rem,6vw,4.5rem) var(--pad) clamp(1.5rem,4vw,2.5rem)}
.eyebrow{
  margin:0 0 1.25rem;font:400 .72rem/1.5 var(--mono);
  letter-spacing:.02em;color:var(--rule);
}
.h1{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,6.2vw,4.2rem);line-height:1.02;letter-spacing:-.02em;
}
/* The red underline is the other hand's mark. */
.u{
  position:relative;white-space:nowrap;
}
.u::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;
  background:var(--other);
}
.lede{
  margin:1.25rem 0 clamp(1.75rem,4vw,2.5rem);max-width:58ch;
  color:var(--rule);font-size:clamp(1rem,.95rem + .35vw,1.14rem);text-wrap:pretty;
}
.lede b{color:var(--ink)}

.ask{border-top:2px solid var(--ink);padding-top:1.25rem;max-width:38rem}
.ask label{
  display:block;font:700 .68rem/1.5 var(--ui);letter-spacing:.18em;
  text-transform:uppercase;color:var(--rule);margin-bottom:.6rem;
}
.ask__row{display:flex;gap:.6rem;flex-wrap:wrap}
.ask input{
  flex:1 1 12rem;min-width:0;background:transparent;color:var(--ink);
  border:0;border-bottom:2px solid var(--ink);
  font:400 clamp(1.15rem,1rem + .7vw,1.5rem)/1.3 var(--mono);
  padding:.3rem .1rem .45rem;
}
.ask input::placeholder{color:var(--rule);opacity:.7}
.ask button{
  flex:0 0 auto;background:var(--ink);color:var(--paper);border:0;
  font:700 .8rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1.5rem;cursor:pointer;transition:background .15s var(--ease);
}
.ask button:hover:not(:disabled){background:var(--other)}
.ask button:disabled{background:var(--rule);cursor:progress}
.note{margin:.85rem 0 0;font-size:.82rem;line-height:1.6;color:var(--rule);max-width:62ch}
.err{
  margin:.85rem 0 0;padding:.5rem .7rem;background:var(--other);color:var(--paper);
  font:600 .85rem/1.45 var(--ui);max-width:52ch;
}
.err[hidden]{display:none}

/* ---------- Result ---------- */
.result{padding:0 var(--pad) clamp(2.5rem,6vw,4rem)}
.result[hidden]{display:none}

.verdict{
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:clamp(1.25rem,3.5vw,2rem) 0;margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.verdict__h{
  margin:0 0 .5rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,4.5vw,2.6rem);line-height:1.05;letter-spacing:-.015em;
}
.verdict__h .other{color:var(--other)}
.verdict__h .mine{color:var(--mine)}
.verdict__p{margin:0;max-width:64ch;color:var(--rule);text-wrap:pretty}
.verdict__p b{color:var(--ink)}
.verdict__meta{
  margin:.9rem 0 0;font:400 .78rem/1.5 var(--mono);color:var(--rule);
}

/* Three ledgers */
.kinds{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:clamp(1rem,3vw,2rem);margin-bottom:clamp(2rem,5vw,3rem);
}
.kind{border-top:1px solid var(--rule);padding-top:.85rem}
.kind--hit{border-top:3px solid var(--other)}
.kind--ok{border-top:3px solid var(--mine)}
.kind__k{
  margin:0 0 .3rem;font:700 .7rem/1.4 var(--ui);letter-spacing:.18em;text-transform:uppercase;
}
.kind__n{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.8rem,5vw,2.6rem);line-height:1;
}
.kind--hit .kind__n{color:var(--other)}
.kind__of{font-size:.45em;color:var(--rule);margin-left:.2em}
.kind__d{margin:.5rem 0 0;font-size:.88rem;line-height:1.55;color:var(--rule)}
.kind__list{margin:.5rem 0 0;font:400 .78rem/1.6 var(--mono);color:var(--other);word-break:break-word}

/* Evidence, marked in the margin */
.hand,.file{margin-bottom:clamp(2rem,5vw,3rem)}
.h2{
  margin:0 0 .6rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,3.4vw,1.9rem);line-height:1.1;letter-spacing:-.01em;
}
.p{margin:0 0 1.1rem;max-width:64ch;color:var(--rule);text-wrap:pretty}
.p b{color:var(--ink)}

.evidence{list-style:none;margin:0;padding:0}
.evidence li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.4rem 1rem;padding:.85rem 0;border-top:1px solid var(--rule);
}
.evidence li:last-child{border-bottom:1px solid var(--rule)}
.tag{
  font:700 .62rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .5rem;white-space:nowrap;align-self:start;
}
.tag--strong{background:var(--other);color:var(--paper)}
.tag--medium{color:var(--other);box-shadow:inset 0 0 0 1px currentColor}
.tag--good{background:var(--mine);color:var(--paper)}
.tag--neutral{color:var(--rule);box-shadow:inset 0 0 0 1px currentColor}
.ev__l{margin:0 0 .25rem;font-weight:700}
.ev__d{margin:0;color:var(--rule);font-size:.92rem;line-height:1.6;text-wrap:pretty}

/* The file, verbatim, with a gutter */
.listing{
  border:1px solid var(--rule);background:var(--wash);
  font:400 .82rem/1.75 var(--mono);overflow-x:auto;
}
.ln{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:0}
.ln__n{
  color:var(--rule);text-align:right;padding:0 .7rem 0 .5rem;
  border-right:1px solid var(--rule);user-select:none;
}
.ln__t{padding:0 .7rem;white-space:pre;color:var(--ink)}
.ln--hit{background:rgba(192,42,30,.07)}
.ln--hit .ln__t{color:var(--other);font-weight:700}
.ln--c .ln__t{color:var(--rule)}

.again{margin:0}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--mine);text-decoration:underline;text-underline-offset:3px;
}

/* ---------- Teach ---------- */
.teach{
  background:var(--ink);color:var(--paper);
  padding:clamp(2.5rem,6vw,4rem) var(--pad);
}
.teach .h2{color:var(--paper)}
.teach .p{color:#C9C2B4}
.teach .note{color:#9A9385}
.teach code{background:rgba(251,248,241,.1);color:var(--paper)}
.three{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1.25rem,3.5vw,2.5rem);margin:1.75rem 0 1.5rem;
}
.three__col{border-top:2px solid #3A362D;padding-top:.85rem}
.three__col--sharp{border-top-color:var(--other)}
.three__k{
  margin:0 0 .4rem;font-family:var(--display);font-weight:400;
  font-size:1.25rem;letter-spacing:-.01em;
}
.three__col--sharp .three__k{color:var(--other)}
.three__d{margin:0 0 .6rem;font-size:.92rem;line-height:1.6;color:#C9C2B4}
.three__d b{color:var(--paper)}
.three__e{margin:0;font:400 .74rem/1.6 var(--mono);color:#9A9385}

.foot{padding:clamp(2rem,5vw,3rem) var(--pad) clamp(3rem,7vw,4.5rem)}
.foot .note{margin-bottom:.85rem}

@media (max-width:560px){
  .evidence li{grid-template-columns:minmax(0,1fr)}
  .ln{grid-template-columns:2.4rem minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}