/* --------------------------------------------------------------------------
   sproutrage — locked palette, 2 September 2026
   Newsprint grey ground, near-black ink, house navy. Character inks are set
   per page from residents.json via a --char custom property; anything that
   isn't a resident's own name, badge or eyebrow uses navy.
   Ratios measured against #ECECE8: navy 9.5:1, ink 14.7:1.
   -------------------------------------------------------------------------- */

:root {
  --paper: #ECECE8;
  --ink: #1A1A1A;
  --navy: #1B3A6B;
  --rule: #D2D2CC;
  --mute: #66665F;
  --panel: #F5F5F2;
  --white: #FFFFFF;

  /* Overridden per resident page. Defaults to the house colour. */
  --char: var(--navy);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }
img { display: block; max-width: 100%; height: auto; }

.dsp {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 34px; }
@media (max-width: 760px) { .wrap { padding: 0 20px; } }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 34px;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.nav .brand {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800; font-size: 23px; letter-spacing: -.5px;
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
}
.nav .brand .dot { width: 13px; height: 13px; background: var(--navy); }
.nav ul {
  display: flex; gap: 26px; list-style: none; margin: 0; padding: 0;
  font-size: 14px; font-weight: 600;
}
.nav ul a { color: var(--ink); text-decoration: none; }
.nav ul a:hover { color: var(--navy); }
@media (max-width: 820px) { .nav { padding: 12px 20px; } .nav ul { display: none; } }

/* ---- sections ---- */
.sec { padding: 46px 0 0; }
.sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 3px solid var(--ink); padding-bottom: 10px; margin-bottom: 24px;
}
.sechead h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(24px, 3.6vw, 38px);
  letter-spacing: -1px; margin: 0;
}
.sechead .note { font-size: 13.5px; color: var(--mute); max-width: 40ch; text-align: right; }

/* ---- hero ---- */
.hero { padding: 56px 0 10px; }
.hero .kick {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--navy);
}
.hero h1 { font-size: clamp(34px, 6vw, 68px); margin: 16px 0 16px; max-width: 20ch; }
.hero p { font-size: 18px; color: #3A3A34; max-width: 62ch; margin: 0 0 12px; }

/* ---- resident cards ---- */
.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .roster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .roster { grid-template-columns: 1fr; } }

.rcard {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--card-ink, var(--navy));
  border-radius: 2px;
  padding: 18px 20px;
  text-decoration: none;
  display: block;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.rcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(26, 26, 26, .10); }
.rcard .no {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--mute);
}
.rcard h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 21px; margin: 4px 0 2px; letter-spacing: -.4px;
}
.rcard .sp { font-style: italic; font-size: 13px; color: var(--mute); margin: 0 0 9px; }
.rcard .role {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--card-ink, var(--navy)); margin-bottom: 6px;
}
.rcard p.tag { margin: 0; font-size: 14px; color: #3A3A34; }

/* ---- resident page ---- */
.plate { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; margin-top: 30px; }
@media (max-width: 820px) { .plate { grid-template-columns: 1fr; } }
.plate .por {
  aspect-ratio: 4 / 5;
  background: var(--panel);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-size: 12px; color: var(--mute); text-align: center; padding: 16px;
}
.plate .eyebrow {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 11.5px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--char);
}
.plate h1 { font-size: clamp(38px, 6vw, 68px); margin: 12px 0 4px; }
.plate .bino { font-style: italic; font-size: 18px; color: var(--mute); margin: 0 0 16px; }
.plate .tagline { font-size: 18px; color: #3A3A34; max-width: 44ch; margin: 0 0 20px; }

.facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.facts div { padding: 13px 0; border-bottom: 1px solid var(--rule); padding-right: 16px; }
.facts .l {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--mute); margin-bottom: 2px;
}
.facts .v { font-size: 14.5px; font-weight: 600; }

.braid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
@media (max-width: 820px) { .braid { grid-template-columns: 1fr; } }
.braid .col { padding: 26px 28px; }
.braid .bit { background: var(--ink); color: #fff; }
.braid .bot { background: var(--white); }
.braid h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 20px; margin: 0 0 3px;
}
/* Character ink on the dark panel. The inks were chosen against newsprint grey,
   so several are near-black — Katarina's plum is #4E0D3A and Vic's ink IS the
   base ink, which would render his heading invisible here. Lighten toward white
   so the mark still reads as the character's colour without failing on dark. */
.braid .bit h3 { color: color-mix(in srgb, var(--char), #FFFFFF 58%); }
.braid .sub { font-size: 12.5px; color: var(--mute); margin: 0 0 16px; }
.braid .bit .sub { color: rgba(255, 255, 255, .55); }
.braid p { font-size: 15px; margin: 0; }
.braid .bit p { color: rgba(255, 255, 255, .88); }
.braid .said { font-style: italic; }

/* The correction box. Always base ink, never a character colour: this is the
   Management speaking, and the Management has no colour. */
.box {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 22px 26px;
}
.box .l {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink);
  padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: 12px;
}
.box ul { margin: 0; padding-left: 18px; }
.box li { font-size: 14.5px; color: #3A3A34; margin-bottom: 8px; }

/* ---- footer ---- */
footer { background: var(--ink); color: #fff; margin-top: 64px; padding: 52px 34px 46px; }
footer .fin { max-width: 1120px; margin: 0 auto; text-align: center; }
footer .big {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(24px, 4.6vw, 48px);
  letter-spacing: -1.4px; line-height: 1; margin-bottom: 14px;
}
footer p { color: rgba(255, 255, 255, .62); max-width: 56ch; margin: 0 auto 18px; font-size: 14.5px; }
footer .links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
footer .links a { color: rgba(255, 255, 255, .86); text-decoration: none; }
footer .links a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}