:root{
  --bg:#0d1b2a;          /* page background — dark navy */
  --text:#e8eef4;        /* primary text — ice (hero, numbers, headlines) */
  --body:#c4d0de;        /* body / paragraph text (off-white, not pure white) */
  --muted:#8294aa;       /* muted: eyebrow, source strings, section label, disclaimer */
  --gold:#c9a84c;        /* accent / reveal highlight (unchanged) */
  --gold-ink:#0d1b2a;    /* text on gold — navy (unchanged) */
  --censor:#1c2c40;      /* redaction bars + decorative strips */
  --line:#22344a;        /* hairline dividers (none in this build — reserved) */
  --display:'Playfair Display',Georgia,serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--serif);
  color:var(--body);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---- reading column ---- */
.col{
  max-width:720px;
  margin:0 auto;
  padding:56px 22px 96px;   /* bottom space reserved for the fixed toggle */
}

/* ============================================================
   Redaction mechanism
   Real text always sits in the DOM. A cover bar overlays
   each line and retracts (scaleX 1 -> 0) to reveal it —
   bringing the figures into the light on a dark ground.
   ============================================================ */
.redact{position:relative}
.cover{
  position:absolute;
  top:-2px;left:-4px;right:-4px;bottom:-2px;
  background:var(--censor);
  border-radius:1px;
  transform:scaleX(1);
  transform-origin:right center;
  z-index:2;
  pointer-events:none;
}
/* decorative strips: redacted texture that reveals nothing */
.deco{
  height:18px;
  margin:18px 0;
  background:var(--censor);
  border-radius:1px;
  transform:scaleX(1);
  transform-origin:right center;
}

/* ---- eyebrow ---- */
.eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 26px;
}

/* ---- hero ---- */
.hero{
  font-family:var(--display);
  font-weight:800;
  font-size:2.05rem;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--text);
  margin:0 0 22px;
}
.hero .redact{display:inline-block}
.hero .line1{margin-bottom:6px}
.hero .line2{display:block}
/* gold highlight = the reveal brought into the light */
.gold{
  background:var(--gold);
  color:var(--gold-ink);
  padding:0 .12em;
  border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ---- sub-hero ---- */
.subhero{
  display:inline-block;
  font-size:1.06rem;
  line-height:1.5;
  margin:0 0 34px;
}
.subhero .muted{color:var(--muted)}
.subhero .ink{color:var(--text)}

/* ---- section label ---- */
.seclabel{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 22px;
}

/* ---- facts ---- */
.facts{list-style:none;margin:0;padding:0}
.fact{margin:0 0 30px}
/* each fact links to its sourcing on evropumalin.is */
.factlink{display:block;color:inherit;text-decoration:none;border-radius:2px}
.factlink:hover .num,
.factlink:focus-visible .num{
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}
.factlink:hover .src{color:var(--text)}
.factlink:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
/* each part on its own line; fit-content keeps the cover bars hugging
   the text instead of spanning the full column */
.fact .num{
  display:block;
  width:fit-content;
  max-width:100%;
  font-family:var(--display);
  font-weight:700;
  font-size:1.7rem;
  line-height:1.1;
  color:var(--text);
  margin:0 0 6px;
}
.fact .body{
  display:block;
  width:fit-content;
  max-width:62ch;
  font-size:1.08rem;          /* nudged ~1px up for comfort on dark */
  line-height:1.5;
  margin:0 0 10px;
}
.fact .meta{
  display:flex;
  width:fit-content;
  max-width:100%;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}

/* ---- confidence-tier pills ---- */
.tier{
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:3px;
  line-height:1;
  white-space:nowrap;
}
.tier--stadfest{background:var(--gold);color:var(--gold-ink)}
.tier--rokstutt{border:1.5px solid var(--text);color:var(--text)}
.tier--mat{border:1.5px dashed var(--muted);color:var(--muted)}
.src{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--muted);
}

/* ---- legend ---- */
.legend{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--muted);
  margin:8px 0 0;
}

/* ---- CTA + disclaimer ---- */
.cta{display:inline-block;font-size:1.02rem;margin:6px 0 30px}
.cta a{
  font-family:var(--mono);
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--gold);
  text-decoration-thickness:2px;
}
.cta a:hover{color:var(--gold)}
.disclaimer{
  display:inline-block;
  font-size:.82rem;
  line-height:1.5;
  color:var(--muted);
  margin:0;
  max-width:60ch;
}

/* ============================================================
   Fixed toggle button (bottom-center)
   Gold on navy — a navy button would vanish on the dark page.
   ============================================================ */
.toggle{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--gold-ink);
  background:var(--gold);
  border:none;
  border-radius:999px;
  padding:12px 22px;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  z-index:50;
}
.toggle:hover{background:#b9982f}
.toggle:focus-visible{
  outline:3px solid var(--text);
  outline-offset:3px;
}

/* ---- desktop step-up (>=768px) ---- */
@media(min-width:768px){
  .col{padding:80px 22px 110px}
  .eyebrow{font-size:.8rem;margin-bottom:30px}
  .hero{font-size:2.9rem;margin-bottom:28px}
  .subhero{font-size:1.18rem;margin-bottom:42px}
  .fact .num{font-size:2.1rem}
  .fact .body{font-size:1.16rem}   /* nudged ~1px up for comfort on dark */
  .cover{top:-3px;bottom:-3px;left:-6px;right:-6px}
  .deco{height:24px;margin:24px 0}
}

/* ---- reduced motion handled in JS (instant toggle, no transitions) ---- */