/* ============================================================
   PALVELUSIVU AIKAKAUSLEHTENÄ (Jenna 2.11.2026)
   tools/rakenna_laskeutumissivut.py, "leiska": "aikakauslehti".
   Liike: aikakauslehti.js (otsikon sovitus, tuotteiden tulo ja
   parallaksi, vaakarata) + laskeutumissivu.js ja brandstein.js.
   Kuvat aina omassa kuvasuhteessaan, ei rajausta. Taustattomiin
   kuviin ei varjoja (CLAUDE.md).
   ============================================================ */
.ps-aikakauslehti main{ overflow-x:clip; font-size:clamp(15px,1.05vw,18px); line-height:1.65; }
:where(.ps-aikakauslehti main) img{ display:block; width:100%; height:auto; }
:where(.ps-aikakauslehti main) figure{ margin:0; }
.ps-aikakauslehti .kicker{ margin:0; font:500 11px/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; }
.ps-aikakauslehti main .linkki{ display:inline-block; margin-top:1em; font:400 clamp(15px,1.2vw,20px) var(--f-nav); text-transform:uppercase; color:var(--puna); text-decoration:none; border-bottom:2px solid; }
.sovita{ white-space:nowrap; }
.ps-korostus{ position:relative; isolation:isolate; display:inline-block; white-space:nowrap; }
.ps-korostus .tussi-el--alleviivaus{ left:-2%; width:104%; bottom:-.3em; height:.32em; color:var(--puna); z-index:-1; }

/* 1. HERO: jättiotsikko, tuotteet kollaasina sen edessä, käsiala ja nuoli pusseihin */
.A-avaus{ position:relative; padding:clamp(90px,9vw,150px) var(--reuna) clamp(28px,4vw,48px); }
.A-avaus__kicker{ position:relative; z-index:3; margin-bottom:clamp(10px,1.4vw,24px); font:500 11px/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; }
.ps-aikakauslehti main .A-avaus__kicker a{ text-decoration:none; }
.A-avaus__kicker > span[aria-hidden]{ color:var(--puna); }
.A-ot{ margin:0; font:400 120px/.8 var(--f-otsikko); text-transform:uppercase; color:var(--puna); }   /* koko: aikakauslehti.js sovittaa leveyteen */
.A-pussit{ position:relative; z-index:2; height:clamp(200px,24vw,500px); margin-top:calc(clamp(200px,24vw,500px) * -.3);
  display:flex; justify-content:center; align-items:flex-end; will-change:transform; }
.ps-aikakauslehti main .A-pussi{ width:auto; height:calc(var(--h) * 1%); margin:0 -1.2%; transform:rotate(var(--r)); }
/* Verkkosivut: puhelinnäkymät hyllyssä ilman puhelimen runkoa (Jenna 3.11.2026), pelkkä kuvakaappaus
   pienellä pyöristyksellä, jottei sivun yläpalkki leikkaudu. Varjo, koska kuva ei ole taustaton. */
.ps-aikakauslehti main .A-puhelin{ display:block; aspect-ratio:600 / 1298; overflow:hidden; border-radius:clamp(6px,.7vw,12px);
  box-shadow:0 2px 4px rgba(25,25,25,.12), 0 24px 40px -14px rgba(25,25,25,.35); }
.ps-aikakauslehti main .A-pussit--puhelimet .A-puhelin{ margin:0 .6%; }   /* ei peitä naapurin näyttöä */
.ps-aikakauslehti main .A-puhelin img{ width:100%; height:100%; }
/* Visuaalinen identiteetti: logorivi (Jenna 3.11.2026, esinekollaasi oli "sekalainen seurakunta").
   Logot suorassa, väleissä tilaa, keskilinjalle eikä hyllyn pohjalle. */
.ps-aikakauslehti main .A-pussit--logot{ align-items:center; gap:clamp(20px,3.4vw,72px); height:clamp(150px,17vw,360px); margin-top:clamp(28px,3.6vw,72px); }
.ps-aikakauslehti main .A-pussit--logot .A-pussi{ margin:0; }
.A-kasi{ position:relative; z-index:3; display:table; margin:clamp(56px,7vw,140px) 6% 0 auto; font:400 clamp(24px,2.6vw,48px)/1 var(--f-kasi);
  text-transform:uppercase; color:var(--ruskea); transform:rotate(-3deg); }
.A-kasi .tussi-el--nuoli{ width:3em; left:-2.6em; top:-3.9em; z-index:4; aspect-ratio:900/680; color:var(--puna); transform:scaleY(-1) rotate(-14deg); }
.A-avaus--paljas .A-kasi{ margin-top:clamp(16px,1.8vw,36px); }   /* ilman kuvia käsiala otsikon alle (Jenna 3.11.: "liian iso väli") */
.A-tekija{ margin:18px 0 0; font-size:12px; color:var(--harmaa); } .A-tekija span{ color:var(--puna); margin:0 .4em; }

/* 2. Ingressi, leipäteksti palstoihin, reunalaatikko */
.A-runko{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(20px,2.4vw,48px); padding:clamp(48px,7vw,128px) var(--reuna) 0; }
.A-ingressi{ grid-column:1 / 11; margin:0 0 clamp(32px,4vw,64px); font:400 clamp(28px,3.6vw,68px)/1.08 var(--f-otsikko); text-transform:uppercase; }
.A-palstat{ grid-column:1 / 9; columns:2 300px; column-gap:clamp(28px,3vw,64px); }
.A-p{ margin:0 0 1.1em; break-inside:avoid; }
.A-palstat--yksi{ columns:auto; max-width:64ch; }
/* Yhden palstan vieressä reunalaatikko lähelle tekstiä, ettei isolla näytöllä jää aukkoa (Jenna 3.11.2026) */
.A-runko:not(.A-runko--levea):has(.A-palstat--yksi){ display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:clamp(40px,5vw,110px); }
.A-runko:not(.A-runko--levea):has(.A-palstat--yksi) .A-ingressi{ flex:0 0 100%; }
.A-runko:not(.A-runko--levea):has(.A-palstat--yksi) .A-palstat{ flex:0 1 64ch; }
.A-runko:not(.A-runko--levea):has(.A-palstat--yksi) .A-laatikko{ flex:0 1 clamp(320px,30vw,620px); }
.A-p--anfangi{ display:flow-root; }   /* anfangi ei sisennä seuraavaa kappaletta, kun kappale on alle kolme riviä */
.A-p--anfangi::first-letter{ float:left; font:400 4.6em/.78 var(--f-nimi); color:var(--puna); margin:.06em .1em 0 0; }
@supports (initial-letter:3) or (-webkit-initial-letter:3){   /* anfangi täsmälleen kolmen rivin korkuinen (Jenna) */
  .A-p--anfangi::first-letter{ float:none; -webkit-initial-letter:3; initial-letter:3; font-size:inherit; line-height:inherit; margin:0 .14em 0 0; }
}
.A-laatikko{ grid-column:9 / 13; align-self:start; border-top:4px solid var(--musta); padding-top:14px; }
.A-laatikko ol{ margin:14px 0 0; padding:0; list-style:none; counter-reset:n; }
.A-laatikko li{ counter-increment:n; padding:14px 0; border-bottom:1px solid rgba(25,25,25,.25); font-size:.9em; }
.A-laatikko li::before{ content:counter(n,decimal-leading-zero); color:var(--puna); font-size:11px; }
.A-laatikko h3{ margin:2px 0 6px; font:400 clamp(20px,1.7vw,30px)/1.05 var(--f-otsikko); text-transform:uppercase; }
.A-laatikko p{ margin:0; }
/* Yli kolme korttia: laatikko palstojen alle, kortit kolmeen sarakkeeseen (verkkosivut) */
.A-runko--levea .A-palstat{ grid-column:1 / 11; }
.A-runko--levea .A-laatikko{ grid-column:1 / 13; margin-top:clamp(24px,3vw,56px); }
.A-runko--levea .A-laatikko ol{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(20px,2.4vw,48px); }
.A-nosto{ margin:clamp(64px,10vw,180px) var(--reuna); font:400 clamp(40px,6.4vw,124px)/.98 var(--f-kasi); text-transform:uppercase; color:var(--puna); text-align:center; }
.A-h2{ margin:.2em 0 .35em; font:400 clamp(40px,5.6vw,110px)/.88 var(--f-otsikko); text-transform:uppercase; }

/* 3. VAAKARATA kuten etusivun Valikoidut työnäytteemme (brandstein.js .tyot): isolla ruudulla
   kiinnittyy ja vieritys liu'uttaa rataa (scrub, ei snapia), puhelimella pyyhkäistään.
   Kortin leveys = kuvan leveys, joten välit ovat tasan samat (Jenna). */
.A-vaaka{ margin-top:clamp(40px,6vw,96px); }
.A-vaaka__kiinni{ height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.A-vaaka__yla{ padding:0 var(--reuna) clamp(18px,2.2vw,40px); }
.A-rata{ --kk:clamp(220px, calc(100svh - 400px), 620px); list-style:none; margin:0; padding:0 var(--reuna); display:flex; align-items:flex-start; gap:clamp(20px,2vw,40px); will-change:transform; }
.A-rata > li{ flex:none; }
.A-rata__intro{ width:clamp(260px,24vw,420px); align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; padding-right:clamp(8px,2vw,40px); }
.A-rata__intro p{ margin:0; font-size:clamp(16px,1.3vw,22px); }
.A-rata__vihje{ position:relative; align-self:flex-end; margin-bottom:calc(var(--kk) * .1) !important; font:400 clamp(26px,2.4vw,40px)/1 var(--f-kasi) !important; text-transform:uppercase; color:var(--puna); rotate:-4deg; }
.A-rata__vihje .tussi-el--nuoli{ color:var(--puna); width:1.8em; aspect-ratio:900/680; left:1.4em; top:-1.6em; transform:scaleX(-1) rotate(70deg); }
.A-kortti{ width:calc(var(--kk) * var(--sk)); }
.A-kortti__kehys{ display:block; width:100%; aspect-ratio:var(--sk); border-radius:clamp(12px,1.1vw,20px); overflow:hidden;
  box-shadow:0 2px 4px rgba(25,25,25,.10), 0 18px 30px -10px rgba(25,25,25,.28), 0 40px 70px -30px rgba(25,25,25,.35); }
:where(.ps-aikakauslehti main) .A-kortti__kehys img{ height:100%; }
.A-kortti__ala{ display:flex; gap:clamp(12px,1.2vw,20px); align-items:flex-start; padding-top:clamp(26px,2.4vw,44px); }
.A-nro{ margin:0; font:400 clamp(40px,3.6vw,72px)/.85 var(--f-nimi); color:var(--puna); }
.A-kortti h3{ margin:0 0 .25em; font:400 clamp(24px,2.2vw,40px)/1.02 var(--f-otsikko); text-transform:uppercase; }
.A-kortti p{ margin:0; font-size:clamp(13px,.95vw,16px); }

/* 4. Töitämme: kaksi kuvaa rivissä, leveys kasvaa kuvasuhteen mukaan (flex-grow = leveys/korkeus),
   jolloin rivin kuvat ovat samankorkuisia ilman rajausta (Jenna). */
.A-toita{ padding:clamp(56px,8vw,140px) var(--reuna) 0; }
.A-toita__rivi{ display:flex; gap:clamp(16px,2vw,40px); align-items:flex-start; margin-top:clamp(20px,2.4vw,44px); }
.ps-aikakauslehti main .A-toita__a{ flex:var(--sk) 1 0; min-width:0; display:block; text-decoration:none; color:inherit; }
.A-toita__a figure{ border-radius:clamp(10px,1vw,18px); overflow:hidden; }
.A-toita__nimi{ display:block; padding-top:12px; font:400 clamp(18px,1.6vw,28px) var(--f-otsikko); text-transform:uppercase; }
.A-toita__nimi span{ color:var(--puna); }
.A-toita__ala{ display:block; margin-top:.3em; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--puna); }
.ps-aikakauslehti main .A-toita__a:hover .A-toita__nimi{ color:var(--puna); }

/* 5. Case (punainen) */
.A-case{ display:grid; grid-template-columns:7fr 5fr; align-items:center; background:var(--puna); margin-top:clamp(56px,9vw,160px); }
/* Kuva koko laatikon korkuiseksi (Jenna 3.11.2026, saa rajautua sivuilta): rivi on vähintään
   kuvan luonnollisen korkuinen, pidemmän tekstin vieressä kuva täyttää ja rajautuu reunoilta. */
.A-case > figure{ align-self:stretch; }
:where(.ps-aikakauslehti main) .A-case > figure img{ height:100%; object-fit:cover; }
.A-case__teksti{ padding:var(--reuna); }
.A-luku{ margin:0; font:400 clamp(90px,12vw,220px)/.85 var(--f-nimi); }
.A-case__ot{ margin:.6em 0 .5em; font:400 clamp(24px,2.2vw,40px)/1.05 var(--f-otsikko); text-transform:uppercase; }
.A-case__kappaleet p{ margin:0 0 1em; }
.ps-aikakauslehti main .A-case .linkki{ color:var(--musta); }

/* 6. Yhteydenotto: kerma väli punaisen casen ja punaisen footerin välissä */
.cta{ position:relative; padding:clamp(90px,11vw,190px) var(--reuna) clamp(60px,7vw,110px); }
.cta__ot{ margin:.2em 0 .45em; font:400 clamp(44px,7vw,140px)/.88 var(--f-otsikko); text-transform:uppercase; }
.cta__tekstit{ columns:2 320px; column-gap:clamp(28px,3vw,64px); max-width:1100px; }
.cta__tekstit p{ margin:0 0 1em; }
.cta__posti{ margin:clamp(24px,3vw,48px) 0 0; }
.ps-aikakauslehti main .cta__posti a{ font:400 clamp(34px,5.6vw,110px)/1 var(--f-otsikko); text-transform:uppercase; text-decoration:none; overflow-wrap:anywhere;
  background:linear-gradient(var(--puna),var(--puna)) left calc(100% - .02em) / 0 .08em no-repeat; transition:color 300ms linear, background-size 700ms var(--ease); }
.ps-aikakauslehti main .cta__posti a:hover, .ps-aikakauslehti main .cta__posti a:focus-visible{ color:var(--puna); background-size:100% .08em; }
.cta .ps-napit{ margin:clamp(24px,3vw,44px) 0 0; }
.cta .ps-paivitetty{ margin:clamp(40px,5vw,80px) 0 0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }

/* Puhelin: ei kiinnitystä (CLAUDE.md), rata pyyhkäistään sivuttain */
@media (max-width:860px){
  /* Hero puhelimella: kaikki tuotteet kahdessa rivissä, ettei rivi ole sumpussa (Jenna) */
  .A-pussit{ height:auto; margin-top:-6vw; flex-wrap:wrap; row-gap:4vw; }
  .ps-aikakauslehti main .A-pussi{ height:calc(var(--h) * var(--mk, .36vw)); margin:0 -1.5%; }
  .A-kasi{ margin:56px 0 0 auto; }
  .A-kasi .tussi-el--nuoli{ width:2.4em; left:-1.4em; top:-2.5em; rotate:28deg; }   /* osoittaa puhelimiin (Jenna 3.11.) */
  .A-runko{ display:block; } .A-laatikko{ margin-top:24px; }
  .A-runko--levea .A-laatikko ol{ display:block; }
  .ps-aikakauslehti .A-ingressi{ text-wrap:pretty; }   /* balance jätti oikealle ison aukon, ingressi näytti vinolta (Jenna 3.11.) */
  .A-runko:not(.A-runko--levea):has(.A-palstat--yksi){ display:block; }
  /* Hero ilman kuvia (Jenna 3.11.2026: "eka näkymä hajanainen"): käsiala otsikon alle,
     ja ingressi ja leipäteksti nousevat ensimmäiseen näkymään. */
  .A-avaus--paljas{ padding-bottom:0; }
  .A-avaus--paljas .A-kasi{ margin:14px 0 0; transform:rotate(-2deg); }
  .A-avaus--paljas .A-tekija{ margin-top:14px; }
  .A-avaus--paljas + .A-runko{ padding-top:36px; }
  /* Puhelinnäkymät isompina yhdessä rivissä, reunat hieman limittäin (Jenna 3.11.) */
  .ps-aikakauslehti main .A-pussit--puhelimet{ flex-wrap:nowrap; }
  .ps-aikakauslehti main .A-pussit--logot{ height:auto; gap:5vw 7vw; margin-top:4vw; }   /* korkeus logojen mukaan, muuten käsiala ja nuoli menevät logojen päälle */
  .ps-aikakauslehti main .A-pussit--puhelimet .A-puhelin{ height:calc(var(--h) * .47vw); margin:0 -1.2%; }
  .A-kasi{ max-width:84%; }   /* pitkä käsiala: nuolelle tilaa vasempaan reunaan */
  .A-case{ grid-template-columns:1fr; }
  .A-toita__rivi{ flex-direction:column; } .ps-aikakauslehti main .A-toita__a{ flex:none; width:100%; }
}
@media (max-width:860px) and (pointer:coarse){
  .A-vaaka__kiinni{ height:auto; overflow:visible; padding:6vh 0 8vh; }
  .A-rata{ gap:16px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .A-rata::-webkit-scrollbar{ display:none; }
  /* Puhelimella johdanto otsikon alla, rata sen alla isoin kuvin kuten etusivun töissä (Jenna) */
  .A-rata__intro{ display:none; }
  .A-vaaka__intro{ display:block; }
  .A-kortti{ width:min(88vw, calc(62svh * var(--sk))); }
}
/* Tekijärivi selvästi erilleen herosta (Jenna) */
.A-tekija{ margin-top:clamp(48px,6vw,96px); }
/* Johdanto radan yläpuolella vain puhelimella; isolla ruudulla se on radan ensimmäinen pala */
.A-vaaka__intro{ display:none; margin-top:clamp(16px,4vw,28px); }
.A-vaaka__intro p{ margin:0; font-size:clamp(16px,4.2vw,20px); }
.A-vaaka__intro .A-rata__vihje{ display:table; position:relative; margin:24px 0 0 auto !important; }
.A-vaaka__intro .A-rata__vihje .tussi-el--nuoli{ left:auto; right:-1.6em; top:-.2em; width:1.5em; transform:scaleX(-1) rotate(-30deg); }
@media (max-width:860px) and (pointer:coarse){ .A-vaaka__intro{ display:block; } }   /* oltava yleisen display:none-säännön jälkeen */
@media (max-width:860px){
  /* Otsikko kahdelle riville pehmeästä tavuviivasta (Jenna): PAKKAUS- / SUUNNITTELU */
  .ps-aikakauslehti .A-ot.sovita{ white-space:normal; hyphens:manual; line-height:.85; }
  /* Asiakastarinan teksti punaisella: tilaa ylös ja alas (Jenna) */
  .A-case__teksti{ padding:clamp(40px,10vw,72px) var(--reuna); }
}
@media (max-width:860px) and (pointer:coarse){
  /* Vieritä-nuoli ruudun sisään (Jenna: ei mahtunut) */
  .A-vaaka__intro .A-rata__vihje{ margin:24px 2.4em 0 auto !important; }
}
/* Otsikkorivit: työpöydällä yksi rivi ilman tavuviivaa, puhelimella kaksi riviä tavuviivalla (Jenna) */
.A-ot .ot-r{ display:inline; white-space:nowrap; }
.A-ot--rivit .ot-r{ display:block; }   /* rivit myös työpöydällä */
.A-ot--rivit .ot-r--tavu::after{ content:'-'; }
@media (max-width:860px){
  .A-ot .ot-r{ display:block; }
  .A-ot .ot-r--tavu::after{ content:'-'; }
  .ps-aikakauslehti .A-ot.sovita{ white-space:nowrap; }
}

/* Otsikot tasapainotetusti riveille: ei yksinäistä sanaa viimeiselle riville (Jenna: "käsin" yksin) */
.D-q, .A-h2, .C-h2, .cta__ot, .A-case__ot, .C-case__ot, .B-h2, .D-lappu h3, .A-kortti h3, .C-kortit h3, .A-ingressi, .C-ingressi{ text-wrap:balance; }

/* Jenna 10.11.2026 (brändäys): */
/* Ääkköset alemmilla otsikkoriveillä: pisteet osuivat ylemmän rivin kirjaimiin rivivälillä .8–.85 */
/* Lisätila vain rivien väliin, ei viimeisen rivin alle (Jenna: alaotsikko jäi kauas puhelimella) */
.A-ot--aakkoset .ot-r + .ot-r{ margin-top:.15em; }
/* Nostolause useammalle riville, ei yhtä pitkää riviä leveällä näytöllä */
.A-nosto{ max-width:11em; text-wrap:balance; }
@media (min-width:861px){ .A-nosto{ margin-inline:auto; } }
/* Yhteydenotto keskelle kuten muissa leiskoissa */
.ps-aikakauslehti .cta{ text-align:center; }
.ps-aikakauslehti .cta__tekstit{ columns:auto; max-width:60ch; margin-inline:auto; }
.ps-aikakauslehti .cta .ps-napit{ justify-content:center; }