/**
 * Jenna Jourio — sommittelu ja komponentit.
 *
 * Kopio pohjateeman assets/site.css:stä (v0.7.4) ja sen päälle tämän
 * sivuston oma kerros. Kopio siksi, että HTML-rakenne ja luokat tulevat
 * pohjan sivupohjista: oma tiedosto alusta asti tarkoittaisi, että joka
 * kerta kun pohja saa uuden osion, tämä sivusto jää ilman tyyliä.
 *
 * Mikä on muutettu pohjaan nähden:
 *   - MUOTOKIELI. --ek-arch (Denisen Canva-mallin kaari) on vaihdettu
 *     pehmeäksi suorakaiteeksi. Kaari oli yksi vaihtoehto, ei oletus.
 *     Toistuva muoto on nyt ympyrä (sama ele kuin Vihreiden maapallo-
 *     merkissä) ja sen pari, 28 px pyöristetty suorakaide.
 *   - PINNAT. Sivulla on kolme pintaa valkoisen lisäksi: persikka
 *     (hero, kutsu, alasivujen yläkaista), vaalea persikka (teemakortit)
 *     ja tumma vihreä (sitaatti, alatunniste). Persikka on ohjeiston
 *     lisäväri, joka osuu Jennan oman nimilogon sävyyn.
 *   - YLÄPALKKI. Nimi ei ole tekstiä vaan Jennan nimilogo; puoluelogo
 *     on palkin toisessa päässä. Ks. header.php.
 *   - HERO. Persikkakaista, jossa taustasta irrotettu hahmo seisoo
 *     kaistan pohjalla. Ks. front-page.php.
 *   - ALASIVUT. Yläosa on persikkakaista, ja muotokuva on ympyrä, jolla
 *     on katto. Pohjassa alasivun oikea yläkulma oli pystykuvan mittainen
 *     tyhjä palsta; Jennan ingressit ovat lyhyitä, joten aukko oli iso.
 *
 * Alkuperäinen rakenne, ylhäältä alas:
 *   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
 *  13. Somenostot ja videot
 *  14. Jenna Jourio — tämän sivuston oma kerros
 */

/* ============================================================
   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: 800;
    line-height: var(--ek-leading-tight);
    /* Pohjassa -0.015em oli Playfairia varten. Barlow Semi Condensed
       Extrabold on jo kapea; negatiivinen välistys tiivisti pystyviivat
       kiinni toisiinsa ja "Jenna Jourio" luki yhtenä palkkina. */
    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; }

/* The small letter-spaced label above a heading. Sans, not serif —
   it is a signpost, not a title. */
.ek-eyebrow {
    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: 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.9em 2.2em;
    border: 1.5px solid var(--ek-accent);
    border-radius: var(--ek-radius-pill);
    background: transparent;
    color: var(--ek-accent-text);
    font-family: var(--ek-font-body);
    font-size: var(--ek-size-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    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: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    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. Images: the arch and the circle
   ============================================================ */

/* Both shapes clip whatever is inside, so a portrait shot and a
   landscape shot end up the same shape. object-fit does the cropping;
   object-position defaults to centre, which suits portraits taken at
   head height. Adjust per-image in the ACF field if a face gets cut. */
.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
   ============================================================ */

.ek-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ek-bg);
    border-bottom: 1px solid var(--ek-line);
}

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

/* The wordmark. Serif, because it is the closest thing the site has
   to a logo — the template used the same treatment for "Alta Loma". */
.ek-wordmark {
    font-family: var(--ek-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

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

/* Current page gets a rule under it rather than a colour change —
   the palette has only one foreground colour to work with. */
.ek-menu .current-menu-item > a,
.ek-menu .current_page_item > a {
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 2px;
}

/* 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.5em;
    border-radius: var(--ek-radius-pill);
}

.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.6em 1.5em;
    border-radius: var(--ek-radius-pill);
    background: var(--ek-accent);
    color: var(--ek-accent-ink);
    font-size: var(--ek-size-small);
    font-weight: 500;
    letter-spacing: 0.01em;
    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: 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: 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
   ============================================================ */

/* The first version stacked everything centred: eyebrow, headline, lead,
   button, then the portrait underneath. On a 1440x900 laptop that put
   the portrait entirely below the fold, so the landing screen was a wall
   of type with nothing else on it — and every section after it repeated
   the same centred rhythm.

   Now it is two columns: words left, portrait right, both inside one
   screen. The whole block lands at roughly 570px tall on a laptop, which
   leaves the next section visible at the bottom edge — the cue that
   there is more page. */

.ek-hero {
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) 0;
}

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

.ek-hero__title {
    font-size: var(--ek-size-hero);
    margin-bottom: var(--ek-space-3);
}

.ek-hero__lead {
    margin-bottom: var(--ek-space-4);
    max-width: 46ch;
}

.ek-hero__portrait {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
}

@media (min-width: 900px) {
    .ek-hero__inner {
        /* Text column slightly wider than the image: the headline needs
           the room, and an exact half-and-half split reads as a diagram
           rather than a composition. */
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
    }

    .ek-hero__portrait {
        max-width: 380px;
        margin-inline: auto 0;
    }
}

/* ============================================================
   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 small circle beside a wide text column. Deliberately NOT the
   even split the generic .ek-split gives — at 1fr 1fr the circle 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;
}

.ek-about__media {
    width: 100%;
    max-width: 300px;
}

@media (min-width: 860px) {
    .ek-about {
        grid-template-columns: minmax(0, 300px) 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;
}

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

.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. */
.ek-quote {
    font-family: var(--ek-font-display);
    font-size: var(--ek-size-h2);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    max-width: 22ch;
    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: 400;
    letter-spacing: var(--ek-tracking-eyebrow);
    text-transform: uppercase;
    color: 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; }

.ek-footer__title {
    font-family: var(--ek-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    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. Jenna Jourio — tämän sivuston oma kerros
   ============================================================

   Kaikki yllä oleva on pohjateeman tiedostoa sellaisenaan (kaksi
   kommentoitua poikkeusta: tiedoston otsake ja otsikoiden välistys).
   Tästä alaspäin on tämän sivuston omaa. Järjestys on sama kuin
   yllä, jotta kaksi kerrosta on helppo lukea rinnakkain.
   ============================================================ */

:root {
    /* ---- Muotokieli: kaari -> pehmeä suorakaide ---------------
       Pohjan --ek-arch on Denisen Canva-mallin holvikaari. Se on
       vahva muoto ja se oli yksi vaihtoehto, ei oletus. Jennan
       ilmeessä toistuva muoto on ympyrä — sama ele kuin Vihreiden
       maapallomerkissä — ja vaakakuvissa sen pari, pehmeä
       suorakaide. Tämä yksi rivi vaihtaa muodon joka paikassa,
       jossa pohja kutsuu ek_shape_image():ia. */
    --ek-arch: 28px;
    --ek-radius-card: 16px;

    /* ---- Pinnat ------------------------------------------------
       Persikka on ohjeiston vaalea lisäväri (#F8CFA9) ja samalla
       Jennan oman nimilogon sävy. Vaalea persikka on siitä
       johdettu laimennus: kortit eivät saa olla yhtä voimakkaita
       kuin hero-kaista, tai sivulla on kaksi yhtä kovaa persikkaa
       eikä kumpikaan johda. */
    --jj-persikka: var(--ek-brand-persikka);
    --jj-persikka-vaalea: var(--ek-brand-persikka-vaalea);
    --jj-persikka-viiva: #E4BC96;

    /* Jennan nimilogon korkeus yläpalkissa. Logo on kaksirivinen ja
       ylempi rivi on ohutta käsialaa: 46 px:ssä se oli palkissa
       pikemmin koriste kuin tunnus, eikä nimeä erottanut istuma-
       etäisyydeltä. Hieman isommaksi (palaute kierros-2, kommentti
       46e3 — "logo hieman isommaksi"). */
    --jj-tunnus-h: clamp(46px, 2.1rem + 2vw, 64px);
}

/* Persikkapinnoilla linkki- ja reunaviivaväri tummennetaan.
   #006845 persikalla on 4,6:1 — yli rajan mutta niukasti; tummempi
   sävy jättää varaa myös silloin, kun teksti on pientä. Sama sävy,
   sama kylläisyys, vain tummempi. */
.jj-hero,
.jj-cta-band,
#ek-main > header.ek-section:first-child {
    --ek-accent-text: #00412B;
    --ek-line: var(--jj-persikka-viiva);
}

/* ------------------------------------------------------------
   6. Yläpalkki — Jennan tunnus vasemmalla, puolueen oikealla
   ------------------------------------------------------------ */

.jj-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ek-space-3);
    /* Korkeampi kuin pohjan 72 px: nimilogo on kaksirivinen
       (käsinkirjoitettu "Jenna" ja antiikva "JOURIO"), ja alle
       40 pikselin korkuisena ylempi rivi menee tukkoon. */
    min-height: 100px;
}

.jj-wordmark {
    display: flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.jj-wordmark img {
    height: var(--jj-tunnus-h);
    width: auto;
}

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

/* Puoluelogo on nyt palkin oma elementti eikä nimen vieressä, joten
   pohjan erotinviiva ja sen sisennys eivät kuulu tähän. */
.jj-partylogo {
    padding-left: 0;
    border-left: 0;
}

@media (max-width: 820px) {
    .jj-header__inner { min-height: 80px; }
}

/* ------------------------------------------------------------
   7. Hero — persikkakaista, jonka pohjalla Jenna seisoo
   ------------------------------------------------------------

   Pohjateema asettaa muotokuvan kaareen valkoiselle sivulle. Jennan
   virallinen kuva on studiokuva valkoisella taustalla, eli hahmo
   ilman ympäristöä: kaaressa siitä tulee valkoinen laatikko
   valkoisella pinnalla, ja Jenna kelluu sen keskellä irrallaan.
   Tausta on irrotettu, ja hahmo seisoo persikkakaistan alareunalla.
   Siksi myös align-items: end — kuvan alareuna on kaistan alareuna,
   ei grid-solun keskikohta. */

.jj-hero {
    /* Valkoinen (palaute kierros-1, kommentti 2). Hahmo on jo
       irrotettu taustastaan omaksi webp-kuvakseen, joten "valkoinen
       laatikko valkoisella" -ongelma ei toistu täällä niin kuin
       yläpuolen kommentissa kuvatussa pohjateeman kaaressa. */
    background: var(--ek-bg);
    padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
    /* Ei alapehmustusta: hahmo seisoo kaistan reunalla. */
    padding-bottom: 0;
    /* Hahmo ei saa leventää sivua kapealla ruudulla. */
    overflow: hidden;
}

.jj-hero__inner {
    display: grid;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: end;
}

.jj-hero__text {
    /* Teksti pitää oman etäisyytensä kaistan pohjasta; hahmo ei.
       align-self keskittää tekstin kaistan korkeudelle: alareunaan
       sidottuna otsikon ylle jäi kaistan verran tyhjää persikkaa ja
       sivu näytti alkavan vasta puolivälistä. */
    align-self: center;
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.jj-hero__title {
    font-size: var(--ek-size-hero);
    margin-bottom: var(--ek-space-3);
    /* Vihreä (palaute kierros-1, kommentti 1). Sama sävy kuin muualla
       sivustolla persikalla käytetty korostusteksti — ei uusi väri. */
    color: var(--ek-accent-text);
}

.jj-hero__lead {
    max-width: 44ch;
    margin-bottom: var(--ek-space-4);
}

.jj-hero__hahmo {
    width: 100%;
    /* Hieman zoomatumpi (palaute kierros-2, kommentti be87 — "zoomaa
       hieman kuvaa niin, että kädet näkyvät"; lisää kierros-3,
       kommentti 15e7 — "Zoomaa vielä"). */
    max-width: 350px;
    justify-self: center;
}

.jj-hero__hahmo img {
    width: 100%;
    height: auto;
}

/* Varapolku: jos hahmotiedosto puuttuu, ACF-kentän kuva ympyrässä.
   Silloin kuvan alareuna ei ole hahmon jalkoja vaan rajaus, joten se
   nostetaan irti kaistan pohjasta. */
.jj-hero__hahmo--rajattu {
    max-width: 320px;
    margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

@media (min-width: 900px) {
    .jj-hero__inner {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    }

    .jj-hero__hahmo {
        /* 420 px venytti kaistan yli 600 pikselin korkuiseksi, jolloin
           otsikon yläpuolelle jäi tyhjää persikkaa enemmän kuin
           tekstiä. Kuvan korkeus on kaistan korkeus. Hieman
           zoomatumpi (palaute kierros-2, kommentti be87; lisää
           kierros-3, kommentti 15e7 — "Zoomaa vielä"). */
        max-width: 450px;
        justify-self: end;
    }
}

/* ------------------------------------------------------------
   8. Osiot ja kortit
   ------------------------------------------------------------ */

/* Esittelykuvan takana persikkalevy hieman sivussa. Yksi ympyrä
   valkoisella sivulla on kuva; kaksi ympyrää hieman eri kohdissa on
   sommitelma, ja se toistaa heron persikan ilman uutta kaistaa. */
.jj-about .jj-disc {
    position: relative;
}

.jj-about .jj-disc::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate(-22px, 22px);
    border-radius: 50%;
    /* Eri väri kuin hero (palaute kierros-1, kommentti 3 — asiakkaan
       antama sävy). */
    background: #D5EAE1;
    z-index: 0;
}

.jj-about .jj-disc > * {
    position: relative;
    z-index: 1;
}

/* Teemakortit: numeroituja persikkalaattoja, ei kuvakortteja.
   Jennan valokuvista viisi on samalta kuvauskeikalta samaa
   tiiliseinää vasten. Kolme niistä rinnakkain korttiriviksi näytti
   siltä kuin sama kuva olisi vahingossa kolmesti; numerot kantavat
   rivin ilman sitä, ja valokuvat ovat siellä missä ne toimivat
   yksinään. */
.jj-cards {
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

.jj-card {
    background: var(--jj-persikka-vaalea);
    border-radius: 28px;
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    gap: var(--ek-space-1);
}

.jj-card__number {
    /* Pohjassa numero on paikanpitäjä puuttuvalle kuvalle ja siksi
       viivan värinen. Tässä se on kortin tunnus, joten se on
       brändivärillä ja kortin ylin asia. */
    font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
    color: var(--ek-accent);
    margin: 0 0 var(--ek-space-1);
}

.jj-card__number + .ek-card__title {
    margin-top: 0;
}

/* Teemakorttien otsikkolinkit (Teema 1/2/3) vihreiden vihreäksi
   (palaute kierros-4, kommentit d721/ad49/44e7 — "Vihreiden
   vihreäksi"). Sama token kuin muissa vihreäksi muutetuissa
   otsikoissa (kohta 12); kortin vaalealla persikkapohjalla #006845 on
   6,07:1 — sama suhde kuin kortin numerolla, josta väri on peritty. */
.jj-card .ek-card__title a {
    color: var(--ek-accent-text);
}

/* Sitaattikaista: sivun ainoa tumma pinta ennen alatunnistetta.
   Vasempaan reunaan ladottuna se lukeutuu puheenvuoroksi; keskitetty
   iso teksti luki julisteelta. */
.jj-quote-band .ek-quote {
    text-align: left;
    max-width: 24ch;
    margin-inline: 0;
}

/* Viiva ja nimi olivat persikkaa; asiakas pyysi valkoiseksi (palaute
   kierros-2, kommentti 90ab). .jj-quote-band on .ek-band--dark, jossa
   --ek-fg on jo valkoinen, joten se korvaa persikan suoraan. Nimi
   myös hieman isommaksi (sama kommentti). */
.jj-quote-band .ek-quote::before {
    content: '';
    display: block;
    width: 72px;
    height: 4px;
    border-radius: var(--ek-radius-pill);
    background: var(--ek-fg);
    margin-bottom: var(--ek-space-3);
}

.jj-quote-band .ek-quote__attrib {
    color: var(--ek-fg);
    font-size: var(--ek-size-body);
}

/* Kutsukaista. Oli sama persikka kuin hero; eri väri asiakkaan
   pyynnöstä (palaute kierros-1, kommentti 4 — asiakkaan antama sävy,
   sama kuin kommentissa 3 esittelyn ympyrälle). Kaistan sisällä
   pohjan yläviiva on turha — värinvaihdos erottaa osion jo itse. */
.jj-cta-band {
    background: #D5EAE1;
}

.jj-cta-band .jj-cta {
    border-top: 0;
    padding-top: 0;
}

/* ------------------------------------------------------------
   8b. Alasivujen yläosa
   ------------------------------------------------------------

   Jokainen alasivu alkaa pohjateemassa <header class="ek-section">
   -lohkolla, joka on main-elementin ensimmäinen lapsi: Minusta, Ota
   yhteyttä ja Tule mukaan rakentavat sen itse, tietosuojaseloste saa
   sen parts/page-hero.php:stä. Yksi sääntö riittää kaikkiin.

   padding-bottom on sivupohjissa inline-tyylinä (0), jotta otsikon ja
   sisällön väliin ei tule kahta pehmustetta. Kaistana se tarvitsee
   oman alapehmusteensa, ja inline-tyylin voittaa vain !important.

   Persikasta mintuksi (palaute kierros-2, kommentit d3f9, b6f4, 22d7
   — "väri mintuksi joka aiemmin annettu"). Sama sävy kuin esittelyn
   ympyrälevyssä ja kutsukaistassa (palaute kierros-1). Yksi sääntö
   koskee kaikkia alasivuja, myös tietosuojaselostetta, jota ei
   kommentoitu erikseen — se jakaa saman yläosan. */
#ek-main > header.ek-section:first-child {
    background: #D5EAE1;
    padding-bottom: var(--ek-section-y) !important;
}

/* Minusta-sivun faktalistan ("ikä ja kotipaikka" jne.) alaviivat olivat
   persikan sävyisiä (--ek-line peritty .jj-hero/.jj-cta-band-säännöstä).
   Vihreiden vihreäksi (palaute kierros-3, kommentit 11b5 ja 34b4 —
   "Viivat vihreiden vihreäksi"), sama brandivihreä kuin otsikoissa. */
#ek-main > header.ek-section:first-child .ek-facts li {
    border-bottom-color: #006845;
}

/* Muotokuva alasivun yläkaistassa.
   Pohjassa se on 320 px leveä pystykaari (3:4), jolloin lyhyen
   ingressin viereen jää yli 400 pikseliä tyhjää. Jennan ingressit
   ovat yhden tai kahden lauseen mittaisia, joten aukko oli sivun
   näkyvin asia. Kapeampi ja matalampi rajaus, ja rajaus ylhäältä,
   jotta kasvot pysyvät kuvassa. */
.ek-intro-split__media {
    max-width: 240px;
}

.ek-intro-split__media .ek-arch--portrait {
    aspect-ratio: 4 / 5;
}

/* Jennan vaakakuvissa hän seisoo noin kahden kolmasosan kohdalla
   oikealle. Pystyrajauksessa keskeltä otettuna kuvaan jää tiiliseinää
   ja Jenna leikkautuu reunaan. */
.ek-intro-split__media .ek-arch img,
.ek-story__media .ek-arch img,
.jj-about .ek-round img {
    object-position: 65% center;
}

@media (min-width: 860px) {
    .ek-intro-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
        align-items: center;
    }
}

/* Minusta-sivun tarinaosiot.
   Pohja rajaa niiden kuvat pystyyn (3:4). Jennan kuvat ovat vaakaa
   (3:2) ja kaikki samalta kuvauskeikalta samaa tiiliseinää vasten:
   pystyyn rajattuna seinää jää kuvaan enemmän kuin Jennaa, ja kolme
   korkeaa tiilipilaria allekkain oli sivun hallitsevin asia. Vaaka-
   rajaus (4:3) näyttää kuvasta sen mitä kuvaaja rajasi, ja osiot
   mahtuvat lyhyempään matkaan. */
.ek-story__media {
    max-width: 380px;
}

.ek-story__media .ek-arch--portrait {
    aspect-ratio: 4 / 3;
}

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

/* Minusta-sivun muotokuva: isompi ja kolmion muotoinen, kapeampi
   ylhäältä ja leveämpi alhaalta (palaute santeri-1, kommentti 2 —
   "dynaamisempi ja isompi"). Koskee vain tätä sivua, koska
   .ek-intro-split__media jakaa säännöt Ota yhteyttä- ja Tule mukaan
   -sivujen kanssa eikä niihin pyydetty muutosta.

   Kärki ylhäällä keskellä (palaute santeri-2, kommentti 1) jätti kuvasta
   näkyviin vain pisteen yläreunassa, jolloin kuva ei täyttänyt pinkin
   kaistan korkeutta eikä kasvoja juuri näkynyt. Suorakulmainen kolmio,
   jonka pystysivu on kaistan oikeassa laidassa koko korkeudelta: kuva
   täyttää korkeuden alhaalta ylös, ja suora kulma on oikeassa alakulmassa
   kuten pyydettiin.

   Kuva jäi silti kauas yläpalkin (#ek-main > header) oikeasta ja
   alareunasta, koska .ek-shellin sivupehmuste ja kaistan omat
   padding-block-arvot jättivät sille tilaa joka puolelle (palaute
   santeri-3, kommentti 1: "saman korkuinen kuin tämä elementti... tasattu
   tämän elementin oikeaan laitaan ja alalaitaan"). Kuva irrotetaan ruudu-
   kosta ja sijoitetaan yläpalkin suhteen absoluuttisesti, jolloin se
   täyttää koko palkin korkeuden ja koskettaa sen oikeaa ja alareunaa
   pehmusteista riippumatta. Täysi kolmio (yllä) peitti puolet kuvasta;
   komentti tarjosi vaihtoehdoksi nelikulmion, jonka vasen reuna on viisto
   — leveämpi yläreuna jättää enemmän kuvasta näkyviin. */
.page-template-template-minusta-php #ek-main > header.ek-section:first-child {
    position: relative;
}

.page-template-template-minusta-php .ek-intro-split__media {
    max-width: 360px;
}

.page-template-template-minusta-php .ek-intro-split__media .ek-arch--portrait {
    /* Vasemman reunan viisto alkaa 40 %:sta 25 %:iin (palaute kierros-3,
       kommentti 45ca — "vähän enemmän vasemmalle kuvaa"): kuva täyttää
       enemmän yläkulman mintistä, joka aiemmin jäi tyhjäksi. */
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@media (min-width: 860px) {
    /* Kuva venyy koko persikkakaistan korkuiseksi tekstipalstan
       rinnalla sen sijaan, että sillä olisi oma kiinteä korkeutensa. */
    .page-template-template-minusta-php .ek-intro-split {
        align-items: stretch;
    }

    /* position: absolute ottaa kuvan pois ruudukosta: sen sijoituskehys
       on yläpalkki (position: relative yllä), ei .ek-shellin pehmustettu
       sisältöalue, joten top/right/bottom: 0 koskettaa palkin oikeita
       reunoja suoraan. Leveys pysyy ennallaan (420px) — kuva vain siirtyy
       sivupehmusteen verran oikealle, mikä antaa tekstipalstalle entistä
       enemmän tilaa, ei vähemmän. */
    .page-template-template-minusta-php .ek-intro-split__media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        width: 420px;
    }

    .page-template-template-minusta-php .ek-intro-split__media .ek-arch--portrait {
        aspect-ratio: auto;
        height: 100%;
    }
}

/* Puhelinnumero yhteystietorivillä: pelkkänä tekstinä se seisoo
   tyylittömänä pyöreiden some-nappien rinnalla ja näyttää irralliselta
   (palaute santeri-1, kommentti 3 — "out of place ja vähän tyhjältä").
   Sama pyöreä reunus ja puhelinikoni kuin some-napeissa, jotta rivi
   lukee yhtenä yhteystietoryhmänä eikä tekstinä ja napeina erikseen. */
.ek-contact-row__link[href^='tel:'] {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1.1em;
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-pill);
    text-decoration: none;
}

.ek-contact-row__link[href^='tel:']::before {
    content: '';
    width: 18px;
    height: 18px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTYuNjIgMTAuNzljMS40NCAyLjgzIDMuNzYgNS4xNCA2LjU5IDYuNTlsMi4yLTIuMmMuMjctLjI3LjY3LS4zNiAxLjAyLS4yNCAxLjEyLjM3IDIuMzMuNTcgMy41Ny41Ny41NSAwIDEgLjQ1IDEgMVYyMGMwIC41NS0uNDUgMS0xIDEtOS4zOSAwLTE3LTcuNjEtMTctMTcgMC0uNTUuNDUtMSAxLTFoMy41Yy41NSAwIDEgLjQ1IDEgMSAwIDEuMjUuMiAyLjQ1LjU3IDMuNTcuMTEuMzUuMDMuNzQtLjI1IDEuMDJsLTIuMiAyLjJ6Ii8+PC9zdmc+") center / contain no-repeat;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTYuNjIgMTAuNzljMS40NCAyLjgzIDMuNzYgNS4xNCA2LjU5IDYuNTlsMi4yLTIuMmMuMjctLjI3LjY3LS4zNiAxLjAyLS4yNCAxLjEyLjM3IDIuMzMuNTcgMy41Ny41Ny41NSAwIDEgLjQ1IDEgMVYyMGMwIC41NS0uNDUgMS0xIDEtOS4zOSAwLTE3LTcuNjEtMTctMTcgMC0uNTUuNDUtMSAxLTFoMy41Yy41NSAwIDEgLjQ1IDEgMSAwIDEuMjUuMiAyLjQ1LjU3IDMuNTcuMTEuMzUuMDMuNzQtLjI1IDEuMDJsLTIuMiAyLjJ6Ii8+PC9zdmc+") center / contain no-repeat;
}

.ek-contact-row__link[href^='tel:']:hover {
    background: var(--ek-accent);
    color: var(--ek-accent-ink);
    opacity: 1;
}

/* ------------------------------------------------------------
   11. Alatunniste
   ------------------------------------------------------------ */

/* Jennan nimilogo persikkaversiona. Sivu alkaa ja loppuu samaan
   tunnukseen; persikka on ainoa väri, joka sitoo tumman vihreän
   kaistan sivun vaaleisiin pintoihin. */
.jj-footer__logo {
    /* 52–68 → 64–84 (palaute kierros-4, kommentti 7384 — "Suurenna"). */
    height: clamp(64px, 3.6rem + 1.6vw, 84px);
    width: auto;
    margin: 0 0 var(--ek-space-2);
}

/* ------------------------------------------------------------
   12. Otsikot vihreiden vihreäksi (palaute kierros-2)
   ------------------------------------------------------------
   Etusivun paikanpitäjäotsikot, Instagram-otsikko, Minusta- ja
   Tule mukaan -sivun otsikot sekä Tule mukaan -sivulle upotettu
   "Ota yhteyttä" -otsikko samaan vihreään kuin hero-otsikko jo sai
   ensimmäisellä kierroksella — --ek-accent-text on valkoisella
   pohjalla ohjeiston brandivihreä #006845.

   .home-etuliite välttämätön: Ota yhteyttä -sivulla on myös kaksi
   <section>-tagia #ek-main:n alla (yhteystiedot + lomake), joten ilman
   sitä nth-of-type(2) osuisi vahingossa lomakkeen "Lähetä viesti"
   -otsikkoon.

   #ek-yhteyslomake-otsikko (lomakkeen oma "Lähetä viesti" -otsikko)
   jätettiin tarkoituksella pois v0.1.9:ssä, kun sama väri vuoti sinne
   vahingossa. Palaute kierros-5, kommentti afa8 pyysi saman otsikon
   vihreäksi nimenomaisesti Tule mukaan -sivulla, joten se lisätään
   tähän listaan erikseen — koskee lomaketta kaikkialla, missä se on. */
.home #ek-main > section:nth-of-type(2) h2,
.home #ek-main > section:nth-of-type(3) h2,
.home #ek-main > section:nth-of-type(5) h2,
#ek-instagram-otsikko,
#ek-yhteyslomake-otsikko,
.page-template-template-minusta-php #ek-main > header h1,
.page-template-template-minusta-php .ek-story .ek-prose h2,
.page-template-template-tule-mukaan-php #ek-main > header h1,
.page-template-template-tule-mukaan-php #ek-main > section:first-of-type h2 {
    color: var(--ek-accent-text);
}

/* ------------------------------------------------------------
   13. Tule mukaan: puhelinnumero pois (palaute kierros-2, kommentti
   f2d4 — "poista puhelinnumero!")
   ------------------------------------------------------------
   Numero tulee sivustonlaajuisesta kentästä (yhteys_puhelin) ja
   näkyy myös Ota yhteyttä -sivulla, jota ei pyydetty muuttamaan —
   siis piilotus vain tällä sivulla, ei kentän tyhjennys. */
.page-template-template-tule-mukaan-php .ek-contact-row__link[href^='tel:'] {
    display: none;
}

/* ------------------------------------------------------------
   14. Tule mukaan: yläpalkin kuva isommaksi ja vinoleikatuksi
   (palaute kierros-2, kommentti a790 — "Voiko kuva olla palkin
   kokoinen ja leikata sen vinottain")
   ------------------------------------------------------------
   Sama vino reuna kuin Minusta-sivulla (8b). Kierros-2:ssa kuva ei
   venynyt koko palkin korkeuteen, koska sen alla on nimiteksti
   (ek-portrait-name). Kierros-3, kommentti 54ac — "Täytä tällä oikea
   sivu kokonaan" — pyytää täyttä korkeutta nimenomaan; nimiteksti ei
   siis enää ole kuvan alla omalla rivillään vaan kelluu kuvan päällä
   tummalla liu'ulla, kuten kuvatekstit yleensä valokuvissa. */
.page-template-template-tule-mukaan-php #ek-main > header.ek-section:first-child {
    position: relative;
}

.page-template-template-tule-mukaan-php .ek-intro-split__media {
    /* 360 → 400 (palaute kierros-4, kommentti a64f — "Tee vielä
       suuremmaksi"). */
    max-width: 400px;
    position: relative;
}

.page-template-template-tule-mukaan-php .ek-intro-split__media .ek-arch--portrait {
    clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.page-template-template-tule-mukaan-php .ek-portrait-name {
    position: absolute;
    left: var(--ek-space-3);
    right: var(--ek-space-3);
    bottom: var(--ek-space-3);
    margin: 0;
    padding: 0.4em 0.8em;
    background: rgba(32, 40, 39, 0.65);
    color: #FFFFFF;
    border-radius: var(--ek-radius-pill);
    text-align: center;
}

@media (min-width: 860px) {
    .page-template-template-tule-mukaan-php .ek-intro-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    }

    /* Sama tekniikka kuin Minusta-sivulla (8b): kuva irti ruudukosta ja
       sijoitettu yläpalkin suhteen absoluuttisesti, jolloin se täyttää
       koko palkin korkeuden ja koskettaa oikeaa ja alareunaa. */
    .page-template-template-tule-mukaan-php .ek-intro-split {
        align-items: stretch;
    }

    .page-template-template-tule-mukaan-php .ek-intro-split__media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        /* 360 → 400 (palaute kierros-4, kommentti a64f). */
        width: 400px;
    }

    .page-template-template-tule-mukaan-php .ek-intro-split__media .ek-arch--portrait {
        aspect-ratio: auto;
        height: 100%;
    }
}

/* ------------------------------------------------------------
   15. Ota yhteyttä: yläpalkin kuva poikkileikkaavaksi ja oikean
   sivun täyttäväksi (palaute kierros-3, kommentti d7c9 — "Tee
   poikkileikkaava oikean sivun täyttävä kuva")
   ------------------------------------------------------------
   Sama ratkaisu kuin Minusta- ja Tule mukaan -sivuilla. Nimiteksti
   kuvan alla poistettiin kokonaan samalla kierroksella (kommentti
   96f9), joten tällä sivulla ei tarvita kuvatekstin ylivalumaa. */
.page-template-template-yhteys-php #ek-main > header.ek-section:first-child {
    position: relative;
}

.page-template-template-yhteys-php .ek-intro-split__media {
    /* 360 → 400 (palaute kierros-4, kommentti cd83 — "Tee vielä
       suuremmaksi"). */
    max-width: 400px;
}

.page-template-template-yhteys-php .ek-intro-split__media .ek-arch--portrait {
    clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@media (min-width: 860px) {
    .page-template-template-yhteys-php .ek-intro-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
        align-items: stretch;
    }

    .page-template-template-yhteys-php .ek-intro-split__media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        width: 400px;
    }

    .page-template-template-yhteys-php .ek-intro-split__media .ek-arch--portrait {
        aspect-ratio: auto;
        height: 100%;
    }
}

/* ------------------------------------------------------------
   16. Ota yhteyttä: nimiteksti pois kuvan alta (palaute kierros-3,
   kommentti 96f9 — "poista")
   ------------------------------------------------------------ */
.page-template-template-yhteys-php .ek-portrait-name {
    display: none;
}

/* ------------------------------------------------------------
   17. Ota yhteyttä: puhelinnumero pois (palaute kierros-3, kommentti
   46fb — "POISTA TÄMÄ LINKKI")
   ------------------------------------------------------------
   Sama tekniikka kuin Tule mukaan -sivulla kierroksella 2 (kohta 13):
   numero on sivustonlaajuinen kenttä, joten piilotus vain tällä
   sivulla, ei kentän tyhjennys. */
.page-template-template-yhteys-php .ek-contact-row__link[href^='tel:'] {
    display: none;
}

/* ------------------------------------------------------------
   18. Tule mukaan: nimiteksti pois kuvan päältä (palaute kierros-6,
   kommentti 68da — "poista")
   ------------------------------------------------------------
   Sama tekniikka kuin Ota yhteyttä -sivulla kierroksella 3 (kohta 16). */
.page-template-template-tule-mukaan-php .ek-portrait-name {
    display: none;
}