/* Kaupunnin Aika — klassinen sanomalehti: musta muste, ohuet viivat,
   serifiotsikot ja pieni groteski etiketteihin. Ei muuta. */

:root {
  --paper: #fbfaf7;
  --ink: #121212;
  --muted: #5a5a5a;
  --rule: #d6d3cc;
  --heavy: #121212;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --black: "UnifrakturMaguntia", "Old English Text MT", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151515;
    --ink: #ece9e2;
    --muted: #a19d95;
    --rule: #3a3833;
    --heavy: #ece9e2;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--serif);
  font-optical-sizing: auto;
}
a { color: inherit; text-decoration: none; }
a:hover h2, a:hover h3, h2 a:hover, h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }

/* Masthead */
.masthead { text-align: center; padding-top: 14px; }
.dateline {
  display: flex; justify-content: space-between; gap: 16px;
  font: 600 12px/1.3 var(--sans); letter-spacing: .02em; color: var(--muted);
}
.title {
  display: block; font-family: var(--black); font-weight: 400;
  font-size: clamp(44px, 8.5vw, 84px); line-height: 1.05; padding: 10px 0 12px;
}
.title.small { font-size: 34px; padding: 0 0 8px; }
.sections {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 34px;
  border-top: 1px solid var(--heavy); border-bottom: 3px double var(--heavy);
  padding: 9px 0;
  font: 600 13px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em;
}
.sections a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
main, main.wrap { padding-top: 26px; padding-bottom: 56px; }

/* Shared type */
.kicker {
  display: inline-block; margin-bottom: 6px;
  font: 700 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.dek { margin: 6px 0 8px; color: var(--muted); font-size: 16px; line-height: 1.45; }
.byline { margin: 0; font: 400 12px/1.4 var(--sans); color: var(--muted); letter-spacing: .02em; }
.section-head {
  margin: 0 0 14px; padding-top: 8px; border-top: 2px solid var(--heavy);
  font: 700 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em;
}
.teaser h3 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.005em; }

/* Front page */
.front {
  display: grid; grid-template-columns: 2fr 1fr; gap: 0 32px;
  padding: 20px 0 28px; border-bottom: 1px solid var(--rule);
}
.lead h2 { margin: 0; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.lead .dek { font-size: 19px; }
.lead .excerpt { margin: 14px 0 0; }
.lead .more { display: inline-block; margin-top: 14px; }
.more { font: 600 13px/1 var(--sans); border-bottom: 1px solid var(--ink); }
.side { border-left: 1px solid var(--rule); padding-left: 32px; }
.side .teaser { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.side .teaser:last-child { border-bottom: 0; margin-bottom: 0; }
.side .teaser-kuva { display: block; margin-bottom: 10px; }
.side .teaser-kuva img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); border: 1px solid var(--rule); }
/* Etusivun alaosa: kolme osastopalstaa ja oikealla reunapalsta (tapahtumat,
   mainos). Reunapalsta on omalla rivillään, jotta se ei venytä yläosan
   pääjuttua ja nostoja. */
.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(250px, 290px); gap: 32px; padding-top: 28px; align-items: start; }
.rail { border-left: 1px solid var(--rule); padding-left: 28px; }
.rail .tapahtuu { margin-top: 0; }
@media (max-width: 1100px) and (min-width: 821px) {
  .columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
    border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 4px; }
  .rail .mainos-kt { margin-top: 26px; }
}
.column .teaser { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.column .teaser:last-child { border-bottom: 0; }

/* Etusivun osiot: osaston nosto kuvan kanssa ja alla ruudukko. Osiorivillä
   on oikealla reunapalsta (tapahtumat, mainokset). */
.osio-rivi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); gap: 32px; align-items: start; }
.osio-rivi > .rail { margin-top: 28px; }
.osio { padding-top: 28px; }
.osio-kuvaus { margin: -6px 0 10px; font: italic 400 15px/1.4 var(--serif); color: var(--muted); }
.osio .teaser.row { padding-top: 0; }
.osio-ruudukko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; padding-top: 16px; }
.osio-ruudukko .teaser { border-top: 1px solid var(--rule); padding-top: 12px; }
.osio-ruudukko .teaser h3 { font-size: 18px; }
.osio-lisaa { display: inline-block; margin-top: 16px; }
.osio-paakirjoitus .teaser h3 { font-style: italic; }
.ennakot { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ennakot li { border-top: 1px solid var(--rule); padding: 12px 0 14px; }
.ennakot h3 { margin: 4px 0 4px; font-size: 18px; line-height: 1.2; }
@media (max-width: 1100px) and (min-width: 821px) {
  .osio-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .osio-rivi { grid-template-columns: 1fr; gap: 0; }
  .osio-rivi > .rail { border-left: 0; padding-left: 0; }
  .osio-ruudukko, .ennakot { grid-template-columns: 1fr; }
}

/* Section page */
.section-title { text-align: center; padding: 6px 0 20px; border-bottom: 1px solid var(--rule); }
.section-title h1 { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -.01em; }
.section-title p { margin: 6px 0 0; color: var(--muted); font-style: italic; }
.stream { max-width: 760px; margin: 0 auto; }
.teaser.row { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.teaser.row h3 { font-size: 26px; }

/* Article */
.story { max-width: 680px; margin: 0 auto; }
.story header { text-align: center; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); }
.story h1 { margin: 4px 0 10px; font-size: clamp(32px, 5vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.story .dek { font-size: 20px; font-style: italic; }
.text { font-size: 19px; line-height: 1.62; }
.text p { margin: 0 0 1.1em; }
.text h2 { margin: 1.6em 0 .5em; font-size: 22px; font-weight: 700; }
.more-in { max-width: 1160px; margin: 48px auto 0; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }

/* Colophon */
.colophon { border-top: 3px double var(--heavy); padding: 22px 0 40px; text-align: center; }
.colophon nav { display: flex; justify-content: center; gap: 24px; font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.colophon p { margin: 14px 0 0; font: 400 12px/1.4 var(--sans); color: var(--muted); }

@media (max-width: 820px) {
  .front { grid-template-columns: 1fr; }
  .side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 24px; }
  .columns { grid-template-columns: 1fr; gap: 12px; }
  .rail { border-left: 0; padding-left: 0; }
  .dateline span:last-child { display: none; }
  .dateline { justify-content: center; }
}

/* Mainos: luuserit.org. Yksi pieni laatikko jutun lopussa. Oma riso-ilme
   (pinkki varjo, paksu viiva) erottaa sen jutusta; värit ovat kiinteät
   myös tummassa tilassa, koska ne ovat mainostajan. */
.mainos {
  --m-paperi: #F4EFE3; --m-muste: #141414; --m-pinkki: #FF48B0; --m-sininen: #1F4BFF;
  position: relative; margin: 36px 0 8px; font-family: var(--sans);
  background: var(--m-paperi); color: var(--m-muste);
  border: 2px solid var(--m-muste); box-shadow: 4px 4px 0 var(--m-pinkki);
}
.mainos a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; color: inherit; }
.mainos img { width: 48px; height: auto; flex: none; }
.mainos-teksti { display: grid; gap: 3px; min-width: 0; }
.mainos-etiketti {
  position: absolute; top: -9px; left: 10px;
  background: var(--m-muste); color: var(--m-paperi);
  font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 3px 6px;
}
.mainos-slogan { font: 800 16px/1.2 var(--sans); }
.mainos-sub { font-size: 13px; line-height: 1.35; color: #3a3a3a; }
.mainos-cta { font: 700 13px/1.3 var(--sans); color: var(--m-sininen); }
.mainos a:hover .mainos-cta { text-decoration: underline; }
/* Leveä luuserit-mainos etusivun osioiden välissä: kuva, maskotti ja teksti. */
.mainos--etusivu-leveä { margin: 36px 0 8px; }
.mainos--etusivu-leveä a { gap: 22px; padding: 0 22px 0 0; }
.mainos--etusivu-leveä .mainos-kuva { width: 260px; aspect-ratio: 3 / 2; object-fit: cover; align-self: stretch; height: auto; border-right: 2px solid var(--m-muste); }
.mainos--etusivu-leveä img:not(.mainos-kuva) { width: 64px; }
.mainos--etusivu-leveä .mainos-teksti { gap: 6px; padding: 18px 0; }
.mainos--etusivu-leveä .mainos-slogan { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.1; }
.mainos--etusivu-leveä .mainos-sub { font-size: 15px; }
.mainos--etusivu-leveä .mainos-cta { font-size: 15px; }
@media (max-width: 640px) {
  .mainos--etusivu-leveä a { flex-wrap: wrap; padding: 0 0 4px; gap: 0 12px; }
  .mainos--etusivu-leveä .mainos-kuva { width: 100%; border-right: 0; border-bottom: 2px solid var(--m-muste); }
  .mainos--etusivu-leveä img:not(.mainos-kuva) { width: 48px; margin-left: 14px; }
  .mainos--etusivu-leveä .mainos-teksti { flex: 1; padding: 12px 14px 12px 0; }
}

/* Mainos: Karjasillan kotiapurit (build.mjs: kotiapuriMainos), kuusi kokoa.
   Kotiapurien lämmin paperi ja terrakotta erottavat ne lehdestä; värit ovat
   kiinteät myös tummassa tilassa. Kaikki koot: /mainokset/. */
.mainos-ka {
  --m-paperi: #fbf3e4; --m-kortti: #fffaf0; --m-muste: #2b1d14; --m-hailea: #7a6150;
  --m-viiva: #e6d5bb; --m-terra: #b4532f; --m-okra: #c4862a;
  position: relative; margin: 30px 0 4px; font-family: var(--sans);
  background: var(--m-paperi); color: var(--m-muste); border: 1px solid var(--m-terra); border-radius: 4px;
}
.mainos-ka a { color: inherit; text-decoration: none; }
.mainos-ka .mainos-etiketti { background: var(--m-terra); color: var(--m-paperi); z-index: 2; }
.ka { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.ka-kuva { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--m-okra); transition: opacity .25s; }
.ka-teksti { display: grid; gap: 2px; min-width: 0; flex: 1; transition: opacity .25s; }
/* Vaihdossa häivytetään vain se, mikä muuttuu: tarve ja ratkaisu aina,
   kuva, nimi ja tilausnappi vain kun apuri vaihtuu (kotiapurit-mainos.js). */
.mainos-ka.vaihtuu .ka-tarve, .mainos-ka.vaihtuu .ka-ratkaisu,
.mainos-ka.vaihtuu-apuri .ka-kuva, .mainos-ka.vaihtuu-apuri .ka-nimilappu, .mainos-ka.vaihtuu-apuri .ka-cta { opacity: 0; }
.ka-nimilappu, .ka-cta { transition: opacity .25s, background .15s; }
.ka-tarve, .ka-ratkaisu { transition: opacity .25s; }
.ka-merkki { font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--m-terra); }
.ka-tarve { font: 700 21px/1.2 var(--serif); }
.ka-ratkaisu { font: 400 15px/1.35 var(--serif); }
.ka-hinta { font: 700 13px/1 var(--sans); color: var(--m-terra); white-space: nowrap; margin-left: 4px; }
.ka-cta {
  flex: none; justify-self: start; font: 700 14px/1 var(--sans); padding: 11px 16px; border-radius: 999px;
  background: var(--m-terra); color: var(--m-paperi) !important; white-space: nowrap;
}
.ka:hover .ka-cta, a.ka-cta:hover { background: var(--m-muste); }
.ka-cta--leve { display: block; text-align: center; margin-top: 14px; }
.ka-otsake { display: block; font: 700 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--m-hailea); margin-bottom: 6px; }
.ka-arvio { display: block; font: 600 12px/1.3 var(--sans); color: var(--m-hailea); }
.ka-arvio .tahdet { color: var(--m-okra); letter-spacing: 1px; }
.ka-lista { list-style: none; margin: 0; padding: 0; }
.ka-lista li + li { border-top: 1px solid var(--m-viiva); }
.ka-lista a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; font: 400 15px/1.3 var(--serif); }
.ka-lista a:hover span { text-decoration: underline; }
.ka-lista b { font: 700 12px/1.2 var(--sans); color: var(--m-terra); white-space: nowrap; }
.ka-sitaatti { margin: 12px 0 0; font: italic 400 15px/1.4 var(--serif); }
.ka-sitaatti cite { display: block; margin-top: 4px; font: 600 12px/1.3 var(--sans); font-style: normal; color: var(--m-hailea); }

/* Leveä · keskikokoinen: iso kuva ja kiertävä tarve, oikealla tarvelista */
.ka-ruudukko { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.mainos-ka--leveä-keski .ka { padding: 18px 20px; gap: 20px; }
.mainos-ka--leveä-keski .ka-kuva { width: 120px; height: 120px; border-width: 3px; }
.mainos-ka--leveä-keski .ka-teksti { gap: 6px; }
.mainos-ka--leveä-keski .ka-tarve { font-size: 28px; }
.mainos-ka--leveä-keski .ka-ratkaisu { font-size: 17px; }
.mainos-ka--leveä-keski .ka-cta { margin-top: 6px; }
.ka-sivu { border-left: 1px solid var(--m-viiva); padding: 16px 20px; background: var(--m-kortti); border-radius: 0 4px 4px 0; }

/* Leveä · korkea: molemmat apurit */
.ka-iso { padding: 24px 24px 22px; }
.ka-iso-yla { text-align: center; max-width: 640px; margin: 0 auto 20px; }
.ka-iso-otsikko { font: italic 400 clamp(34px, 5vw, 50px)/1.05 "IM Fell English", Georgia, serif; margin: 6px 0 8px; }
.ka-iso-yla p { margin: 0; font: 400 17px/1.45 var(--serif); color: var(--m-hailea); }
.ka-kaksi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ka-kortti { background: var(--m-kortti); border: 1px solid var(--m-viiva); border-radius: 4px; padding: 16px 18px; }
.ka-kortti-yla { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.ka-kortti-yla img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--m-okra); flex: none; }
.ka-kortti-yla b { display: block; font: 700 24px/1.1 var(--serif); }
.ka-kortti-yla small { display: block; font: 600 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--m-hailea); margin: 3px 0; }
.mainos-ka--leveä-korkea .ka-cta--leve { max-width: 360px; margin: 18px auto 0; }

/* Palsta · pieni */
.rail .mainos-ka { margin-top: 0; }
.rail .mainos-ka + * { margin-top: 26px; }
.mainos-ka--palsta-pieni .ka { display: grid; gap: 6px; padding: 16px 14px 14px; }
.ka-yla { display: flex; align-items: center; gap: 10px; }
.mainos-ka--palsta-pieni .ka-kuva { width: 44px; height: 44px; }
.mainos-ka--palsta-pieni .ka-tarve { font-size: 19px; }
.mainos-ka--palsta-pieni .ka-cta { margin-top: 4px; }

/* Palsta · keskikokoinen: kasvot isona */
.mainos-ka--palsta-keski .ka { display: block; padding: 0; }
.ka-kuvake { position: relative; display: block; }
.mainos-ka--palsta-keski .ka-kuva { width: 100%; height: auto; aspect-ratio: 1; border: 0; border-bottom: 1px solid var(--m-terra); border-radius: 3px 3px 0 0; }
.ka-nimilappu {
  position: absolute; left: 12px; bottom: 12px; background: var(--m-paperi); padding: 6px 10px; border-radius: 3px;
  font: italic 400 22px/1 "IM Fell English", Georgia, serif;
}
.mainos-ka--palsta-keski .ka-teksti { display: grid; gap: 6px; padding: 14px 16px 16px; }

/* Palsta · korkea: koko palvelu */
.ka-pitka { padding: 20px 16px 16px; }
.ka-pitka-otsikko { font: italic 400 30px/1.05 "IM Fell English", Georgia, serif; text-align: center; margin: 0; }
.ka-pitka-motto { text-align: center; margin: 4px 0 14px; font: 600 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--m-terra); }
.ka-apuri { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--m-viiva); }
.ka-apuri img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--m-okra); flex: none; }
.ka-apuri b { display: block; font: 700 18px/1.1 var(--serif); }
.ka-apuri small { display: block; font: 400 13px/1.3 var(--sans); color: var(--m-hailea); }
.ka-pitka .ka-lista a { display: block; }
.ka-pitka .ka-lista b { display: block; margin-top: 2px; }
.ka-pitka .ka-otsake { border-top: 1px solid var(--m-viiva); padding-top: 12px; margin-top: 2px; }

/* Kiertävät tarvelistat: rivi häivytetään ja uusi tuodaan tilalle. Lista
   pitää korkeutensa, jotta sivu ei hypi. */
.ka-lista li { transition: opacity .25s; }
.ka-lista li.vaihtuu { opacity: 0; }
.ka-lista a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ka-pitka .ka-lista a span { white-space: normal; }

/* Leveä · korkea: Elias vs Rosa, "vai" korttien välissä. */
.ka-kaksi { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.ka-kaksi .ka-kortti { align-self: stretch; }
.ka-vs { font: italic 400 30px/1 "IM Fell English", Georgia, serif; color: var(--m-terra); }

/* Palsta · vuoro: yhden apurin pieni mainos, Elias tai Rosa latauksittain. */
.mainos-ka[hidden] { display: none; }
.ka-vuoro { margin-top: 26px; }
.rail .ka-vuoro:first-child { margin-top: 0; }
.ka-vuoro .mainos-ka { margin: 0; }
.mainos-ka--palsta-vuoro .ka-arvio { margin: -2px 0 2px; }

/* Leveä · matala, Elias vai Rosa: kopio sovelluksen tyyleistä
   (kotiapurit/src/nostot/nosto.css .kv), jotta mainos näyttää samalta
   lehdessä ja Storybookissa. Muuta molempia, jos muutat yhtä. */
.kv { --kv-elias: var(--m-terra); --kv-rosa: #3f6b3a; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.kv-merkki { grid-column: 1 / -1; padding: 0 16px 12px; text-align: center; }
.kv-puoli { --kv-vari: var(--kv-elias); display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.kv-puoli--rosa { --kv-vari: var(--kv-rosa); }
.kv-kuva { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--kv-vari); }
.kv-teksti { display: grid; gap: 1px; min-width: 0; flex: 1; }
.kv-kysymys { font: 700 20px/1.15 var(--serif); color: var(--kv-vari); }
.kv-vastaus { font: 400 15px/1.3 var(--serif); }
.kv-tilaa {
  flex: none; font: 700 14px/1 var(--sans); padding: 11px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--kv-vari); color: var(--m-paperi);
}
.kv-puoli:hover .kv-tilaa { background: var(--m-muste); }
.kv-vai { position: relative; display: grid; place-items: center; width: 40px; font: italic 400 20px/1 "IM Fell English", Georgia, serif; color: var(--m-hailea); }
.kv-vai::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 50%; border-left: 1px solid var(--m-viiva); }
.kv-vai > span { position: relative; background: var(--m-paperi); padding: 4px 2px; }
@media (max-width: 760px) {
  .kv--leveä-matala { grid-template-columns: 1fr; }
  .kv--leveä-matala .kv-vai { width: auto; height: 24px; margin: 0 16px; }
  .kv--leveä-matala .kv-vai::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px solid var(--m-viiva); }
}

@media (max-width: 760px) {
  .ka-ruudukko, .ka-kaksi { grid-template-columns: 1fr; }
  .ka-vs { text-align: center; font-size: 24px; }
  .ka-sivu { border-left: 0; border-top: 1px solid var(--m-viiva); border-radius: 0 0 4px 4px; }
}
@media (max-width: 640px) {
  .ka { flex-wrap: wrap; gap: 10px 12px; padding: 14px 14px 12px; }
  .ka-kuva { width: 52px; height: 52px; }
  .ka-teksti { flex-basis: calc(100% - 64px); }
  .ka-tarve { font-size: 18px; }
  .mainos-ka--leveä-matala .ka-teksti { min-height: 120px; align-content: start; }
  .mainos-ka--leveä-matala .ka-cta { margin-left: 64px; padding: 9px 14px; font-size: 13px; }
  .mainos-ka--leveä-keski .ka { padding: 14px; }
  .mainos-ka--leveä-keski .ka-kuva { width: 72px; height: 72px; }
  .mainos-ka--leveä-keski .ka-tarve { font-size: 22px; }
  .ka-iso { padding: 20px 14px 16px; }
}

/* Mainospaikat-sivu (/mainokset/) */
.mainospaikka { margin-bottom: 56px; }
.mainospaikka-kuvaus { margin: -4px 0 16px; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.mainospaikka-nostot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 18px 0; }
.mainospaikka-nostot .teaser-kuva img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); border: 1px solid var(--rule); margin-bottom: 8px; }
.mainospaikka .columns { padding-top: 0; }
@media (max-width: 760px) { .mainospaikka-nostot { grid-template-columns: 1fr; gap: 12px; } }

/* Kuvitus: mustavalkoinen tussipiirros jutun alussa ja etusivun pääjutussa. */
.kuvitus { margin: 18px 0 22px; max-width: 100%; }
img { max-width: 100%; height: auto; }
.kuvitus img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.kuvitus figcaption { margin-top: 6px; font: 400 12px/1.4 var(--sans); color: var(--muted); }
.story-kuva { margin-left: auto; margin-right: auto; }
.lead-kuva { margin: 10px 0 14px; }
.kuvitus.pysty { max-width: 420px; margin-left: auto; margin-right: auto; }
.lead-kuva.pysty { max-width: 340px; }
@media (prefers-color-scheme: dark) { .kuvitus img { filter: invert(.88) hue-rotate(180deg); } }

/* Toimittajat ja arviot */
.byline a.author { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.arvio { font-weight: 700; color: var(--ink); }
.toimittaja-kuva { max-width: 420px; }

/* Runo: säkeistöt vasemmalle, väljä rivitys, ei kappaleiden sisennystä. */
.runo .text { font-size: 20px; line-height: 1.7; }
.runo .text .saeisto { margin: 0 0 1.6em; }
.text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text a:hover { text-decoration-thickness: 2px; }
.text ul, .text ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.text ol li { margin-bottom: .55em; }
.text li { margin: 0 0 .3em; }

/* Tulevaisuuteen päivätyt jutut */
.tulevaa { font-style: italic; font-weight: 600; color: var(--ink); }

/* Kaupunnissa tapahtuu: sivupalstan tapahtumalista */
.tapahtuu { margin-top: 26px; padding-top: 4px; border-top: 3px double var(--heavy); }
.tapahtuu .section-head { margin: 14px 0 2px; }
.tapahtuu-paikka { margin: 0 0 12px; font: 600 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tapahtuu ol { list-style: none; margin: 0; padding: 0; }
.tapahtuu li { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.tapahtuu li:last-child { border-bottom: 0; }
.tapahtuu time { grid-row: span 3; font: 700 12px/1.35 var(--sans); letter-spacing: .03em; text-transform: uppercase; padding-top: 3px; }
.tapahtuu li a { font: 700 17px/1.25 var(--serif); color: var(--ink); text-decoration: none; }
.tapahtuu li a:hover { text-decoration: underline; }
.tapahtuu li span { font-size: 14px; line-height: 1.35; color: var(--muted); margin-top: 2px; }

/* Karjatuvan mainos: mustavalkoinen, kehystetty, erottuu toimituksellisesta sisällöstä */
.mainos-kt { position: relative; margin-top: 28px; border: 1px solid var(--heavy); padding: 0 0 16px; background: var(--paper); }
.mainos-kt .mainos-etiketti { position: absolute; top: 8px; left: 8px; z-index: 2; background: #111; color: #fbfaf7; }
.mainos-kt .kt-kuva { position: relative; display: block; text-decoration: none; }
.mainos-kt .kt-kuva img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 60%; filter: grayscale(1) contrast(1.05); border-bottom: 1px solid var(--heavy); }
.mainos-kt .kt-nimi { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 400 52px/1 var(--black); color: #fbfaf7; text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 0 2px #000; }
.mainos-kt .kt-kuvaus { margin: 12px 16px 2px; text-align: center; font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mainos-kt h3 { margin: 16px 16px 6px; font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.mainos-kt .kt-ajat { width: calc(100% - 32px); margin: 0 16px; border-collapse: collapse; font: 400 16px/1.5 var(--serif); }
.mainos-kt .kt-ajat th { text-align: left; font-weight: 700; width: 45%; padding: 2px 0; }
.mainos-kt .kt-ajat td { text-align: right; font-variant-numeric: tabular-nums; }
.mainos-kt .kt-tapahtumat { list-style: none; margin: 0 16px; padding: 0; font: 400 16px/1.45 var(--serif); }
.mainos-kt .kt-tapahtumat time { font: 700 12px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; margin-right: 6px; }
.mainos-kt .kt-linkki { display: block; margin: 14px 16px 0; font: 600 13px/1 var(--sans); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); width: max-content; }

/* Osastosivujen pääkuvat listassa */
.teaser.row.has-kuva { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start; }
.teaser.row .teaser-kuva { grid-column: 2; grid-row: 1; display: block; }
.teaser.row .teaser-kuva img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); border: 1px solid var(--rule); }
.teaser.row .teaser-teksti { grid-column: 1; grid-row: 1; }
@media (max-width: 640px) {
  .teaser.row.has-kuva { grid-template-columns: 1fr; gap: 14px; }
  .teaser.row .teaser-kuva { grid-column: 1; grid-row: 1; }
  .teaser.row .teaser-teksti { grid-column: 1; grid-row: 2; }
}

/* Kaupunnissa tapahtuu: kriitikon tähdet ja linkki ennakkoarvioon */
.tapahtuu li .ennakko { grid-column: 2; margin: 4px 0 0; font: 600 12px/1.3 var(--sans); letter-spacing: .04em; }
.tapahtuu li .ennakko a { font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.tahdet { margin-right: 8px; font-size: 14px; letter-spacing: .08em; color: var(--ink); white-space: nowrap; }
.tapahtuu li .tahdet { font-size: 14px; color: var(--ink); margin-top: 0; }

/* Lukijaäänestys: käsin piirretty kartta, jonka päällä vaihtoehdot ovat
   vanhan kartan tapaan kursiivilla präntättyinä niminä. Kartta levenee
   tekstipalstaa leveämmäksi; kapealla ruudulla nimien tilalla on numerot,
   ja nimet ovat listassa. */
.aanestys { margin: 30px 0 34px; }
.aanestys-kartta {
  --fell: "IM Fell English", "Iowan Old Style", Georgia, serif;
  width: min(1040px, calc(100vw - 32px)); margin: 0 0 18px 50%; transform: translateX(-50%);
}
.kartta { position: relative; }
.kartta img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.aanestys-kartta figcaption { margin-top: 6px; font: 400 12px/1.4 var(--sans); color: var(--muted); max-width: 680px; margin-inline: auto; }
.kohde {
  position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none;
  color: var(--ink); cursor: pointer; font: inherit;
}
.kohde::before {
  content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2.5px var(--paper);
}
.kohde-nimi, .kohde-nro {
  position: absolute; left: 0; white-space: nowrap;
  background: color-mix(in srgb, var(--paper) 90%, transparent); border: 1px solid var(--ink);
  font: italic 400 clamp(13px, 1.55vw, 17px)/1.15 var(--fell); letter-spacing: .01em;
  padding: 2px 9px 3px; box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 25%, transparent);
  transition: background .15s, color .15s;
}
.kohde--yla .kohde-nimi { bottom: 11px; transform: translateX(-50%); }
.kohde--ala .kohde-nimi { top: 11px; transform: translateX(-50%); }
.kohde-nro { display: none; }
.kohde:hover .kohde-nimi, .kohde:focus-visible .kohde-nimi { text-decoration: underline; text-underline-offset: 3px; }
.kohde:focus-visible { outline: none; }
.kohde:focus-visible::before { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4.5px var(--ink); }
.kohde[aria-pressed="true"] .kohde-nimi, .kohde[aria-pressed="true"] .kohde-nro { background: var(--ink); color: var(--paper); }
.kohde[aria-pressed="true"] .kohde-nimi::before { content: "✓ "; font-style: normal; }
.odottaa button { cursor: progress; }

.aanestys-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--heavy); }
.aanestys-lista li { border-bottom: 1px solid var(--rule); }
.aanestys-lista button {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 10px; align-items: baseline;
  width: 100%; padding: 10px 2px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.vt-nro {
  grid-row: span 2; align-self: start; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ink);
  display: grid; place-items: center; font: 600 11px/1 var(--sans);
}
.vt-nimi { font: italic 400 19px/1.2 "IM Fell English", Georgia, serif; }
.vt-maara { grid-column: 3; grid-row: 1; white-space: nowrap; font: 600 12px/1.3 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.vt-kuvaus { grid-column: 2 / 4; font-size: 14px; line-height: 1.4; color: var(--muted); }
.vt-palkki { display: none; grid-column: 2 / 4; height: 6px; background: var(--rule); margin-top: 4px; }
.vt-palkki span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .4s; }
.aanestetty .vt-palkki { display: block; }
.aanestys-lista button:hover .vt-nimi { text-decoration: underline; text-underline-offset: 3px; }
.aanestys-lista button[aria-pressed="true"] .vt-nro { background: var(--ink); color: var(--paper); }
.aanestys-lista button[aria-pressed="true"] .vt-nimi::after { content: " · äänesi"; font: 600 12px/1 var(--sans); font-style: normal; }
.aanestys-tila { font: 400 13px/1.45 var(--sans); color: var(--muted); margin-top: 10px; }

@media (prefers-color-scheme: dark) { .kartta img { filter: invert(.88) hue-rotate(180deg); } }

@media (max-width: 640px) {
  .kohde-nimi { display: none; }
  .kohde::before { display: none; }
  .kohde-nro {
    display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%;
    transform: translate(-50%, -50%); font: 600 12px/1 var(--sans);
  }
}

/* Jutun tekstin sisäiset kuvat ({{kuva: …}}): leveämpi kuin tekstipalsta */
.text .valikuva { margin: 32px -40px; max-width: none; }
.text .valikuva img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .text .valikuva { margin: 24px 0; } }

/* Toimitus-sivu: toimittajakortit osastoittain */
.toimitus { max-width: 1160px; margin: 0 auto; }
.toimitus .osasto { margin: 34px 0 0; }
.toimitus .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.osasto-posti { font: 400 13px/1.2 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); }
.kortit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 24px; }
.kortti-kuva { display: block; }
.kortti-kuva img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rule); }
.kortti h3 { margin: 10px 0 2px; font-size: 19px; line-height: 1.2; }
.kortti h3 a { color: var(--ink); text-decoration: none; }
.kortti h3 a:hover { text-decoration: underline; }
.kortti-rooli { margin: 0; font: 600 11px/1.35 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kortti-lyhyt { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.toimitus-yhteys { margin: 48px auto 0; border-top: 3px double var(--heavy); padding-top: 8px; }
.toimitus-yhteys .text { max-width: 680px; margin: 0 auto; }

/* Oheisjuttu: kainalojuttu pääjutun rinnalla, kuin iltapäivälehdessä.
   Leveällä näytöllä oma palstansa tekstin oikealla puolella jutun alusta,
   kapealla korostettu laatikko siinä kohdassa, johon se on
   jutussa kirjoitettu. Sävytetty tausta, paksu yläviiva ja groteski erottavat
   sen pääjutusta. */
:root { --oheis-pohja: #efe9dc; --oheis-korostus: #a8353e; }
@media (prefers-color-scheme: dark) { :root { --oheis-pohja: #24211c; --oheis-korostus: #e0707a; } }
.oheisjuttu { margin: 34px 0; padding: 18px 20px 8px; background: var(--oheis-pohja); border-top: 6px solid var(--heavy); font: 16px/1.55 var(--sans); }
.oheisjuttu .oheis-ylaotsikko { margin: 0 0 6px; font: 700 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oheis-korostus); }
.oheisjuttu h2 { margin: 0 0 14px; font: 800 26px/1.08 var(--sans); letter-spacing: -.015em; }
.oheisjuttu p { margin: 0 0 .9em; }
.oheisjuttu p strong:first-child { display: block; margin-top: 1.1em; font-size: 17px; line-height: 1.3; }
@media (min-width: 1120px) {
  .story.oheis { max-width: 1040px; }
  .story.oheis .text { display: grid; grid-template-columns: minmax(0, 680px) 300px; column-gap: 60px; align-items: start; }
  .story.oheis .text > * { grid-column: 1; }
  .story.oheis .text > .oheisjuttu { grid-column: 2; grid-row: 1 / span 80; margin: 0; }
  .story.oheis .story-kuva { max-width: 1040px; }
}

/* Alustyypit: kuva ja selite rinnakkain, kapealla allekkain. */
.alustyypit { margin: 26px 0 30px; }
.alus-kortti { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; margin: 0; padding: 16px 0; border-top: 1px solid var(--rule); }
.alus-kortti:first-child { border-top: 2px solid var(--heavy); }
.alus-kortti img { display: block; width: 100%; height: auto; }
.alus-kortti figcaption { font: 15px/1.5 var(--sans); }
.alus-kortti strong { display: block; font: 700 21px/1.2 var(--serif); }
.alus-osuus { display: block; margin: 2px 0 6px; font: 700 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.alustyypit-kuvitus { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); font: 12px/1.4 var(--sans); color: var(--muted); }
@media (max-width: 560px) { .alus-kortti { grid-template-columns: 1fr; gap: 10px; } }

/* Moodivalitsin osastopalkin oikeassa laidassa. Näyttää käyttöjärjestelmän
   tumman tilan kytkimeltä; oikeasti se vaihtaa koko lehden Kaupunnin Yöksi. */
.sections-rivi { position: relative; }
.moodi {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.moodi-kytkin {
  position: relative; width: 34px; height: 18px; flex: none;
  border: 1px solid var(--muted); border-radius: 9px; transition: background .2s, border-color .2s;
}
.moodi-kytkin::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s;
}
.moodi:hover { color: var(--ink); }
.moodi:hover .moodi-kytkin { border-color: var(--ink); }
.moodi:hover .moodi-kytkin::after { background: var(--ink); }
@media (max-width: 820px) {
  .moodi { position: static; transform: none; justify-content: center; padding: 8px 0 0; }
}

/* Kaupunnin Yö: lehden pimeä puoli. Ei vanha sanomalehti vaan yöelämä.
   Teema (nyt vain yo-jatkot; Sametti ja Love Hotel ovat git-historiassa,
   19b6729) asettaa värit, fontit ja efektit tokeneina; komponentit
   käyttävät niitä, ja teeman omat erikoisuudet ovat sen alla. build.mjs
   valitsee teeman (YO_TEEMA) ja lataa sen fontit. Toimii myös yksittäisellä
   elementillä (<div class="pimea yo-…">). */
.pimea.yo-jatkot {
  /* Jatkot: kuudelta aamulla katsottu VHS-nauha. Kuvaputken juovat,
     RGB-hajonta otsikossa ja nauhurin keltainen ruutunäyttö. */
  --paper: #0b0d14; --ink: #d8dbe2; --muted: #8f97ab; --rule: #232838; --heavy: #e8ecf4;
  --korostus: #f2e35c; --korostus-2: #e8ecf4;
  --serif: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --sans: "VT323", "Courier New", monospace;
  --black: "Rubik Mono One", "Arial Black", sans-serif;
  --otsikko-vari: #f4f6fb; --otsikko-skaala: .72;
  --hehku: -3px 0 0 rgba(255, 43, 214, .85), 3px 0 0 rgba(41, 227, 255, .85), 0 0 24px rgba(255, 255, 255, .25);
  --viiva-hehku: none;
  --kytkin-pohja: #f2e35c; --kytkin-nuppi: #0b0d14;
  --varoitus-pohja: #0f1220; --varoitus-teksti: #e8ecf4; --varoitus-reuna: #f2e35c; --varoitus-otsikko: #f4f6fb;
  --nappi-pohja: #f2e35c; --nappi-teksti: #0b0d14;
  --oheis-pohja: #141826; --oheis-korostus: #f2e35c;
  --kuvasuodin: grayscale(1) url(#vhs) contrast(1.08) brightness(1.15) saturate(1.3) blur(.2px);
  --kuva-savy: transparent;
}
.pimea.yo-jatkot { position: relative; }
.pimea.yo-jatkot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
}
/* Juttujen otsikot ja leipäteksti juovien yläpuolella, jotta ne pysyvät
   luettavina; juovat näkyvät tekstin takana taustassa. */
.pimea.yo-jatkot main, .pimea.yo-jatkot .demo-sisus { position: relative; z-index: 6; }
.pimea.yo-jatkot .dateline { font-size: 18px; letter-spacing: .04em; color: #f2e35c; }
.pimea.yo-jatkot .dateline span:first-child::before { content: "▶ PLAY  "; }
/* Osastopalkki ja moodivalitsin selkeällä Josefin Sansilla (kuten Sametissa);
   pikselifontti jää päiväykseen ja yläotsikoihin. */
.pimea.yo-jatkot .sections { font: 700 14px/1.3 "Josefin Sans", "Futura", "Helvetica Neue", sans-serif; letter-spacing: .14em; padding-top: 11px; border-top: 1px solid var(--rule); border-bottom: 2px solid #e8ecf4; }
.pimea.yo-jatkot .kicker { font: 700 12px/1.2 "Josefin Sans", "Futura", "Helvetica Neue", sans-serif; letter-spacing: .12em; }
.pimea.yo-jatkot .section-head { font-size: 20px; letter-spacing: .06em; }
.pimea.yo-jatkot .byline { font: 600 12px/1.4 "Josefin Sans", "Futura", "Helvetica Neue", sans-serif; letter-spacing: .06em; }
.pimea.yo-jatkot .more { font: 700 12px/1.2 "Josefin Sans", "Futura", "Helvetica Neue", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pimea.yo-jatkot .moodi { font: 700 12px/1 "Josefin Sans", "Futura", "Helvetica Neue", sans-serif; letter-spacing: .1em; }
.pimea.yo-jatkot .varoitus-ok { font-size: 18px; }
.pimea.yo-jatkot .dek { color: var(--ink); }
.pimea.yo-jatkot .yon-lupaus h3 { font-size: 17px; letter-spacing: .06em; }
/* VHS-kuvat: SVG-suodin #vhs (build.mjs, VHS_SUODIN) erottaa punaisen ja
   sinisen kanavan ja vääntää kuvaa vaakasuunnassa kuin venynyt nauha.
   Päällä tiheät juovat, vierivä seurantaraita ja nauhurin ruutunäyttö. */
.pimea.yo-jatkot .teaser-kuva, .pimea.yo-jatkot .lead-kuva { overflow: hidden; isolation: isolate; background: #000; border-radius: 7% / 10%; }
.pimea.yo-jatkot .teaser-kuva img, .pimea.yo-jatkot .lead-kuva img { display: block; border: 0; }
.pimea.yo-jatkot .teaser-kuva::before, .pimea.yo-jatkot .lead-kuva::before {
  content: ""; position: absolute; left: -5%; right: -5%; height: 14%; top: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .08) 35%, rgba(200, 255, 255, .14) 50%, rgba(255, 255, 255, .07) 65%, transparent);
  mix-blend-mode: screen; filter: blur(1px); opacity: 0;
}
/* Seurantaraita vierähtää silloin tällöin yhden kuvan läpi: VHS_JS
   (build.mjs) lisää luokan vhs-raita satunnaiselle kuvalle hetkeksi. */
.pimea.yo-jatkot .vhs-raita::before { opacity: 1; animation: vhs-raita 2.6s linear 1 forwards; }
.pimea.yo-jatkot .teaser-kuva::after, .pimea.yo-jatkot .lead-kuva::after {
  content: "SP"; z-index: 3; opacity: 1; mix-blend-mode: normal;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px 24px;
  font: 20px/1 "VT323", monospace; color: #f2e35c; letter-spacing: .06em;
  text-shadow: -1px 0 rgba(255, 43, 214, .8), 1px 0 rgba(41, 227, 255, .8);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 76% 76% at 50% 50%, transparent 48%, rgba(11, 13, 20, .72) 100%);
  /* Vinjetti häipyy sivun taustaväriin kaikilta laidoilta. */
  border-radius: inherit; box-shadow: inset 0 0 30px 8px rgba(11, 13, 20, .8), inset 0 0 2px rgba(255, 255, 255, .2);
}
.pimea.yo-jatkot .lead-kuva::after { content: "▶ PLAY   SP   03:47:12"; justify-content: flex-start; align-items: flex-start; padding: 30px 44px; font-size: 30px; }
@keyframes vhs-raita { 0% { top: -20%; } 100% { top: 110%; } }
@media (prefers-reduced-motion: reduce) { .pimea.yo-jatkot .teaser-kuva::before, .pimea.yo-jatkot .lead-kuva::before { display: none; } }

/* Yhteiset Yön komponentit. */
.pimea { background: var(--pohja, var(--paper)); color: var(--ink); color-scheme: dark; font-family: var(--serif); font-weight: var(--leipa-paino, 400); }
html.pimea body { background: transparent; }
html.pimea { min-height: 100%; }
.pimea .masthead { background: var(--masthead-tausta, none); }
.pimea .title:not(.small) { font-size: calc(clamp(44px, 8.5vw, 84px) * var(--otsikko-skaala, 1)); padding: 18px 0 18px; }
.pimea .title {
  font-weight: var(--otsikko-paino, 400); color: var(--otsikko-vari, var(--ink)); text-shadow: var(--hehku, none);
  background: var(--otsikko-tausta, none); -webkit-background-clip: text; background-clip: text;
}
.pimea .dateline { font-family: var(--sans); }
.pimea .kicker, .pimea .osio-kuvaus { color: var(--korostus); }
.pimea .sections { border-top: 1px solid var(--korostus-2); border-bottom: 1px solid var(--korostus-2); box-shadow: var(--viiva-hehku, none); }
.pimea .section-head, .pimea .colophon { border-top-color: var(--korostus); }
.pimea .more { border-bottom-color: var(--korostus); }
.pimea .teaser-kuva img, .pimea .kuvitus img { filter: var(--kuvasuodin); }
/* Kuvat sävytetään teeman värillä (mix-blend-mode: color säilyttää valöörit). */
.pimea .teaser-kuva, .pimea .lead-kuva { position: relative; display: block; }
.pimea .teaser-kuva::after, .pimea .lead-kuva::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--kuva-savy, transparent); mix-blend-mode: var(--kuva-sekoitus, normal); opacity: .3;
}
.pimea .moodi { color: var(--korostus); }
.pimea .moodi-kytkin { background: var(--kytkin-pohja); border-color: var(--korostus); }
.pimea .moodi-kytkin::after { transform: translateX(16px); background: var(--kytkin-nuppi); }
.pimea .moodi:hover .moodi-kytkin::after { background: var(--kytkin-nuppi); }
.pimea .yon-lupaus blockquote { font-family: var(--serif); font-style: italic; }
.pimea ::selection { background: var(--korostus); color: var(--paper); }

/* Varoitus ensimmäisellä käynnillä: iso, nuoli osoittaa valitsinta.
   Eväste pimea_nahty piilottaa sen. */
.varoitus { background: var(--varoitus-pohja); color: var(--varoitus-teksti); border-top: 1px solid var(--varoitus-reuna); border-bottom: 3px double var(--varoitus-reuna); }
.varoitus .wrap { position: relative; max-width: 760px; padding-top: 26px; padding-bottom: 28px; text-align: center; }
.varoitus h2 { margin: 0 0 12px; font: var(--otsikko-paino, 400) calc(clamp(34px, 6vw, 56px) * var(--otsikko-skaala, 1))/1.1 var(--black); color: var(--varoitus-otsikko); text-shadow: var(--hehku, none); text-wrap: balance; }
.varoitus p { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
.varoitus a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.varoitus-nuoli { position: absolute; top: -6px; right: -180px; margin: 0; font: 700 34px/1 var(--sans); color: var(--varoitus-otsikko); animation: varoitus-nuoli 1.4s ease-in-out infinite; }
@keyframes varoitus-nuoli { 50% { transform: translateY(-6px); } }
.varoitus-ok {
  margin-top: 10px; padding: 10px 22px; cursor: pointer;
  font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--nappi-teksti); background: var(--nappi-pohja); border: 0; border-radius: 2px; box-shadow: var(--nappi-hehku, none);
}
.varoitus-ok:hover { opacity: .9; }
.varoitus-ok:focus-visible, .moodi:focus-visible { outline: 2px solid var(--korostus); outline-offset: 3px; }
.pimea-nahty .varoitus { display: none; }
@media (max-width: 1160px) { .varoitus-nuoli { right: 16px; } }
@media (max-width: 820px) { .varoitus-nuoli { position: static; margin-bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .varoitus-nuoli { animation: none; } }

/* Yön etusivun reunapalsta: lupaus ja formaatit. */
.yon-lupaus { margin-top: 28px; }
.yon-lupaus blockquote { margin: 0 0 22px; font: italic 400 24px/1.25 "IM Fell English", Georgia, serif; }
.yon-lupaus h3 { margin: 0 0 8px; font: 700 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.yon-lupaus dl { margin: 0; }
.yon-lupaus dt { font: 700 16px/1.3 var(--serif); margin-top: 10px; }
.yon-lupaus dd { margin: 2px 0 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
.osio-tyhja { margin: 0; font-style: italic; color: var(--muted); }
.stream .osio-tyhja { padding: 28px 0; text-align: center; }