/* ---------- Design tokens ---------- */
:root {
  --bg:           #fafaf7;
  --ink:          #1a1a1a;
  --muted:        #5a5a5a;
  --rule:         #e5e5e0;
  --gray:         #b8b8b8;          /* default mark */
  --gray-dark:    #6e6e6e;
  --teal:         #0a8f88;          /* Nordic cluster */
  --teal-soft:    #0a8f8833;
  --orange:       #e07b00;          /* contrast cluster (Costa Rica, Israel) */
  --male:         #0072B2;          /* Okabe-Ito blue, colorblind-safe */
  --female:       #D55E00;          /* Okabe-Ito vermillion, colorblind-safe */
  --highlight-bg: #fff6e1;
  --shadow:       0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset-ish ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Header ---------- */
.page-header {
  max-width: 880px;
  margin: 0 auto;
  padding: 14vh 24px 10vh;
  text-align: center;
}
.page-header h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  margin: 0 0 .4rem;
  letter-spacing: -0.01em;
}
.page-header .subtitle {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--muted);
  margin: 0 0 .4rem;
  font-style: italic;
}
.page-header .byline {
  color: var(--muted);
  font-size: .95rem;
  margin: 0;
}
.scroll-hint {
  margin-top: 4rem;
  color: var(--muted);
  font-size: .9rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* ---------- Scroll steps ---------- */
.scroll-step {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.2fr);
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12vh 32px;
  align-items: start;
  min-height: 90vh;
  border-top: 1px solid var(--rule);
}
.scroll-step .prose {
  position: sticky;
  top: 14vh;
  align-self: start;
  max-width: 52ch;
}
.scroll-step .chart.sticky {
  position: sticky;
  top: 8vh;
  height: 80vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-eyebrow {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 .8rem;
  font-weight: 600;
}
.step-headline {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 1.2rem;
  line-height: 1.25;
}
.scroll-step p {
  font-size: 1.05rem;
  color: #2a2a2a;
  margin: 0 0 1rem;
}
.scroll-step p.caption {
  font-size: .92rem;
  color: var(--muted);
  border-left: 3px solid var(--teal);
  padding-left: 14px;
}
.scroll-step p.step1-pull {
  font-weight: 700;
  font-size: calc(1.05rem + 2pt);
  margin-top: 1.4rem;
}

/* ---------- Exploration (Martini Glass opens up) ---------- */
.scroll-step.exploration {
  grid-template-columns: 1fr;
  gap: 32px;
  padding-top: 14vh;
  padding-bottom: 14vh;
}
.scroll-step.exploration .prose-wide {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.scroll-step.exploration .chart-wide {
  max-width: 1440px;
  margin: 40px auto 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
}
.exploration-col {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.exploration-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.exploration-panel-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.3;
}
.exploration-panel-chart {
  width: 100%;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 1.5rem;
  padding: 20px 24px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.controls label {
  display: flex;
  flex-direction: column;
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  gap: 6px;
  min-width: 220px;
}
.controls select {
  font-family: var(--sans);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 400;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: white;
}

/* ---------- SVG marks ---------- */
.dot          { fill: var(--gray); stroke: white; stroke-width: 1; }
.dot.nordic   { fill: var(--teal); }
.dot.contrast { fill: var(--orange); }
.dot.wide-ci  { fill-opacity: .35; stroke: var(--gray-dark); }
.dot.wide-ci.nordic   { stroke: var(--teal); }
.dot.wide-ci.contrast { stroke: var(--orange); }

.trend-line {
  stroke: #888;
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  fill: none;
}
.line {
  fill: none;
  stroke-width: 2;
}
.line.nordic-finland { stroke: var(--teal); stroke-width: 2.6; }
.line.nordic-other   { stroke: var(--gray); }
.uncertainty-band    { fill: var(--teal); fill-opacity: .14; }

.bar.male   { fill: var(--teal); }
.bar.female { fill: var(--gray); }
.bar.finland { fill: var(--teal); }
.bar.denmark { fill: var(--gray-dark); }
.bar.happiness { fill: #f0a13a; }
.bar.suicide   { fill: #6e6e6e; }
.bar.antidepressant { fill: var(--teal); fill-opacity: 0.5; }
.bar.suicide-rate   { fill: var(--teal); }

.gridlines line { stroke: var(--rule); stroke-dasharray: 2 2; }
.gridlines path { display: none; }

.axis path,
.axis line { stroke: #ccc; }
.axis text { fill: var(--muted); font-size: 11px; }
.axis-label { fill: var(--ink); font-size: 12px; font-weight: 600; }

.country-label {
  font-size: 11px;
  fill: var(--ink);
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3;
}

.callout {
  font-size: 12px;
  fill: var(--ink);
}
.callout-bg {
  fill: var(--highlight-bg);
  stroke: var(--orange);
  stroke-width: 1;
  rx: 4; ry: 4;
}
.annotation-line {
  stroke: var(--orange);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

/* Choropleth */
.country-shape {
  stroke: white;
  stroke-width: .5;
}
.country-shape.nordic {
  stroke: var(--teal);
  stroke-width: 1.4;
}
.legend text { font-size: 11px; fill: var(--muted); }

/* ---------- Tooltip ---------- */
.tooltip {
  position: absolute;
  pointer-events: none;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: .88rem;
  line-height: 1.45;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 100;
  max-width: 240px;
}
.tooltip strong { color: var(--ink); }
.tooltip .tt-label { color: var(--muted); }
.tooltip .tt-warn  { color: var(--orange); font-weight: 600; }

/* ---------- Footer ---------- */
.page-footer {
  border-top: 1px solid var(--rule);
  margin-top: 6vh;
  padding: 4vh 24px 6vh;
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
}
.page-footer .sources { max-width: 880px; margin: 0 auto 1rem; }
.page-footer .colophon { font-size: .8rem; opacity: .7; }

.page-footer .references {
  max-width: 880px;
  margin: 0 auto 1.25rem;
  text-align: left;
}
.page-footer .ref-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .75rem;
  text-align: center;
  letter-spacing: .02em;
}
.page-footer .ref-subheading {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1rem 0 .4rem;
  letter-spacing: .01em;
}
.page-footer .ref-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}
.page-footer .ref-list li {
  margin: 0 0 .5rem;
  line-height: 1.55;
}
.page-footer .ref-label {
  font-weight: 600;
  color: var(--ink);
}
.page-footer .ref-list a {
  color: var(--muted);
  text-decoration: underline;
  word-break: break-word;
}
.page-footer .ref-list a:hover { color: var(--ink); }

.page-footer .authors {
  margin-top: 2.5rem;
  text-align: center;
  font-size: .85rem;
  color: var(--gray);
}

/* ---------- Accessibility utility ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive: stack chart below prose under 900px ---------- */
@media (max-width: 900px) {
  .scroll-step {
    grid-template-columns: 1fr;
    padding: 8vh 20px;
    min-height: auto;
  }
  .scroll-step .prose,
  .scroll-step .chart.sticky {
    position: static;
    height: auto;
  }
  .scroll-step .chart.sticky {
    min-height: 420px;
  }
  .controls label { min-width: 100%; }
}

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