/**
 * Layout and components.
 *
 * Reads tokens.css for every value. If you find yourself typing a hex
 * colour or a pixel size in this file, it belongs in tokens.css
 * instead — that is the whole point of the split.
 *
 * Structure, top to bottom:
 *   1. Base and reset
 *   2. Typography primitives
 *   3. Layout containers
 *   4. Buttons and links
 *   5. Images: the arch and the circle
 *   6. Site header and navigation
 *   7. Hero
 *   8. Sections and cards
 *   9. Prose (Gutenberg output)
 *  10. Form
 *  11. Footer
 *  12. Accessibility and motion
 */

/* ============================================================
   0. Teron ilme: muototokenit
   ============================================================

   Pohjateeman muodot ovat Denisen Canva-mallin muotoja: kaari
   (--ek-arch), ympyrä ja pilleripainike. Teron ilmeessä ei ole
   yhtään kaarta. Kaikki kahdeksan Canva-arkkia on rakennettu
   suorakulmioista: nimipohjat ovat täysiä väripintoja, logoarkin
   lukot ovat laatikoita, tapahtumapohjan ainoa kaareva muoto on
   salmiakki — ja sekin on neliö kulmallaan.

   Muoto vaihdetaan tässä eikä tokens.css:ssä, koska tokens.css on
   generoitu ilme.json:sta eikä sitä muokata käsin. Nollaus yhdessä
   paikassa riittää: kaari, ympyrä, kortit, pilleripainikkeet,
   kielivalitsin ja valikon pudotus lukevat kaikki näitä nimiä. */

:root {
    --ek-arch: 0;
    --ek-round: 0;
    --ek-radius-card: 0;
    --ek-radius-pill: 0;

    /* Koralliviiva nimen ylä- tai alapuolella on ilmeen toistuva
       merkki (arkit 1, 2, 3 ja 8). Sama paksuus kaikkialla. */
    --tk-viiva: 3px;

    /* Antiikva vain sitaattitaulussa, ks. fontit.css. */
    --tk-font-antiikva: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ============================================================
   1. Base and reset
   ============================================================ */

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; }

/* ============================================================
   2. Typography primitives
   ============================================================ */

h1, h2, h3, h4 {
    font-family: var(--ek-font-display);
    font-weight: 700;
    line-height: var(--ek-leading-tight);
    /* Outfit on geometrinen groteski, ei antiikva: se ladotaan
       ilmeessä tiiviisti mutta ei negatiivisesti. -0.015em, joka
       pohjateemassa kiristi Playfairia, sulkee Outfitin O:t kiinni
       toisiinsa isoissa ko'oissa. */
    letter-spacing: -0.005em;
    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); font-weight: 700; }

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

/* Harvennettu versaaliotsake. Ilmeessä tämä rivi on aina korallia
   ja aina harvennettu (arkit 2 "U U S I M A A" ja 3 "E D U S K U N T A A N");
   ohjeisto antaa sille Montserratin, mutta harvennettuna versaalina
   Outfit on siitä erottumattomissa — yksi fonttilataus vähemmän.

   Väri on --ek-accent-text eikä --ek-accent: koralli itsessään on
   kermalla 2,67:1 eikä kelpaa tekstiksi. Generaattori antaa vaalealle
   pohjalle tummennetun korallin (#B04B55, 4,73:1) ja tummalla
   kaistalla korallin sellaisenaan (5,38:1). */
.ek-eyebrow {
    font-family: var(--ek-font-display);
    font-size: var(--ek-size-eyebrow);
    font-weight: 700;
    letter-spacing: 0.22em;
    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);
}

/* ============================================================
   3. Layout containers
   ============================================================ */

.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); }

/* Centred column used by the hero and by any section that reads as a
   statement rather than a list. */
.ek-center {
    text-align: center;
    margin-inline: auto;
}
.ek-center .ek-lead { margin-inline: auto; }

/* Image beside text. Collapses to a single column below 860px —
   container queries would be tidier but this is a page-level layout,
   so the viewport is the right thing to ask about. */
.ek-split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* Top-aligned variant. Centring is right when both columns are about
   the same height, and wrong when one is a long form and the other two
   sentences — there the short column floats in the middle of its own
   emptiness with no relationship to anything. */
.ek-split--top { align-items: start; }

@media (min-width: 860px) {
    .ek-split { grid-template-columns: 1fr 1fr; }
    /* Puts the image on the right visually while keeping it first in
       the DOM, so a screen reader meets the heading first. */
    .ek-split--flip > :first-child { order: 2; }
}

/* ============================================================
   4. Buttons and links
   ============================================================ */

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

a:hover { opacity: 0.7; }

/* The pill button from the Alta Loma template: outline, generous
   padding, fully rounded ends. Outline rather than solid is the
   default because the page is already warm and low-contrast; a solid
   block would shout.

   Buttons are the one place the identity's ACCENT shows: a party's
   third colour (Kokoomus blue, SDP red) that is not its text colour.
   --ek-accent is the surface, --ek-accent-ink the text on it, and
   --ek-accent-text the accent as text on the page ground — the last
   one is contrast-checked by the generator, because a bright brand
   red that works as a button fill can fail as thin text. */
.ek-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ek-space-1);
    padding: 0.95em 2.1em;
    border: 2px solid var(--ek-accent);
    border-radius: 0;
    background: transparent;
    color: var(--ek-accent-text);
    font-family: var(--ek-font-display);
    font-size: var(--ek-size-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ek-transition), color var(--ek-transition), opacity var(--ek-transition);
}

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

/* Solid variant — one per page at most, for the single action that
   matters (Kom med!). */
.ek-btn--solid {
    background: var(--ek-accent);
    color: var(--ek-accent-ink);
}
.ek-btn--solid:hover {
    background: transparent;
    color: var(--ek-accent-text);
}

/* Text link that behaves like a button in the reading flow. */
.ek-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
    color: var(--ek-accent-text);
    text-decoration: none;
    /* Koralliviiva, sama merkki kuin nimen alla — ei hiusviiva. */
    border-bottom: var(--tk-viiva) solid var(--ek-accent);
    padding-bottom: 2px;
}

/* Block editor palette on the front end.

   The editor offers the identity's colours (ek_editor_palette()) and
   WordPress stores the choice on the block as a has-<slug>-color or
   has-<slug>-background-color class. For a classic theme WordPress
   prints those classes only for its OWN default palette, so a block
   painted in the identity's colours showed the colour in the editor
   and lost it on the page. These rules are what was missing. They
   point at tokens, not hex values, so a "pohja"-coloured block still
   reads as the ground inside a dark band, and "brandi" as text uses
   the contrast-checked accent. white and black are WordPress's own
   slugs and already covered. Background rules first: a block with a
   background and no chosen text colour gets a readable default, and
   a chosen text colour (the -color rule, later) still wins. */
.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); }

/* ============================================================
   5. Kuvat: suorakulmio, ei kaarta
   ============================================================ */

/* Luokkien nimet ovat pohjan nimiä (.ek-arch, .ek-round), koska ne
   tulevat pohjan sivupohjista ja ek_shape_image():stä. Muoto on
   Teron: molemmat ovat suorakulmioita, koska radiustokenit on
   nollattu luvussa 0. .ek-round säilyttää neliösuhteensa — siitä
   tulee neliö, ei ympyrä.

   object-fit rajaa kuvan; object-position on keskellä, mikä sopii
   pääkuville. Jos kasvot rajautuvat väärin, säädä kuvakohtaisesti
   ACF-kentässä. */
.ek-arch,
.ek-round {
    overflow: hidden;
    background: var(--ek-bg-raised);
}

.ek-arch { border-radius: var(--ek-arch); }
.ek-round { border-radius: var(--ek-round); aspect-ratio: 1; }

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

/* Portrait arch: tall, the proportion the template uses. */
.ek-arch--portrait { aspect-ratio: 3 / 4; }
/* Wide arch for landscape photography and theme cards. 3:2 rather than
   4:3 — at 4:3 three cards side by side took up most of a laptop screen
   on their own and the titles under them fell below the fold. */
.ek-arch--wide { aspect-ratio: 3 / 2; }

/* ============================================================
   6. Site header and navigation
   ============================================================ */

/* Yläpalkki on yönsininen kaista (tokens.css antaa sille omat roolit
   ilme.json:n varit.ylapalkki-kohdasta).

   `color` on tässä pakko sanoa ääneen. Pohjateemassa yläpalkki on
   samanvärinen kuin sivu, joten tekstin väri peri body:ltä oikein eikä
   sääntöä tarvittu. Teron palkki on tumma: ilman tätä riviä palkin
   teksti peri :rootin yönsinisen ja koko lukko, valikko ja
   kielivalitsin olivat yönsinisiä yönsinisellä eli näkymättömiä
   (kierros 1, 21.9.2026). */
.ek-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ek-bg);
    color: var(--ek-fg);
    border-bottom: 2px solid var(--ek-accent);
}

.ek-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ek-space-3);
    min-height: 72px;
}

/* Her name and the party mark, read as one unit at the left end of the
   bar. min-width: 0 so the pair can shrink rather than pushing the
   navigation off a narrow screen. */
.ek-lockup {
    display: flex;
    align-items: center;
    gap: var(--ek-space-2);
    min-width: 0;
}

/* Height comes from the identity: 28px suits a wide lockup like the
   Vihreät one (below that the two-line "Vihreät / De Gröna" turns into
   a smudge), but a square mark such as SDP's rose needs 40px to read
   at all. The token is set in the identity's tokens.css. */
.ek-partylogo {
    height: var(--ek-partylogo-h, 28px);
    width: auto;
    flex: none;
    padding-left: var(--ek-space-2);
    border-left: 1px solid var(--ek-line);
}

@media (max-width: 820px) {
    .ek-partylogo { height: calc(var(--ek-partylogo-h, 28px) * 0.8); }
}

/* Sanamerkki. Terolla ei ole logotiedostoa: logoarkilla (arkit 7 ja 8)
   tunnus on ladottu Public Sans Boldilla versaaleina, joten sivustolla
   se ladotaan samalla fontilla. Se pysyy terävänä joka näytöllä eikä
   maksa yhtään latausta.

   Yläpalkissa yksi rivi, ei kaksi. Logoarkin lukko on kaksirivinen,
   mutta 72 pikselin palkissa kaksi riviä plus alarivi jää tukkoiseksi;
   kaksirivinen versio on herossa, jossa sille on tilaa. */
.ek-wordmark {
    font-family: var(--ek-font-body);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* Lukon alarivi: vaalipiiri korallilla, kuten logoarkin variantissa
   "TERO KOSKINEN / Uusimaa". */
.ek-wordmark__alue {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--ek-accent);
    margin-top: 2px;
}

.ek-nav {
    display: flex;
    align-items: center;
    gap: var(--ek-space-3);
}

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

.ek-menu a {
    font-size: var(--ek-size-small);
    font-weight: 500;
    text-decoration: none;
}

/* Valikon linkit ovat yönsinisellä palkilla kermanvärisiä. Nykyinen
   sivu saa koralliviivan alleen — sama merkki kuin nimen alla
   nimipohjissa, ja korallin ja kerman ero tummalla on 5,38:1 eli
   riittävä myös silloin kun viiva on ainoa tunnus. */
.ek-menu a {
    letter-spacing: 0.04em;
    padding-bottom: 3px;
    border-bottom: var(--tk-viiva) solid transparent;
}

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

/* Alasivut: yksi pudotustaso. Näkyy hiirellä ja näppäimistöllä
   (focus-within), joten se toimii ilman skriptiä. Puhelimella lista
   avautuu sisennettynä paikalleen (ks. media query alla). */
.ek-menu .menu-item-has-children { position: relative; }

.ek-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    margin: 0;
    padding: var(--ek-space-1) 0;
    list-style: none;
    background: var(--ek-bg);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-card);
    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);
    white-space: nowrap;
}

/* Language switcher. Rendered by Polylang as a plain <ul>; styled
   here as FI / SV separated by a hairline. */
.ek-lang {
    display: flex;
    align-items: center;
    gap: var(--ek-space-1);
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--ek-space-3);
    border-left: 1px solid var(--ek-line);
}

.ek-lang li { display: flex; }

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

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

/* Donate. The only solid element in the bar, because it is the only one
   asking for something. Sits after the language switcher: it leaves the
   site, so it does not belong among the navigation. */
.ek-donate {
    display: inline-flex;
    align-items: center;
    padding: 0.7em 1.4em;
    border-radius: 0;
    background: var(--ek-accent);
    color: var(--ek-accent-ink);
    font-family: var(--ek-font-display);
    font-size: var(--ek-size-eyebrow);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    /* The bar has no room for a second line; a wrapped pill looks broken. */
    white-space: nowrap;
    transition: opacity var(--ek-transition);
}

.ek-donate:hover { opacity: 0.82; }

/* Mobile toggle. Hidden on desktop; the menu is a plain bar there. */
.ek-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ek-line);
    border-radius: 0;
    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: 1.5px;
    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) {
    .ek-nav-toggle { display: block; }

    .ek-nav {
        position: absolute;
        inset: 100% 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ek-space-2);
        padding: var(--ek-space-3) var(--ek-gutter) var(--ek-space-4);
        background: var(--ek-bg);
        border-bottom: 1px solid var(--ek-line);
    }

    /* [hidden] would be cleaner, but the nav must stay in the layout
       for the toggle animation; visibility keeps it out of the tab
       order and the accessibility tree while closed. */
    .ek-nav[data-open='false'] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .ek-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ek-space-2);
    }

    .ek-menu a { font-size: 1.25rem; }

    /* Puhelimella pudotus ei ole pudotus: alasivut listataan
       sisennettyinä paikalleen, aina näkyvissä. */
    .ek-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        margin: var(--ek-space-1) 0 0 var(--ek-space-3);
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

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

    .ek-lang {
        padding: var(--ek-space-2) 0 0;
        border-left: 0;
        border-top: 1px solid var(--ek-line);
        width: 100%;
    }
}

/* ============================================================
   7. Hero — the landing screen
   ============================================================ */

/* Hero ON Teron nimipohja (arkit 1 ja 2): täysleveä yönsininen pinta,
   kermanvärinen nimi versaaleina kahdella rivillä, koralliviiva
   rivien välissä ja harvennettu koralliteksti alla. Pohjateemassa
   hero on vaalea ja kuva on kaari; kumpikaan ei ole Teron ilmettä.

   Kaista on täysleveä, ei .ek-shell-levyinen: nimipohjissa väri ulottuu
   reunasta reunaan, eikä laatikko kerman päällä olisi sama asia.
   Sisältö pysyy .ek-shellissä. */

.ek-hero {
    padding-block: clamp(2.5rem, 1rem + 4vw, 4.5rem);
}

.ek-hero__inner {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

/* Nimi. Kahdella rivillä, koska logoarkin lukko on kaksirivinen —
   front-page.php jakaa otsikon etu- ja sukunimeen ja asettaa viivan
   väliin. Versaali, tiivis riviväli, Outfit 700: sama luuranko kuin
   ohjeiston Garetilla. */
.ek-hero__title {
    font-size: var(--ek-size-hero);
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 0.95;
    margin: 0 0 var(--ek-space-3);
}

/* Koralliviiva nimen rivien välissä (arkki 2). Ei erillistä elementtiä
   otsikon sisällä vaan oma rivi gridissä, jotta se ei riko otsikon
   tekstisisältöä ruudunlukijalle. */
.ek-hero__viiva {
    display: block;
    width: clamp(4rem, 18vw, 9rem);
    height: var(--tk-viiva);
    background: var(--ek-accent);
    border: 0;
    margin: 0.22em 0;
}

/* Tunnuslause. Korallilla yönsinisellä 5,38:1 — harvennettu versaali
   kuten arkin 8 slogan-laatikossa. */
.ek-hero__lead {
    font-family: var(--ek-font-display);
    font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--ek-accent);
    margin-bottom: var(--ek-space-4);
    max-width: 28ch;
}

/* Kuva. Suorakulmio, ei kaarta; ei leveysrajaa, koska se on herossa
   toinen puolikas eikä pikkukuva sanojen alla.

   Kuvasuhde on 3:2 vaakaan (kierros 1, Teron kommentti 5): kampanjan
   pääkuva on ryhmäkuva, jossa ihmiset ovat rivissä, ja pystyrajaus
   leikkasi rivistä kaksi kolmasosaa pois. 3:2 on lähteen oma suhde,
   joten object-fit ei enää rajaa mitään. */
.ek-hero__portrait {
    width: 100%;
    margin-inline: auto;
}

.ek-hero__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 900px) {
    /* Kuva on nimen ALLA ja koko palstan levyinen (kierros 2, Teron
       kommentti 4). Kierroksella 1 kuva sai leveämmän palstan tekstin
       vierestä (0,75fr / 1,25fr), mutta Tero pyysi vielä isompaa, ja
       vierekkäisessä asettelussa kuva ei voi olla tekstipalstaa
       leveämpi ilman että nimi alkaa katketa. Yksi palsta poistaa
       katon: 1160 px:n sivulla kuva on 1064 × 709, kun se aiemmin oli
       630 × 420 — pinta-ala lähes kolminkertainen.

       Tästä ei tule erillistä sääntöä: .ek-hero__inner on grid ilman
       template-määrittelyä, eli yksi palsta on sen oletus. Riittää,
       ettei sitä ylikirjoiteta täällä. */
    .ek-hero__portrait {
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 899px) {
    /* Puhelimessa kuva on palstan levyinen: kapea vaakakuva jäisi
       nauhaksi keskelle ruutua. */
    .ek-hero__portrait {
        aspect-ratio: 3 / 2;
    }
}

/* ============================================================
   8. Sections and cards
   ============================================================ */

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

.ek-section__head.ek-center { margin-inline: auto; }

/* Heading on the left, the section's own link on the right, sharing one
   baseline. Gives the themes section a different shape from the hero
   above it and the quote below it, and saves the vertical space a
   centred button underneath the cards used to take. */
.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); }
}

/* About: a picture beside a wide text column. Deliberately NOT the
   even split the generic .ek-split gives — at 1fr 1fr the image came
   out around 500px across and swallowed the paragraph next to it. */
.ek-about {
    display: grid;
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: center;
}

/* 420 px eikä 300 px: esittelykuva on kierroksesta 2 alkaen vaakakuva
   omassa kuvasuhteessaan (ks. front-page.php, kommentti 1). 300 px
   leveänä siitä tulisi 300 × 200, jossa kaksi kasvoa jäisi parinkymmenen
   pikselin kokoiseksi — juuri se kompositio, jonka Tero halusi näkyviin,
   katoaisi. Tekstipalstalle jää 1160 px:n sivulla yhä noin 580 px. */
.ek-about__media {
    width: 100%;
    max-width: 420px;
}

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

/* Top of the Om mig page: page title and lead on the left, portrait on
   the right. Same asymmetry as .ek-about and for the same reason — an
   even split turns the portrait into the loudest thing on a page that
   is mostly reading. */
.ek-intro-split {
    display: grid;
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: start;
}

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

/* Vaalikuva ilman taustaa (Tero 22.9.2026): Minusta- ja Ota yhteyttä -sivun
   kuvassa on läpinäkyvä tausta, joten kaaren korotettu pohjaväri näkyisi
   laatikkona sen takaa. Hahmo istuu suoraan sivun pohjalle. */
.ek-intro-split__media .ek-arch { background: transparent; }

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

/* Quick facts: a short list of one-line answers, set as a ruled column
   rather than bullets. Bullets in a display serif page look like a CV
   pasted in; rules read as a caption. */
.ek-facts {
    list-style: none;
    margin: var(--ek-space-4) 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-width: 26rem;
}

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

/* One story section on the Om mig page: heading and body, with an
   optional picture that alternates sides down the page. */
.ek-story {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    /* Centred, not top-aligned. A three-paragraph childhood story next
       to a 420px portrait leaves a lot of empty column whichever way it
       is anchored; centred, the emptiness is split above and below the
       text instead of pooling under it, and the section reads as a pair
       rather than as text with a hole beside it. */
    align-items: center;
}

.ek-story + .ek-story { margin-top: var(--ek-section-y); }

/* The themes page gives every section an id, and the front page's cards
   link to them. Without this the sticky header would sit on top of the
   heading the reader just jumped to. */
.ek-story[id] { scroll-margin-top: calc(72px + var(--ek-space-3)); }

.ek-story__media {
    width: 100%;
    max-width: 320px;
}

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

    /* Picture on the right instead. Kept first in the DOM either way,
       so the reading order stays heading-then-text for a screen reader
       and on a narrow screen. */
    .ek-story--right { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
    .ek-story--right .ek-story__media { order: 2; }
}

/* Call to action: a hairline, then text left and button right. The
   fourth different arrangement on the page, which is the point. */
.ek-cta {
    display: grid;
    gap: var(--ek-space-3);
    padding-top: var(--ek-space-4);
    border-top: 1px solid var(--ek-line);
}

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

/* Election themes. auto-fit keeps the row full whether there are two
   themes or six — Denise adds and removes them from wp-admin, and the
   grid must not look broken at any count. */
.ek-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1.75rem, 3vw, 3rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ek-card {
    display: flex;
    flex-direction: column;
    gap: var(--ek-space-2);
}

.ek-card__media { margin-bottom: var(--ek-space-1); }

/* Kortin otsikon alla lyhyt koralliviiva — ilmeen toistuva merkki.
   Sama kortti toimii sekä kermalla että yönsinisellä kaistalla, koska
   väri tulee --ek-accentista, joka kääntyy kaistan mukana. */
.ek-card__title::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: var(--tk-viiva);
    background: var(--ek-accent);
    margin-top: var(--ek-space-1);
}

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

.ek-card__title a { text-decoration: none; }

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

/* Numbered variant, used when a theme has no photo — the number
   stands in for the image so the grid keeps its rhythm. */
.ek-card__number {
    font-family: var(--ek-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ek-line);
}

/* Full-width statement band. Dark by default via .ek-band--dark. */
/* Sitaattitaulu = ilmeen arkki 4 sellaisenaan: kermanvärinen pinta,
   iso koralli lainausmerkki, antiikvateksti petrolilla ja allekirjoitus
   kursiivilla. Tämä on ainoa paikka, jossa Playfair Display esiintyy —
   ohjeisto antaa sille juuri tämän tehtävän.

   Pohjateemassa sitaatti on tummalla kaistalla. Teron ilmeessä tumma
   kaista on herossa, valikossa ja alatunnisteessa; sitaatti on vaalea
   taulu. Luokka .ek-band--dark on siksi poistettu front-page.php:ssä.

   Petroli (#204052) on kermalla 9,82:1. */
.ek-quote {
    font-family: var(--tk-font-antiikva);
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    max-width: 18ch;
    margin: 0 auto;
    color: var(--ek-brand-petroli, var(--ek-fg));
    text-wrap: balance;
}

/* Lainausmerkki. Koristeellinen, joten aria-hidden ei riitä — se ei ole
   tekstisisältöä lainkaan vaan ::before, jolloin ruudunlukija ei näe
   sitä ja sitaatti luetaan puhtaana. */
.ek-quote::before {
    content: '\201C';
    display: block;
    font-family: var(--tk-font-antiikva);
    font-size: clamp(4.5rem, 3rem + 6vw, 8rem);
    font-weight: 700;
    line-height: 0.62;
    color: var(--ek-accent);
    margin-bottom: var(--ek-space-2);
}

.ek-quote__attrib {
    display: block;
    margin-top: var(--ek-space-4);
    font-family: var(--tk-font-antiikva);
    font-style: italic;
    font-size: var(--ek-size-lead);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ek-brand-petroli, var(--ek-fg-muted));
}

/* Post list on the news page and the archive. */
.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(--ek-line);
}

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

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

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

/* ============================================================
   9. Prose — whatever the block editor produces
   ============================================================ */

/* Scoped to .ek-prose so editor output is styled without those rules
   leaking into the hand-built sections above. */
.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: 500; }

.ek-prose blockquote {
    margin: var(--ek-space-4) 0;
    padding-left: var(--ek-space-3);
    border-left: 2px solid var(--ek-line);
    font-family: var(--ek-font-display);
    font-size: var(--ek-size-h3);
    font-style: italic;
}

.ek-prose img { border-radius: var(--ek-radius-card); }

/* WordPress core classes that turn up in editor output. */
.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. Kom med: contact details and events
   ============================================================ */

/* This section used to be a volunteer form — name, e-mail, phone,
   checkboxes, message, consent. It asked the visitor for six decisions
   and the campaign for a personal-data register to look after. A
   mailto: and a phone number ask for one decision and collect nothing,
   which is also why the privacy notice is now three paragraphs long. */

/* Yhteystiedot yhdellä rivillä: sähköposti, puhelin ja some-ikonit.
 *
 * Aiemmin tämä oli laatikko, jossa oli vaakaviiva, nimi omalla
 * rivillään, sähköposti sarakemuotoisen otsikon kanssa ja ikonit sen
 * alla — neljä riviä kahdelle yhteystiedolle. Rivi näyttää
 * hallitummalta ja lukee nopeammin.
 *
 * Rivittyy kapealla ruudulla, mutta ikonit pysyvät omana ryhmänään
 * koska .ek-social on itsessään flex-rivi. */
.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: 500;
    text-underline-offset: 0.25em;
}

/* Nimi muotokuvan alla. Kuvateksti, ei otsikko: pienempi kuin h3 ja
   harvennettu, jotta se lukeutuu kuvaan kuuluvaksi eikä uudeksi
   osioksi. */
.ek-portrait-name {
    margin: var(--ek-space-2) 0 0;
    font-size: var(--ek-size-small);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ek-fg-muted);
    text-align: center;
}

/* Events. A row per event: when on the left, what on the right. */
.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(--ek-line);
}

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

@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);
}

/* Embedded external calendar, when one is pasted in. */
.ek-embed { margin-top: var(--ek-space-4); }

.ek-embed iframe {
    width: 100%;
    min-height: 520px;
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-card);
}

/* ============================================================
   11. Footer
   ============================================================ */

.ek-footer {
    padding-block: var(--ek-space-5);
    /* No top margin. The last section already ends with a full
       --ek-section-y of bottom padding, and adding a margin here stacked
       the two into roughly 10rem of empty ivory above the footer. The
       colour change is separation enough. */
    margin-top: 0;
}

/* Alatunnisteen palstat.
 *
 * Ei enää `repeat(auto-fit, minmax(220px, 1fr))`. Se jakoi leveyden
 * tasan, jolloin yhden sähköpostirivin palsta sai 570 pikseliä ja
 * palstojen väliin jäi ammottava aukko. Flex antaa brändipalstalle sen
 * mitä se tarvitsee ja päästää yhteystiedot oikeaan reunaan, jolloin
 * ne asettuvat samaan linjaan alla olevan lakirivin kanssa. */
.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; }

/* Alatunnisteen nimi on sama sanamerkki kuin yläpalkissa: Public Sans
   Bold versaaleina, kuten logoarkin tummalla kaistalla (arkki 8). */
.ek-footer__title {
    font-family: var(--ek-font-body);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    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);
}

/* Slogan. Kursivoitu display-serif täydellä tekstivärillä, jotta se
   erottuu yllä olevasta harmaasta rivistä.
 *
 * PIENEMPI KUIN NIMI. Aiemmin se oli --ek-size-h3 eli suurempi kuin
 * alatunnisteen nimi, jolloin paikanpitäjäteksti "SLOGAN TÄHÄN" oli
 * koko alatunnisteen äänekkäin elementti. Slogan on nimen määre, ei
 * sen ohi puhuva otsikko. */
.ek-footer__slogan {
    font-family: var(--ek-font-display);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.35;
    color: var(--ek-fg);
    margin: 0;
    max-width: 26ch;
    text-wrap: balance;
}

/* Bigger here than in the header: the footer is where party
   affiliation is formally stated, and there is room for it to be read
   rather than merely recognised. */
.ek-footer__partylogo {
    height: var(--ek-footer-logo-h, 36px);
    width: auto;
    /* Yksi lähde välille: slogan ei kanna alamarginaalia, vaan logo
       ottaa etäisyytensä itse. Muuten kaksi marginaalia laskettiin
       yhteen ja logo ajautui irralleen muusta palstasta. */
    margin-top: var(--ek-space-4);
}

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

/* Rajattu valikkoon, EI kaikkiin alatunnisteen listoihin.
 *
 * Aiemmin tämä oli `.ek-footer ul`, joka on tarkempi valitsin kuin
 * `.ek-social` — eli se pakotti some-ikonirivin ruudukoksi ja ikonit
 * allekkain juuri alatunnisteessa, vaikka sivulla ne olivat rivissä.
 * Sama sääntö kahdessa paikassa näytti kahdelta eri komponentilta. */
.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__legal {
    margin-top: var(--ek-space-4);
    padding-top: var(--ek-space-3);
    border-top: 1px solid var(--ek-line);
    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;
}

/* Social links as a row of round icon buttons. Used both here and on
   the Kom med page, so it lives with the shared components rather than
   with the footer — and it inherits the surrounding text colour, which
   is why one SVG works on ivory and on cocoa. */
.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;
    /* 44px is the smallest target a fingertip hits reliably. Icons
       this size need the padding anyway. */
    width: 44px;
    height: 44px;
    border: 1px solid var(--ek-line);
    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-accent);
    color: var(--ek-accent-ink);
    border-color: var(--ek-accent);
    opacity: 1;
}

.ek-icon { display: block; }

/* Larger on the Kom med page, where the row is one of two things the
   page is for rather than a footer afterthought. */
.ek-social--icons {
    margin-top: var(--ek-space-4);
    gap: var(--ek-space-2);
}

.ek-social--icons a { width: 52px; height: 52px; }

/* ============================================================
   12. Accessibility and motion
   ============================================================ */

/* Visible focus everywhere. The default ring is invisible against
   ivory in some browsers, so it is declared explicitly. */
: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);
}

/* Screen-reader-only text. Clipped rather than display:none so it
   stays in the accessibility tree. */
.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;
    }
}

/* Print: the campaign material people actually print is the themes
   page. Drop the chrome, keep the words. */
@media print {
    .ek-header, .ek-footer, .ek-btn, .ek-nav-toggle { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ============================================================
   13. Somenostot ja videot (v0.4.0)
   Kortti on linkki kokonaisuudessaan: kuva, merkki ja teksti yhdessä
   kohteessa, jotta koko kortti on klikattava eikä vain otsikko.
   Ei soitinta, ei upotusta — ks. inc/acf-nostot.php.
   ============================================================ */

.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;
}

/* Pysäytyskuvan puuttuessa neutraali pinta samassa muodossa, jotta
   ruudukko pysyy rytmissä. Ei mitään Googlelta. */
.ek-video__tyhja {
    display: block;
    background: var(--ek-bg-raised);
}

/* Toistomerkki: ympyrä kuvan keskellä. Väri tokenista, jotta se on
   puolueen ilmeen mukainen eikä YouTuben punainen. */
.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-accent);
    color: var(--ek-accent-ink);
    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);
}

/* =============================================================
   Yhteydenottolomake (P6, v0.6.0) — omaa koodia, ei skriptejä
   ============================================================= */
.ek-form { display: grid; gap: var(--ek-space-3); max-width: 40rem; }
.ek-form__row { display: grid; gap: var(--ek-space-1); }
.ek-form label { font-weight: 600; }
.ek-form input[type='text'],
.ek-form input[type='email'],
.ek-form textarea {
    font: inherit;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-card, 4px);
    background: var(--ek-bg);
    color: var(--ek-text);
}
.ek-form input:focus-visible, .ek-form textarea:focus-visible { outline: 3px solid var(--ek-brand); outline-offset: 2px; }
.ek-form__hunaja { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ek-form__ohje { font-size: 0.9rem; color: var(--ek-text-muted, var(--ek-text)); margin: 0; }
.ek-notice { padding: var(--ek-space-2) var(--ek-space-3); border-left: 4px solid var(--ek-brand); background: var(--ek-surface, #f4f4f4); }
.ek-notice--virhe { border-left-color: #b3261e; }

/* Instagram-feedi (P5): liitännäisen ruudukko ja paikanpitäjä ennen tilin yhdistämistä */
.ek-instagram__placeholder {
    padding: var(--ek-space-4);
    border: 1px dashed var(--ek-line);
    border-radius: var(--ek-radius-card, 4px);
    text-align: center;
    color: var(--ek-text-muted, var(--ek-text));
}
.ek-instagram__feed .sbi_photo { border-radius: var(--ek-radius-card, 4px); }

/* Yli viisi valikkokohtaa (body.ek-menu-many): hampurilainen jo 1100 px:ssä,
   jotta valikko ei kierry logon päälle (Ninni 20.9.2026). */
@media (max-width: 1100px) {
    body.ek-menu-many .ek-nav-toggle { display: block; }
    body.ek-menu-many .ek-nav {
        position: absolute;
        inset: 100% 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ek-space-2);
        padding: var(--ek-space-3) var(--ek-gutter) var(--ek-space-4);
        background: var(--ek-bg);
        border-bottom: 1px solid var(--ek-line);
    }
    body.ek-menu-many .ek-nav[data-open='false'] { opacity: 0; visibility: hidden; pointer-events: none; }
    body.ek-menu-many .ek-menu { flex-direction: column; align-items: flex-start; gap: var(--ek-space-2); }
    body.ek-menu-many .ek-menu a { font-size: 1.25rem; }
}


/* ============================================================
   14. Teron ilme: kaistat, salmiakki ja täysleveät pinnat
   ============================================================ */

/* Täysleveä väripinta. Nimipohjissa ja tapahtumapohjassa väri ulottuu
   reunasta reunaan; sisältö pysyy .ek-shellissä. Käytetään herossa ja
   mukaan-kutsussa. */
.tk-bleed {
    width: 100%;
}

/* Koralli kaista. Tapahtumapohjan (arkki 5) alapuolisko: koralli pinta,
   yönsininen teksti. Teksti korallilla on 5,38:1, ja koska pinta on
   accent, painikkeen on käännyttävä — yönsininen nappi korallilla.

   Tämä on sivuston ainoa koralli täyspinta. Kaksi olisi jo tapetti. */
.ek-band--koralli {
    --ek-bg: var(--ek-brand-koralli);
    --ek-bg-raised: var(--ek-brand-koralli);
    --ek-fg: var(--ek-brand-yonsininen);
    --ek-fg-muted: var(--ek-brand-yonsininen);
    --ek-line: var(--ek-brand-yonsininen);
    --ek-accent: var(--ek-brand-yonsininen);
    --ek-accent-ink: var(--ek-brand-kerma);
    --ek-accent-text: var(--ek-brand-yonsininen);

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

/* Salmiakki: neliö kulmallaan kahden pinnan saumassa (arkki 5). Puolet
   ylemmän pinnan väriä, puolet alemman — tehdään yhdellä neliöllä,
   joka on käännetty 45 astetta ja leikattu sauman kohdalle.

   Koristeellinen: ei tekstisisältöä, ei roolia, aria-hidden
   sivupohjassa. */
.tk-salmiakki {
    position: relative;
    height: 0;
    overflow: visible;
    z-index: 2;
}

/* Kaksi kolmiota, ei käännettyä neliötä. Käännetyssä elementissä
   clip-path leikkaa käännetyssä koordinaatistossa, jolloin "alapuolisko"
   osuu vinoon ja salmiakki näyttää rikkinäiseltä (kierros 1). Kolmiot
   piirretään suoraan: ylempi koralli kärki alaspäin kermalla, alempi
   kerma kärki ylöspäin korallilla. Yhdessä ne ovat sama salmiakki kuin
   ilmeen arkissa 5. */
.tk-salmiakki::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2.8rem;
    height: 1.4rem;
    transform: translateX(-50%);
    background: var(--ek-brand-koralli);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Osion otsakkeen koralliviiva. Sama merkki kuin herossa, pienempänä:
   harvennetun versaaliotsakkeen ja otsikon välissä. */
.tk-viiva {
    display: block;
    width: 3.5rem;
    height: var(--tk-viiva);
    background: var(--ek-accent);
    border: 0;
    margin: 0 0 var(--ek-space-3);
}

.ek-center .tk-viiva { margin-inline: auto; }

/* Kortit yönsinisellä kaistalla. Kuva on suorakulmio suoraan pinnalla,
   ilman korttilaatikkoa: ilmeessä ei ole kohotettuja laatikoita. */
.ek-band--dark .ek-card__media img { filter: none; }

/* Numerokortti, kun teemalla ei ole kuvaa: iso koralli numero, kuten
   ilmeen harvennetut versaalit. */
.ek-card__number {
    font-family: var(--ek-font-display);
    color: var(--ek-accent);
    font-weight: 700;
}

/* Yläpalkin lukko: nimi ja puolueen logo erotettu koralliviivalla eikä
   haalealla hiusviivalla. */
.ek-partylogo {
    border-left-color: var(--ek-accent);
    border-left-width: 2px;
}

/* Sitaattitaulun ympärille ohut koralliviiva ylä- ja alareunaan, jotta
   kermanvärinen taulu erottuu kermanvärisestä sivusta. */
.tk-taulu {
    border-top: var(--tk-viiva) solid var(--ek-accent);
    border-bottom: var(--tk-viiva) solid var(--ek-accent);
}

/* Lomakekentät: suorat kulmat ja koralli fokusrengas. Pohjan sääntö
   osoittaa muuttujaan --ek-brand, jota tässä ilmeessä ei ole; ilman
   tätä fokusrengas jäisi näkymättömäksi. */
.ek-form input[type='text'],
.ek-form input[type='email'],
.ek-form textarea {
    border-radius: 0;
}

.ek-form input:focus-visible,
.ek-form textarea:focus-visible {
    outline: 3px solid var(--ek-accent);
    outline-offset: 2px;
}

.ek-notice {
    border-left-color: var(--ek-accent);
    background: var(--ek-bg-raised);
}

/* Näppäimistöfokus koko sivustolla. Pohjassa ei ole omaa sääntöä, ja
   selaimen oletusrengas katoaa yönsinisellä kaistalla. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--ek-accent);
    outline-offset: 3px;
}


/* Mukaan-kutsun oma yläviiva pois: kaista on jo koralli ja sen
   yläreunassa on salmiakki. Viiva kaistan sisällä lukisi virheenä. */
.ek-band--koralli .ek-cta {
    border-top: 0;
    padding-top: 0;
}

.tk-salmiakki::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2.8rem;
    height: 1.4rem;
    transform: translateX(-50%);
    background: var(--ek-brand-kerma);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Puhelimen valikkolaatikko. Pohjan sääntö maalaa sen --ek-bg:llä, joka
   yläpalkin sisällä on jo yönsininen — mutta se ei peri tekstin väriä,
   joten se sanotaan tässä. Koralliviiva alareunaan palkin viivan
   pariksi. */
@media (max-width: 820px) {
    .ek-nav {
        background: var(--ek-bg);
        color: var(--ek-fg);
        border-bottom: 2px solid var(--ek-accent);
    }
}

@media (max-width: 1100px) {
    body.ek-menu-many .ek-nav {
        background: var(--ek-bg);
        color: var(--ek-fg);
        border-bottom: 2px solid var(--ek-accent);
    }
}


/* ============================================================
   15. Yläpalkki mahtumaan (kierros 2)
   ============================================================

   Terolla on viisi valikkokohtaa JA kolme kieltä. Pohjan raja
   (hampurilainen vasta 820 px:ssä, kuusi kohtaa 1100 px:ssä) laskee
   vain valikkokohdat, joten tämä sivusto jäi väliin: 1366 px:ssä
   "Tule mukaan" ja "Ota yhteyttä" rivittyivät kahdelle riville ja
   palkki kasvoi kaksiriviseksi.

   Kaksi korjausta. Palkkia tiivistetään sen verran, että viisi kohtaa,
   kolme kieltä ja tukinappi mahtuvat yhdelle riville 1100 pikselistä
   ylöspäin — ja sen alla mennään hampurilaiseen, ei rivitykseen. */

.ek-menu { gap: 1.1rem; }

/* Valikkokohta ei katkea sanan välistä. Ilman tätä "Tule mukaan"
   rivittyy itsensä sisällä ennen kuin palkki menee hampurilaiseksi. */
.ek-menu > li > a { white-space: nowrap; }

.ek-lang {
    gap: 0.1rem;
    padding-left: 1.1rem;
}

.ek-donate {
    padding: 0.7em 1.1em;
    letter-spacing: 0.06em;
}

.ek-lockup { gap: var(--ek-space-1); }

@media (max-width: 1100px) {
    .ek-nav-toggle { display: block; }

    .ek-nav {
        position: absolute;
        inset: 100% 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ek-space-2);
        padding: var(--ek-space-3) var(--ek-gutter) var(--ek-space-4);
        background: var(--ek-bg);
        color: var(--ek-fg);
        border-bottom: 2px solid var(--ek-accent);
    }

    .ek-nav[data-open='false'] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .ek-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ek-space-2);
    }

    .ek-menu a { font-size: 1.25rem; }

    .ek-lang {
        padding: var(--ek-space-2) 0 0;
        border-left: 0;
        border-top: 1px solid var(--ek-line);
        width: 100%;
    }
}