/* NAPPIKOHTELU N2
   HILJAINEN TAYTTO: aksentti 12 prosentin peitolla, aksenttiteksti ja ohut reuna. Varipinta on olemassa mutta se ei huuda.
   Simo 6.8.2026: "viestin lahetysnappula liian vahva ja disruptoiva".
   Paletti on h2:n paletti muuttumattomana, vain .btn muuttuu. */

/* HOHTOTASO H2: kylläisyys 32 %, vaaleus 68 %.
   Simo 6.8.2026: p1 (77 %) ja p2 (84 %) olivat liian räikeitä. Sävy 187 pidetty,
   kylläisyys pudotettu. Hohto tummassa tilassa on kirkkautta eikä kyllästä sävyä:
   yli 70 % tummalla pohjalla tuottaa halon, ja se halo on se mikä näyttää räikeältä.
   Kontrasti pohjaa vasten 10.26, musteen kontrasti napissa 9.33. */

/* =============================================================================
   HOHTOKEILA LAHTI — PALETTI 1: "PALLON HOHTO" (syaani)
   Paletti- ja elementtityö 6.8.2026. Pohja: variantti A.
   Sama asettelu ja sisältö kuin style-p2.css:ssä — vain väri vaihtuu, jotta
   Simo vertaa väriä eikä kahta eri sivua.

   MITÄ MUUTTUI POHJASTA JA MIKSI:
   1. --flame (oranssi #FF6A33, 13 UI-roolia) POISTETTU kokonaan. Tilalle
      --accent, joka on mitattu hohtokeilauksen omasta ilmiöstä: fluoresoiva
      maali hohtaa UV-valossa syaaninä. Sama rooli, sama kattavuus (CTA,
      fokusrengas, valittu chip, aktiivinen nav, hover-linkit, "tänään"-
      merkki), yksi väri jolla ei ole kilpailijaa.
   2. --pin (keilojen sinivalkoinen hehku) pysyy samana hexinä kuin ennen
      P1:ssä, koska se ON kirjaimellisesti sama fysikaalinen ilmiö: valkoinen
      esine hohtaa aina sinivalkoisena UV:ssä riippumatta siitä minkä värisen
      maalin valitsemme korostukseksi. P2:ssa --pin siirtyy lämpimämpään
      sävyyn, koska magentavalon kimmoke värjää lähelläänsä olevat vaaleat
      pinnat hieman lämpimämmiksi (optisesti todellinen ilmiö, ei mielivalta).
   3. Ambient-taustapesu (body::before, violetti) EI muutu kummassakaan
      paletissa. Se on mustavalon oman katon/seinän mitattu sävy
      (DESIGN.md §Color), ei tyylivalinta — huoneen valaistus pysyy samana
      riippumatta siitä mikä maali on korostettu. Ei koskaan tekstinä paitsi
      --uv-text, joka on rajattu Markin omaan kuorimeen (orb, kirjoituspisteet,
      muistiinpanolaatikko) — ei koskaan interaktiiviseen tilaan.
   4. Eyebrow-tunnisteiden teksti vaihtui violetista (--uv-text) neutraaliksi
      (--ink-dim). Syy: violetilla ei saa olla mitään interaktiivista roolia,
      ja tunniste on ei-klikattava otsikkoelementti. Nyt koko sivulla vain
      YKSI väri tarkoittaa "tätä voi klikata tai tämä on valittuna", ja
      tunnisteviiva (eyebrow::before) muuttui neutraaliksi harmaaksi samasta
      syystä: hohdon pitää olla harvassa, ei jokaisen otsikon edessä.
   5. Iltalaskuri poistettu kokonaan (tehtävä 2): .lask-*, .chiprow.scroll/
      .viikko/.radat, .stepper, .taulu* ja käyttämätön --glow-2 poistettu.
      .chip-peruskomponentti SÄILYY, koska heron chips-kysy-kysymyschipit
      perivät sen.
   6. .ask:focus-within käytti ennen ambienttia violettia fokusväriin. Se oli
      ristiriidassa DESIGN.md:n oman säännön kanssa ("Markilla ei ole omaa
      aksenttiväriä, hän käyttää talon univormua — ainoa poikkeus on hänen
      orbinsa"). Fokustila on interaktiivinen tila, joten se noudattaa nyt
      samaa accent-väriä kuin kaikki muutkin fokusrenkaat sivulla.
   7. .ask ja .ask .btn käyttivät kovakoodattuja pyöristyksiä (16px, 11px)
      jotka olivat 1–2px pielessä design-tokeneista (--r-lg 18px, --r-md
      10px) — sama komponentti näytti eri pyöreältä normaalitilassa ja
      keskustelutilassa. Korjattu tokeneihin.
   8. Mobiilivalikon (.sheet) avaus ja sulkeutuminen käyttivät samaa
      kiihdytyskäyrää. CLAUDE.md ja brief vaativat: sisään tuleva ease-out,
      poistuva ease-in. Lisätty --ease-in ja kohdistettu se sulkeutumiseen.

   Ei-neuvoteltavat (CLAUDE.md), tarkistettu tässä tiedostossa:
   - vain transform ja opacity animoidaan, ei transition:all
   - ei backdrop-filter: blur() missään
   - will-change vain orbeille ja alapalkille
   ============================================================================= */

/* ---------- TOKENIT ---------- */
:root {
  /* pinnat: hallin oma pimeys (muuttumaton) */
  --void:#0B0A12; --surface:#14131F; --surface-2:#1B1A2A;
  --line:#262539; --line-2:#35334D;

  /* muste (muuttumaton) */
  --ink:#F2F0FA; --ink-soft:#A19DBC; --ink-dim:#837FA0;

  /* ambient-valo: hallin oma UV-kattovalo. Ei koskaan interaktiivinen. */
  --uv:#6C5BD4; --uv-text:#9E8FF0;

  /* PALETTI 2 — accent: HALLIN OMA LOGOPINKKI.
     ------------------------------------------------------------------
     VAIHDETTU 26.8.2026 (Simon toimeksianto: "korvaa sininen uuden logon
     pinkillä"). Aiempi arvo oli #93C1C8, fluoresoiva syaani, joka valittiin
     6.8. hohtokeilauksen ilmiöstä. Se oli oikea niin kauan kuin logo oli
     sininen. Uusi logo on pinkki, jolloin sivulla oli kaksi kilpailevaa
     korostusta — sama juurisyy josta varaussivu kaatui 5.8. Web Design
     -agentti nosti ristiriidan itse LOGO_VAIHTO.md §9:ssä.

     SÄVY on mitattu logosta eikä valittu: assets/logo-badge.png:n hallitseva
     pinkki on #FD26DD (2881 px, ei-läpinäkyvät pikselit, kylläisyys > 35 %).
     Sen sävy on 308.

     KYLLÄISYYS EI OLE LOGON. Logo on HSL(308, 98 %, 57 %). Simo hylkäsi
     6.8. kaksi palettia juuri kylläisyydestä (p1 77 %, p2 84 %) sanalla
     "räikeä", ja syy on mitattu: yli 70 % tummalla pohjalla tuottaa halon.
     Sävy on siis logon, mutta kylläisyys ja vaaleus ovat samat kuin
     hylätyllä syaanilla oli — HSL(308, 72 %, 66 %) — jotta väri on hallin
     oma eikä huuda. Kontrasti mitattu WCAG:n kaavalla:
       accent / void        6.97:1   (vaadittu 4.5)
       accent-ink / accent  6.87:1   (vaadittu 4.5)
     Jos Simo haluaa sen kovempana, se on tasan yksi rivi: #FD26DD antaa
     6.10:1 pohjaa vasten ja on siis yhä luettava. */
  --accent:#E76AD6; --accent-ink:#1B0518; --accent-soft:rgba(231,106,214,.12);
  /* Aiemmin vain .btn:n paikallisena varafallbackina ja silloin syaanina.
     Nostettu tokeniksi, jottei yksikään varareitti palauta vanhaa väriä. */
  --accent-line:rgba(231,106,214,.35);

  /* pallon/datan hehku: valkoinen esine hohtaa aina UV:ssä, mutta
     magentavalon kimmoke värjää lähellä olevat vaaleat pinnat lämpimiksi.
     Sama fysikaalinen perustelu kuin ennen, uuden korostuksen suuntaan
     sävytettynä (oli #D2E8F5, sinivalkoinen). Kontrasti void 15.43:1. */
  --pin:#F6DCF2;

  /* semanttiset (muuttumaton, ei koskaan pelkkänä värinä) */
  --auki:#5AD6A8; --warning:#F2B544; --error:#FF7A6B;

  --display:"Bricolage Grotesque","Segoe UI",Helvetica,sans-serif;
  --ui:"Geist","Segoe UI",Helvetica,sans-serif;
  --mono:"Geist Mono","Cascadia Mono",Consolas,monospace;

  --r-sm:4px; --r-md:10px; --r-lg:18px; --r-pill:999px;

  /* Tummalla pohjalla varjo ei näy. Kohotus tehdään valolla. */
  --glow-1:0 0 0 1px var(--line), 0 10px 30px -18px rgba(0,0,0,.9);

  --s-2xs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:24px;
  --s-xl:32px; --s-2xl:48px; --s-3xl:72px; --s-4xl:104px;

  --col:680px;      /* luettava tekstileveys */
  --frame:1180px;   /* sivun kehys */
  --rail:58px;      /* alapalkin korkeus */

  --ease:cubic-bezier(.2,0,0,1);      /* sisään tuleva: hidastuva */
  --ease-in:cubic-bezier(.4,0,1,1);   /* poistuva: kiihtyvä */
  --t-micro:80ms; --t-short:180ms; --t-med:260ms;
}

/* ---------- PERUSTA ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{background:var(--void)}
body{
  margin:0;background:transparent;color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--rail);
}

/* ---------- TAUSTAKERROKSET ----------
   Kaksi hillittyä radial-pesua hallin omasta UV-valosta + hienovarainen
   rakeisuus. Ei koriste-ikonografiaa: ei keiloja, ei palloja, ei juovia.
   Muuttumaton molemmissa paleteissa (ks. tiedoston alun perustelu). */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 42% at 10% -8%, rgba(108,91,212,.26), transparent 62%),
    radial-gradient(46% 34% at 94% 4%, rgba(67,81,170,.20), transparent 64%),
    radial-gradient(70% 50% at 50% 106%, rgba(72,52,139,.16), transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);
}

/* ---------- SISÄÄNTULO ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(16px);
        animation:rise .72s cubic-bezier(.2,0,0,1) forwards;
        animation-delay:var(--d,0s)}
}
@keyframes rise{to{opacity:1;transform:none}}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

.wrap{width:100%;max-width:var(--frame);margin:0 auto;padding-left:var(--s-lg);padding-right:var(--s-lg)}
.wrap.col > *{max-width:var(--col)}
.tiski .col,.hero .col{max-width:var(--col)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- TYPOGRAFIA ---------- */
h1,h2,h3{
  font-family:var(--display);font-weight:800;margin:0;
  line-height:1.12;letter-spacing:-.035em;
  font-variation-settings:"wdth" 88;
  text-wrap:balance;
}
.h-hero{font-size:clamp(2.75rem,7vw,4.75rem);font-weight:440;
        font-variation-settings:"wdth" 97;letter-spacing:-.022em}
.h-page{font-size:clamp(2.25rem,6.5vw,3.625rem);font-weight:440;
        font-variation-settings:"wdth" 97;letter-spacing:-.022em}
.h-sec{font-size:clamp(1.5rem,3.4vw,2rem);font-variation-settings:"wdth" 90;letter-spacing:-.03em}
h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}

.lede{font-weight:300;font-size:clamp(1.0625rem,2vw,1.25rem);line-height:1.5;
      color:var(--ink-soft);max-width:52ch;letter-spacing:-.01em}

.hi{color:var(--pin)}

p{margin:0 0 var(--s-md)}
.sub{font-size:.9375rem;color:var(--ink-soft);margin:0 0 var(--s-lg);max-width:60ch}
.pikku{font-size:.875rem;color:var(--ink-dim);line-height:1.6}
.selite{font-size:.9375rem;color:var(--ink-soft);line-height:1.65;margin:var(--s-xs) 0 0}

.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  margin:0 0 var(--s-sm);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--line-2);flex:none}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.01em}

/* OSIOIDEN VALINEN RYTMI (Roope 27.8.2026: "sivuilla on paljon taman
   kaltaisia suuria gappeja, puhelimella nama ovat viela kriittisemman
   nakoisempia").

   Mitattu ennen: viiva sai 48 px ilmaa molemmin puolin ja edellinen osio
   toi 48 px omaa pehmustetta, eli osioiden valiin jai 120 px tyysin
   tyhjaa ja sen keskella yksi hiusviiva. Mobiilissa se on 14 %
   ruudun korkeudesta.

   Viiva ON erotin, joten se ei tarvitse erikseen sata pikselia tyhjaa
   ympärilleen. Ilma jaa, mutta puoleen. */
.rule{border:0;color:inherit;height:3px;margin:var(--s-lg) 0;
      background:linear-gradient(var(--line),var(--line)) top/100% 1px no-repeat,
                 linear-gradient(var(--line),var(--line)) bottom/100% 1px no-repeat}

/* ---------- YLÄTUNNISTE ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--void);
     border-bottom:1px solid transparent;transition:border-color var(--t-short) linear}
.top.past{border-bottom-color:var(--line)}
/* Ylapalkki 62 -> 76 px (25.8.2026): uusi logo on badge (1,32:1), ei
   vaakalukitus kuten vanha (3,46:1). 56 px korkeana "HOHTOKEILA" on 15,6 px
   ja luettava; 44 px korkeana "LAHTI" ei ole. Mitattu renderoimalla. */
.top-in{display:flex;align-items:center;gap:var(--s-md);min-height:76px;
        max-width:var(--frame);margin:0 auto;padding:0 var(--s-lg)}
/* Badge 74x56 = mitattu suhde 1152:875. Vanha logo-dark.png (3,46:1) ja
   logo-src.png jaavat kansioon kunnes Simo on hyvaksynyt vaihdon. */
.brand{display:block;width:74px;height:56px;flex:none;
       background:url("assets/logo-badge.png") no-repeat left center/contain}
.top .spacer{flex:1}

.nav-desk{display:none}
.burger{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center}
.burger i{display:block;width:22px;height:1.5px;background:var(--ink);position:relative;
          transition:transform var(--t-short) var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1.5px;
          background:var(--ink);transition:transform var(--t-short) var(--ease)}
.burger i::before{transform:translateY(-7px)}
.burger i::after{transform:translateY(7px)}
.burger[aria-expanded="true"] i{transform:rotate(45deg)}
.burger[aria-expanded="true"] i::before{transform:rotate(90deg)}
.burger[aria-expanded="true"] i::after{transform:scaleX(0)}

.sheet{position:fixed;inset:62px 0 0;z-index:39;background:var(--void);padding:var(--s-lg);
       transform:translateY(-100%);opacity:0;visibility:hidden;
       transition:transform var(--t-med) var(--ease-in),opacity var(--t-short) linear,visibility 0s linear var(--t-med)}
.sheet.open{transform:none;opacity:1;visibility:visible;
       transition:transform var(--t-med) var(--ease),opacity var(--t-short) linear;transition-delay:0s}
.sheet a{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;
         font-variation-settings:"wdth" 90;letter-spacing:-.02em;
         text-decoration:none;padding:var(--s-sm) 0;border-bottom:1px solid var(--line)}
.sheet a.on{color:var(--accent)}

/* ---------- TILAPILLERI ---------- */
.status{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
        background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
        padding:7px 14px;font-size:.8125rem;font-weight:500;
        max-width:100%;min-width:0;justify-content:center;text-align:center}
/* KORJATTU 11.9.2026: sama fit-content-floor -vika kuin h1:ssa ja
   railissa. white-space:nowrap teki tilatekstista ("Kiinni nyt, avaamme
   tanaan 14:00") murtumattoman, joten se pakotti pillerin .hero-in:ia
   leveammaksi 150-200 %:n tekstiskaalauksella (mitattu 460 px 360 px:n
   ruudulla). flex-wrap+max-width sallii pillerin rivittya kahdelle
   riville ainoastaan silloin kun se ei mahdu; 100 %:lla teksti mahtuu
   aina yhdelle riville normaalistikin eika mikaan nay muuttuvan. */
.status .dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--auki);flex:none}
.status.pian .dot{background:var(--accent)}
.status.kiinni .dot{background:var(--ink-dim)}
.status .kausi{color:var(--ink-dim);font-weight:400}

/* ---------- HERO: MARK ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
      min-height:min(94svh,880px);display:grid;align-items:center;
      padding:var(--s-3xl) 0 var(--s-2xl)}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 44% at 50% 50%, rgba(11,10,18,.88), rgba(11,10,18,.46) 64%, transparent 84%),
    linear-gradient(180deg, rgba(11,10,18,.74) 0%, rgba(11,10,18,.12) 26%,
                    rgba(11,10,18,.20) 60%, var(--void) 100%);
}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;
         align-items:center;text-align:center;
         /* KORJATTU 11.9.2026: .hero-in on .heron implisiittisen grid-sarakkeen
            ainoa jasen. Ilman min-width:0 grid-sarake mitoittuu sisallon
            min-contentin mukaan (tassa: .mk-rooli-rivin nowrap-teksti), ja
            jos se on leveampi kuin .hero, sarake tyontaa .hero-in:n .heron
            overflow:hidden-reunan yli NAKYMATTOMASTI (sivun scrollWidth ei
            kasva, koska .hero peittaa sen). Mitattu: 320-412 px ruuduilla
            .hero-in oli 408 px ilman tata. */
         min-width:0}

.mk-talo{margin:0 0 var(--s-md);justify-content:center;color:var(--pin);opacity:.75}
.mk-talo::before,.mk-talo::after{content:"";width:clamp(18px,5vw,44px);height:1px;
                                 background:currentColor;flex:none;opacity:.5}

.hero .h-hero{max-width:16ch;hyphens:auto;-webkit-hyphens:auto}
/* KORJATTU 11.9.2026, sama juuri kuin .hero-in (ylla): h1 on
   .hero-in:n (column-flex, align-items:center) suora lapsi, joten sen
   leveys ratkeaa fit-content-kaavalla eika tayta konttiaan. Ensimmainen
   sana (.hi, tulee kannasta kentta "otsikko" -> script.js sijoita(),
   EI staattisesta HTML:sta - pehmea tavuviiva HTML:aan ei siis auttaisi
   tuotannossa) on yksi murtumaton suomen yhdyssana, joten fit-contentin
   min-content-lattia pakotti h1:n omaan, konttia leveampaan kokoonsa
   130-200 %:n tekstiskaalauksella (mitattu 421 px 360 px:n kontissa).

   hyphens:auto (lang="fi" jo html-elementissa) on ilmainen parannus
   laitteille joilla on suomen tavutussanasto, muttei tata voinut
   todistaa taalla (Playwrightin Chromium ei tavuttanut testissa, leveys
   pysyi 421:ssa). Siksi TAKUU on alla oleva fonttikoon pudotus, joka
   YKSIN riittaa 150 %:iin asti riippumatta tavutuksesta. */
.hero-lupaus{font-weight:300;font-size:clamp(1.0625rem,2.2vw,1.3125rem);line-height:1.45;
             color:var(--ink-soft);margin:var(--s-md) 0 0;max-width:40ch;letter-spacing:-.01em}

/* KAPEA PUHELIN + TEKSTISKAALAUS, 11.9.2026. Otsikon clamp-lattia
   (2.75rem) on tasan sama 480 px:aan asti (7vw ei ohita 2.75rem:ia ennen
   n. 630 px:n leveytta), joten kaikki puhelimet nayttavat saman 44 px:n
   otsikon. 150 %:n tekstiskaalauksella tama tekee 14-merkkisesta
   yhdyssanasta "Hohtokeilausta" 421 px leveana, konttia (esim. 312 px
   360 px:n ruudulla) leveamman. Mitattuna 2 rem on pienin pyorea arvo
   jolla yksinaankin (ilman tavutusta, ks. ylla) mika tahansa tahan
   mennessa nahty otsikon ensimmainen sana mahtuu 150 %:lla 320-480 px:n
   ruuduilla ilman etta sana joutuu katkeamaan keskelta. 200 % jaa yha
   yli kapeimmilla ruuduilla (esim. 30 px 360 px:ssa); sen korjaaminen
   vaatisi jo selvasti pienemman otsikon, ja se olisi huonompi kauppa
   kuin jattaa 200 % kesken -- SIMO/Seppo paattaa jos tama ei riita. */
@media (max-width:480px){
  .hero .h-hero{font-size:2rem}
}

.mk-kortti{width:min(680px,100%);max-width:100%;min-width:0;margin:var(--s-2xl) auto 0}
.mk-kyltti{display:flex;align-items:center;justify-content:center;gap:9px;
           flex-wrap:wrap;margin-bottom:12px;min-width:0}
.mk-orb{position:relative;width:32px;height:32px;flex:none;
        background:url("assets/mark-orb.svg") no-repeat center/contain;
        animation:hengita 4s ease-in-out infinite;will-change:transform,opacity;
        filter:drop-shadow(0 0 16px rgba(108,91,212,.55))}
.mk-orb::before{content:"";position:absolute;inset:-46%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(108,91,212,.45), transparent 68%)}
.mk-nimi{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 92;
         font-size:1.125rem;letter-spacing:-.02em;line-height:1}
.mk-rooli{font-size:.8125rem;color:var(--ink-soft);letter-spacing:.01em}

.ask{width:100%;display:flex;align-items:center;gap:10px;
     background:linear-gradient(180deg,rgba(32,30,52,.94),rgba(20,19,31,.96));
     border:1px solid var(--line-2);border-radius:var(--r-lg);padding:7px 7px 7px 20px;
     box-shadow:inset 0 1px 0 rgba(246,220,242,.07),
                0 26px 60px -26px rgba(0,0,0,.9);
     transition:border-color var(--t-short) linear,box-shadow var(--t-short) linear}
.ask:focus-within{border-color:var(--accent);
     box-shadow:inset 0 1px 0 rgba(246,220,242,.10),
                0 26px 60px -26px rgba(0,0,0,.9),
                0 0 0 3px rgba(231,106,214,.13),
                0 0 44px -14px rgba(231,106,214,.42)}
.ask input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);
           font-family:var(--ui);font-size:1.0625rem;min-height:44px}
.ask input::placeholder{color:var(--ink-dim)}
.ask .btn{min-height:52px;border-radius:var(--r-md);flex:none;padding:0 var(--s-lg)}

.mk-sulje{margin-left:auto;font-size:.75rem;color:var(--ink-dim);
          border:1px solid var(--line-2);border-radius:var(--r-pill);
          padding:0 14px;min-height:44px;white-space:nowrap;
          transition:color var(--t-short) linear,border-color var(--t-short) linear}
.mk-sulje:hover{color:var(--ink);border-color:var(--ink-dim)}

/* ---------- HERON KESKUSTELUTILA ---------- */
.hero .thread{display:none}

.hero.keskustelu{align-items:stretch}
.hero.keskustelu .mk-talo,
.hero.keskustelu .h-hero,
.hero.keskustelu .hero-lupaus,
.hero.keskustelu .chips-kysy,
.hero.keskustelu .status{display:none}

.hero.keskustelu .hero-in{justify-content:center;height:100%}

/* Korkeus on 640 px eika enempaa, tarkoituksella. Kokeilin 11.8.2026
   nostaa taman 700 px:aan jotta varausvahvistuslomake mahtuisi; 1366x768
   -ruudulla kortin alareuna valui 13 px ikkunan ali, koska kortin ylareuna
   on kiinni 167 px:ssa (navi + heron pehmuste) eika korkeus voi kasvaa
   vapaasti. Lomake mahtuu nyt siksi etta lomake itse on tiiviimpi
   (ks. .mk-varmistus), ei siksi etta kortti olisi isompi. */
.hero.keskustelu .mk-kortti{
  display:flex;flex-direction:column;overflow:hidden;
  max-width:100%;min-width:0;
  height:min(74svh,640px);margin:0 auto;
  background:linear-gradient(180deg,rgba(28,26,46,.95),rgba(17,16,28,.97));
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(246,220,242,.06),
             0 34px 90px -34px rgba(0,0,0,.95),
             0 0 70px -26px rgba(108,91,212,.55);
}
.hero.keskustelu .mk-kyltti{
  flex:none;margin:0;padding:8px var(--s-md);gap:10px;
  justify-content:flex-start;border-bottom:1px solid var(--line);
  min-width:0;
}
/* min-width:0 pakollinen: white-space:nowrap + text-overflow:ellipsis
   eivat riita ilman tata, koska flex-item ilman sita ei suostu
   kutistumaan alle oman tekstinsa min-contentin (sama vika kuin
   .hero-in:ssa ylla, mutta rivin sisalla). flex-wrap: wrap peritaan
   tahallaan .mk-kyltin perusmaarittelysta (rivi 302): jos nimi + rooli +
   sulje-nappi eivat mahdu riville edes rooliteksti tyhjaksi kutistettuna
   (kayttajan tekstiskaalaus 150-200%), rivi rivittyy kahdelle eika leikkaa
   sulje-nappia nakymattomiin. Ei nakyvaa muutosta 100 %:lla. */
.hero.keskustelu .mk-nimi{flex:none}
.hero.keskustelu .mk-rooli{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                            min-width:0;flex:1 1 auto}
.hero.keskustelu .mk-sulje{flex:none}

.hero.keskustelu .thread{
  display:block;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  width:auto;max-width:100%;min-width:0;margin:0;padding:var(--s-md);text-align:left;
}
.hero.keskustelu .ask{flex:none;width:auto;max-width:100%;min-width:0;margin:var(--s-sm)}

.hero .chips-kysy{justify-content:center;margin-top:var(--s-md)}
@media (max-width:520px){
  .ask{padding-left:var(--s-sm)}
  .ask input{font-size:1rem}
  .ask .btn{padding:0 var(--s-md)}
  .hero .chips-kysy .chip{font-size:.75rem;padding:0 12px}
  .mk-lisa{display:none}
}
.hero .thread{width:min(720px,100%);margin:var(--s-lg) auto 0;text-align:left}
.hero .status{margin-top:var(--s-lg)}

/* ---------- NAPIT ---------- */
.btn{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line,rgba(231,106,214,.35));border-radius:var(--r-sm);
     font-weight:600;font-size:.9375rem;padding:0 var(--s-lg);min-height:48px;
     display:inline-flex;align-items:center;justify-content:center;gap:8px;
     text-decoration:none;text-align:center;
     transition:transform var(--t-micro) var(--ease),opacity var(--t-micro) linear}
.btn:hover{background:var(--accent);color:var(--accent-ink)}
.btn:active{transform:scale(.98)}
.btn-wide{width:100%;min-height:56px;font-size:1rem}
.btn-2{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-2:hover{border-color:var(--ink-dim);opacity:1}
.btn[aria-disabled="true"]{background:var(--surface-2);color:var(--ink-dim);
                           box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}

a[href^="tel:"]:not(.btn){display:inline-block;padding:12px 0;margin:-12px 0}
.alle a,.pikku a,.selite a,.sub a{display:inline-block;padding:12px 0;margin:-12px 0}

.linkline{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;
          color:var(--accent);text-decoration:none;min-height:44px}
.linkline::after{content:"";width:16px;height:1.5px;background:currentColor;
                 transition:transform var(--t-short) var(--ease)}
.linkline:hover::after{transform:translateX(5px)}

/* ---------- CHIP (perus, käytössä heron kysymyschipeissä) ---------- */
.chip{
  border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r-sm);
  min-height:48px;padding:0 14px;font-size:.9375rem;color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  transition:transform var(--t-micro) var(--ease),border-color var(--t-short) linear,
             color var(--t-short) linear;
}
.chip .num{font-size:.9375rem}
.chip:hover:not(:disabled){border-color:var(--ink-dim);color:var(--ink)}
.chip:active:not(:disabled){transform:scale(.96)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
                           background:var(--accent-soft);font-weight:600}
.chip:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through;
               text-decoration-color:var(--ink-dim)}

/* ---------- MARKIN TISKI ----------
   UUSITTU 26.8.2026 (Simo: "tyylittele Markia paremmin alhaalla").

   VANHA: litteä vaakapalkki, jonka ainoa ero muusta sivusta oli
   taustavari ja kaksi hiusviivaa. Se luki sivun jatkona, ei erillisena
   asiana — ja Mark ON eri asia kuin sivun sisalto: sivu on luettava,
   Mark on puhuteltava.

   NYT: kortti jolla on oma pinta ja syvyys, ja hallin oma UV-hehku
   ylareunassa. UV ei ole koriste vaan Hohtokeilan tunnusomainen valo,
   joten Mark nayttaa kuuluvan TAHAN halliin eika olevan yleinen
   chat-widgetti jollaisen kuka tahansa voi liimata sivulleen.

   ⚠ ETUSIVUN MARKIIN EI SAA KOSKEA (Simon nimenomainen kielto).
   Se on turvassa rakenteen takia eika muistisaannon: etusivu kayttaa
   `<section class="hero" id="tiski">`, eli TUNNISTETTA tiski muttei
   LUOKKAA. Jokainen valitsin tassa lohkossa alkaa `.tiski`-luokalla.
   Samasta syysta `.orb`, `.chip` ja `.chips-kysy` -perusmaarittelyt
   jaavat koskematta: etusivu kayttaa niita. Tarkennukset tehdaan
   `.tiski`-etuliitteella. */
.tiski{background:var(--void);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
       padding:var(--s-2xl) 0}
.tiski-in{max-width:var(--frame);margin:0 auto;padding:0 var(--s-lg)}

/* Kortti tehdaan olemassa olevasta `.col`-elementista, jotta HTML:n
   rakenne ei muutu yhdellakaan sivulla. Rakennemuutos tarkoittaisi
   uudet kenttavalitsimet kantaan, ja tama on pelkka ulkoasu. */
.tiski .col{max-width:var(--col);position:relative;
  background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 62%);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:var(--s-lg);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),
             0 28px 64px -46px rgba(0,0,0,.95)}

/* UV-juova ylareunassa: hallin valo, ohuena. */
.tiski .col::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--uv) 22%,var(--accent) 78%,transparent)}
/* Hehku juovan alla. Erittain vaimea: sen kuuluu tuntua, ei nakya. */
.tiski .col::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(420px,86%);height:120px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,rgba(108,91,212,.20),transparent 70%)}
.tiski .col > *{position:relative;z-index:1}

.tiski .orb{width:30px;height:30px;
  filter:drop-shadow(0 0 10px rgba(108,91,212,.55))}
.tiski .mark-head{margin-bottom:var(--s-md)}
.tiski .mark-name{font-size:1rem}

/* KYSYMYSKENTTA. `.field`-luokalle EI OLLUT YHTAAN SAANTOA koko
   tyylitiedostossa (grep 26.8.2026: nolla osumaa), joten kentta piirtyi
   selaimen oletuksilla: noin 180 px levea laatikko ja irrallinen nappi
   sen vieressa. Se nakyi kaikilla neljalla alasivulla ja oli se yksi
   asia joka teki Markista alasivuilla halvemman nakoisen kuin
   etusivulla, jossa sama kentta on `.ask` ja tyylitelty huolella.

   Tama ei siis ole uusi koriste vaan puuttuvan saannon paikkaus. Kieli
   on sama kuin `.ask`illa, mitat pienemmat: alaosion kentan ei kuulu
   kilpailla heron kanssa. */
.tiski .field{width:100%;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,rgba(32,30,52,.92),rgba(20,19,31,.95));
  border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:6px 6px 6px 16px;
  box-shadow:inset 0 1px 0 rgba(246,220,242,.06);
  transition:border-color var(--t-short) linear,box-shadow var(--t-short) linear}
.tiski .field:focus-within{border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(246,220,242,.09),
             0 0 0 3px rgba(231,106,214,.12)}
.tiski .field input{flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--ink);font-family:var(--ui);font-size:1rem;min-height:44px}
.tiski .field input::placeholder{color:var(--ink-dim)}
.tiski .field .btn{min-height:44px;border-radius:var(--r-sm);flex:none;padding:0 var(--s-md)}
@media (max-width:559px){
  /* Kapealla naytolla nappi omalle riville: vierekkain kentasta jaa
     noin 140 px eika placeholderista nay kuin pari sanaa. */
  .tiski .field{flex-wrap:wrap;padding:10px}
  .tiski .field input{flex:1 1 100%;min-height:40px}
  .tiski .field .btn{flex:1 1 100%}
}

/* Ehdotuskysymykset: hieman erottuvammat kuin sivun muut chipit, koska
   ne ovat kehotus toimia eivatka suodattimia. */
.tiski .chips-kysy{gap:8px;margin-top:var(--s-md);margin-bottom:var(--s-sm)}
.tiski .chips-kysy .chip{background:rgba(231,106,214,.06);border-color:var(--line-2)}
.tiski .chips-kysy .chip:hover:not(:disabled){background:var(--accent-soft);
  border-color:var(--accent);color:var(--accent)}

/* KESKUSTELU AUKEAA YLOSPAIN, Simo 15.9.2026: "keskustelun tulee aueta
   ylospain (kirjoituskentan ylapuolelle), ei alaspain". HTML siirsi
   #threadin lomakkeen edelle (ks. sivun kommentti), ja tama antaa
   threadille KIINTEAN korkeuden (ei max-height) heti kun ensimmainen
   viesti tulee: nain kentan y-koordinaatti asettuu YHDELLA hypylla eika
   liiku enaa sen jalkeen vaikka odotuspisteet vaihtuvat vastaukseksi tai
   vastauksia kertyy lisaa. Sama periaate kuin StayFreshin .mark__loki
   (max-height 260px + overflow-y:auto), tassa vain kiintea korkeus koska
   .col ei ole flex-pohjainen kortti kuten heron .mk-kortti. */
.tiski .thread.on{height:260px;overflow-y:auto;overscroll-behavior:contain;
  margin-bottom:var(--s-md)}

@media (max-width:559px){
  .tiski{padding:var(--s-xl) 0}
  .tiski-in{padding:0 var(--s-md)}
  .tiski .col{padding:var(--s-md);border-radius:var(--r-md)}
  .tiski .col::after{height:90px}
}

.mark-head{display:flex;align-items:center;gap:11px;margin-bottom:var(--s-sm)}
.orb{width:26px;height:26px;flex:none;border-radius:var(--r-pill);
     background:url("assets/mark-orb.svg") no-repeat center/contain;
     animation:hengita 4s ease-in-out infinite;will-change:transform,opacity}
.orb.xs{width:16px;height:16px;animation:none}
.orb.lg{width:40px;height:40px}
@keyframes hengita{0%,100%{transform:scale(1);opacity:.94}50%{transform:scale(1.06);opacity:1}}
.mark-name{font-weight:600;font-size:.9375rem;line-height:1.2;display:block}
.mark-role{font-size:.6875rem;letter-spacing:.04em;color:var(--ink-dim)}
.tiski-line{font-size:.9375rem;margin:0 0 var(--s-sm);color:var(--ink-soft);max-width:58ch}

.chips-kysy{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s-sm)}
.chips-kysy .chip{min-height:44px;font-size:.8125rem;border-radius:var(--r-pill)}

.thread{margin-top:var(--s-lg);display:none}
.thread.on{display:block}
.msg{margin-bottom:var(--s-md);font-size:.9375rem;line-height:1.6}
.msg.me{text-align:right}
.msg.me span{display:inline-block;background:var(--surface-2);border:1px solid var(--line-2);
             border-radius:var(--r-md);padding:9px 13px;text-align:left;max-width:85%;
             color:var(--ink-soft);overflow-wrap:anywhere}
.msg.mark{display:flex;gap:11px;align-items:flex-start;min-width:0}
.msg.mark .teksti{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.mark strong{color:var(--pin);font-weight:600}
.msg.mark.pitka .teksti{background:var(--surface-2);border:1px solid var(--line);
                        border-radius:var(--r-md);padding:var(--s-md);white-space:pre-wrap}

.pisteet{display:inline-flex;gap:5px;align-items:center;padding:9px 0}
.pisteet i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--uv-text);
           display:block;animation:sykki 1.2s ease-in-out infinite}
.pisteet i:nth-child(2){animation-delay:.18s}
.pisteet i:nth-child(3){animation-delay:.36s}
@keyframes sykki{0%,60%,100%{opacity:.28}30%{opacity:1}}
.odotusvihje{font-size:.75rem;color:var(--ink-dim);margin:0}

/* ---------- OSIOT ---------- */
/* Osion pehmuste: mobiilissa 32 px, tyopoydalla 48 px. Ero on
   tarkoituksellinen. Mobiilissa ruutua on 844 px ja jokainen turha
   kymppi nakyy heti; tyopoydalla samat 48 px ovat 5 % ruudusta eivatka
   erotu tyhjyytena vaan rytmina. */
.sec{padding:var(--s-xl) 0}
/* ⚠ TYOPOYDAN ARVO ON TIEDOSTON LOPUSSA `TYOPOYTA`-lohkossa, ei tassa.
   Kirjoitin sen 27.8.2026 ensin tahan ja mittasin sitten etta pehmuste
   oli yha 72 px: sama valitsin esiintyi kahdesti ja jalkimmainen voitti.
   Yksi arvo, yksi paikka. */
.sec-tiivis{padding-top:0}

.sec-2 .sisus{max-width:var(--col)}
@media (min-width:1040px){
  .sec-2 .wrap{display:grid;grid-template-columns:minmax(200px,272px) minmax(0,1fr);
               gap:var(--s-2xl);align-items:start}
  .sec-2 .kansi{position:sticky;top:88px}
  .sec-2 .kansi .h-sec{margin-bottom:var(--s-xs)}
}
@media (prefers-reduced-motion:reduce){.sec-2 .kansi{position:static}}

.kortti{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--glow-1);
        padding:var(--s-lg)}

/* ---------- LEDGER ---------- */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger li{display:flex;flex-wrap:wrap;gap:2px var(--s-md);justify-content:space-between;
           align-items:baseline;padding:var(--s-sm) 0;border-bottom:1px solid var(--line)}
.ledger .nimi{font-weight:500}
.alle{display:block;font-size:.875rem;color:var(--ink-dim);font-weight:400;
      margin-top:4px;line-height:1.55}
.ledger .nimi{flex:1 1 200px;min-width:0}
.ledger .arvo{flex:0 1 auto;min-width:0;margin-left:auto;text-align:right;
              font-size:1rem;color:var(--pin)}
.ledger li.tanaan{position:relative}
.ledger li.tanaan .nimi::before{content:"";position:absolute;left:-13px;top:calc(var(--s-sm) + 8px);
        width:5px;height:5px;border-radius:var(--r-pill);background:var(--accent)}
.ledger li.ei-saatavilla .arvo{color:var(--ink-dim);text-decoration:line-through}

/* ---------- HINTALASKURI (palautettu 26.8.2026, Roopen toive) ----------
   Tiedoston alun kohta 5 kertoo etta iltalaskuri poistettiin talta
   paletilta. Roope pyysi 26.8. korvaamaan hinnastosivun laskurilla, joten
   tyylit palautetaan. Lahde: style-a.css rivit 299-370.

   KAKSI SOVITUSTA, koska paletti on vaihtunut sen jalkeen kun nama
   poistettiin:
   - --glow-2 ei ole enaa olemassa -> --glow-1 (sama rooli, kohotus valolla)
   - .chip on jo talla paletilla eika sita kopioida tanne uudelleen. Vanha
     versio kaytti --flame-korostusta joka on poistettu; nykyinen .chip
     kayttaa --accentia ja on oikea. */
.lask-kansi{max-width:var(--col);margin-bottom:var(--s-xl)}
.laskuri{display:grid;gap:var(--s-md);min-width:0}
.laskuri > *{min-width:0}
.laskuri[hidden]{display:none}

/* LASKURI SAA KOKO KEHYKSEN LEVEYDEN (Roope 27.8.2026: "korjaa napista
   avautuva laskuri leveaksi jotta kaikki nakyy heti").

   Syy: laskurin OMA ruudukko on kaksipalstainen yli 760 px:n leveydella
   (paneeli + tulostaulu, ks. media-kysely alempana). Kun se oli
   .sisus-sarakkeen sisalla, jonka max-width on --col eli 680 px,
   molemmista palstasta tuli alle 340 px ja valinnat puristuivat
   lukukelvottomiksi. Sama vika oli kahdessa paikassa eri syysta:

     etusivu       laskuri oli .sisuksen sisalla kaksipalstaisessa
                   .sec-2-osiossa. Siirretty .wrapin suoraksi lapseksi
                   (index.html) ja vie nyt molemmat sarakkeet.
     synttarisivu  .wrap.col rajaa jokaisen lapsen lukuleveyteen. Laskuri
                   ei ole luettavaa tekstia vaan tyokalu, joten se saa
                   poikkeuksen.

   Hintalaskurin oma sivu oli jo oikein: siella osio on pelkka .sec ilman
   .sec-2:ta juuri tasta syysta (mitattu 26.8.2026). */
.sec-2 .wrap > .laskuri{grid-column:1 / -1}
.wrap.col > .laskuri{max-width:none}
.lask-avaus{margin-top:var(--s-lg)}
.lask-panel{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--glow-1);
            padding:var(--s-lg);min-width:0}
.lask-ryhma + .lask-ryhma{margin-top:var(--s-md);padding-top:var(--s-md);border-top:1px solid var(--line)}
.lask-otsikko{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-sm);
              margin-bottom:10px}
.lask-otsikko .k{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;
                 text-transform:uppercase;color:var(--ink-dim)}
.lask-otsikko .v{font-size:.875rem;color:var(--ink-soft)}

/* JUOMAT NAPIN TAAKSE (3.9.2026, Roope, BRIEF_juomat_napin_taakse.md).
   Sama tekstivari kuin .linkline: matala korostus, ei uusi vari eika
   taytetty .btn-pinta, koska juomat ovat laskurin toissijainen lisa eika
   paatoiminto. Nuoli kertoo auki/kiinni-tilan aria-expanded-attribuutista,
   ei ole koriste. */
.lask-juomanappi{display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);
                 width:100%;min-height:44px;margin-bottom:10px;
                 font-weight:600;font-size:.9375rem;color:var(--accent);text-align:left}
.lask-juomanappi::after{content:"";width:8px;height:8px;flex:none;
                        border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
                        transform:rotate(45deg);transition:transform var(--t-micro) var(--ease)}
.lask-juomanappi[aria-expanded="true"]::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.lask-juomanappi::after{transition:none}}

.chiprow{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.chiprow.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
                margin:0 calc(-1 * var(--s-lg));padding:2px var(--s-lg)}
.chiprow.scroll::-webkit-scrollbar{display:none}
.chiprow.viikko{display:grid;grid-template-columns:repeat(4,1fr)}
@media (min-width:480px){.chiprow.viikko{grid-template-columns:repeat(7,1fr)}}
.chiprow.radat{flex-wrap:wrap}

.stepper{display:flex;align-items:center;gap:var(--s-sm)}
.stepper button{width:48px;height:48px;border:1px solid var(--line-2);border-radius:var(--r-sm);
                background:var(--surface-2);color:var(--ink);font-size:1.25rem;line-height:1;
                display:grid;place-items:center;
                transition:transform var(--t-micro) var(--ease),border-color var(--t-short) linear}
.stepper button:hover:not(:disabled){border-color:var(--ink-dim)}
.stepper button:active:not(:disabled){transform:scale(.94)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper .luku{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.375rem;
               font-weight:500;min-width:3ch;text-align:center}
.stepper .yks{font-size:.875rem;color:var(--ink-soft)}

.taulu{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--glow-1);
       padding:var(--s-lg);display:flex;flex-direction:column;min-width:0}
.taulu-k{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;
         text-transform:uppercase;color:var(--ink-dim);margin:0 0 var(--s-2xs)}
.taulu-summa{font-family:var(--mono);font-variant-numeric:tabular-nums;
             font-size:clamp(3.25rem,13vw,5rem);font-weight:500;letter-spacing:-.045em;
             line-height:.92;color:var(--pin);margin:0;
             display:flex;align-items:baseline;gap:.12em;
             transition:opacity var(--t-short) linear}
.taulu-summa .yks{font-size:.42em;letter-spacing:0;color:var(--ink-soft);font-weight:400}
/* Hinta per henkilo paaluvun perassa. Selvasti pienempi ja himmeampi:
   se on vertailuluku, ei se hinta joka maksetaan. `flex-wrap` siksi etta
   kapealla ruudulla se putoaa omalle rivilleen eika puserra paalukua. */
/* LIHAVOINTI EI RIITA HIMMEALLA VARILLA.
   Roope pyysi 27.8.2026 lihavoimaan synttarien minimirivin. `<strong>`
   oli koodissa ja mitattu font-weight oli 700, mutta hän ei nahnyt sita:
   `.ledger .alle` on 14 px himmealla --ink-dim-varilla, ja tummalla
   pohjalla 400 ja 700 eroavat siina koossa tuskin lainkaan. Paksuus
   yksin ei ole korostus, kirkkaus on. */
.ledger .alle strong,
.sub strong{font-weight:600;color:var(--ink)}

.taulu-summa{flex-wrap:wrap}
.taulu-summa .per-hlo{font-size:.26em;letter-spacing:0;color:var(--ink-dim);
                      font-weight:400;white-space:nowrap}
.taulu-summa.vaihtuu{opacity:.25}
.taulu-summa.nolla{color:var(--ink-dim)}
.taulu-eritys{list-style:none;margin:var(--s-md) 0 0;padding:var(--s-md) 0 0;
              border-top:1px solid var(--line)}
.taulu-eritys li{display:flex;justify-content:space-between;gap:var(--s-md);
                 padding:5px 0;font-size:.875rem;color:var(--ink-soft)}
.taulu-eritys li .num{color:var(--ink)}
/* ERITTELYN VALIOTSIKKO (1.9.2026).

   Mitattu vika: tapahtumalaskuri listasi ratahinnan, kengat JA juomat
   samaan erittelyyn, mutta summa oli vain ratahinta ja kengat. Rivit
   laskivat 196 euroa ja paaluku sanoi 132. Kavija joka laskee rivit
   yhteen nakee ristiriidan, ja ristiriita hinnassa on pahin paikka
   mihin sen voi jattaa.

   Juomia EI lisata summaan, koska ne maksetaan hallilla eika
   varauksen yhteydessa. Sen sijaan ne erotetaan omaksi lohkokseen
   valiotsikolla joka sanoo sen aareen. */
.taulu-eritys li.eritys-valiotsikko{
  display:block;margin-top:6px;padding:8px 0 3px;
  border-top:1px solid var(--line);
  font-size:.75rem;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-dim)}
.taulu-tila{margin:var(--s-md) 0 0;font-size:.875rem;line-height:1.5}
.taulu-tila.esto{color:var(--warning)}
.taulu .btn{margin-top:var(--s-md)}
.taulu-alle{margin:10px 0 0;font-size:.75rem;color:var(--ink-dim);line-height:1.5}
@media (min-width:760px){
  .laskuri{grid-template-columns:1fr minmax(320px,384px);align-items:start;gap:var(--s-lg)}
}

/* ---------- HINTATAULU ----------
   Sama kieli kuin .ledgerilla: ohut viiva rivien valissa, nimi vasemmalle,
   hinta oikealle --pin-varilla ja rivittamatta.

   TAULUKOLLE EI OLLUT TYYLIA LAINKAAN ennen 26.8.2026. .hinta-taulu on
   maaritelty vanhoissa varianttitiedostoissa (style-a/b/c.css) mutta se ei
   koskaan siirtynyt tahan, joten hinnasto.html:n taulu peri pelkan
   typografian: rivit eivat erottuneet toisistaan ja "25 EUR/h" katkesi
   kahdelle riville.

   .ei-ostettavissa on hinnastoTaulun antama luokka riville jota ei sina
   hetkena voi ostaa. Sivulla on otsikko "Miksi paivahinta on yliviivattu",
   eli sivu SELITTAA yliviivauksen jota ei tapahtunut. Nyt tapahtuu. */
.hinta-taulu{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.hinta-taulu th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
                color:var(--ink-dim);font-weight:500;text-align:left;
                padding:var(--s-sm) var(--s-md) var(--s-sm) 0;
                border-bottom:1px solid var(--line)}
.hinta-taulu td{padding:var(--s-sm) var(--s-md) var(--s-sm) 0;
                border-bottom:1px solid var(--line);vertical-align:baseline}
.hinta-taulu th:last-child,.hinta-taulu td:last-child{padding-right:0;
                text-align:right;white-space:nowrap;color:var(--pin)}
.hinta-taulu tr.ei-ostettavissa td:last-child{color:var(--ink-dim);
                text-decoration:line-through}

/* VIERITYS, 11.9.2026, siirretty erilliselta <div class="hinta-taulu-
   vierita">-kaareelta tahan 12.9.2026 (Seppo, julkaisuportti): kaare meni
   #radat > div > div:nth-of-type(2) > table -polun VALIIN, ja
   mark_site_fields.valitsin-arvot (radat-th-hintaluokka ym.) ovat suoria
   lapsipolkuja jotka olettavat taulun olevan .sisuksen valiton lapsi.
   Ylimaarainen kaari-div rikkoi kentat-osuvat-portti.mjs:n, koska
   valitsin ei enaa osunut mihinkaan. Ratkaisu: vierita jo DOMissa oleva
   #radat .sisus itse, ei uutta elementtia.

   Alkuperainen perustelu (turvaverkko): kutistus riittaa 100 %:n
   tekstilla, muttei enaa kun kayttajan tekstiskaalaus (ei pinch-zoom,
   OS:n esteettomyysasetus) on 130-200 %, koska se suurentaa jokaisen
   solun tekstin riippumatta CSS-fontista. Taulu (width:100%,
   table-layout:auto) EI voi enaa kutistua alle sarakkeiden min-contentin,
   joten se tyontaisi koko sivua vaakaan ilman tata vieritysta. Ei nay
   mitaan kun sisalto mahtuu: nakyy vain vierityspalkkina siina harvassa
   tapauksessa kun ei mahdu. `table{display:block}` olisi rikkonut
   sarakkeiden linjauksen, siksi vieritys on .sisuksella eika taululla
   itsellaan.

   Rajattu #radat-osioon: .sisus-luokkaa kaytetaan muillakin osioilla
   (.sec-2 .sisus{max-width:var(--col)} ym.) eika overflow-x:auto saa
   koskea niita. */
#radat .sisus{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* KAPEA PUHELIN, 7.9.2026. `table{width:100%}` on taulukolle MINIMI eika
   maksimi: kun soluja ei voi kaventaa, taulu levittautuu min-contentiin ja
   valuu emonsa ulkopuolelle. 320 px:ssa mitattu index.html:sta:
   .sisus oli 272 px mutta taulu 313 px, eli hintasarake jatkoi 41 px yli
   kortin ja 17 px yli ruudun. `body{overflow-x:hidden}` esti sivun
   vierityksen, joten mitaan ei paassyt vierittamaan nakyviin: teksti
   "25 EUR/ratatunti" oli katkaistu eika sita voinut lukea.

   Pakottaja on rivin 748 `white-space:nowrap`, joka on siella tahallaan
   (26.8.2026: hinta katkesi kahdelle riville ja se oli virhe). Siksi
   korjaus EI pura nowrapia vaan pienentaa taulun mittoja: 13 px teksti ja
   10 px sarakevali riittavat, taulu on 272 px eli tasan emonsa levyinen.
   Mitattu ennen/jalkeen 320/360/390/1280 px; raja 359 px pitaa 360 px:n
   ja isommat kayttamattomina. */
@media (max-width:359px){
  .hinta-taulu{font-size:.8125rem}
  .hinta-taulu th,.hinta-taulu td{padding-right:10px}
}

/* ---------- KUVA ---------- */
.kuva{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glow-1)}
.kuva img{width:100%;height:auto}
.kuva figcaption{font-size:.75rem;color:var(--ink-dim);padding:10px var(--s-sm) 0}

/* PYSTYKUVA TYOPOYDALLA (Roope 27.8.2026: "se on todella iso ja vaatii
   scrollausta nahda edes kuva kokonaan").

   `.kuva img{width:100%}` on oikein vaakakuvalle: 1200x800 tayttaa
   sarakkeen ja on 453 px korkea. Sama saanto pystykuvalle on eri asia,
   koska korkeus seuraa leveytta: 800x1200 venyy 680 pikselin
   sarakkeessa 1020 pikselin korkuiseksi, eli korkeammaksi kuin
   tavallinen selainikkuna. Kuva vaatii siis vierityksen jotta sen
   nakee, ja vierityksen aikana se peittaa kaiken muun.

   Mobiilissa ongelmaa ei ole eika saanto koske sita: siella sarake on
   jo valmiiksi kapea ja pystykuva on luonteva muoto.

   360 px on valittu niin etta 3:2-pystykuva on 540 px korkea, eli
   mahtuu kokonaan yhteen ruutuun tekstin rinnalle. */
@media (min-width:760px){
  .kuva.pysty{max-width:360px}
}

/* ---------- KUMPPANIT ---------- */
.kumppanit{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
           border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.kumppanit li{background:var(--surface)}
.kumppanit a{display:flex;justify-content:space-between;align-items:center;gap:var(--s-sm);
             text-decoration:none;font-weight:500;min-height:56px;padding:var(--s-sm) var(--s-md)}
.kumppanit a:hover .nimi{color:var(--accent)}
.kumppanit .mita{font-size:.8125rem;color:var(--ink-dim);font-weight:400}

/* ---------- FAKTAT ---------- */
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;gap:var(--s-md);padding:var(--s-sm) 0;border-bottom:1px solid var(--line);
          font-size:.9375rem;align-items:baseline}
.facts b{flex:none;width:104px;font-family:var(--mono);font-weight:500;font-size:.6875rem;
         letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
/* li:n toinen lapsi (span, sisaltaa arvon tai linkin) ei ollut nimetty,
   joten sen automaattinen min-content (esim. "hohtokeila.fi/varaa.html"
   yhtena murtumattomana merkkijonona) pakotti sen .facts b:n (104px)
   viereen konttia leveammaksi 150-200 %:n tekstiskaalauksella (mitattu
   242->323 px 360 px:n ruudulla). min-width:0 + overflow-wrap alla
   korjaavat molemmat samasta syysta kuin muutkin taman kierroksen viat. */
.facts li>span{min-width:0;overflow-wrap:anywhere}
.facts a{display:inline-block;text-decoration:none;border-bottom:1px solid var(--line-2);
         padding:12px 0;margin:-12px 0;overflow-wrap:anywhere}
.facts a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* ---------- PAIKANPITÄJÄ ---------- */
.ph{display:flex;gap:11px;padding:var(--s-sm) var(--s-md);background:var(--surface-2);
    border-left:2px solid var(--uv);border-radius:0 var(--r-md) var(--r-md) 0;
    margin-top:var(--s-md)}
.ph-t{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
      font-weight:500;color:var(--uv-text);margin:0 0 var(--s-2xs)}
.ph p{margin:0;font-size:.875rem;line-height:1.6;color:var(--ink-soft)}
.ph p + p{margin-top:var(--s-xs)}
body.ph-off .ph{display:none}
/* Hakukoneiden ristiriitalista on samaa lajia kuin Markin muistiinpanot:
   se on Markin havainto Roopelle hallin omista lahteista, ei viesti
   hallin asiakkaalle. Se jai 26.8.2026 muistiinpanojen piilotuksen
   ulkopuolelle koska se on <details>-elementissa eika .ph-laatikossa.
   Kaksi syyta miksi se on nyt saman kytkimen takana:
     1. Roope 26.8.: "Sivuilla ei tarvitse erikseen lukea syysaukiolot
        tai vastaavaa. poista se." Talla listalla oli sivun viimeinen
        nakyva kausimaininta (varaavuoro.comin otsikon lainaus).
     2. Sama peruste kuin muistiinpanoilla: kun hohtokeila.fi kaannetaan
        talle palvelimelle, hallin asiakkaat lukisivat etta hallin omat
        aukiolotiedot ovat nelja eri versiota ja yhdessa niista aukiolo
        paattyy ennen kuin alkaa.
   Roope saa sen yha nakyviin footerin samasta napista. */
body.ph-off .ph-lohko{display:none}

/* ---------- ALAPALKKI ---------- */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:38;
      display:flex;align-items:center;gap:11px;min-height:var(--rail);
      padding:8px var(--s-lg);background:var(--surface);border-top:1px solid var(--line-2);
      transform:translateY(100%);transition:transform var(--t-med) var(--ease);
      will-change:transform;
      /* KORJATTU 11.9.2026: `width:auto` + `left:0;right:0` PITAISI
         CSS2.1:n mukaan pakottaa leveydeksi tasan viewportin, mutta
         mitattuna Chromiumissa (position:fixed + display:flex +
         tekstiskaalaus 130-200 %) se EI pitanyt: palkki kasvoi lasten
         sisallon mukaan (386 px 360 px ruudulla). `width:100vw` on
         vw-yksikkona riippumaton tasta left/right-ratkaisualgoritmista ja
         mitattiin pitavan tasan.

         KORJATTU UUDELLEEN 12.9.2026 (Seppo, tuotantovika Simon
         puhelimella): tahan lisattiin samalla myos flex-wrap:wrap, koska
         luulin sen tarpeelliseksi Varaa-napin rivittamiseen. Se OLI
         tarpeeton ja rikkoi palkin: .rail-txt:n ellipsi (ks. alla) jo
         yksinaan estaa ylivuodon kutistamalla tekstin, joten
         flex-wrap:wrap ei koskaan saanut tilaisuutta hoitaa mitaan
         oikeaa ongelmaa — se vain rivitti palkin 3 riviksi normaalillakin
         100 %:n tekstikoolla (mitattu tuotannosta: 107 px korkea, piti
         olla ~58 px). Poistettu. Palkki pysyy nyt aina yhdella rivilla;
         min-height (ei height) sallii pienen venymisen jos joskus
         tarvitaan, mutta mikaan tallä hetkella ei pakota sita. */
      width:100vw;max-width:100vw;min-width:0}
.rail.on{transform:none}
/* HALLIN OMA MERKKI, ei Markin (27.8.2026, Simon pyyntö).
   Palkissa oli `.orb` eli Markin tunnus. Se on Markin merkki ja kuuluu
   Markin korttiin; tämä palkki on hallin varauskehotus, joten siinä
   kuuluu olla hallin logo. 46x35 säilyttää saman 1,32:1 suhteen kuin
   `.brand` muualla, joten graffiti ei veny. */
.rail .brand{width:46px;height:35px;margin:0;opacity:.95}
.rail-txt{flex:1 1 0%;min-width:0;overflow:hidden;
          font-size:.75rem;line-height:1.3;color:var(--ink-dim)}
/* KORJATTU 12.9.2026 (Seppo): basis oli hetken "auto", koska luulin sen
   tarpeelliseksi jotta Varaa-nappi rivittyisi omalle rivilleen kun tila
   loppuu. Se oli vaarinymmarrys: alla oleva .rail-txt b / #railSub
   -ellipsi hoitaa koko ongelman YKSIN kutistamalla tekstin, eika mitaan
   rivitysta koskaan tarvita — logo ja Varaa-nappi ovat flex:none ja
   mahtuvat aina (46 + ~120 px + valit + pehmuste ≈ 220 px < 360 px
   kapeimmallakin tuetulla ruudulla), joten .rail-txt saa loput tilasta.
   "auto"-basis taas SAI rivitysalgoritmin laukeamaan myos silloin kun ei
   pitanyt (ks. .rail ylla), ja palkki rivittyi kolmelle riville jo
   tavallisella 100 %:n tekstikoolla tuotannossa. "0%" (eli lyhenteen
   "flex:1" arvo) palauttaa .rail-txt:n tavalliseksi kutistuvaksi
   flex-jaseneksi eika enaa osallistu rivityspaatokseen — ja koska
   rivitysta ei enaa ole ollenkaan (.rail:sta poistettu flex-wrap),
   se on nyt myos merkityksetonta kumpi basis on; "0%" on silti oikea
   valinta koska se on .rail-txt:n aito rooli (joustava, ei sisaltoon
   perustuva, loppuosa palkista).

   Alla oleva yksirivinen ellipsis (.rail-txt b, #railSub) on se osa joka
   oikeasti estaa ylivuodon kutistamalla tekstin leveyden sijaan
   rivittamalla sen. */
.rail-txt b{display:block;font-weight:600;font-size:.875rem;color:var(--ink);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#railSub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .btn{min-height:44px;padding:0 var(--s-md);font-size:.8125rem;flex:none}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line);margin-top:var(--s-2xl);
      padding:var(--s-xl) 0 var(--s-2xl);font-size:.875rem;color:var(--ink-dim)}
/* Footerissa badge saa olla isompi, siella on tilaa. 120x91 = sama 1,32:1.
   Opacity nostettu .7 -> .85: graffiti-logo haalistuu tummalla nopeammin
   kuin vanha vaakalukitus, jossa oli iso vaalea tekstipinta. */
.foot .brand{width:120px;height:91px;opacity:.85;margin-bottom:var(--s-md)}
.foot a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s-md) var(--s-lg);margin-bottom:var(--s-lg)}
.foot-links a{display:inline-block;padding:12px 0;margin:-12px 0}
.foot p{margin:0 0 5px}
.toggle-ph{font-size:.8125rem;color:var(--ink-dim);text-decoration:underline;
           text-underline-offset:3px;padding:10px 0;min-height:44px;margin-top:var(--s-sm)}

/* ---------- VERTAILUMERKKI (vain esikatselu, ei osa julkaisua) ---------- */
/* ---------- TYÖPÖYTÄ ---------- */
@media (min-width:760px){
  /* 72 -> 48 px (Roope 27.8.2026, gapit). Mitattu: 72 px pehmustetta
     osion molemmin puolin plus viivan omat marginaalit tuottivat 112 px
     yhtenaista tyhjaa jokaiseen osiovaliin. */
  .sec{padding:var(--s-2xl) 0}
  .hero{padding:var(--s-3xl) 0 var(--s-2xl)}
  .facts b{width:132px}
  .kumppanit{grid-template-columns:1fr 1fr}
}
@media (min-width:1040px){
  .burger{display:none}
  .sheet{display:none}
  .nav-desk{display:flex;gap:var(--s-lg);align-items:center}
  .nav-desk a{font-size:.9375rem;text-decoration:none;color:var(--ink-soft);
              padding:13px 0;border-bottom:1.5px solid transparent;
              transition:color var(--t-short) linear,border-color var(--t-short) linear}
  .nav-desk a:hover{color:var(--ink)}
  .nav-desk a.on{color:var(--ink);border-bottom-color:var(--accent)}
  /* ALAPALKKI MYÖS TYÖPÖYDÄLLE (27.8.2026, Simon pyyntö): "Lisää myös
     tietokoneversiolle samanlainen mutta leijuvana oikeaan alareunaan."

     SAMA ELEMENTTI JA SAMA JS, vain asettelu vaihtuu. En tehnyt toista
     komponenttia: kaksi kopiota samasta varausnapista ajautuisi erilleen,
     ja seuraava joka muuttaa tekstin muuttaisi vain toisen. Sama syy kuin
     `_shared`-kansiolla palvelinpuolella.

     Piilotus on translateY joka vie kortin ALAREUNAN ALLE kokonaan, siksi
     100% + väli + varjon verran. Pelkkä 100% jättäisi varjon näkyviin
     ruudun alareunaan silloinkin kun kortti on piilossa.

     KOKO NOSTETTU 27.8.2026 (Simo: "Luo tietokoneversion leijuvasta
     varaus sectionista hiukan isompi"). Kortti on työpöydällä oma
     elementtinsä eikä kaistale ruudun reunassa, joten se kestää
     enemmän ilmaa kuin mobiilipalkki. */
  .rail{left:auto;right:var(--s-xl);bottom:var(--s-xl);width:auto;max-width:420px;
        gap:var(--s-md);padding:var(--s-md) var(--s-lg);min-height:0;
        border:1px solid var(--line-2);border-radius:var(--r-lg);
        box-shadow:0 12px 34px rgba(0,0,0,.5);
        transform:translateY(calc(100% + var(--s-xl) + 40px))}
  .rail.on{transform:none}
  .rail .brand{width:60px;height:45px}
  .rail-txt{font-size:.8125rem}
  .rail-txt b{font-size:1rem}
  .rail .btn{min-height:48px;padding:0 var(--s-lg);font-size:.875rem}
  body{padding-bottom:0}
  .hero{padding:var(--s-4xl) 0 var(--s-3xl)}
}

/* ---------- LIIKKUMISEN VÄHENNYS ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
  .orb{animation:none}
}

/* ---------- TULOSTUS ---------- */
@media print{
  /* Printin oma paletti: valkoinen paperi kääntää kontrastisuunnan, joten
     tässä tarvitaan TUMMA pinkki eikä ruudun kirkas. Sävy on sama 308 kuin
     ruudulla. Mitattu valkoista vasten: accent 6.48:1, pin 14.46:1.
     Ennen 26.8.2026 nämä olivat --pin:#203964 (laivastonsininen) ja
     --accent:#0F7E8C (petrooli); molemmat vaihdettiin samalla käskyllä. */
  :root{--ink:#000;--ink-soft:#333;--ink-dim:#555;--line:#ccc;--line-2:#999;
        --surface:#fff;--surface-2:#f4f4f6;--pin:#4A1240;--accent:#A81E8E;
        --accent-line:rgba(168,30,142,.35)}
  body{background:#fff;color:#000;padding:0}
  .top,.rail,.sheet,.tiski,.hero-bg,.toggle-ph,.chip,.btn{display:none !important}
  /* Printissa tausta on valkoinen, joten kaytetaan versiota jossa logon oma
     valkoinen tausta on sailytetty. Lapinakyva PNG toimisi myos, mutta
     JPEG on puolet kevyempi eika alfaa tarvita valkoista vasten. */
  .brand{background-image:url("assets/logo-badge-light.jpg")}
  .kortti{box-shadow:none;border:1px solid #ccc}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* ===========================================================================
   VARAUKSEN VARMISTUSLOMAKE  (.mk-varmistus)
   =========================================================================== */
/* TIHEYS ON TOIMINNALLINEN, EI MAKUASIA (mitattu 11.8.2026).
   Lomake oli 579 px korkea ja heron keskustelusaikeen nakyva alue 493 px,
   joten se ei mahtunut kerralla nakyviin ja ylareuna (otsikko + Paiva-rivi)
   leikkautui pois. Kavija olisi vahvistanut varauksen nakematta paivaa.
   Alla olevat luvut (gap, rivin pehmuste, laatikon pehmuste) on valittu
   niin etta lomake mahtuu kokonaan. Vari, fontti, reuna ja varjo ovat
   ennallaan: kyse on tiheydesta, ei ilmeesta. Jos lisaat lomakkeeseen
   rivin, mittaa korkeus uudelleen. */
.mk-varmistus{
  text-align:left;
  margin:var(--s-sm) 0 var(--s-xs);
  padding:var(--s-sm) var(--s-md);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:var(--glow-1);
  /* Ruudukko eika pystysuora flex, jotta nimi ja puhelin voivat olla
     rinnakkain leveilla ruuduilla. Se on se yksi muutos joka pudottaa
     korkeutta tarpeeksi (72 px) ilman etta mitaan poistetaan tai
     pienennetaan lukukelvottomaksi. Kaikki muut lapset vievat molemmat
     sarakkeet, eli jarjestys ja ulkoasu sailyvat ennallaan. */
  display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;
  scroll-margin-top:8px;
}
.mk-varmistus > *{grid-column:1 / -1;}
/* Kapealla ruudulla kentat pysyvat allekkain: 44 px kosketuskohde ja
   luettava label eivat mahdu puolikkaaseen leveyteen puhelimessa. */
@media (min-width:560px){
  .mk-varmistus > .mk-v-kentta{grid-column:auto;}
}
.mk-v-otsikko{
  margin:0 0 2px;font-family:var(--display);font-weight:700;
  font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);
}
.mk-v-rivi{
  display:flex;align-items:baseline;gap:10px;
  padding:3px 0;border-bottom:1px solid var(--line);
}
.mk-v-nimi{flex:0 0 auto;color:var(--ink-soft);font-size:.9rem}
.mk-v-arvo{
  margin-left:auto;text-align:right;color:var(--ink);
  font-family:var(--mono);font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
.mk-v-summa{border-bottom:0;padding-top:6px}
.mk-v-summa .mk-v-nimi{color:var(--ink);font-weight:600}
.mk-v-summa .mk-v-arvo{font-size:1.35rem;font-weight:700;font-family:var(--display)}
.mk-v-selite{margin:0;color:var(--ink-soft);font-size:.82rem;line-height:1.5}

.mk-v-kentta{display:flex;flex-direction:column;gap:3px}
.mk-v-label{color:var(--ink-soft);font-size:.82rem}
.mk-v-kentta input{
  width:100%;box-sizing:border-box;
  font:inherit;font-size:16px;
  min-height:44px;padding:10px 12px;
  color:var(--ink);background:var(--void);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
}
.mk-v-kentta input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.mk-v-virhe{
  margin:0;padding:8px 10px;
  color:var(--ink);background:rgba(255,122,107,.14);
  border-left:2px solid var(--error);border-radius:var(--r-sm);
  font-size:.88rem;
}
.mk-v-nappi{width:100%;justify-content:center;margin-top:2px}
.mk-v-ehdot{margin:0;color:var(--ink-dim);font-size:.78rem;line-height:1.5}

.mk-v-ok{border-color:var(--auki)}
.mk-v-ok .mk-v-otsikko{color:var(--auki)}
.mk-v-ok a{color:var(--accent)}

@media (max-width:520px){
  .mk-varmistus{padding:var(--s-sm)}
  .mk-v-summa .mk-v-arvo{font-size:1.2rem}
}


/* ===== MARK-PALKIN LAHETYSNAPPI =====
   Simo 6.8.2026: "itse kysy nappi on halvan nakoinen".
   Kolme vikaa mitattuna: napin pyoristys oli 4 px kun palkin 18 px ja
   sisareunus 7 px vaatisivat 11 px, joten se luki palkkiin pultattuna
   laatikkona. Napissa ei ollut mitaan joka kertoo etta se lahettaa. Ja
   palkissa oli PYSYVA hehku mutta fokuksessa vaihtui vain reunan vari,
   eli hohto oli koristetta eika vastetta. Nyt se on toisin pain. */
.ask .btn{border-radius:var(--r-pill);min-height:44px;padding:0 22px;
          font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
          transition:background var(--t-micro) var(--ease),
                     color var(--t-micro) var(--ease),
                     border-color var(--t-micro) var(--ease)}
.ask .btn:hover{background:var(--accent);color:var(--accent-ink);
                border-color:var(--accent)}
.ask .btn:hover .ask .btn:active{transform:scale(.98)}
/* Liike on kiellettya jos kayttaja on sen kieltanyt. */
@media (prefers-reduced-motion:reduce){
  .ask,.ask .btn{transition:none}
  .ask .btn:hover }

/* ===== VARAUS ESIIN =====
   Simo 6.8.2026: "tarvitsemme myos varausjarjestelman helposti saataville
   sivuilla. Ei pelkastaan markin kautta." Varaus oli linkitetty neljassa
   paikassa mutta joka kerta samanpainoisena tekstilinkkina viiden joukossa,
   joten se ei erottunut mistaan. Nyt navigaatiossa on oma muoto ja herossa
   suora polku sille joka ei halua keskustella.

   Ei pilleria eika kehysta, Simon pyynto 6.8.2026: "tarkoitan tuota koko
   sinertavaa tsustarinkulaa. Jata vain teksti." Ensin poistin reunan ja
   jatin taytön, mutta hän tarkoitti koko muotoa. Nyt varaus erottuu
   VARILLA ja PAKSUUDELLA: muut navilinkit ovat vaimeaa --ink-soft, tama on
   aksentti ja 600. Se riittaa erottamaan sen ilman omaa pintaa. */
.nav-cta{border:0;border-bottom:0 !important;background:none;
         color:var(--accent) !important;font-weight:600;
         padding:0;min-height:auto;
         transition:opacity var(--t-micro) var(--ease)}
.nav-cta:hover{opacity:.75}
.hero-suora{margin:14px 0 0;font-size:.9375rem;color:var(--ink-soft)}
.hero-suora a{color:var(--accent);text-decoration:underline;
              text-decoration-thickness:1px;text-underline-offset:3px}
.hero-suora a:hover{text-decoration-thickness:2px}

/* ===========================================================================
   KUVAPANKKILISAYKSET 18.8.2026 (vain kuvat-versiot, ei tuotantosivu)
   =========================================================================== */

/* Kuvaesitys-hero (kopio A): kuvat nousevat tummasta ja painuvat takaisin.
   Tumma gradientti .hero-bg::after pysyy vakiona paalla, joten teksti on
   luettavissa myos vaihtojen valissa (hetken kokonaan tumma). */
.hero-bg .hs-kuva{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;opacity:0;
  transition:opacity 1.4s ease-in-out}
.hero-bg .hs-kuva.on{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero-bg .hs-kuva{transition:none}
}

/* ===========================================================================
   KUVAGALLERIA — UUSITTU 26.8.2026 (Simo)
   ===========================================================================
   VANHA RATKAISU JA MIKSI SE VAIHDETTIIN.
   Ruudukko rajasi jokaisen kuvan 3:2-vaakasuhteeseen `object-fit:cover`illa,
   jotta rivit pysyisivat suorina. Se on oikea ratkaisu silloin kun lahdekuvat
   ovat samanmuotoisia. Nama eivat ole: gallerian 22 kuvasta yhdeksan on
   pystykuvia (800x1200). Niista naytettiin vaakasuhteinen kaistale keskelta,
   eli ammattikuvauksesta rajattiin pois se mika teki kuvasta pystykuvan.
   Mobiililla vahinko oli suurin, koska ruutu oli muutenkin pieni.

   NYT: sarakevirtaus (CSS multi-column), jossa kuva sailyttaa OMAN
   kuvasuhteensa. Mitaan ei rajata. Korkeuserot ovat tarkoitus, eivat vika:
   ne tekevat gallerian rytmin.

   Miksi columns eika grid-masonry: `grid-template-rows:masonry` ei ole
   riittavan laajasti tuettu, ja JS-masonry toisi kolmannen liikkuvan osan
   sivulle joka toimii nyt ilman sitä. Sarakevirtauksen ainoa haitta on
   lukujarjestys (ylhaalta alas sarakkeittain, ei vasemmalta oikealle
   riveittain), ja galleriassa jarjestys ei kanna merkitysta.
   =========================================================================== */
.galleria{columns:3;column-gap:var(--s-md)}

/* Kuva on PAINIKE, ei figure: se avaa suurennuksen. Siksi tassa on
   painikkeen tyylinollaus. `width:100%` + `break-inside:avoid` pitavat
   ruudun kasassa sarakkeen sisalla. */
.galleria .gal-item{
  display:block;width:100%;padding:0;margin:0 0 var(--s-md);
  border:0;background:none;font:inherit;color:inherit;cursor:zoom-in;
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--glow-1);
  break-inside:avoid;-webkit-column-break-inside:avoid;
  position:relative;isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease}
.galleria .gal-item img{width:100%;height:auto;display:block}

/* Nosto kertoo etta ruutu on klikattava. Pieni ja nopea: galleria on
   selattava pinta eika kukaan halua odottaa animaatiota 22 kertaa. */
.galleria .gal-item:hover{transform:translateY(-2px);box-shadow:var(--glow-2,var(--glow-1))}
.galleria .gal-item:active{transform:translateY(0) scale(.995)}
.galleria .gal-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (min-width:760px){ .galleria{columns:3} }
@media (max-width:759px){
  /* MOBIILI: kaksi saraketta ja tiiviimpi vali. Kaksi eika yksi, koska
     22 kuvaa yhdessa sarakkeessa tekee sivusta metrien mittaisen ja
     selaaminen muuttuu tyoksi. Suurennus hoitaa katselun. */
  .galleria{columns:2;column-gap:10px}
  .galleria .gal-item{margin-bottom:10px;border-radius:var(--r-sm,10px)}
}
@media (max-width:400px){
  /* Kapeimmilla puhelimilla kaksi saraketta puristaa kuvan niin pieneksi
     ettei siita erota mitaan. Silloin yksi sarake on parempi. */
  .galleria{columns:1}
}
@media (prefers-reduced-motion: reduce){
  .galleria .gal-item{transition:none}
  .galleria .gal-item:hover,.galleria .gal-item:active{transform:none}
}

/* ===========================================================================
   KUVAN SUURENNUS (lightbox)
   ===========================================================================
   Peittaa nakyman kokonaan. Kuva skaalataan mahtumaan (`contain`), ei
   rajata: sama periaate kuin ruudukossa. Nuolet ja sulku ovat oikeita
   painikkeita, joten Tab, Enter ja ruudunlukija toimivat.

   `hidden`-attribuutti hoitaa piilotuksen, ei pelkka luokka: silloin
   sisalto on poissa myos saavutettavuuspuusta eika Tab eksy sinne. */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:200;
  background:rgba(6,5,12,.94);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,4vw,48px);
  animation:lbAuki .18s ease}
@keyframes lbAuki{from{opacity:0}to{opacity:1}}

.lb-kehys{margin:0;max-width:100%;max-height:100%;display:flex;
  align-items:center;justify-content:center}
.lb-kuva{max-width:100%;max-height:calc(100vh - clamp(24px,8vw,96px) - 40px);
  width:auto;height:auto;display:block;
  border-radius:var(--r-md);box-shadow:0 24px 80px rgba(0,0,0,.6)}

.lb-laskuri{position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));
  margin:0;text-align:center;font-size:.8125rem;color:var(--ink-dim);
  letter-spacing:.04em;pointer-events:none}

/* Painikkeet: sama runko, eri sijainti. 44 px on kosketuskoon alaraja. */
.lb-nappi{position:absolute;width:44px;height:44px;padding:0;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  background:rgba(20,18,30,.72);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease}
.lb-nappi:hover{background:rgba(38,34,54,.9);border-color:rgba(255,255,255,.34)}
.lb-nappi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lb-sulje{top:max(12px,env(safe-area-inset-top));right:12px}
.lb-edel{left:12px;top:50%;transform:translateY(-50%)}
.lb-seur{right:12px;top:50%;transform:translateY(-50%)}

/* Ikonit piirretaan CSS:lla: yksi tiedosto vahemman ladattavaa ja ne
   skaalautuvat tarkkoina joka naytolla. */
.lb-sulje::before,.lb-sulje::after{content:"";position:absolute;
  width:16px;height:1.5px;background:var(--ink);border-radius:2px}
.lb-sulje::before{transform:rotate(45deg)}
.lb-sulje::after{transform:rotate(-45deg)}
.lb-nuoli::before{content:"";width:11px;height:11px;
  border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  border-radius:1px}
.lb-edel::before{transform:rotate(45deg);margin-left:4px}
.lb-seur::before{transform:rotate(-135deg);margin-right:4px}

/* Kun sarja on yksi kuva, nuolet eivat palvele mitaan. */
.lb.yksi .lb-nuoli{display:none}

@media (max-width:559px){
  /* Puhelimessa nuolet alas peukalon ulottuville, eivat kuvan paalle
     keskelle. Kuvaa katsotaan koko leveydelta ja pyyhkaisy toimii myos. */
  .lb-edel,.lb-seur{top:auto;bottom:max(46px,calc(env(safe-area-inset-bottom) + 40px));transform:none}
  .lb-edel{left:16px}
  .lb-seur{right:16px}
  .lb-kuva{max-height:calc(100vh - 150px)}
}
@media (prefers-reduced-motion: reduce){
  .lb{animation:none}
}

/* Kun suurennus on auki, tausta ei saa vierla alta. */
body.lb-auki{overflow:hidden}