/* ============================================================
   SheetSense Essay: cream-paper theme layered over site.css
   Used by: index.html, fantasy/, ucl/, elections/, current/
   Link it AFTER each page's inline <style> so it wins ties.
   Fonts: Fraunces (display) + Work Sans (body), loaded per page.
   ============================================================ */

:root {
  --bg-0: #FBF5EA;
  --bg-1: #FFFBF3;
  --bg-2: #EFE6D6;
  --border: #E4D8C5;
  --border-strong: #CDBFA8;

  --text-1: #2B2420;
  --text-2: #5E5249;
  --text-3: #8C7F73;

  --accent: #21897E;
  --accent-hover: #176A61;
  --accent-dim: rgba(33, 137, 126, 0.10);
  --accent-border: rgba(33, 137, 126, 0.40);

  --gold: #B07E14;
  --danger: #CF3F36;

  /* essay palette */
  --ink: #2B2420;
  --paper: #FFFBF3;
  --pale: #DCCFB9;
  --paler: #EDE4D3;
  --coral: #EE6A4F;
  --coral-text: #B8462E; /* coral dark enough for small text on cream (about 5:1) */
  --teal: #21897E;
  --mustard: #E3A92E;
  --dem: #3366B0;
  --rep: #CF3F36;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Work Sans', system-ui, -apple-system, sans-serif;

  /* hand-drawn card corners */
  --sketch: 18px 6px 20px 8px / 8px 20px 6px 18px;
  --sketch-shadow: 4px 5px 0 var(--border);
}

body {
  background-color: var(--bg-0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--text-2);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -0.015em;
}
h1 em, h2 em { font-style: italic; color: var(--teal); }

a { color: var(--teal); }
a:hover { color: var(--accent-hover); }
::selection { background: rgba(227, 169, 46, 0.35); color: var(--ink); }

/* ---------- Nav ---------- */

nav {
  background: rgba(251, 245, 234, 0.94);
  border-bottom: 1.5px dashed var(--pale);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nav-logo img { display: none; }
.nav-logo::before {
  content: '';
  width: 22px; height: 22px; flex: 0 0 22px;
  background:
    radial-gradient(circle at 3px 3px, var(--coral) 2.6px, transparent 3px),
    radial-gradient(circle at 11px 3px, var(--pale) 2.6px, transparent 3px),
    radial-gradient(circle at 19px 3px, var(--teal) 2.6px, transparent 3px),
    radial-gradient(circle at 3px 11px, var(--pale) 2.6px, transparent 3px),
    radial-gradient(circle at 11px 11px, var(--coral) 2.6px, transparent 3px),
    radial-gradient(circle at 19px 11px, var(--pale) 2.6px, transparent 3px),
    radial-gradient(circle at 3px 19px, var(--mustard) 2.6px, transparent 3px),
    radial-gradient(circle at 11px 19px, var(--pale) 2.6px, transparent 3px),
    radial-gradient(circle at 19px 19px, var(--mustard) 2.6px, transparent 3px);
}
.nav-logo span {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-links a { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.nav-links a:hover { color: var(--ink); background: var(--paler); }
.nav-links a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--coral); }
/* the serif wordmark is wider than the old one, so the menu folds earlier than site.css's 768px */
@media (max-width: 960px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 16px; display: none;
    background: var(--bg-0); border-bottom: 1.5px dashed var(--pale);
  }
  .nav-links.active { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .nav-links a.active { box-shadow: inset 3px 0 0 var(--coral); }
}

/* ---------- Shared page furniture ---------- */

.page-header::before { display: none; }
.tagline, .section-index {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--coral-text);
}
.page-header h1 {
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.04;
  font-weight: 700;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.lede { font-size: 18px; line-height: 1.55; color: var(--text-2); }
.stamp { color: var(--text-3); }

.chapter h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.chapter .why { font-size: 16px; }

.card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--sketch);
  box-shadow: var(--sketch-shadow);
}
.card:hover { border-color: var(--ink); }
.card-label { font-weight: 600; color: var(--text-3); }

.chart svg text { font-family: var(--font-body); }
.src, .fineprint { color: var(--text-3); }

.pill { border-color: var(--border-strong); }

footer {
  border-top: 1.5px dashed var(--pale);
  font-family: var(--font-body);
  color: var(--text-3);
}
footer a { color: var(--text-2); }
footer a:hover { color: var(--coral); }

/* cutout photos: soft paper shadow instead of the dark glow */
.cutout { filter: drop-shadow(0 12px 14px rgba(43, 36, 32, 0.22)); }

/* hand-drawn underline for a headline word */
.squiggle-word { position: relative; white-space: nowrap; }
.squiggle-word svg { position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.3em; overflow: visible; }
.squiggle-word path { fill: none; stroke: var(--mustard); stroke-width: 7; stroke-linecap: round; }

/* footer fine print: disclaimer + credits link */
footer .legal { display: block; flex-basis: 100%; margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }