/* ===================================================================
   ort-turku — teeman tyylit
   Siirretty prototyypistä prototypes/variant-d-synteesi.html (kanoninen).
   Rakenne:
     1. Yhteiset ainekset (rivitys ja tavutus, wrap, sec-head, napit)
     2. Tumma ja vaalea kaista (lohkotyylit)
     3. Header + navigaatio + mobiilivalikko
     4. Hero
     5. Etusivun osiot (palvelukset, tutustu, tapahtumat, tehtävät,
        uutiset [Query Loop], sitaattikaista, kirkkokalenteri-pari, alue)
     6. Footer
     7. Elävöitykset (reveal, Ken Burns, kultaviiva, sticky header, hoverit,
        "seuraavaksi"-korostus, suodatus, scrollbar, lampukka,
        heron parallaksi, sivunvaihdon ristihäivytys)
        Numerointi viittaa prototypes/elavoitykset.html:n efekteihin 01–13;
        14 ja 15 ovat sitä uudempia.
     8. Sisältösivut (vanha sisältö, arkistot, haku, 404)
   =================================================================== */

/* ============ RIVITYS JA TAVUTUS ============
   Suomen yhdyssanat ovat pitkiä, ja kapealla palstalla ne eivät mahdu
   riville. Ilman ohjetta selain katkaisee ne mistä sattuu ja ILMAN
   tavuviivaa — "KIRKKOMUSIIK / KI", "juhlavuosituotte / et". Syy on
   lohkoeditorin core-tyylissä `.wp-block-post-title { word-break:
   break-word }` (kaikki otsikkolohkot) ja teeman omassa
   `.entry-content { overflow-wrap: anywhere }` -säännössä, joka on
   siellä pitkiä osoitteita varten (ks. sisältösivut).

   Näillä säännöillä katkojärjestys on:
     1. sanaväli — selaimen oletus,
     2. tavutus tavurajalta,
     3. kova katko keskeltä sanaa vasta jos sana ei mahdu riville
        yksinäänkään (overflow-wrap).

   `word-break: normal` on välttämätön: ilman sitä core-tyyli katkaisee
   sanan ennen kuin tavutus ehtii yrittää. Valitsimissa on siksi
   .wp-block-post-title-luokka element-valitsimen (h1…h6) lisäksi —
   pelkkä `h2` häviäisi core-tyylille spesifisyydessä.

   HUOM. `hyphens: auto` EI YKSIN RIITÄ, eikä sitä pidä poistaa siksi
   ettei se näytä tekevän mitään: Chromen tavutussanakirjoista puuttuu
   suomi kokonaan (tarkistettu 17.8.2026: hyphen-data-komponentissa on
   50 kieltä, mm. ruotsi ja viro, muttei suomea). Firefox ja Safari
   tavuttavat, Chrome ja Edge eivät. Varsinaiset tavurajat merkitään
   siksi palvelimella pehmytyhdysmerkein — inc/tavutus.php. Tämä sääntö
   on se osa, joka toimii myös JS:llä piirretyssä sisällössä (kalenterin
   merkinnät) ja niissä selaimissa joissa sanakirja on.

   `hyphenate-limit-chars: 10 3 3` pitää selaimen oman tavutuksen samoissa
   rajoissa kuin palvelimen: vain 10 merkkiä pitemmät sanat tavutetaan ja
   katkon kummallekin puolelle jää vähintään 3 merkkiä. Lyhyet sanat
   rivittyvät kuten ennen, joten ulkoasu ei täyty tavuviivoista. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title, .entry-title, .hit-title, .es-title, .page-title {
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 3 3;
}
/* HUOM. Otsikoille EI text-wrap: balancea. Se on houkutteleva (rivit
   tasamittaisiksi), mutta tasapainottaja pitää tavutusvihjettä yhtä
   kelvollisena katkokohtana kuin sanaväliä ja käyttää sitä myös silloin,
   kun sana mahtuisi riville kokonaan: "Ajankohtaista kirkossa" latoutui
   muotoon "AJANKOH- / TAISTA KIRKOSSA" (todettu 17.8.2026, etusivun
   Ajankohtaista kirkossa -kortti). Tavuviiva kuuluu vain tilanpuutteeseen,
   joten tasapainotus jää pois. Sitaateissa ja pullquote-lohkoissa balance
   on yhä käytössä: ne eivät saa tavutusvihjeitä. */

/* Leipäteksti: sama tavutus, jotta pitkä yhdyssana ei revi palstaa eikä
   katkea ilman tavuviivaa. overflow-wrap tulee .entry-contentin omasta
   säännöstä (anywhere, osoitteita varten) — se on tarkoituksella
   aggressiivisempi, ja tavutus menee silti edelle, koska tavutuskohta
   on selaimelle kelvollinen katkokohta ja overflow-wrap vasta viimeinen
   keino. */
.entry-content, .cal, .uutis-tx {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 3 3;
}
/* Poikkeus: koodi, osoitteet ja tunnisteet eivät ole sanoja, joten niitä
   ei tavuteta — ne katkeavat mistä vain (.entry-content overflow-wrap). */
.entry-content code, .entry-content kbd, .entry-content samp, .entry-content pre {
  -webkit-hyphens: none;
  hyphens: none;
}
/* Poikkeus: seurakunnan nimi on erisnimi eikä katkea tavuviivalla.
   iOS Safarissa on suomen tavutussanakirja, joten hero-otsikko latoutui
   kapealla ruudulla muotoon "TURUN ORTO- / DOKSINEN SEU- / RAKUNTA"
   (todettu 24.8.2026 vedoksessa). Nimi rivittyy sanaväleistä; headerin
   logotekstissä katko on käsin (<br>). */
.hero h1, .site-footer h2 {
  -webkit-hyphens: none;
  hyphens: none;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); }
.band-section { padding: var(--sp-8) 0; }

/* --- Sektio-otsikko: nappi oikealla otsikon tasolla --- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4);
  margin-bottom: var(--sp-6); flex-wrap: wrap; }
.sec-head .eyebrow { display: block; margin-bottom: var(--sp-2); }
.sec-head h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); line-height: 1.1; }
.sec-head .btn { margin-bottom: 2px; }
/* Toimintoryhmä otsikon oikeassa reunassa: korttiselaimen nuolet ja
   kaikki-linkki samalla rivillä (uutis- ja tapahtumaosiot). */
.sec-head .sec-actions { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: 2px; }
.sec-head .sec-actions .btn { margin-bottom: 0; }
/* Osion kalenterilinkki renderöidään kahdesti: otsikkorivillä (cta-head)
   ja korttien alla (cta-foot). Leveällä näkyy otsikkorivin nappi,
   kapealla korttien alla oleva (ks. ≤860px). */
.cta-foot { display: none; }

.btn { display: inline-block; padding: 14px 28px; border-radius: var(--radius-ui); font-weight: 600; font-size: var(--fs-body);
  text-decoration: none; transition: all var(--dur-fade) var(--ease-calm); }
.btn-candle { background: var(--c-candle); color: var(--c-midnight); }
.btn-candle:hover { background: var(--c-gold-l); color: var(--c-midnight); }
.btn-ghost { border: 1px solid var(--border-invert); color: var(--c-cream); }
.btn-ghost:hover { border-color: var(--c-candle); color: var(--c-candle); }
/* Vaalean pinnan viivanappi on syvää kultaa (ks. tokens.css: --accent). */
.btn-line { border: 1px solid var(--c-gold-d); color: var(--c-gold-d); }
.btn-line:hover { background: rgba(184,137,58,.10); border-color: var(--c-gold-dd); color: var(--c-gold-dd); }

/* ============ TUMMAT KAISTAT (lohkotyyli is-style-dark-band) ============ */
.dark-band, .is-style-dark-band { background: var(--c-midnight); color: var(--c-cream); }
/* Tummia pintoja on kaksi (päätökset 14.–15.8.2026). Sininen keskiyö on
   selailtavan sisällön väri: seuraavat palvelukset, uutiset ja seurakunnan
   alue. Lämmin vigilia-musta on sivun kehyksen ja hartaiden osioiden väri,
   ja se merkitään kaistaan .vigil-band-luokalla: header, sitaattikaista,
   kirkkokalenteri + ajankohtaista kirkossa sekä footer. Sama jako on
   jumalanpalveluskalenterissa (.cal--dark, kalenteri.css).
   Luokka riittää kaistan vaihtamiseen puolelta toiselle — muuta ei tarvita,
   koska kaikki muut värit tulevat kummassakin samoista tokeneista. */
.vigil-band { background-color: var(--c-vigil); }
.dark-band a, .is-style-dark-band a { color: var(--c-gold-l); }
.dark-band a:hover, .is-style-dark-band a:hover { color: var(--c-candle); }
.dark-band a:focus-visible, .is-style-dark-band a:focus-visible { outline-color: var(--c-candle); }
.dark-band .sec-head .eyebrow { color: var(--c-candle); }
.dark-band .btn-candle, .dark-band .btn-candle:hover { color: var(--c-midnight); }
.dark-band .btn-ghost { color: var(--c-cream); }
.dark-band .btn-ghost:hover { color: var(--c-candle); }

/* ============ VAALEA KAISTA (lohkotyyli is-style-light-band) ============ */
.light-band, .is-style-light-band { background: var(--c-parchment); color: var(--c-ink); }
/* Silmäripsi oli hiillos; kulta-aksentin myötä vaalealla kaistalla on yksi
   korostusväri kuten tummallakin. Hiillos jää tapahtumakortin
   "Seuraavaksi"-lipukkeeseen, joka tarvitsee oman äänensä nyt kun kulta on
   yleisväri. */
.light-band .sec-head .eyebrow { color: var(--c-gold-d); }
.light-band .sec-head h2 { color: var(--c-ink); }

/* ============ HEADER + NAVIGAATIO ============ */
/* Headerin perusväri tulee .vigil-band-luokasta (ks. tummat kaistat).
   Headerilla on kuitenkin kolme muuta tilaa, joissa tausta kirjoitetaan
   uusiksi ja vigilia on siksi toistettava: rullattu lasipinta ja avattu
   mobiilivalikko (≥861px ja ≤860px -haarat) sekä alavalikkopaneelit. */
.topbar { border-bottom: 1px solid var(--border-invert); }
.topbar .wrap { display: flex; justify-content: flex-end; gap: var(--sp-4); padding-top: var(--sp-2); padding-bottom: var(--sp-2); flex-wrap: wrap; }
/* Kielilinkit ovat oman nav-maamerkkinsä sisällä (patterns/header.php),
   joten rivitys on tehtävä siellä eikä .wrapissa — .wrap on palkin
   osien (kielet, katselmoinnin värivalitsin) välinen laatikko. */
.topbar-kielet { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.topbar a { font-size: var(--fs-meta); color: var(--c-mist); text-decoration: none; }
.topbar a[aria-current] { color: var(--c-candle); }
.topbar a:hover { color: var(--c-cream); }

.site-header .wrap { display: flex; align-items: center; gap: var(--sp-5); padding-top: var(--sp-4); padding-bottom: var(--sp-4); flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.logo-mark { width: 56px; height: 56px; display: block; }
.logo-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--c-cream); line-height: var(--lh-snug); }
.site-menu { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.menu-langs { display: none; }
.menu-btn { display: none; }
/* Väli ja kirjasinkoko ovat prototyyppiä tiiviimmät (24px → 12px,
   0.875rem → 0.8125rem), koska päävalikossa on kuusi kohtaa viiden sijaan
   ja osa nimistä on pitkiä ("Palvelukset ja tapahtumat", "Elämässä
   mukana"). Sisältöpalsta on rajattu 1180 pikseliin, joten taitekohdan
   nostaminen ei auttaisi — tila on tehtävä itse valikkoon. Alle 1181px:n
   valikko on hampurilaisen takana, joten tämä koskee vain työpöytänäkymää. */
.site-nav ul { display: flex; gap: 12px; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; }
.site-nav a { font-size: 0.8125rem; font-weight: 500; color: var(--c-cream); text-decoration: none; }
.site-nav a:hover { color: var(--c-candle); }
.search-btn { display: inline-block; background: none; border: 1px solid var(--border-invert); border-radius: var(--radius-ui);
  color: var(--c-mist); padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-meta); cursor: pointer;
  text-decoration: none; }
.dark-band a.search-btn { color: var(--c-mist); }
.search-btn:hover, .dark-band a.search-btn:hover { border-color: var(--c-candle); color: var(--c-candle); }

/* Päävalikon linkit kermana + alavalikot */
.site-top .site-nav a { color: var(--c-cream); }
.site-top .site-nav a:hover, .site-top .site-nav a:focus-visible { color: var(--c-candle); }
.site-top .site-nav a:focus-visible { outline: 2px solid var(--c-candle); outline-offset: 3px; }
.caret { font-size: .62em; opacity: .55; }

/* Headerin oma taitekohta on 1180px (muu sivusto taittuu 860px:ssä):
   kuuden kohdan vaakavalikko + logo + haku tarvitsevat ~1110px, joten
   sitä kapeammilla näytöillä valikko menee hampurilaisen taakse. */
@media (min-width: 1181px) {
  /* Jos selaimen suurennettu vähimmäisfonttikoko leventää valikkorivin
     yli 1180 px:n palstan, rivi ei mahdu logon viereen millään näytöllä
     ja putoaa logon alle. Nämä säännöt tekevät pudonneesta tilasta
     hallitun: tiivis rivinväli, ja margin-left: auto tasaa pudonneen
     rivin oikealle. Kun valikko mahtuu logon viereen, sääntö ei muuta
     mitään. */
  .site-header .wrap { row-gap: var(--sp-2); }

  .site-menu .site-nav > ul > li { position: relative; }
  .site-menu .site-nav > ul > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 12px 0; }
  .site-menu .site-nav > ul > li:hover > a .caret,
  .site-menu .site-nav > ul > li:focus-within > a .caret { opacity: 1; }

  .subnav {
    position: absolute; top: 100%; left: -18px; z-index: 70; min-width: 252px;
    padding-top: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 260ms var(--ease-calm), transform 260ms var(--ease-calm),
                visibility 0s linear 260ms;
  }
  .site-menu .site-nav > ul > li:last-child .subnav { left: auto; right: -18px; }
  .site-menu .site-nav > ul > li:hover > .subnav,
  .site-menu .site-nav > ul > li:focus-within > .subnav {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .subnav > ul {
    display: block; background: rgb(var(--c-vigil-rgb) / .97);
    border: 1px solid var(--border-invert); border-top: 1px solid var(--c-gold);
    box-shadow: 0 18px 44px rgba(0,0,0,.5);
    padding: var(--sp-3) 0;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .subnav li { display: block; }
  /* Erotin paneelin sisällä: osiokodin ankkurilinkit ylhäällä, alasivut
     viivan alla (header.php: .subnav-sep). Mobiilihaitarissa erotinta ei
     tarvita — siellä jokaisella rivillä on jo oma viivansa. */
  .subnav li.subnav-sep { border-top: 1px solid var(--border-invert);
    margin-top: var(--sp-2); padding-top: var(--sp-2); }
  .subnav a { display: block; padding: 9px var(--sp-5); color: var(--c-cream);
    font-size: var(--fs-meta); font-weight: 400; white-space: nowrap; }
  .subnav a:hover, .subnav a:focus-visible { color: var(--c-candle); background: rgba(242,196,107,.07); }
  .site-menu .site-nav > ul > li.sub-closed > .subnav {
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition-delay: 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .subnav { transition: none; transform: none; }
  }
}

/* ============ HERO ============ */
.hero { position: relative; min-height: 68vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
/* Kuvalla on oma kerroksensa, koska heron kaksi liike-efektiä tarvitsevat
   kumpikin oman transforminsa: parallaksi (efekti 14) liikuttaa .hero-mediaa,
   Ken Burns (efekti 03) itse kuvaa. Samaan elementtiin ne eivät mahdu. */
.hero-media { position: absolute; inset: 0; }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;
  /* Molemmat kuvat on otettu hämärässä kirkossa, joten pelkkä suojauksen
     keventäminen ei vielä riitä. Maltillinen nosto: mitattuna heikoin
     tekstikontrasti pysyy yli 5:1 (raja 4.5:1), mutta kuvan reunojen
     kirkkaus nousee neljänneksellä. Älä kasvata ilman uutta mittausta. */
  filter: brightness(1.12) saturate(1.06); }
/* Heron suojaus on kaksiosainen (muutos 13.8.2026). Ennen koko kuvan päällä
   oli protect-strong eli pystygradientti 0.55 → 0.92: teksti luki hyvin,
   mutta kuvasta ei nähnyt juuri mitään. Nyt suoja on siellä missä teksti on:

   1. --veil-shape — tumma soikio keskellä, joka häipyy nollaan reunoja
      kohti. Keskellä suoja on hieman entistä VAHVEMPI (0.80 vs. 0.75), joten
      otsikon kontrasti ei heikkene; reunoilla kuva näkyy lähes sellaisenaan.
   2. --veil-base — kevyt pystyvaje kauttaaltaan: ylhäällä sen verran, että
      rullattu lasiheader erottuu kuvasta, alhaalla sen verran, ettei hero
      törmää alapuoliseen tummaan kaistaan terävällä saumalla.

   Soikion säteet ovat muuttujina, koska kapealla teksti täyttää lähes koko
   leveyden — silloin soikio levitetään yli reunojen ja litistetään, jotta
   suoja osuu tekstiin eikä ylä-/alareunaan (ks. ≤860px).

   Kaksi lisäkerrosta erillisinä muuttujina, jotta ne SUMMAUTUVAT: aiemmin
   --light-photo ja --veil-center kirjoittivat molemmat koko backgroundin,
   joten kuva jolla olisi molemmat sai vain jälkimmäisen.

   Verho tummennetaan lämpimällä mustalla (--c-protect-rgb), EI keskiyöllä:
   keskiyö on 14.8.2026 alkaen sininen, mutta hero-kuvat ovat lämpimiä eikä
   niiden värilämpötilaa haluta kääntää (päätös 14.8.2026, ks. tokens.css). */
.hero .veil {
  position: absolute; inset: 0;
  --veil-rx: 52%;
  --veil-ry: 66%;
  --veil-none: linear-gradient(rgb(var(--c-protect-rgb) / 0), rgb(var(--c-protect-rgb) / 0));
  --veil-light: var(--veil-none);
  --veil-center: var(--veil-none);
  --veil-shape: radial-gradient(ellipse var(--veil-rx) var(--veil-ry) at 50% 48%,
      rgb(var(--c-protect-rgb) / .80) 0%,
      rgb(var(--c-protect-rgb) / .74) 50%,
      rgb(var(--c-protect-rgb) / .40) 78%,
      rgb(var(--c-protect-rgb) / 0)  100%);
  --veil-base: linear-gradient(180deg,
      rgb(var(--c-protect-rgb) / .40) 0%,
      rgb(var(--c-protect-rgb) / .15) 42%,
      rgb(var(--c-protect-rgb) / .28) 74%,
      rgb(var(--c-protect-rgb) / .55) 100%);
  background: var(--veil-shape), var(--veil-center), var(--veil-light), var(--veil-base);
}
/* Vaalea kuva: tasainen lisätummennus koko alalle (kirkas taivas tms. veisi
   muuten myös reunatekstien — kuvaajamerkinnän ja kehyksen — kontrastin). */
.hero--light-photo .veil {
  --veil-light: linear-gradient(rgb(var(--c-protect-rgb) / .30), rgb(var(--c-protect-rgb) / .30));
}
/* Keskeltä vaalea kuva: soikiota vahvistetaan, reunat jätetään rauhaan. */
.hero--veil-center .veil {
  --veil-center: radial-gradient(ellipse var(--veil-rx) var(--veil-ry) at 50% 48%,
      rgb(var(--c-protect-rgb) / .22) 0%, rgb(var(--c-protect-rgb) / .16) 50%, rgb(var(--c-protect-rgb) / 0) 100%);
}
/* Tasainen tummennus ilman soikiota (15.9.2026, Aleksandran ikoni): soikio
   näkyi ikonin päällä tumma "anti-sädekehänä" tekstin takana. Tilalle yksi
   tasainen kerros koko kuvalle; pystyvaje (--veil-base) jää ennalleen.
   Alfa .68 on mitattu pikseleistä: heikoin kohta on sitaatti ikonin käden
   ja kultataustan päällä, 4.78:1 (1440 px) ja 5.14:1 (390 px), raja 4.5:1.
   Alfalla .65 työpöytä jäi 4.47:1:een. Älä kevennä ilman uutta mittausta. */
.hero--veil-flat .veil {
  --veil-shape: var(--veil-none);
  --veil-center: linear-gradient(rgb(var(--c-protect-rgb) / .68), rgb(var(--c-protect-rgb) / .68));
}
.hero img.bg { transition: opacity 700ms var(--ease-calm); }
.hero.is-swapping img.bg { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero img.bg { transition: none; } }

.hero .credit { position: absolute; right: 14px; bottom: 8px; z-index: 1; margin: 0;
  font-size: .75rem; letter-spacing: .04em; color: var(--c-mist); }
.hero .credit[hidden] { display: none; }
.hero .frame { position: absolute; inset: 28px; border: 1px solid rgba(250,244,232,.35); pointer-events: none; }
.hero .content { position: relative; padding: var(--sp-9) var(--sp-5); max-width: 780px; }
.hero .eyebrow { color: var(--c-candle); margin-bottom: var(--sp-4); font-size: .78rem; letter-spacing: .15em; }
.hero .eyebrow .line { display: inline-block; }
.hero .eyebrow .sep { color: var(--c-gold-l); padding: 0 .2em; }
.hero hr { margin: 0 auto var(--sp-5); }
.hero h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero); line-height: var(--lh-tight);
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-cream); }
.hero .cta-row { display: flex; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-6); flex-wrap: wrap; }
.hero .hero-verse { margin-top: var(--sp-5); font-family: var(--font-display); font-style: italic;
  font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.3; color: var(--c-mist);
  min-height: calc(1.3em + var(--sp-2) + 1.15rem); }
.hero .hv-src { display: block; margin-top: var(--sp-2); font-family: var(--font-body); font-style: normal;
  font-size: .72rem; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: rgba(250,244,232,.7); }
.hero .hv-src[hidden] { display: none; }

/* Sitaatit suomalaisiin lainausmerkkeihin CSS:stä (data pysyy puhtaana) */
.hero .hv-text::before, .hero .hv-text::after,
.quote-text p::before,  .quote-text p::after { content: "”"; }

#hero .hero-verse { transition: opacity 700ms var(--ease-calm) 0s,
                                transform 700ms var(--ease-calm) 0s; }
#hero .hero-verse.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #hero .hero-verse { transition: none; }
}

/* ============ PALVELUKSET (tumma) ============ */
.filters { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.chip { border: 1px solid var(--border-invert); border-radius: var(--radius-pill); padding: 4px 14px;
  font-size: var(--fs-meta); color: var(--c-mist); background: none; cursor: pointer; font-family: inherit; }
.chip[aria-pressed="true"] { background: var(--c-candle); border-color: var(--c-candle); color: var(--c-midnight); font-weight: 600; }
.svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.svc-card { border: 1px solid var(--border-invert); padding: var(--sp-5); transition: border-color var(--dur-fade) var(--ease-calm); }
.svc-card:hover { border-color: var(--border-gold); }
.svc-day { font-family: var(--font-display); font-style: italic; font-size: 1.21rem; color: var(--c-mist); }
.svc-date { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--c-cream); margin: 2px 0 var(--sp-3); }
.svc-name { font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--c-candle); }
.svc-place { color: var(--c-mist); font-size: var(--fs-meta); margin: var(--sp-2) 0 var(--sp-3); }
.badge { display: inline-block; border: 1px solid var(--border-gold); color: var(--c-gold-l); border-radius: var(--radius-pill);
  padding: 2px 12px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; }

/* ============ TAPAHTUMAKORTIT (vaalea) ============
   Kortti on sama komponentti kuin tumman kaistan .svc-card, vain toisella
   pohjalla: hento reunus joka reunalla ja hoverissa pelkkä reunuksen
   sävynvaihto. Vasemman reunan kultapalkki ja hover-varjo poistettiin
   24.8.2026 — ne tekivät tapahtumakorteista painavammat kuin
   palveluskorteista, vaikka osiot ovat rinnakkaiset. */
.ev-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); }
.ev-card { background: var(--c-cream); border: 1px solid var(--border-soft); padding: var(--sp-5);
  transition: border-color var(--dur-fade) var(--ease-calm); }
/* Hoverissa umpinainen kulta, ei --border-gold: pergamentilla läpikuultava
   kulta (alfa .55) latistuu sävyyn 214,185,136, joka on käytännössä yhtä
   vaalea kuin lepotilan reunus 210,205,194 (kontrasti 1.19) — muutos ei
   erottunut. Umpinainen #B8893A nostaa suhteen 1.98:aan ja jää silti
   selvästi kevyemmäksi kuin "Seuraavaksi"-kortin syvä kulta (4.31). */
.ev-card:hover { border-color: var(--c-gold); }
.ev-card .svc-day { color: var(--c-smoke); }
.ev-card .svc-date { color: var(--c-ink); }
.ev-card .svc-name { color: var(--c-gold-d); text-transform: none; letter-spacing: 0; font-size: var(--fs-body); }
.ev-card .svc-place { color: var(--c-smoke); margin-bottom: 0; }

/* ============ KORTTIEN PAIKKARIVI JA LISÄTIEDOT ============
   Jaettu palvelus- ja tapahtumakorteille (ort-lohkot). */
/* Karttaneula erottaa paikkatiedon muusta metatiedosta. Vanha markup ilman
   ikonia (staattiset patternit) toimii yhä: flex ei muuta pelkkää tekstiä. */
.svc-place { display: flex; align-items: flex-start; gap: 6px; }
.svc-place .pin { flex: none; width: 13px; height: 13px; margin-top: 3px;
  fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .75; }
/* Vakiopaikan karttalinkki ei erotu tekstinä muista paikkariveistä:
   neula on vihje, alleviivaus ei kuulu tyyliin. Hover kertoo linkin. */
.svc-place a { color: inherit; text-decoration: none; }
.svc-place a:hover { color: var(--c-candle); }
.ev-card .svc-place a:hover { color: var(--c-gold-d); }

/* Lisätiedot: tekstistä näkyy aina enintään kaksi riviä. theme.js mittaa,
   katkesiko teksti, ja paljastaa vain silloin oikean alakulman väkäsen
   (is-clamped tulee JS:stä — ilman JS:ää teksti näkyy kokonaan eikä
   väkästä näytetä). Koko kortti toimii avaajana (has-more → pointer). */
.svc-card, .ev-card { position: relative; }
.svc-card.has-more, .ev-card.has-more { cursor: pointer; }
.svc-note { margin-top: var(--sp-2); }
.note-text { margin: 0; font-size: var(--fs-meta); color: var(--c-mist); }
.ev-card .note-text { color: var(--c-smoke); }
.svc-note.is-clamped:not(.is-open) .note-text { display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Väkänen on kortin oikeassa alakulmassa; tekstille varataan sen kohdalta
   tilaa oikealta, etteivät rivit juokse ympyrän alle. */
.svc-card.has-more .note-text, .ev-card.has-more .note-text { padding-right: 44px; }
/* display: flex ohittaisi selaimen [hidden]-säännön — palautetaan se. */
.note-toggle[hidden] { display: none; }
.note-toggle { position: absolute; bottom: var(--sp-2); right: var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; cursor: pointer; padding: 0; background: none;
  border: 1px solid var(--border-gold); border-radius: var(--radius-pill);
  color: var(--c-gold-l);
  transition: color var(--dur-fade) var(--ease-calm), border-color var(--dur-fade) var(--ease-calm); }
.note-toggle:hover, .svc-card.has-more:hover .note-toggle { color: var(--c-candle); border-color: var(--c-candle); }
.ev-card .note-toggle { color: var(--c-gold-d); }
.ev-card .note-toggle:hover, .ev-card.has-more:hover .note-toggle { color: var(--c-ember); border-color: var(--c-gold-d); }
.note-toggle .nt-chev { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; transition: transform var(--dur-fade) var(--ease-calm); }
.svc-note.is-open .note-toggle .nt-chev { transform: rotate(180deg); }
.note-toggle:focus-visible { outline: 2px solid var(--c-candle); outline-offset: 2px; }
.ev-card .note-toggle:focus-visible { outline-color: var(--c-gold-d); }
.svc-note.is-open .note-text { animation: note-open 240ms var(--ease-calm); }
@keyframes note-open { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .note-toggle .nt-chev { transition: none; }
  .svc-note.is-open .note-text { animation: none; }
}

/* ============ KORTTISELAUS (nuolinapit korttirivin alla) ============
   Yhteinen palvelus- ja tapahtumakorteille. Rivi on palvelimella
   hidden-attribuutilla; theme.js paljastaa sen vain kun sivuja on
   enemmän kuin yksi. Sävyt: tummalla kaistalla .btn-ghostin logiikka,
   vaalealla .btn-linen. */
/* Selaimen paikka on korttien YLÄPUOLELLA oikeassa reunassa: korttien
   korkeus vaihtelee sivun mukaan, ja alalaidassa napit hyppäisivät joka
   selauksella eri kohtaan. Palvelusosiossa selain jakaa cards-toolbar-rivin
   paikkakuntasuodattimien kanssa; uutis- ja tapahtumaosioissa se istuu
   suoraan otsikkorivillä kaikki-linkin vieressä (.sec-actions) eikä vie
   omaa riviään. */
.cards-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.cards-toolbar .filters { margin-bottom: 0; }
.cards-toolbar .card-nav { margin-left: auto; }
.card-nav { display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-3); }
.card-nav[hidden] { display: none; }
.card-nav-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: var(--radius-pill);
  border: 1px solid var(--border-invert); background: none; color: var(--c-cream);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-fade) var(--ease-calm), color var(--dur-fade) var(--ease-calm),
              background-color var(--dur-fade) var(--ease-calm), opacity var(--dur-fade) var(--ease-calm); }
.card-nav-btn:hover:not(:disabled) { border-color: var(--c-candle); color: var(--c-candle); }
.card-nav-btn:focus-visible { outline: 2px solid var(--c-candle); outline-offset: 2px; }
.card-nav-btn:disabled { opacity: .32; cursor: default; }
.card-nav-count { font-size: var(--fs-meta); color: var(--c-mist); letter-spacing: .08em;
  font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: center; }
/* Vaalea kaista — syvä kulta kuten .btn-line */
.light-band .card-nav-btn { border-color: var(--c-gold-d); color: var(--c-gold-d); }
.light-band .card-nav-btn:hover:not(:disabled) { background: rgba(184,137,58,.10);
  border-color: var(--c-gold-dd); color: var(--c-gold-dd); }
.light-band .card-nav-btn:focus-visible { outline-color: var(--c-gold-d); }
.light-band .card-nav-count { color: var(--c-smoke); }
@media (prefers-reduced-motion: reduce) {
  .card-nav-btn { transition: none; }
}

/* ============ TEHTÄVÄKORTIT ============ */
.tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); }
.task { background: var(--c-dome-green-d); border: 1px solid rgba(250,244,232,.14); padding: var(--sp-6);
  text-decoration: none; color: var(--c-cream); display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color var(--dur-fade) var(--ease-calm), box-shadow var(--dur-fade) var(--ease-calm); }
.task:hover { border-color: var(--border-gold); box-shadow: var(--shadow-card); color: var(--c-cream); }
.task .star-sep { font-size: 1.1rem; color: var(--c-ochre); }
.task h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--c-cream); }
.task p { color: rgba(250,244,232,.82); font-size: var(--fs-meta); line-height: var(--lh-normal); }
.task .go { margin-top: auto; padding-top: var(--sp-4); color: var(--c-ochre); font-weight: 600;
  font-size: var(--fs-meta); }
.task:hover .go { color: var(--c-candle); }
.task:focus-visible { outline: 2px solid var(--c-gold-d); outline-offset: 3px; }
.light-band a.task { color: var(--c-cream); }

/* ============ UUTISET — Query Loop ============
   Prototyypin .card-ulkoasu sovitettuna core Query Loopin markupille:
   ul.news > li.wp-block-post > [featured-image, .txt]. Koko kortin
   klikattavuus: otsikkolinkin ::after venytetään kortin päälle. */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5);
  list-style: none; margin: 0; padding: 0; }
.news > li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-ink-soft); }
.news .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; height: 100%; }
.news .wp-block-post-featured-image a { display: block; height: 100%; }
.news .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms var(--ease-calm); }
.news > li::after { content: ""; position: absolute; inset: 0; background: var(--protect-medium); pointer-events: none; }
.news > li::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--c-protect-rgb) / .10) 0%, rgb(var(--c-protect-rgb) / .20) 60%, rgb(var(--c-protect-rgb) / .28) 100%);
  transition: opacity 700ms var(--ease-calm); }
.news > li:hover::before, .news > li:focus-within::before { opacity: 1; }
.news > li:hover img, .news > li:focus-within img { transform: scale(1.05); }
.news .txt { position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); z-index: 2;
  transition: transform 700ms var(--ease-calm); }
.news > li:hover .txt, .news > li:focus-within .txt { transform: translateY(-4px); }
.news .txt .wp-block-post-date { color: var(--c-candle); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-family: var(--font-body); }
.news .txt .wp-block-post-date a { color: inherit; text-decoration: none; }
.news .wp-block-post-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15;
  color: var(--c-cream); margin: var(--sp-2) 0 var(--sp-3); }
.news .wp-block-post-title a { color: inherit; text-decoration: none; }
.news .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.news .txt hr.goldline { margin: 0; transform-origin: 0 50%; transition: transform 900ms var(--ease-calm); }
.news > li:hover hr.goldline, .news > li:focus-within hr.goldline { transform: scaleX(1.5); }
/* Ingressi liukuu esiin hoverissa ja fokusoitaessa: kortti kertoo otsikon
   lisäksi jutun ensimmäiset rivit. Vain osoitinlaitteilla — kosketuksella
   vihjettä ei ole, ja koko teksti on joka tapauksessa artikkelisivulla.
   .txt on ankkuroitu alas, joten avautuva ingressi työntää otsikkoa
   ylöspäin ja kultaviiva pysyy paikallaan. */
.news .news-intro { display: none; }
@media (hover: hover) {
  .news .news-intro {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0; max-height: 0; opacity: 0;
    color: var(--c-mist); font-size: var(--fs-meta); line-height: 1.5;
    transition: max-height 700ms var(--ease-calm), opacity 700ms var(--ease-calm),
      margin 700ms var(--ease-calm);
  }
  .news > li:hover .news-intro, .news > li:focus-within .news-intro {
    max-height: 4.6em; opacity: 1; margin: 0 0 var(--sp-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .news .wp-block-post-featured-image img, .news > li::before, .news .txt, .news .txt hr.goldline,
  .news .news-intro { transition: none; }
  .news > li:hover img, .news > li:hover .txt, .news > li:hover hr.goldline { transform: none; }
}

/* ============ TULE TUTUSTUMAAN (#tutustu) ============ */
.tutustu { background: var(--c-dome-green-d); color: var(--c-cream); padding: var(--sp-7) 0; }
.tutustu .sec-head { margin-bottom: var(--sp-5); }
.tutustu .sec-head .eyebrow { color: var(--c-ochre); }
.tutustu .sec-head h2 { color: var(--c-cream); }
.tutustu .goldline { background: var(--c-ochre); opacity: .7; }
.tutustu-grid { display: grid; grid-template-columns: .85fr 1.3fr .85fr; gap: var(--sp-6); align-items: start; }
/* Tule tutustumaan -osio on 9.9.2026 alkaen myös vieraskielisellä
   etusivulla, ja siellä pisin sana on paljon pidempi kuin suomeksi.
   Yhden palstan ruudukossa (≤860px) ruudukon kohteen vähimmäisleveys on
   sen min-content-leveys, joten kreikan pitkät sanat työnsivät osion
   viewportin yli: /el/ mitattuna 361 px 320 pikselin näytöllä. min-width: 0
   irrottaa kohteen tuosta vähimmäisleveydestä ja overflow-wrap katkaisee
   sanan vasta, kun se ei muuten mahdu riville. Suomenkielisellä sivulla
   kumpikaan ei muuta mitään — siellä sisältö mahtuu jo. */
.tutustu-grid > * { min-width: 0; }
.tutustu-grid h3, .tutustu-grid p, .tutustu-grid figcaption { overflow-wrap: break-word; }
.tutustu-photo { position: relative; overflow: hidden; align-self: stretch; min-height: 240px; margin: 0; }
.tutustu-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 40% 42%; }
.tutustu-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--c-protect-rgb) / .10), rgba(46,71,56,.35)); }
.tutustu-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--sp-3) var(--sp-4); font-size: .72rem; letter-spacing: .04em;
  color: var(--c-cream); background: linear-gradient(180deg, rgb(var(--c-protect-rgb) / 0), rgb(var(--c-protect-rgb) / .75)); }
.tutustu-lead { font-size: var(--fs-lead); font-family: var(--font-display); font-style: italic;
  line-height: 1.4; color: var(--c-cream); }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: var(--sp-3) 0; border-top: 1px solid rgba(250,244,232,.18); }
.facts li:last-child { border-bottom: 1px solid rgba(250,244,232,.18); }
.facts h3 { font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--c-ochre);
  margin-bottom: var(--sp-2); }
.facts p { color: rgba(250,244,232,.85); }
.facts p + p { margin-top: var(--sp-3); }
.tutustu p a { color: var(--c-ochre); text-decoration: underline; text-underline-offset: 3px; }
.tutustu p a:hover { color: var(--c-candle); }
.tutustu a:focus-visible { outline: 2px solid var(--c-ochre); outline-offset: 2px; }
.tutustu-course { border: 1px solid rgba(232,200,120,.45); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.tutustu-course .eyebrow { color: var(--c-ochre); }
.tutustu-course h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);
  line-height: 1.15; color: var(--c-cream); }
.tutustu-course .nb { white-space: nowrap; }
/* Katkeamaton rivi on suomen typografinen valinta: ”Minustako ortodoksi?”
   ei saa katketa keskeltä lainausta. Käännöksissä sama fraasi on pidempi,
   ja kolmen palstan ruudukossa kreikan «Μήπως να γίνω ορθόδοξος;» työnsi
   koko sivun yli viewportin 1181–1290 pikselin leveydellä (mitattuna
   9.9.2026, kun osio tuli vieraskieliselle etusivulle). Vaakavieritys koko
   sivulla on pahempi vika kuin kahdelle riville taittuva otsikko, joten
   nowrap koskee vain suomea. Valitsin on sivun lang-määre, ei leveys:
   ongelma tulee kielestä eikä näytöstä. */
:root:not([lang|="fi"]) .tutustu-course .nb { white-space: normal; }
.tutustu-course p { color: rgba(250,244,232,.85); font-size: var(--fs-meta); }
.tutustu-course .btn { background: var(--c-ochre); color: var(--c-ink); margin-top: var(--sp-2); }
.tutustu-course .btn:hover { background: var(--c-candle); color: var(--c-ink); }
.tutustu-course a:focus-visible { outline-color: var(--c-ochre); }
.tutustu-more { display: inline-block; margin-top: var(--sp-4); color: var(--c-ochre);
  font-weight: 600; font-size: var(--fs-meta); text-decoration: none; }
.tutustu-more:hover { color: var(--c-candle); }
.tutustu a.tutustu-more, .tutustu .tutustu-course a.btn { color: var(--c-ink); }
.tutustu a.tutustu-more { color: var(--c-ochre); }
@media (max-width: 1180px) {
  .tutustu-grid { grid-template-columns: 1fr 1fr; }
  .tutustu-photo { grid-column: 1 / -1; min-height: 260px; }
}
@media (max-width: 860px) {
  .tutustu { padding: var(--sp-7) 0; }
  .tutustu-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .tutustu-photo { min-height: 200px; }
}

/* ============ SITAATTIKAISTA ============ */
.quote-band {
  background: var(--c-vigil-deep);
  border-top: 1px solid rgba(184,137,58,.22);
  border-bottom: 1px solid rgba(184,137,58,.22);
  padding: var(--sp-8) 0;
}
.quote-figure {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-7); flex-wrap: wrap; max-width: 820px; margin: 0 auto;
}
.lamp { flex: none; }
.lamp-svg { width: 56px; height: auto; display: block; overflow: visible; }
.quote-text { max-width: 44ch; min-height: 7.2em; display: flex;
  flex-direction: column; justify-content: center; }
.quote-text p {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.45; color: var(--c-cream);
  text-wrap: balance;
}
.quote-text figcaption { margin-top: var(--sp-4); }
.quote-text cite {
  font-family: var(--font-body); font-style: normal; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--c-mist);
}
.lamp-svg .halo { opacity: .38; animation: halo-breathe 6s ease-in-out infinite; }
.lamp-svg .flame { transform-origin: 40px 73px; animation: flame-sway 5s ease-in-out infinite; }
.lamp-svg .f-core { transform-origin: 40px 71px; animation: core-flicker 3.4s ease-in-out infinite; }
@keyframes flame-sway {
  0%   { transform: rotate(0deg) scaleY(1); }
  23%  { transform: rotate(-1.4deg) scaleY(.985); }
  41%  { transform: rotate(1deg) scaleY(1.015); }
  62%  { transform: rotate(-.6deg) scaleY(.995); }
  81%  { transform: rotate(1.2deg) scaleY(1.01); }
  100% { transform: rotate(0deg) scaleY(1); }
}
@keyframes halo-breathe { 0%, 100% { opacity: .3; } 37% { opacity: .52; } 71% { opacity: .36; } }
@keyframes core-flicker {
  0%, 100% { opacity: .75; transform: scaleY(1); }
  30% { opacity: .95; transform: scaleY(1.05); }
  64% { opacity: .7;  transform: scaleY(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .lamp-svg .halo, .lamp-svg .flame, .lamp-svg .f-core { animation: none; }
}
@media (max-width: 860px) {
  .quote-band { padding: var(--sp-7) 0; }
  .quote-figure { flex-direction: column; gap: var(--sp-5); text-align: center; }
  .lamp-svg { width: 46px; }
}

/* ============ KIRKKOKALENTERI + KIRKON UUTISET (pari) ============ */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: stretch; }
/* Kuvaton peruskortti mustalla kaistalla, sama asu kuin viereisellä
   uutiskortilla (.ort-news): ohut vaalea reunus, ei täyttöväriä.
   Okra-eyebrow, kermaotsikko, okrapainike. */
.saint { border: 1px solid var(--border-invert); display: flex; }
.saint .txt { padding: var(--sp-6); display: flex; flex-direction: column;
  align-items: flex-start; flex: 1; }
.saint .eyebrow { color: var(--c-ochre); font-size: 0.9375rem; }
.saint h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.1;
  text-transform: uppercase; letter-spacing: .04em; color: var(--c-cream); margin: var(--sp-2) 0 var(--sp-3); }
.saint p { font-family: var(--font-display); font-style: italic; color: var(--c-mist); }
.saint .saint-lisat { font-size: var(--fs-lead); color: var(--c-cream); }
.saint .saint-meta { font-family: var(--font-body); font-style: normal; font-size: var(--fs-meta);
  color: rgba(250, 244, 232, .7); margin-top: var(--sp-3); }
.saint .saint-toimet { margin-top: auto; padding-top: var(--sp-5); }
.saint .btn { background: var(--c-ochre); color: var(--c-ink); font-family: var(--font-body);
  font-size: var(--fs-meta); font-style: normal; }
.saint .btn:hover { background: var(--c-candle); color: var(--c-ink); }
.saint a:focus-visible { outline-color: var(--c-ochre); }

/* Juhlapäivinä kortissa on ikonikuva (ort/paivan-pyha valitsee kuvan
   päivän mukaan, ks. paivan-pyha-kuvat.php) ja sen alla lähderivi.
   Kääre pitää kortin ja lähderivin yhdessä .duo-ruudukon solussa. */
.saint-solu { display: flex; flex-direction: column; min-width: 0; }
.saint-solu .saint { flex: 1; }
.saint-kredit { margin-top: var(--sp-2); font-size: .72rem; letter-spacing: .02em;
  font-style: italic; color: var(--c-mist); }
.saint-img { position: relative; overflow: hidden; border: 0; min-height: 360px; }
/* Kerrokset numeroituina, koska niitä on nyt kolme ja kahdella niistä on
   oma tausta: kuva (0) → suojagradientti (1) → tekstilaatikko taustoineen
   (2). Aiemmin järjestys tuli pelkästä lähdejärjestyksestä. */
.saint-img img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; z-index: 0; }
/* Suojaus kaksiosaisena (muutos 13.8.2026), samalla periaatteella kuin
   herossa: suoja on siellä missä teksti on, ei koko kuvan päällä. Ennen
   koko kortin päällä oli --protect-strong (0.55 → 0.92), joka tummensi
   ikonin yläosankin.

   1. Kortin oma kerros (::after) on enää kevyt pohjatummennus, joka
      erottaa kortin ympäristöstä ja pitää alalaidan tummana.
   2. Tekstilaatikko (.txt) kantaa oman kaistansa: läpinäkyvä yläreunassa,
      täysi voimakkuus eyebrow-rivin kohdalla. Koska .txt on tekstin
      korkuinen (align-self: flex-end), kaista seuraa tekstin määrää —
      vähätekstisillä korteilla ikonia näkyy enemmän.

   Häivytysmatka on --saint-feidi + laatikon oma yläpehmuste, yhteensä
   noin neljännes kortin korkeudesta. Matka otetaan tekstilaatikon
   YLÄPUOLELTA: yläpehmustetta kasvatetaan ja sama määrä otetaan pois
   negatiivisella ylämarginaalilla, jolloin laatikko venyy ylöspäin mutta
   sen asettelutila — ja siis tekstin paikka ja kortin korkeus — ei muutu.
   Näin feidin pituutta voi säätää koskematta tekstin kohdalla olevaan
   suojaan.

   Yhteisvaikutus tekstin kohdalla vastaa entistä (eyebrow-rivillä ~0.66,
   alareunassa ~0.93), ikonin päällä vain ~0.15–0.25. Mitattu kaikkien 26
   ikonikortin pikseleistä (tools/mittaus/saint-kontrasti.js); heikoin
   kohta on eyebrow-rivi. Älä vaalenna ilman uutta mittausta.

   Kuten herossa, suoja on lämmintä mustaa (--c-protect-rgb) eikä sinistä
   keskiyötä: ikonit ovat lämpimiä ja sininen suoja viilentäisi ne. */
.saint-img { --saint-feidi: 90px; }
.saint-img::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgb(var(--c-protect-rgb) / .14) 0%,
    rgb(var(--c-protect-rgb) / .20) 45%,
    rgb(var(--c-protect-rgb) / .42) 100%); }
.saint-img .txt { position: relative; z-index: 2; align-self: flex-end;
  padding-top: calc(var(--sp-6) + var(--saint-feidi));
  margin-top: calc(-1 * var(--saint-feidi));
  background: linear-gradient(180deg,
    rgb(var(--c-protect-rgb) / 0)   0,
    rgb(var(--c-protect-rgb) / .66) calc(var(--saint-feidi) + 34px),
    rgb(var(--c-protect-rgb) / .78) 62%,
    rgb(var(--c-protect-rgb) / .88) 100%); }

/* "Avaa kirkkokalenteri" kortin oikeaan alanurkkaan, teksti kiertää sen
   (muutos 13.8.2026). Ennen nappi vei oman rivinsä tekstin alta ja söi
   kuvasta ~70 px. Nyt nappi on irrotettu tekstivirrasta (absoluuttinen,
   .txt on position: relative) ja sen tila varataan kellukkeella, joka
   liitetään nappia edeltävän elementin loppuun. Kelluke asettuu tekstin
   viimeiselle riville, jos siihen mahtuu, muuten omalle rivilleen: näin
   viimeiset rivit kulkevat napin vasemmalla puolella ja pidemmät rivit
   sen yli. flow-root pakottaa edeltävän elementin sisältämään kellukkeen,
   jolloin sen alareuna — ja siten napin yläreuna — osuu oikeaan kohtaan.

   Varaus on kiinteä mitta: nappi ei kutistu sitä pienemmäksi eikä pilkkoudu
   riveille (min-width + nowrap). Jos napin tekstiä muutetaan tai lohko
   käännetään, mittaa uusi leveys ja päivitä --saint-nappi-lev. */
.saint-img { --saint-nappi-lev: 12.5rem; --saint-nappi-kork: 3.4rem; }
.saint-img .saint-toimet { position: absolute; right: var(--sp-6); bottom: var(--sp-6);
  margin: 0; padding: 0; }
.saint-img .txt > :has(+ .saint-toimet) { display: flow-root; margin-bottom: 0; }
.saint-img .txt > :has(+ .saint-toimet)::after { content: ""; float: right;
  width: var(--saint-nappi-lev); height: var(--saint-nappi-kork); margin-left: var(--sp-5); }
.saint-img .btn { min-width: var(--saint-nappi-lev); text-align: center; white-space: nowrap; }
.saint-img .eyebrow, .saint-img h3, .saint-img .saint-lisat, .saint-img .saint-meta {
  text-shadow: 0 1px 8px rgb(var(--c-protect-rgb) / .7); }
.saint-img .saint-meta { color: rgba(250, 244, 232, .8); }
.saint-img .btn { background: none; border: 1px solid var(--border-invert); color: var(--c-cream); }
.saint-img .btn:hover { background: none; border-color: var(--c-candle); color: var(--c-candle); }
/* Kapealla näytöllä napin varaus veisi tekstiriviltä liki koko leveyden,
   joten nappi palaa tekstin alle omalle rivilleen. */
@media (max-width: 640px) {
  .saint-img .saint-toimet { position: static; margin-top: var(--sp-5); }
  .saint-img .txt > :has(+ .saint-toimet)::after { content: none; }
  .saint-img .btn { min-width: 0; white-space: normal; }
  /* Matalammalla kortilla feidi lyhenee samassa suhteessa. */
  .saint-img { --saint-feidi: 56px; }
}

.ort-news { border: 1px solid var(--border-invert); padding: var(--sp-6);
  display: flex; flex-direction: column; }
.ort-news .eyebrow { color: var(--c-candle); }
.ort-news h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);
  line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: var(--c-cream);
  margin: var(--sp-2) 0 var(--sp-3); }
.ort-news ul { list-style: none; margin-top: var(--sp-2); }
.ort-news li + li { border-top: 1px solid var(--border-invert); }
.ort-news li a { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: baseline; padding: var(--sp-3) 0; color: var(--c-cream); text-decoration: none;
  font-size: var(--fs-meta); line-height: 1.5; }
.ort-news li a:hover { color: var(--c-candle); }
.ort-news li a:hover .star-sep { color: var(--c-candle); }
.ort-news .star-sep { font-size: .7rem; }
.ort-news .t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ort-news .more { margin-top: auto; padding-top: var(--sp-5); color: var(--c-gold-l);
  font-size: var(--fs-meta); font-weight: 600; text-decoration: none; }
.ort-news .more:hover { color: var(--c-candle); }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .ort-news .t { display: block; overflow: visible; }
}
/* Puhelin: kortin otsikko mitoitetaan niin, että "AJANKOHTAISTA" mahtuu
   riville kokonaan myös silloin, kun kävijä on suurentanut selaimen
   tekstikokoa. 320 pikselin näytöllä kortin sisäleveys oli 206 px ja sana
   178 px eli 86 % — vara loppui kesken heti ensimmäisestä askeleesta.
   Pehmuste 32 → 24 px ja otsikko 20 → 18 px vievät sanan 152 pikseliin
   224:stä (68 %), joten teksti kestää noin 1,4-kertaisen suurennuksen
   ennen kuin tavutus astuu kuvaan. Silmäripsin harvennus .18 → .10em
   samasta syystä: "SUOMEN ORTODOKSINEN" oli 204 px 206:sta. */
@media (max-width: 480px) {
  .ort-news { padding: var(--sp-5); }
  .ort-news h3 { font-size: 1.125rem; letter-spacing: .03em; }
  .ort-news .eyebrow { letter-spacing: .10em; }
}

/* ============ SEURAKUNNAN ALUE ============ */
.alue-grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: var(--sp-7); align-items: center; }
.alue-map { margin: 0; }
/* Kartan pohja ja reunahäivytykset ovat CSS:ssä, eivät SVG:ssä (muutos
   14.8.2026). Ennen ne olivat kartan sisällä kovakoodattuna, jolloin tumman
   kaistan sävyn vaihtaminen jätti kartan ympärille erivärisen suorakulmion.
   Nyt kumpikin tulee tokenista, joten kartta seuraa keskiyötä.
   Mitat vastaavat entisiä SVG-häivytyksiä: oikea reuna 70/1000 = 7 %,
   ylä- ja alareuna 56/784,6 = 7,1 %. */
.map-box { position: relative; max-width: min(100%, 663px); margin: 0 auto;
  background: var(--c-midnight); }
.map-box > img { display: block; width: 100%; height: auto; }
.map-box::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to left,   var(--c-midnight) 0, transparent 7%),
    linear-gradient(to bottom, var(--c-midnight) 0, transparent 7.1%),
    linear-gradient(to top,    var(--c-midnight) 0, transparent 7.1%); }
/* Merkinnät häivytyksen päälle: ilman z-indeksiä ne piirtyisivät sen alle,
   koska ::after on lähdejärjestyksessä viimeinen. */
.map-credit, .map-town, .poi { z-index: 1; }
.map-credit { position: absolute; right: 2px; bottom: 0; margin: 0;
  font-size: 0.6875rem; color: var(--c-mist); opacity: .75; letter-spacing: .02em; }
.map-town { position: absolute; transform: translate(0, -50%); pointer-events: none;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem); letter-spacing: .01em; color: var(--c-cream);
  text-shadow: 0 0 8px var(--c-midnight), 0 1px 3px var(--c-midnight), 0 0 3px var(--c-midnight); }
.map-town--r { transform: translate(-100%, -50%); }
.poi { position: absolute; transform: translate(-50%, -50%); }
.poi-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  background: none; border: 0; cursor: pointer; text-decoration: none; }
.dark-band a.poi-btn { color: var(--c-candle); }
.poi-btn svg { width: 34px; height: 34px; transition: transform 160ms var(--ease-calm);
  /* Merkit ovat kartan päällä, jonka pohja on keskiyö (alue-kartta.svg) —
     siksi varjo on keskiyötä, ei valokuvasuojaa. */
  filter: drop-shadow(0 0 5px rgb(var(--c-midnight-rgb) / .95)); }
.poi--mid .poi-btn { width: 40px; height: 40px; }
.poi--mid .poi-btn svg { width: 28px; height: 28px; }
.poi--small .poi-btn { width: 28px; height: 28px; }
.poi--small .poi-btn svg { width: 19px; height: 19px; }
.dark-band a.poi-btn:hover, .dark-band .poi.open a.poi-btn { color: var(--c-gold-l); }
.dark-band a.poi-btn:focus-visible { outline: 2px solid var(--c-candle); outline-offset: 2px; }
.poi--loan .poi-btn { width: 28px; height: 28px; opacity: .78; }
.dark-band .poi--loan a.poi-btn { color: var(--c-gold-l); }
.poi--loan .poi-btn svg { width: 16px; height: 16px; }
.dark-band .poi--loan a.poi-btn:hover,
.dark-band .poi--loan.hl a.poi-btn { opacity: 1; color: var(--c-candle); }
.poi.hl .poi-btn svg { transform: scale(1.3); }
.poi.hl::before { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(242,196,107,.85);
  box-shadow: 0 0 18px 4px rgba(242,196,107,.4), inset 0 0 12px rgba(242,196,107,.25); }
.poi--mid.hl::before { width: 46px; height: 46px; }
.poi--small.hl::before { width: 38px; height: 38px; }
.poi--loan.hl::before { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) {
  .poi-btn svg { transition: none; }
}
.poi-card { display: none; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: 240px; z-index: 5;
  background: var(--c-midnight); border: 1px solid var(--border-gold);
  padding: 10px 14px; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.poi-card strong { display: block; font-size: .8125rem; font-weight: 600;
  line-height: 1.35; color: var(--c-cream); }
.poi-card span { display: block; margin-top: 2px; font-size: .75rem; color: var(--c-mist); }
.poi-card .poi-go { display: inline-block; margin-top: 6px; font-size: .75rem;
  font-weight: 600; text-decoration: none; }
.poi:hover .poi-card, .poi:focus-within .poi-card, .poi.open .poi-card { display: block; }
.poi--below .poi-card { bottom: auto; top: calc(100% + 4px); }
.poi--right .poi-card { left: auto; right: -10px; transform: none; }
.poi--left .poi-card { left: -10px; transform: none; }
.alue-text p.lead { color: rgba(250,244,232,.88); max-width: 52ch; }
.alue-text .goldline { margin: var(--sp-4) 0; }
.legend { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2);
  margin: 0 0 var(--sp-5); padding: 0; font-size: var(--fs-meta); color: var(--c-mist); }
.legend li { display: flex; align-items: baseline; gap: var(--sp-3); }
.legend .sym { color: var(--c-candle); width: 1.3em; flex: none; text-align: center;
  position: relative; top: 2px; }
.legend .sym svg { width: 15px; height: 15px; }
.legend .sym-loan { color: var(--c-gold-l); opacity: .85; }
.legend .sym-loan svg { width: 13px; height: 13px; }
.legend strong { color: var(--c-cream); font-weight: 500; }
a.pyh-item { display: flex; align-items: baseline; gap: var(--sp-3); width: 100%;
  background: none; border: 0; padding: 3px 0; margin: 0; font: inherit;
  font-size: var(--fs-meta); color: var(--c-mist); text-align: left; cursor: pointer;
  text-decoration: none; }
a.pyh-item strong { color: var(--c-cream); font-weight: 500;
  transition: color var(--dur-fade) var(--ease-calm); }
a.pyh-item:hover { color: var(--c-mist); }
a.pyh-item:hover strong, a.pyh-item:focus-visible strong { color: var(--c-candle); }
a.pyh-item:focus-visible { outline: 2px solid var(--c-candle); outline-offset: 2px; }
a.loan-item { color: var(--c-cream); opacity: .9; text-decoration: none;
  border-bottom: 1px dotted rgba(250,244,232,.4);
  transition: color var(--dur-fade) var(--ease-calm); }
a.loan-item:hover, a.loan-item:focus-visible { color: var(--c-candle); opacity: 1;
  border-bottom-color: var(--c-candle); }
a.loan-item:focus-visible { outline: 2px solid var(--c-candle); outline-offset: 2px; }
.alue-more { margin-top: var(--sp-4); font-size: var(--fs-meta); }
.alue-more a { text-decoration: none; font-weight: 500; }
@media (max-width: 860px) {
  .alue-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .alue-map { order: -1; }
  .poi-card { max-width: 190px; }
}

/* ============ FOOTER ============ */
/* Footerin väri tulee kääreen .vigil-band-luokasta (patterns/footer.php). */
.site-footer { border-top: 1px solid var(--border-invert); padding: var(--sp-8) 0 var(--sp-7); }
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  justify-content: space-between; gap: var(--sp-6); }
.foot h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-size: 1.05rem; color: var(--c-gold-l); margin-bottom: var(--sp-3); }
/* line-height 1.75 (ei 1.7): .fs-meta-kokoisella tekstillä 1.7 antaa linkeille
   23,8 px korkeuden, kun WCAG 2.2 target-size vaatii 24. Ero on silmin
   huomaamaton, mutta ilman sitä jokainen footer-linkki on rike joka sivulla. */
.foot p, .foot a { color: var(--c-mist); font-size: var(--fs-meta); line-height: 1.75; }
.foot a { display: block; text-decoration: none; }
.foot p a { display: inline; }
.foot a:hover { color: var(--c-candle); }
.some { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.some a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border-gold);
  border-radius: 50%; color: var(--c-gold-l); }
.some a:hover { border-color: var(--c-candle); color: var(--c-candle); }
.some svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.province { border-top: 1px solid var(--border-invert); margin-top: var(--sp-7); padding-top: var(--sp-6);
  display: flex; justify-content: center; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.province a { display: flex; align-items: center; gap: var(--sp-4); text-decoration: none; color: var(--c-mist);
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.province a:hover { color: var(--c-cream); }
/* Vaakunat ilman valkoista lautasta: logot ovat läpinäkyviä ja lukeutuvat
   sellaisenaan tummalta pinnalta. Hoverissa kultainen hohde. */
.province .plate { width: 64px; height: 64px; display: grid; place-items: center; }
.province .plate img { max-height: 60px; width: auto; }
.province a { transition: color 500ms var(--ease-calm); }
.province .plate img {
  filter: drop-shadow(0 0 0 rgba(242,196,107,0));
  transition: filter 600ms var(--ease-calm);
}
.province a:hover .plate img, .province a:focus-visible .plate img {
  filter: drop-shadow(0 0 10px rgba(242,196,107,.55)) drop-shadow(0 0 22px rgba(242,196,107,.3));
}
@media (prefers-reduced-motion: reduce) {
  .province a, .province .plate { transition: none; }
}
.legal { margin-top: var(--sp-6); display: flex; justify-content: center; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-eyebrow); color: var(--c-mist); }
.legal a { color: var(--c-mist); text-decoration: none; opacity: .8; }
.legal a:hover { color: var(--c-candle); opacity: 1; }
.legal span { opacity: .5; }

/* ============ MOBIILI (≤860px) ============ */
/* ============ HEADERIN TAITTO (≤1180px): hampurilaisvalikko ============
   Erillinen taitekohta, koska kuuden kohdan vaakavalikko vaatii ~1110px.
   Muu sivusto (hero, kortit, footer) taittuu edelleen 860px:ssä. */
@media (max-width: 1180px) {
  .topbar { display: none; }
  .site-header .wrap { gap: var(--sp-4); }
  .logo-name { font-size: 1.05rem; }
  .logo-mark { width: 48px; height: 48px; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    margin-left: auto; min-height: 48px; min-width: 48px; padding: 10px 16px;
    background: none; border: 1px solid var(--border-invert); border-radius: var(--radius-ui);
    color: var(--c-cream); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
  .menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: var(--c-candle); color: var(--c-candle); }
  .menu-btn .icon { font-size: 1.25rem; line-height: 1; }
  .menu-btn:focus-visible { outline: 2px solid var(--c-candle); outline-offset: 2px; }
  .site-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    margin-top: var(--sp-3); border-top: 1px solid var(--border-invert); padding-top: var(--sp-4); }
  .site-menu.is-open { display: flex; }
  .menu-langs { display: block; margin-bottom: var(--sp-5); }
  .menu-langs .mm-label { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow); color: var(--c-candle); margin-bottom: var(--sp-3); }
  .menu-langs ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .menu-langs a { display: flex; align-items: center; justify-content: center; min-height: 44px;
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-invert); border-radius: var(--radius-ui);
    color: var(--c-cream); font-size: var(--fs-meta); text-decoration: none; }
  .menu-langs a:hover { border-color: var(--c-candle); color: var(--c-candle); }
  .menu-langs a[aria-current] { border-color: var(--c-candle); color: var(--c-candle); font-weight: 600; }
  .site-menu .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--border-invert); }
  .site-menu .site-nav li { border-bottom: 1px solid var(--border-invert); }
  .site-menu .site-nav a { display: flex; align-items: center; min-height: 52px;
    padding: var(--sp-3) var(--sp-2); font-size: var(--fs-body); color: var(--c-cream); }
  .site-menu .site-nav a:hover { color: var(--c-candle); }
  .site-menu .search-btn { margin-top: var(--sp-4); min-height: 48px; width: 100%;
    font-size: var(--fs-body); color: var(--c-cream); text-align: center; }
  .site-menu .subnav ul { display: block; border-top: 0; }
  .site-menu .subnav li { border-bottom: 0; }
  .site-menu .subnav li + li { border-top: 1px solid rgba(250,244,232,.08); }
  .site-menu .subnav a { min-height: 44px; padding-left: var(--sp-5);
    font-size: var(--fs-meta); color: var(--c-mist); }
  .site-menu .subnav a:hover { color: var(--c-candle); }
  .site-menu .site-nav > ul > li > a .caret { display: none; }
  .site-menu .subnav { border-top: 1px solid rgba(250,244,232,.08); }

  /* Avoin valikko: 861–1180px:ssä .site-top on sticky, ja valikko avautuu
     sen sisään. Näkymää korkeamman sticky-elementin yli jäävää osaa ei voi
     rullata — rulla vierittäisi vain taustasivua. Siksi avoin valikko
     lukitsee sivun rullauksen ja header rullaa itse itsensä. Samalla
     lasiefekti (is-scrolled, läpikuultava tausta + blur) vaihtuu peittävään
     pintaan, ettei taustan sisältö kuulla koko ruudun valikon läpi.
     theme.js togglaa html.menu-open-luokan; media query -rajaus purkaa
     lukon itsestään, jos ikkuna levenee valikon ollessa auki. */
  /* Lukko vain html-tasolle: body { overflow: hidden } tekisi bodystä
     sticky-asemoinnin vierityskontekstin, jolloin header karkaa näkymän
     yläpuolelle heti kun sivua on rullattu. */
  html.menu-open { overflow: hidden; }
  html.menu-open .site-top {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    background-color: var(--c-vigil);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Kirjautuneen admin-palkki (32px) työntää sticky-headerin alas */
  html.menu-open body.admin-bar .site-top { max-height: calc(100dvh - 32px); }
}

/* ============ KAPEA MOBIILI (≤600px): nappi logon riville ============
   Tekstillinen "☰ Valikko" ei mahtunut logon rinnalle alle 600px:ssä, joten
   se rivittyi omalle rivilleen ja söi ~64px pystytilaa joka sivun ylälaidasta.
   Sana säilytetään (päätös 13.8.2026) ja tila otetaan sen sijaan logosta:
   kuvamerkki 40px, nimi .88rem ja kolmelle riville taittuneena. Nappi
   kiristetään reunoista, ei kosketusalasta — min-height/min-width 48px
   pysyy.

   flex: 1 1 0 logolle on olennainen: flex-rivi katkeaa kohteiden
   sisältöleveyden mukaan, joten pelkkä kutistuminen (flex-shrink) ei estäisi
   nappia hyppäämästä uudelle riville. Nollaperusleveys tekee logosta
   rivinkatkaisun kannalta näkymättömän — se ottaa vain sen tilan, joka napin
   jälkeen jää, ja nimi taittuu sen mukaan. */
@media (max-width: 600px) {
  .site-header .wrap { gap: var(--sp-3); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .logo { flex: 1 1 0; min-width: 0; gap: 9px; }
  .logo-mark { flex: none; width: 40px; height: 40px; }
  .logo-name { font-size: .88rem; letter-spacing: .05em; }
  .menu-btn { flex: none; gap: 6px; padding: 10px 12px; }
  .menu-btn .icon { font-size: 1.1rem; }
}

/* ============ MUU MOBIILI (≤860px) ============ */
@media (max-width: 860px) {
  .hero .frame { display: none; }
  /* Kapealla teksti täyttää lähes koko leveyden: soikio levitetään reunojen
     yli (vaakasuoraa "ulkopuolta" ei juuri ole) ja litistetään, jotta vapaa
     tila ylä- ja alareunassa saa jäädä kirkkaaksi. */
  .hero .veil { --veil-rx: 105%; --veil-ry: 58%; }
  .hero .content { padding: var(--sp-8) var(--sp-4); max-width: 100%; }
  .hero .credit { right: 10px; bottom: 6px; font-size: .7rem; }
  .hero .eyebrow { font-size: .66rem; letter-spacing: .11em; line-height: 1.6; }
  .hero .eyebrow .line { display: block; }
  .hero .eyebrow .sep { display: none; }
  /* 10.5vw eikä 11vw: ilman tavutusta pisin sana "ORTODOKSINEN" määrää
     koon, ja 11vw:llä se oli 320 px:n ruudulla tasan palstan levyinen
     (mitattu 24.8.2026). Nollavara tarkoittaa, että pienikin ero
     kirjainmetriikassa katkaisisi sanan keskeltä. */
  .hero h1 { font-size: min(2.5rem, 10.5vw); }
  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn { text-align: center; }

  .band-section { padding: var(--sp-7) 0; }
  .sec-head { flex-direction: column; align-items: stretch; }
  .sec-head .btn { margin-bottom: 0; text-align: center; }
  /* Kalenterilinkki siirtyy korttien alle: kortit selattuaan ei tarvitse
     palata osion alkuun. Uutisosion "Kaikki uutiset" pysyy ylhäällä
     (sillä ei ole cta-paria). */
  .btn.cta-head { display: none; }
  .cta-foot { display: block; margin-top: var(--sp-5); }
  .cta-foot .btn { display: block; text-align: center; margin-bottom: 0; }
  /* Kapealla nuolet ja linkki jakavat rivin; jos linkin teksti ei mahdu
     yhdelle riville, koko nappi rivittyy nuolten alle täysleveänä
     (max-content-perusleveys estää tekstin katkeamisen napin sisällä). */
  .sec-head .sec-actions { flex-wrap: wrap; justify-content: flex-end; margin-bottom: 0; }
  .sec-head .sec-actions .btn { flex: 1 1 max-content; }

  /* Ilman JS:ää mobiilissa näkyy kolme korttia (lohko renderöi neljä).
     Kun theme.js on ottanut selauksen haltuunsa (.is-paged), rajaus tulee
     JS:ltä hidden-attribuutilla — silloin tämä sääntö väistyy. */
  .svc-cards:not(.is-paged) .svc-card:nth-child(n+4),
  .ev-cards:not(.is-paged) .ev-card:nth-child(n+4),
  .news:not(.is-paged) > li:nth-child(n+4) { display: none; }

  /* Vaakaselaus (JS päällä): korttilistat ovat kapealla yksi rivi, jota
     pyyhkäisy selaa; seuraavan kortin kurkistus reunassa kertoo jatkosta.
     Lista vuotaa wrapin reunukseen asti, ja scroll-padding palauttaa
     napsahtaneen kortin otsikoiden linjaan. Nuolet säilyvät ja rullaavat
     kortin kerrallaan (theme.js); sivunumero ei vastaa vapaata rullausta,
     joten se piilotetaan. Vierityspalkki on tarpeeton kurkistuksen ja
     nuolten rinnalla. */
  .svc-cards.is-paged, .ev-cards.is-paged, .news.is-paged {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sp-5);
    overscroll-behavior-x: contain;
    overflow-anchor: none; /* suodatus ei saa siirtää rullausta ankkuroimalla */
    margin-inline: calc(-1 * var(--sp-5));
    padding-inline: var(--sp-5);
    /* Rullausalue leikkaa pystysuunnassakin: Seuraavaksi-lipuke nousee
       9 px kortin yläreunan yli (.next-flag), joten sille varataan tila
       ja sama mitta perutaan marginaalista, ettei osion väli kasva. */
    padding-block-start: 10px;
    margin-block-start: -10px;
    scrollbar-width: none;
  }
  .svc-cards.is-paged::-webkit-scrollbar,
  .ev-cards.is-paged::-webkit-scrollbar,
  .news.is-paged::-webkit-scrollbar { display: none; }
  .svc-cards.is-paged .svc-card,
  .ev-cards.is-paged .ev-card,
  .news.is-paged > li {
    flex: 0 0 min(85%, 340px);
    scroll-snap-align: start;
  }
  /* Efekti 01 ei koske vaakaselauksen kortteja: läpinäkyvänä odottava
     kortti söisi kurkistusvihjeen (paljastuskynnys ei ylity ~12 %:n
     siivulla) ja translateY antaisi riville 16 px pystyperiksiannon
     (todettu 12.8.2026). Osion sisääntulo jää otsikkoriville; kortit
     ovat rivissä heti täysinäisinä. */
  .js-on .svc-cards.is-paged .rv,
  .js-on .ev-cards.is-paged .rv { opacity: 1; transform: none; transition: none; }
  .card-nav-count { display: none; }

  .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; }
  .filters { gap: var(--sp-3); }
  .foot a { padding: 10px 0; }
  .legal a { padding: 10px var(--sp-2); }
  .some a { width: 44px; height: 44px; }
  .duo > * { min-width: 0; }
  .province { gap: var(--sp-5); }
}

/* ============ ELÄVÖITYKSET ============ */
/* 01 — hiljainen sisääntulo */
.rv { opacity: 1; transform: none; }
.js-on .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms var(--ease-calm), transform 800ms var(--ease-calm);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js-on .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-on .rv { opacity: 1; transform: none; transition: none; }
}
/* 03 — hero-kuvan hidas elo (Ken Burns)
   50 s edestakainen zoomi: liikettä ei tietoisesti huomaa, mutta kuva ei ole
   kuollut. Vain transform ja nimenomaan img-elementissä — .hero-media on
   varattu parallaksille (efekti 14). Kuvaparin vaihtuessa (theme.js) sykli
   jatkuu keskeytymättä, koska animaatio ei ole sidottu src-attribuuttiin. */
.hero img.bg { animation: kenburns-drift 50s var(--ease-calm) infinite alternate; }
@keyframes kenburns-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07) translateY(-1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero img.bg { animation: none; }
}
/* 04 — kultaviivan piirtyminen */
.gl-draw { transform-origin: 0 50%; }
.gl-draw.from-center { transform-origin: 50% 50%; }
.js-on .gl-draw { transform: scaleX(0); transition: transform 1200ms var(--ease-calm) 200ms; }
.js-on .gl-draw.is-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js-on .gl-draw { transform: scaleX(1); transition: none; }
}
/* Tulostettaessa elävöitykset lepotilaan.
   Sisääntulo (.rv) alkaa opacity: 0:sta ja kultaviiva (.gl-draw) scaleX(0):sta;
   näkyviksi ne tuo vasta IntersectionObserver selauksen aikana. Tulostuksessa
   observeria ei ehdi laueta osioille, jotka eivät ole olleet ruudulla, joten
   etusivu tulostuu käytännössä tyhjänä. Pakotetaan lopputila. */
@media print {
  .js-on .rv,
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-on .gl-draw,
  .gl-draw { transform: scaleX(1) !important; transition: none !important; }
  .hero img.bg { animation: none !important; }
}
/* 05 — lasittuva sticky header
   HUOM: lohkoteemassa template part renderöityy <div class="wp-block-template-part">
   -kääreeseen, joka on vain headerin korkuinen. position: sticky liikkuu vain
   vanhempansa laatikon sisällä, joten kääre esti tarttumisen kokonaan.
   display: contents poistaa kääreen laatikon, jolloin .site-top on bodyn
   suora lapsi ja tarttuu koko sivun ajaksi (kuten prototyypissä). */
.wp-block-template-part { display: contents; }

@media (min-width: 861px) {
  .site-top {
    position: sticky;
    top: calc(-1 * var(--topbar-h, 0px));
    z-index: 60;
    background-color: var(--c-vigil);
    border-bottom: 1px solid rgba(184,137,58,0);
    transition: background-color 500ms var(--ease-calm), border-color 500ms var(--ease-calm);
  }
  .site-top.is-scrolled {
    background-color: rgb(var(--c-vigil-rgb) / .72);
    border-bottom-color: rgba(184,137,58,.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  /* Headerin kutistuminen poistettu 29.7.2026: se animoi padding-, width-,
     height- ja font-size-arvoja, eli teetti layoutin joka rullausruudulla —
     ja logon koon vaihtelu tökki. Header pysyy nyt samankokoisena ja vaihtaa
     vain pintansa; se on sekä rauhallisempi katsoa että ainoa tila, jossa
     rullaus ei tee muuta kuin sävynvaihdon (kaksi komposoitavaa arvoa). */
  @media (prefers-reduced-motion: reduce) {
    .site-top { transition: none; }
  }
}
/* Kirjautuneen admin-palkki työntää sticky-headerin alas */
body.admin-bar .site-top { top: calc(32px - var(--topbar-h, 0px)); }
/* 08 — "Seuraavaksi"-korostus
   Suodatetun joukon ensimmäinen kortti — seuraava palvelus ja seuraava
   tapahtuma — saa kultareunuksen ja lipukkeen. Palvelin merkitsee kortin 0;
   theme.js siirtää merkinnän, kun paikkakuntasuodatin vaihtaa joukon.
   Merkintä seuraa dataa eikä näkymää: jos seuraava palvelus on selauksessa
   toisella sivulla, korostus on siellä missä korttikin.
   Korostus on staattinen — ei hehkua eikä sykettä (päätös 28.7.2026). */
.svc-card.is-next, .ev-card.is-next { position: relative; }
/* Tummalla kaistalla pelkkä kultareunus riittää: kynttilänkeltainen viiva
   erottuu mustaa vasten jo sellaisenaan, ja hehku tekisi siitä huutavan.
   Ei ::after-kehystä, ei animaatiota — ei myöskään jatkuvaa piirtokuormaa. */
.svc-card.is-next { border-color: var(--c-gold-l); }
/* Vaalealla sama kevyt keino kuin tummalla: reunuksen väri vaihtuu
   hennosta umpinaiseen kultaan. Syvä kulta erottuu pergamentilta samalla
   tavalla kuin kynttilänkeltainen mustalta — kehystä tai varjoa ei tarvita. */
.ev-card.is-next { border-color: var(--c-gold-d); }
.next-flag { position: absolute; top: -9px; left: var(--sp-5); z-index: 1;
  padding: 0 var(--sp-2); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; }
/* Palveluskortit ovat vigilia-mustalla kaistalla, joten lipuke on samaa
   mustaa — muuten se erottuisi kaistasta omana sinisenä läikkänään. */
.svc-card .next-flag { background: var(--c-vigil); color: var(--c-candle); }
/* Hiillos jää tarkoituksella: työnjako vaalealla pinnalla on syvä kulta =
   aksentti (linkit, reunat, medaljongit, painikkeet), hiillos = huomiomerkki
   (tämä lipuke, kalenterin korostus). Kaksi merkitystä, kaksi väriä. */
.ev-card .next-flag { background: var(--c-cream); color: var(--c-ember); }
/* 10 — suodatuksen ja selauksen arvokas vaihtuminen */
.svc-cards .svc-card[hidden], .ev-cards .ev-card[hidden], .news > li[hidden] { display: none; }
/* Uutiskortin .txt-lohkoa ei animoida erikseen: settle-animaation both-täyttö
   jäisi voimaan ja ohittaisi hover-noston (transform) pysyvästi. */
.svc-card.settle, .ev-card.settle, .news > li.settle { animation: card-settle 600ms var(--ease-calm) both; animation-delay: calc(var(--i, 0) * 110ms); }
.svc-card.settle .svc-date, .ev-card.settle .svc-date { animation: date-settle 800ms var(--ease-calm) both; animation-delay: calc(var(--i, 0) * 110ms + 180ms); }
@keyframes card-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes date-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.svc-empty { color: var(--c-mist); font-size: var(--fs-meta); font-style: italic; }
/* Usva on mitoitettu tummalle kaistalle; vaalealla se jäisi alle AA-rajan. */
.light-band .svc-empty { color: var(--c-smoke); }
.chip:focus-visible { outline: 2px solid var(--c-candle); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .svc-card.settle, .svc-card.settle .svc-date,
  .ev-card.settle, .ev-card.settle .svc-date,
  .news > li.settle { animation: none; }
}
/* 12 — scrollbar ja tekstivalinta

   Kultainen vieritinpalkki on hiiren laitteille. Kosketusnäytöllä
   selain piirtää oman kelluvan palkkinsa, joka katoaa itsestään;
   Firefox for Android tottelee silti `scrollbar-color`-määritystä ja
   jätti ruudun oikeaan reunaan pysyvän tumman raidan (todettu
   24.8.2026). `pointer: fine` rajaa tyylityksen niihin laitteisiin,
   joissa palkki oikeasti on osa ulkoasua. */
::selection { background: rgba(217,178,94,.9); color: var(--c-midnight); }
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--c-gold) var(--c-midnight); }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--c-midnight); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--c-gold-l), var(--c-gold));
    border-radius: 6px; border: 3px solid var(--c-midnight);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--c-candle); }
}

/* 14 — heron kevyt parallaksi
   Scroll-driven animation: ei scroll-kuuntelijaa, ei JS:ää, ei jankia.
   Kuvakerros liikkuu hitaammin kuin sivu, jolloin hero saa syvyyttä.

   Liike tarvitsee pystyvaraa, ja vara tehdään NIMENOMAAN scalella eikä
   laatikkoa levittämällä: transform ei käynnistä object-fit-laskentaa
   uudelleen, joten patternissa hiottu object-position-rajaus (esim. ikonin
   "center 14%") säilyy. Levennetty laatikko rajaisi kuvan toisin ja leikkaisi
   aiheen ylälaidan. Ylivara on 3,5 % per reuna ja liike ±2,4 % (= 2,57 %
   scalen jälkeen), joten reuna ei paljastu kummassakaan ääripäässä.

   Zoom on samaa sukua kuin efekti 03, joten efektit eivät riitele keskenään:
   parallaksi on .hero-mediassa, Ken Burns kuvassa. */
@keyframes hero-parallax {
  from { transform: scale(1.07) translateY(-2.4%); }
  to   { transform: scale(1.07) translateY(2.4%); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh; /* heron min-height on 68vh */
      /* Kerros luodaan valmiiksi latauksessa. Ilman tätä selain promotoi
         kuvakerroksen vasta ensimmäisellä rullausruudulla — juuri siinä
         kohdassa jossa lasiheader alkaa kutistua, eli kertanytkähdys osuisi
         sivun yläosaan. will-change on rajattu tähän lohkoon, joten liikettä
         välttävä ei maksa siitä mitään. */
      will-change: transform;
    }
  }
}

/* 15 — sivunvaihdon ristihäivytys
   Yksi sääntö antaa saman origin'in navigaatioille pehmeän ristihäivytyksen;
   ulkoiset linkit (ort.fi, patriarkaatti) jäävät piirin ulkopuolelle
   määritelmän mukaan. Selaimet joissa tukea ei ole lataavat sivun kuten ennen,
   ja liikettä välttävälle sääntö jää kokonaan pois. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: var(--ease-calm);
}

/* ============ SISÄLTÖSIVUT (vanha sisältö, arkistot, haku, 404) ============
   Vanhat sivut ja artikkelit renderöityvät vaalealla pergamenttipinnalla.
   Marginaalit palautetaan täällä, koska tokens.css nollaa ne. */
/* Vaakapehmuste on toistettava: .page-main ja .wrap ovat samalla
   spesifisyydellä samassa elementissä, joten pelkkä pystypehmuste
   kumoaisi .wrapin sivumarginaalit ja teksti osuisi ruudun reunaan. */
.page-main { padding: var(--sp-8) var(--sp-5) var(--sp-9); }
.page-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1);
  line-height: 1.1; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--c-ink); margin-bottom: var(--sp-3); }
/* Kapea puhelin: sivun otsikko on versaali ja väljästi harvennettu, ja
   --fs-h1:n pohja (2rem) on sama 320 pikselistä 711 pikseliin asti. 320
   pikselin näytöllä palstaa on 272 px eli noin 14 versaalimerkkiä, joten
   "JUMALANPALVELUSKALENTERI" tarvitsee kolme riviä ja sivun ensivaikutelma
   on pelkkää otsikkoa. Alle 400 px:n otsikko kapenee 26 pikseliin ja
   harvennus puolittuu — kumpikin tuo noin kolmanneksen lisää merkkejä
   riville. 400 pikselistä ylöspäin mitään ei muutu (26 px × (400/320) =
   32 px = --fs-h1:n pohja), joten tämä ei ole uusi kokoportaikko vaan
   entisen jatke alaspäin. */
@media (max-width: 399px) {
  .page-title { font-size: clamp(1.625rem, 8vw, 2rem); letter-spacing: .04em; }
}
.page-meta { color: var(--c-smoke); font-size: var(--fs-meta); margin-bottom: var(--sp-5); }
.page-goldline { margin-bottom: var(--sp-6); }

/* overflow-wrap: pitkä katkeamaton merkkijono (sähköpostiosoite, URL,
   tilinumero) leventää muuten sivun ruutua leveämmäksi ja pakottaa
   vaakavierityksen puhelimessa. `anywhere` katkaisee vain kun on pakko. */
.entry-content { max-width: 72ch; overflow-wrap: anywhere; }
/* Vieraskielinen etusivu: sisäsivulla palsta on otsikon kanssa samassa
   vasemmassa reunassa, mutta etusivulla sen alla on koko .wrapin levyisiä
   osioita (seuraavat palvelukset, uutiset), joten vasemmalle jäävä 72ch:n
   palsta näyttää unohtuneen sivuun. Palsta keskitetään; teksti itse pysyy
   lukusuunnan mukaisena. */
.etusivu-esittely .entry-content { margin-inline: auto; }
/* Pystyrytmi koskee myös ryhmälohkojen ja avattavien osioiden sisältöä —
   suora lapsivalitsin yksin jättäisi kainalon ja kaistojen sisällön
   liimautumaan yhteen. */
.entry-content > * + *,
.entry-content .wp-block-group > * + *,
.entry-content .wp-block-details > * + * { margin-top: var(--sp-4); }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--c-ink);
  margin-top: var(--sp-6); }
.entry-content h2 { font-size: var(--fs-h2); }
.entry-content h3 { font-size: var(--fs-h3); }
/* Migroitu sisältö käyttää paikoin h4–h6-tasoja; ilman kokoa ne putoaisivat
   selaimen oletukseen (h5 ≈ 14 px), joka display-fontilla on lukukelvoton. */
.entry-content h4 { font-size: var(--fs-h3); }
.entry-content h5, .entry-content h6 { font-size: var(--fs-lead); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-top: var(--sp-1); }
.entry-content li > ul, .entry-content li > ol { margin-top: var(--sp-1); }
.entry-content img { height: auto; }
.entry-content figure { margin: var(--sp-5) 0; }
.entry-content figcaption { font-size: var(--fs-meta); color: var(--c-smoke); margin-top: var(--sp-2); }
.entry-content blockquote { border-left: 3px solid var(--c-gold); padding-left: var(--sp-4);
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); color: var(--c-ink-soft); }
.entry-content a { color: var(--accent); }
.entry-content a:hover { color: var(--accent-hover); }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content th, .entry-content td { border: 1px solid var(--border-soft); padding: var(--sp-2) var(--sp-3);
  text-align: left; }
.entry-content .wp-block-embed__wrapper iframe { max-width: 100%; }

/* Uutisarkisto (/uutiset/) — vaalea "aikajana": pergamenttipohja,
   päivämäärä display-numeroina (23.7.), sisältöä reunustaa kultainen
   pystyviiva timanttimerkein ja 320 px kuva on rivin oikeassa laidassa.
   Tuorein uutinen avaa sivun sommiteltuna nostona (teksti vasen, kuva
   oikea) — vain 1. sivulla; body.paged pudottaa sen tavalliseksi
   riviksi. Kuvaton uutinen toimii samalla säännöllä: kuvapalsta jää
   silloin pois. Osion perässä oleva Ajankohtaista kirkossa -kaista
   pysyy tummana (dark-band). Prototyyppi: uutislista-variantit (D2T). */
/* Kielisuodatin (pattern ort-turku/uutiset-kielet) */
.uutiskielet { display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-6); }
.uutiskielet a { display: inline-block; padding: 5px 16px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-pill);
  color: var(--c-ink); font-size: var(--fs-meta); font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-fade) var(--ease-calm),
              color var(--dur-fade) var(--ease-calm); }
.uutiskielet a:hover, .uutiskielet a:focus-visible {
  border-color: var(--border-gold); color: var(--accent); }
.uutiskielet a[aria-current] { background: var(--c-midnight);
  border-color: var(--c-midnight); color: var(--c-candle); }
/* "Näytä myös suomenkieliset uutiset" (pattern ort-turku/uutiset-kielet).
   Oma rivinsä chip-rivin alla eikä yksi chip lisää: chipit valitsevat
   kielen, tämä lisää toisen kielen valitun rinnalle — eri kysymys, eri
   rivi. Etusivun uutisnostoissa sama kytkin on .chip-nappina tummalla
   kaistalla (ort-lohkot/blocks/uutisnostot.php). */
.uutiskieli-myos { margin: calc(-1 * var(--sp-4)) 0 var(--sp-6); font-size: var(--fs-meta); }
.uutiskieli-myos a { color: var(--c-ink); text-decoration-color: var(--border-gold);
  text-underline-offset: 3px; }
.uutiskieli-myos a:hover, .uutiskieli-myos a:focus-visible { color: var(--accent); }
.uutiskieli-myos a.is-on::before { content: "✓ "; color: var(--accent); }
.uutislista { list-style: none; margin: 0; padding: 0; max-width: 62rem; }
.uutislista > li { display: grid; grid-template-columns: 96px 1fr 320px;
  gap: 0 var(--sp-5); align-items: center; }
.uutislista > li + li { border-top: 1px solid var(--border-soft); }
.uutislista .uutis-pvm { font-family: var(--font-display); font-weight: 600;
  font-size: 1.9rem; line-height: 1; color: var(--c-ink); text-align: center; }
.uutislista .uutis-vuosi { display: block; font-family: var(--font-body);
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  color: var(--c-smoke); margin-top: 4px; }
.uutislista .uutis-pvm-nosto { display: none; }
.uutislista .uutis-tx { position: relative; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--border-gold);
  padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5); }
.uutislista .uutis-tx::before { content: ""; position: absolute; left: -3.5px;
  top: calc(50% - 3px); width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--c-gold); opacity: .55;
  transition: opacity var(--dur-fade) var(--ease-calm); }
.uutislista > li:hover .uutis-tx::before { opacity: 1; }
.uutislista .wp-block-post-title { font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.2; }
.uutislista .wp-block-post-title a { color: var(--c-ink); text-decoration: none;
  transition: color var(--dur-fade) var(--ease-calm); }
.uutislista > li:hover .wp-block-post-title a,
.uutislista .wp-block-post-title a:focus-visible { color: var(--accent); }
.uutislista .wp-block-post-excerpt { margin-top: var(--sp-2); color: var(--c-smoke); }
.uutislista .wp-block-post-excerpt__excerpt { display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.uutislista .wp-block-post-featured-image { width: 320px; margin: var(--sp-4) 0;
  overflow: hidden; }
.uutislista .wp-block-post-featured-image a { display: block; }
.uutislista .wp-block-post-featured-image img { display: block; width: 100%;
  height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 700ms var(--ease-calm); }
.uutislista > li:hover .wp-block-post-featured-image img { transform: scale(1.04); }

/* Nosto: 1. sivulla ensimmäinen uutinen (sticky-nosto tai tuorein)
   sommiteltuna — täysi päivämäärä eyebrow'na, iso otsikko, kuva
   oikealla. Teksti CSS-sisältönä on kielikohtainen mutta teema on
   suomenkielinen. */
body:not(.paged) .uutislista > li:first-child {
  grid-template-columns: 1fr minmax(320px, 45%); grid-template-rows: auto auto;
  gap: 0 var(--sp-6); align-content: center;
  padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border-gold); }
body:not(.paged) .uutislista > li:first-child + li { border-top: 0; }
body:not(.paged) .uutislista > li:first-child .uutis-pvm { display: none; }
body:not(.paged) .uutislista > li:first-child .uutis-pvm-nosto { display: block;
  grid-column: 1; grid-row: 1; align-self: end; color: var(--accent);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; margin-bottom: var(--sp-2); }
body:not(.paged) .uutislista > li:first-child .uutis-pvm-nosto::before {
  content: "✦ Ajankohtaista · "; }
body:not(.paged) .uutislista > li:first-child .uutis-tx { grid-column: 1;
  grid-row: 2; border-left: 0; padding: 0; justify-content: flex-start; }
body:not(.paged) .uutislista > li:first-child .uutis-tx::before { display: none; }
body:not(.paged) .uutislista > li:first-child .wp-block-post-title {
  font-size: var(--fs-h2); }
body:not(.paged) .uutislista > li:first-child .wp-block-post-excerpt__excerpt {
  -webkit-line-clamp: 3; }
body:not(.paged) .uutislista > li:first-child .wp-block-post-featured-image {
  grid-column: 2; grid-row: 1 / 3; width: 100%; margin: 0; align-self: center; }
body:not(.paged) .uutislista > li:first-child .wp-block-post-featured-image img {
  max-height: 340px; }

@media (prefers-reduced-motion: reduce) {
  .uutislista .wp-block-post-featured-image img { transition: none; }
  .uutislista > li:hover .wp-block-post-featured-image img { transform: none; }
}
@media (max-width: 860px) {
  /* Kapealla rivikuvat jäävät pois — otsikko on sisältö, kuva mauste;
     noston kuva säilyy tekstin yllä. */
  .uutislista > li { grid-template-columns: 72px 1fr; }
  .uutislista .uutis-pvm { font-size: 1.4rem; }
  .uutislista > li:not(:first-child) .wp-block-post-featured-image { display: none; }
  body.paged .uutislista > li:first-child .wp-block-post-featured-image { display: none; }
  body:not(.paged) .uutislista > li:first-child { grid-template-columns: 1fr;
    grid-template-rows: auto auto auto; }
  body:not(.paged) .uutislista > li:first-child .wp-block-post-featured-image {
    grid-column: 1; grid-row: 1; margin-bottom: var(--sp-4); }
  body:not(.paged) .uutislista > li:first-child .uutis-pvm-nosto { grid-row: 2; }
  body:not(.paged) .uutislista > li:first-child .uutis-tx { grid-row: 3; }
}

/* Puhelin: päivämäärä otsikon ylle, ei sivupalstaan.
   Aikajanan päivämääräpalsta vei 320 px:n näytöllä 72 px + 24 px väli +
   24 px pehmuste eli 44 % rivin leveydestä; otsikolle jäi 135 px, jolla
   "Turun ortodoksinen seurakunta tiedottaa…" venyi kuudelle riville.
   Pystysuunnassa tilaa on rajattomasti, vaakasuunnassa ei, joten
   päivämäärä siirtyy otsikon ylle: otsikko saa koko leveyden (272 px) ja
   rivejä tulee puolet vähemmän.
   Aikajana ei katoa — kultaviiva ja timantti jäävät, ja päivämäärä saa
   saman silmäripsiasun kuin listan ensimmäisen noston päiväys, joten
   rivit ja nosto puhuvat samaa kieltä. Rajana on 480 px: sitä leveämmällä
   sivupalsta mahtuu eikä aikajanaa kannata purkaa. */
@media (max-width: 480px) {
  .uutislista > li { grid-template-columns: 1fr; gap: 0; }
  /* Viiva ja pehmuste siirtyvät päiväysriville, jotta jana jatkuu
     yhtenäisenä rivin ylälaidasta alalaitaan. */
  .uutislista .uutis-pvm {
    position: relative; text-align: left;
    border-left: 1px solid var(--border-gold);
    padding: var(--sp-5) 0 0 var(--sp-4);
    font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600;
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--accent); line-height: 1.2;
  }
  /* Vuosiluku (näkyy vain vanhemmissa uutisissa) samalle riville. */
  .uutislista .uutis-vuosi { display: inline; margin: 0 0 0 .4em; font-size: inherit;
    letter-spacing: inherit; color: inherit; }
  /* Timantti seuraa päiväystä janan ylälaitaan. */
  .uutislista .uutis-pvm::before { content: ""; position: absolute; left: -3.5px;
    top: calc(var(--sp-5) + .25em); width: 6px; height: 6px; transform: rotate(45deg);
    background: var(--c-gold); opacity: .55;
    transition: opacity var(--dur-fade) var(--ease-calm); }
  .uutislista > li:hover .uutis-pvm::before { opacity: 1; }
  .uutislista .uutis-tx { border-left: 1px solid var(--border-gold);
    padding: var(--sp-2) 0 var(--sp-5) var(--sp-4); justify-content: flex-start; }
  .uutislista .uutis-tx::before { display: none; }
  /* Nostossa päiväys on jo eyebrow'na omassa elementissään. */
  body:not(.paged) .uutislista > li:first-child .uutis-tx { border-left: 0; padding: 0; }
}

/* Arkisto- ja hakulistat */
/* Osio-osumat hakusivulla (ort/osio-osumat): hakusanaan täsmäävät sivujen
   sisäiset osiot ankkurilinkkeinä ennen varsinaista tuloslistaa. */
.osio-osumat { max-width: 72ch; margin-bottom: var(--sp-6); }
.osio-osumat h2 { font-size: var(--fs-meta); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-smoke); margin-bottom: var(--sp-2); }
.osio-osumat ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.osio-osumat a { display: inline-flex; align-items: baseline; gap: .5em;
  padding: 8px 14px; border: 1px solid var(--border-soft); border-radius: 999px;
  text-decoration: none; }
.osio-osumat a:hover .osio-nimi, .osio-osumat a:focus-visible .osio-nimi { color: var(--accent); }
.osio-osumat .osio-nimi { color: var(--c-ink); font-weight: 600; }
.osio-osumat .osio-sivu { color: var(--c-smoke); font-size: var(--fs-meta); }

.archive-list { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.archive-list > li { border-top: 1px solid var(--border-soft); padding: var(--sp-4) 0; }
.archive-list > li:last-child { border-bottom: 1px solid var(--border-soft); }
.archive-list .wp-block-post-title { font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.2; }
.archive-list .wp-block-post-title a { color: var(--c-ink); text-decoration: none; }
.archive-list .wp-block-post-title a:hover { color: var(--accent); }
.archive-list .wp-block-post-date { color: var(--c-smoke); font-size: var(--fs-meta); }
.archive-list .wp-block-post-excerpt { margin-top: var(--sp-2); color: var(--c-ink-soft); }
/* Sivutus — numerot nappeina, edellinen/seuraava nuolinappeina.
   Grid kiinnittää palat paikoilleen silloinkin, kun edellinen-linkki
   puuttuu (1. sivu) tai seuraava puuttuu (viimeinen sivu). */
.wp-block-query-pagination.wp-block-query-pagination { display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--sp-3); max-width: 62rem;
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft); }
.wp-block-query-pagination .wp-block-query-pagination-previous { grid-column: 1; justify-self: start; }
.wp-block-query-pagination .wp-block-query-pagination-numbers { grid-column: 2; }
.wp-block-query-pagination .wp-block-query-pagination-next { grid-column: 3; justify-self: end; }
.wp-block-query-pagination-numbers { display: flex; align-items: center;
  gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.wp-block-query-pagination-numbers .page-numbers { display: inline-flex;
  align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-ui);
  background: var(--c-cream); color: var(--c-ink); font-weight: 600;
  font-size: var(--fs-meta); text-decoration: none;
  transition: border-color var(--dur-fade) var(--ease-calm),
              color var(--dur-fade) var(--ease-calm); }
.wp-block-query-pagination-numbers a.page-numbers:hover,
.wp-block-query-pagination-numbers a.page-numbers:focus-visible {
  border-color: var(--border-gold); color: var(--accent); }
.wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--c-midnight); border-color: var(--c-midnight); color: var(--c-candle); }
.wp-block-query-pagination-numbers .page-numbers.dots {
  border: 0; background: none; min-width: 24px; padding: 0; color: var(--c-smoke); }
a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next {
  display: inline-flex; align-items: center; gap: 8px; height: 40px;
  padding: 0 var(--sp-4); border: 1px solid var(--border-soft);
  border-radius: var(--radius-ui); background: var(--c-cream); color: var(--c-ink);
  font-weight: 600; font-size: var(--fs-meta); text-decoration: none;
  transition: border-color var(--dur-fade) var(--ease-calm),
              color var(--dur-fade) var(--ease-calm); }
a.wp-block-query-pagination-previous:hover, a.wp-block-query-pagination-next:hover,
a.wp-block-query-pagination-previous:focus-visible, a.wp-block-query-pagination-next:focus-visible {
  border-color: var(--border-gold); color: var(--accent); }
a.wp-block-query-pagination-previous::before { content: "←"; }
a.wp-block-query-pagination-next::after { content: "→"; }
@media (max-width: 600px) {
  .wp-block-query-pagination.wp-block-query-pagination { grid-template-columns: 1fr 1fr; }
  .wp-block-query-pagination .wp-block-query-pagination-numbers {
    grid-column: 1 / -1; grid-row: 1; }
  .wp-block-query-pagination .wp-block-query-pagination-previous { grid-row: 2; }
  .wp-block-query-pagination .wp-block-query-pagination-next { grid-column: 2; grid-row: 2; }
}
/* Sivutus tummalla kaistalla: läpinäkyvät napit kermatekstillä,
   nykyinen sivu kynttilänkultaisena. */
.dark-band .wp-block-query-pagination.wp-block-query-pagination {
  border-top-color: var(--border-invert); }
.dark-band .wp-block-query-pagination-numbers .page-numbers,
.dark-band a.wp-block-query-pagination-previous,
.dark-band a.wp-block-query-pagination-next {
  background: transparent; border-color: var(--border-invert); color: var(--c-cream); }
.dark-band .wp-block-query-pagination-numbers a.page-numbers:hover,
.dark-band .wp-block-query-pagination-numbers a.page-numbers:focus-visible,
.dark-band a.wp-block-query-pagination-previous:hover,
.dark-band a.wp-block-query-pagination-next:hover,
.dark-band a.wp-block-query-pagination-previous:focus-visible,
.dark-band a.wp-block-query-pagination-next:focus-visible {
  border-color: var(--border-gold); color: var(--c-candle); }
.dark-band .wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--c-candle); border-color: var(--c-candle); color: var(--c-midnight); }
.dark-band .wp-block-query-pagination-numbers .page-numbers.dots {
  background: none; color: var(--c-mist); }

/* Ankkurilinkit eivät saa laskeutua tarttuvan headerin alle. Arvo kattaa
   kutistuneen headerin (~56px) ja jättää hieman ilmaa. */
.entry-content [id], .page-main [id] { scroll-margin-top: 6rem; }

/* ===================================================================
   SISÄLTÖSIVUJEN AINEKSET
   Työkalupakki, jolla pitkät tekstisivut saavat rytmiä. Periaate:
   perusteksti pysyy rauhallisena, ja sivulla on 2–3 tietoista
   rytminvaihdosta — ei enempää.
   =================================================================== */

/* --- Avattava osio (core/details) -------------------------------------
   Käytetään pitkillä sivuilla, joilla kävijä etsii yhtä asiaa monesta
   (toimitukset, UKK, palvelustyypit). Natiivi <details> valittiin siksi,
   että se toimii ilman JS:ää, selaimen sivuhaku avaa osion itse ja
   tulostettaessa kaikki aukeaa. */
.entry-content .wp-block-details {
  border-top: 1px solid var(--border-soft);
  padding: 0;
  margin-top: 0;
}
.entry-content .wp-block-details:last-of-type { border-bottom: 1px solid var(--border-soft); }
.entry-content .wp-block-details > summary {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.25;
  color: var(--c-ink);
  transition: color var(--dur-fade) var(--ease-calm);
}
.entry-content .wp-block-details > summary::-webkit-details-marker { display: none; }
/* Kulmamerkki on oma pseudoelementtinsä, jotta se kääntyy pehmeästi eikä
   ole riippuvainen selaimen oletusnuolesta. */
.entry-content .wp-block-details > summary::after {
  content: ""; flex: none; margin-inline-start: auto;
  width: 10px; height: 10px; align-self: center;
  border-right: 2px solid var(--c-gold); border-bottom: 2px solid var(--c-gold);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform 300ms var(--ease-calm);
  /* 45° kierretyn neliön rajauslaatikko levenee ~14px:iin, mikä työnsi
     sisältösarakkeen yli ja aiheutti 3px vaakavierityksen mobiilissa. */
  margin-inline-end: 3px;
}
.entry-content .wp-block-details[open] > summary::after { transform: rotate(-135deg); }
.entry-content .wp-block-details > summary:hover { color: var(--accent); }
.entry-content .wp-block-details > summary:hover::after { border-color: var(--c-gold-dd); }
.entry-content .wp-block-details > summary:focus-visible {
  outline: 2px solid var(--c-gold-d); outline-offset: 3px;
}
/* Avattu sisältö saa hiusviivan ja sisennyksen, jotta se erottuu
   otsikkorivistä ilman laatikkoa. */
/* Sisennys ja kultaviiva vain tavallisille lohkoille: kainalolla ja
   kaistoilla on oma reunaviivansa ja pintansa, jotka viiva söisi. */
.entry-content .wp-block-details[open] > *:not(summary):not([class*="is-style-"]) {
  border-inline-start: 1px solid var(--border-gold);
  padding-inline-start: var(--sp-5);
  margin-inline-start: 2px;
}
.entry-content .wp-block-details[open] > [class*="is-style-"] { margin-inline-start: var(--sp-5); }
.entry-content .wp-block-details[open] > *:not(summary):last-child { padding-bottom: var(--sp-5); }
@media (prefers-reduced-motion: reduce) {
  .entry-content .wp-block-details > summary,
  .entry-content .wp-block-details > summary::after { transition: none; }
}
/* Tulostettaessa kaikki auki — paperilla ei voi klikata. */
@media print {
  .entry-content .wp-block-details > *:not(summary) { display: block !important; }
  .entry-content .wp-block-details > summary::after { display: none; }
}
/* Tummalla ja vihreällä pinnalla samat säännöt käänteisin sävyin. */
.is-style-dark-band .wp-block-details > summary,
.is-style-green-band .wp-block-details > summary { color: var(--c-cream); }
.is-style-dark-band .wp-block-details,
.is-style-green-band .wp-block-details { border-top-color: var(--border-invert); }
.is-style-dark-band .wp-block-details > summary:hover,
.is-style-green-band .wp-block-details > summary:hover { color: var(--c-candle); }

/* --- Kainalo (core/group, lohkotyyli "Kainalo") -----------------------
   Käytännön tiedot pois leipätekstin seasta: osoite, hinta, määräaika,
   mitä ottaa mukaan. */
.entry-content .is-style-kainalo {
  background: var(--c-cream);
  border-inline-start: 3px solid var(--c-gold-d);
  padding: var(--sp-5) var(--sp-6);
  margin-block: var(--sp-6);
}
.entry-content .is-style-kainalo > *:first-child { margin-top: 0; }
.entry-content .is-style-kainalo h2,
.entry-content .is-style-kainalo h3,
.entry-content .is-style-kainalo h4 {
  font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--c-gold-d); margin-top: 0;
}

/* --- Vihreä kaista (core/group, lohkotyyli "Vihreä kaista") -----------
   Kutsu tai ydinviesti: sama rekisteri kuin etusivun "Tule tutustumaan". */
.entry-content .is-style-green-band {
  background: var(--c-dome-green-d); color: var(--c-cream);
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
  margin-block: var(--sp-7);
}
.entry-content .is-style-green-band > *:first-child { margin-top: 0; }
.entry-content .is-style-green-band h2,
.entry-content .is-style-green-band h3 {
  color: var(--c-cream); margin-top: 0;
}
.entry-content .is-style-green-band a { color: var(--c-ochre); }
.entry-content .is-style-green-band a:hover { color: var(--c-candle); }
.entry-content .is-style-green-band a:focus-visible { outline-color: var(--c-ochre); }

/* --- Tumma kaista sisältösivulla -------------------------------------- */
.entry-content .is-style-dark-band {
  background: var(--c-midnight); color: var(--c-cream);
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
  margin-block: var(--sp-7);
}
.entry-content .is-style-dark-band > *:first-child { margin-top: 0; }
.entry-content .is-style-dark-band h2,
.entry-content .is-style-dark-band h3 { color: var(--c-cream); margin-top: 0; }
.entry-content .is-style-dark-band a { color: var(--c-gold-l); }
.entry-content .is-style-dark-band a:hover { color: var(--c-candle); }

/* --- Tekstinosto (core/pullquote) -------------------------------------
   Yksi ajatus nostettuna leipätekstistä. Ei lainausmerkkejä eikä
   laatikkoa — kultaviiva ja Cormorant-kursiivi riittävät. */
.entry-content .wp-block-pullquote {
  border: 0; padding: 0; margin-block: var(--sp-7); text-align: left;
}
.entry-content .wp-block-pullquote blockquote {
  border: 0; padding: 0; margin: 0;
  position: relative; padding-top: var(--sp-5);
}
.entry-content .wp-block-pullquote blockquote::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0;
  width: 60px; height: 1px; background: var(--c-gold); opacity: .8;
}
.entry-content .wp-block-pullquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.4;
  color: var(--c-ink-soft); text-wrap: balance;
}
.entry-content .wp-block-pullquote cite {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-body); font-style: normal; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--c-smoke);
}
.is-style-dark-band .wp-block-pullquote p,
.is-style-green-band .wp-block-pullquote p { color: var(--c-cream); }
.is-style-dark-band .wp-block-pullquote cite,
.is-style-green-band .wp-block-pullquote cite { color: var(--c-mist); }

/* --- Askelluettelo ----------------------------------------------------
   Numeroidut "näin toimit" -ohjeet medaljonkinumeroin. Käytetään
   core/list-lohkossa luokalla .ort-askeleet. */
.entry-content .ort-askeleet { list-style: none; padding-left: 0; counter-reset: askel; }
.entry-content .ort-askeleet > li {
  counter-increment: askel;
  position: relative; padding-inline-start: 56px; margin-top: var(--sp-5);
  min-height: 40px;
}
.entry-content .ort-askeleet > li::before {
  content: counter(askel);
  position: absolute; inset-inline-start: 0; top: -2px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-gold-d); color: var(--c-cream);
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
}
.is-style-green-band .ort-askeleet > li::before { background: var(--c-ochre); color: var(--c-ink); }
.is-style-dark-band .ort-askeleet > li::before { background: var(--c-candle); color: var(--c-midnight); }

/* --- Tarkistuslista ---------------------------------------------------
   Ruutu ohjeen edessä silloin, kun lukija käy listan läpi kohta kohdalta
   (kirkkokahvipäivä, keittiön perehdytys). Ruutu on piirros eikä lomake:
   sitä ei voi rastittaa, koska selain unohtaisi rastit heti sivulatauksessa.
   Käytetään core/list-lohkossa luokalla .ort-tarkistuslista. */
.entry-content .ort-tarkistuslista { list-style: none; padding-left: 0; }
.entry-content .ort-tarkistuslista > li {
  position: relative; padding-inline-start: 34px; margin-top: var(--sp-3);
}
.entry-content .ort-tarkistuslista > li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .35em;
  width: 16px; height: 16px; border-radius: 2px;
  border: 2px solid var(--c-gold-d);
}
.is-style-green-band .ort-tarkistuslista > li::before,
.is-style-dark-band .ort-tarkistuslista > li::before { border-color: var(--c-candle); }

/* --- Henkilökortit ----------------------------------------------------
   Nimikirjainmedaljonki toimii kuvapaikkana kunnes oikeat valokuvat
   saadaan; .ort-henkilo__kuva korvataan silloin <img>-elementillä. */
.entry-content .ort-henkilot { list-style: none; padding-left: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }
.entry-content .ort-henkilo {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4) 0; border-top: 1px solid var(--border-soft); margin-top: 0;
}
.ort-henkilo__kuva {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--c-gold-d); color: var(--c-cream);
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600;
  letter-spacing: .02em;
}
.ort-henkilo__kuva img { width: 100%; height: 100%; object-fit: cover; }
.ort-henkilo__tiedot { min-width: 0; }
.ort-henkilo__nimi { font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 600; line-height: 1.2; color: var(--c-ink); }
.ort-henkilo__rooli { font-size: var(--fs-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--c-gold-d); margin-top: 2px; }
.ort-henkilo__yhteys { font-size: var(--fs-meta); color: var(--c-smoke); margin-top: var(--sp-2); }
/* WCAG 2.5.8 (AA): kosketuskohteen on oltava vähintään 24 × 24 px. Rivin korkeus
   oli 21,7 px ja puhelin- ja sähköpostilinkki ovat allekkain ilman väliä, joten
   sormella osui helposti väärän henkilön numeroon. flex + min-height nostaa
   laatikon 24:ään muuttamatta rivin ulkoasua. Mitattu 8.9.2026, ks.
   notes/saavutettavuusarvio-2026-09-08.md. */
.ort-henkilo__yhteys a { display: flex; align-items: center; min-height: 24px; }

/* Tiedostolohko (wp:file) — käytetään mm. pöytäkirjojen ja lomakkeiden
   PDF-linkeissä. Ilman näitä sääntöjä linkki ja Lataa-painike asettuvat
   päällekkäin ja leikkautuvat. */
.wp-block-file { display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-soft); }
.wp-block-file > a:first-child { font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; }
/* Valitsimessa on .entry-content mukana, koska .entry-content a voittaisi
   muuten spesifisyydessä ja painikkeen teksti katoaisi taustaansa. */
.entry-content .wp-block-file__button,
.wp-block-file__button {
  flex: none; margin: 0; padding: 6px 16px;
  background: var(--c-gold-d); color: var(--c-cream);
  border: 0; border-radius: var(--radius-ui);
  font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fade) var(--ease-calm);
}
.wp-block-file__button:hover, .wp-block-file__button:focus-visible {
  background: var(--c-gold-dd); color: var(--c-cream);
}
.dark-band .wp-block-file { border-bottom-color: var(--border-invert); }
.dark-band .wp-block-file__button { background: var(--c-candle); color: var(--c-midnight); }
.dark-band .wp-block-file__button:hover { background: var(--c-gold-l); color: var(--c-midnight); }

/* Hakulomake */
.wp-block-search .wp-block-search__input { border: 1px solid var(--border-soft);
  border-radius: var(--radius-ui); padding: 10px 14px; font: inherit; background: var(--c-cream); }
.wp-block-search .wp-block-search__button { border: 0; border-radius: var(--radius-ui);
  background: var(--c-gold-d); color: var(--c-cream); font: inherit; font-weight: 600;
  padding: 10px 18px; cursor: pointer; }
.wp-block-search .wp-block-search__button:hover { background: var(--c-gold-dd); }

/* ============ 9. SIVUSTOHAKU (dialogi) ============ */
/* Sama tumma "vigilia"-rekisteri kuin .subnav-paneelissa: midnight-lasi,
   kultaviiva ylhäällä, kerma-teksti, kulta-hover. */
dialog.search-dialog {
  margin: 14vh auto auto;
  padding: 0;
  width: min(620px, calc(100vw - 2 * var(--sp-5)));
  max-width: none;
  border: 1px solid var(--border-invert);
  border-top: 2px solid var(--c-gold);
  border-radius: var(--radius-ui);
  background: rgb(var(--c-midnight-rgb) / .97);
  color: var(--c-cream);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.search-dialog::backdrop { background: rgb(var(--c-midnight-rgb) / .55); }

.search-panel { margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.search-row { display: flex; align-items: center; gap: var(--sp-3); }
.search-glyph { color: var(--c-gold-l); font-size: 1.35rem; line-height: 1; }
.search-input {
  flex: 1; min-width: 0;
  background: none; border: 0; border-bottom: 1px solid var(--border-invert);
  border-radius: 0;
  color: var(--c-cream); caret-color: var(--c-candle);
  font: inherit; font-family: var(--font-display); font-size: var(--fs-lead);
  padding: var(--sp-2) 0;
}
.search-input::placeholder { color: var(--c-mist); opacity: 1; }
.search-input:focus { outline: none; border-bottom-color: var(--c-gold); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
  background: none; border: 1px solid transparent; border-radius: var(--radius-ui);
  color: var(--c-mist); font: inherit; font-size: 1.05rem; line-height: 1;
  padding: var(--sp-2) var(--sp-3); cursor: pointer;
}
.search-close:hover { color: var(--c-candle); border-color: var(--border-invert); }

/* Latausindikaattori: hillitty kultainen pulssiviiva inputin alla */
.search-pulse {
  height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--c-candle), transparent);
  background-size: 200% 100%;
  animation: ort-pulse 1.2s linear infinite;
}
@keyframes ort-pulse {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.search-results {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  max-height: min(52vh, 430px); overflow-y: auto;
}
.search-hit a {
  display: block; padding: 10px var(--sp-3);
  border-radius: var(--radius-ui);
  color: var(--c-cream); text-decoration: none;
}
.search-hit .hit-title {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere;
}
.search-hit .hit-meta { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--c-mist); }
.search-hit a:hover, .search-hit.is-active a { background: rgba(242, 196, 107, .07); }
.search-hit a:hover .hit-title, .search-hit.is-active a .hit-title { color: var(--c-candle); }
.search-all { margin-top: var(--sp-2); border-top: 1px solid var(--border-invert); padding-top: var(--sp-2); }
.search-all a {
  display: block; padding: 10px var(--sp-3); border-radius: var(--radius-ui);
  color: var(--c-gold-l); font-weight: 600; font-size: var(--fs-meta); text-decoration: none;
}
.search-all a:hover, .search-all.is-active a { background: rgba(242, 196, 107, .07); color: var(--c-candle); }

.search-status { margin: var(--sp-3) 0 0; font-size: var(--fs-meta); color: var(--c-mist); }
.search-status:empty { margin: 0; }

.search-close:focus-visible, .search-hit a:focus-visible, .search-all a:focus-visible {
  outline: 2px solid var(--c-candle); outline-offset: 2px;
}

/* Avautuminen: pieni lasku ylhäältä — vain kun liike sallittu */
@media (prefers-reduced-motion: no-preference) {
  dialog.search-dialog[open] { animation: ort-dialog-in 220ms var(--ease-calm); }
  @keyframes ort-dialog-in {
    from { opacity: 0; transform: translateY(-8px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .search-pulse { animation: none; background: var(--c-gold); }
}

/* Mobiili: täysleveä paneeli ylälaidassa */
@media (max-width: 860px) {
  dialog.search-dialog {
    margin: 0 auto auto; width: 100vw;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .search-results { max-height: 62vh; }
}

/* ============ DIGISANASTO (lohko ort/digisanasto) ============
   Kuvauslista, jossa hakusana on oma rivinsä ja selitys sisennettynä sen
   alla. Kohderyhmä on ikääntyneet ja muunkieliset, joten rivi on lyhyt ja
   riviväli väljä; hakukenttä on iso ja aina sivun yläreunassa. */

.sanasto { margin-block: var(--sp-6); }

.sanasto__haku {
  position: sticky; top: var(--header-h, 0px);
  z-index: 2;
  background: var(--bg-page);
  padding-block: var(--sp-3);
  margin-block-end: var(--sp-5);
}
.sanasto__haku[hidden] { display: none; }

.sanasto__label {
  display: block;
  font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--c-gold-d);
  margin-block-end: var(--sp-2);
}

.sanasto__kentta {
  width: 100%;
  font-family: var(--font-body); font-size: 1.05rem;
  color: var(--text-body); background: var(--c-cream);
  border: 1px solid var(--border-soft); border-inline-start: 3px solid var(--c-gold-d);
  padding: var(--sp-3) var(--sp-4);
}
.sanasto__kentta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sanasto__tulos { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); color: var(--c-ink-soft); }
.sanasto__tulos:empty { margin: 0; }

.sanasto__lista { margin: 0; }

.sanasto__kohta {
  border-top: 1px solid var(--border-soft);
  padding: var(--sp-4) var(--sp-3);
  max-width: 68ch;
  scroll-margin-top: 8rem;
}
.sanasto__kohta:first-child { border-top: 0; }
.sanasto__kohta[hidden] { display: none; }

.sanasto__kohta > * { display: inline; }
.sanasto__sana {
  font-family: var(--font-body); font-weight: 600;
  color: var(--c-gold-dd);
}
.sanasto__selitys { margin: 0; }

/* Osuma hakukentästä: hakusana korostuu, jotta silmä löytää sen listasta. */
.sanasto__kohta.on-osuma .sanasto__sana { color: var(--c-ink); }
.sanasto__kohta.on-osuma { background: var(--c-cream); }

/* Sanaston kieliversiot: rivi linkkejä listan yläpuolella. Nimet ovat
   kunkin kielen omalla kielellä, koska lukija ei välttämättä osaa suomea. */
.sanasto-kielet { margin-block-end: var(--sp-5); }
.sanasto-kielet__lista {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  list-style: none; margin: 0; padding: 0;
}
.sanasto-kielet__kohta { font-size: var(--fs-meta); }
.sanasto-kielet__kohta [aria-current] {
  font-weight: 600; color: var(--c-ink);
  border-bottom: 2px solid var(--c-gold-d);
}

/* Hankkeen tunnus sanastosivun alussa: pieni, ei heroon eikä valikkoon,
   jottei kirkas oranssi ala kilpailla sivuston kullan ja vihreän kanssa. */
.sanasto__tunnus { margin: 0 0 var(--sp-5); }
.sanasto__tunnus img { width: 168px; max-width: 45%; height: auto; }
.sanasto__pdf { margin: 0 0 var(--sp-5); font-size: var(--fs-meta); }