/* ============================================================
   aicenter.fi — alisivupohja. 8.9.2026.
   Yksi tyylitiedosto kaikille alisivuille. Tokenit tulevat
   colors_and_type.css:sta, joka @importaa fonts.css:n.
   Kaikki arvot ovat mitattuja tai laskettuja, ei arvattuja.
   Kolme kokoluokkaa: >=961, 760-960, <=759.98. Lisaksi matala
   ikkuna (max-height:460px ja orientation:landscape).
   ============================================================ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--color-fg-primary);background:var(--color-surface-base)}
img{max-width:100%}
p{margin:0 0 18px}
a{color:var(--color-fg-link);text-decoration:none;transition:color 150ms ease,opacity 150ms ease}
a:hover{color:var(--aic-orange-900)}
/* Tekstikappaleen linkit erottuvat muullakin kuin värillä (WCAG 1.4.1,
   saavutettavuustesti havainto 3, 1.10.2026). Vain luokattomat linkit
   juoksevassa tekstissä; komponenttien linkeillä on omat tyylinsä. */
p.lead a:not([class]),p.note a:not([class]),dd a:not([class]),.dsec p a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--aic-blue-950);border-radius:var(--radius-sm)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
section[id]{scroll-margin-top:88px}

/* ── NAVIGAATIO ───────────────────────────────────────────────
   Viisi pysyvaa kohtaa, asiointiavaaja, kielivalitsin, ITEE.
   Ruudukko on auto 1fr + implisiittiset auto-sarakkeet, joten
   avaajan poistaminen merkkauksesta poistaa myos sen sarakkeen.
   Poiskytketty tila ei siis muuta rakennetta lainkaan.
   Korkeus 72 px tyopoydalla, 81 px alle 760 px. Kumpikaan ei
   muutu tassa suunnitelmassa: avaaja on 30 px korkea eika
   kapealla ylita ITEE-merkin 36 pikselia. */
nav.sitenav{position:sticky;top:0;z-index:20;background:var(--aic-blue-900);border-bottom:1px solid rgba(255,255,255,.18);height:72px}
nav.sitenav .in{max-width:1140px;margin:0 auto;padding:0 32px;height:72px;display:grid;grid-template-columns:auto 1fr;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;gap:20px}
.mark{display:flex;align-items:center;gap:10px;height:33.3px;text-decoration:none;transition:opacity 150ms ease}
a.mark:hover{opacity:.85}
.mark .mk{width:74.2px;height:33.3px;background:url(assets/logos/aio-brooklyn-white.svg) left center/100% 100% no-repeat;flex:none}
.mark .dsc{font-family:var(--font-display-narrow);font-weight:600;font-size:9.7px;line-height:10px;letter-spacing:.075em;text-transform:uppercase;color:rgba(255,255,255,.9)}

/* Linkki tayttaa palkin korkeuden, jolloin nykyisen sivun 2 px
   oranssi viiva voi ankkuroitua palkin alareunaan ilman
   laskettua siirtymaa. Samalla napautusalue kasvaa 72 pikseliin. */
.navlinks{display:flex;gap:22px;justify-content:center;min-width:0;flex-wrap:nowrap}
/* line-height on sidottava. Body on 1.65, ja perittyna se tekisi
   10 pikselin linkista 16,5 px korkean, jolloin kapea palkki olisi
   85 px eika 81. Archivo Narrow'n normal on noin 1.3, mika on juuri
   se 13 px, josta 81 on mitattu. */
.navlinks a{position:relative;display:flex;align-items:center;line-height:1.3;font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
/* Linkki tayttaa palkin korkeuden VAIN yhden rivin taitossa, jossa
   palkilla on kiintea 72 px. Kapealla linkkirivi on oma gridin
   rivinsa, jonka korkeus tulee sisallosta; height:100% jaisi siella
   kiertamaan itseensa (auto-rivi venyisi lapsen mukaan ja lapsi
   rivin mukaan) ja palkki kasvaisi yli 81 pikselin. */
@media(min-width:760px){
  .navlinks{height:100%}
  .navlinks a{height:100%}
}
.navlinks a:hover{color:var(--aic-orange-600)}
.navlinks .s{display:none}
/* Kaksi eri tilaa, kaksi eri merkki:
   nykyinen SIVU  = oranssi teksti + 2 px viiva palkin alareunassa
   nykyinen OSIO  = oranssi teksti, ei viivaa (etusivun ankkuriseuranta)
   Alasivuja ja ankkureita ei eroteta toisistaan mitenkaan, koska ero
   katoaa sina paivana kun ankkurista tulee sivu. */
.navlinks a[aria-current=page]{color:var(--aic-orange-600)}
.navlinks a[aria-current=page]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--aic-orange-600)}
.navlinks a.on{color:var(--aic-orange-600)}
.itee{justify-self:end;width:46px;height:46px;background:url(assets/logos/ITEE-logo-white.svg) right center/contain no-repeat}

/* Asiointiavaaja. Sijoitus on headerissa linkkirivin ja
   kielivalitsimen valissa, ei kulman tiiveimmassa kohdassa.
   Oranssi 1 px reuna on koriste, ei luettavaa sisaltoa; teksti
   itse on orange-600 sinisella pohjalla, 6,21:1. */
.chan{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:1px solid var(--aic-orange-600);border-radius:var(--radius-md);background:none;font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-orange-600);white-space:nowrap;cursor:pointer;transition:background 150ms ease,color 150ms ease}
.chan:hover{background:var(--aic-orange-600);color:var(--aic-blue-950)}
.chan .s{display:none}

/* Kielivalitsin. Aktiivinen kieli merkitaan kolmella tavalla:
   aria-current, lihavuus ja oranssi alaviiva.
   Puuttuva kieli on valitsimen toinen luonteva tila, ei poikkeus:
   se ei ole linkki, sen lihavuus on 400 muiden 600:n sijaan, ja
   ruudunlukija saa syyn .vh-tekstista.
   Vari on rgba(255,255,255,.62), ei .4. Perustelu: .4 antaa
   sinisella pohjalla 2,85:1, mika ei tayta 4,5:1 vaatimusta.
   .62 antaa 5,45:1. Nakyva ero tehdaan lihavuudella, ei varilla. */
.lang{display:flex;align-items:center;gap:7px;font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.1em;line-height:20px;height:20px}
.lang a{color:rgba(255,255,255,.72);border-bottom:1px solid transparent;transition:color 150ms ease,border-color 150ms ease}
.lang a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.lang .cur{color:#fff;border-bottom:2px solid var(--aic-orange-600)}
.lang .off{color:rgba(255,255,255,.62);font-weight:400}
.lang .sep{color:rgba(255,255,255,.32)}
/* Kosketusalue (18.9.2026, iPad-havainto): 12 px:n teksti 20 px:n rivilla
   on noin 16 x 20 px:n osuma-alue. Pseudoelementti laajentaa sen noin
   36 x 44 px:iin muuttamatta tekstin, alleviivauksen tai asettelun mittoja
   (WCAG 2.5.8 vahintaan 24 x 24, Apple 44). Koskee myos valikon
   kielivalintaa puhelimella. */
.lang a{position:relative}
.lang a::before{content:"";position:absolute;inset:-12px -10px}

/* ── LUONNOSMERKINTA ──────────────────────────────────────── */
.draft{background:var(--aic-orange-100);border-bottom:1px solid var(--aic-orange-200)}
.draft .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;padding-top:12px;padding-bottom:12px}
.draft .lb{flex:none;white-space:nowrap;font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aic-orange-900);margin:0}
.draft p{flex:1 1 280px;margin:0;font-size:14px;line-height:1.5;color:var(--aic-neutral-700)}

/* ── SIVUN OTSAKE ─────────────────────────────────────────────
   Alasivulla ei ole heroa. Otsake on umpisininen lohko, jonka
   korkeus tulee sisallosta ja padingista, ei ruudun korkeudesta.
   Kolme syyta: canvas-verkkokentta on etusivun tunnus eika sita
   monisteta, taysi ruutu tyontaisi sisallon aina taitteen alle,
   ja viidella alasivulla toistuva taysi ruutu tekisi jokaisesta
   sivusta etusivun nakoisen. Otsikkokoko on 56 px, ei etusivun
   72 px: alasivu on hierarkiassa etusivun alla. */
.phead{position:relative;background:var(--aic-blue-900);color:#fff;padding:88px 0 72px;overflow:hidden}
.phead>.wrap{position:relative;z-index:2}
.phead .up{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:24px}
.phead .up:hover{color:#fff}
.phead .up span{transition:transform 150ms ease}
.phead .up:hover span{transform:translateX(-4px)}
.phead h1{font-family:var(--font-display);font-weight:700;font-size:56px;letter-spacing:-.025em;line-height:1.05;margin:0;max-width:22ch;text-wrap:balance}
.phead .rule{width:56px;height:3px;background:var(--aic-orange-600);margin:28px 0}
.phead .lead{font-size:20px;line-height:1.5;color:rgba(255,255,255,.88);max-width:56ch;margin:0}
.phead .where{margin:24px 0 0;font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-orange-600)}
/* Valokuvaotsake. Tama on ainoa paikka, jossa
   rgba(23,7,169,.55) -peitto on kaytossa. Toinen kerros on
   pystygradientti, koska pelkka 55 %:n tasapeitto ei taata
   valkoiselle tekstille 4,5:1 kuvan vaaleimmilla alueilla. */
.phead.pic{padding:104px 0 80px}
.phead.pic .bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;z-index:0}
.phead.pic .ov1{position:absolute;inset:0;background:rgba(23,7,169,.55);z-index:1}
.phead.pic .ov2{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,3,96,.92) 0%,rgba(10,3,96,.72) 30%,rgba(10,3,96,.18) 66%,rgba(10,3,96,0) 88%);z-index:1}

/* Otsakkeen verkkokentta, lisatty 9.9.2026. Sama jarjestelma kuin etusivun
   herossa: hero-network.js lukee asetuspaketin canvasin data-net-attribuutista
   ja piirtaa kentan hillitympana. Solmuvali on sama 118 px, joten kuvion
   tiheys pinta-alaa kohti on tasmalleen sama kuin etusivulla.

   Kentta piirtaa oman brandigradienttinsa canvasille, joten .phead:n oma
   taustavari jaa varalle: jos JS ei aja tai canvas ei saa konteksia, otsake
   on umpinaista brandisinista kuten ennenkin eika mitaan puutu.

   Tekstin kontrasti hoidetaan kentan omalla vaimennuksella, ei tummalla
   peitteella. Sama ratkaisu kuin etusivulla. Jos katselmuksessa halutaan
   lisaa kontrastia, .phead.pic .ov2 on valmis kopioitavaksi tahan. */
.phead.net .netbg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

/* ── SISALLYSLUETTELO ─────────────────────────────────────────
   Pitkan alasivun kiinnekohta. Ei kelluvaa eika sticky-elementtia:
   navi on jo sticky, ja toinen kiinnitetty palkki syo kapealla
   ruudulta 30-40 px pysyvasti. Luettelo on kertaluontoinen ja
   osioiden numerointi kantaa sijainnin sen jalkeen. Tama on myos
   vastaus yhdentoista perakkaisen H2:n ongelmaan: numeroitu
   jono luetaan jarjestyksena, ei tasaisena listana. */
.toc{position:static;height:auto;z-index:auto;background:var(--aic-neutral-50);border-bottom:1px solid var(--color-border-default)}
.toc .wrap{padding-top:32px;padding-bottom:36px}
.toc .lb{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aic-neutral-600);margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--color-border-default);font-size:15px;line-height:1.35;color:var(--aic-neutral-900)}
.toc a:hover{color:var(--aic-blue-900)}
.toc a .n{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--aic-orange-900)}

/* ── OSIO ─────────────────────────────────────────────────────
   Alasivun rytmi ei ole etusivun sininen-valkoinen-harmaa.
   Etusivun vuorottelu on suunniteltu kymmenelle osiolle, jotka
   kertovat eri asian; alasivun yksitoista osiota kertovat samaa
   asiaa, ja vuorottelu lukisi vaihtuvana aiheena.
   Saanto: valkoinen on oletus, hiusviiva erottaa osiot, harmaa
   (.alt) merkitsee osion jonka sisalto on taulukko tai luettelo,
   ja sinista on sivulla tasan kaksi kertaa: otsake ja lopetus.
   Harmaa on siis toiminnallinen, ei vuorotteleva. */
.sec{padding:96px 0}
.sec+.sec{border-top:1px solid var(--color-border-default)}
.sec.alt{background:var(--aic-neutral-50)}
.hd{margin-bottom:48px;max-width:72ch}
/* Numero ja aihetunniste samalla rivilla. Saanto on tarkoituksella
   luokkaan .top eika .hd .top: sama pari esiintyy osion otsikossa
   (.hd), vyohykkeen otsikossa (.zhd) ja lohkoruudukon lohkossa
   (.grid2), eika sen esitystapa riipu siita missa se on. */
.top{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.num{font-family:var(--font-display-narrow);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--aic-orange-900);flex:none}
.eyb{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aic-orange-900);margin:0}
h1,h2,h3{text-wrap:pretty}
h2{font-family:var(--font-display);font-weight:600;font-size:40px;letter-spacing:-.015em;line-height:1.14;margin:0 0 20px;color:var(--aic-blue-900)}
h3{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.3;margin:0 0 12px;color:var(--aic-blue-900)}
.lead{font-size:19px;line-height:1.55;color:var(--aic-neutral-700);max-width:62ch;margin:0}
.hd .lead{margin-bottom:0}
.badge{display:inline-block;font-family:var(--font-display-narrow);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--aic-orange-900);border:1px solid rgba(254,159,19,.6);border-radius:var(--radius-full);padding:4px 10px;white-space:nowrap}
.hd .badge{margin-top:20px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:980px}
.cols p:last-child{margin-bottom:0}
.tail{margin:36px 0 0}

/* ── HIUSVIIVALUETTELO ────────────────────────────────────────
   Sama kuvio kuin etusivun .tag ja .svc .row: rivi, hiusviiva,
   ei laatikkoa. Kantaa seka laitefaktat etta termiparit. */
.facts{list-style:none;margin:0;padding:0}
.facts li{padding:15px 0;border-top:1px solid var(--color-border-default);font-size:16px;line-height:1.55;color:var(--aic-neutral-700)}
.facts li:last-child{border-bottom:1px solid var(--color-border-default)}
.facts b{color:var(--color-fg-primary);font-weight:600}
.pairs{border-top:1px solid var(--color-border-default)}
.pairs .row{display:grid;grid-template-columns:minmax(180px,26%) 1fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--color-border-default);align-items:baseline}
.pairs .t{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--aic-blue-900);margin:0}
.pairs p{margin:0;color:var(--aic-neutral-700)}
.pairs .t .fn{display:block;font-family:var(--font-body);font-size:15px;font-weight:400;line-height:1.4;color:var(--aic-neutral-600);margin-top:5px}
.pairs a.row{color:inherit;text-decoration:none}
/* Yhteystiedot 02: koko rivi on linkki, joka avaa paneelin tuen laji
   esivalittuna (mailto varareittinä). Toiminto luetaan näkyvästä
   .act-tekstistä, ei nuolesta eikä hoverista (22.9.2026). */
.pairs a.row .d p+p{margin-top:8px}
.pairs a.row .act{font-weight:600;color:var(--aic-orange-900)}
.pairs a.row .act:after{content:"\00A0\2192";color:var(--aic-orange-600);font-weight:400}
.pairs a.row:hover .t{color:var(--aic-orange-900)}
.pairs a.row:hover p{color:var(--color-fg-primary)}
.pairs a.row:hover .act,.pairs a.row:focus-visible .act{text-decoration:underline;text-underline-offset:3px}

/* ── VALOKUVA ─────────────────────────────────────────────────
   Pakotettu 3:2 kaikille vyohykekuville. Yhdeksan kymmenesta
   lahdekuvasta on 3:2, joten rajaus ei leikkaa mitaan.
   Sisaltokuvassa EI ole sinista peittoa. Kymmenen kuvaa 55 %:n
   peitolla tekisi sivusta yksivarisen, ja valokuva on sivuston
   ainoa vapaasti varillinen elementti. Peitto jaa vain otsakkeen
   taustakuvaan, jossa sen paalla on tekstia.
   Kuvateksti kertoo mita kuvassa on. "Courtesy of AIC" ei toistu
   kymmenta kertaa: yksi kooste on sivun alalaidassa. */
figure{margin:0}
.pic-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--aic-neutral-100)}
figcaption{margin-top:10px;font-size:13px;line-height:1.45;color:var(--aic-neutral-600)}
/* Video-facade. Sivulla on paikallinen esikatselukuva, ja YouTube ladataan
   vasta klikkauksesta. Ks. video-facade.js ja CSP:n frame-src. */
/* Palvelualueen suomenkielinen vastine englanninkielisen nimen alla.
   Vain suomenkielisella Palvelut-sivulla. */
.finame{margin:-4px 0 14px;min-height:2.8em;font-size:15px;line-height:1.4;color:var(--aic-neutral-600)}
.ytf{margin:0}
.ytgo{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden;border-radius:var(--radius-sm)}
.ytw{display:block;position:relative}
.ytw img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--aic-neutral-100)}
.ytp{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--aic-blue-900);transition:background 150ms ease}
.ytp:after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.ytgo:hover .ytp{background:var(--aic-orange-600)}
.ytgo:hover .ytp:after{border-left-color:var(--aic-blue-950)}
.ytl{display:block;padding:12px 16px;background:var(--aic-blue-900);color:#fff;font-size:14px;line-height:1.4}
.ytl b{font-weight:600}
.ytgo:hover .ytl{background:var(--aic-blue-950)}
.ytfr{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--radius-sm);background:#000}
.credit{margin:0;padding-top:20px;border-top:1px solid var(--color-border-default);font-size:13px;line-height:1.5;color:var(--aic-neutral-600)}

/* ── VYÖHYKEMERKIT ─────────────────────────────────────────
   Kolmas merkkiperhe. 56 yksikon moduuliruudukko, 2 pikselin viiva,
   teravat kulmat, akselien suuntaisesti, ei kaaria eika kiertoa,
   sininen merkki. Erottava tekija on PERUSVIIVA alareunassa: jokainen
   vyohykemerkki seisoo tayden levyisen viivan paalla. Rengas on
   varattu aio-strand-perheelle eika sita kayteta tassa.
   Ei toista tutkimusaluetunnusten rakenteita: ei rajattua neliota,
   ei 3x3-pisteruudukkoa, ei solmuverkkoa, ei ympyran ja suorakaiteen
   limitysta. Ei ihmishahmoja.
   40 px otsikon vieressa, 28 px kapealla: 28 on pienin koko, jossa
   2/56-viiva osuu tasan yhteen pikseliin eika haalene.
   Sama flex:none-syy kuin etusivun .strands .ik:ssa: ilman sita
   merkki kutistuisi pisimman otsikon alla. */
h2.zt{display:flex;align-items:center;gap:16px}
.zi{flex:none;width:40px;height:40px;background:center/contain no-repeat}
.zi-immersion{background-image:url(assets/logos/aio-zone-immersion.svg)}
.zi-iot{background-image:url(assets/logos/aio-zone-iot.svg)}
.zi-lounge{background-image:url(assets/logos/aio-zone-lounge.svg)}
.zi-signage{background-image:url(assets/logos/aio-zone-signage.svg)}
.zi-garage{background-image:url(assets/logos/aio-zone-garage.svg?v=20260910j)}
.zi-kiosk{background-image:url(assets/logos/aio-zone-kiosk.svg?v=20260910j)}

/* Vyohyke: otsikko koko leveydelta, alla kuva ja teksti kahtena
   palstana. Kapealla jarjestys on otsikko, kuva, teksti. Kuva ei
   tule otsikon ylapuolelle: nimeamaton valokuva on koriste. */
.zone .zbody{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.zone .zhd{margin-bottom:40px;max-width:72ch}

/* ── PAIKKAMERKKI ─────────────────────────────────────────────
   Yksi lohko, joka on poistettavissa kokonaan ilman etta
   ympariston taitto muuttuu: osion otsikko ja hiusviivat jaavat
   paikoilleen. Ei vasenta reunavarilistaa, ei liukuvaria, ei
   tyhjaa osiota. Kertoo mita puuttuu ja miksi, ei nayta virheelta.
   Kuvapaikkamerkki kayttaa etusivun .ph-viivakuosia, koska se on
   jarjestelmassa jo olemassa eika sita keksita uudestaan. */
.pending{border:1px solid var(--aic-neutral-300);background:var(--aic-neutral-50);padding:28px}
.pending .lb{display:flex;align-items:center;gap:10px;font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aic-orange-900);margin:0 0 12px}
.pending .lb:before{content:"";width:20px;height:2px;background:var(--aic-orange-600);flex:none}
.pending p{margin:0;font-size:15px;line-height:1.6;color:var(--aic-neutral-700);max-width:60ch}
.pending p+p{margin-top:12px}
.ph{background:repeating-linear-gradient(135deg,var(--aic-neutral-100) 0 12px,var(--aic-neutral-50) 12px 24px);border:1px solid var(--aic-neutral-200);display:flex;align-items:flex-end;padding:16px;aspect-ratio:3/2}
.ph span{font-family:var(--font-mono);font-size:12px;line-height:1.4;color:var(--aic-neutral-600);background:#fff;padding:4px 8px;border:1px solid var(--aic-neutral-200)}

/* ── OHJETAULUKKO ─────────────────────────────────────────────
   Signage-ohje on luettelo lukuarvoja, ja se on kapean nayton
   vaikein sisalto koko sivulla. Se ei ole leipatekstia eika
   taulukkoa: se on nimikko ja arvo. Kapealla nimikko asettuu
   arvon ylle, ei viereen, jolloin arvo saa koko leveyden ja
   lukuarvot pysyvat yhdella rivilla. */
.spec{margin:0;border-top:2px solid var(--aic-blue-900)}
.spec .row{display:grid;grid-template-columns:minmax(150px,24%) 1fr;gap:24px;padding:15px 0;border-bottom:1px solid var(--color-border-default);align-items:baseline}
.spec dt{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-neutral-600)}
.spec dd{margin:0;font-size:16px;line-height:1.5;color:var(--aic-neutral-700)}
.spec dd b{color:var(--color-fg-primary);font-weight:600}
.spec .mono{font-family:var(--font-mono);font-size:14px;color:var(--color-fg-primary)}

/* Kaksipalstainen muunnos. Ruudukko eika column-count: column-count
   tasapainottaa palstojen korkeudet ja venyttaa lyhyet rivit erilleen,
   jolloin nelja riviä nayttaa harvalta. Ruudukossa rivi tayttyy
   vasemmalta oikealle ja saman rivin molemmat solut venyvat samaan
   korkeuteen, joten hiusviivat osuvat kohdakkain.
   Sailoelementin ylaviiva piirtyy molempien palstojen ylitse, joten
   oikean palstan ensimmainen rivi ei jaa ilman rajaa.
   Rivivalistys on kirjoitettu nakyviin muodossa gap:0 48px. Pelkka
   column-gap jatti riviväliksi noin 58 px, mika erotti rivit
   toisistaan ja nayti virheelta. Alä muuta tata pelkaksi
   column-gapiksi.
   Nimikkopalsta on kapeampi kuin yksipalstaisessa, koska arvot ovat
   lyhyita lukuja ja luetteloita. */
.spec.two{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.spec.two .row{grid-template-columns:minmax(110px,34%) 1fr;gap:16px}

/* Osoitetiedot pohjapiirroksen alla, eivat sen vierella: paneelin
   kasvaminen ei saa siirtaa niita. Lab-sivulla osoite on 21.9.2026
   alkaen .planin sisalla (.plan-addr, Lab-lohko tiedoston lopussa),
   joten tama saanto ei enaa osu siihen; jaa muita sivuja varten. */
.plan+.spec{margin-top:44px}

/* ── POHJAPIIRROS JA VYOHYKEAVAIN ─────────────────────────────
   Pohjapiirros on kuva mutta ei valokuva: ei rajausta, ei
   peittoa, ei 3:2:ta. Valkoinen pohja ja contain, koska
   piirroksen valkoinen tausta on osa piirrosta.
   Vyohykkeille ei tehda omaa merkkiperhetta, ks. index.html
   osio 7. Kartan avain on numeroitu, ja numero on sama kuin
   osion numero sivulla. */
.plan{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.plan .sheet{background:#fff;border:1px solid var(--color-border-default);padding:20px}
.plan .sheet img{display:block;width:100%;height:auto}
.keys{list-style:none;margin:0;padding:0;counter-reset:k}
.keys li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:baseline;padding:13px 0;border-top:1px solid var(--color-border-default);font-size:16px;line-height:1.4}
.keys li:last-child{border-bottom:1px solid var(--color-border-default)}
.keys .n{font-family:var(--font-display-narrow);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--aic-orange-900)}
.keys .q{color:var(--aic-neutral-600)}
.keys{margin-bottom:0}
.plan>div>.keys{margin-top:28px}

/* Tiivis avain paneelin ylapuolella. Se on samalla toinen tapa
   valita vyohyke: kartta on osoitin, listalla sama tehdaan
   nimella. Nain myos Health Kiosk on valittavissa, vaikka se ei
   ole piirroksessa. Nappi on <button>, ei role-attribuutti
   listaelementissa, jolloin nappaimisto ja ruudunlukija saavat
   oikean semantiikan ilmaiseksi. */
.plan>div>.keys-min{margin-top:0}
.keys-min li{display:block;padding:0;border-top:1px solid var(--color-border-default);font-size:14px;line-height:1.35}
.keys-min .kb{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;width:100%;margin:0;padding:8px 8px 8px 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background 150ms ease}
.keys-min .kb .n{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--aic-orange-900)}
.keys-min .kb:hover{background:rgba(23,7,169,.05)}
.keys-min .kb:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px;box-shadow:0 0 0 2px var(--aic-blue-950)}
/* Valinta nakyy kolmella tavalla kuten kartallakin: pohjan tummuus,
   numeron vari ja nimen lihavuus. Pelka vari ei riita. */
.keys-min .kb[aria-pressed="true"]{background:rgba(23,7,169,.09)}
.keys-min .kb[aria-pressed="true"] .n{color:var(--aic-blue-900)}
.keys-min .kb[aria-pressed="true"] span+span{font-weight:600;color:var(--aic-blue-900)}
.keys-min+.zonepanel{margin-top:24px}

/* ── INTERAKTIIVINEN POHJAPIIRROS ─────────────────────────────
   Piirros on inline-SVG samassa tiedostossa, ei kuva: vyohyke
   on napautettava ja nappaimistolta saavutettava, eika piirros
   vaadi ulkoista resurssia. Mitat ovat huoneen TS 102 mukaan,
   10,2 x 11,75 m, ja 5 metrin mittajana on piirroksessa.
   Vyohyketiedot tulevat zones.json:ista, ks. lab-map.js.
   HUOM: fetch vaatii CSP:hin connect-src 'self'. Ilman sita
   piirros nakyy mutta paneeli jaa tyhjaksi. */
.planmap{display:block;width:100%;height:auto}
.planmap .shell{fill:none;stroke:var(--aic-neutral-900);stroke-width:1.5}
.planmap .floor{fill:var(--aic-neutral-50);stroke:var(--color-border-default);stroke-width:1}
.planmap .zone{cursor:pointer}
.planmap .zone .hit{fill:rgba(23,7,169,.04);stroke:var(--aic-neutral-400);stroke-width:1;transition:fill 150ms ease,stroke 150ms ease}
.planmap .zone .hitp{fill:transparent;stroke:none}
.planmap .zone:hover .hit{fill:rgba(23,7,169,.08)}
.planmap .zone[aria-pressed="true"] .hit{fill:rgba(23,7,169,.12);stroke:var(--aic-blue-900);stroke-width:2}
.planmap .zone:focus{outline:none}
.planmap .zone:focus-visible .hit{stroke:var(--aic-orange-600);stroke-width:3;outline:2px solid var(--aic-blue-950);outline-offset:1px}
.planmap .zone:focus-visible .hitp{fill:rgba(254,159,19,.10);stroke:var(--aic-orange-600);stroke-width:3;outline:2px solid var(--aic-blue-950);outline-offset:1px}
.planmap .zone .chip{fill:#fff;stroke:var(--aic-neutral-500);stroke-width:1}
.planmap .zone[aria-pressed="true"] .chip{fill:var(--aic-blue-900);stroke:var(--aic-blue-900)}
.planmap .cn{font-family:var(--font-display-narrow);font-size:18px;font-weight:700;fill:var(--aic-neutral-800);text-anchor:middle}
.planmap .zone[aria-pressed="true"] .cn{fill:#fff}
.planmap .rl{font-family:var(--font-display-narrow);font-size:16px;font-weight:600;letter-spacing:.09em;fill:var(--aic-neutral-600)}
.planmap .sg{fill:var(--aic-orange-600)}
.planmap .zone:hover .sg,.planmap .zone[aria-pressed="true"] .sg{fill:var(--aic-blue-900)}
.planmap .ui{fill:none;stroke:var(--aic-blue-900);stroke-width:1.5}
.planmap .dsk{fill:none;stroke:var(--aic-neutral-500);stroke-width:1}
.planmap .hatch{fill:#fff;stroke:var(--aic-neutral-900);stroke-width:1}
.planmap .ln{stroke:var(--aic-neutral-900);stroke-width:1;fill:none}
.planmap .dash{stroke:var(--aic-neutral-400);stroke-width:1;stroke-dasharray:4 4;fill:none}

/* Paneeli piirroksen vierella. Yksi vyohyke kerrallaan, ja
   linkki vie saman sivun osioon, jotta tieto ei ole kahdessa
   paikassa taydellisena. */
.zonepanel{border:1px solid var(--aic-neutral-300);padding:28px;background:#fff}
.zonepanel .n{font-family:var(--font-display-narrow);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--aic-orange-900);margin:0 0 8px}
.zonepanel h3{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.2;margin:0 0 16px}
.zonepanel .loc{margin:0 0 14px;font-size:16px}
.zonepanel .sum{margin:0 0 20px;color:var(--aic-neutral-700);font-size:16px}
.zonepanel .st{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--aic-orange-900);background:var(--aic-neutral-50);border:1px solid var(--color-border-default);padding:7px 10px;display:inline-block;margin:0 0 20px}
/* Linkki on paneelin alaosa, ei sen perassa leijuva pikkulinkki:
   hiusviiva ja koko leveys sitovat sen paneeliin. */
.zonepanel .go{font-family:var(--font-display-narrow);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:block;padding-top:16px;border-top:1px solid var(--color-border-default)}
.zonepanel .empty{margin:0;color:var(--aic-neutral-600);font-size:16px}

/* ── NELJÄN PALSTAN LOHKORUUDUKKO ─────────────────────────────
   Nelja samanarvoista lohkoa vierekkain, ei kortteja. Hiusviivat
   tekevat ruudukon, joten mitaan ei tarvitse kehystaa eika
   varjostaa. Kayttotapaus on rakenne, jossa osat ovat rinnakkaisia
   eika jarjestyksessa: nelja palvelualuetta, nelja tutkimusaluetta.
   Vyohykelohko (.zone) on eri asia: siina on kuva ja teksti, ja
   osat ovat perakkaisia.

   Palstat eivat ole tasaleveita, jotta LOHKOT olisivat.
   1fr-palstat antaisivat kaikille 269 px, mutta reunimmaisilla on
   valia vain yhdella puolella ja keskimmaisilla molemmilla, joten
   tekstileveydet olisivat 245 / 221 / 221 / 221 ja oikea reuna
   jaisi 24 px vajaaksi taydeltaan levealle hiusviivalle.
   Ratkaisu: reunimmaiset palstat ovat 12 px kapeampia ja
   keskimmaiset 12 px leveampia, jolloin 24 pikselin valilla
   jokaisen lohkon tekstileveys on 233 px ja kumpikin ulkoreuna
   on tasan .wrapin reunassa. Keskimmaisista menee lisaksi 1 px
   hiusviivaan.

   H3 on tassa 22 px eika osion 26: 233 pikselissa
   "Advisory & Foresight" rivittyy kahdelle riville, ja isompi
   koko rivittaisi sen kolmelle. */
.blocks{display:grid;column-gap:0;grid-template-columns:calc(25% - 12px) calc(25% + 12px) calc(25% + 12px) calc(25% - 12px);border-top:1px solid var(--color-border-default);border-bottom:1px solid var(--color-border-default)}
.blocks>div{padding:28px 24px 32px}
.blocks>div:first-child{padding-left:0}
.blocks>div:last-child{padding-right:0}
.blocks>div+div{border-left:1px solid var(--color-border-default)}
/* Kaksi lohkoa. Modifioija on .pair eika .two, koska .two on jo
   varattu tyypin A is/is-not -luetteloille (oma gap ja omat
   li-saannot). Nimien tormays kirjoittaisi taman ruudukon
   geometrian uudestaan hiljaa.
   Nelja palstaa tarvitsee epatasaleveat palstat,
   kaksi ei: kun molemmat ovat reunimmaisia, kummallakin on vali
   vain yhdella puolella, joten 1fr 1fr antaa jo yhta leveat
   tekstipalstat ja kumpikin ulkoreuna on tasan .wrapin reunassa. */
.blocks.pair{grid-template-columns:1fr 1fr}
.blocks.pair h3{font-size:26px}
.blocks.pair .role{margin-bottom:16px}
.blocks .top{margin-bottom:14px}
.blocks h3{font-size:22px;margin-bottom:16px}
/* Neljan palstan otsikot ovat eri pituisia, ja "Advisory & Foresight" on
   selvasti pisin. Mitattuna 22 pikselin koossa: Advisory & Foresight 218 px,
   Matching 96, Training 84, Testing 76. Palstan tekstileveys on 25 %
   .wrapin sisallosta miinus 36 px, joten se putoaa alle 218 pikselin kun
   ikkuna on alle noin 1080 px. Silloin otsikko rivittyy kahdelle riville ja
   koko sen alla oleva luettelo valuu muita alemmas, eivatka palstat ole enaa
   samassa linjassa.

   Nimea ei voi lyhentaa: "Advisory & Foresight" sailyy taydessa muodossaan,
   ja pelkka "Advisory" on vanhempi lahdemuoto jota ei kayteta.

   Korjaus on sama tekniikka jota .finame jo kayttaa samassa komponentissa:
   otsikolle varataan kaksi rivia, jolloin kaikkien neljan palstan sisalto
   alkaa samalta korkeudelta rivittyipa otsikko tai ei.

   Rajaus on tarkka eika varmuuden vuoksi laaja. .wrapin sisalto kasvaa vain
   1140 pikseliin asti, joten sita leveammalla palsta ei enaa kapene eika
   otsikko voi rivittya: siella varaus olisi pelkkaa tyhjaa tilaa. Alaraja
   961 px on se, jossa ruudukko vaihtuu kahteen palstaan, ja kahdella
   palstalla tekstileveytta on yli 400 px eli ongelmaa ei ole. */
@media(min-width:961px) and (max-width:1139.98px){
  .blocks:not(.pair) h3{min-height:2.6em}   /* 2 x line-height 1.3 */
}
/* Lohkon oma alaviiva sulkee luettelon. Ilman tata lohkossa on kaksi
   rinnakkaista hiusviivaa, ja koska lohkot venyvat samaan korkeuteen
   mutta sisaltavat 3 tai 4 rivia, sisempi viiva osuisi eri korkeudelle
   joka lohkossa. */
.blocks .facts li:last-child{border-bottom:none}

/* ── YMPÄRISTÖESIMERKIT LOHKON SISÄLLÄ ──────────────────────
   Nimet ovat hiusviivarivit, EI pillereita. Sama paatos on jo
   etusivulla: pillerit poistettiin sielta, koska valkoinen pohja,
   reunaviiva ja pyorea muoto ovat linkin ja painikkeen merkkeja,
   ja lukija odotti niiden vievan eteenpain.
   Tassa nimet ovat linkkeja, joten ne saavat linkin varin ja
   kayttaytyvat kuin linkit. Pilleria ei tarvita eika kayteta. */
.envx{margin-top:22px;padding-top:18px;border-top:1px solid var(--color-border-default)}
.envx .lb{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-neutral-600);margin:0 0 6px}
.envx ul{list-style:none;margin:0;padding:0}
.envx li{padding:9px 0;border-bottom:1px solid var(--color-border-default);font-size:15px;line-height:1.4}
.envx li:last-child{border-bottom:none}

/* Ulos vieva linkki. Merkitaan aina, seka nakyvasti nuolella etta
   ruudunlukijalle piilotetulla tekstilla. Linkki ei ole resurssin
   lataus, joten CSP:n default-src 'none' ei koske sita lainkaan:
   vain upotus vaatisi frame-src-poikkeuksen. */
a.ext .m{display:inline-block;margin-left:5px;font-size:.9em;transition:transform 150ms ease}
a.ext:hover .m,a.ext:focus-visible .m{transform:translate(2px,-2px)}

/* Selite kertoo minne linkki vie: verkkotunnus monospacena ja
   sen alla yksi rivi siita etta valilehti vaihtuu. Ei muuta.
   Nuoli kertoo jo etta linkki on ulkoinen, ja selain nayttaa
   koko URLin tilapalkissa.
   Kuvio on sama kuin etusivun ITEE-merkin selite: aukeaa seka
   hiirella etta nappaimistolta, ei title-attribuuttia (se ei
   aukea nappaimistolta eika kosketuksella, ja ruudunlukija
   lukisi sen linkin tekstin lisaksi). */
a.ext{position:relative}
a.ext .tip{position:absolute;left:0;top:calc(100% + 10px);width:max-content;max-width:260px;background:var(--aic-blue-950);color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-md);padding:8px 11px;font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.4;text-align:left;pointer-events:none;z-index:30;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity 150ms ease,transform 150ms ease,visibility 150ms}
a.ext .tip .t2{display:block;margin-top:3px;font-family:var(--font-body);font-size:11px;line-height:1.4;color:rgba(255,255,255,.78)}
a.ext:hover .tip,a.ext:focus-visible .tip{opacity:1;visibility:visible;transform:none}
@media(hover:none){a.ext .tip{display:none}}

/* ── LOPETUS ──────────────────────────────────────────────────
   Sivun toinen ja viimeinen sininen lohko. */
.cta{background:var(--aic-blue-900);color:#fff;padding:96px 0}
.cta h2{color:#fff}
.cta .eyb{color:var(--aic-orange-600)}
.cta .lead{color:rgba(255,255,255,.86)}
.cta .btn{display:inline-block;font-family:var(--font-display-narrow);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--aic-orange-600);color:var(--aic-neutral-900);padding:18px 36px;border-radius:var(--radius-md);transition:opacity 150ms ease}
.cta .btn:hover{opacity:.85;color:var(--aic-neutral-900)}
/* Osoite painikkeen alla, lisatty 9.9.2026. Osoitetta ei kirjoiteta itse
   painikkeeseen: suomenkielinen muoto "Laheta viesti" + osoite oli
   versaalilla ja 0.14em valistyksella noin 350 px, eika se mahtunut 375
   pikselin naytolle. Sama ratkaisu ja sama ulkoasu kuin etusivulla
   (.contact .fb styles.css:ssa), jotta lopetuslohko lukee samalla tavalla
   kaikilla sivuilla. */
.cta .fb{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.7)}
.cta .fb a{font-weight:600;color:#fff}
.cta .fb a:hover{color:var(--aic-orange-600)}
.cta .also{margin:24px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.84)}
.cta .also a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.cta .also a:hover{color:var(--aic-orange-600);border-bottom-color:var(--aic-orange-600)}

footer.sitefoot{background:var(--aic-blue-950);color:rgba(255,255,255,.72);padding:48px 0}
footer.sitefoot .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
footer.sitefoot p{margin:0;font-size:14px;line-height:1.6}
footer.sitefoot .org{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-orange-600);display:inline-block;margin-top:12px}
footer.sitefoot a{color:rgba(255,255,255,.82)}
footer.sitefoot .itee-f{display:block;width:72px;height:72px;flex:none;background:url(assets/logos/ITEE-logo-white.svg) right center/contain no-repeat}
footer.sitefoot .itee-f:hover{opacity:.85}
footer.sitefoot .totop{flex-basis:100%;order:3;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
footer.sitefoot .totop:hover{color:var(--aic-orange-600)}
/* Somemerkit "takaisin ylos" -rivilla, oikeassa reunassa. Kolme kanavaa,
   ei nelja: Twitch oli vanhan WP-footerin rivissa mutta jaa pois, koska
   kuollut linkki lukee huolimattomuutena vahvemmin kuin puuttuva linkki.

   Nama ovat kolmannen osapuolen tavaramerkkeja, joten ne piirretaan
   virallisessa muodossaan eika niihin lisata Why Oulu -perheen oranssia
   rengasta. Silloin sivuston kaksi omaa ikoniperhetta pysyvat naista
   erillaan. Vanhan sivun sininen merkki oranssin ympyran paalla jatettiin
   pois: neljä oranssia ympyraa veisi huomion footerin ainoalta
   korostukselta, "Built in Oulu" -rivilta, ja ITEE-merkilta.

   Hover on peitto eika vari, kuten ITEE-merkissa. */
footer.sitefoot .futil{flex-basis:100%;order:3;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18)}
footer.sitefoot .futil .totop{flex-basis:auto;order:0;padding-top:0;border-top:none}
footer.sitefoot .social{display:flex;align-items:center;gap:20px;flex:none}
/* Alatunnisteen selostelinkit 21.9.2026 (ohjauksen paatos: saavutettavuus-
   ja tietosuojasivut). Sama asu kuin .totop; rivilla Alkuun-linkin ja
   some-kuvakkeiden valissa, kapealla kietoutuu omalle rivilleen. */
footer.sitefoot .flegal{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 auto 0 0}
footer.sitefoot .flegal a{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
footer.sitefoot .flegal a:hover,footer.sitefoot .flegal a:focus-visible{color:var(--color-fg-accent-on-brand)}
footer.sitefoot .flegal a[aria-current=page]{color:#fff}
footer.sitefoot .so{display:block;width:20px;height:20px;flex:none;opacity:.72;
  background:center/contain no-repeat;transition:opacity 150ms ease}
footer.sitefoot .so:hover,footer.sitefoot .so:focus-visible{opacity:1}
footer.sitefoot .so-li{background-image:url(assets/logos/social-linkedin.svg)}
footer.sitefoot .so-ig{background-image:url(assets/logos/social-instagram.svg)}
footer.sitefoot .so-yt{background-image:url(assets/logos/social-youtube.svg)}

/* Luonnosmerkinta on sivun lopussa, ei ylareunassa: se on tieto
   katselmoijalle eika osa sivun sisaltoa, ja ylhaalla se puskee
   otsakkeen alaspain jokaisella sivulla. */
footer.sitefoot .draftnote{flex-basis:100%;order:4;margin:14px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.55);max-width:80ch}
footer.sitefoot .draftnote b{color:var(--aic-orange-600);font-weight:600}

/* ── VALIT JA POIKKEUKSET ILMAN INLINE-TYYLEJA ────────────────
   CSP:ssa on style-src 'self' eika unsafe-inlinea, joten
   style="..." -attribuutti EI vaikuta mihinkaan: selain pudottaa
   sen aanettomasti eika konsoliin tule mitaan nakyvaa. Naiden
   yhdentoista saannon takana oli aiemmin inline-tyyli.
   Saannot ovat rakenteellisia eivatka apuluokkia: jokainen kertoo
   mika elementti seuraa mita, jolloin arvo seuraa merkkausta
   eika sita tarvitse muistaa kirjoittaa uudestaan.
   Nama ovat ennen mediakyselyja tarkoituksella, jotta kapean
   nayton arvot voittavat edelleen. */

/* Otsakkeen taustakuva. Sama kuvio kuin .zi-*-vyohykemerkeilla:
   polku on tassa tiedostossa, joten se ei muutu kun sivu siirtyy
   hakemistoon /lab/. Inline-tyylissa polku oli suhteessa
   HTML-dokumenttiin ja olisi rikkoutunut siirrossa. */
/* Lab-otsakkeen valokuva, poistettu kaytosta 9.9.2026. Otsake kayttaa nyt
   samaa verkkokenttaa kuin muut alasivut, jotta nelja alasivua muodostavat
   yhden sarjan. Saanto ja kuva jaavat paikalleen: palautus on luokan vaihto
   takaisin muotoon "phead pic lab" ja canvas-rivin poisto. Sivun varsinaiset
   valokuvat ovat sisaltoosioissa eivatka liity tahan. */
.phead.pic.lab .bg{background-image:url(assets/img/lab/AIC-Lab-Lounge-Image-0101.jpg)}

/* Palstan viimeinen kappale ei kanna alamarginaalia. Jokainen
   .cols on osionsa viimeinen lapsi, joten marginaali jai osion
   oman alaosan paalle. services.html:ssa tama oli inline-tyylina
   ja vision.html:ssa ei, mika oli epajohdonmukaisuus eika
   rakenne-ero: nyt molemmat kayttaytyvat samoin ja Vision-sivun
   kaksi osiota tiivistyvat 18 pikselia. */
.cols>div>p:last-child,.quotewrap>div>p:last-child{margin-bottom:0}

/* Nelja lohkoa ja niiden alla paikkamerkki. */
.blocks+.pending{margin-top:40px}

/* Tilamerkinta osion lopussa, .tailin jalkeen. */
.tail+.badge{margin-top:20px}

/* Vyohykkeen sisainen alaosio: toinen zbody saman vyohykkeen
   sisalla, ja sen jalkeen tuleva osiotason h3. */
.zone .zbody+.zbody{margin-top:56px}
.zone .zbody+h3{margin-top:56px}
.zone .zbody+.disc{margin-top:56px}

/* AI Garagen reitti kuvan paikalla. Vaaka, koska kysymys kulkee
   eteenpain eika alas. Pohja on neutral-50 eika umpisininen: AI Garage
   on ainoa vyohyke ilman valokuvaa, joten se tarvitsee yhden pinnan,
   mutta ei sivun painavinta elementtia. Alareunan 2 px sininen viiva on
   sama lattiaviiva kuin vyohykemerkeissa, joten osio ja merkki lukevat
   samasta jarjestelmasta. Teksti on HTML:aa eika SVG-kuvaa, jotta se
   kayttaa sivuston omia fontteja ja skaalautuu. Ei numeroita, koska
   tama on reitti oikeiden ihmisten luo eika vaiheistettu prosessi:
   numerot tekisivat tasta kolmannen prosessimallin etusivun
   "How it works" -polun ja AIC Loopin rinnalle. */
.rfig{margin:0 0 40px;background:var(--aic-neutral-50)}
.route{list-style:none;margin:0 32px;padding:36px 0 0;position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-bottom:2px solid var(--aic-blue-900)}
.route::before{content:"";position:absolute;left:0;right:0;top:40px;
  height:2px;background:var(--aic-blue-900)}
.route li{position:relative;padding:52px 12px 0 0;
  font-family:var(--font-display);font-weight:600;font-size:18px;
  line-height:1.2;color:var(--aic-blue-900)}
.route li::before{content:"";position:absolute;left:0;top:0;
  width:10px;height:10px;box-sizing:border-box;
  border:2px solid var(--aic-blue-900);background:var(--aic-neutral-50)}
.route li::after{content:"";position:absolute;left:4px;top:10px;
  width:2px;height:22px;background:var(--aic-blue-900)}
.route li:last-child::before{border-color:var(--aic-orange-600);
  background:var(--aic-orange-600)}
.rfig figcaption{margin:0;padding:12px 32px 28px}

/* Faktat asemien alle, 10.9.2026: sama viiden sarakkeen ruudukko kuin
   reitilla ilman palstavalia, jolloin palstan vasen reuna on tasmalleen
   asemamerkin kohdalla. Tekstit on kirjoitettu asemakohtaisiksi
   (sisalto/ai-garage-asemat.md), joten lukija saa lukea ne asemien
   selitteina. Otsikko omalla rivillaan vain tassa listassa: kapeassa
   palstassa run-in-otsikon peraan alkava leipa katkesi huonosti.
   Alle 1000 px palstoja olisi liikaa (760 pikselissa 136 px), joten
   siella kaksi palstaa ja alle 760 yksi. Alareunan viiva tulee silloin
   listalle, koska palstoissa viimeinen li ei ole alimpana vasemmalla. */
.facts.stations{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0 32px}
.facts.stations li{padding:15px 20px 0 0;border-bottom:none}
.facts.stations b{display:block;margin-bottom:4px}
@media(max-width:999.98px){
  .facts.stations{display:block;columns:2;column-gap:56px;margin:0;
    border-bottom:1px solid var(--color-border-default)}
  .facts.stations li{padding:15px 0;break-inside:avoid}
  .facts.stations b{display:inline;margin:0}
}

@media(max-width:759.98px){
  .route{grid-template-columns:1fr;margin:0 20px;padding:26px 0 0}
  /* Vaakakisko pois pystyasettelusta. Luovutuksen lohko ei nollannut
     tata, jolloin viiva jai kulkemaan ensimmaisen aseman nimen lapi. */
  .route::before{display:none}
  .route li{padding:0 0 22px 30px;font-size:17px}
  .route li::before{top:.25em}
  .route li::after{top:calc(.25em + 10px);height:calc(100% - .25em - 10px)}
  .route li:last-child::after{display:none}
  .rfig figcaption{padding:12px 20px 24px}
  .facts.stations{columns:1}
}

/* Avattava tekninen erittely, <details>. Kymmenen riviä ohjetta niille,
   jotka lähettävät aineistoa näytöille, ei kertomusta vyöhykkeestä.
   Suljettunakin näkyy, että ohje on olemassa ja mitä se kattaa: vain
   arvot menevät piiloon. Natiivi <details> toimii ilman JavaScriptiä ja
   on näppäimistöllä käytettävä sellaisenaan.

   Merkki on plus joka muuttuu miinukseksi, sama muoto kuin Health Kioskin
   vyöhykemerkissä. Ei kolmiota, koska sivustolla ei ole muualla nuolia. */
.disc{border-top:2px solid var(--aic-blue-900)}
.disc>summary{list-style:none;cursor:pointer;display:block;
  padding:18px 44px 18px 0;position:relative}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary .dt{display:block;font-family:var(--font-display);font-weight:600;
  font-size:20px;line-height:1.3;color:var(--aic-blue-900)}
.disc>summary .dn{display:block;margin-top:6px;font-size:15px;line-height:1.5;
  color:var(--aic-neutral-600)}
.disc>summary:hover .dt{color:var(--aic-orange-900)}
.disc>summary::after{content:"";position:absolute;right:8px;top:27px;
  width:16px;height:0;border-top:2px solid var(--aic-blue-900)}
.disc>summary::before{content:"";position:absolute;right:15px;top:20px;
  width:0;height:16px;border-left:2px solid var(--aic-blue-900)}
.disc[open]>summary::before{display:none}
.disc .spec{margin-bottom:6px}

/* Alaosion ingressi on pienempi kuin vyohykkeen oma ingressi:
   se johdattaa H3:een, ei H2:een. */
.zone .zbody .lead{font-size:17px;margin-bottom:20px}

/* Luettelon jalkeen tuleva valiotsikko palstan sisalla. */
.zbody .facts+h3{margin-top:36px}

/* Lyhyt huomautuskappale valiotsikon alla. Leipatekstia pienempi
   ja harmaampi, koska se kertoo mika muuttuu eika mika on. */
.note{margin:0;font-size:16px;line-height:1.6;color:var(--aic-neutral-700)}

/* Luottolause ja tietotaulukko: valys riippuu siita mita edeltaa. */
.facts+.credit{margin-top:24px}
.facts+.note,.spec+.envx,.envx+.note{margin-top:24px}
.zonepanel+.spec{margin-top:36px}

/* ═══ KOKOLUOKKA 2: 760-960 px ══════════════════════════════
   Lahempana tyopoytaa kuin puhelinta. Navi pysyy yhtena rivina
   ja 72 pikselissa.

   MITATTU, EI LASKETTU. nav-fi.html lataa taman navigaation
   kahdeksassatoista leveydessa ja vaihtaa nimet kolmen nimiston
   valilla. Tulos: viisi tayta nimea mahtuvat yhdelle riville
   760 pikselista ylospain seka englanniksi (Vision, AIC Lab,
   Services, Environments, Contact) etta suomeksi (Visio, AIC Lab,
   Palvelut, Ympatistot, Yhteystiedot). Palkki mittaa 71,99 px
   kaikissa mitatuissa leveyksissa, yksi rivi, ei ylivuotoa.

   Kuudella nimella tama ei mahtuisi. Viisi on siksi ehto, ei
   mieltymys, ja se on sivukartassa jo paatetty. */
@media(min-width:760px) and (max-width:960px){
  nav.sitenav .in{gap:12px}
  /* Kielivalitsimen ja avaajan vali 12 -> 24 px kuten leveammalla
     (kayttajan havainto 14.9.2026, noin 770 px). Vain alasivuilla:
     etusivun ruudukon gap on tassa valissa jo 24 px (styles.css). */
  nav.sitenav.agc-host [data-agc-trigger]{margin-left:12px}
  .navlinks{gap:12px}
  .navlinks a{font-size:11px;letter-spacing:.1em}
  .chan{font-size:11px;padding:0 12px}
  .phead{padding:72px 0 56px}
  .phead.pic{padding:88px 0 64px}
  .phead h1{font-size:44px}
  .phead .lead{font-size:18px}
  .phead .rule{margin:24px 0}
  .toc ol{grid-template-columns:repeat(2,1fr);gap:0 32px}
  .sec{padding:72px 0}
  h2{font-size:34px}
  .hd{margin-bottom:40px}
  .cols{grid-template-columns:1fr;gap:0;max-width:68ch}
  /* Vyohyke pysyy kahtena palstana. Yhtena palstana 3:2-kuva olisi
     896 pikselin taitossa 597 px korkea eli koko ruudun mittainen,
     ja luettelo putoaisi kokonaan taitteen alle. Kahtena palstana
     kuva on 452 x 301 ja tekstipalsta 412 px, noin 50 merkkia
     rivilla 16 pikselin koossa. */
  .zone .zbody{gap:32px}
  .zone .zhd{margin-bottom:28px}
  .plan{grid-template-columns:1fr 1fr;gap:32px}
  .pairs .row{grid-template-columns:minmax(150px,32%) 1fr;gap:24px}
  /* Nelja palstaa on 896 pikselin taitossa 208 px per palsta, mika ei
     riita nimelle eika kolmelle luetteloriville. Kaksi ja kaksi.
     Molemmat variantit luetellaan erikseen: .blocks.pair on kahden
     luokan valitsin eika mediakysely lisaa spesifisyytta, joten
     pelkka .blocks ei voittaisi sita. */
  .blocks,.blocks.pair{grid-template-columns:1fr 1fr}
  .blocks>div{padding:28px 32px 30px 0;border-bottom:1px solid var(--color-border-default)}
  .blocks>div:first-child,.blocks>div:last-child{padding:28px 32px 30px 0}
  .blocks>div+div{border-left:none}
  .blocks>div:nth-child(2n){padding:28px 0 30px 32px;border-left:1px solid var(--color-border-default)}
  .blocks>div:nth-last-child(-n+2){border-bottom:none}
  .cta{padding:72px 0}
}

/* ═══ KOKOLUOKKA 3: <=759.98 px ═════════════════════════════
   759.98 eika 760, koska tablettilohko alkaa 760:sta ja tasan
   siina pisteessa molemmat osuisivat. Sama raja on jo
   styles.css:ssa ja hero-network.js:ssa.

   NAVI ON 81 PX, EIKA MUUTU.
   Erittely sailyy sellaisenaan: .in-padding 11 + 11, logorivi 36,
   gap 9, linkkirivi 13, alareunan viiva 1.
   Asiointiavaaja on 28 px korkea ja kielivalitsin 18 px, eli
   kumpikaan ei ylita ylarivin korkeuden maaraavaa ITEE-merkkia
   (36 px). Ylarivi pysyy 36 pikselissa ja koko palkki 81:ssa,
   joten etusivun hero min-height:max(560px,calc(100svh - 81px))
   on edelleen oikein eika sita mitata uudestaan.

   Ylarivin leveys 375 pikselin naytolla:
     reunapadding      40
     ITEE              36
     kielivalitsin     52
     avaaja            46
     kolme 9 px valia  27
     ---------------------
     yhteensa         201, tunnukselle jaa 174 px (tarve n. 144)
   320 pikselilla tunnukselle jaa 119 px, jolloin kuvausteksti
   piilotetaan (ks. alla). */
@media(max-width:759.98px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  section[id]{scroll-margin-top:97px}
  nav.sitenav{height:auto}
  nav.sitenav .in{height:auto;padding:11px 20px;gap:9px;grid-template-columns:1fr auto auto auto;grid-template-rows:36px auto;grid-auto-flow:row;align-items:center}
  .mark{grid-row:1;grid-column:1;height:36px}
  .chan{grid-row:1;grid-column:2;height:28px;padding:0 10px;font-size:10px;letter-spacing:.08em}
  .chan .l{display:none}
  .chan .s{display:inline}
  .lang{grid-row:1;grid-column:3;justify-self:end;margin-right:12px;font-size:10px;gap:6px;letter-spacing:.08em;line-height:18px;height:18px}
  .itee{grid-row:1;grid-column:4;width:36px;height:36px}
  .navlinks{grid-row:2;grid-column:1/-1;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:6px 11px}
  .navlinks a{font-size:10px;letter-spacing:.08em}
  .navlinks a[aria-current=page]:after{bottom:-11px}
  .navlinks .l{display:none}
  .navlinks .s{display:inline}

  .phead{padding:48px 0 40px}
  .phead.pic{padding:56px 0 44px}
  .phead .up{margin-bottom:20px}
  .phead h1{font-size:32px;letter-spacing:-.03em;max-width:none}
  .phead .rule{margin:20px 0}
  .phead .lead{font-size:17px}
  .phead .where{margin-top:20px}

  .toc .wrap{padding-top:24px;padding-bottom:26px}
  .toc ol{grid-template-columns:1fr;gap:0}
  .sec{padding:56px 0}
  .hd{margin-bottom:32px}
  .top{gap:12px;margin-bottom:14px}
  h2{font-size:27px}
  .lead{font-size:17px}
  .cols{grid-template-columns:1fr;gap:0}
  .zone .zbody{grid-template-columns:1fr;gap:24px}
  .zone .zhd{margin-bottom:24px}
  h2.zt{gap:12px}
  .zi{width:28px;height:28px}
  .pairs .row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  /* Nimikko arvon ylle. Arvo saa koko leveyden, joten
     "1920 x 1080" ja "Monday to Friday, 8am to 6pm" pysyvat
     yhdella rivilla 375 pikselissa. */
  .spec .row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .spec.two{grid-template-columns:1fr}
  .spec.two .row{grid-template-columns:1fr;gap:4px}
  .plan+.spec{margin-top:28px}
  .plan{grid-template-columns:1fr;gap:24px}
  .blocks,.blocks.pair{grid-template-columns:1fr}
  .blocks>div,.blocks>div+div,.blocks>div:first-child,.blocks>div:last-child,.blocks>div:nth-child(2n){padding:24px 0 26px;border-left:none;border-bottom:1px solid var(--color-border-default)}
  .blocks>div:last-child{border-bottom:none}
  .blocks h3,.blocks.pair h3{font-size:20px;margin-bottom:12px}
  .plan .sheet{padding:12px}
  .pending{padding:20px}
  .cta{padding:64px 0}
  .cta .btn{padding:16px 26px;font-size:13px}
  footer.sitefoot{padding:36px 0}
  footer.sitefoot .itee-f{width:56px;height:56px}
}

/* ═══ PUHELIN VAAKATASOSSA: 600-759.98 px ═══════════════════
   Kokoluokka 3 on kirjoitettu pystynayton puhelimelle, jossa
   palstaa on 353 px. Vaakatasossa samaa lohkoa osuu 667 ja 736
   pikselin leveys, jolloin palstaa on 627 ja 696 px: yksi palsta
   venyttaa luettelorivit lahes 80 merkkiin ja tekee sivusta
   turhan pitkan juuri silla naytolla, jossa korkeutta on vahiten.

   Tama lohko palauttaa vain taiton. Navi, otsikkokoot ja
   pystyvalit jaavat kokoluokka 3:n arvoihin, koska ne on mitattu
   nayton korkeuden eika leveyden mukaan. Lohko on kokoluokka 3:n
   jalkeen, koska se kumoaa juuri sen ruudukot.

     667 px  ->  palsta 627, sarake 297
     736 px  ->  palsta 696, sarake 332

   Pohjapiirros (.plan) jatetaan tarkoituksella yhteen palstaan:
   297 pikselin levyisena SVG:n vyohyketunnukset menevat alle
   luettavan koon. */
@media(min-width:600px) and (max-width:759.98px){
  .toc ol{grid-template-columns:repeat(2,1fr);gap:0 28px}
  .cols{max-width:68ch}
  .zone .zbody{grid-template-columns:1fr 1fr;gap:28px}
  .pairs .row{grid-template-columns:minmax(140px,32%) 1fr;gap:20px;padding:20px 0}
  .spec .row{grid-template-columns:minmax(130px,26%) 1fr;gap:20px;padding:15px 0}
  .spec.two{grid-template-columns:1fr 1fr;gap:0 28px}
  .spec.two .row{grid-template-columns:minmax(100px,34%) 1fr;gap:14px}

  /* Nelja palstaa on 297 pikselin sarakkeella liian kapea, kaksi
     ei. Reunaviivat ja padding tulevat samasta kuviosta kuin
     760-960 px:n lohkossa, vain sisapadding on 24 px eika 32. */
  .blocks,.blocks.pair{grid-template-columns:1fr 1fr}
  .blocks>div,.blocks>div:first-child,.blocks>div:last-child{
    padding:24px 24px 26px 0;border-left:none;
    border-bottom:1px solid var(--color-border-default)}
  .blocks>div:nth-child(2n){padding:24px 0 26px 24px;
    border-left:1px solid var(--color-border-default)}
  .blocks>div:nth-last-child(-n+2){border-bottom:none}
}

/* Pieni puhelin. Tunnuksen kuvausteksti jaa pois, jotta ylarivi
   ei rivity: rivin rivittyminen kasvattaisi navin yli 81 px:n. */
@media(max-width:359.98px){
  .mark .dsc{display:none}
  .navlinks a{font-size:9.5px;letter-spacing:.04em}
  .navlinks{gap:6px 8px}
  h2{font-size:24px}
  .phead h1{font-size:28px}
}

/* ═══ MATALA IKKUNA ═════════════════════════════════════════
   Ehto on korkeus eika leveys, ja lohko on tiedoston lopussa
   jotta se voittaa leveyslohkot kaskadissa.
   Alasivulla ei ole taysikorkeaa osiota lainkaan, joten tassa
   ei tarvita omaa taittoa: pelkka pystypadding kiristyy. Tama
   on suora etu siita, ettei alasivulla ole heroa. */
@media(max-height:460px) and (orientation:landscape){
  .phead{padding:36px 0 32px}
  .phead.pic{padding:44px 0 36px}
  .phead h1{font-size:30px;max-width:30ch}
  .phead .rule{margin:16px 0}
  .phead .lead{font-size:16px}
  .sec{padding:44px 0}
  .hd{margin-bottom:28px}
  .cta{padding:48px 0}
  .toc .wrap{padding-top:20px;padding-bottom:22px}
}

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

/* ═══ TYYPPI A: PITKAN TEKSTISIVUN KOMPONENTIT ══════════════
   Nama ovat samat sisaltomuodot kuin manifestisivun nykyisessa
   toteutuksessa, mutta ne on siirretty pois sinisilta pohjilta.
   Perustelu: alasivulla sinista on tasan kaksi kertaa, otsake ja
   lopetus. Nostoteksti, kerrosluettelo ja jatkumo saivat varinsa
   sinisesta pohjasta; nyt ne saavat sen typografiasta ja
   hiusviivoista, mika toimii myos silloin kun sivulla on
   yksitoista osiota eika kymmenta. */
.quotewrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pull{max-width:24ch;font-family:var(--font-display);font-size:38px;font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--aic-blue-900);margin:0}
.pull .sub{display:block;font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--aic-neutral-700);margin-top:20px;max-width:34ch}

.stack{border-top:2px solid var(--aic-blue-900)}
.stack .row{display:grid;grid-template-columns:44px 1fr minmax(150px,20%);gap:24px;padding:20px 0;border-bottom:1px solid var(--color-border-default);align-items:baseline}
.stack .n{font-family:var(--font-display-narrow);font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--aic-orange-900)}
.stack .t{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--aic-blue-900);margin:0 0 4px}
.stack p{margin:0;font-size:16px;line-height:1.5;color:var(--aic-neutral-700)}
.stack .g{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-neutral-600);text-align:right}
.areas-line{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.areas-line span{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-blue-900);border:1px solid var(--aic-blue-200);border-radius:var(--radius-full);padding:6px 14px}

.flow{display:grid;grid-template-columns:repeat(5,1fr)}
.flow .st{padding:22px 20px 22px 18px;border-left:1px solid var(--color-border-default)}
.flow .st:first-child{border-left:1px solid var(--aic-orange-600)}
.flow .k{display:block;font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-orange-900);margin-bottom:10px}
.flow p{margin:0;font-size:16px;line-height:1.45;color:var(--aic-neutral-700)}

.states{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.states .c{border-top:2px solid var(--aic-orange-600);padding-top:20px}
.states .c p:last-child{margin-bottom:0}
.states .q{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.25;color:var(--aic-blue-900);margin:0 0 14px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.two h3{margin-bottom:16px}
.two ul{list-style:none;margin:0;padding:0}
.two li{padding:16px 0;border-top:1px solid var(--color-border-default);font-size:16px;line-height:1.55;color:var(--aic-neutral-700)}
.two li:last-child{border-bottom:1px solid var(--color-border-default)}
.two li b{color:var(--color-fg-primary);font-weight:600}

@media(min-width:760px) and (max-width:960px){
  .quotewrap{grid-template-columns:1fr;gap:32px}
  .pull{font-size:32px;max-width:30ch}
  .flow{grid-template-columns:1fr 1fr}
  .flow .st:nth-child(3){border-left:1px solid var(--aic-orange-600)}
  .flow .st:nth-child(5){border-left:1px solid var(--aic-orange-600)}
  .states,.two{grid-template-columns:1fr 1fr;gap:32px}
  .stack .row{grid-template-columns:38px 1fr;gap:18px}
  .stack .g{grid-column:2;text-align:left;margin-top:6px}
}

@media(max-width:759.98px){
  .quotewrap{grid-template-columns:1fr;gap:28px}
  .pull{font-size:26px;max-width:none}
  .pull .sub{font-size:16px;max-width:none;margin-top:16px}
  .stack .row{grid-template-columns:32px 1fr;gap:14px;padding:18px 0}
  .stack .g{grid-column:2;text-align:left;margin-top:6px}
  .flow{grid-template-columns:1fr}
  .flow .st{padding:18px 0 18px 16px;border-left:1px solid var(--color-border-default)}
  .states,.two{grid-template-columns:1fr;gap:28px}
  .states .c{padding-top:16px}
  .states .q{font-size:19px}
  .areas-line{gap:8px}
  .areas-line span{font-size:11px;padding:5px 11px}
}

@media(max-height:460px) and (orientation:landscape){
  .pull{font-size:26px}
  .quotewrap{gap:28px}
}

/* Ohituslinkki (WCAG 2.4.1): nakyy vain kohdistettuna. Lisatty 10.9.2026. */
.skip{position:absolute;left:-9999px;top:16px;z-index:40;background:#fff;color:var(--aic-blue-900);font-family:var(--font-body);font-size:15px;font-weight:600;padding:10px 14px;border:2px solid var(--aic-orange-600);border-radius:var(--radius-md);text-decoration:none}
.skip:focus{left:16px;outline:none}

/* ── VISIO, VISUAALINEN TOINEN KIERROS ────────────────────────
   21.9.2026. Lisätään subpage.css:n loppuun sellaisenaan; tämä
   tiedosto ei jää sivustolle omaksi tyylitiedostoksi. Viisi osiota
   muuttuu: 02 siirtymät numeroidaan, 03 verkkokenttä nostolauseen
   taakse, 04 vahvuudet ruudukkona, 05 kerrokset ryhmissä ja
   tutkimusalueet tunnuksineen pystykaistana, 06 jatkumo yhtenä
   viivana ja paluurivinä. Osio 03 lisättiin päätöksellä 21.9.2026;
   briefin suositus oli enintään neljä osiota.

   Ei uusia värejä eikä fontteja: kaikki arvot ovat
   colors_and_type.css:n tokeneita. Ei id-valitsimia, ei
   riippuvuutta etusivun tyylitiedostoon. Kaksi palstaa alkaa
   600 pikselistä, kuten muuallakin.
   ──────────────────────────────────────────────────────────── */

/* OTSIKOIDEN RIVITYS ─ virke kerrallaan.
   Kaksivirkkeinen otsikko katkesi sanan kohdalta ("A model can
   answer. A / system has to work."), koska rivitys ei tiedä mitään
   virkerajoista. .ln tekee virkkeestä oman rivinsä.

   Sääntö on ehdollinen, ei kategorinen: virke saa oman rivinsä vain
   jos se mahtuu yhdelle riville. Kaksi otsikkoa jätettiin siksi
   ennalleen. Osion 01 ensimmäinen virke on 39 merkkiä ja rivi vetää
   noin 34, joten pakotus tekisi kahdesta rivistä kolme. Osion 07
   otsikko on yksi virke, jossa ei ole virkerajaa katkaistavaksi.

   Mitattu 1418 px:n leveydellä rivi kerrallaan DOMista (Range), ei
   katsomalla. Jos otsikkokokoja tai .hd:n leveyttä muutetaan, mittaus
   tehdään uudestaan: .ln voi silloin muuttua virheestä eduksi tai
   toisin päin.

   Suomenkielinen sivu: sama sääntö, mutta eri virkepituudet, joten
   kohdat on mitattava erikseen eikä .ln-merkintöjä kopioida sellaisenaan.

   Kapealla näytöllä pitkä virke rivittyy edelleen normaalisti oman
   rivinsä sisällä; .ln ei estä rivitystä, se vain takaa virkerajan. */
.ln{display:block}

/* 02 RATKAISEMATON OSA ─ viisi siirtymää järjestyksessä.
   Ingressi sanoo, että jokaisessa siirtymässä on kysymys, johon on
   vastattava ennen kuin seuraava askel kannattaa ottaa. Rivit ovat
   siis järjestyksessä, mutta järjestys ei näkynyt mitenkään: viisi
   samannäköistä riviä luetaan luettelona, ei reittinä. Numero on
   ainoa lisäys. Ei uusia sanoja, ei uutta pintaa, sama numerointi
   kuin kerroksilla osiossa 05. Numero on merkkauksessa
   (<span class="n">), ei CSS-laskurina: laskuri jää pois kopioidusta
   tekstistä ja osasta apuvälineitä, ja 05 tekee saman merkkauksella. */
.pairs.steps .row{grid-template-columns:38px minmax(170px,24%) 1fr;gap:0 24px}
.pairs.steps .n{font-family:var(--font-display-narrow);font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--aic-orange-900)}

/* 03 TEKOÄLYN KAKSI MERKITYSTÄ ─ verkkokenttä nostolauseen taakse.
   Sivun ainoa pysähdys puolivälissä, ja tausta on järjestelmän kuudesta
   tyypistä se, jota sivulla ei vielä ollut leipätekstin tasolla:
   verkkokenttä tummalla. Sama tyyppi kuin sivun otsakkeessa, jossa
   kenttä on canvasina; tässä se on staattinen master, ei canvasia,
   ei skriptiä, ei liikettä.

   Master on täydellä mustellaan, ei himmennettynä. Ensimmäinen versio
   käytti läpinäkyvää leikkausta 28 prosentin peitolla umpisinisen
   päällä, ja tulos oli käytännössä tasainen sininen pinta: kentän
   muste on 1,8 px 1920 pikselin leveydellä, eli osion levyisenä alle
   1,3 px, ja kolmasosan peitolla se katoaa. Kenttä joko on kenttä tai
   sitä ei ole.

   Tekstin kontrasti: valkoinen tekstin päällä on 15:1, mutta valkoiset
   kenttäviivat kulkevat paikoin tekstin takana, joten päälle tulee
   päätetty scrim (--scrim-field-stops, aina blue-950) alareunasta
   ylös. Ei tummempaa peittoa, vaan scrim, kuten taustajärjestelmä
   sanoo.

   Osion korkeus on yli --field-min-band (30 mm), joka on mitattu raja
   sille, että kuvio lukee kenttänä eikä kohinana.

   Sininen esiintyy sivulla tämän jälkeen kolmesti: otsake, tämä osio
   ja lopetus. Päätös 21.9.2026; aiempi sääntö oli kaksi. */
.sec.field{position:relative;overflow:hidden;background:var(--aic-blue-900) url(assets/img/aio-kentta-tumma.svg) center/cover no-repeat;border-top:0}
.sec.field+.sec{border-top:0}
.sec.field:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--scrim-field-stops));pointer-events:none}
.sec.field>.wrap{position:relative}
.sec.field .eyb{color:var(--aic-orange-600)}
.sec.field .num{color:rgba(255,255,255,.72)}
.sec.field .pull{color:#fff}
.sec.field .pull .sub{color:rgba(255,255,255,.90)}
.sec.field p{color:rgba(255,255,255,.92)}
/* Linkki sinisellä pinnalla. Valkoinen teksti valkoisen leipätekstin
   seassa ei erotu linkiksi pelkällä hiusalleviivauksella, joten
   merkintä on sama kuin sivuston muissa linkeissä: 2 px oranssi
   alleviivaus ja perässä oranssi nuoli (vrt. .pairs a.row .nm:after).
   Nuoli on merkki, ei tekstiä: lukittu virke ei muutu. */
.sec.field a{color:#fff;text-decoration-color:var(--aic-orange-600);text-decoration-thickness:2px;text-underline-offset:4px}
.sec.field a:after{content:"\00A0\2192";color:var(--aic-orange-600);text-decoration:none;display:inline-block}
.sec.field a:hover{color:var(--aic-orange-600)}

/* 04 MIKSI OULU ─ seitsemän vahvuutta ruudukkona.
   Pystylista luetaan järjestyksenä, ja osion päätösrivi sanoo
   päinvastaista: positio perustuu yhdistelmään. Ruudukko lukee
   yhdistelmänä. Viimeinen rivi vie koko leveyden, koska se on
   niistä ainoa, joka koskee kaikkia muita. Naapurisolujen alaviivat
   osuvat kohdakkain ilman lisäsääntöä: ruudukon rivi venyttää
   molemmat solut samankorkuisiksi. */
.pairs.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.pairs.grid .row{display:block;padding:20px 0}
.pairs.grid .t{margin-bottom:6px}
.pairs.grid .row:last-child{grid-column:1/-1}

/* Osion päätösrivi väitteeksi.
   Osiossa 04 viimeinen rivi on osion varsinainen väite: positio
   perustuu yhdistelmään, ei yksittäisen teknologian omistamiseen.
   Se oli 19 px harmaata leipätekstiä seitsemän vahvuuden perässä,
   eli se katosi luettelon häntään. Nyt osio päättyy väitteeseen:
   oranssi 56 x 3 viiva ja teksti 22 px näyttöfontilla, sinisenä.

   Koko on tarkoituksella H2:n (38 px) ja leipätekstin välissä eikä
   kumpikaan niistä: tämä ei ole otsikko vaan johtopäätös. Väli on
   56 px, eli selvästi suurempi kuin luettelon rivivälit, jotta rivi
   luetaan osion lopetuksena eikä kahdeksantena vahvuutena.

   Sääntö on luokassa .claim eikä osiokohtaisessa valitsimessa: sama
   rakenne on muillakin alasivuilla, ja niissä päätösrivi on nyt
   .lead.tail. Vaihto tehdään sivu kerrallaan, ei kerralla. */
.claim{margin:56px 0 0;max-width:52ch;font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.35;color:var(--aic-blue-900)}
.claim:before{content:"";display:block;width:56px;height:3px;background:var(--aic-orange-600);margin:0 0 22px}

/* 05 KUUSI KERROSTA ─ ryhmä kertaalleen, ei joka rivillä.
   Taulukossa oikean reunan ryhmäsarake toisti saman sanan kahdesti
   peräkkäin kolme kertaa. Ryhmä on nyt kerran kuuden kerroksen
   vasemmalla puolella, ja kerrokset ovat pareina sen vieressä.

   Tutkimusalueet ovat oma pystykaistansa koko pinon korkeudelta,
   koska osion ingressi sanoo että ne eivät ole yksi kerroksista
   vaan kulkevat kaikkien läpi. Vaakarivinä pinon alla ne lukivat
   seitsemäntenä kerroksena. Oranssi 2 px on tässä rajaviiva, ei
   pinta. */
.layers{display:grid;grid-template-columns:1fr minmax(160px,196px);column-gap:40px;align-items:stretch}
.lstack{border-top:2px solid var(--aic-blue-900)}
.lgrp{display:grid;grid-template-columns:154px 1fr;column-gap:24px;padding:22px 0 24px;border-bottom:1px solid var(--color-border-default)}
.lgrp .gl{grid-row:1/3;margin:0;font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.14em;line-height:1.45;text-transform:uppercase;color:var(--aic-neutral-600)}
.lgrp .row{display:grid;grid-template-columns:38px 1fr;column-gap:16px;align-items:baseline}
.lgrp .row+.row{margin-top:18px}
.lgrp .n{font-family:var(--font-display-narrow);font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--aic-orange-900)}
.lgrp p{margin:0;font-size:16px;line-height:1.5;color:var(--aic-neutral-700)}
.lgrp .t{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.3;color:var(--aic-blue-900);margin:0 0 4px}
.cross{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:26px 0 28px 22px;border-left:2px solid var(--aic-orange-600)}
.cross span{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--aic-blue-900)}
/* Tutkimusaluetunnukset ovat masterit sellaisinaan, vaalea leikkaus
   valkoiselle pinnalle. Ei piirretä uudestaan, ei väritetä, ei
   venytetä; 40 px pystykaistassa, 28 px kapealla, molemmat yli
   masterin 24 px:n vähimmäiskoon. Polku on juuresta (assets/...),
   koska url() ratkaistaan tyylitiedoston sijainnista eikä sivun:
   ../assets osoittaisi sivuston ulkopuolelle. Sama koskee kenttää
   osiossa 03. Sama neljä tunnusta
   liikkuu heron kentässä, joten sivu käyttää samaa merkkiä kahdesti
   eri tavalla. */
.cross .tk{width:40px;height:40px;background:center/contain no-repeat}
.cross .tk-local{background-image:url(assets/logos/aio-theme-local-light.svg)}
.cross .tk-human{background-image:url(assets/logos/aio-theme-human-light.svg)}
.cross .tk-physical{background-image:url(assets/logos/aio-theme-physical-light.svg)}
.cross .tk-connected{background-image:url(assets/logos/aio-theme-connected-light.svg)}

/* 06 LASKENNAN JATKUMO ─ yksi viiva viiden askeleen yli.
   Askeleilla oli vain pystyviivat välissään, mikä luki viitenä
   erillisenä laatikkona. Ingressi sanoo päinvastoin: jatkumo on
   yksi polku. Yhtenäinen 2 px sininen viiva askelten yllä sanoo
   saman muodossa.

   Päätösrivi on nyt paluuviiva jatkumon alla, ei irrallinen virke
   sen jälkeen: käyttödata palaa tutkimukseen, ja nuoli osoittaa
   takaisin alkuun. Sisennys 18 px on sama kuin ensimmäisen askeleen
   tekstillä: 18 px pehmustetta ja 1 px reunaviiva, eli nuolen muste
   ja Sandboxes ovat samalla pystylinjalla. Kapealla askeleen pehmuste
   on 16 px, joten paluurivin on 17 px.

   Viimeistä askelta ei merkitä erikseen: sen sanamuoto on avoin
   (manifesti-teksti.md osio 6), joten kaaviossa ei ole päätepistettä
   eikä korostusta. */
.contin .flow{border-top:2px solid var(--aic-blue-900)}
.ret{display:grid;grid-template-columns:20px 1fr;column-gap:10px;align-items:baseline;margin:0;padding:16px 0 0 19px;border-top:1px solid var(--color-border-default);font-size:16px;line-height:1.5;color:var(--aic-neutral-700)}
.ret:before{content:"\2190";font-size:19px;line-height:1;color:var(--aic-orange-600)}

/* Tabletti pystyssä ja kapeampi työpöytä. Tutkimusalueet siirtyvät
   pinon alle vaakakaistaksi, koska 196 px:n sarake veisi kerrosten
   tekstiltä liikaa. Oranssi viiva kääntyy vasemmasta reunasta
   yläreunaan, jolloin kaista pysyy samana merkkinä. */
@media(max-width:960px){
  .layers{grid-template-columns:1fr;row-gap:0}
  /* Kaista ruudukkona kapealla (CD 21.9.2026, toinen kierros): neljä
     saraketta 760 px:sta ylospain, kaksi sen alla. Sarakemaara on
     annettu, ei johdettu: auto-fit antoi 393 px:ssa yhden sarakkeen ja
     noin 640 px:ssa kolme. Mitattu 834: 4 x 171 px, 852: 4 x 175 px,
     393: 2 x 157 px, nimi yhdella rivilla; korkeus 393:ssa 180 -> 92 px. */
  .cross{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 24px;padding:18px 0 0;border-left:0;border-top:2px solid var(--aic-orange-600)}
  .cross span{grid-template-columns:28px 1fr;column-gap:10px;align-items:center}
  .cross .tk{width:28px;height:28px}
}
@media(max-width:759.98px){ .cross{grid-template-columns:1fr 1fr} }
/* Osion 02 otsikko alle 600 px (CD 21.9.2026): pakotettu virkeraja antoi
   393 px:ssa rivit 281 / 110 / 306 / 337 px; balance 222 / 229 / 274 /
   300 px, korkeus sama 123 px. Vain EN-otsikossa (luokka ln-soft). */
@media(max-width:599.98px){ h2.ln-soft .ln{display:inline} h2.ln-soft{text-wrap:balance} }
/* Osion 09 FI-otsikko (toteutus 30.9.2026, CD:n 21.9. linjaus: huono hanta
   -> balance vain siihen otsikkoon): 393 px:ssa pretty antoi rivit 282 / 71 px
   ("ei ole."), balance 185 / 167 px. 834 px:sta ylospain yksi rivi, ei muutosta. */
h2.bal{text-wrap:balance}

@media(min-width:600px) and (max-width:759.98px){
  .pairs.grid{grid-template-columns:1fr}
  .pairs.grid .row:last-child{grid-column:auto}
  .pairs.steps .row{grid-template-columns:30px minmax(130px,30%) 1fr;gap:0 16px}
}

/* Alle 600 px nimikko nousee arvon ylle, kuten muillakin pareilla.
   Numero pysyy omassa sarakkeessaan, jotta järjestys näkyy myös
   pystyssä. */
@media(max-width:599.98px){
  .pairs.steps .row{grid-template-columns:30px 1fr;gap:6px 14px}
  .pairs.steps .row>p{grid-column:2}
  .pairs.steps .n{grid-row:1}
}

@media(max-width:759.98px){
  .pairs.grid{grid-template-columns:1fr;column-gap:0}
  .pairs.grid .row{padding:18px 0}
  .claim{margin-top:40px;font-size:19px}
  .claim:before{margin-bottom:18px}
  .pairs.grid .row:last-child{grid-column:auto}
  .lgrp{grid-template-columns:1fr;padding:20px 0 22px}
  .lgrp .gl{grid-row:auto;margin:0 0 14px}
  .lgrp .row{grid-template-columns:32px 1fr;column-gap:14px}
  .lgrp .row+.row{margin-top:16px}
  .ret{padding-left:17px}
}

/* Puhelin vaakatasossa: sama ehto kuin muuallakin tiedostossa on
   korkeus, ei leveys. Tutkimusalueiden kaista tiivistyy, mitään ei
   piiloteta. */
@media(max-height:460px) and (orientation:landscape){
  .cross{gap:10px 24px}
  /* Jatkumo on sivun ainoa varsinainen kaavio, ja se on luettava
     yhtenä kuvana. Puhelimen vaakatasossa näkyvää korkeutta on navin
     jälkeen 321 px ja kaavio oli 334 px, eli 13 px yli. Askeleen
     pystypehmuste 22 -> 14 px vie kolme riviä yhteensä 48 px alaspäin,
     jolloin kaavio mahtuu näkymään. Mitattu rigin kohdasta 03; jos
     askelten määrä tai taitto muuttuu, mittaus tehdään uudestaan. */
  .flow .st{padding-top:14px;padding-bottom:14px}
  .ret{padding-top:12px}
}

/* ═══════════════════════════════════════════════════════════════
   AIC LAB -LOHKO, visuaalinen kierros 21.9.2026
   Lisataan sellaisenaan subpage.css:n loppuun, Visio-lohkon
   (leima 20260921c) perass. Lohko ei korvaa yhtaan olemassa
   olevaa saantoa eika kayta id-valitsimia: kaikki saannot
   osuvat vain tassa kierroksessa lisattyihin luokkiin
   (.rjoin, .route-desc, .zgrid) tai .plan-palstan sisaan.

   Nelja osiota muuttuu: 01 AI Garage, 03 Immersion Zone,
   07 Visiting ja 08 Inside the faculty. Muihin ei kosketa, eika otsake muutu: se pysyy
   verkkokenttana (paatos 21.9.2026, perustelu kansion READMEssa).

   Toimitus: uusi leima on ?v=20260921d (CD:n paketissa 20260922a;
   paivamaarat korjattu 21.9., sovitus samana paivana).
   ═══════════════════════════════════════════════════════════════ */

/* ── 01 AI GARAGE: ASEMA JA SEN SELITYS SAMASSA ELEMENTISSA ───
   Ennen: viisi aseman nimea .rfig-kuviossa, sitten kuvateksti,
   ja vasta sen jalkeen viisi selitysta erillisena .facts.stations
   -ruudukkona. Ruudukot olivat samankokoiset mutta eri
   elementeissa, joten kuvateksti tuli aseman ja sen selityksen
   valiin, harmaa pohja loppui kesken ja oikea pehmuste erosi
   (12 px vs. 20 px). Ruudunlukija sai viisi nimea ja sitten
   viisi irrallista selitysta.

   Nyt jokainen asema on yksi <li>: nimi .rs ja selitys <p>.
   Ei numeroita, oranssi vain viimeisessa asemassa ja alareunan
   2 px viiva = merkkien lattiaviiva, kuten ennen. Sanamuoto ei
   muutu; muuttuu vain se, mihin selitys on kiinni.

   HUOM toteutukselle: .facts.stations -saannot (subpage.css
   rivit 646-655 ja niiden mediakyselyt) jaavat kaytosta, koska
   luokkaa ei ole enaa sivulla eika sita kayteta muualla. Niita
   EI poisteta tassa muutoksessa; poisto on oma siivous, jotta
   tama lohko ei kosketa olemassa olevia saantoja. */
.rjoin{margin:0 0 40px}
/* Kanavalause omaksi kappaleekseen, 21.9.2026. Osion lopussa oli
   yksi kappale, jossa oli kaksi eri asiaa: mista kysymys tulee
   sisaan, ja etta palvelumalli on kesken. Ne ovat nyt kaksi
   kappaletta samassa jarjestyksessa ja samassa paikassa, osion
   lopussa kuvion jalkeen, kuvion vasemmassa reunassa eli
   ingressin linjassa (mitattu 0 px).

   Paikka on osion loppu eika reitin alku: lause on
   loppuhuomautus samalla perusteella kuin vyohykkeen 06
   sijaintihuomio, ei johdanto reittiin (ohjauksen paatos
   21.9.2026). Sanamuoto ei muutu, vain se etta kaksi vaitetta
   ovat kaksi kappaletta, jolloin kumpikaan ei lue toisen
   tarkennuksena.

   Luokka on .rchan eika .chan: .chan on sivustolla jo
   asiointiavaajan nappi (subpage.css ja garage-channel.css),
   ja pelkka .note .chan peri nappisaannot, jolloin virke
   rendautui 11 pikselin versaalina oranssireunaisena pillerina
   oman laatikkonsa ulkopuolelle. */
.rchan{margin:0 0 16px;max-width:72ch}
.route-desc li{padding:52px 24px 30px 0}
.route-desc .rs{display:block}
.route-desc li p{margin:12px 0 0;font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.55;color:var(--aic-neutral-700)}
.route-desc li p b{display:block;margin-bottom:4px;color:var(--color-fg-primary);font-weight:600}
.rjoin figcaption{padding:18px 32px 28px}

/* Pystymuoto alkaa 1000 pikselista eika 760:sta, kuten pelkalla
   nimirivilla. Syy on mitta: 961 pikselin taitossa sarake on 173
   px ja 16 pikselin selitysteksti saa siihen noin 22 merkkia
   rivilla. Kahteen palstaan asemia ei voi laittaa, koska viisi
   asemaa jakautuisi 2/2/1 eika vaakakisko lue reittina muuta
   kuin yhdella rivilla. Pystymuoto on jo olemassa (kisko pois,
   liitosviiva asemien valilla), ja selitys kulkee sen mukana.
   Alle 1000 px selitys saa koko palstan leveyden, joten se on
   1-2 rivia.

   MITATTU 21.9.2026: pelkka pystypino maksoi 834 pikselissa +142
   ja 852 pikselissa +167, koska viisi asemaa vie viisi rivia siina
   missa erillinen kahden palstan faktaruudukko vei kolme. Siksi
   600-999 px:n valilla nimi ja selitys ovat rinnakkain, sama
   nimikko-arvo-kuvio kuin .pairs .row ja .spec .row. Kahta palstaa
   asemille ei otettu: numeroita ei saa lisata (reitti, ei prosessi),
   ja ilman numeroa jarjestys katoaa palstanvaihdossa. */
@media(max-width:999.98px){
  .route-desc{grid-template-columns:1fr;margin:0 32px;padding:26px 0 0}
  .route-desc::before{display:none}
  .route-desc li{padding:0 0 24px 30px}
  .route-desc li::before{top:.25em}
  .route-desc li::after{top:calc(.25em + 10px);height:calc(100% - .25em - 10px)}
  .route-desc li:last-child::after{display:none}
  .route-desc li:last-child{padding-bottom:30px}
  .route-desc li p{margin:6px 0 0}
  .rjoin figcaption{padding:16px 32px 26px}
}
@media(min-width:600px) and (max-width:999.98px){
  .route-desc li{display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:0 24px;align-items:baseline}
  .route-desc li p{margin:0}
}
@media(max-width:759.98px){
  .route-desc{margin:0 20px;padding:24px 0 0}
  .rjoin figcaption{padding:14px 20px 24px}
}

/* ── 03 IMMERSION ZONE: KAKSI KUVAA PARINA ───────────────────
   Ennen: kaksi .zbody-lohkoa. Ensimmaisessa kuva ja nelja
   faktaa, toisessa kuva ja kolmen rivin huomio, eli 364 px
   korkean valokuvan vieressa oli noin 280 px tyhjaa. Kuvat ovat
   samasta tilasta kahdesta suunnasta, joten ne ovat pari.

   Nyt kuvat ovat yhdella rivilla, faktat koko leveydelle kahteen
   palstaan ja Demonstrations-huomio osion lopussa. Koko leveyden
   kuvaa ei otettu: 1140 pikselissa 3:2 olisi 760 px korkea eika
   kolmen seinan projektio nay siina paremmin kuin 546 px:ssa.

   Elementtijarjestys on kuva A, faktat, kuva B, huomio. Se on
   kapean nakyman jarjestys, jossa ruudukkoa ei ole: puhelimessa
   kaksi valokuvaa perakkain olisi 540 px kuvaa ilman tekstia.
   Leveilla naytoilla kuva B nostetaan ruudukossa kuva A:n
   viereen; kohdistusjarjestys ei muutu, koska osiossa ei ole
   yhtaan kohdistettavaa elementtia. */
.zgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;align-items:start}
.zgrid>.zfa{grid-column:1;grid-row:1}
.zgrid>.zfb{grid-column:2;grid-row:1}
.zgrid>.zfacts{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-bottom:1px solid var(--color-border-default)}
/* Alareunan viiva tulee listalle eika viimeiselle riville, koska
   kahdessa palstassa viimeinen li on oikealla eika alimpana
   vasemmalla. Sama ratkaisu kuin .facts.stations kapealla. */
.zgrid>.zfacts li{border-bottom:none}
.zgrid>.zclose{grid-column:1/-1;grid-row:3}
.zgrid>.zclose h3{margin-top:0}
@media(min-width:760px) and (max-width:960px){
  .zgrid{gap:32px}
  .zgrid>.zfacts{column-gap:32px}
}
@media(max-width:759.98px){
  .zgrid{grid-template-columns:1fr;gap:24px}
  .zgrid>.zfa,.zgrid>.zfb,.zgrid>.zfacts,.zgrid>.zclose{grid-column:auto;grid-row:auto}
  .zgrid>.zfacts{grid-template-columns:1fr}
}
/* Puhelin vaakatasossa ja pieni tabletti: sama ruudukko kuin
   leveammalla, kuten .zone .zbody tassa lohkossa. */
@media(min-width:600px) and (max-width:759.98px){
  .zgrid{grid-template-columns:1fr 1fr;gap:28px}
  .zgrid>.zfa{grid-column:1;grid-row:1}
  .zgrid>.zfb{grid-column:2;grid-row:1}
  .zgrid>.zfacts{grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr;column-gap:28px}
  .zgrid>.zclose{grid-column:1/-1;grid-row:3}
}

/* ── 08 FROM THE FACULTY: KAKSI LINKKIA KAISTAKSI ────────────
   Kaksi 15 pikselin tekstilinkkia leijui 641 px korkean
   julistekuvan alla hiusviivan alla, ja kohde nakyi vain
   hoverilla. Nyt lohko on koko leveyden kaista 2 px sinisella
   ylaviivalla (sama kielioppi kuin .spec ja .disc), ja linkit
   ovat kaksi puolen leveyden rivia: nimi 20 px otsikkofontilla,
   sen alla kohde oulu.fi, nuoli rivin oikeassa reunassa ja koko
   rivi kohteena vahintaan 64 px korkeana.

   Sanamuoto ei muutu: "oulu.fi" on sama merkkijono, joka on jo
   linkin .tip-vihjeessa, ja .vh-teksti ruudunlukijalle sailyy.
   Vihje piilotetaan vain tassa kaistassa, koska kohde on nyt
   aina nakyvissa; .tip jaa merkkaukseen, jotta sivuston
   yhteinen a.ext-kuvio pysyy koskemattomana.

   Hover on pohjapeitto eika tekstin varinvaihto, sama kuin
   .keys-min .kb: rivi on kohde, ei sana. */
.envx-band{margin-top:32px;padding-top:0;border-top:2px solid var(--aic-blue-900)}
.envx-band .lb{margin:16px 0 10px}
.envx-band ul{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.envx-band li{padding:0;border-bottom:1px solid var(--color-border-default);font-size:inherit;line-height:inherit}
.envx-band li:last-child{border-bottom:1px solid var(--color-border-default)}
.envx-band a.ext{display:block;min-height:64px;padding:16px 44px 16px 0;font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.25;color:var(--aic-blue-900);text-decoration:none;transition:background 150ms ease}
.envx-band a.ext:hover{background:rgba(23,7,169,.06);color:var(--aic-blue-900)}
.envx-band a.ext:active{background:rgba(23,7,169,.12)}
.envx-band a.ext .dest{display:block;margin-top:7px;font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-neutral-600)}
.envx-band a.ext .m{position:absolute;right:12px;top:20px;margin:0;font-size:16px;color:var(--aic-orange-600)}
.envx-band a.ext:hover .m,.envx-band a.ext:focus-visible .m{transform:translateX(4px)}
.envx-band a.ext .tip{display:none}
@media(max-width:759.98px){
  .envx-band ul{grid-template-columns:1fr;gap:0}
  .envx-band a.ext{font-size:18px;padding:14px 40px 14px 0}
  .envx-band a.ext .m{top:17px}
}

/* ── 07 VISITING: OSOITE PIIRROKSEN ALLE TIETOKAISTANA ───────
   Pohjapiirros on pystymalli (700 x 848). 1140 pikselin taitossa
   arkki on 596 px levea ja noin 762 px korkea, ja oikeaan
   palstaan tuli vain avain ja paneeli, noin 595 px. Piirroksen
   viereen jai noin 170 px tyhjaa ja osoite oli koko sivun
   levyisena kaistana sen alla.

   Osoite siirtyy piirroksen alle, ei oikeaan palstaan.
   Ensimmainen versio 21.9. laittoi sen avaimen ja paneelin
   valiin, ja se oli vaarin: paneeli on osion selitys ja se
   putosi 250 pikselia sen avainrivin alle, jota juuri
   napsautettiin. Toinen versio laittoi sen arkin alle vasempaan
   palstaan, ja se maksoi +112 px: 596 pikselin palstassa
   .spec.two -ruudukon arvopalsta on 148 px, jolloin katuosoite
   rivittyi kolmelle riville.

   Nyt osoite on koko leveydella arkin ja paneelin alla, neljana
   soluna nimikko arvon ylla (sama kuvio kuin .spec .row alle
   760 px). Se lukee kartan tietokaistana, ja paneeli on kiinni
   avaimessa (.keys-min+.zonepanel, 24 px).

   Osoite ei liiku valinnasta 760 pikselista ylospain. Yli 960
   px:ssa arkki (762 px) on palstan korkein elementti, joten
   paneelin kasvaminen ei kasvata riviaan; 760-960 px:ssa palsta
   on arkkia korkeampi, joten siina kokoluokassa osoite on arkin
   alla vasemmassa palstassa eika sen rivi riipu paneelista.
   Paneelille ei siis tarvita min-heightia. Alle 760 px palstat
   ovat yksi ja jarjestys on nykytilan: arkki, avain, paneeli,
   osoite; siella osoite liikkuu kuten nykytilassa.

   Arkin ja kaistan valin omistaa .planin oma rivivali (48 px yli
   960, 32 px 760-960, 24 px sen alla). Kaistalle EI anneta
   margin-topia: ensimmainen versio antoi 44 px rivivalin paalle,
   ja vali oli mitattuna 93 px, joka irrotti kaistan siita
   kartasta jonka tietoja se on.

   Arkkia ei kapeuteta: piirroksen tilamerkinnat ovat 16 px
   viewBoxissa, eli 596 pikselin levyisena 13,6 px ja 480
   pikselissa 11 px.

   Toteutukselle: .plan+.spec -saanto (rivi 312) ei enaa osu
   Lab-sivuun, koska osoite on .planin sisalla. Saanto jaa
   paikalleen muita sivuja varten; kommentti paivitetaan samassa
   muutoksessa. */
/* Alueet, jotka eivat kuulu vierailuun. Valvomo ja henkilokunnan
   alue saavat tummemman pohjan ja vinoviivoituksen, postihuone
   pelkan vaalean pohjan: sen kautta kuljetaan AI Garageen, joten
   se ei ole suljettu alue vaan vain ei vierailun kohde.
   Kolmiportainen sama neutraali: 50 kierrettava, 100 lapikulku,
   200 ei vierailijoille. Ei uusia vareja.

   Pohja on merkin kantaja ja viivoitus lisa. Syy on mitta:
   viivoitus on 1,5 px 700 yksikon viewBoxissa, eli 596 pikselin
   levyisena 1,3 px ja puhelimessa noin 0,7 px, jossa se alkaa
   kadota. Tasainen pohja ei katoa missaan koossa.

   Tama on graafinen ero ilman tekstivastinetta: selitetta ei
   lisatty, koska uusi sanamuoto on sisaltopaatos. Ks. README
   avoin 6. */
.planmap .floor.nv{fill:var(--aic-neutral-200)}
.planmap .floor.nvl{fill:var(--aic-neutral-100)}
.planmap .nvh{fill:url(#nvhatch);stroke:none;pointer-events:none}

@media(min-width:961px){
  .plan-addr>.sheet{grid-column:1;grid-row:1}
  .plan-addr>.side{grid-column:2;grid-row:1}
  .plan-addr>.addr{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
  .plan-addr>.addr .row{grid-template-columns:1fr;gap:4px;padding:16px 0 2px;border-bottom:none}
}
@media(min-width:760px) and (max-width:960px){
  /* 377 pikselin palstassa nimikko ja arvo eivat mahdu kahteen
     sarakkeeseen, joten .spec.two on tassa yksi palsta. */
  .plan-addr>.sheet{grid-column:1;grid-row:1}
  .plan-addr>.side{grid-column:2;grid-row:1/span 2}
  .plan-addr>.addr{grid-column:1;grid-row:2;grid-template-columns:1fr;align-self:start}
}
@media(max-width:759.98px){
  .plan-addr>.sheet,.plan-addr>.side,.plan-addr>.addr{grid-column:auto;grid-row:auto}
}

/* ── SERVICES, VISUAALINEN KIERROS ────────────────────────────
   21.9.2026. Lisätään subpage.css:n loppuun sellaisenaan Visio-lohkon
   (leima 20260921c) ja Lab-lohkon (leima 20260921d) perään; tämä tiedosto
   ei jää sivustolle omaksi tyylitiedostoksi. Uusi leima on ?v=20260921e.

   Kaksi osiota neljästä muuttuu: 01 neljän palvelualueen ruudukko ja
   03 yksi tekstimitta. Osiot 02 ja Closing, otsake ja sisällysluettelo
   ovat ennallaan. Lohko ei korvaa yhtään olemassa olevaa sääntöä, ei käytä
   id-valitsimia eikä muuta Visio- tai Lab-lohkoa: jokainen valitsin
   sisältää tässä kierroksessa lisätyn luokan (.rows tai .meas), eikä
   kumpikaan esiinny muualla sivustolla.

   Ei uusia värejä, fontteja eikä pyöristyksiä: rakenne vain.
   ──────────────────────────────────────────────────────────── */

/* 01 NELJÄ PALVELUALUETTA ─ nimet samalle linjalle, luettelot samalle
   linjalle, ympäristöviite omalle riville.

   Osion ingressi sanoo, että alueet ovat yhtä painavia. Taitto sanoi
   toista kahdesta syystä. Ensimmäinen: otsikot ovat eri pituisia, joten
   kahden palstan näkymissä "Advisory & Foresight" vie kaksi riviä ja
   "Testing" yhden, jolloin neljä luetteloa alkoi eri korkeudelta.
   Toinen ja isompi: .envx on vain Testing-lohkossa, ja se alkoi heti
   kolmen faktan jälkeen eli naapurilohkojen neljännen faktarivin
   kohdalta. Nimiö "Environment examples" luki siinä neljäntenä faktana.

   Ruudukko ratkaisee molemmat ilman uusia sääntöjä sisällölle: lohko on
   subgrid, joka perii emonsa rivit, eli .top, h3, .facts ja .envx ovat
   neljä jaettua riviä. Rivin korkeus tulee korkeimmasta solusta, joten
   luettelot alkavat samalta linjalta ja ympäristöviite alkaa vasta
   kaikkien luetteloiden alta. Lohkot ovat sen jälkeen yhtä korkeita,
   mikä on osion oma väite.

   Neljäs rivi on tyhjä kolmessa lohkossa neljästä. Se on tarkoitus:
   tyhjä rivi on se tila, jonka ympäristöviite vie, eikä sitä anneta
   yhdelle lohkolle etuna muihin.

   min-height:2.6em -sääntö otsikoille (961-1139.98 px) jää paikalleen.
   Se on nyt tarpeeton, koska ruudukon rivi tekee saman, mutta sen
   poisto muuttaisi olemassa olevaa sääntöä: se on oma siivous.

   Ympäristöviitteen oma 22 pikselin yläväli on jaetulla rivillä turha.
   Se on kirjoitettu tilanteeseen, jossa viite tulee heti luettelon
   perään; jaetulla rivillä tyhjä rivi tekee saman työn, ja kaksi
   päällekkäistä väliä irrotti viitteen omasta luettelostaan 86
   pikselin päähän. Nollattuna väli on 64 px ja osion hinta 34 px
   entisen 56:n sijaan. Hiusviiva ja sen 18 pikselin pehmuste jäävät,
   eli viite lukee edelleen lohkon alaosana eikä neljäntenä faktana.
   Väli on jaetun rivin hinta, ei tavoite (ohjauksen päätös 21.9.2026);
   kolmatta asentoa ei ole niin kauan kuin luetteloiden pituudet
   eroavat yhdellä rivillä. */
.blocks.rows{grid-template-rows:repeat(4,auto)}
.blocks.rows>div{display:grid;grid-template-rows:subgrid;grid-row:span 4}
.blocks.rows>div>*{min-width:0}
.blocks.rows .envx{margin-top:0}

/* Kaksi palstaa: kaksi riviparia eli kahdeksan riviä. Rivimäärä on
   annettu eikä johdettu, jotta subgrid osuu emon eksplisiittisiin
   raiteisiin eikä implisiittisiin. Sama rivimäärä kattaa 760-960 px:n
   ja 600-759.98 px:n lohkot, joissa molemmissa palstoja on kaksi. */
@media(max-width:960px){
  .blocks.rows{grid-template-rows:repeat(8,auto)}
}

/* Alle 600 px lohkot ovat allekkain, eikä linjakysymystä ole: kahden
   lohkon välillä ei ole yhteistä riviä, jolle kohdistaa. Subgrid pois,
   jolloin osio on tässä näkymässä tavu tavulta nykytila. Ympäristöviite
   tulee siellä taas heti luettelon perään, joten sen oma yläväli
   palautetaan. */
@media(max-width:599.98px){
  .blocks.rows{grid-template-rows:auto}
  .blocks.rows>div{display:block;grid-row:auto}
  .blocks.rows .envx{margin-top:22px}
}

/* 03 KESKUSTELUN ALOITTAMINEN ─ yksi mitta.

   Osio oli kaksi 466 pikselin palstaa jatkuvaa leipätekstiä, eli neljä
   kappaletta luettiin alas ja takaisin ylös. Kappaleet ovat kuitenkin
   peräkkäisiä: tarve sisään, Matching yhdistää, useampi alue kerrallaan
   on normaali tapaus, ja sen jälkeen päätöspisteet, joissa työ jatkuu
   tai pysähtyy. Yksi mitta lukee ne siinä järjestyksessä, jossa ne on
   kirjoitettu.

   68ch on sama mitta, jonka .cols saa jo 760-960 px:n lohkossa, eli
   kapeampi näkymä oli tältä osin oikeassa ja leveä väärässä. Alle
   961 px osio ei muutu lainkaan: .cols on siellä jo yksi palsta.

   Uusi luokka eikä .cols-säännön muutos: .cols on yhteinen Visio-sivun
   kanssa (kaksi osiota), ja sen leveys on siellä oma päätöksensä.

   Kaksi div-elementtiä säilyvät merkkauksessa, vaikka ne eivät enää ole
   palstoja: ne pitävät kappaleryhmät samassa 1:1-järjestyksessä kuin
   suomenkielisellä sivulla, jolle toteutus vie saman rakenteen.
   Kappaleiden väli tulee kappaleen omasta 18 pikselin marginaalista,
   joten ryhmien raja ei näy eikä sitä ole tarkoitus nähdä. */
.meas{max-width:68ch}
.meas>div:last-child>p:last-child{margin-bottom:0}

/* Toteutuksen lisays 21.9.2026: suomenkielisella sivulla lohkossa on
   viides lapsi, .finame (suomenkielinen vastine nimen alla), joten
   jaettuja riveja on viisi eika nelja. Muuten .envx putoaisi subgridin
   implisiittiselle riville eika olisi naapurien linjassa. Luokka r5
   vain fi/palvelut/-sivulla; EN-sivu kayttaa CD:n lohkoa sellaisenaan. */
.blocks.rows.r5{grid-template-rows:repeat(5,auto)}
.blocks.rows.r5>div{grid-row:span 5}
@media(max-width:960px){
  .blocks.rows.r5{grid-template-rows:repeat(10,auto)}
}
@media(max-width:599.98px){
  .blocks.rows.r5{grid-template-rows:auto}
  .blocks.rows.r5>div{grid-row:auto}
}

/* ── CONTACT, VISUAALINEN KIERROS ─────────────────────────────
   21.9.2026. Lisätään subpage.css:n loppuun sellaisenaan Visio-lohkon
   (leima 20260921c), Lab-lohkon (20260921d) ja Services-lohkon
   (20260921e) perään; tämä tiedosto ei jää sivustolle omaksi
   tyylitiedostoksi. Uusi leima on ?v=20260921f.

   Yksi osio neljästä muuttuu: 03 Where we are. Osiot 01 ja 02, lopetus
   ja otsake ovat ennallaan. Lohko ei korvaa yhtään olemassa olevaa
   sääntöä eikä käytä id-valitsimia: molemmat valitsimet sisältävät
   tässä kierroksessa lisätyn luokan .maps, joka ei esiinny muualla
   sivustolla.

   Ei uusia värejä, fontteja eikä pyöristyksiä: rakenne vain.
   ──────────────────────────────────────────────────────────── */

/* 03 SIJAINTI ─ kartat osoitelistan kuudenneksi riviksi.

   Osoitelista on .spec.two eli kaksi palstaa, ja siinä on viisi riviä.
   Pariton rivimäärä jätti alarivin oikean solun tyhjäksi, jolloin
   listan päättävä hiusviiva oli 514 px 1076:sta (1440 ja 1181),
   354/755 (834) ja 363/773 (852): lista loppui puolileveänä. Heti sen
   alla Maps oli oma .envx-lohkonsa, 122 px korkea ja 22 px:n välin
   päässä, omalla täysleveällä hiusviivallaan. Alareunassa oli siis
   kaksi eri levyistä viivaa peräkkäin, ja kartat lukivat erillisenä
   ryhmänä, vaikka ne ovat sama asia kuin osoite: miten tänne tullaan.

   Kartat ovat nyt listan kuudes rivi (dt Maps / Kartat, dd samat kaksi
   a.ext-linkkiä), jolloin ne täyttävät tyhjän solun. Ruudukon rivi
   venyttää molemmat solut samankorkuisiksi, joten Vierailut-rivi ja
   Maps-rivi päättyvät samaan pikseliin ja viiva sulkee listan koko
   leveydeltä. Alle 760 px lista on yksi palsta ja Maps on sen
   viimeinen täysleveä rivi, eli sama lukujärjestys kuin ennen.

   Osio lyhenee mitattuna 140 / 138 / 140 / 62 / 163 px
   (1440 / 834 / 1181 / 393 / 852), koska erillisen lohkon korkeus ja
   sen yläväli jäävät pois eikä kuudes rivi maksa mitään: se menee
   tilaan, joka oli jo varattu.
   Kolme sääntöä riittää. Linkkien luettelo tarvitsee listamerkin ja
   sisennyksen nollauksen ja rivien välin. Kolmas nollaa listan
   `.two li` -säännön: luokka .two on tässä osoitelistan omassa
   luokkaluettelossa (.spec.two.addr) ja tarkoittaa kahta palstaa,
   mutta se kantaa myös kahden palstan luettelokomponentin rivityylin
   (16 px pehmuste ja hiusviiva). Erillisessä .envx-lohkossa se ei
   osunut linkkeihin; listan sisällä se osuu, ja ilman nollausta
   Maps-rivi olisi 154 px eikä 87 px. Linkin koko, väri, nuoli ja
   uuden välilehden merkintä tulevat a.ext-säännöistä sellaisinaan.

   Linkkien koko on 15 px eikä dd:n 16 px. Se on sama koko, joka niillä
   oli erillisessä .envx-lohkossa, ja se on myös ehto: 834 pikselin
   näkymässä arvosolu on 217 px ja linkki "MazeMap, campus navigator"
   nuolineen 218 px 16 pikselin koossa, jolloin nuoli tippui omalle
   rivilleen (nuoli on inline-block eli oma rivityskohtansa). 15
   pikselin koossa linkki on 204 px ja mahtuu yhdelle riville kaikissa
   viidessä näkymässä. */
.spec .maps ul{list-style:none;margin:0;padding:0}
.spec .maps li{padding:0;border:0;font-size:15px;line-height:1.5}
.spec .maps li+li{margin-top:6px}

/* Huomautuksen yläväli. Nykytilassa se tuli säännöstä .envx+.note,
   joka ei enää osu, kun karttalohkoa ei ole: huomautus tulisi kiinni
   listan päättävään viivaan. Vastaavaa .spec+.note -sääntöä ei ole,
   joten tämä ei korvaa mitään. Valitsin on .addr eikä .spec, jotta se
   koskee vain osoitelistaa; sivuston toinen .addr-lista (AIC Lab,
   Visiting) ei ole huomautuksen edellä, joten sääntö osuu yhteen
   paikkaan. Sama 24 px kuin ennenkin. */
.addr+.note{margin-top:24px}

/* Toteutuksen lisays 21.9.2026 (ei CD:n paketissa): osion 02
   huomautus tuli kiinni palvelualuelistan alaviivaan, koska
   .pairs+.note-saantoa ei ollut (.note on margin:0 ja vain
   .facts/.envx/.addr+.note saavat 24 px). Sama 24 px kuin muilla
   huomautuksilla. Osuu vain Contact-sivujen osioon 02; etusivun
   .note on styles.css:n puolella. */
.pairs+.note{margin-top:24px}