/**
 * ninni-kampanja — asettelu ja komponentit.
 *
 * Haara ehdokas-kampanja v0.4.1:stä (20.9.2026). Toiminnallisuus on
 * sama; tämä tiedosto ja viisi sivupohjaa ovat Ninnin oma ulkoasu.
 * Lähteet: Ninnin lomake ("Tiina Elon tunnelma ja asettelu", "Bella
 * Forsgrenin väri", kuva taustoineen, vanamo-piirrokset kuvitukseen,
 * yhteystiedot alapalkkiin) ja hänen vanha sivustonsa (valikko omalla
 * rivillä, kevyt valkoinen luku-pinta).
 *
 * Kaikki värit tokens.css:stä (assets/ilme/). Tässä ei ole heksavärejä:
 * brändivärit viitataan --ek-brand-*-tokeneilla, jotka generaattori
 * kirjoittaa manifestin nimistä (Metsänvihreä, Persikka, Oranssi).
 *
 * Rakenne:
 *   1. Pohja ja typografia
 *   2. Asettelu
 *   3. Napit ja linkit
 *   4. Kuvat: suorakulmio pehmeillä kulmilla, ei kaaria
 *   5. Yläpalkki: kaksi riviä
 *   6. Hero: persikkapinta
 *   7. Osiot ja kortit
 *   8. Kaistat ja kuvitus
 *   9. Prose
 *  10. Yhteystiedot ja tapahtumat
 *  11. Alatunniste
 *  12. Saavutettavuus ja liike
 *  13. Somenostot ja videot
 */

/* ============================================================
   1. Pohja ja typografia
   ============================================================ */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    background: var(--ek-bg);
    color: var(--ek-fg);
    font-family: var(--ek-font-body);
    font-size: var(--ek-size-body);
    line-height: var(--ek-leading-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

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

/* Now on geometrinen groteski, jolla on vain 400 ja 700. Otsikot 700,
   tiukka riviväli ja hieman negatiivinen välistys isoissa koissa. */
h1, h2, h3, h4 {
    font-family: var(--ek-font-display);
    font-weight: 700;
    line-height: var(--ek-leading-tight);
    letter-spacing: -0.02em;
    margin: 0 0 var(--ek-space-3);
    text-wrap: balance;
}

h1 { font-size: var(--ek-size-h1); }
h2 { font-size: var(--ek-size-h2); }
h3 { font-size: var(--ek-size-h3); letter-spacing: -0.01em; }

p { margin: 0 0 var(--ek-space-3); }
p:last-child { margin-bottom: 0; }

/* Otsikon yläpuolinen pieni harvennettu rivi. Valkoisella pohjalla
   tumma oranssi (kontrasti tarkistettu tokeneissa); kaistoilla oma
   arvo, ks. 8. */
.ek-eyebrow {
    font-family: var(--ek-font-body);
    font-size: var(--ek-size-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ek-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ek-accent-text);
    margin: 0 0 var(--ek-space-2);
}

.ek-lead {
    font-size: var(--ek-size-lead);
    color: var(--ek-fg-muted);
    max-width: var(--ek-max-text);
}

/* ============================================================
   2. Asettelu
   ============================================================ */

.ek-shell {
    width: 100%;
    max-width: var(--ek-max-page);
    margin-inline: auto;
    padding-inline: var(--ek-gutter);
}

.ek-shell--narrow { max-width: var(--ek-max-narrow); }

.ek-section { padding-block: var(--ek-section-y); }

.ek-center { text-align: center; margin-inline: auto; }
.ek-center .ek-lead { margin-inline: auto; }

.ek-split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.ek-split--top { align-items: start; }

@media (min-width: 860px) {
    .ek-split { grid-template-columns: 1fr 1fr; }
    .ek-split--flip > :first-child { order: 2; }
}

/* ============================================================
   3. Napit ja linkit
   ============================================================ */

a {
    color: inherit;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: opacity var(--ek-transition);
}

a:hover { opacity: 0.75; }

/* Pillerinappi kuten Ninnin vanhalla sivulla ("Lahjoita"). Ensisijainen
   on metsänvihreä pinta persikkatekstillä; toissijainen ääriviiva.
   Oranssi (--ek-accent) on hover-pinta ja korostus — asiakkaan oma
   väri näkyy, mutta ei kanna tekstiä ohuena. */
.ek-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ek-space-1);
    padding: 0.95em 2.1em;
    border: 1.5px solid var(--ek-fg);
    border-radius: var(--ek-radius-pill);
    background: transparent;
    color: var(--ek-fg);
    font-family: var(--ek-font-body);
    font-size: var(--ek-size-small);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ek-transition), color var(--ek-transition), border-color var(--ek-transition), opacity var(--ek-transition);
}

.ek-btn:hover {
    background: var(--ek-accent);
    border-color: var(--ek-accent);
    color: var(--ek-accent-ink);
    opacity: 1;
}

.ek-btn--solid {
    background: var(--ek-fg);
    border-color: var(--ek-fg);
    color: var(--ek-brand-persikka);
}

.ek-btn--solid:hover {
    background: var(--ek-accent);
    border-color: var(--ek-accent);
    color: var(--ek-accent-ink);
}

.ek-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 700;
    color: var(--ek-accent-text);
    text-decoration: none;
    border-bottom: 2px solid var(--ek-accent);
    padding-bottom: 2px;
}

.ek-link-arrow::after { content: '→'; }

/* Lohkoeditorin paletti julkisella sivulla (sama kuin pohjateemassa). */
.has-pohja-background-color  { background-color: var(--ek-bg); color: var(--ek-fg); }
.has-teksti-background-color { background-color: var(--ek-fg); color: var(--ek-bg); }
.has-brandi-background-color { background-color: var(--ek-accent); color: var(--ek-accent-ink); }
.has-kaista-background-color { background-color: var(--ek-band-bg); color: var(--ek-band-fg); }
.has-pohja-color  { color: var(--ek-bg); }
.has-teksti-color { color: var(--ek-fg); }
.has-brandi-color { color: var(--ek-accent-text); }
.has-kaista-color { color: var(--ek-band-bg); }

/* ============================================================
   4. Kuvat
   Luokkanimet .ek-arch ja .ek-round tulevat ek_shape_image()-funktiosta
   (toiminnallisuus kopioitu). Tässä teemassa kumpikaan ei ole kaari
   eikä ympyrä: kuva on suorakulmio pehmeillä kulmilla, kuten Ninnin
   mallisivuilla ja hänen vanhalla sivullaan.
   ============================================================ */

.ek-arch,
.ek-round {
    overflow: hidden;
    background: var(--ek-bg-raised);
    border-radius: var(--nk-radius-photo);
}

.ek-arch img,
.ek-round img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ek-round { aspect-ratio: 4 / 5; }
.ek-arch--portrait { aspect-ratio: 4 / 5; }
.ek-arch--wide { aspect-ratio: 3 / 2; border-radius: var(--nk-radius-card-media); }

/* Teeman omat mitat. Eivät ilmeestä: ne ovat tämän teeman muotokieli,
   eivät asiakkaan brändin. */
:root {
    --nk-radius-photo: 22px;
    --nk-radius-card: 20px;
    --nk-radius-card-media: 12px;
    --nk-hairline: color-mix(in srgb, var(--ek-fg) 16%, transparent);
    --nk-tint: color-mix(in srgb, var(--ek-brand-persikka) 45%, var(--ek-bg));
}

/* ============================================================
   5. Yläpalkki: kaksi riviä
   Rivi 1: Ninni-hahmo + nimi vasemmalla, lahjoitusnappi oikealla.
   Rivi 2: valikko omalla rivillään — mahtuu seitsemän kohtaa 1366
   px:iin, mikä oli pohjateeman yksirivisen palkin ongelma.
   Koko palkki on persikkaa ja jatkuu suoraan heroon.
   ============================================================ */

.ek-header {
    background: var(--ek-bg);
    color: var(--ek-fg);
}

.nk-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ek-space-3);
    padding-block: var(--ek-space-2);
    min-height: 84px;
}

.ek-lockup {
    display: flex;
    align-items: center;
    gap: var(--ek-space-2);
    min-width: 0;
    text-decoration: none;
}

/* Ninni-hahmo: asiakkaan oma piirroshahmo, jonka hän itse nimesi
   "logonakin käytettäväksi". Pieni, nimen vieressä. */
.nk-hahmo {
    height: 56px;
    width: auto;
    flex: none;
}

.nk-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.nk-wordmark__name {
    font-family: var(--ek-font-display);
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.nk-wordmark__kicker {
    font-size: var(--ek-size-eyebrow);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ek-fg-muted);
    margin-top: 0.35em;
}

.nk-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--ek-space-2);
    flex: none;
}

.ek-donate {
    display: inline-flex;
    align-items: center;
    padding: 0.65em 1.5em;
    border-radius: var(--ek-radius-pill);
    background: var(--ek-fg);
    color: var(--ek-brand-persikka);
    font-size: var(--ek-size-small);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ek-transition), color var(--ek-transition), opacity var(--ek-transition);
}

/* Sydänkuvake tekstin "<3" tilalle (palaute kierros-1 lupasi tämän,
   toteutettu kierros-3 kommentissa 1). */
.ek-donate::after {
    content: "♥";
    margin-left: 0.4em;
}

.ek-donate:hover {
    background: var(--ek-accent);
    color: var(--ek-accent-ink);
    opacity: 1;
}

/* Rivi 2: valikko. */
.ek-nav {
    border-top: 1px solid var(--nk-hairline);
}

.nk-menubar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ek-space-2) var(--ek-space-4);
    min-height: 52px;
}

.ek-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--ek-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ek-menu a {
    display: inline-block;
    padding: 0.85em 0;
    font-size: var(--ek-size-body);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.ek-menu a:hover { opacity: 1; border-bottom-color: var(--ek-accent); }

.ek-menu .current-menu-item > a,
.ek-menu .current_page_item > a,
.ek-menu .current-menu-ancestor > a {
    border-bottom-color: var(--ek-accent-text);
}

/* Alasivut: yksi pudotustaso (sama mekanismi kuin pohjateemassa). */
.ek-menu .menu-item-has-children { position: relative; }

.ek-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    margin: 0;
    padding: var(--ek-space-1) 0;
    list-style: none;
    background: var(--ek-brand-valkoinen, #fff);
    color: var(--ek-fg);
    border: 1px solid var(--nk-hairline);
    border-radius: var(--nk-radius-card-media);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ek-transition), visibility var(--ek-transition);
    z-index: 20;
}

.ek-menu .menu-item-has-children:hover > .sub-menu,
.ek-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.ek-menu .sub-menu a {
    display: block;
    padding: var(--ek-space-1) var(--ek-space-2);
    border-bottom: 0;
    font-weight: 400;
    white-space: nowrap;
}

/* Kielivalitsin (Polylang), jos sivustolla on kaksi kieltä. */
.ek-lang {
    display: flex;
    align-items: center;
    gap: var(--ek-space-1);
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}

.ek-lang li { display: flex; }

.ek-lang a {
    font-size: var(--ek-size-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.3em 0.6em;
    border-radius: var(--ek-radius-pill);
}

.ek-lang .current-lang a {
    background: var(--ek-fg);
    color: var(--ek-brand-persikka);
}

/* Puhelin: hampurilainen rivillä 1, valikko avautuu rivin 2 paikalle. */
.ek-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--ek-fg);
    border-radius: var(--ek-radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ek-nav-toggle span,
.ek-nav-toggle span::before,
.ek-nav-toggle span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform var(--ek-transition), opacity var(--ek-transition);
}

.ek-nav-toggle span { margin-inline: auto; position: relative; }
.ek-nav-toggle span::before,
.ek-nav-toggle span::after { content: ''; position: absolute; left: 0; }
.ek-nav-toggle span::before { top: -6px; }
.ek-nav-toggle span::after { top: 6px; }

.ek-nav-toggle[aria-expanded='true'] span { background: transparent; }
.ek-nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.ek-nav-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
    .nk-topbar { min-height: 72px; }
    .nk-hahmo { height: 44px; }
    .nk-wordmark__kicker { display: none; }
    .ek-donate { padding: 0.55em 1.1em; font-size: var(--ek-size-eyebrow); }

    .ek-nav-toggle { display: block; }

    /* Suljettuna pois asettelusta ja saavutettavuuspuusta. Ilman
       skriptiä valikko on aina auki (data-open="true" HTML:ssä). */
    .ek-nav[data-open='false'] { display: none; }

    .nk-menubar {
        flex-direction: column;
        align-items: stretch;
        padding-block: var(--ek-space-2) var(--ek-space-3);
    }

    .ek-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .ek-menu a {
        display: block;
        padding: 0.7em 0;
        font-size: 1.2rem;
        border-bottom: 1px solid var(--nk-hairline);
    }

    .ek-menu .current-menu-item > a { border-bottom-color: var(--ek-accent-text); }

    .ek-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        margin: 0 0 0 var(--ek-space-3);
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        color: inherit;
    }

    .ek-menu .sub-menu a { padding: 0.5em 0; font-size: 1.05rem; }

    .ek-lang { margin: var(--ek-space-2) 0 0; }
}

/* Kapea puhelin: nimi sai katketa kahdelle riville. Yhdellä rivillä
   (white-space: nowrap) lockupin pienin leveys oli koko nimi, joten
   se vuoti lahjoitusnapin alle — Ninnin palaute kierros 1, kommentti 3
   ("Tue kampanjaa -osa menee osittain nimen päälle"). */
@media (max-width: 560px) {
    .nk-wordmark { min-width: 0; }

    /* Vain sanaväli saa katkaista — break-word pilkkoi nimen kesken
       sanan, kun tilaa oli liian vähän. Tilaa tehdään pienentämällä
       hahmoa ja lahjoitusnappia, ei rikkomalla nimeä. */
    .nk-wordmark__name {
        white-space: normal;
        font-size: 1.1rem;
    }

    .nk-hahmo { height: 40px; }

    .ek-donate { padding: 0.5em 0.85em; font-size: 0.72rem; }
}

/* ============================================================
   6. Hero: persikkapinta, kuva taustoineen
   Bella Forsgrénin sivun periaate: yksi väripinta koko leveydeltä,
   kuva sen sisällä oikealla ja pinnan alareunaan asti. Ei kaarta,
   ei ympyrää — kuva on kuva.
   ============================================================ */

.nk-hero {
    position: relative;
    overflow: hidden;
    background: var(--ek-brand-persikka);
    color: var(--ek-brand-metsanvihrea);
    /* Tummalla oranssilla ei ole persikalla riittävää kontrastia
       pienelle tekstille, joten yläriviväri on tässä metsänvihreä. */
    --ek-accent-text: var(--ek-brand-metsanvihrea);
    --ek-fg: var(--ek-brand-metsanvihrea);
    --ek-fg-muted: color-mix(in srgb, var(--ek-brand-metsanvihrea) 82%, var(--ek-brand-persikka));
}

.nk-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

.nk-hero__text {
    padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}

.nk-hero__title {
    font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
    line-height: 0.98;
    margin-bottom: var(--ek-space-3);
}

.nk-hero__lead {
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    line-height: 1.4;
    color: var(--ek-brand-metsanvihrea);
    max-width: 30ch;
    margin-bottom: var(--ek-space-4);
    text-wrap: balance;
}

/* Kuva: 4:5, pehmeät yläkulmat, alareuna kiinni pinnan alareunassa. */
.nk-hero__photo {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    align-self: end;
    border-radius: var(--nk-radius-photo) var(--nk-radius-photo) 0 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--ek-brand-persikka) 70%, var(--ek-brand-metsanvihrea));
    aspect-ratio: 4 / 5;
}

.nk-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vanamo: piirros pinnan vasemmassa alakulmassa, tekstin takana,
   haalea. Ei näy puhelimella, jossa se osuisi tekstin päälle. */
.nk-hero__vanamo {
    display: none;
    position: absolute;
    left: -3vw;
    /* Matalampi ja pienempi kuin ensimmäisessä versiossa: piirroksen
       yläreuna jäi alaotsikon päälle (Ninnin palaute kierros 1,
       kommentti 6). Nyt se pysyy tekstin alapuolella. */
    bottom: -2.5rem;
    width: min(30vw, 420px);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 900px) {
    .nk-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: end;
        padding-top: clamp(2rem, 1rem + 3vw, 4rem);
    }

    .nk-hero__text { padding-bottom: clamp(3rem, 2rem + 3vw, 5.5rem); }

    .nk-hero__photo { margin-inline: auto 0; max-width: 480px; }

    .nk-hero__vanamo { display: block; }
}

/* ============================================================
   7. Osiot ja kortit
   ============================================================ */

.ek-section__head {
    max-width: var(--ek-max-text);
    margin-bottom: var(--ek-space-4);
}

.ek-section__head.ek-center { margin-inline: auto; }
.ek-section__head--row { max-width: none; }

@media (min-width: 860px) {
    .ek-section__head--row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--ek-space-4);
    }
    .ek-section__head--row > :first-child { max-width: var(--ek-max-text); }
}

/* Kuka olen: teksti vasemmalla, kuva oikealla — kuten Ninnin vanha
   sivu. Kuva on suorakulmio, ei ympyrä. */
.nk-about {
    display: grid;
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: center;
}

.nk-about__media {
    width: 100%;
    max-width: 420px;
}

@media (min-width: 860px) {
    .nk-about {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2.5rem, 5vw, 5rem);
    }
    .nk-about__media { justify-self: end; max-width: 520px; }
}

/* Esittelykuva on vaaka (3:2), ei pysty: sääntö antaa tähän
   suurimman vaakakuvan, ja pystyrajaus 4:5 leikkasi siitä puolet. */
.nk-about__media .ek-arch { aspect-ratio: 3 / 2; }

/* Alasivun yläosa (Minusta): otsikko ja ingressi vasemmalla, kuva
   oikealla, persikkakaistalla. */
.ek-intro-split {
    display: grid;
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: center;
}

.ek-intro-split__media { width: 100%; max-width: 360px; }

@media (min-width: 860px) {
    .ek-intro-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
        gap: clamp(2.5rem, 5vw, 4.5rem);
    }
}

.ek-facts {
    list-style: none;
    margin: var(--ek-space-4) 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-width: 28rem;
}

.ek-facts li {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--nk-hairline);
    font-size: var(--ek-size-small);
    font-weight: 700;
}

/* Tarina-osio Minusta- ja Vaaliteemat-sivuilla: kuva vuorottelee. */
.ek-story {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
}

.ek-story + .ek-story { margin-top: var(--ek-section-y); }
.ek-story[id] { scroll-margin-top: var(--ek-space-3); }
.ek-story__media { width: 100%; max-width: 360px; }

@media (min-width: 860px) {
    .ek-story--media { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
    .ek-story--right { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
    .ek-story--right .ek-story__media { order: 2; }
}

/* Tule mukaan: viiva, teksti vasemmalla, nappi oikealla. */
.ek-cta {
    display: grid;
    gap: var(--ek-space-3);
    padding-top: var(--ek-space-4);
    border-top: 1px solid var(--nk-hairline);
}

@media (min-width: 760px) {
    .ek-cta {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--ek-space-5);
    }
}

/* Vaaliteemat: kortit vaalealla persikkasävyllä, kuva ylhäällä,
   numero vasemmassa yläkulmassa. Tiina Elon sivun kortti-idea Ninnin
   väreissä. */
.ek-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ek-card {
    display: flex;
    flex-direction: column;
    gap: var(--ek-space-2);
    padding: 1rem 1rem 1.5rem;
    background: var(--nk-tint);
    border-radius: var(--nk-radius-card);
}

.ek-card__media { margin-bottom: var(--ek-space-1); }
.ek-card__media .ek-arch { background: color-mix(in srgb, var(--ek-brand-persikka) 70%, var(--ek-bg)); }

.ek-card__title {
    font-size: var(--ek-size-h3);
    margin: 0;
    padding-inline: 0.5rem;
}

.ek-card__title a { text-decoration: none; }
.ek-card__title a:hover { color: var(--ek-accent-text); opacity: 1; }

.ek-card__text {
    color: var(--ek-fg-muted);
    margin: 0;
    padding-inline: 0.5rem;
}

.ek-card__number {
    font-family: var(--ek-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ek-accent);
    margin: 0.5rem 0.5rem 0;
}

/* Artikkelilista. */
.ek-posts {
    display: grid;
    gap: var(--ek-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ek-post-item {
    display: grid;
    gap: var(--ek-space-1);
    padding-bottom: var(--ek-space-4);
    border-bottom: 1px solid var(--nk-hairline);
}

.ek-post-item:last-child { border-bottom: 0; padding-bottom: 0; }

.ek-post-item__date {
    font-size: var(--ek-size-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ek-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ek-accent-text);
}

.ek-post-item__title { font-size: var(--ek-size-h3); margin: 0; }
.ek-post-item__title a { text-decoration: none; }

/* ============================================================
   8. Kaistat ja kuvitus
   ============================================================ */

/* Persikkakaista: tokens.css:n .ek-band--dark on tässä ilmeessä
   persikka (lomake: "ylä- ja alapalkit"). Sen päällä yläriviväri ja
   linkit metsänvihreällä, koska tumma oranssi ei riitä persikalla. */
.ek-band--dark {
    --ek-accent-text: var(--ek-brand-metsanvihrea);
}

/* Metsänvihreä kaista: sitaatti. Ainoa tumma pinta sivulla, ja siksi
   se painaa. Teksti persikkaa. */
.nk-band--forest {
    --ek-bg: var(--ek-brand-metsanvihrea);
    --ek-bg-raised: color-mix(in srgb, var(--ek-brand-metsanvihrea) 88%, var(--ek-brand-persikka));
    --ek-fg: var(--ek-brand-persikka);
    --ek-fg-muted: color-mix(in srgb, var(--ek-brand-persikka) 78%, var(--ek-brand-metsanvihrea));
    --ek-line: color-mix(in srgb, var(--ek-brand-persikka) 30%, var(--ek-brand-metsanvihrea));
    --ek-accent: var(--ek-brand-persikka);
    --ek-accent-ink: var(--ek-brand-metsanvihrea);
    --ek-accent-text: var(--ek-brand-persikka);
    position: relative;
    overflow: hidden;
    background: var(--ek-bg);
    color: var(--ek-fg);
}

.ek-quote {
    position: relative;
    z-index: 1;
    font-family: var(--ek-font-display);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    max-width: 24ch;
    margin: 0 auto;
    text-wrap: balance;
}

.ek-quote__attrib {
    display: block;
    margin-top: var(--ek-space-3);
    font-family: var(--ek-font-body);
    font-size: var(--ek-size-small);
    font-weight: 700;
    font-style: normal;
    letter-spacing: var(--ek-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ek-fg-muted);
}

/* Vanamo kaistalla: oikea alakulma, haalea. */
.nk-vanamo {
    position: absolute;
    right: -4vw;
    bottom: -1rem;
    width: min(44vw, 560px);
    opacity: 0.28;
    pointer-events: none;
    z-index: 0;
}

.nk-vanamo--left { right: auto; left: -4vw; transform: scaleX(-1); }

@media (max-width: 640px) {
    .nk-vanamo { width: 70vw; opacity: 0.18; }
}

/* Alasivun yläosa: persikkakaista jatkaa yläpalkista. */
.nk-pagehero {
    position: relative;
    overflow: hidden;
    background: var(--ek-brand-persikka);
    color: var(--ek-brand-metsanvihrea);
    --ek-fg: var(--ek-brand-metsanvihrea);
    --ek-fg-muted: color-mix(in srgb, var(--ek-brand-metsanvihrea) 82%, var(--ek-brand-persikka));
    --ek-accent-text: var(--ek-brand-metsanvihrea);
    padding-block: clamp(1.5rem, 1rem + 2.5vw, 3rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.nk-pagehero .ek-shell { position: relative; z-index: 1; }
.nk-pagehero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.75rem); }
.nk-pagehero .ek-lead { color: var(--ek-fg); }
.nk-pagehero .nk-vanamo { opacity: 0.2; width: min(36vw, 480px); }

/* Vanamo vie oikeasta reunasta noin kolmanneksen, joten ingressi
   katkaistaan ennen sitä. Muuten pitkä rivi jatkui piirroksen päälle
   (Ninnin palaute kierros 1, kommentti 8). Kapealla näytöllä piirros
   on tekstin takana muutenkin haalea, joten rajaus koskee vain
   leveitä näyttöjä. */
@media (min-width: 860px) {
    .nk-pagehero .ek-lead { max-width: min(var(--ek-max-text), 58%); }
}

/* ============================================================
   9. Prose — lohkoeditorin tuotos
   ============================================================ */

.ek-prose { max-width: var(--ek-max-text); }
.ek-prose > * + * { margin-top: var(--ek-space-3); }
.ek-prose h2 { margin-top: var(--ek-space-5); }
.ek-prose h3 { margin-top: var(--ek-space-4); }
.ek-prose ul, .ek-prose ol { padding-left: 1.3em; margin-block: 0; }
.ek-prose li + li { margin-top: var(--ek-space-1); }
.ek-prose a { font-weight: 700; color: var(--ek-accent-text); }

.ek-prose blockquote {
    margin: var(--ek-space-4) 0;
    padding-left: var(--ek-space-3);
    border-left: 3px solid var(--ek-accent);
    font-family: var(--ek-font-display);
    font-size: var(--ek-size-h3);
    font-weight: 700;
}

.ek-prose img { border-radius: var(--nk-radius-card-media); }
.ek-prose .aligncenter { margin-inline: auto; }
.ek-prose figure { margin: var(--ek-space-4) 0; }
.ek-prose figcaption { font-size: var(--ek-size-small); color: var(--ek-fg-muted); margin-top: var(--ek-space-1); }

/* ============================================================
   10. Yhteystiedot ja tapahtumat
   ============================================================ */

.ek-contact-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ek-space-2) var(--ek-space-3);
    margin-top: var(--ek-space-3);
}

.ek-contact-row__link { font-weight: 700; text-underline-offset: 0.25em; }

.ek-portrait-name {
    margin: var(--ek-space-2) 0 0;
    font-size: var(--ek-size-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ek-fg-muted);
    text-align: center;
}

.ek-events { list-style: none; margin: var(--ek-space-4) 0 0; padding: 0; }

.ek-event {
    display: grid;
    gap: 0.35rem var(--ek-space-4);
    padding: var(--ek-space-3) 0;
    border-bottom: 1px solid var(--nk-hairline);
}

.ek-event:first-child { border-top: 1px solid var(--nk-hairline); }

@media (min-width: 640px) {
    .ek-event { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; }
}

.ek-event__when { margin: 0; font-size: var(--ek-size-small); color: var(--ek-fg-muted); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ek-event__title { font-size: var(--ek-size-h3); margin: 0; }
.ek-event__title a { text-decoration: none; }
.ek-event__place { margin: 0.3rem 0 0; font-size: var(--ek-size-small); color: var(--ek-fg-muted); }

.ek-embed { margin-top: var(--ek-space-4); }
.ek-embed iframe { width: 100%; min-height: 520px; border: 1px solid var(--nk-hairline); border-radius: var(--nk-radius-card-media); }

/* ============================================================
   11. Alatunniste: persikka, yhteystiedot, vanamo
   Ninni: "yhteystiedot ovat sivun alapalkissa, siksi ei erillistä
   Ota yhteyttä -sivua." Alatunniste on siis sivuston yhteystietosivu.
   ============================================================ */

.ek-footer {
    position: relative;
    overflow: hidden;
    padding-block: var(--ek-space-5) var(--ek-space-4);
    margin-top: 0;
}

.ek-footer > .ek-shell { position: relative; z-index: 1; }

/* Vanamo nostetaan alatunnisteen viivan ylapuolelle: alhaalla se jäi
   "Maksaja"- ja "Tietosuojaseloste"-rivien alle (Ninnin palaute
   kierros 1, kommentti 4). Pienempi ja ylempänä kuin muilla kaistoilla,
   jotta se mahtuu yhteystietojen ja viivan väliin. */
.ek-footer .nk-vanamo {
    width: min(30vw, 360px);
    bottom: 6.5rem;
}

/* Puhelimella alatunnisteen sisältö on yhdessä pinossa eikä väliin jää
   tyhjää, joten piirrokselle varataan oma kaista tekstin alapuolelle. */
@media (max-width: 640px) {
    .ek-footer { padding-bottom: 9rem; }
    .ek-footer .nk-vanamo { width: 56vw; bottom: -0.5rem; opacity: 0.18; }
}

.ek-footer__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ek-space-4) var(--ek-space-5);
}

.ek-footer__brand { flex: 1 1 18rem; max-width: 30rem; }
.ek-footer__contact { flex: 0 1 auto; }

.ek-footer__title {
    font-family: var(--ek-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--ek-space-1);
}

.ek-footer__line { font-size: var(--ek-size-small); color: var(--ek-fg-muted); margin: 0 0 var(--ek-space-2); }

.ek-footer__slogan {
    font-family: var(--ek-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ek-fg);
    margin: 0;
    max-width: 26ch;
    text-wrap: balance;
}

.ek-footer__partylogo {
    height: var(--ek-footer-logo-h, 36px);
    width: auto;
    margin-top: var(--ek-space-4);
}

.ek-footer h2 {
    font-family: var(--ek-font-body);
    font-size: var(--ek-size-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ek-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ek-fg-muted);
    margin-bottom: var(--ek-space-2);
}

.ek-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: var(--ek-size-small); }
.ek-footer a { text-decoration: none; }
.ek-footer .ek-contact-row__link { text-decoration: underline; }

.ek-footer__legal {
    margin-top: var(--ek-space-5);
    padding-top: var(--ek-space-3);
    border-top: 1px solid var(--nk-hairline);
    font-size: var(--ek-size-eyebrow);
    color: var(--ek-fg-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ek-space-1) var(--ek-space-3);
    justify-content: space-between;
}

.ek-social { display: flex; flex-wrap: wrap; gap: var(--ek-space-1); list-style: none; margin: 0; padding: 0; }

.ek-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--ek-fg);
    border-radius: var(--ek-radius-pill);
    color: inherit;
    text-decoration: none;
    transition: background var(--ek-transition), color var(--ek-transition), border-color var(--ek-transition);
}

.ek-social a:hover { background: var(--ek-fg); color: var(--ek-brand-persikka); border-color: var(--ek-fg); opacity: 1; }
.nk-band--forest .ek-social a:hover { background: var(--ek-brand-persikka); color: var(--ek-brand-metsanvihrea); }

.ek-icon { display: block; }
.ek-social--icons { margin-top: var(--ek-space-4); gap: var(--ek-space-2); }
.ek-social--icons a { width: 52px; height: 52px; }

/* ============================================================
   12. Saavutettavuus ja liike
   ============================================================ */

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

.ek-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--ek-space-2) var(--ek-space-3);
    background: var(--ek-fg);
    color: var(--ek-bg);
}

.ek-skip:focus { left: var(--ek-gutter); top: var(--ek-space-2); }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .ek-header, .ek-footer, .ek-btn, .ek-nav-toggle, .nk-vanamo, .nk-hero__vanamo { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ============================================================
   13. Somenostot ja videot (pohjateeman v0.4.0, ulkoasu tämän teeman)
   ============================================================ */

.ek-video__link,
.ek-nosto__link {
    display: flex;
    flex-direction: column;
    gap: var(--ek-space-2);
    color: inherit;
    text-decoration: none;
}

.ek-video__link:hover .ek-video__title,
.ek-nosto__link:hover .ek-card__text { text-decoration: underline; text-underline-offset: 0.15em; }

.ek-video__media { position: relative; display: block; }
.ek-video__tyhja { display: block; background: var(--ek-bg-raised); }

.ek-video__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

.ek-video__play svg {
    width: clamp(3rem, 6vw, 4rem);
    height: clamp(3rem, 6vw, 4rem);
    padding: 0.9rem;
    border-radius: 50%;
    background: var(--ek-fg);
    color: var(--ek-brand-persikka);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    transition: transform var(--ek-transition);
}

.ek-video__link:hover .ek-video__play svg,
.ek-video__link:focus-visible .ek-video__play svg { transform: scale(1.06); }

.ek-video__title { display: block; }
.ek-nosto__meta { display: flex; align-items: flex-start; gap: var(--ek-space-1); color: var(--ek-fg-muted); font-size: var(--ek-size-small); }
.ek-nosto__meta .ek-icon { flex: none; margin-top: 0.15em; }
.ek-nosto__meta .ek-card__text { color: var(--ek-fg); font-size: var(--ek-size-body); }