/* ==========================================================================
   jukkanyyssola.fi — teema
   Idea: toimintaleffan juliste ja VHS-hylly. Kanit Italic = otsikot (sama henki
   kuin vanhassa JN-logossa), Barlow = leipäteksti, Barlow Condensed = "tekijätiedot".
   ========================================================================== */

@font-face{font-family:"Kanit";font-style:italic;font-weight:800;font-display:swap;src:url(fontit/kanit-latin-800-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fontit/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:400;font-display:swap;src:url(fontit/barlow-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(fontit/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(fontit/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fontit/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fontit/barlow-condensed-latin-600-normal.woff2) format("woff2")}

:root{
  --yo:#0e0b24;          /* sivun pohja: syvä indigo */
  --yo-2:#171338;        /* kohotettu pinta */
  --yo-3:#231d50;
  --viiva:#342e6b;
  --kromi:#eef1f8;       /* teksti */
  --hamara:#b4b2d8;      /* toissijainen teksti */
  --liekki:#ff4a1c;      /* pääkorostus: toimintaleffan punaoranssi */
  --pinkki:#ff2e88;
  --neon:#38e1ff;        /* linkit ja kohdistus */
  --kulta:#ffc531;
  --paperi:#efe7d6;      /* kasetin tarra */
  --muste:#1b1638;
  --otsikko:"Kanit","Arial Black",system-ui,sans-serif;
  --leipa:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --kapea:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --palkki-k:58px;
}
.aihe-treeni{--aihe:#ff6a3d}
.aihe-ravinto{--aihe:#8fdc4b}
.aihe-kisat{--aihe:#ffc531}
.aihe-leffat{--aihe:#b88cff}
.aihe-pelit{--aihe:#38e1ff}
.aihe-matkat{--aihe:#3fd9a8}
.aihe-keittio{--aihe:#ff9cbd}
.aihe-elama{--aihe:#a9b2d6}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--palkki-k) + 16px)}
body{
  margin:0;color:var(--kromi);font-family:var(--leipa);font-size:1.0625rem;line-height:1.55;
  background:var(--yo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--neon)}
button{font:inherit}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ohita{position:absolute;left:8px;top:-60px;z-index:100;background:var(--kulta);color:var(--muste);padding:.6em 1em;font-weight:700}
.ohita:focus{top:8px}

.kehys{width:100%;max-width:1220px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.kehys.kapea{max-width:840px}

/* ------------------------------------------------------------- yläpalkki */
.ylapalkki{position:sticky;top:0;z-index:30;background:rgba(14,11,36,.95);border-bottom:1px solid var(--viiva)}
.ylapalkki-rivi{display:flex;align-items:center;gap:clamp(12px,3vw,36px);height:var(--palkki-k)}
.ylapalkki-logo{display:block;color:#fff;flex:none;line-height:0}
.ylapalkki-logo svg{height:15px;width:auto;display:block}
.ylapalkki-logo:hover{color:var(--kulta)}
.valikko{display:flex;gap:2px;margin-right:auto}
.valikko a{font:600 .98rem/1 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:var(--kromi);text-decoration:none;padding:21px 12px 18px;border-bottom:3px solid transparent}
.valikko a:hover{color:var(--kulta)}
.valikko a[aria-current]{border-bottom-color:var(--liekki)}
.ylapalkki-napit{display:flex;gap:8px;margin-left:auto}
.tyokalu{display:inline-flex;align-items:center;gap:.45em;background:none;border:1px solid var(--viiva);color:var(--kromi);padding:.42em .7em;font:600 .86rem/1 var(--kapea);text-transform:uppercase;letter-spacing:.09em;cursor:pointer;min-height:36px}
.tyokalu:hover{border-color:var(--kulta);color:var(--kulta)}
.tyokalu svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tyokalu svg .t{fill:currentColor;stroke:none}
.tyokalu kbd{font:inherit;font-size:.8em;border:1px solid var(--viiva);padding:.1em .4em;color:var(--hamara)}
.tyokalu-valikko{display:none}
@media (max-width:860px){
  .valikko{display:none}
  .tyokalu-valikko{display:inline-flex}
  .tyokalu kbd{display:none}
}
@media (max-width:420px){.tyokalu[data-arvo] span{display:none}}

/* ---------------------------------------------------------------- napit */
.nappi{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;cursor:pointer;
  font:600 1.02rem/1 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:#170803;text-decoration:none;padding:.95em 1.7em;min-height:46px}
.nappi::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--liekki);transform:skewX(-12deg);transition:background-color .15s}
.nappi:hover::before{background:var(--kulta)}
.nappi-2{color:var(--muste)}
.nappi-2::before{background:var(--kromi)}
.nappi-3{color:var(--kromi);font-size:.92rem;padding:.75em 1.3em;min-height:40px}
.nappi-3::before{background:var(--yo-3);box-shadow:inset 0 0 0 1px var(--viiva)}
.nappi-3:hover{color:var(--muste)}

/* "tekijätiedot": julisteen alareunan kapea versaaliteksti */
.tekijat{margin:0;font:500 clamp(1rem,.9rem + .5vw,1.3rem)/1.35 var(--kapea);text-transform:uppercase;letter-spacing:.07em;color:var(--kromi)}
.tekijat span{display:inline-block;margin-inline:.55em;white-space:nowrap}
.tekijat i{font-style:normal;font-size:.6em;letter-spacing:.16em;color:var(--hamara);vertical-align:.32em;margin-right:.25em}

/* aihetarra */
.aihe{display:inline-block;padding:.12em .7em .1em;background:var(--aihe,#a9b2d6);color:var(--muste);font:600 .8rem/1.4 var(--kapea);text-transform:uppercase;letter-spacing:.09em;text-decoration:none;transform:skewX(-12deg)}
a.aihe:hover{background:#fff}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(30px,5.5vw,84px)}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:86%;z-index:-1;
  background:radial-gradient(58% 60% at 50% 42%,rgba(255,46,136,.34),transparent 72%),radial-gradient(34% 40% at 50% 52%,rgba(255,74,28,.42),transparent 72%)}
.hero-nimi{position:relative;z-index:2;width:min(1120px,90vw);margin:0 auto calc(-1*clamp(14px,3.9vw,58px));color:#fff;transform:translate3d(var(--mx,0px),calc(var(--py,0px) + var(--my,0px)),0);transition:transform .25s ease-out}
.hero-nimi h1{margin:0;line-height:0}
.hero-nimi svg{display:block;width:100%;height:auto;
  filter:drop-shadow(clamp(2px,.42vw,6px) 0 0 var(--liekki)) drop-shadow(calc(-1*clamp(2px,.42vw,6px)) 0 0 var(--neon));
  animation:asetu 1s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes asetu{
  0%{opacity:0;transform:translateX(-3%) skewX(-10deg);filter:drop-shadow(30px 0 0 var(--liekki)) drop-shadow(-30px 0 0 var(--neon))}
  55%{opacity:1;transform:translateX(.6%) skewX(3deg)}
  70%{transform:translateX(-.3%) skewX(-1deg)}
  100%{opacity:1;transform:none}
}
.hero-kaista{position:relative;background-color:#06050f;padding-block:17px;
  background-image:repeating-linear-gradient(90deg,transparent 0 10px,#2b2757 10px 23px,transparent 23px 33px),repeating-linear-gradient(90deg,transparent 0 10px,#2b2757 10px 23px,transparent 23px 33px);
  background-size:100% 8px;background-repeat:no-repeat;background-position:0 4.5px,0 calc(100% - 4.5px)}
.hero-ruutu{position:relative;aspect-ratio:3.84;min-height:230px;max-height:540px;width:100%;overflow:hidden;background:#000;animation:avaa 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes avaa{from{clip-path:inset(49% 0 49% 0)}to{clip-path:inset(0)}}
.hero-kuvat{position:absolute;inset:-12% -1.5%;transform:translate3d(var(--mx,0px),calc(var(--py,0px) + var(--my,0px)),0);transition:transform .25s ease-out}
.hero-kuvat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.3s ease}
.hero-kuvat img.on{opacity:1}
.hero-ruutu::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,11,36,.5),transparent 20%,transparent 80%,rgba(14,11,36,.5)),linear-gradient(rgba(14,11,36,.45),transparent 30%,transparent 70%,rgba(14,11,36,.6)),repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.hero-seuranta{position:absolute;left:0;right:0;top:-22%;height:16%;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(transparent,rgba(255,255,255,.14) 35%,rgba(56,225,255,.3) 50%,rgba(255,255,255,.1) 60%,transparent);
  animation:seuranta 1.5s .55s ease-in 1 both}
@keyframes seuranta{to{top:112%}}
.hero-hud{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(16px,4vw,40px)}
.hero-laskuri{font:600 .9rem/1 var(--kapea);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px #000;font-variant-numeric:tabular-nums}
.hero-play::after{content:"";display:inline-block;margin-left:.4em;border-left:.62em solid currentColor;border-block:.36em solid transparent}
.hero-nro{margin-left:1.2em;color:var(--kulta)}
.hero-pisteet{display:flex;gap:2px}
.hero-piste{width:26px;height:28px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.hero-piste::before{content:"";position:absolute;left:4px;right:4px;top:12px;height:4px;background:rgba(255,255,255,.45);transform:skewX(-20deg)}
.hero-piste.on::before{background:var(--liekki)}
.hero-piste:hover::before{background:#fff}
.hero-ala{text-align:center;padding-block:clamp(22px,3vw,36px) clamp(44px,6vw,80px);display:grid;gap:clamp(14px,2vw,22px);justify-items:center}
.hero-teksti{margin:0;font-size:clamp(1.1rem,1rem + .7vw,1.45rem);max-width:34em;color:#fff}
.hero-napit{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
@media (max-width:700px){
  .hero-ruutu{aspect-ratio:16/10;max-height:none}
  .hero-nimi{width:94vw;margin-bottom:-6px}
}

/* ---------------------------------------------------------------- osiot */
.osio{padding-block:clamp(44px,7vw,96px)}
.osio-otsake{display:flex;align-items:baseline;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,36px)}
h2{font:italic 800 clamp(1.9rem,1.3rem + 2.8vw,3.3rem)/1 var(--otsikko);text-transform:uppercase;margin:0;color:#fff}
.osio-otsake h2::before,.selaa h2::before{content:"";display:inline-block;width:.42em;height:.7em;background:var(--liekki);transform:skewX(-14deg);margin-right:.3em}
.lisaa-linkki{font:600 1rem/1.2 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:var(--kulta);text-underline-offset:.25em}
.lisaa-linkki:hover{color:#fff}
.osio-ohje{color:var(--hamara);margin:.4em 0 1.4em;max-width:38em}

/* --------------------------------------------------------------- kortit */
.kortti-linkki{display:block;color:inherit;text-decoration:none}
.kortti-kuva{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--yo-2);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.kortti-kuva img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kortti-linkki:hover .kortti-kuva img{transform:scale(1.045)}
.kortti-tyhja{position:absolute;inset:0;background:repeating-linear-gradient(-55deg,var(--yo-2) 0 14px,var(--yo-3) 14px 28px)}
.kortti-video{position:absolute;left:10px;bottom:10px;width:34px;height:24px;background:rgba(14,11,36,.86);transform:skewX(-12deg)}
.kortti-video::after{content:"";position:absolute;left:13px;top:6px;border-left:10px solid #fff;border-block:6px solid transparent}
.kortti-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .8em;margin:.85em 0 .35em;font:500 .86rem/1.2 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:var(--hamara)}
.kortti-otsikko{font:700 1.22rem/1.22 var(--leipa);text-transform:none;margin:0;color:#fff;text-wrap:balance}
.kortti-linkki:hover .kortti-otsikko{color:var(--kulta)}
.kortti-kuvaus{margin:.45em 0 0;color:var(--hamara);font-size:.97rem;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.kortti[hidden]{display:none}
.kortti-iso .kortti-otsikko{font:italic 800 clamp(1.6rem,1.1rem + 2.2vw,2.5rem)/1.04 var(--otsikko)}
.kortti-iso .kortti-kuvaus{font-size:1.08rem;-webkit-line-clamp:4}

.uusimmat{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3.4vw,44px)}
.uusimmat-loput{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;align-content:start}
.uusimmat-loput .kortti-kuvaus{display:none}
.uusimmat-loput .kortti-otsikko{font-size:1.08rem}
@media (max-width:900px){.uusimmat{grid-template-columns:1fr}}

.ruudukko{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:44px 28px}

/* ------------------------------------------------- luetuimmat: kasettipino */
.hylly{background:linear-gradient(#0a081c,#130f31);border-block:1px solid var(--viiva);overflow:hidden}
.kasetit{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;gap:7px}
.kasetit li{transform:translateX(var(--siirto,0)) rotate(var(--kallistus,0deg))}
.kasetti{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:stretch;min-height:66px;padding:7px 14px 7px 7px;
  color:var(--muste);text-decoration:none;border-radius:5px;background-color:#211e33;border:1px solid #37335a;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px);
  box-shadow:0 2px 0 #000,0 14px 20px -10px rgba(0,0,0,.85);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.kasetti:hover,.kasetti:focus-visible{transform:translateX(22px)}
.kasetti-sija{display:grid;place-items:center;background:var(--aihe);border-radius:3px;font:italic 800 2rem/1 var(--otsikko);padding-right:.1em}
.kasetti-tarra{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 16px 13px;border-radius:3px;
  background:linear-gradient(var(--paperi) 0 calc(100% - 6px),var(--aihe) calc(100% - 6px))}
.kasetti-nimi{font:700 1.14rem/1.2 var(--leipa);text-wrap:balance}
.kasetti-tieto{font:500 .8rem/1.2 var(--kapea);text-transform:uppercase;letter-spacing:.12em;color:#5d5876}
.kasetti-luku{align-self:center;background:var(--kulta);padding:.5em .85em .45em;border-radius:3px;transform:rotate(-3deg);text-align:center;
  font:600 .72rem/1.1 var(--kapea);text-transform:uppercase;letter-spacing:.12em}
.kasetti-luku b{display:block;font:italic 800 1.3rem/1.05 var(--otsikko);letter-spacing:0}
@media (max-width:640px){
  .kasetit li{transform:rotate(var(--kallistus,0deg))}
  .kasetti{grid-template-columns:46px minmax(0,1fr);padding-right:7px}
  .kasetti:hover{transform:none}
  .kasetti-sija{font-size:1.5rem}
  .kasetti-luku{grid-column:2;justify-self:start;transform:none;display:flex;gap:.5em;align-items:baseline;padding:.3em .7em}
  .kasetti-luku b{font-size:1rem;display:inline}
}

/* ------------------------------------------------------ vuodet ja aiheet */
.selaa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,72px);align-items:start}
@media (max-width:900px){.selaa{grid-template-columns:1fr}}
.palkit{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(4px,1vw,10px);align-items:end}
.palkit a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:250px;color:#fff;text-decoration:none}
.palkit i{font:italic 800 1.05rem/1 var(--otsikko)}
.palkit b{font:600 .88rem/1 var(--kapea);letter-spacing:.06em;color:var(--hamara)}
.palkki{display:block;width:100%;height:calc(var(--osuus)*190px);min-height:5px;background:linear-gradient(var(--pinkki),var(--liekki));transform:skewX(-6deg);transform-origin:bottom}
.palkit a:hover .palkki,.palkit a:focus-visible .palkki{background:linear-gradient(#fff,var(--kulta))}
.palkit a:hover b{color:#fff}
.laatat{list-style:none;margin:clamp(20px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:640px){.laatat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.laatta{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/3;overflow:hidden;padding:10px 12px;color:#fff;text-decoration:none;background:var(--yo-2);border-bottom:5px solid var(--aihe)}
.laatta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.laatta::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(14,11,36,.1) 20%,rgba(14,11,36,.92))}
.laatta:hover img{transform:scale(1.06)}
.laatta-nimi,.laatta-maara{position:relative;z-index:1}
.laatta-nimi{font:italic 800 clamp(1.05rem,.8rem + .9vw,1.4rem)/1.05 var(--otsikko);text-transform:uppercase}
.laatta-maara{font:500 .82rem/1.3 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:var(--aihe)}

/* ------------------------------------------------------------ julisteseinä */
.seina{background:radial-gradient(70% 90% at 50% 0%,#2c2063 0%,transparent 70%),#0a081c;overflow:hidden;padding-bottom:clamp(70px,10vw,140px)}
.julisteet{display:flex;justify-content:center;gap:clamp(12px,2.6vw,38px);padding:26px 20px 0}
.juliste{flex:0 1 232px;min-width:0;aspect-ratio:2/3;background:#000;box-shadow:0 0 0 6px #f3efe6,0 30px 50px -20px #000;
  transform:translate3d(0,var(--py,0px),0) rotate(var(--kallistus,0deg));transition:box-shadow .2s}
.juliste img{display:block;width:100%;height:100%;object-fit:cover}
.juliste:hover{box-shadow:0 0 0 6px var(--kulta),0 30px 50px -20px #000}
@media (max-width:700px){
  .julisteet{justify-content:flex-start;overflow-x:auto;padding-bottom:40px;scroll-snap-type:x mandatory}
  .juliste{flex:0 0 46vw;scroll-snap-align:center}
}

/* -------------------------------------------------------- sivujen otsakkeet */
.sivu-otsake{padding-block:clamp(36px,6vw,80px) clamp(18px,2.5vw,30px)}
.sivu-otsake h1{font:italic 800 clamp(2.6rem,1.6rem + 5vw,5.2rem)/.95 var(--otsikko);text-transform:uppercase;margin:0;color:#fff}
.sivu-ingressi{margin:.8em 0 0;color:var(--hamara);font-size:1.12rem;max-width:40em}

/* ----------------------------------------------------- blogilistan suodatin */
.suodatin{position:sticky;top:var(--palkki-k);z-index:20;background:rgba(14,11,36,.97);border-block:1px solid var(--viiva);padding-block:12px}
.suodatin-rivi{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.kentta{display:grid;gap:4px;min-width:0}
.kentta>span{font:600 .74rem/1 var(--kapea);text-transform:uppercase;letter-spacing:.14em;color:var(--hamara)}
.kentta input,.kentta select{font:400 1rem/1.2 var(--leipa);color:var(--kromi);background-color:var(--yo-2);border:1px solid var(--viiva);border-radius:0;padding:.55em .8em;min-height:44px;min-width:0;width:100%}
.kentta select{appearance:none;-webkit-appearance:none;padding-right:2.3em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffc531' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:12px 8px}
.kentta input::placeholder{color:#8683b3}
.kentta-haku{flex:1 1 230px}
.suodatin-tulos{margin:0 0 0 auto;align-self:center;font:600 1.02rem/1 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:var(--kulta)}
.lista .ruudukko{padding-block:clamp(28px,4vw,48px)}
.lisaa-rivi{text-align:center;margin:0;padding-bottom:clamp(50px,8vw,100px)}
.tyhja{text-align:center;padding:40px 0 100px;color:var(--hamara);font-size:1.15rem}
@media (max-width:700px){
  .suodatin{position:static}
  .suodatin-rivi .kentta{flex:1 1 46%}
  .suodatin-rivi .kentta-haku{flex-basis:100%}
}

/* ------------------------------------------------------------------ arkisto */
.arkisto{padding-bottom:clamp(60px,9vw,120px)}
.arkisto-hypyt{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.arkisto-hypyt a{font:600 1rem/1 var(--kapea);letter-spacing:.08em;color:var(--kromi);text-decoration:none;padding:.5em .8em;border:1px solid var(--viiva)}
.arkisto-hypyt a:hover{border-color:var(--kulta);color:var(--kulta)}
.arkisto-vuosi{margin-top:clamp(36px,5vw,60px)}
.arkisto-vuosi h2{display:flex;align-items:baseline;gap:.5em;border-bottom:3px solid var(--liekki);padding-bottom:.15em}
.arkisto-vuosi h2 small{font:500 1rem/1 var(--kapea);letter-spacing:.1em;color:var(--hamara)}
.arkisto-vuosi h3{font:600 .95rem/1 var(--kapea);text-transform:uppercase;letter-spacing:.14em;color:var(--kulta);margin:1.9em 0 .5em}
.arkisto-lista{list-style:none;margin:0;padding:0}
.arkisto-lista li{display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:.55em 0;border-bottom:1px solid rgba(255,255,255,.08)}
.arkisto-lista time{font:500 .95rem/1 var(--kapea);letter-spacing:.06em;color:var(--hamara)}
.arkisto-lista a{color:#fff;text-decoration:none;font-weight:600}
.arkisto-lista a:hover{color:var(--kulta);text-decoration:underline}
.arkisto-luku{font:500 .92rem/1 var(--kapea);letter-spacing:.04em;color:var(--hamara);font-variant-numeric:tabular-nums}
.arkisto :target{scroll-margin-top:calc(var(--palkki-k) + 20px)}
.arkisto h3:target{color:#fff}

/* ---------------------------------------------------------------- blogisivu */
.blogi-kansi{position:relative;height:clamp(210px,42vw,540px);overflow:hidden;background:#000}
.blogi-kansi-kuva{position:absolute;inset:-14% 0;transform:translate3d(0,var(--py,0px),0)}
.blogi-kansi img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.blogi-kansi::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(14,11,36,.15) 30%,var(--yo) 97%),repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
.blogi-otsake{position:relative;z-index:1;margin-top:clamp(-170px,-13vw,-50px);padding-bottom:6px}
.ei-kantta .blogi-otsake{margin-top:0;padding-top:clamp(40px,7vw,90px)}
.blogi-aiheet{margin:0 0 14px;display:flex;gap:10px;flex-wrap:wrap}
.blogi-otsake h1{font:italic 800 clamp(2rem,1.3rem + 3.1vw,3.5rem)/1.03 var(--otsikko);margin:0 0 .35em;color:#fff;text-shadow:0 2px 24px rgba(14,11,36,.8)}
.blogi-otsake .tekijat span{margin-inline:0 1.3em}
.luonnos-merkki{display:inline-block;background:var(--kulta);color:var(--muste);font:600 .9rem var(--kapea);text-transform:uppercase;letter-spacing:.1em;padding:.2em .7em}

.teksti{font-size:clamp(1.08rem,1rem + .32vw,1.22rem);line-height:1.72;color:#e4e7f3;padding-block:clamp(22px,3vw,36px) 10px;overflow-wrap:break-word}
.teksti p{margin:0 0 1.15em}
.ingressi{font-size:1.16em;line-height:1.55;font-weight:600;color:#fff}
.teksti h2,.teksti h3,.teksti h4,.teksti h5{font:700 1.42em/1.2 var(--leipa);text-transform:none;color:#fff;margin:1.9em 0 .55em}
.teksti h4,.teksti h5{font-size:1.15em}
.teksti a{color:var(--neon);text-underline-offset:.18em}
.teksti a:hover{color:#fff}
.teksti ul,.teksti ol{padding-left:1.3em;margin:0 0 1.2em}
.teksti li{margin-bottom:.4em}
.teksti li::marker{color:var(--liekki);font-weight:700}
.teksti blockquote{margin:1.5em 0;padding:.15em 0 .15em 1.1em;border-left:4px solid var(--liekki);font-style:italic;color:#fff}
.teksti blockquote p:last-child{margin-bottom:0}
.teksti hr{border:0;height:3px;background:var(--viiva);margin:2em 0}
.teksti img{height:auto}
.teksti .keski{text-align:center}
.teksti table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:.95em}
.teksti td,.teksti th{border:1px solid var(--viiva);padding:.45em .7em;text-align:left}
.kuvio{margin:1.7em 0}
.kuva{display:block;cursor:zoom-in}
.kuva img{display:block;width:100%}
.teksti img.pieni{display:block;margin-inline:auto}
@media (min-width:1100px){.kuvio{margin-inline:-110px}}
.video{position:relative;aspect-ratio:16/9;margin:1.7em 0;background:#000;overflow:hidden}
@media (min-width:1100px){.teksti .video{margin-inline:-110px}}
.yt{position:absolute;inset:0;display:block}
.yt img{display:block;width:100%;height:100%;object-fit:cover;opacity:.86;transition:opacity .2s,transform .5s cubic-bezier(.2,.8,.2,1)}
.yt:hover img{opacity:1;transform:scale(1.03)}
.yt-nappi{position:absolute;left:50%;top:50%;width:96px;height:62px;margin:-31px 0 0 -48px;background:var(--liekki);transform:skewX(-12deg);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.yt-nappi::after{content:"";position:absolute;left:38px;top:17px;border-left:24px solid #fff;border-block:14px solid transparent;transform:skewX(12deg)}
.yt:hover .yt-nappi{background:var(--kulta)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ig a{display:inline-block;border:1px solid var(--viiva);padding:.5em 1em;text-decoration:none;font:600 1rem var(--kapea);text-transform:uppercase;letter-spacing:.08em}
.ig a:hover{border-color:var(--kulta);color:var(--kulta)}
.blogi-ala{display:flex;flex-wrap:wrap;gap:14px;padding-block:22px clamp(36px,5vw,60px)}

.naapurit{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:0 clamp(20px,3vw,40px)}
.naapuri{display:grid;gap:6px;padding:18px 20px;background:var(--yo-2);border:1px solid var(--viiva);color:#fff;text-decoration:none}
.naapuri i{font:600 .78rem/1 var(--kapea);font-style:normal;text-transform:uppercase;letter-spacing:.16em;color:var(--kulta)}
.naapuri span{font-weight:700;line-height:1.25;text-wrap:balance}
.naapuri:hover{border-color:var(--kulta)}
.naapuri-uudempi{text-align:right}
@media (max-width:640px){.naapurit{grid-template-columns:1fr}.naapuri-uudempi{text-align:left}}
.lue-myos{padding-top:clamp(30px,5vw,60px)}
.kommentit{padding-block:clamp(30px,5vw,60px) clamp(60px,9vw,120px)}
.kommentit h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem)}
#disqus_thread{margin-top:26px;color-scheme:dark}
#disqus_thread:empty{display:none}

/* ----------------------------------------------------------------- galleria */
.galleria{columns:3 280px;column-gap:14px;padding-bottom:clamp(60px,9vw,120px)}
.gkuva{display:block;margin:0 0 14px;break-inside:avoid;cursor:zoom-in;overflow:hidden;background:var(--yo-2)}
.gkuva img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gkuva:hover img{transform:scale(1.03)}

/* kuvan tai videon alla oleva kursivoitu kappale = kuvateksti */
.kuvio + p:has(> em:only-child),.video + p:has(> em:only-child){margin-top:-1em;font-size:.9em;color:var(--hamara);text-align:center}

/* lukemisen edistyminen */
.edistyma{position:fixed;left:0;right:0;top:var(--palkki-k);height:3px;z-index:29;pointer-events:none}
.edistyma span{display:block;height:100%;background:linear-gradient(90deg,var(--pinkki),var(--liekki));transform:scaleX(0);transform-origin:left}

/* osiot heräävät näkyviin tullessaan (vain kun JavaScript on käytössä) */
.js .kasetit[data-nayta] li{transition:opacity .45s ease,translate .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--n)*55ms)}
.js .kasetit[data-nayta]:not(.nakyy) li{opacity:0;translate:90px 0}
.js .kasetit[data-nayta]:not(.nakyy) li:nth-child(even){translate:-90px 0}
.js .palkit[data-nayta] .palkki{transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--n)*60ms)}
.js .palkit[data-nayta] i{transition:opacity .4s ease;transition-delay:calc(var(--n)*60ms + .45s)}
.js .palkit[data-nayta]:not(.nakyy) .palkki{transform:skewX(-6deg) scaleY(0)}
.js .palkit[data-nayta]:not(.nakyy) i{opacity:0}

/* videosivu */
.ruudukko-tiivis{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:34px 22px}
.kortti-vid .kortti-otsikko{font-size:1.05rem}
.kortti-vid .kortti-otsikko small{display:block;font:500 .78rem/1.5 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:var(--hamara)}
.kortti-vid .kortti-kuva{background:#000}
.yt-nappi-pieni{width:54px;height:36px;margin:-18px 0 0 -27px;opacity:.92}
.yt-nappi-pieni::after{left:21px;top:9px;border-left-width:15px;border-block-width:9px}
.kortti-linkki:hover .yt-nappi{background:var(--kulta)}
.ikkuna-video[open]{display:block;width:min(1180px,96vw);margin:auto;background:var(--yo);border:1px solid var(--viiva);box-shadow:0 30px 90px #000}
.video-yla{display:flex;align-items:center;gap:12px;padding:10px 14px}
.video-otsikko{margin:0 auto 0 0;font-weight:700;line-height:1.2}
.ikkuna-video .video{margin:0}
@media (max-width:640px){.video-yla{flex-wrap:wrap}.video-otsikko{flex-basis:100%}}

/* --------------------------------------------------------- ponnahdusikkunat */
.ikkuna{border:0;padding:0;margin:0;color:var(--kromi);background:var(--yo-2);max-width:none;max-height:none}
.ikkuna::backdrop{background:rgba(5,4,15,.84)}
.ikkuna-haku[open]{display:flex;flex-direction:column;width:min(780px,94vw);max-height:min(82vh,820px);margin:7vh auto 0;border:1px solid var(--viiva);box-shadow:0 30px 80px #000}
.haku-yla{display:flex;gap:10px;padding:14px;border-bottom:1px solid var(--viiva)}
.haku-yla input{flex:1;min-width:0;font:400 1.15rem var(--leipa);color:#fff;background:var(--yo);border:1px solid var(--viiva);padding:.7em .9em;border-radius:0}
.haku-tila{margin:0;padding:10px 16px 6px;font:600 .82rem/1.3 var(--kapea);text-transform:uppercase;letter-spacing:.12em;color:var(--hamara)}
.haku-tila:empty{display:none}
.haku-tulokset{list-style:none;margin:0;padding:4px 8px 10px;overflow:auto;overscroll-behavior:contain}
.haku-tulokset a{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;padding:8px;color:#fff;text-decoration:none}
.haku-tulokset a:hover,.haku-tulokset a.valittu{background:var(--yo-3)}
.haku-tulokset img{display:block;width:104px;aspect-ratio:16/9;object-fit:cover;background:var(--yo)}
.haku-tulokset b{display:block;font-weight:700;line-height:1.25}
.haku-tulokset small{display:block;font:500 .8rem/1.3 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:var(--hamara);margin-top:3px}
.haku-tulokset p{margin:4px 0 0;font-size:.92rem;line-height:1.4;color:var(--hamara);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.haku-tulokset mark{background:none;color:var(--kulta);font-weight:700}

.ikkuna-valikko[open]{display:flex;flex-direction:column;gap:20px;width:min(400px,90vw);height:100dvh;margin:0 0 0 auto;padding:16px 22px;border-left:1px solid var(--viiva)}
.ikkuna-valikko form{text-align:right}
.ikkuna-valikko nav{display:grid;gap:4px}
.ikkuna-valikko nav a{font:italic 800 1.9rem/1.1 var(--otsikko);text-transform:uppercase;color:#fff;text-decoration:none;padding:.35em 0;border-bottom:1px solid var(--viiva)}
.ikkuna-valikko nav a:hover{color:var(--kulta)}

.ikkuna-kuva[open]{display:block;width:100vw;height:100dvh;background:rgba(5,4,15,.97)}
.ikkuna-kuva img{position:absolute;inset:58px 70px 46px;width:calc(100% - 140px);height:calc(100% - 104px);object-fit:contain}
.lb-laskuri{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font:600 .9rem/1 var(--kapea);letter-spacing:.16em;color:var(--hamara)}
.lb-nappi{position:absolute;top:50%;margin-top:-34px;width:56px;height:68px;border:0;background:rgba(35,29,80,.7);color:#fff;cursor:pointer}
.lb-nappi:hover{background:var(--liekki)}
.lb-nappi svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lb-edellinen{left:6px}
.lb-seuraava{right:6px}
.lb-sulje{position:absolute;right:14px;top:10px}
@media (max-width:700px){
  .ikkuna-kuva img{inset:58px 0 46px;width:100%}
  .lb-nappi{top:auto;bottom:0;margin:0;height:44px;background:none}
}

/* ---------------------------------------------------------------- alapalkki */
.alapalkki{border-top:1px solid var(--viiva);background:#0a081c;text-align:center;padding-block:clamp(40px,6vw,72px)}
.alapalkki-logo{color:#fff;width:min(300px,70vw);margin:0 auto 18px}
.alapalkki-logo svg{display:block;width:100%;height:auto}
.tekijat-ala{font-size:1.05rem}
.alapalkki-linkit{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.alapalkki-linkit a{font:600 1rem/1.6 var(--kapea);text-transform:uppercase;letter-spacing:.1em;color:var(--kromi);text-underline-offset:.25em}
.alapalkki-linkit a:hover{color:var(--kulta)}
.alapalkki-pieni{margin:22px 0 0;color:var(--hamara);font-size:.9rem}

/* ----------------------------------------------------------------- 404-sivu */
.ei-loydy{text-align:center;padding-block:clamp(40px,7vw,90px) clamp(70px,10vw,140px)}
.ei-loydy-kasetti img{width:min(360px,78vw);height:auto;transform:rotate(-4deg);margin-bottom:26px}
.ei-loydy h1{font:italic 800 clamp(2rem,1.3rem + 3.4vw,3.4rem)/1.02 var(--otsikko);text-transform:uppercase;margin:0 0 .4em;color:#fff}
.ei-loydy p{color:var(--hamara);font-size:1.12rem}

/* ------------------------------------------------- lepotila ja liikkeen esto */
.lepo *,.lepo *::before,.lepo *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-seuranta{display:none}
}
@media print{
  .ylapalkki,.alapalkki,.suodatin,.naapurit,.lue-myos,.kommentit,.blogi-ala,.ikkuna{display:none!important}
  body{background:#fff;color:#000}
  .teksti,.ingressi,.blogi-otsake h1{color:#000;text-shadow:none}
}