:root{
  --ground:#0B0A0C; --deep:#060507; --ink:#EAE4E6; --dim:#9A8F94; --faint:#7C7276;
  --rule:#241C21; --rule2:#332730;
  /* the two species carry the two colours the whole way through the page */
  --rubra:#C4415F; --alba:#A9BECB;
  --amber:#D8A33C; --cold:#7E93A3;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Avenir Next Condensed","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --col:66ch; --pad:70px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}

.wrap{max-width:calc(var(--col) + var(--pad) + 3rem);margin:0 auto;padding:0 1.5rem}
h1,h2,h3,h4{text-wrap:balance;font-weight:400;margin:0}
a{color:inherit}
p{margin:0 0 1.1rem}
em{font-style:italic}

/* ---------- small uppercase furniture ---------- */
.eyebrow,.chip,.casetag,.figlabel,.kicker{
  font-family:var(--sans);letter-spacing:.09em;text-transform:uppercase;font-size:.66rem}

/* ---------- top nav ---------- */
.topnav{border-bottom:1px solid var(--rule);background:rgba(11,10,12,.92);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:30;font-family:var(--sans)}
.topnav .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-top:.7rem;padding-bottom:.7rem;flex-wrap:wrap}
.tn-home{text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.tn-home b{color:var(--rubra);font-weight:400}
.tn-links{display:flex;gap:1.1rem;flex-wrap:wrap}
.tn-links a{text-decoration:none;color:var(--dim);letter-spacing:.09em;
  text-transform:uppercase;font-size:.66rem;padding-bottom:2px;border-bottom:1px solid transparent}
.tn-links a:hover,.tn-links a:focus-visible{color:var(--ink);border-bottom-color:var(--rubra)}

/* ---------- hero ---------- */
.hero{padding:clamp(3rem,9vh,6rem) 0 2.4rem;text-align:center;position:relative}
.hero .eyebrow{display:block;color:var(--faint);margin-bottom:1.6rem}
.hero h1{font-size:clamp(2.5rem,7.5vw,4.4rem);line-height:1.02;letter-spacing:-.01em}
.hero h1 em{color:var(--rubra);font-style:normal}
.hero .sub{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--faint);margin-top:1.3rem}
.thesis{max-width:54ch;margin:1.9rem auto 0;color:var(--dim);font-size:1.06rem;text-align:left}
.thesis b{color:var(--ink);font-weight:400}

/* the specimen mark: two overlapping leaf silhouettes */
.markwrap{display:flex;justify-content:center;margin:0 0 1.8rem}
.mark{width:clamp(78px,15vw,116px);height:auto;opacity:.95}

/* ---------- tally ---------- */
.tally{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 2.4rem;
  margin:2.8rem auto 0;padding-top:1.7rem;border-top:1px solid var(--rule);max-width:44rem}
.tally div{text-align:center;min-width:5.5rem}
.tally b{display:block;font-family:var(--sans);font-size:1.9rem;font-weight:400;
  line-height:1;letter-spacing:-.01em}
.tally span{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.09em;font-size:.62rem;color:var(--faint);margin-top:.45rem}
.tally .hi b{color:var(--rubra)}

/* ---------- evidence chips ---------- */
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:2.2rem auto 0}
.chip{display:inline-block;padding:.24em .62em;border:1px solid var(--rule2);
  border-radius:2px;color:var(--dim);white-space:nowrap}
.chip.s-here{border-color:rgba(196,65,95,.55);color:var(--rubra)}
.chip.s-pub{border-color:rgba(169,190,203,.4);color:var(--alba)}
.chip.s-unv{border-color:rgba(216,163,60,.42);color:var(--amber)}

/* inline standing marker */
.st{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.58rem;padding:.18em .5em;border:1px solid var(--rule2);border-radius:2px;
  color:var(--dim);white-space:nowrap;vertical-align:.14em;margin-left:.25em}
.st.here{border-color:rgba(196,65,95,.55);color:var(--rubra)}
.st.unv{border-color:rgba(216,163,60,.42);color:var(--amber)}

/* ---------- case sections ---------- */
.case{border-top:1px solid var(--rule);padding:3.4rem 0 .6rem;scroll-margin-top:4.2rem}
.casetag{color:var(--faint);display:block;margin-bottom:.8rem}
.case h2{font-size:clamp(1.6rem,4vw,2.25rem);line-height:1.12;margin-bottom:1.3rem}
.case h2 em{color:var(--rubra);font-style:normal}
.case h3{font-size:1.16rem;margin:2.2rem 0 .8rem;color:var(--ink)}
.case h3::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--rubra);vertical-align:.34em;margin-right:.6rem}

.lede{font-size:1.1rem;color:var(--ink)}

/* ---------- pull quote / verdict ---------- */
.verdict{border-left:2px solid var(--rubra);padding:.2rem 0 .2rem 1.2rem;
  margin:1.9rem 0;color:var(--ink);font-size:1.06rem}
.verdict b{font-weight:400;color:var(--rubra)}

.callout{border:1px solid var(--rule2);border-radius:3px;padding:1.2rem 1.3rem;
  margin:1.9rem 0;background:var(--deep)}
.callout .kicker{display:block;color:var(--amber);margin-bottom:.6rem}
.callout p:last-child{margin-bottom:0}

/* ---------- tables ---------- */
.tbl{overflow-x:auto;margin:1.7rem 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:min(100%,30rem)}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;
  font-size:.62rem;color:var(--faint);font-weight:400;border-bottom-color:var(--rule2)}
tbody tr:last-child td{border-bottom:none}
td.num{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
.r-rubra{color:var(--rubra)}
.r-alba{color:var(--alba)}
tr.best td{background:rgba(196,65,95,.07)}
tr.best td:first-child{box-shadow:inset 2px 0 0 var(--rubra)}

/* ---------- figures ---------- */
figure{margin:2.2rem 0}
figure svg{display:block;width:100%;height:auto}
figcaption{font-family:var(--sans);font-size:.7rem;line-height:1.5;color:var(--faint);
  margin-top:.8rem;letter-spacing:.02em}
.figlabel{color:var(--faint);display:block;margin-bottom:.7rem}

/* ---------- citations ---------- */
.cite{font-family:var(--mono);font-size:.62em;vertical-align:super;line-height:0;
  color:var(--amber);text-decoration:none;padding:0 .12em}
.cite:hover,.cite:focus-visible{color:var(--ink);background:rgba(216,163,60,.18)}

/* ---------- kit list ---------- */
.kit{list-style:none;padding:0;margin:1.6rem 0}
.kit li{border-top:1px solid var(--rule);padding:1rem 0 1rem 2.1rem;position:relative}
.kit li::before{content:"";position:absolute;left:0;top:1.35rem;width:11px;height:11px;
  border:1px solid var(--rule2);border-radius:2px}
.kit li.essential::before{border-color:var(--rubra);background:rgba(196,65,95,.22)}
.kit .kn{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.08em;font-size:.74rem;margin-bottom:.3rem}
.kit .kp{font-family:var(--mono);font-size:.76rem;color:var(--amber);white-space:nowrap}
.kit p{margin:.35rem 0 0;font-size:.93rem;color:var(--dim)}
.kit a{color:var(--alba);text-decoration:none;border-bottom:1px solid rgba(169,190,203,.32)}
.kit a:hover,.kit a:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- protocol steps ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:1.7rem 0}
.steps>li{counter-increment:s;position:relative;padding:0 0 1.5rem 2.6rem;
  border-left:1px solid var(--rule);margin-left:.5rem}
.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.steps>li::before{content:counter(s);position:absolute;left:-.72rem;top:0;
  width:1.44rem;height:1.44rem;border-radius:50%;background:var(--ground);
  border:1px solid var(--rule2);color:var(--dim);font-family:var(--sans);
  font-size:.7rem;display:flex;align-items:center;justify-content:center}
.steps b{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.08em;font-size:.74rem;font-weight:400;margin-bottom:.35rem}
.steps p{margin:0;font-size:.95rem;color:var(--dim)}
.steps code{font-family:var(--mono);font-size:.8rem;color:var(--ink);
  background:var(--deep);padding:.1em .35em;border-radius:2px}

/* ---------- references ---------- */
.refs{list-style:none;padding:0;margin:1.4rem 0 0;counter-reset:r}
.refs li{counter-increment:r;position:relative;padding:.75rem 0 .75rem 2.4rem;
  border-top:1px solid var(--rule);font-size:.88rem;color:var(--dim);scroll-margin-top:4.5rem}
.refs li::before{content:counter(r);position:absolute;left:0;top:.8rem;
  font-family:var(--mono);font-size:.72rem;color:var(--amber)}
.refs li:target{background:rgba(216,163,60,.09)}
.refs a{color:var(--alba);text-decoration:none;border-bottom:1px solid rgba(169,190,203,.3);
  word-break:break-word}
.refs a:hover{color:var(--ink)}
.refs .rt{color:var(--ink)}

footer{border-top:1px solid var(--rule);margin-top:3.5rem;padding:2.4rem 0 3.5rem;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;color:var(--faint)}
footer a{color:var(--dim)}
footer p{margin:0 0 .5rem}

@media (max-width:640px){
  body{font-size:16px}
  .hero{padding-top:2.2rem}
  .tally{gap:1.2rem 1.6rem}
  .tally b{font-size:1.5rem}
}