/* ============================================================================
   SOFTAMESTARI 2026, koodauksen SM-kisat
   ----------------------------------------------------------------------------
   Koko sivuston tyylit. Ei buildia, ei riippuvuuksia, ei ulkoisia pyyntöjä.

   Konsepti: STADION x TERMINAALI. Yökenttä tulvavalossa, luettuna
   tulostaulun ja komentokehotteen läpi. Jättimäinen otsikkotyppi,
   tulostaulunumerot, juoksevat tekstinauhat ja diagonaalit varoitusraidat.

   Typografia tulee järjestelmästä, ei verkosta: raskas grotesk display
   (Arial Black) ja monospace kaikkeen muuhun. Nolla ulkoista pyyntöä.
   ============================================================================ */

/* ---------- 1. Tokens ----------------------------------------------------
   Paletti: Skaba assets.pdf (Curious). Terminaalin ANSI-värit mutetettuna,
   pohjana brändin ink. Suomisininen on otettu paletin ympyrästä (#002F6B);
   PDF:ään merkitty #9F732D on pronssin koodi väärässä kohdassa.

   Täysi paletti:
     ink      #222222   punainen #FF6157   vihreä  #81F372   keltainen #F6F274
     sininen  #6F6FF1   magenta  #ED5EED   syaani  #8CE8E8   valkoinen #FBF8F3
     kulta    #E4B21B   hopea    #CFCCC4   pronssi #9F732D   suomi     #002F6B
   -------------------------------------------------------------------------- */

:root {
  /* --- Pinnat ------------------------------------------------------------ */
  --void:    #222222;   /* kangas, Curiousin brändi-ink */
  --void-2:  #262A2E;   /* nostetut pinnat: kortit, laatikot, vaihtolohkot */
  --void-3:  #374049;   /* hiusviivat, aavenumerot */
  --suomi:   #002F6B;   /* ympyrästä mitattu; ei käytössä pinnassa, kontrasti inkillä 1.2:1 */

  /* --- Teksti ------------------------------------------------------------ */
  --bone:    #FBF8F3;   /* pääteksti, 15.0:1 kankaalla */
  --smoke:   #96A3AB;   /* metateksti, 6.2:1 kankaalla */
  --ash:     #5A6672;   /* himmein reunus */

  /* --- Aksentit ---------------------------------------------------------- */
  --accent:    #8CE8E8; /* syaani, 11.2:1, linkit ja live */
  --accent-2:  #E4B21B; /* kulta, 8.1:1, kisamitali */
  --accent-3:  #6F6FF1; /* ANSI-sininen, 4.0:1, vain viivat ja isot numerot */
  --on-accent: #222222; /* teksti syaanilla ja kullalla */
  --on-suomi:  #FBF8F3; /* teksti suomisinisellä, 12.2:1 */

  --glow:      rgba(140, 232, 232, 0.11);
  --seal-tint: rgba(140, 232, 232, 0.05);

  /* --- Typo -------------------------------------------------------------- */
  --display: "Arial Black", "Arial Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --tr-mega:  -0.035em;
  --tr-tight: -0.02em;
  --tr-wide:   0.14em;
  --tr-caps:   0.22em;

  /* --- Mitat ------------------------------------------------------------- */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --bar: 3px;      /* peruspaksuus, kaikki viivat ovat tätä tai tuplaa */
  --bar-2: 6px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 140px;
}

/* ---------- 2. Base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
  background: var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
}

p { margin: 0 0 var(--s4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--void); background: var(--accent); text-decoration-color: var(--void); }

ul, ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
li { margin-bottom: var(--s2); }

img, svg { max-width: 100%; height: auto; }

::selection { background: var(--accent); color: var(--void); }

:focus-visible {
  outline: var(--bar) solid var(--accent-2);
  outline-offset: 3px;
}

.hidden-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.jump {
  position: absolute; left: -9999px; top: 0; z-index: 120;
  background: var(--accent); color: var(--void);
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tr-wide); text-decoration: none;
  padding: var(--s3) var(--s5); border: var(--bar) solid var(--void);
}
.jump:focus { left: var(--s4); top: var(--s4); }

/* ---------- 3. Typografia ----------------------------------------------- */

.mega, .slam, .shout {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: var(--tr-mega);
  margin: 0;
}

/* Hero: pinottu jättiotsikko, rivi kerrallaan. */
.mega {
  text-transform: uppercase;
  line-height: 0.86;
  font-size: clamp(3.4rem, 13vw, 11rem);
}
.mega__l { display: block; }
.mega__l--accent { color: var(--accent); }
.mega__l--out {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  color: transparent;
  -webkit-text-stroke: clamp(2px, 0.4vw, 5px) var(--bone);
  text-stroke: clamp(2px, 0.4vw, 5px) var(--bone);
}
.mega__l--out .cursor {
  flex-shrink: 0;
  align-self: center;
  margin-left: 0.08em;
  height: 1.08em;
}

/* Osioiden otsikot: lyhyet, luettavat, ei versaalia. */
.slam {
  font-size: clamp(1.85rem, 4.2vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: var(--s5);
  max-width: 28ch;
}
.slam em { font-style: normal; color: var(--accent); }
.slam .out {
  color: transparent;
  -webkit-text-stroke: 2px var(--bone);
  text-stroke: 2px var(--bone);
}
.slab--accent .slam .out, .slab--accent-2 .slam .out {
  -webkit-text-stroke-color: var(--on-accent);
  text-stroke-color: var(--on-accent);
}

.shout {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--s4);
  max-width: 22ch;
}

/* Monospace-yläotsikot: numeroitu kuin lohko koodissa. */
.tag {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--accent);
  margin: 0 0 var(--s5);
}
.tag b { color: var(--accent-2); font-weight: 700; }

.dek {
  font-family: var(--mono);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--bone);
  max-width: 62ch;
}
.meta { font-size: 13px; color: var(--smoke); letter-spacing: 0.02em; }

.cursor {
  display: inline-block;
  width: clamp(4px, 0.08em, 8px);
  height: 0.82em;
  margin-left: 0.12em;
  background: var(--accent);
  vertical-align: baseline;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 4. Runko ---------------------------------------------------- */

.hold { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.hold--tight > * { max-width: 920px; }

.block { padding-block: clamp(4.5rem, 10vw, 7.5rem); position: relative; overflow: hidden; }
.block--short { padding-block: clamp(var(--s7), 6vw, var(--s8)); }

.slab--void  { background: var(--void); }
.slab--void2 { background: var(--void-2); }
.slab--accent   { background: var(--accent); color: var(--on-accent); }
.slab--accent-2 { background: var(--accent-2); color: var(--on-accent); }

.slab--accent a, .slab--accent-2 a { color: var(--on-accent); text-decoration-color: var(--on-accent); }
.slab--accent a:hover, .slab--accent-2 a:hover { background: var(--on-accent); color: var(--accent); }
.slab--accent .tag, .slab--accent-2 .tag { color: var(--on-accent); }
.slab--accent .dek, .slab--accent-2 .dek { color: var(--on-accent); }
.slab--accent .meta, .slab--accent-2 .meta { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }
/* Vaalea korostus kirkkaalla aksentilla jäi 2.7:1, eli lukukelvottomaksi.
   Korostus tehdään siksi ääriviivalla, ei värillä: sama kontrasti kuin
   muulla otsikolla, ja se istuu talon typografiaan. */
.slab--accent .slam em, .slab--accent-2 .slam em {
  color: transparent;
  -webkit-text-stroke: 2px var(--on-accent);
  text-stroke: 2px var(--on-accent);
}

/* Jättinumero osion reunan yli. Puhdas koriste. */
.block__index {
  position: absolute;
  top: clamp(8px, 2vw, 28px);
  right: calc(var(--gutter) * -0.2);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(7rem, 20vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--void-3);
  text-stroke: 2px var(--void-3);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.slab--accent .block__index, .slab--accent-2 .block__index {
  -webkit-text-stroke-color: color-mix(in srgb, var(--on-accent) 16%, transparent);
}
.block > .hold { position: relative; z-index: 1; }

/* Diagonaali varoitusraita osioiden saumassa. */
.hazard {
  height: 18px;
  background: repeating-linear-gradient(
    45deg,
    var(--accent) 0 14px,
    var(--void) 14px 28px
  );
  border-block: var(--bar) solid var(--void);
}
.hazard--accent-2 {
  background: repeating-linear-gradient(
    -45deg,
    var(--accent-2) 0 14px,
    var(--void) 14px 28px
  );
}

/* ---------- 5. Chrome: nauha + navigaatio -------------------------------- */

.chrome { position: sticky; top: 0; z-index: 100; }

.ticker {
  background: var(--accent);
  color: var(--void);
  border-bottom: var(--bar) solid var(--void);
  overflow: hidden;
  white-space: nowrap;
}
.ticker__track {
  display: inline-flex;
  gap: var(--s6);
  padding-block: 5px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  animation: roll 34s linear infinite;
  will-change: transform;
}
.ticker__track span { white-space: nowrap; }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
  background: var(--void);
  border-bottom: var(--bar) solid var(--accent);
  padding: var(--s3) var(--gutter);
}

.mark { display: flex; align-items: center; gap: var(--s3); text-decoration: none; margin-right: auto; }
.mark:hover { background: transparent; }
.mark__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(17px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  color: var(--bone);
  line-height: 1;
}
.mark:hover .mark__name { color: var(--accent); }
.mark__badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  background: var(--accent-2);
  color: var(--void);
  padding: 3px var(--s2);
  line-height: 1.3;
}

.routes { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.routes a {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  text-decoration: none;
  color: var(--bone);
  padding: var(--s2) var(--s3);
  border: 2px solid transparent;
}
@media (max-width: 640px) {
  .routes { width: 100%; }
  .routes a { padding: var(--s2); letter-spacing: 0.08em; font-size: 11px; }
}
.routes a:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.routes a.on { background: var(--accent); color: var(--void); border-color: var(--accent); }

/* ---------- 6. Hero ----------------------------------------------------- */

.hero {
  position: relative;
  background: var(--void);
  padding-block: clamp(var(--s7), 7vw, var(--s9)) clamp(var(--s8), 8vw, var(--s10));
  overflow: hidden;
}
/* Tulvavalo yläkulmasta. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: 140%; height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(60% 55% at 50% 0%, var(--glow), transparent 70%);
  pointer-events: none;
}

.hero__grid { position: relative; display: grid; gap: clamp(var(--s7), 5vw, var(--s8)); }
@media (min-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); align-items: center; }
}

.hero__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: var(--accent);
  margin: 0 0 var(--s5);
}
.hero__kicker i { font-style: normal; color: var(--ash); }
.hero__kicker a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hero__kicker a:hover {
  color: var(--void);
  background: var(--accent);
  text-decoration: none;
}

.hero .mega {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  margin-bottom: var(--s5);
}
.hero .mega__l { white-space: nowrap; }
@media (max-width: 640px) {
  .hero .mega__l { white-space: normal; }
}

.hero .dek { margin-bottom: var(--s6); }

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__poster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__mascot {
  display: block;
  width: clamp(220px, 22vw, 320px);
  height: auto;
  background: #fff;
  border: var(--bar) solid var(--accent);
  box-shadow: 10px 10px 0 var(--accent-2);
}

.hero__poster .stamp {
  margin-top: -24px;
  margin-bottom: 0;
  transform: rotate(-3.5deg);
  z-index: 2;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  text-align: center;
}

.stamp {
  display: inline-block;
  transform: rotate(-3.5deg);
  background: var(--accent-2);
  color: var(--void);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  line-height: 1;
  padding: var(--s3) var(--s5);
  border: var(--bar) solid var(--void);
  box-shadow: 8px 8px 0 var(--accent);
  margin-bottom: var(--s6);
}
.stamp small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  margin-top: 4px;
}

/* ---------- 7. Painikkeet ----------------------------------------------- */

.hits { display: flex; flex-wrap: wrap; gap: var(--s4); }

.hit {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-wide);
  text-decoration: none;
  padding: var(--s4) var(--s6);
  border: var(--bar) solid var(--accent);
  background: var(--accent); color: var(--void);
  box-shadow: 6px 6px 0 var(--accent-2);
  transition: transform 120ms linear, box-shadow 120ms linear, background-color 120ms linear;
}
.hit:hover {
  background: var(--accent-2); border-color: var(--accent-2); color: var(--void);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--accent);
}
.hit:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--accent); }

.hit--hollow {
  background: transparent; color: var(--accent);
  box-shadow: 6px 6px 0 var(--void-3);
}
.hit--hollow:hover { background: var(--accent); color: var(--void); box-shadow: 9px 9px 0 var(--accent-2); }

.slab--accent .hit, .slab--accent-2 .hit {
  background: var(--on-accent); color: var(--accent); border-color: var(--on-accent);
  box-shadow: 6px 6px 0 var(--bone);
}
.slab--accent .hit:hover, .slab--accent-2 .hit:hover {
  background: var(--bone); color: var(--on-accent); border-color: var(--on-accent);
  box-shadow: 9px 9px 0 var(--on-accent);
}

/* ---------- 8. Tulostaulu ----------------------------------------------- */

.board { border: var(--bar-2) solid var(--accent); background: var(--void-2); }
.board[hidden] { display: none; }

.board__head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  background: var(--accent); color: var(--void);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  padding: var(--s2) var(--s4);
}

.board__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.board__cell {
  padding: var(--s5) var(--s2);
  text-align: center;
  border-left: 2px solid var(--void-3);
}
.board__cell:first-child { border-left: 0; }
.board__num {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.board__unit {
  display: block; margin-top: var(--s2);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--smoke);
}
.board__foot {
  border-top: 2px solid var(--void-3);
  padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  color: var(--smoke);
}
.board__foot p { max-width: none; }

/* ---------- 9. Speksirivit (perustiedot, avoimet asiat) ------------------ */

.spec { list-style: none; margin: 0; padding: 0; border-top: var(--bar) solid var(--accent); }
.spec > li {
  display: grid; gap: var(--s1) var(--s6);
  padding-block: var(--s4);
  border-bottom: 2px solid var(--void-3);
  margin: 0;
}
@media (min-width: 760px) { .spec > li { grid-template-columns: 260px minmax(0, 1fr); align-items: baseline; } }
.spec__k {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: var(--accent);
}
.spec__v { font-size: 16px; margin: 0; max-width: 62ch; }
.spec__v b { color: var(--bone); }
.spec__v i { font-style: normal; color: var(--smoke); }
.slab--accent .spec, .slab--accent-2 .spec { border-top-color: var(--on-accent); }
.slab--accent .spec > li, .slab--accent-2 .spec > li { border-bottom-color: color-mix(in srgb, var(--on-accent) 25%, transparent); }
.slab--accent .spec__k, .slab--accent-2 .spec__k { color: var(--on-accent); }
.slab--accent .spec__v i, .slab--accent-2 .spec__v i { color: color-mix(in srgb, var(--on-accent) 65%, transparent); }

/* Tulostaulumainen perustietopalkki. */
.strip { display: grid; grid-template-columns: 1fr; border-top: var(--bar) solid var(--on-accent); }
@media (min-width: 640px) { .strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip__cell { padding: var(--s5) var(--gutter); border-bottom: var(--bar) solid var(--on-accent); }
@media (min-width: 640px) {
  .strip__cell { border-right: var(--bar) solid var(--on-accent); }
}
.strip__k {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: color-mix(in srgb, var(--on-accent) 72%, transparent); margin: 0 0 var(--s2);
}
.strip__v {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  text-transform: uppercase; letter-spacing: var(--tr-tight);
  line-height: 1; margin: 0;
}
.strip__n { margin: var(--s3) 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: color-mix(in srgb, var(--on-accent) 78%, transparent); max-width: 34ch; }

/* ---------- 10. Radat (sarjat) ------------------------------------------ */

.lanes { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lane {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--void-2);
  border: var(--bar) solid var(--accent);
  padding: clamp(var(--s6), 4vw, var(--s7));
}
.lane__no {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(3.6rem, 8vw, 6.4rem);
  line-height: 0.8; letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 3px var(--accent);
  text-stroke: 3px var(--accent);
  margin: 0 0 var(--s4);
}
.lane__label {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: var(--accent-2); margin: 0 0 var(--s3);
}
.lane__age { font-family: var(--mono); font-size: 13px; color: var(--smoke); margin: 0 0 var(--s5); }
.lane p { color: var(--bone); }


/* ---------- 11. Salattu tehtävä ----------------------------------------- */

.sealed {
  border: var(--bar) dashed var(--accent);
  background:
    repeating-linear-gradient(-45deg, var(--seal-tint) 0 10px, transparent 10px 20px),
    var(--void-2);
  padding: clamp(var(--s6), 5vw, var(--s8));
  text-align: center;
}
.sealed__lock {
  font-family: var(--mono); font-size: clamp(1.1rem, 3.4vw, 2.1rem);
  font-weight: 700; letter-spacing: var(--tr-caps);
  color: var(--accent); margin: 0 0 var(--s4);
}
.sealed p { margin-inline: auto; color: var(--smoke); }
.sealed__when {
  display: inline-block; margin-top: var(--s5);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-wide);
  background: var(--accent); color: var(--void);
  padding: var(--s2) var(--s4);
}

.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--bar) dashed var(--accent);
  background:
    repeating-linear-gradient(-45deg, var(--seal-tint) 0 10px, transparent 10px 20px),
    var(--void-2);
  overflow: hidden;
}
.screen__slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  text-align: center;
}
.screen__slot p { margin-inline: auto; color: var(--smoke); max-width: 46ch; }
.screen iframe,
.screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.stream-banner {
  border: 1px solid var(--void-3);
  background: var(--void);
  padding: clamp(var(--s4), 3vw, var(--s6));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
}
.stream-banner__note {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--smoke);
  margin: 0;
  max-width: 60ch;
}

.partner {
  display: grid; gap: var(--s6);
  border: var(--bar) solid var(--bone);
  padding: clamp(var(--s5), 4vw, var(--s7));
}
.partner__intro {
  display: grid; gap: var(--s6);
}
@media (min-width: 900px) {
  .partner__intro { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}
.partner__role {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: var(--accent-2); margin: 0 0 var(--s3);
}
.partner__brand {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.partner__logo {
  width: clamp(56px, 6vw, 76px);
  height: clamp(56px, 6vw, 76px);
  flex-shrink: 0;
  object-fit: contain;
}
.partner__name {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1; margin: 0;
}
.cite {
  display: grid;
  gap: var(--s5);
  align-items: start;
  margin: 0;
  padding-top: var(--s6);
  border-top: 2px solid var(--ash);
  color: var(--smoke);
}
.cite .host__card { width: 160px; }
@media (min-width: 620px) {
  .cite { grid-template-columns: 180px minmax(0, 1fr); }
  .cite .host__card { width: auto; }
}
.cite__body { min-width: 0; }
.cite p { margin: 0 0 var(--s4); max-width: 54ch; }
.cite footer {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--bone); margin: 0;
}

.allies {
  display: grid;
  gap: var(--s4);
}
@media (min-width: 620px) {
  .allies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .allies { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ally {
  border: 2px solid var(--ash);
  background: var(--void-2);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  transition: border-color 150ms ease;
}
.ally:hover {
  border-color: var(--smoke);
}
.ally__role {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: var(--accent-2); margin: 0 0 var(--s3);
}
.ally__logo {
  display: grid;
  place-items: center;
  height: 96px;
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--bone);
}
.ally__logo img {
  display: block;
  max-height: 64px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0;
  object-fit: contain;
}
.ally__logo--word {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: -0.02em;
  color: var(--void);
  text-align: center;
  line-height: 1.15;
}
.ally__name {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  letter-spacing: -0.02em;
  line-height: 1.2; margin: 0 0 var(--s2);
}
.ally p {
  color: var(--smoke);
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 var(--s3);
}
.ally p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--s2);
}

/* ---------- 12. Tuomarit ------------------------------------------------ */

.judges { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .judges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .judges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.judge {
  background: var(--void-2);
  border: 2px solid var(--ash);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.judge__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 10%;
  display: block;
  border-bottom: 2px solid var(--ash);
  flex-shrink: 0;
}
.judge__img--ilkka { object-position: 18% 10%; }
.judge__img--anne { object-position: 43% 10%; }
.judge__meta {
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  gap: 6px;
}
.judge__slot {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0; color: var(--bone);
}
.judge__note {
  font-family: var(--mono); font-size: 12px; line-height: 1.35;
  color: var(--smoke); margin: 0;
}

.tba {
  position: absolute; top: var(--s5); right: var(--s3);
  transform: rotate(9deg);
  background: var(--accent-2); color: var(--void);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  padding: var(--s1) var(--s5);
  border: 2px solid var(--void);
}

/* Iso 3:4-muotokuva + teksti: juontaja. */
.host {
  display: grid;
  gap: var(--s6);
  align-items: center;
}
@media (min-width: 620px) {
  .host { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (min-width: 1040px) {
  .host { grid-template-columns: 260px minmax(0, 1fr); }
}
.host .host__card {
  width: min(240px, 100%);
}
@media (min-width: 620px) {
  .host .host__card { width: auto; }
}
.host__card {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--void-2);
  border: 2px solid var(--ash);
  overflow: hidden;
}
.host__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.host__body { min-width: 0; }
.host__role {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: var(--accent-2); margin: 0 0 var(--s2);
}
.host__body p { color: var(--smoke); max-width: 42ch; }

/* Lähetyksen juontajakortti */
.broadcast__host-card {
  background: var(--void-2);
  border: 2px solid var(--ash);
  display: grid;
  align-items: center;
  overflow: hidden;
  margin-bottom: var(--s6);
}
@media (min-width: 640px) {
  .broadcast__host-card {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}
.broadcast__host-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 10%;
  display: block;
  border-right: 2px solid var(--ash);
}
@media (max-width: 639px) {
  .broadcast__host-card img {
    border-right: none;
    border-bottom: 2px solid var(--ash);
  }
}
.broadcast__host-body {
  padding: clamp(var(--s4), 3vw, var(--s6));
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.broadcast__role {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--accent-2);
  margin: 0;
}

.broadcast__host-body .shout {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  margin: 0;
  color: var(--bone);
}

.broadcast__host-desc {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--smoke);
  margin: 0;
  max-width: 65ch;
}

/* Lähetyksen ohjelmarunko: 3 korttia rinnakkain */
.broadcast__program-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  text-transform: uppercase;
  color: var(--bone);
  letter-spacing: var(--tr-tight);
  margin: 0 0 var(--s4);
}

.broadcast__program-grid {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
@media (min-width: 800px) {
  .broadcast__program-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.broadcast__program-card {
  background: var(--void-2);
  border: 2px solid var(--ash);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.broadcast__program-num {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.broadcast__program-card h4 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
  color: var(--bone);
  letter-spacing: -0.01em;
}

.broadcast__program-card p {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--smoke);
  margin: 0;
}

/* Lähetyksen asiantuntijat */
.broadcast__experts-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  text-transform: uppercase;
  color: var(--bone);
  letter-spacing: var(--tr-tight);
  margin: var(--s6) 0 var(--s4);
}

.broadcast__experts-grid {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
@media (min-width: 640px) {
  .broadcast__experts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.broadcast__expert-card {
  background: var(--void-2);
  border: 2px solid var(--ash);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  overflow: hidden;
}

.broadcast__expert-img {
  width: 96px;
  height: 120px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--ash);
  flex-shrink: 0;
  display: block;
}

.broadcast__expert-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.broadcast__expert-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.2;
  margin: 0;
  color: var(--bone);
  letter-spacing: -0.01em;
}

.broadcast__expert-role {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--smoke);
  margin: 0;
}

/* ---------- 13. Vaiheet ------------------------------------------------- */

.runs { list-style: none; margin: 0; padding: 0; counter-reset: run; }
.runs > li {
  counter-increment: run;
  display: grid; gap: var(--s3) var(--s6);
  padding-block: var(--s6);
  border-top: 2px solid var(--void-3);
  margin: 0;
}
@media (min-width: 800px) { .runs > li { grid-template-columns: 120px minmax(0, 1fr); } }
.runs > li:first-child { border-top: var(--bar) solid var(--accent); }
.runs > li:last-child { border-bottom: var(--bar) solid var(--accent); }
.runs > li::before {
  content: counter(run, decimal-leading-zero);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 0.9; letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent-2);
  text-stroke: 2px var(--accent-2);
}
.runs p { color: var(--smoke); }

/* ---------- 14. Huomiolaatikko ------------------------------------------ */

.note {
  border-left: var(--bar-2) solid var(--accent-2);
  background: var(--void-2);
  padding: var(--s5) var(--s6);
}
.note__t {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  text-transform: uppercase; letter-spacing: var(--tr-tight);
  margin: 0 0 var(--s3);
}
.note p { color: var(--smoke); }
.slab--accent .note, .slab--accent-2 .note { background: var(--void); border-left-color: var(--accent); }
.slab--accent .note p, .slab--accent-2 .note p { color: var(--smoke); }
.slab--accent .note__t, .slab--accent-2 .note__t { color: var(--bone); }

/* ---------- 15. UKK / FAQ ----------------------------------------------- */

.faq { list-style: none; margin: 0; padding: 0; border-top: var(--bar) solid var(--accent); }
.faq > li {
  padding-block: var(--s5);
  border-bottom: 2px solid var(--void-3);
  margin: 0;
}
.faq__q {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--bone);
  margin: 0 0 var(--s3);
}
.faq__a {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  color: var(--smoke);
  margin: 0;
  max-width: 68ch;
}
.faq__a b { color: var(--bone); }
.faq__a a { color: var(--accent); }

/* ---------- 16. Kutsu ja footer ----------------------------------------- */

.callout { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .callout { grid-template-columns: minmax(0, 1.4fr) auto; } }

.foot { background: var(--void); border-top: var(--bar-2) solid var(--accent); padding-block: var(--s8) var(--s5); }
.foot__grid { display: grid; gap: var(--s7); padding-bottom: var(--s6); border-bottom: 2px solid var(--void-3); }
@media (min-width: 800px) { .foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); justify-content: space-between; } }
.foot h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: var(--accent); margin: 0 0 var(--s4);
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: var(--s3); font-size: 14px; }
.foot__logo { display: block; width: 176px; margin-bottom: var(--s5); }
.foot__line { font-family: var(--mono); font-size: 13px; color: var(--smoke); max-width: 40ch; }
.foot__base {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7);
  justify-content: space-between;
  padding-top: var(--s5);
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--ash);
}
.foot__base p { margin: 0; max-width: none; }


/* ---------- 19. Salasanasuojaus / Auth Overlay ------------------------ */

html:not(.is-authenticated) body {
  overflow: hidden;
}
html:not(.is-authenticated) #main,
html:not(.is-authenticated) .chrome,
html:not(.is-authenticated) .foot,
html:not(.is-authenticated) .hazard {
  display: none !important;
}
.is-authenticated #authOverlay {
  display: none !important;
}
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.auth-box {
  background: var(--void-2);
  border: var(--bar) solid var(--bone);
  padding: clamp(var(--s5), 5vw, var(--s7));
  max-width: 440px;
  width: 100%;
  box-shadow: 10px 10px 0 var(--accent);
}
.auth-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--accent-2);
  display: inline-block;
  margin-bottom: var(--s3);
}
.auth-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s2);
  color: var(--bone);
}
.auth-desc {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--smoke);
  margin-bottom: var(--s5);
  line-height: 1.5;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.auth-error {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-2);
  font-weight: 700;
  margin: 0;
}

/* ---------- 18. Ilmoittautumislomake ------------------------------------ */

.form-card {
  background: var(--void);
  border: 2px solid var(--ash);
  padding: clamp(var(--s5), 4vw, var(--s7));
  max-width: 760px;
  box-shadow: 8px 8px 0 var(--void-3);
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.form-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--accent);
}

.radio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 600px) {
  .radio-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.radio-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--void-2);
  border: 2px solid var(--void-3);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.radio-card:hover {
  border-color: var(--smoke);
  background: color-mix(in srgb, var(--void-2) 90%, var(--accent));
}
.radio-card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  border: 2px solid var(--smoke);
  border-radius: 0;
  background: var(--void);
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-content: center;
}
.radio-card input[type="radio"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--void);
}
.radio-card:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--void-2) 80%, var(--accent));
}

.radio-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radio-card__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.radio-card__desc {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--smoke);
  line-height: 1.35;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.form-input {
  width: 100%;
  padding: var(--s4) var(--s4);
  font-family: var(--mono);
  font-size: 15px;
  color: var(--bone);
  background: var(--void-2);
  border: 2px solid var(--void-3);
  border-radius: 0;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-input::placeholder {
  color: var(--ash);
}
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.form-info {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: color-mix(in srgb, var(--void-2) 75%, var(--accent));
  border-left: 4px solid var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--smoke);
}
.form-info strong {
  color: var(--bone);
}
.form-info__icon {
  font-family: var(--display);
  font-weight: 900;
  color: var(--accent);
  font-size: 16px;
  line-height: 1.2;
}

.form-checkbox-wrap {
  margin-top: calc(-1 * var(--s2));
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--smoke);
}
.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  border: 2px solid var(--smoke);
  border-radius: 0;
  background: var(--void);
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-content: center;
}
.checkbox-label input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--void);
}
.checkbox-label input[type="checkbox"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.checkbox-label a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.checkbox-label a:hover {
  color: var(--bone);
}

/* ---------- 20. Modaalit (Rekisteriseloste) ----------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.modal[hidden] {
  display: none !important;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.88);
  backdrop-filter: blur(4px);
}
.modal__window {
  position: relative;
  z-index: 1;
  background: var(--void-2);
  border: var(--bar) solid var(--accent);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 12px 12px 0 var(--void);
}
.modal__header {
  padding: var(--s4) var(--s5);
  border-bottom: 2px solid var(--void-3);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--void);
}
.modal__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
  color: var(--bone);
  margin: 0;
}
.modal__close {
  background: transparent;
  border: none;
  color: var(--smoke);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.modal__close:hover {
  color: var(--accent-2);
}
.modal__body {
  padding: var(--s5);
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--smoke);
}
.modal__body h4 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 14px;
  color: var(--bone);
  margin: var(--s4) 0 var(--s2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.modal__body h4:first-child {
  margin-top: 0;
}
.modal__body ul {
  padding-left: 20px;
  margin-bottom: var(--s3);
}
.modal__body a {
  color: var(--accent);
}
.modal__footer {
  padding: var(--s3) var(--s5);
  border-top: 2px solid var(--void-3);
  background: var(--void);
  display: flex;
  justify-content: flex-end;
}

/* ---------- Apurit ------------------------------------------------------ */

.gap { height: 40px; }
.gap--sm { height: 32px; }
.push { margin-top: 40px; }
.push--lg { margin-top: 48px; }

/* Outlined type relies on -webkit-text-stroke. Without it, transparent text
   would vanish, so fall back to solid. */
@supports not (-webkit-text-stroke: 1px #000) {
  .mega__l--out, .slam .out, .lane__no, .runs > li::before, .block__index {
    color: var(--bone);
  }
  .slab--accent .slam em, .slab--accent-2 .slam em { color: var(--on-accent); }
  .lane__no { color: var(--accent); }
  .runs > li::before { color: var(--accent-2); }
  .block__index { color: var(--void-3); }
}

/* ---------- 17. Liike ja tuloste ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  .cursor { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .hit:hover, .hit:active { transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  body::after, .chrome, .board, .hazard, .block__index { display: none; }
  .hero, .slab--void, .slab--void2, .slab--accent, .slab--accent-2, .foot { background: #fff !important; color: #000 !important; }
  .mega__l--out, .lane__no, .runs > li::before, .slam .out {
    color: #000 !important; -webkit-text-stroke: 0 !important;
  }
  .acid, .tag, .spec__k, .foot h2 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .judge::after { background: none; }
}