/* =========================================================================
   TOIVAKKA — Graafinen ohjeisto  ·  "Elämisen elementit, liikkeessä"
   Kineettinen, studiomainen uudelleensuunnittelu. Vaakavieritys säilyy.
   ========================================================================= */

/* ---- Fontit ---- */
@font-face { font-family:"Adagio Serif"; src:url("assets/fonts/adagio-serif.otf") format("opentype"); font-weight:400; font-display:block; }
@font-face { font-family:"Adagio Serif"; src:url("assets/fonts/adagio-serif-medium.otf") format("opentype"); font-weight:500; font-display:block; }
@font-face { font-family:"Adagio Serif"; src:url("assets/fonts/adagio-serif-semibold.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Adagio Serif"; src:url("assets/fonts/adagio-serif-bold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Adagio Serif"; src:url("assets/fonts/adagio-serif-italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Adagio Serif"; src:url("assets/fonts/adagio-serif-semibold-italic.otf") format("opentype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Adagio Sans"; src:url("assets/fonts/adagio-sans-semibold.otf") format("opentype"); font-weight:600; font-display:block; }

/* ---- Muuttujat ---- */
:root {
  --kaarna:#5C3D31; --havu:#1C5631; --tuohi:#F9F7ED;
  --aurinko:#F6B221; --puolukka:#AB162B; --jarvi:#003057;
  --bg:var(--tuohi); --ink:var(--kaarna); --accent:var(--havu);
  --serif:"Adagio Serif", Georgia, serif;
  --sans:"Adagio Sans", "Helvetica Neue", Arial, sans-serif;

  /* tyyppiskaala — voimakas kontrasti */
  --t-mega:  clamp(8rem, 26vw, 34rem);
  --t-display: clamp(3.6rem, 9.8vw, 15rem);
  --t-h1:    clamp(3rem, 9vw, 9rem);
  --t-h2:    clamp(2.2rem, 4.5vw, 4.6rem);
  --t-lead:  clamp(1.5rem, 2.7vw, 2.9rem);
  --t-body:  clamp(1rem, 1.15vw, 1.22rem);
  --t-note:  .92rem;
  --t-label: .72rem;

  --sidebar: 0px;
  --topbar: 58px;
  --gutter: clamp(2.8rem, 8vw, 9rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --rule: rgba(92,61,49,.22);
  --rule-strong: rgba(92,61,49,.6);
  --rule-light: rgba(249,247,237,.28);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }
body { background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:var(--t-body); line-height:1.5; overflow-x:hidden; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--havu); color:var(--tuohi); }
.panel.green ::selection, .panel.brown ::selection { background:var(--tuohi); color:#1a1a1a; }

/* ---- Tekstityylit ---- */
.kicker { font-family:var(--sans); font-size:var(--t-label); font-weight:600; letter-spacing:.26em; text-transform:uppercase; }
.lead { font-family:var(--serif); font-style:italic; font-size:var(--t-lead); line-height:1.12; }
.note { font-family:var(--sans); font-size:var(--t-note); letter-spacing:.01em; line-height:1.45; }

/* =========================================================================
   CUSTOM CURSOR
   ========================================================================= */
.cursor, .cursor-dot { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; mix-blend-mode:difference; will-change:transform; }
.cursor { width:38px; height:38px; border:1px solid #F9F7ED; transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), background-color .3s, opacity .3s; }
.cursor-dot { width:5px; height:5px; background:#F9F7ED; transform:translate(-50%,-50%); }
.cursor.is-hover { width:74px; height:74px; background:rgba(249,247,237,.12); }
.cursor.is-hide, .cursor-dot.is-hide { opacity:0; }
@media (hover:none), (pointer:coarse) { .cursor, .cursor-dot { display:none; } }

/* =========================================================================
   LOADER
   ========================================================================= */
.loader { position:fixed; inset:0; z-index:1000; background:var(--kaarna); display:grid; place-items:center; transition:transform 1s var(--ease); }
.loader.is-hidden { transform:translateY(-100%); }
.loader__inner { display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(.6rem,1.6vh,1.3rem); color:var(--tuohi); }
.loader__title { font-family:var(--sans); font-weight:600; font-size:clamp(1rem,2.4vw,1.7rem); letter-spacing:.18em; text-transform:uppercase; }
.loader__label { font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; opacity:.7; }
.loader__count { font-family:var(--sans); font-weight:600; color:var(--tuohi); font-size:clamp(4rem,16vw,11rem); line-height:1; letter-spacing:-.03em; margin-top:.2rem; }

/* =========================================================================
   SIVUPALKKI (vasen) + INDIKAATTORIT
   ========================================================================= */
.topbar { position:fixed; top:0; left:0; right:0; height:var(--topbar); z-index:90; display:flex; flex-direction:row; align-items:center; padding:0 var(--gutter); transition:opacity .5s var(--ease); }
body.is-cover .topbar { opacity:0; pointer-events:none; }

/* Sisällys — korostettu, mutta täytteetön painike (väri mukautuu aktiivisen paneelin teemaan) */
.topbar__menu { margin-left:auto; font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6em; padding:.62rem 1.45rem; background:transparent; color:var(--ink); border:1.5px solid currentColor; transition:opacity .25s var(--ease), transform .25s var(--ease), color .3s var(--ease); }
.topbar__menu::before { content:"☰"; font-size:1.05em; line-height:1; }
.topbar__menu:hover { opacity:.6; transform:translateY(-1px); }
.topbar__menu.is-on-dark { color:#F9F7ED; }

.topbar__home { position:absolute; left:50%; transform:translateX(-50%); display:flex; }
.topbar__wordmark { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; transition:opacity .4s, color .3s var(--ease); white-space:nowrap; color:var(--ink); }
.topbar__wordmark.is-on-dark { color:#F9F7ED; }
.topbar__sub { font-weight:400; opacity:.7; }
.topbar__home:hover .topbar__wordmark { opacity:.55; }
.topbar__logo { display:none; }
.topbar__status { display:none; }

/* osionumero x / 10 — kiinteä ylävasen */
.docnum { position:fixed; top:0; left:var(--gutter); height:var(--topbar); z-index:95; display:flex; align-items:center; gap:.4rem; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.04em; mix-blend-mode:difference; color:#F9F7ED; transition:opacity .4s var(--ease); }
.docnum__tot { font-size:.74rem; font-weight:400; letter-spacing:.06em; opacity:.5; }
body.is-cover .docnum { opacity:0; }

/* statusotsikko — kiinteä alavasen */
#statusTitle { position:fixed; bottom:1.4rem; left:var(--gutter); z-index:95; font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; mix-blend-mode:difference; color:#F9F7ED; transition:opacity .4s; }
body.is-cover #statusTitle { opacity:0; }

/* ---- Etenemispalkki ---- */
.progress { position:fixed; bottom:0; left:0; right:0; height:3px; z-index:91; background:transparent; }
.progress__bar { display:block; height:100%; width:0; background:var(--havu); mix-blend-mode:difference; }
.progress__bar { background:#F9F7ED; mix-blend-mode:difference; }

/* =========================================================================
   SISÄLLYS-VALIKKO (overlay)
   ========================================================================= */
.menu { position:fixed; inset:0; z-index:96; background:var(--havu); color:var(--tuohi); display:flex; flex-direction:column; justify-content:center; padding:var(--gutter); clip-path:inset(0 0 100% 0); pointer-events:none; transition:clip-path .8s var(--ease-io); overflow-y:auto; }
.menu.is-open { clip-path:inset(0 0 0% 0); pointer-events:auto; }
.menu__close { position:absolute; top:calc(var(--topbar) / 2); right:var(--gutter); transform:translateY(-50%); display:inline-flex; align-items:center; gap:.6em; padding:.62rem 1.45rem; border:1.5px solid currentColor; font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:opacity .25s var(--ease); }
.menu__close::before { content:"✕"; font-size:1.05em; line-height:1; }
.menu__close:hover { opacity:.6; }
.menu__list { list-style:none; width:100%; }
.menu__item { display:flex; align-items:baseline; gap:1.6rem; padding:clamp(.15rem,.8vh,.7rem) 0; border-top:1px solid rgba(249,247,237,.18); cursor:pointer; overflow:hidden; }
.menu__item:first-child { border-top:none; }
.menu__item:last-child { border-bottom:none; }
.menu__item-num { font-family:var(--sans); font-size:.85rem; font-weight:600; opacity:.6; min-width:2.6rem; }
.menu__item-title { font-family:var(--serif); font-size:clamp(1.4rem,4.5vh,5.5rem); font-weight:500; line-height:1; transition:transform .5s var(--ease), opacity .4s; transform-origin:left; }
.menu__item:hover .menu__item-title { transform:translateX(2.5rem) skewX(-7deg); font-style:italic; }
.menu__item .menu__item-num { transition:opacity .4s; }
.menu__item:hover .menu__item-num { opacity:1; }

/* =========================================================================
   VAAKARATA & PANEELIT
   ========================================================================= */
.track { display:flex; flex-wrap:nowrap; will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.panel { position:relative; flex:0 0 auto; height:100vh; overflow:hidden; padding:var(--topbar) var(--gutter) clamp(2rem,4vh,4rem) var(--gutter); display:flex; align-items:center; }
.panel__inner { position:relative; width:100%; height:100%; display:flex; align-items:center; }
.panel.green { background:var(--havu); color:var(--tuohi); }
.panel.brown { background:var(--kaarna); color:var(--tuohi); }
.panel.cream { background:var(--tuohi); color:var(--ink); }

/* osionvaihtoviiva */
.panel.is-section-start::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--rule); z-index:6; }
.panel.green.is-section-start::before, .panel.brown.is-section-start::before { background:var(--rule-light); }

/* leveydet */
.panel--w85 { width:85vw; }
.panel--w90 { width:90vw; }
.panel--w95 { width:95vw; }
.panel--w103 { width:103vw; }
.panel--w110 { width:110vw; }
.panel--w75  { width:75vw; }
.panel--w130 { width:130vw; }
.panel--full { width:100vw; }
@media (min-width:1201px){ .panel--auto { width:auto; } }

/* logo alaosio — kaytto extra leveys */
.panel--kaytto { padding-right:var(--gutter); }

/* =========================================================================
   KANSI
   ========================================================================= */
.cover { position:relative; z-index:5; width:100vw; height:100vh; background:var(--kaarna); color:var(--tuohi); overflow:hidden; }
.cover__frame { position:absolute; inset:clamp(16px,2.2vw,30px); border:1px solid rgba(249,247,237,.2); pointer-events:none; z-index:6; }
.cover__top { position:absolute; top:clamp(26px,3vw,46px); left:clamp(34px,4.6vw,66px); right:clamp(34px,4.6vw,66px); z-index:7; display:flex; justify-content:space-between; color:var(--tuohi); }
.cover__top .kicker { opacity:.62; }
.cover__content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; will-change:transform; padding:0 6vw; }
.cover__logo { width:clamp(320px,52vw,820px); }
.cover__logo svg { width:100%; height:auto; display:block; overflow:visible; }
.cover__slogan { font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3.2vw,2.8rem); opacity:.92; margin-top:1.8rem; }
.cover__scroll { position:absolute; bottom:clamp(30px,4vw,54px); left:50%; transform:translateX(-50%); z-index:7; display:flex; align-items:center; gap:.7rem; color:var(--tuohi); opacity:.7; }
.cover__scroll .kicker { letter-spacing:.2em; }
.cover__scroll-line { width:46px; height:1px; background:currentColor; transform-origin:left; animation:scrollpulse 2.2s var(--ease-io) infinite; }
@keyframes scrollpulse { 0%,100%{ transform:scaleX(.3); opacity:.4; } 50%{ transform:scaleX(1); opacity:1; } }

/* sisällys-strippi (liukuu kannen oikealta) */
.sisallys-strip { position:absolute; top:0; right:0; height:100%; width:42vw; background:var(--tuohi); color:var(--kaarna); display:flex; align-items:center; padding:0 clamp(2rem,4vw,4rem); will-change:transform; transform:translateX(100%); z-index:8; }
.sisallys-strip__inner { width:100%; }
.sisallys-strip .kicker { color:var(--havu); margin-bottom:1.4rem; display:flex; align-items:center; gap:.8rem; }
.sisallys-strip .kicker::after { content:""; flex:1; height:1px; background:var(--rule); }
.sis-list { list-style:none; }
.sis-item { display:flex; align-items:baseline; gap:1rem; padding:clamp(.35rem,1.1vh,.85rem) 0; border-top:1px solid var(--rule); cursor:pointer; overflow:hidden; }
.sis-item:last-child { border-bottom:1px solid var(--rule); }
.sis-item__num { font-family:var(--sans); font-size:.74rem; font-weight:600; opacity:.5; min-width:2.1rem; }
.sis-item__title { font-family:var(--serif); font-size:clamp(1.2rem,2.1vw,2rem); font-weight:500; line-height:1; transition:transform .5s var(--ease), font-style .2s; transform-origin:left; }
.sis-item:hover .sis-item__title { transform:translateX(1rem); font-style:italic; color:var(--havu); }

/* =========================================================================
   OSION AVAAJA (kineettinen otsikkoaukeama)
   ========================================================================= */
.panel--opener .panel__inner { display:block; }
.opener { position:relative; width:100%; height:100%; display:grid; grid-template-rows:1fr auto; row-gap:clamp(1rem,2vh,2rem); padding:clamp(4rem,7vh,7rem) 0 clamp(3.5rem,6vh,6rem); }
.opener__top { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; z-index:3; }
.opener__index { display:flex; align-items:baseline; gap:.6rem; }
.opener__index-num { font-family:var(--sans); font-weight:600; font-size:1rem; }
.opener__index-tot { font-family:var(--sans); font-size:.74rem; opacity:.5; letter-spacing:.06em; }
.opener__kicker { opacity:.6; align-self:flex-start; }

/* iso otsikko */
.opener__titlewrap { align-self:end; position:relative; z-index:3; margin-bottom:clamp(1.2rem,3vh,3rem); }
.opener__title { font-family:var(--serif); font-weight:500; font-size:var(--t-display); line-height:.82; letter-spacing:-.03em; white-space:nowrap; }
.opener__title em { font-style:italic; font-weight:500; }
/* taustakuosi — toivakka sydämellisesti, yksi nauha otsikon takana, liukuu (kuten entinen iso taustateksti) */
.opener__kuosi { position:absolute; z-index:0; pointer-events:none; top:50%; transform:translateY(-50%); left:calc(-1 * var(--gutter) - 40vw); width:180vw; height:clamp(120px,12vw,170px);
  background-color:#7B6257;
  -webkit-mask-image:url('assets/pattern/SVG/Toivakka-kuosi-sydamellisesti.svg'); mask-image:url('assets/pattern/SVG/Toivakka-kuosi-sydamellisesti.svg');
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%; mask-size:auto 100%;
  -webkit-mask-position:center; mask-position:center; }
.panel.green .opener__kuosi { background-color:#487657; }
.panel.brown .opener__kuosi { background-color:#7B6257; }

.opener__foot { display:flex; justify-content:space-between; align-items:flex-end; gap:3rem; z-index:3; }
.opener__lead { max-width:30ch; }
.opener__notes { list-style:none; display:flex; flex-direction:column; gap:.5rem; max-width:42ch; }
.opener__note { display:grid; grid-template-columns:1.8rem 1fr; gap:.6rem; align-items:baseline; padding-top:.55rem; border-top:1px solid var(--rule); }
.panel.green .opener__note, .panel.brown .opener__note { border-color:var(--rule-light); }
.opener__note-n { font-family:var(--sans); font-size:.72rem; font-weight:600; opacity:.6; }
.opener__cue { font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; opacity:.55; white-space:nowrap; display:flex; align-items:center; gap:.6rem; }
.opener__cue::after { content:"→"; }

/* split-text */
.split { display:inline-block; }
.split .line { display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.split .word { display:inline-block; overflow:hidden; padding-bottom:.3em; margin-bottom:-.3em; }
.split .char { display:inline-block; will-change:transform; }

/* =========================================================================
   SISÄLTÖPANEELIT — yhteinen header
   ========================================================================= */
.content { position:relative; width:100%; max-width:min(1320px, 88vw); }
.content--wide { max-width:none; }
.chead { display:flex; align-items:baseline; gap:1rem; padding-bottom:1rem; margin-bottom:clamp(1.8rem,3.2vw,3rem); border-bottom:1px solid var(--rule); }
.panel.green .chead, .panel.brown .chead { border-color:var(--rule-light); }
.chead__num { font-family:var(--sans); font-weight:600; font-size:.8rem; color:var(--havu); }
.panel.green .chead__num, .panel.brown .chead__num { color:var(--tuohi); }
.chead__title { font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; }
.chead__meta { margin-left:auto; font-family:var(--sans); font-size:.74rem; letter-spacing:.08em; opacity:.5; }
.content__intro { font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2vw,1.9rem); line-height:1.2; max-width:30ch; margin-bottom:clamp(1rem,1.8vw,1.8rem); }

/* iso taustanumero */
.bignum { position:absolute; right:0; bottom:-6vh; z-index:0; pointer-events:none; font-family:var(--sans); font-weight:600; line-height:.7; font-size:var(--t-mega); color:currentColor; opacity:.05; }

/* =========================================================================
   TARINA
   ========================================================================= */
.tarina { position:relative; width:min(1875px, 94vw); display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,6rem); align-items:center; }
.tarina__virsut { position:absolute; right:-8vw; top:-12vh; width:clamp(420px,46vw,820px); z-index:0; pointer-events:none; }
.tarina__head { position:relative; z-index:2; }
.tarina__head .lead { color:var(--tuohi); opacity:.9; margin-bottom:1.5rem; }
.tarina__big { font-family:var(--serif); font-weight:500; font-size:clamp(3.4rem,9vw,9rem); line-height:.86; letter-spacing:-.03em; margin-bottom:1.4rem; }
.tarina__big em { font-style:italic; }
.tarina__story { position:relative; z-index:2; columns:2; column-gap:clamp(1.6rem,3vw,3rem); font-size:var(--t-body); line-height:1.55; }
.tarina__sub { column-span:all; font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.9rem; opacity:.85; margin:0 0 1.1rem; padding-bottom:.7rem; border-bottom:1px solid rgba(249,247,237,.28); }
.tarina__story p { margin:0 0 .9rem; break-inside:avoid; opacity:.92; }
.tarina__story p:first-of-type::first-letter { font-family:var(--serif); font-weight:700; font-size:3.4em; line-height:.72; float:left; padding:.05em .12em 0 0; }
.tarina__copy { margin-top:1rem; }

/* =========================================================================
   LOGO
   ========================================================================= */
.logo-sw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2.4rem); width:100%; }
.logo-switcher { display:flex; flex-direction:column; gap:clamp(.5rem,1vh,.85rem); min-height:0; }
.logo-sw__name { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--havu); display:flex; align-items:center; gap:.6rem; }
.logo-sw__name::before { content:""; width:1.5rem; height:1px; background:currentColor; opacity:.5; }
.logo-sw__stage { border:1px solid var(--rule); display:grid; place-items:center; height:clamp(180px,30vh,440px); padding:.8rem; position:relative; overflow:hidden; flex-shrink:1; min-height:0; }
.logo-sw__stage::after { content:""; position:absolute; inset:0; background:var(--havu); transform:translateY(101%); transition:transform .6s var(--ease-io); z-index:0; }
.logo-sw__stage--dark { background:var(--havu); border-color:transparent; }
.logo-sw__stage--virsut .logo-sw__img { max-width:74%; max-height:77%; }
.logo-sw__img { max-width:92%; max-height:96%; width:auto; height:auto; position:relative; z-index:1; transition:opacity .18s; }
.logo-sw__bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo-sw__hint { font-family:var(--sans); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.5; }
.logo-sw__sidedots { display:flex; gap:.45rem; }
.logo-sw__dot { width:20px; height:20px; border-radius:50%; background:var(--dot); border:2px solid transparent; cursor:pointer; transition:transform .3s var(--ease); }
.logo-sw__dot[data-light] { border-color:rgba(92,61,49,.3); }
.logo-sw__dot:hover { transform:scale(1.2); }
.logo-sw__dot.is-active { box-shadow:0 0 0 2px var(--tuohi), 0 0 0 3px var(--dot); }
.logo-sw__dot[data-light].is-active { box-shadow:0 0 0 2px var(--tuohi), 0 0 0 3px rgba(92,61,49,.4); }
.logo-sw__dls { list-style:none; border-top:1px solid var(--rule); transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.logo-sw__dl-link { display:flex; justify-content:space-between; align-items:center; font-family:var(--sans); font-size:.95rem; padding:clamp(.4rem,1vh,.65rem) 0; border-bottom:1px solid var(--rule); transition:padding-left .3s var(--ease), color .2s; transform:translateZ(0); }
.logo-sw__dl-link::after { content:"↓"; opacity:.5; }
.logo-sw__dl-link:hover { padding-left:.6rem; color:var(--havu); }

/* logo-alaosiot — teksti + kuva pystysuunnassa, ylätasaus */
.panel--sub .panel__inner { align-items:flex-start; padding-top:clamp(5rem,12vh,9rem); }
.panel--sub .content { max-width:min(820px, 82vw); }
/* logo section — keep all cheads at the same vertical position */
#sec-logo .panel__inner { align-items:flex-start; padding-top:3rem; }
[data-key="logo"].panel--sub .panel__inner { padding-top:3rem; }
.sub-stack { display:flex; flex-direction:column; gap:clamp(1.8rem,3vw,3rem); }
.sub-stack__text { max-width:56ch; opacity:.9; line-height:1.55; font-family:var(--sans); font-size:var(--t-note); letter-spacing:.01em; }
.sub-stack__fig { display:flex; flex-wrap:wrap; gap:1.2rem; }
.clearspace { position:relative; display:grid; place-items:center; width:clamp(260px,40vw,520px); aspect-ratio:16/10; background:#fff; border:1px solid var(--rule); }
.clearspace::before { content:""; position:absolute; inset:14%; border:1px dashed rgba(28,86,49,.55); }
.clearspace img { width:44%; position:relative; }
.suoja-alue-img { width:clamp(260px,40vw,520px); height:auto; display:block; }
.minsize { display:flex; flex-direction:column; gap:1rem; }
.minsize__item { display:flex; flex-direction:column; gap:.5rem; }
.minsize__name { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--havu); display:flex; align-items:center; gap:.6rem; }
.minsize__name::before { content:""; width:1.5rem; height:1px; background:currentColor; opacity:.5; }
.minsize__stage { border:1px solid var(--rule); display:grid; place-items:center; height:clamp(140px,18vh,200px); padding:.8rem; overflow:hidden; }
.minsize__stage img { max-width:80%; height:auto; }
.minsize__stage--small img { max-width:38%; }
.donts { display:flex; flex-direction:column; gap:1rem; width:56ch; max-width:100%; }
.dont { display:flex; flex-direction:column; gap:.5rem; }
.dont__name { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--havu); display:flex; align-items:center; gap:.6rem; }
.dont__name::before { content:""; width:1.5rem; height:1px; background:currentColor; opacity:.5; }
.dont__stage { border:1px solid var(--rule); display:grid; place-items:center; height:clamp(140px,18vh,200px); padding:.8rem; position:relative; overflow:hidden; width:100%; }
.dont__stage img { max-width:78%; height:auto; opacity:.4; }
.dont__x { position:absolute; top:.5rem; right:.7rem; color:var(--puolukka); font-size:1.1rem; }
/* logo & virsut */
.lv { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; width:100%; }
.lv__stage { position:relative; width:clamp(280px,38vw,560px); }
.lv__logo { width:100%; position:relative; z-index:1; }
.lv__virsut { position:absolute; left:0; right:0; bottom:64%; margin:0 auto; width:clamp(70px,8vw,120px); transform-origin:50% 100%; z-index:0; will-change:transform; }
.lv__caption { font-family:var(--sans); font-size:.82rem; max-width:46ch; text-align:center; opacity:.7; letter-spacing:.02em; }
.lv__dl { display:flex; gap:.4rem; }

/* =========================================================================
   TYPOGRAFIA — jättinäyte
   ========================================================================= */
.type-hero { position:relative; width:min(1500px,92vw); }
.type-spec { border-top:1px solid var(--rule); padding:clamp(1rem,2vw,1.8rem) 0; }
.type-spec:last-of-type { border-bottom:1px solid var(--rule); }
.type-spec__meta { display:flex; justify-content:space-between; gap:1rem; font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; }
.type-spec__meta span:last-child { color:var(--havu); }
.type-spec__sample { font-size:clamp(1.8rem,4.5vw,4rem); line-height:1.05; letter-spacing:-.01em; }
.type-spec__sample.is-serif { font-family:var(--serif); }
.type-spec__sample.is-sans { font-family:var(--sans); font-weight:600; letter-spacing:.01em; }
.type-spec .btn-row { margin-top:1rem; }
.font-serif { font-family:var(--serif); }

/* ---- Typografia — asettelu ---- */
.typo-layout { display:flex; align-items:flex-start; gap:clamp(3rem,5vw,6rem); }
.typo-layout__lead { flex:0 0 auto; margin-bottom:0; }
.typo-layout__cols { flex:1; min-width:0; }

/* ---- Typografia — kolme saraketta ---- */
.typo-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,4.5rem); margin-bottom:clamp(2rem,3.5vw,3.5rem); }
.typo-col__name { font-family:var(--sans); font-weight:600; font-size:.88rem; letter-spacing:.04em; margin-bottom:1.1rem; }
.typo-col__specs { border-top:1px solid var(--rule); margin-bottom:1.6rem; }
.typo-spec-row { padding:.5rem 0; border-bottom:1px solid var(--rule); }
.typo-spec-row__label { font-family:var(--sans); font-weight:600; font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; opacity:.58; margin-bottom:.22rem; }
.typo-spec-row__val { font-size:.83rem; line-height:1.4; }
/* font utility classes used in spec rows */
.ts-sans-semi   { font-family:var(--sans);  font-weight:600; }
.ts-serif-r     { font-family:var(--serif); font-weight:400; font-style:normal; }
.ts-serif-i     { font-family:var(--serif); font-weight:400; font-style:italic; }
.ts-serif-semi  { font-family:var(--serif); font-weight:600; font-style:normal; }
.ts-serif-si    { font-family:var(--serif); font-weight:600; font-style:italic; }
.ts-serif-bold  { font-family:var(--serif); font-weight:700; font-style:normal; }
.ts-calibri     { font-family:Calibri,sans-serif; font-weight:400; }
.ts-calibri-bold{ font-family:Calibri,sans-serif; font-weight:700; font-style:normal; }
.ts-calibri-i   { font-family:Calibri,sans-serif; font-weight:400; font-style:italic; }
.ts-calibri-bi  { font-family:Calibri,sans-serif; font-weight:700; font-style:italic; }
/* sample text area — erotettu pystyviivalla (kuten lainaus) */
.typo-col__sample { display:flex; flex-direction:column; gap:.55rem; font-size:.83rem; line-height:1.62; padding-left:clamp(1rem,1.4vw,1.5rem); border-left:2px solid var(--rule); }
.ts-h2 { font-size:1.15rem; line-height:1.25; margin-top:.4rem; margin-bottom:.05rem; }
.ts-sm { font-size:.79rem; }
/* column base fonts */
[data-typo-col="1"] .typo-col__sample { font-family:var(--serif); font-weight:400; }
[data-typo-col="1"] .ts-h2            { font-family:var(--sans);  font-weight:600; font-style:normal; }
[data-typo-col="1"] .ts-i             { font-style:italic; }
[data-typo-col="1"] .ts-strong        { font-weight:600; }
[data-typo-col="1"] .ts-em            { font-weight:600; font-style:italic; }
[data-typo-col="2"] .typo-col__sample { font-family:system-ui,"Segoe UI",Arial,sans-serif; font-weight:400; }
[data-typo-col="2"] .ts-h2            { font-family:var(--serif); font-weight:700; font-style:normal; }
[data-typo-col="2"] .ts-strong        { font-weight:600; }
[data-typo-col="3"] .typo-col__sample { font-family:Calibri,sans-serif; font-weight:400; }
[data-typo-col="3"] .ts-h2            { font-weight:700; font-style:normal; }
[data-typo-col="3"] .ts-i             { font-style:italic; }
[data-typo-col="3"] .ts-strong        { font-weight:700; }
[data-typo-col="3"] .ts-em            { font-weight:700; font-style:italic; }
/* description paragraphs below columns */
.typo-desc { border-top:1px solid var(--rule); padding-top:clamp(1.4rem,2.5vw,2.5rem); display:flex; flex-direction:column; gap:.8rem; max-width:72ch; }
.typo-desc__p { font-family:var(--serif); font-size:.9rem; line-height:1.65; }
.typo-desc__p strong { font-family:var(--serif); font-weight:600; }
.font-sans { font-family:var(--sans); }

/* =========================================================================
   VÄRIMAAILMA — full-height editorial layout
   ========================================================================= */
[data-key="varimaailma"].panel:not(.panel--opener) { padding:0; }
[data-key="varimaailma"].panel:not(.panel--opener) .panel__inner { align-items:stretch; padding-top:0; }
[data-key="varimaailma"].panel:not(.panel--opener) .content { height:100%; display:flex; width:100%; max-width:none; }

.varimaailma-full { display:flex; width:100%; height:100%; align-items:stretch; }
.varimaailma-full__text {
  flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(.6rem,1.2vw,1.2rem);
  padding:var(--topbar) clamp(2.5rem,4.5vw,5rem) clamp(3rem,5vh,5rem) var(--gutter);
  width:clamp(280px,36vw,500px);
}
.varimaailma-full__text .content__intro { margin-bottom:0; }
.varimaailma-full__text .btn-row { margin-top:.4rem; }
.varimaailma-full__colors {
  flex:1; display:flex; align-items:stretch;
  border-left:1px solid var(--rule);
  overflow:hidden;
}

/* Swatch — full-height strip */
.swatch { flex:1; min-width:clamp(80px,7vw,140px); display:flex; flex-direction:column; border-right:1px solid rgba(0,0,0,.05); }
.swatch:last-child { border-right:none; }
.swatch__name { font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.swatch__tints { display:grid; grid-template-columns:1fr 1fr; gap:1px; }

/* kopioitava värikenttä + kopiointi-ikoni nurkassa */
.color-cell { position:relative; cursor:pointer; transition:filter .25s var(--ease); }
.color-cell:hover { filter:brightness(1.08); }
.color-cell__copy { position:absolute; right:.45rem; bottom:.35rem; font-size:.85rem; line-height:1; opacity:.4; transition:opacity .2s var(--ease); pointer-events:none; }
.color-cell:hover .color-cell__copy { opacity:.95; }
.swatch__main { flex:1; display:flex; align-items:flex-end; padding:.75rem 1rem; }
.swatch__main .color-cell__copy { right:.75rem; bottom:.7rem; font-size:1rem; }
.swatch__tint { height:clamp(28px,3.6vh,56px); }
/* Tuohi: ei sävyjä → yksi täysleveä lohko, jonka korkeus = neljän sävyn ruudukko, jotta tekstit linjautuvat muiden kanssa */
.swatch__tint--solid { grid-column:1 / -1; height:calc(2 * clamp(28px,3.6vh,56px) + 1px); }
.swatch__tint .color-cell__copy { right:.3rem; bottom:.18rem; font-size:.72rem; }
.swatch__meta { min-height:9.5rem; display:flex; flex-direction:column; justify-content:center; gap:.12rem; padding:1rem .9rem; background:var(--tuohi); border-top:1px solid var(--rule); font-family:var(--sans); font-size:.76rem; line-height:1.55; }
.swatch__meta strong { font-weight:600; display:block; font-size:1.68rem; line-height:1.05; margin-bottom:.4rem; }
.swatch__cat { display:block; font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin-bottom:.55rem; }
.swatch__pms { display:block; opacity:.6; }
.swatch__hex { display:block; opacity:.7; }

/* =========================================================================
   GRAAFISET ELEMENTIT — kuosi liikkuvana tekstuurina
   ========================================================================= */
.kuosi-set { display:flex; flex-direction:row; gap:clamp(1.5rem,3vw,3.2rem); align-items:flex-start; width:min(1100px,86vw); }
.kuosi { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.9rem; }
.kuosi__frame { position:relative; aspect-ratio:3/4; width:100%; overflow:hidden; border:1px solid var(--rule); background-color:var(--tuohi); transition:transform .2s ease-out, box-shadow .2s ease-out; transform-origin:center; backface-visibility:hidden; will-change:transform; }
.kuosi__frame img { width:100%; height:100%; object-fit:cover; display:block; }
[data-kuosi]:hover { box-shadow:0 22px 50px -22px rgba(92,61,49,.5); }
.kuosi__label { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:.6rem; }
.kuosi__label::before { content:""; width:1.4rem; height:1px; background:currentColor; opacity:.5; }
.kuosi__dl { align-self:flex-start; font-size:.7rem; padding:.5rem 1.1rem; }

/* =========================================================================
   KUVAMAAILMA — galleria
   ========================================================================= */
.panel--gallery { width:max-content; }
.gallery { display:flex; align-items:center; gap:clamp(2vw,4vw,5vw); height:78vh; }
.gallery figure { position:relative; flex:0 0 auto; display:flex; flex-direction:column; gap:.7rem; }
.gallery__imgwrap { overflow:hidden; }
.gallery figcaption { font-family:var(--sans); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; opacity:.65; }
.gallery__dl { align-self:flex-start; font-size:.7rem; padding:.5rem 1.2rem; border-color:var(--tuohi); color:var(--tuohi); }
.gallery__dl:hover { background:var(--tuohi); color:var(--kaarna); }
.gallery__big img { height:68vh; width:auto; max-width:none; display:block; }
.gallery__item img { height:50vh; width:auto; max-width:none; display:block; }
.gallery__intro { flex:0 0 auto; width:32vw; max-width:380px; align-self:center; }
.gallery__intro .lead { color:var(--tuohi); }
.gallery__media { overflow:hidden; }
.gallery__media img { will-change:transform; }

/* =========================================================================
   SOVELLUKSET / MATERIAALIT — kineettiset listat
   ========================================================================= */
.dlgroups { display:flex; width:min(1320px,90vw); }
.dlgroup { flex:1; padding:0 clamp(1.4rem,2.4vw,2.6rem); border-left:1px solid var(--rule); }
.dlgroup:first-child { padding-left:0; border-left:none; }
.dlgroup__title { font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--havu); padding-bottom:.6rem; border-bottom:1px solid var(--rule); margin-bottom:.3rem; }
.dl { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.95rem .1rem; border-bottom:1px solid var(--rule); font-size:1.05rem; transition:padding-left .3s var(--ease), color .25s; }
.dl:hover { padding-left:.6rem; color:var(--havu); }
.dl__icon { opacity:.5; }
.matgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(2rem,5vw,4rem); width:min(1100px,86vw); }
.matrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; border-top:1px solid var(--rule); }
.matrow__label { font-size:1.05rem; }
.matrow__formats { display:flex; gap:.4rem; }
.fmt { font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--havu); color:var(--havu); padding:.42rem .8rem; transition:background .25s, color .25s; }
.fmt:hover { background:var(--havu); color:var(--tuohi); }

/* Materiaalipankki — kaikki latauskategoriat vierekkäin (vaakavieritys) */
[data-key="materiaalit"].panel:not(.panel--opener) { width:max-content; }
[data-key="materiaalit"]:not(.panel--opener) .panel__inner { width:max-content; }
[data-key="materiaalit"]:not(.panel--opener) .content { width:max-content; max-width:none; }
[data-key="materiaalit"] .dlgroups { width:auto; max-width:none; gap:clamp(2rem,3vw,3.5rem); align-items:flex-start; }
[data-key="materiaalit"] .dlgroup { flex:0 0 auto; min-width:clamp(220px,17vw,290px); padding:0 0 0 clamp(1.6rem,2.4vw,2.6rem); border-left:1px solid var(--rule); }
[data-key="materiaalit"] .dlgroup:first-child { padding-left:0; border-left:none; }
[data-key="materiaalit"] .dlgroup--logos { min-width:clamp(280px,22vw,360px); }
[data-key="materiaalit"] .matrow { flex-direction:column; align-items:flex-start; gap:.5rem; padding:.7rem 0; }
[data-key="materiaalit"] .dlgroup__title + .matrow { border-top:none; }
[data-key="materiaalit"] .matrow__label { font-size:.95rem; }
[data-key="materiaalit"] .matrow__formats { flex-wrap:wrap; }
[data-key="materiaalit"] .dl { font-size:.95rem; padding:.7rem .1rem; }

/* =========================================================================
   BRÄNDIÄÄNI — isot lainaukset (tumma)
   ========================================================================= */
.voice { width:min(1400px,90vw); }
.traits { display:flex; width:100%; margin:0 0 clamp(2rem,4vw,3.5rem); }
.trait { flex:1; padding:0 clamp(1.4rem,2.4vw,2.4rem); border-left:1px solid var(--rule); }
.trait:first-child { padding-left:0; border-left:none; }
.trait__k { font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.4rem); padding-bottom:.4rem; border-bottom:1px solid var(--rule); margin-bottom:.6rem; }
.trait__v { font-family:var(--sans); font-size:.92rem; line-height:1.5; opacity:.72; }
.voice-ex { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.voice-ex__cell { padding:1.3rem 1.5rem; }
.voice-ex__good { background:rgba(28,86,49,.1); border-left:4px solid var(--havu); }
.voice-ex__bad { background:rgba(171,22,43,.08); border-left:4px solid #AB162B; }
.voice-ex__bad p { opacity:.72; }
.voice-ex__tag { font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; display:flex; align-items:center; gap:.4em; }
.voice-ex__good .voice-ex__tag { color:var(--havu); }
.voice-ex__bad .voice-ex__tag { color:#AB162B; }
.voice-ex__good .voice-ex__tag::before { content:"✓"; font-size:1.05em; }
.voice-ex__bad .voice-ex__tag::before { content:"✕"; font-size:1.05em; }
.voice-ex__cell p { font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1.6vw,1.5rem); line-height:1.25; }

/* =========================================================================
   SAAVUTETTAVUUS — viivasto
   ========================================================================= */
.rules { display:grid; grid-template-columns:repeat(2,1fr); width:min(1100px,86vw); }
.rule { padding:1.2rem 0; border-top:1px solid var(--rule); }
.rule:nth-child(odd) { border-right:1px solid var(--rule); padding-right:2rem; }
.rule:nth-child(even) { padding-left:2rem; }
.rule:nth-last-child(-n+2) { border-bottom:1px solid var(--rule); }
.rule__t { font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--havu); margin-bottom:.5rem; display:flex; align-items:baseline; gap:.5rem; }
.rule__t::before { content:"—"; opacity:.5; }
.rule__d { font-size:1rem; opacity:.9; }

/* =========================================================================
   MARQUEE-NAUHA
   ========================================================================= */
.panel--marquee { width:100vw; padding:0; align-items:center; }
.marquee { width:100%; overflow:hidden; white-space:nowrap; }
.marquee__inner { display:inline-flex; align-items:center; will-change:transform; }
.marquee__word { font-family:var(--serif); font-weight:500; font-size:clamp(5rem,18vw,22rem); line-height:.9; letter-spacing:-.02em; padding:0 .25em; }
.marquee__word em { font-style:italic; }
.marquee__sep { font-family:var(--sans); font-size:clamp(2rem,5vw,5rem); opacity:.4; align-self:center; }

/* pitkät otsikot — pienennetään etteivät kosketa oikeaa reunaa */
#sec-materiaalit .opener__title { font-size:clamp(2.5rem,8vw,10rem); }
#sec-elementit .opener__title { font-size:clamp(2.4rem,6.8vw,9.5rem); }
#sec-materiaalit .opener__ghost { font-size:clamp(5rem,18vw,20rem); }

/* =========================================================================
   OUTRO + TAKAISIN ALKUUN
   ========================================================================= */
.panel--outro { width:100vw; background:var(--kaarna); color:var(--tuohi); }

.panel--backtop { width:100vw; background:#111; color:#F9F7ED; }
.panel--backtop .panel__inner { justify-content:center; }
.backtop-btn { display:flex; flex-direction:column; align-items:center; gap:1.6rem; background:none; border:none; color:#F9F7ED; cursor:pointer; transition:opacity .35s; }
.backtop-btn:hover { opacity:.65; }
.backtop-btn__arrow { font-size:clamp(3rem,7vw,6rem); line-height:1; }
.backtop-btn__label { font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
.outro { position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2rem; }
.outro__logo { width:clamp(390px,54vw,840px); }
.outro__logo img { width:100%; }
.outro__slogan { font-family:var(--serif); font-style:italic; font-size:var(--t-lead); opacity:.9; }
.outro__credit { position:absolute; bottom:clamp(28px,4vw,52px); left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.outro__credit-label { font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; opacity:.6; }
.outro__credit-logo { display:inline-block; cursor:pointer; transition:transform .2s ease-out; transform-origin:center; backface-visibility:hidden; will-change:transform; }
.outro__credit-logo img { display:block; width:clamp(150px,16vw,230px); filter:brightness(0) invert(1); opacity:.9; }
.outro__credit-logo:hover img { opacity:1; }
.outro__top { font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; opacity:.55; }

/* =========================================================================
   PAINIKKEET + TOAST
   ========================================================================= */
.btn { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:.9rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid currentColor; padding:.8rem 1.5rem; transition:background .35s var(--ease), color .35s, transform .35s var(--ease); }
.btn:hover { transform:translateY(-2px); }
.btn--solid { background:var(--havu); color:var(--tuohi); border-color:var(--havu); }
.btn--solid:hover { background:var(--kaarna); border-color:var(--kaarna); }
.panel.green .btn--solid, .panel.brown .btn--solid { background:var(--tuohi); color:var(--kaarna); border-color:var(--tuohi); }
.btn-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.toast { position:fixed; bottom:2rem; left:50%; transform:translate(-50%,150%); background:var(--kaarna); color:var(--tuohi); padding:.9rem 1.5rem; font-family:var(--sans); font-size:.82rem; letter-spacing:.04em; z-index:200; transition:transform .5s var(--ease); }
.toast.is-show { transform:translate(-50%,0); }

/* =========================================================================
   INTERSTITIAALIT (täysruutukuva + parallax)
   ========================================================================= */
.panel--image { width:100vw; padding:0; }
.panel--image .panel__inner { display:block; }
.panel--image .img-wrap { position:absolute; inset:-8% -5%; overflow:hidden; }
.panel--image img { width:100%; height:100%; object-fit:cover; will-change:transform; }
.panel--image .img-cap { position:absolute; left:var(--gutter); bottom:3rem; z-index:3; font-family:var(--serif); font-style:italic; color:var(--tuohi); font-size:clamp(2.2rem,7vw,6rem); line-height:.95; text-shadow:0 2px 40px rgba(0,0,0,.4); max-width:60vw; }
.panel--image .img-credit { position:absolute; right:var(--gutter); bottom:3rem; z-index:3; font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--tuohi); opacity:.7; }
.panel--image::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(28,42,30,.28), rgba(28,42,30,.05) 40%, rgba(28,42,30,.42)); z-index:1; }

.panel--layers { width:80vw; background:var(--kaarna); }
.panel--layers .panel__inner { display:block; }
.panel--layers .layer { position:absolute; will-change:transform; }
.panel--layers .layer--tausta { inset:-12% -8%; z-index:0; }
.panel--layers .layer--tausta img { width:100%; height:100%; object-fit:cover; }
.panel--layers .layer--etuala { inset:0; z-index:3; }
.panel--layers .layer--etuala img { position:absolute; bottom:0; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); width:auto; height:118%; max-width:none; }
.panel--layers .img-cap { z-index:2; left:var(--gutter); }

/* =========================================================================
   RESPONSIIVISUUS — pinottu mobiili  (≤ 1200 px)
   ========================================================================= */
@media (max-width:1200px) {

  /* Tyyppiskaala */
  :root {
    --t-display: clamp(1.8rem,9vw,5rem);
    --t-mega:    clamp(5rem,28vw,10rem);
    --t-lead:    clamp(1.3rem,4vw,2rem);
    --gutter:    2.6rem;
  }

  /* ---- Rata → normaali pystyvieriys ---- */
  .track { display:block; }

  /* ---- Paneelit ---- */
  .panel {
    width:100% !important;
    height:auto;
    min-height:auto;
    padding:calc(var(--topbar) + 1.2rem) var(--gutter) 2.2rem;
    overflow:clip; /* clip without scroll container — lets transforms animate freely */
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
  }
  .panel__inner { height:auto; display:block; width:100%; overflow:visible; }

  /* Avaajapaneelit — pieni minimikorkeus */
  .panel--opener { min-height:42svh; padding:calc(var(--topbar) + 0.6rem) var(--gutter) 0; }

  /* ---- Image-paneelit: kiinteä korkeus ---- */
  .panel--image {
    height:70vw;
    min-height:260px;
    padding:0;
    overflow:hidden;
  }
  .panel--image .panel__inner { height:100%; position:relative; display:block; }

  /* Layers-paneeli (marjat): täysikorkea kuva */
  .panel--layers {
    height:100svh;
    padding:0;
    overflow:hidden;
  }
  .panel--layers .panel__inner { height:100%; position:relative; display:block; }
  .panel--layers .layer--tausta { inset:-8% -5%; }
  .panel--layers .layer--tausta img { width:100%; height:100%; object-fit:cover; object-position:center center; }
  .panel--layers .layer--etuala { inset:0; display:flex; align-items:center; justify-content:center; }
  .panel--layers .layer--etuala img { width:100%; height:100%; object-fit:cover; object-position:center 30%; max-width:none; }

  /* Outro & backtop */
  .panel--outro { min-height:100svh; }
  .panel--backtop { min-height:60vw; }

  /* ---- Kansi ---- */
  .cover { height:auto; overflow:hidden; }
  .cover__top { display:none; } /* navipalkki näyttää saman tiedon → turha kannessa */
  .cover__frame {
    top:calc(var(--topbar) + 10px);
    left:12px; right:12px; bottom:12px;
    inset:unset;
    position:absolute;
  }
  .cover__logo { width:98vw; max-width:520px; }
  .cover__content {
    position:relative;
    inset:auto;
    min-height:100svh;
    transform:none !important;
    padding:calc(var(--topbar) + 4rem) var(--gutter) 3rem;
  }
  .cover__scroll { display:none; }
  .sisallys-strip {
    position:static;
    width:100%;
    height:auto;
    transform:none !important;
    padding:2.5rem var(--gutter) 3.5rem;
  }
  .sis-item { overflow:visible; }
  .sis-item__title { font-size:clamp(1.1rem,5vw,1.8rem); }

  /* ---- Topbar ---- */
  body.is-cover .topbar { opacity:1; pointer-events:auto; }
  .topbar {
    padding:0 var(--gutter);
    mix-blend-mode:normal;
    background:var(--tuohi);
    border-bottom:1px solid rgba(92,61,49,.12);
  }
  .topbar * { color:var(--kaarna); }
  .topbar__home { position:static; left:auto; transform:none; order:-1; margin-right:auto; }
  .topbar__sub { display:inline; }
  .topbar__wordmark { font-size:.6rem; letter-spacing:.08em; }
  .topbar__menu { padding:.45rem .9rem; font-size:.58rem; letter-spacing:.08em; gap:.4em; border-color:var(--kaarna); flex:0 0 auto; }
  #statusTitle, .docnum { display:none; }
  .cursor, .cursor-dot { display:none; }
  .menu__item { gap:.6rem; }
  .menu__item-num { min-width:1.8rem; }

  /* ---- Avaajat ---- */
  .opener {
    height:auto;
    min-height:40svh;
    gap:1.4rem;
    padding:0.6rem 0 2rem;
  }
  .opener__title { letter-spacing:-.02em; }
  .opener__foot { flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .opener__lead { max-width:90%; }

  /* Materiaalipankki erityinen pienennys */
  #sec-materiaalit .opener__title { font-size:clamp(1.4rem,8vw,4rem); }
  #sec-materiaalit .opener__ghost { font-size:clamp(4rem,18vw,8rem); }

  /* ---- Tarina ---- */
  .tarina { grid-template-columns:1fr; width:100%; gap:2rem; }
  .tarina__virsut { position:relative; right:auto; top:auto; width:calc(100% + 2 * var(--gutter)); max-width:none; margin:0 calc(-1 * var(--gutter)) .5rem; order:-1; }
  .tarina__story { columns:1; padding-bottom:3rem; }
  .opener__title { white-space:normal; overflow:visible; line-height:.9; }

  /* ---- Logo ---- */
  .logo-sw-grid { grid-template-columns:1fr; gap:2.4rem; }
  .logo-sw__stage { height:clamp(200px,55vw,300px); }
  .panel--sub .content { max-width:100%; }
  /* sub-paneelit jatkuvat osion sisällä → ei tuplapehmusteita, tasaisemmat välit */
  .panel--sub { padding-top:calc(var(--topbar) + 0.4rem); padding-bottom:1.4rem; }
  .panel--sub .panel__inner, [data-key="logo"].panel--sub .panel__inner { padding-top:0; }
  .clearspace { width:100%; aspect-ratio:4/3; }
  .minsize__stage { height:clamp(120px,16vw,180px); }
  .dont__stage { height:clamp(120px,16vw,180px); }
  .panel--kaytto { padding-right:var(--gutter); }

  /* ---- Värit ---- */
  [data-key="varimaailma"].panel:not(.panel--opener) { padding:var(--topbar) 0 2rem; }
  [data-key="varimaailma"].panel:not(.panel--opener) .panel__inner { align-items:flex-start; }
  [data-key="varimaailma"].panel:not(.panel--opener) .content { flex-direction:column; height:auto; }
  .varimaailma-full { flex-direction:column; height:auto; }
  .varimaailma-full__text { width:100%; padding:0 var(--gutter) 2rem; }
  .varimaailma-full__colors { border-left:none; border-top:1px solid var(--rule); flex-wrap:wrap; }
  .swatch { flex:0 0 calc(33.333% - 1px); min-width:0; }
  .swatch__main { height:clamp(90px,20vw,160px); flex:none; }

  /* ---- Typografia ---- */
  .type-spec__sample { font-size:clamp(1.8rem,9vw,3.5rem); }
  .typo-layout { flex-direction:column; }
  .typo-cols { grid-template-columns:1fr; gap:2.5rem; }
  .typo-col__name { font-size:1rem; }

  /* ---- Graafiset elementit ---- */
  .kuosi-set { width:100%; flex-direction:column; gap:1.8rem; }
  .kuosi__frame { aspect-ratio:4/3; }

  /* ---- Kuvamaailma ---- */
  .gallery { flex-direction:column; align-items:stretch; height:auto; gap:1.2rem; }
  .gallery__big { order:1; }
  .gallery__intro { order:2; width:100%; max-width:none; }
  .gallery__item { order:3; }
  .gallery figure { width:100%; }
  .gallery__big img,
  .gallery__item img { height:auto; width:100%; object-fit:cover; aspect-ratio:4/3; }
  .gallery__dl { top:.8rem; right:.8rem; }

  /* ---- Sovellukset ---- */
  .dlgroups { flex-direction:column; width:100%; }
  .dlgroup { border-left:none; padding:0; border-top:1px solid var(--rule); padding-top:1rem; margin-top:1rem; }
  .dlgroup:first-child { border-top:none; margin-top:0; padding-top:0; }
  /* Materiaalipankki: täysleveä (ei max-content) → rivit levenevät, eivät näytä vasempaan tasatuilta */
  [data-key="materiaalit"]:not(.panel--opener) .panel__inner { width:100%; }
  [data-key="materiaalit"]:not(.panel--opener) .content { width:100%; }
  [data-key="materiaalit"] .dlgroups { width:100%; }
  [data-key="materiaalit"] .dlgroup { width:100%; min-width:0; border-top:none; border-left:none; padding-left:0; margin-top:0; }
  [data-key="materiaalit"] .matrow { flex-direction:row; align-items:center; justify-content:space-between; }
  [data-key="materiaalit"] .matrow__formats { flex-wrap:nowrap; }

  /* ---- Brändiääni ---- */
  .traits { flex-direction:column; gap:1.4rem; }
  .trait { border-left:none; padding:0; }
  .voice-ex { grid-template-columns:1fr; }

  /* ---- Saavutettavuus ---- */
  .rules { grid-template-columns:1fr; width:100%; }
  .rule { border-top:1px solid var(--rule); border-right:none !important; padding:1rem 0 !important; }
  .rule:last-child { border-bottom:1px solid var(--rule); }

  /* ---- Materiaalit ---- */
  .matgrid { grid-template-columns:1fr; width:100%; }
  .content--wide { max-width:100%; overflow-x:hidden; }

  /* ---- Outro ---- */
  .outro { min-height:100svh; justify-content:center; gap:1.6rem; padding:calc(var(--topbar) + 1rem) var(--gutter) 2.5rem; }
  .outro__logo { width:96vw; max-width:520px; }
  .outro__credit { position:static; left:auto; right:auto; bottom:auto; margin-top:1.5rem; }

  /* ---- Osioviivat (pystysuora → vaakavana) ---- */
  .panel.is-section-start::before { left:0; right:0; top:0; bottom:auto; width:auto; height:1px; }

  /* ---- Taustavärjätyt isot numerot ---- */
  .bignum { font-size:42vw; }
}

@media (prefers-reduced-motion:reduce) { * { animation-duration:.001ms !important; } }