/* Shared by index.html and network.html. Values are defined in DESIGN.md at the
   repo root; nothing here should introduce a hex, size or radius that is not in
   that file. Page-specific rules live in a <style> block on each page. */

:root{
  /* surfaces */
  --paper:#e8ebe9;
  --card:#ffffff;
  --rule:#d2d9d7;

  /* text */
  --ink:#14202a;
  --ink-soft:#53626d;
  --ink-mute:#7b8790;   /* 3.06:1 on paper. 24px and above only. */

  /* meaning */
  --better:#146848;
  --worse:#a83329;
  --mixed:#89620c;
  --old:#984c2a;
  --new:#5b2d82;
  --hospital:#7a2530;

  /* row washes */
  --wash-better:#dceee5;   --wash-better-h:#d3e9de;
  --wash-worse:#f8e2df;    --wash-worse-h:#f5dad6;
  --wash-mixed:#f5ecd8;    --wash-mixed-h:#f1e6cd;
  --wash-hospital:#efe4e3; --wash-hospital-h:#e9dcdb;
  --wash-hover:rgba(255,255,255,.6);

  /* type */
  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --fs-1:11px;
  --fs-2:13px;
  --fs-3:16px;
  --fs-4:19px;
  --fs-5:23px;
  --fs-6:28px;
  --fs-display:clamp(32px,6.4vw,52px);

  /* spacing, 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:72px;

  /* shapes */
  --r:8px;
  --r-pill:999px;
  --r-dot:50%;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-3);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--display);font-variation-settings:"wdth" 108;
  margin:0;line-height:1.08;letter-spacing:-.02em;
}
p{margin:0}
a{color:inherit}

/* One measure for the whole page. Nothing opts out, including the footer. */
.wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* ---------- nav ---------- */
.topnav{padding-block:var(--s4) 0;display:flex;gap:22px;align-items:baseline}
.topnav a{
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding-bottom:var(--s1);
  border-bottom:2px solid transparent;
}
.topnav a:hover{color:var(--new)}
.topnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.topnav a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- masthead ---------- */
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:var(--s4);
}
h1{font-weight:700}
.standfirst{margin-top:var(--s4);color:var(--ink-soft);font-size:var(--fs-4);line-height:1.45}

/* ---------- controls ---------- */
.search{
  width:100%;font-family:var(--body);font-size:var(--fs-3);color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:var(--s3) 14px;
}
.search::placeholder{color:var(--ink-soft);opacity:1}
.search:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:transparent}

.chip{
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.06em;text-transform:uppercase;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:7px var(--s3);cursor:pointer;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- rows ---------- */
.row{
  display:grid;grid-template-columns:104px 1fr;gap:0 20px;
  border-bottom:1px solid var(--rule);
}

/* ---------- states ---------- */
.empty{padding:var(--s7) 0;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.empty strong{
  display:block;font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:var(--fs-5);margin-bottom:var(--s2);
}

/* ---------- footer ---------- */
/* The measure is set on the paragraphs, not the container, so the footer keeps
   the page's left edge instead of centring itself inside .wrap. */
footer.wrap{
  margin-top:var(--s8);padding-block:var(--s5) 96px;
  border-top:1px solid var(--rule);color:var(--ink-soft);
  font-size:var(--fs-2);line-height:1.65;
}
footer p{max-width:74ch}
footer p+p{margin-top:15px}
footer b{color:var(--ink-soft);font-weight:500}
footer a{color:var(--ink-soft)}

@media (max-width:720px){
  .wrap{padding:0 18px}
  /* The lead drops a step on a phone. At 19px it ran to seven lines and pushed
     the first row of content two screens down. */
  .standfirst{font-size:var(--fs-3)}
  footer.wrap{margin-top:var(--s7);padding-block:22px var(--s8)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}