:root{
  --paper:#EEF3EC; --sheet:#F7FAF5; --rule:#C3D4BE; --ink:#1B2A4A; --pencil:#56645F; --red:#C8102E; --green:#2F7D4F;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Comic Sans MS",cursive;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#111C18;--sheet:#17251F;--rule:#2C4038;--ink:#E4ECE8;--pencil:#9FB0A8;--red:#FF6B6B;--green:#6FCF97;color-scheme:dark}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--rule)}
.brand{font:600 1.35rem/1 var(--serif);text-decoration:none}
.brand span{color:var(--red)}
.top nav a{margin-left:1.5rem;text-decoration:none;color:var(--pencil);font-size:.95rem}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{padding:5rem 0 4rem;display:grid;grid-template-columns:1fr 15rem;gap:3rem;align-items:start}
.hero h1{font:600 clamp(2.4rem,6vw,4.4rem)/1.05 var(--serif);margin:0 0 1.5rem;letter-spacing:-.01em;max-width:14ch}
.hero p{max-width:34rem;color:var(--pencil);font-size:1.15rem;margin:0 0 2rem}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;padding:.8rem 1.4rem;border-radius:4px;font-weight:600}
.margin-notes{font:400 1.45rem/1.3 var(--hand);color:var(--red);border-left:2px solid var(--red);padding:.25rem 0 .25rem 1.1rem;margin-top:1rem}
.margin-notes p{margin:0 0 1rem;color:var(--red);font-size:1.45rem}
.tick{display:inline-block;width:1.4em;font-weight:700}

/* paper index */
section{padding:3.5rem 0;border-top:1px solid var(--rule)}
h2{font:600 2rem/1.2 var(--serif);margin:0 0 .5rem}
.lede{color:var(--pencil);margin:0 0 2rem;max-width:40rem}
.file{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-bottom:2rem}
.file h3{margin:0;padding:.9rem 1.25rem;font:600 1.05rem/1.3 var(--sans);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:1rem}
.file h3 small{font-weight:400;color:var(--pencil)}
.file ol{list-style:none;margin:0;padding:0}
.file li + li{border-top:1px solid var(--rule)}
.file a{display:grid;grid-template-columns:6.5rem 1fr auto;gap:1rem;align-items:baseline;padding:1rem 1.25rem;text-decoration:none}
.file a:hover{background:color-mix(in srgb,var(--rule) 30%,transparent)}
.ref{font:600 1.1rem/1 var(--serif);color:var(--red)}
.name{font-weight:500}
.go{color:var(--pencil);font-size:.9rem}

/* about */
.about{display:grid;grid-template-columns:9rem 1fr;gap:2.5rem;align-items:start}
.avatar{width:9rem;height:9rem;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:600 2.6rem/1 var(--serif)}
.about p{max-width:38rem;margin:0 0 1rem}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;padding:0;list-style:none}
.facts li{border:1px solid var(--rule);border-radius:999px;padding:.3rem .85rem;font-size:.92rem;color:var(--pencil)}

/* paper page */
.crumb{display:inline-block;margin:2.5rem 0 1rem;color:var(--pencil);text-decoration:none;font-size:.95rem}
.crumb:hover{color:var(--ink)}
.paper-head{padding-bottom:2.5rem}
.paper-head .ref{font-size:1.4rem}
.paper-head h1{font:600 clamp(2rem,5vw,3.2rem)/1.1 var(--serif);margin:.4rem 0 .75rem}
.res a{grid-template-columns:7.5rem 1fr auto}
.kind{font-size:.85rem;color:var(--green);font-weight:600}
.empty{padding:2rem 1.25rem;color:var(--pencil)}
.empty strong{display:block;color:var(--ink);font-family:var(--serif);font-size:1.2rem;margin-bottom:.25rem}

footer{border-top:1px solid var(--rule);padding:2rem 0 3rem;color:var(--pencil);font-size:.9rem}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:3rem 0 2.5rem;gap:1rem}
  .about{grid-template-columns:1fr}
  .avatar{width:6rem;height:6rem;font-size:1.8rem}
  .file a,.res a{grid-template-columns:4.5rem 1fr}
  .go{display:none}
  .top nav a{margin-left:1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}