/* jellohurled.com — see DESIGN.md. Palette taken from the simulation's own animals. */
:root{
  --ink:#0C1D26; --ground:#EDF1F0; --panel:#FFFFFF; --line:#D4DDDC;
  --text:#132229; --muted:#566B72;
  --teal:#17706E; --orange:#D9552B; --red:#B32D22;
  --teal-lit:#12605E; --orange-lit:#B84824;      /* 4.62:1 on --ground. MEASURED, not picked. */
  --orange-ink:#E1582C;                          /* the SAME orange, lightened for use ON --ink (4.62:1) */
  --wash:#E3EAE9; --wash-red:#F7E9E7; --wash-teal:#E4EFEE;
  --shadow:0 1px 2px rgba(12,29,38,.06),0 12px 32px rgba(12,29,38,.06);
  --r:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#060F14; --ground:#0A171E; --panel:#0F1F27; --line:#22343C;
  --text:#DFE8E8; --muted:#8FA4AB;
  --teal:#3FB0AC; --orange:#FF7A47; --red:#FF6152;
  --teal-lit:#3FB0AC; --orange-lit:#FF7A47; --orange-ink:#FF7A47;
  --wash:#122229; --wash-red:#2A1512; --wash-teal:#0F2724;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 44px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --ink:#060F14; --ground:#0A171E; --panel:#0F1F27; --line:#22343C;
  --text:#DFE8E8; --muted:#8FA4AB;
  --teal:#3FB0AC; --orange:#FF7A47; --red:#FF6152;
  --teal-lit:#3FB0AC; --orange-lit:#FF7A47; --orange-ink:#FF7A47;
  --wash:#122229; --wash-red:#2A1512; --wash-teal:#0F2724;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);
  font:400 18px/1.62 "Newsreader",Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;font-optical-sizing:auto}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.5rem}
.wide{max-width:64rem}
a{color:var(--orange-lit);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
img,svg{max-width:100%}

/* ── masthead ─────────────────────────────────────── */
.top{background:var(--ink);color:#E7EEED;border-bottom:1px solid rgba(255,255,255,.07)}
.top .wrap{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding-top:1rem;padding-bottom:1rem;flex-wrap:wrap;max-width:64rem}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:inherit}
.brand b{font:400 1.5rem/1 "Instrument Serif",Georgia,serif;letter-spacing:.005em}
.brand span{font:400 .64rem/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.22em;text-transform:uppercase;color:#7E9AA0}
nav{display:flex;gap:1.4rem;flex-wrap:wrap}
nav a{font:400 .8rem/1 "JetBrains Mono",monospace;letter-spacing:.08em;
  text-transform:uppercase;color:#9DB6BB;text-decoration:none}
nav a:hover,nav a[aria-current]{color:var(--orange-ink)}

/* ── type ─────────────────────────────────────────── */
h1{font:400 clamp(2.6rem,6vw,4.5rem)/1.02 "Instrument Serif",Georgia,serif;
  letter-spacing:-.008em;margin:0 0 1.1rem;text-wrap:balance;color:var(--text)}
h2{font:400 clamp(1.7rem,3.2vw,2.3rem)/1.15 "Instrument Serif",Georgia,serif;
  margin:3.4rem 0 1rem;text-wrap:balance;color:var(--text)}
h3{font:600 1.06rem/1.35 "Newsreader",Georgia,serif;margin:2rem 0 .5rem;color:var(--text)}
p{margin:0 0 1.1rem;max-width:62ch}
ul,ol{margin:0 0 1.1rem;padding-left:1.15rem;max-width:62ch}
li{margin:0 0 .55rem}
strong{font-weight:600}
.kicker{font:400 .68rem/1 "JetBrains Mono",monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal-lit);margin:0 0 1.2rem}
.lede{font-size:1.28rem;line-height:1.5;color:var(--muted);max-width:44ch;margin:0 0 2rem}
.thesis{font:400 clamp(1.4rem,2.6vw,1.85rem)/1.35 "Instrument Serif",Georgia,serif;
  color:var(--text);border-left:3px solid var(--orange);background:var(--wash);
  padding:1.4rem 1.6rem;margin:2rem 0;border-radius:0 var(--r) var(--r) 0;max-width:none}
.thesis p{max-width:none;margin:0}
.thesis p + p{margin-top:.9rem;font-size:.82em;color:var(--muted)}

/* ── the entry: a finding, with its trace ─────────── */
.entry{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:0 var(--r) var(--r) 0;padding:1.3rem 1.5rem;margin:0 0 1.1rem;box-shadow:var(--shadow)}
.entry.neg{border-left-color:var(--red);background:var(--panel)}
.entry h3{margin:0 0 .5rem;font-size:1.12rem}
.entry p:last-of-type{margin-bottom:0}
.tag{display:inline-block;font:400 .6rem/1 "JetBrains Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;padding:.4rem .55rem;border-radius:4px;margin:0 0 .7rem;
  background:var(--wash-teal);color:var(--teal-lit)}
.entry.neg .tag{background:var(--wash-red);color:var(--red)}
.trace{display:block;font:400 .74rem/1.6 "JetBrains Mono",monospace;color:var(--muted);
  margin:.85rem 0 0;padding-top:.7rem;border-top:1px dashed var(--line);word-break:break-word}
.num{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:.94em;font-weight:500}

/* ── figures ──────────────────────────────────────── */
figure{margin:2.2rem 0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem;box-shadow:var(--shadow);overflow-x:auto}
figcaption{font:400 .82rem/1.55 "Newsreader",Georgia,serif;color:var(--muted);
  margin:1rem 0 0;max-width:60ch}
figcaption b{color:var(--text);font-weight:600}

/* ── people ───────────────────────────────────────── */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1rem;margin:2rem 0;padding:0;list-style:none;max-width:none}
.person{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.3rem;box-shadow:var(--shadow);margin:0}
.person a{font:400 1.4rem/1.1 "Instrument Serif",Georgia,serif;color:var(--text);
  text-decoration:none;display:block;margin:0 0 .2rem}
.person a:hover{color:var(--orange-lit)}
.person .role{font:400 .64rem/1 "JetBrains Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-lit);display:block;margin:0 0 .7rem}
.person p{font-size:.92rem;color:var(--muted);margin:0;max-width:none}

/* ── the scoreboard ───────────────────────────────── */
.board{background:var(--ink);border-radius:var(--r);padding:1.6rem 1.4rem;margin:2.2rem 0;
  box-shadow:var(--shadow);text-align:center;overflow-x:auto}
.board .lbl{font:400 .62rem/1 "JetBrains Mono",monospace;letter-spacing:.22em;
  text-transform:uppercase;color:#7E9AA0;margin:0 0 1.1rem;max-width:none}
.board .score{display:inline-grid;grid-template-columns:auto auto auto;gap:.4rem 1.6rem;
  align-items:baseline;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.board .n{font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:#E7EEED}
.board .n.win{color:var(--orange-ink)}
.board .vs{font-size:1rem;color:#5E7A80;align-self:center}
.board .who{font:400 .66rem/1 "JetBrains Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:#7E9AA0}
.board .foot{font:400 .74rem/1.5 "JetBrains Mono",monospace;color:#7E9AA0;
  margin:1.2rem 0 0;max-width:none}

/* ── misc ─────────────────────────────────────────── */
.rule{border:0;border-top:1px solid var(--line);margin:3rem 0}
.back{display:inline-block;margin:3rem 0 0;font:400 .8rem/1 "JetBrains Mono",monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--orange-lit);text-decoration:none}
.back:hover{text-decoration:underline}
footer{background:var(--ink);color:#7E9AA0;margin-top:5rem;padding:2.2rem 0}
footer .wrap{max-width:64rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:400 .76rem/1.6 "JetBrains Mono",monospace}
footer a{color:#9DB6BB}
main{padding:3.4rem 0 1rem}
@media (max-width:640px){
  main{padding-top:2.2rem}
  .board .score{grid-template-columns:auto;gap:.2rem}
  .board .vs{display:none}
}

/* ── a foreword: someone else's voice, above the author's own ─────── */
.fore{background:var(--wash);border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0;
  padding:1.6rem 1.8rem;margin:0 0 2.6rem}
.fore .lbl{font:400 .66rem/1 "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-lit);margin:0 0 1rem;max-width:none}
.fore p{font-size:1.02rem;margin:0 0 .9rem;max-width:62ch}
.fore p:last-child{margin:0}
.fore .sig{font:400 1.15rem/1 "Instrument Serif",Georgia,serif;color:var(--text);margin-top:1.2rem}
