:root{
  --bg:#0b0b0c;
  --ink:#cdc8be;
  --dim:#6d685f;
  --rule:#232326;
  --faint:#454149;
  --hot:#d8412f;
  --accent:var(--hot);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  text-transform:lowercase;
  counter-reset:n;
  padding:5vh 4vw 8vh;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
}
main,header,footer{max-width:96ch;margin:0 auto}
b{font-weight:400;color:var(--ink)}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--dim)}
a:hover,a:focus{color:var(--accent);border-bottom-color:var(--accent);outline:none}
::selection{background:var(--hot);color:#0b0b0c}

header{border:1px solid var(--rule);padding:1.5rem 1.7rem;margin-bottom:3rem}
h1{margin:0;font-size:1.05rem;font-weight:400;letter-spacing:.42em}
h1 b{color:var(--hot)}
.caret{
  display:inline-block;width:.55em;height:1em;margin-left:.1em;
  vertical-align:-.14em;background:var(--hot);animation:blink 1.06s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.sub{margin:.9rem 0 0;color:var(--dim);letter-spacing:.16em;font-size:.85rem}

.intro{color:var(--dim);margin:0 0 3.2rem;max-width:74ch}
.intro b{color:var(--ink)}
section{margin:0 0 3.6rem}
h2{
  margin:0 0 2.2rem;font-size:.82rem;font-weight:400;letter-spacing:.3em;
  color:var(--accent);display:flex;align-items:center;gap:1.5ch;white-space:nowrap;
}
h2::after{content:"";flex:1 1 auto;height:1px;background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 12px)}

figure{
  counter-increment:n;
  display:grid;grid-template-columns:5ch 1fr;
  margin:0 0 1.9rem;
}
figure::before{
  content:"0" counter(n,decimal-leading-zero);
  color:var(--faint);font-size:.8rem;line-height:2.1;
  font-variant-numeric:tabular-nums;transition:color .12s linear;
}
figure:hover::before{color:var(--accent)}
blockquote{
  margin:0;padding:0 0 0 1.6ch;
  border-left:1px solid var(--rule);transition:border-color .12s linear;
}
figure:hover blockquote{border-left-color:var(--accent)}
blockquote p{margin:0;text-wrap:pretty}
figcaption{
  grid-column:2;padding-left:1.6ch;
  color:var(--dim);font-size:.82rem;letter-spacing:.03em;
}
cite{font-style:normal;color:var(--faint)}
figure:hover cite{color:var(--dim)}

footer{border-top:1px solid var(--rule);padding-top:1.6rem;color:var(--dim);font-size:.82rem}
footer p{margin:0 0 .7rem}
.hits i{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:1.35em;height:1.35em;border:1px solid var(--rule);margin-right:2px;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
  vertical-align:middle;
}

@media (max-width:640px){
  body{font-size:14px;padding:4vh 6vw 7vh}
  h1{letter-spacing:.28em;font-size:.95rem}
  figure{grid-template-columns:4ch 1fr}
  h2{white-space:normal}
  h2::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
  *{transition:none!important}
}
.error{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:6vw;
}
.error div{border:1px solid var(--rule);border-left:2px solid var(--hot);padding:1.6rem 1.9rem;max-width:60ch}
.error h1{margin:0 0 1rem;font-size:1rem;font-weight:400;letter-spacing:.34em;color:var(--hot)}
.error p{margin:0 0 .8rem;color:var(--dim)}
.error p.q{color:var(--ink)}

@media print{
  :root{--bg:#fff;--ink:#111;--dim:#555;--rule:#bbb;--hot:#000}
  body{background:none;padding:0}
  .caret,.hits{display:none}
}