/* Unhola · teaser. Tumma yö, valkoinen paperi, kontuurit; Kivi vain pieninä vivahteina. */

/* fontit omalta palvelimelta (Google Fontsin latin-osajoukot), ei ulkoista renderöinnin estävää pyyntöä */
@font-face { font-family: 'Grenze'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fontit/grenze-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Grenze'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fontit/grenze.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Grenze'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fontit/grenze.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Grenze'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fontit/grenze.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Grenze Gotisch'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fontit/grenze-gotisch.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Grenze Gotisch'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fontit/grenze-gotisch.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* varafontit mitoitettu Grenzen levyisiksi (size-adjust), ettei sivu hypi kun web-fontti vaihtuu tilalle.
   Kertoimet: Grenzen ja varafontin tekstileveyksien suhde (Capsize-metriikat / mitattu selaimessa).
   unicode-range rajaa ne tekstimerkkeihin: Grenzestä puuttuvat merkit (kuten ↓) tulevat järjestelmäfontista täysikokoisina kuten ennenkin. */
@font-face { font-family: "Grenze Georgia"; src: local("Georgia"); size-adjust: 77.3%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Grenze Georgia"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 75.8%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Grenze Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 84.9%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Grenze Times"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"); size-adjust: 83%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Grenze Noto"; src: local("Noto Serif"), local("NotoSerif"); size-adjust: 71.7%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Grenze Noto"; font-style: italic; src: local("Noto Serif Italic"), local("NotoSerif-Italic"); size-adjust: 70.3%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Grenze DejaVu"; src: local("DejaVu Serif"); size-adjust: 69.2%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Grenze DejaVu"; font-style: italic; src: local("DejaVu Serif Italic"); size-adjust: 66.6%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }

:root {
  --yo: #2a1f18; --yo-2: #35281f; --logo: #e6e7e8; --himmea: #8b8a88;
  --paperi: #f8f6f0; --vanha: #ddd3bd; --hiili: #1c1b19; --lyijy: #55534f;
  --kuusi: #1f3527; --kuusi-2: #274330; --sammal: #8fa25a;
  --otsikko: "Grenze Gotisch", serif;
  --leipa: "Grenze", "Grenze Georgia", "Grenze Times", "Grenze Noto", "Grenze DejaVu", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--yo); overscroll-behavior-y: none; } /* sivu pysähtyy reunoihin, ei vaaleaa kimmoamista */
body { background: var(--yo); color: var(--hiili); font: 400 1.2rem/1.6 var(--leipa); overflow-x: hidden; }
a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
.jarjestaja a:hover, .lahteet a:hover, .selite a:hover, .ilmo .iso-teksti a:hover, .ilmo .avautuu a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible, .karuselli:focus-visible { outline: 2px solid var(--sammal); outline-offset: 4px; }
.ohitus { position: absolute; left: 1rem; top: -5rem; z-index: 5; padding: .5rem 1rem; background: var(--paperi); color: var(--hiili); }
.ohitus:focus { top: 1rem; }
.nakymaton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.laatta { padding: clamp(4rem, 12vw, 7rem) clamp(1.4rem, 6vw, 2rem); position: relative; isolation: isolate; }
.laatta > * { max-width: 40rem; margin-inline: auto; }
.laatta > .leveä { max-width: 64rem; }
.yo { background: var(--yo); color: var(--logo); }
main { background: var(--paperi); } /* body on tumma, jotta Safarin alapalkki ja reunat ovat ruskeita */
.vihrea { background: var(--kuusi); color: var(--paperi); }
.vanha { background: var(--vanha); }

/* karttamerkinnät: harvennetut versaalit leipätekstin fontilla (ks. FONTIT-JA-LIGHTHOUSE.md) */
.merkki { font: inherit; letter-spacing: .16em; text-transform: uppercase; }
.himmea { color: var(--himmea); }

/* kontuurit maskina, väri tulee sektiolta */
.kontuurit { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: currentColor; opacity: .09;
  -webkit-mask: url(/assets/kontuurit.svg) center / cover no-repeat; mask: url(/assets/kontuurit.svg) center / cover no-repeat; }
.paperi-kontuurit .kontuurit { color: var(--kuusi); opacity: .1; }

.logo { aspect-ratio: 1600 / 260; background-color: currentColor;
  -webkit-mask: url(/assets/logo.png) center / contain no-repeat; mask: url(/assets/logo.png) center / contain no-repeat; }

/* ---------- kansi ---------- */
.kansi { min-height: 100svh; display: flex; flex-direction: column; padding-block: 1.3rem .8rem; overflow: hidden; } /* alareuna .8rem kuten videon selaa alas -linkillä */
.kansi .kontuurit { opacity: .13; -webkit-mask-image: url(/assets/kontuurit.svg), linear-gradient(#000, transparent 85%); -webkit-mask-composite: source-in; mask-image: url(/assets/kontuurit.svg), linear-gradient(#000, transparent 85%); mask-composite: intersect; -webkit-mask-size: cover, 100% 100%; mask-size: cover, 100% 100%; -webkit-mask-position: center; mask-position: center; }
.kansi > * { max-width: none; width: 100%; }
.ylapalkki { min-height: 4.8em; /* kolmen rivin tila, jotta FI:n pidempi teksti ei työnnä logoa alemmas */ display: flex; justify-content: space-between; align-items: center; max-width: 64rem !important; margin-inline: auto; }
.kieli { display: flex; gap: .9rem; }
.kieli a { text-decoration: none; color: var(--himmea); padding: .5rem .2rem; }
.kieli a[aria-current] { color: var(--logo); text-decoration: underline; text-underline-offset: .4em; }
.kansi-sisus { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2rem; padding-block: 2rem; }
.kansi .logo { width: min(100%, 92vw, 135svh); color: var(--logo); }
.kansi .tagline { font-style: italic; font-size: clamp(1.25rem, 3.2vw, 3.4rem); color: var(--logo); opacity: .9; }
.kansi .paiva { display: grid; gap: .4rem; border-top: 1px solid rgb(230 231 232 / .25); padding-top: 1.4rem; }
.kansi .paiva strong { font: inherit; letter-spacing: .04em; font-weight: 500; }
.alas { align-self: center; text-decoration: none; display: inline-flex; gap: .8rem; align-items: center; min-height: 44px; padding-inline: 1rem; border-radius: 22px; background: rgb(0 0 0 / .45); color: var(--logo); white-space: nowrap; }
.alas:hover { background: rgb(0 0 0 / .7); }
.kansi > .alas { width: auto; } /* ei venytetä koko leveäksi: pysyy keskellä kuten videon päällä */

/* ---------- sanakirja ---------- */
.sana h2 { font-family: var(--otsikko); font-weight: 700; font-size: clamp(3.2rem, 15vw, 5.5rem); line-height: 1; color: var(--kuusi); }
.sana .ääntämys { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .8rem; color: var(--lyijy); align-items: baseline; }
.sana .ääntämys b { font-weight: 500; color: var(--hiili); }
.sana ol { list-style: none; padding: 0; margin-top: 1.8rem; border-top: 2px solid var(--hiili); }
.sana li { padding-block: 1.1rem; border-bottom: 1px solid rgb(28 27 25 / .25); }
.sana li .merkki { display: block; color: var(--kuusi); margin-bottom: .4rem; }
.sana .selitys { font-size: clamp(1.25rem, 4.6vw, 1.5rem); line-height: 1.45; }
.sana em { color: var(--kuusi); }

/* ---------- tiedot (kartan selite) ---------- */
.selite h2, .tarina h2, .ilmo h2, .ukk h2 { font: inherit; letter-spacing: .18em; text-transform: uppercase; color: var(--sammal); margin-bottom: 1.4rem; }
.tarina h2, .ukk h2 { color: var(--kuusi); }
.selite dl { display: grid; gap: 0; border-top: 1px solid rgb(248 246 240 / .3); }
.selite dl > div { display: grid; gap: .3rem; padding-block: 1.3rem; border-bottom: 1px solid rgb(248 246 240 / .3); }
.selite dt { font: inherit; letter-spacing: .16em; text-transform: uppercase; color: rgb(248 246 240 / .65); }
.selite dd { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.15; }
.selite dd .iso { font: inherit; letter-spacing: -.02em; }
.selite dd small { font: italic 400 1rem/1.4 var(--leipa); display: block; color: rgb(248 246 240 / .7); margin-top: .3rem; }
@media (min-width: 720px) {
  .selite dl { grid-template-columns: 1fr 1fr; }
  .selite dl > div:nth-child(odd) { padding-right: 2rem; border-right: 1px solid rgb(248 246 240 / .3); }
  .selite dl > div:nth-child(even) { padding-left: 2rem; }
}

/* ---------- tarina ja karuselli ---------- */
.tarina h3 { font: italic 400 clamp(1.8rem, 7vw, 2.6rem)/1.15 var(--leipa); color: var(--hiili); margin-bottom: 1.2rem; }
.tarina p + p { margin-top: 1rem; }
.karuselli { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2.4rem clamp(1.4rem, 6vw, 2rem) 1.4rem; margin-inline: calc(-1 * clamp(1.4rem, 6vw, 2rem)); scrollbar-width: thin; scrollbar-color: var(--kuusi) transparent; overscroll-behavior-x: contain; }
.laatta > .karuselli-ulko { max-width: 64rem; }
.plansa { flex: 0 0 min(82%, 28rem); scroll-snap-align: center; position: relative; aspect-ratio: 4 / 5; background: var(--paperi); color: var(--kuusi); border: 1px solid var(--hiili); outline: 5px solid var(--paperi); outline-offset: -9px; box-shadow: 0 0 0 1px var(--hiili) inset; display: flex; align-items: flex-end; padding: 1.6rem; overflow: hidden; isolation: isolate; }
.plansa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: .55;
  -webkit-mask: url(/assets/kontuurit.svg) var(--x, 50%) var(--y, 50%) / var(--s, 220%) no-repeat; mask: url(/assets/kontuurit.svg) var(--x, 50%) var(--y, 50%) / var(--s, 220%) no-repeat; }
.plansa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, transparent 30%, var(--paperi) 92%); }
.plansa figcaption { position: relative; background: var(--paperi); padding: .5rem .7rem; font-style: normal; color: var(--hiili); }
.plansa figcaption b { display: block; font: inherit; letter-spacing: .16em; text-transform: uppercase; color: var(--kuusi); }
.plansa figcaption span { font-style: italic; font-size: .98rem; color: var(--lyijy); }
.karuselli-ohje { text-align: center; color: var(--lyijy); }

/* ---------- ilmoittautuminen ---------- */
.ilmo .iso-teksti { font-size: clamp(1.8rem, 7vw, 2.7rem); line-height: 1.15; font-style: italic; }
.linkit { list-style: none; padding: 0; margin-top: 2.2rem; border-top: 1px solid rgb(230 231 232 / .25); }
.linkit a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 1rem; min-height: 56px; text-decoration: none; border-bottom: 1px solid rgb(230 231 232 / .25); font-size: 1.4rem; }
.linkit a .merkki { color: var(--himmea); }
.linkit a:hover { color: var(--sammal); }
.linkit a:hover .merkki { color: var(--sammal); }

/* ---------- ukk ---------- */
details { border-top: 2px solid var(--hiili); border-bottom: 1px solid rgb(28 27 25 / .3); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; min-height: 56px; font-size: 1.3rem; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: inherit; color: var(--kuusi); }
details[open] summary::after { content: "–"; }
details > div { padding-bottom: 1.4rem; }
details p + p { margin-top: .8rem; }

/* ---------- kumppanit ja jalka ---------- */
.kumppanit { text-align: center; }
.kumppanit .merkki { color: var(--himmea); }
.kumppanit ul { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; gap: 1rem; font-size: clamp(1.25rem, 5vw, 1.7rem); font-style: italic; }
.jalka { text-align: center; padding-block: 3rem; }
.jalka .logo { width: min(60%, 18rem); margin: 0 auto 1.4rem; color: var(--logo); }
.jalka p { color: var(--himmea); }
.jarjestaja { font-style: normal; margin-top: 3.2rem; max-width: 34rem; margin-inline: auto; font-size: .75rem; line-height: 1.6; }
.jarjestaja p + p { margin-top: .8rem; }
.jarjestaja a { color: inherit; text-underline-offset: .2em; }
.lahteet { max-width: 34rem; margin: 2rem auto 0; font-size: .65rem; line-height: 1.5; opacity: .6; }
.lahteet a { color: inherit; text-underline-offset: .2em; }

@media (prefers-reduced-motion: no-preference) {
  .kansi .logo, .kansi .tagline, .kansi .paiva { animation: nouse 2.4s ease-out both; }
  .kansi .tagline { animation-delay: .5s; }
  .kansi .paiva { animation-delay: 1s; }
  /* alku .01 eikä 0: silmälle sama, mutta selain laskee tekstin piirretyksi heti (LCP) */
  @keyframes nouse { from { opacity: .01; filter: blur(6px); } to { opacity: 1; filter: none; } }
  .kansi .tagline { animation-name: nouse2; }
  @keyframes nouse2 { from { opacity: .01; filter: blur(4px); } to { opacity: .9; filter: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- v2: selkeämpi rytmi ---- */
.sana .kuvaus { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 2px solid var(--hiili); font-size: clamp(1.45rem, 5.6vw, 2rem); line-height: 1.4; }
.sana .kuvaus em { color: var(--kuusi); font-style: italic; }
.kansi .paiva .merkki { text-transform: none; letter-spacing: .06em; font-size: .85rem; display: block; min-height: 4.8em; } /* kolmen rivin tila: logo pysyy samassa kohdassa EN/FI-vaihdossa */
.ilmo.vanha { background: var(--vanha); color: var(--hiili); }
.ilmo.vanha h2, .ilmo.paperi-kontuurit h2 { color: var(--kuusi); }
.ilmo.vanha .himmea, .ilmo.paperi-kontuurit .himmea { color: var(--lyijy); }
.ilmo.vanha .linkit, .ilmo.paperi-kontuurit .linkit, .ilmo.vanha .linkit a, .ilmo.paperi-kontuurit .linkit a { border-color: rgb(28 27 25 / .3); }
.ilmo.vanha .linkit a .merkki, .ilmo.paperi-kontuurit .linkit a .merkki { color: var(--lyijy); }
.ilmo.vanha .linkit a:hover, .ilmo.paperi-kontuurit .linkit a:hover, .ilmo.vanha .linkit a:hover .merkki, .ilmo.paperi-kontuurit .linkit a:hover .merkki { color: var(--kuusi); }
.ilmo.vanha .kontuurit { color: var(--kuusi); opacity: .1; }

.kansi .kuusirivi { margin: 0; color: var(--logo); opacity: .55; }
.kansi .kuusirivi i { background: currentColor; }
.kuusirivi { display: flex; justify-content: center; align-items: flex-end; gap: .15rem; height: 2rem; }
.kuusirivi i { width: .85rem; clip-path: polygon(50% 0, 62% 26%, 56% 26%, 72% 52%, 64% 52%, 84% 80%, 55% 80%, 55% 100%, 45% 100%, 45% 80%, 16% 80%, 36% 52%, 28% 52%, 44% 26%, 38% 26%); }

/* ---- v3: yksi yhtenäinen kartta koko sivun läpi (assets/taustat/koko-kartta.svg, generoi.mjs) ----
   Kartta on maski: viivojen väri tulee lohkolta (--viiva) ja voimakkuus --nakyvyys-arvosta.
   Skripti antaa jokaiselle lohkolle sen kohdan sivulla (--kartta-y) ja sivun korkeuden
   (--kartta-h), joten käyrät jatkuvat lohkosta toiseen. Ilman skriptiä lohko näyttää kartan alun. */
.laatta > .kontuurit { max-width: none; margin: 0; }
.kontuurit, .kansi .kontuurit, .paperi-kontuurit .kontuurit, .ilmo.vanha .kontuurit {
  color: var(--viiva); opacity: var(--nakyvyys);
  -webkit-mask: var(--karttakuva) 50% calc(-1 * var(--kartta-y, 0px)) / max(100%, calc(var(--kartta-h, 300svh) / 3)) auto no-repeat;
  mask: var(--karttakuva) 50% calc(-1 * var(--kartta-y, 0px)) / max(100%, calc(var(--kartta-h, 300svh) / 3)) auto no-repeat; }
/* tekstipalstan alle pehmeä lukualue lohkon omalla värillä */
.laatta:has(> .kontuurit)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at 50% 50%, rgb(var(--pohja) / .6), transparent); }
.yo { --pohja: 34 31 32; --viiva: var(--logo); --nakyvyys: .16; }
.paperi-kontuurit { --pohja: 248 246 240; --viiva: var(--kuusi); --nakyvyys: .3; }
.vihrea { --pohja: 31 53 39; --viiva: var(--paperi); --nakyvyys: .16; }
.vanha { --pohja: 221 211 189; --viiva: var(--kuusi); --nakyvyys: .3; }

/* video: kevyt julkisivu, oma videotiedosto ladataan kun lohko lähestyy näkymää. Puhelimessa pysty, isolla ruudulla vaaka. */
.video-laatta { padding: 0; min-height: 100svh; display: grid; align-content: center; } /* koko ruudun lohko: "Scroll" vie videon keskelle tummaa, seuraava osio ei pilkistä alta */
.video-laatta > .video { --suhde: 9 / 16; display: block; width: 100%; max-width: none; aspect-ratio: var(--suhde); margin: 0; position: relative; background: #000; }
.video-laatta > .video { max-height: 100svh; } /* pystyvideo mahtuu kokonaan ruutuun, ei ylitä näkymää */
@media (min-width: 720px) { .video-laatta > .video { aspect-ratio: auto; height: min(56.25vw, 100svh); } }
.video-laatta .video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-laatta .toista { position: absolute; inset: 0; width: 100%; display: grid; place-content: center; justify-items: center; gap: 1.2rem; padding: 1rem; font: inherit; color: var(--logo); background: radial-gradient(ellipse at center, var(--yo-2), #000 75%); border: 0; cursor: pointer; }
.video-laatta .toista .kallo { width: clamp(5rem, 22%, 9rem); aspect-ratio: 1; background-color: currentColor; -webkit-mask: url(/assets/kallo.svg) center / contain no-repeat; mask: url(/assets/kallo.svg) center / contain no-repeat; transition: transform .3s; }
.video-laatta .toista:hover .kallo, .video-laatta .toista:focus-visible .kallo { transform: scale(1.06) rotate(-4deg); }
.video-laatta .toista:focus-visible { outline: 2px solid var(--sammal); outline-offset: -6px; }
.video-laatta .toista .merkki::before { content: ""; display: inline-block; width: .6em; height: .7em; margin-right: .6em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); vertical-align: -.05em; }
.video-laatta .video video { pointer-events: none; }
.video-laatta .peite { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.video-laatta .peite::before, .video-laatta .peite::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.video-laatta .peite::before { background: rgb(0 0 0 / .72); }
.video-laatta .peite::after { background: var(--logo); -webkit-mask: url(/assets/kallo.svg) center / 22% no-repeat; mask: url(/assets/kallo.svg) center / 22% no-repeat; }
.video-laatta .tauolla .peite::before, .video-laatta .tauolla .peite::after { opacity: 1; }
.video-laatta .peite:focus-visible { outline: 2px solid var(--sammal); outline-offset: -6px; }
/* kartta piirretään kartta.js:llä; piiloon kunnes valmis (muuten maskitta täysi laatta) */
.kontuurit { visibility: hidden; opacity: 0; transition: opacity 1s; }
.kartta-valmis .kontuurit { visibility: visible; opacity: var(--nakyvyys); }


/* värirytmi: yö (kansi, video) – paperi (sana, tiedot, ilmo) – yö (kumppanit, jalka). Vihreä vain korostuksena. */
.paperi-kontuurit + .paperi-kontuurit { padding-top: 0; }
.selite.paperi-kontuurit { padding-bottom: 1.3rem; } /* ilmo jatkaa kuin seuraava rivi */
.selite.paperi-kontuurit dl, .selite.paperi-kontuurit dl > div { border-color: rgb(28 27 25 / .3); }
.selite.paperi-kontuurit dl { border-top: 2px solid var(--hiili); }
.selite.paperi-kontuurit dt { color: var(--kuusi); }
.selite.paperi-kontuurit dd small { color: var(--lyijy); }

/* ---- galleria: diaesitys koko sivun levyisenä, kuvat vaihtuvat ristiin häivyttäen (skripti index.html:ssä) ---- */
.ilmo > .galleria { list-style: none; padding: 0; position: relative; max-width: none; margin: 2.4rem calc(-1 * clamp(1.4rem, 6vw, 2rem)) 0;
  height: min(66.7vw, 85svh); overflow: hidden; background: var(--kuusi); touch-action: pan-y; }
/* paperiosio päättyy kuvaan, some jää ruskealle kumppaneiden kanssa */
.ilmo:has(> .galleria) { padding-bottom: 0; }
/* some samaan keskitettyyn kursiivilistaan kuin kumppanit, tunnus pienenä alla */
.somet { padding-bottom: 0; text-align: center; }
.somet .merkki { color: var(--himmea); }
.somet ul { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; gap: 1rem; font-size: clamp(1.25rem, 5vw, 1.7rem); font-style: italic; }
.somet a { display: inline-grid; gap: .1rem; text-decoration: none; }
.somet a .merkki { font-style: normal; font-size: .95rem; }
.somet a:hover, .somet a:hover .merkki { color: var(--sammal); }
.galleria li { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.galleria li.nyt { opacity: 1; }
.galleria picture { display: block; height: 100%; }
.galleria img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .galleria li { transition: none; } }
.ilmo .avautuu { margin-top: .3rem; font: italic 400 1rem/1.4 var(--leipa); color: var(--lyijy); } /* kuin .selite dd small */
.sana .esittely { margin-top: 1.2rem; font-size: clamp(1.15rem, 4.2vw, 1.3rem); }
.sana .kuvaus + .esittely-otsikko { margin-top: 3rem; }
.sana .esittely-otsikko { font: inherit; letter-spacing: .16em; text-transform: uppercase; color: var(--kuusi); margin-top: 2.4rem; padding-top: .9rem; border-top: 1px solid rgb(28 27 25 / .3); }
.sana .esittely-otsikko + .esittely { margin-top: .7rem; }

/* video: tauko- ja äänipainikkeet oikeassa yläkulmassa, jatkokehote alareunassa */
.video-laatta .ohjaimet { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: flex; gap: .5rem; }
.video-laatta .ohjaimet button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgb(230 231 232 / .5); background: rgb(0 0 0 / .45); color: var(--logo); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.video-laatta .ohjaimet button:hover { background: rgb(0 0 0 / .7); }
.video-laatta .ohjaimet button:focus-visible { outline: 2px solid var(--sammal); outline-offset: 2px; }
.video-laatta .ohjaimet svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.video-laatta > .alas-video { position: absolute; left: 50%; bottom: calc((100svh - min(100vw * 16 / 9, 100svh)) / 2 + .8rem); z-index: 2; width: auto; margin: 0; transform: translateX(-50%); }
@media (min-width: 720px) { .video-laatta > .alas-video { bottom: calc((100svh - min(56.25vw, 100svh)) / 2 + .8rem); } } /* pysyy videon alareunassa, ei mustan reunuksen rajalla */
.kumppanit a { color: inherit; text-decoration: none; }
.kumppanit a:hover { color: var(--sammal); }

/* matala vaakanäkymä (tabletti, puhelin vaakana): kansi mahtuu ruutuun, selaa alas -nappi jää näkyviin */
@media (orientation: landscape) and (max-height: 800px) {
  .ylapalkki { min-height: 0; }
  .kansi-sisus { gap: min(2rem, 3.5svh); padding-block: min(2rem, 2svh); }
  .kansi .logo { width: min(100%, 92vw, 105svh); }
  .kansi .tagline { font-size: min(clamp(1.25rem, 3.2vw, 3.4rem), 6svh); }
  .kansi .paiva { padding-top: min(1.4rem, 2.5svh); }
  .kansi .paiva .merkki { min-height: 0; }
}
@media (orientation: landscape) and (max-height: 480px) { .kansi .kuusirivi { display: none; } }
.lahteet.paivitetty { margin-top: .6rem; }