/* ROPINA — FINAL CAMP 2026 · Versio B
   Yksi tietoinen visuaalinen maailma: elokuvan title sequence, ei brändigrafiikkaa.
   Deck ei seuraa katsojan teemaa — se on oma maailmansa, jossa on tummia ja
   vaaleita kohtauksia. Kaikki värit maalataan eksplisiittisesti tokeneilla. */

:root{
  /* brändipaletti */
  --night:#171129;
  --navy:#242948;
  --mist:#ECEBEA;
  --blue:#72AFC2;
  --flash:#FFE897;

  /* semanttiset tokenit — tumma kohtaus (oletus) */
  --ground:var(--night);
  --ink:var(--mist);
  --ink-78:rgba(236,235,234,.78);
  --ink-58:rgba(236,235,234,.58);
  --ink-40:rgba(236,235,234,.40);
  --ink-22:rgba(236,235,234,.22);
  --ink-12:rgba(236,235,234,.12);
  --ink-07:rgba(236,235,234,.07);
  --accent:var(--blue);
  --card:rgba(236,235,234,.05);

  --pad:132px;
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

/* vaalea kohtaus — samat tokenit, käännetyt arvot */
.slide--light{
  --ground:var(--mist);
  --ink:var(--night);
  --ink-78:rgba(23,17,41,.78);
  --ink-58:rgba(23,17,41,.56);
  --ink-40:rgba(23,17,41,.42);
  --ink-22:rgba(23,17,41,.24);
  --ink-12:rgba(23,17,41,.14);
  --ink-07:rgba(23,17,41,.08);
  --accent:#3E7F94;              /* Rain Blue tummennettuna, jotta kontrasti riittää */
  --card:rgba(255,255,255,.62);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
html{height:100dvh}
body{
  background:var(--night);
  color:var(--mist);
  font-family:var(--body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact;
}

/* ── näyttämö ───────────────────────────────────────────────────────────── */
.viewport{position:fixed;inset:0;overflow:hidden;background:var(--night)}
.stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  transform:translate(-50%,-50%);transform-origin:center center}

.slide{
  position:absolute;inset:0;
  width:1920px;height:1080px;
  background:var(--ground);
  color:var(--ink);
  overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.25,1);
  transform:scale(1.015);
}
.slide.is-on{opacity:1;visibility:visible;transform:scale(1);z-index:2}

@media (prefers-reduced-motion:reduce){
  .slide{transition:opacity .15s linear;transform:none}
  .slide.is-on{transform:none}
}

/* ── kerrokset ──────────────────────────────────────────────────────────── */
.bleed{position:absolute;inset:0}
.bleed img{width:100%;height:100%;object-fit:cover;display:block}

.scrim{position:absolute;inset:0;pointer-events:none}
.scrim-bottom{background:linear-gradient(to top,
  rgba(23,17,41,.95) 0%, rgba(23,17,41,.74) 22%, rgba(23,17,41,.24) 52%,
  rgba(23,17,41,.10) 74%, rgba(23,17,41,.42) 100%)}
.scrim-left{background:linear-gradient(100deg,
  rgba(23,17,41,.96) 0%, rgba(23,17,41,.82) 26%, rgba(23,17,41,.34) 55%,
  rgba(23,17,41,.14) 78%, rgba(23,17,41,.30) 100%)}
.scrim-right{background:linear-gradient(260deg,
  rgba(23,17,41,.96) 0%, rgba(23,17,41,.80) 28%, rgba(23,17,41,.32) 58%,
  rgba(23,17,41,.12) 80%, rgba(23,17,41,.34) 100%)}
.scrim-band{background:linear-gradient(to bottom,
  rgba(23,17,41,.93) 0%, rgba(23,17,41,.62) 20%, rgba(23,17,41,.22) 42%,
  rgba(23,17,41,.30) 60%, rgba(23,17,41,.90) 86%, rgba(23,17,41,.97) 100%)}

.grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("/assets/img/grain.png?v=6d6654f1");background-repeat:repeat;background-size:160px 160px;
  mix-blend-mode:overlay;opacity:.38;
}
.slide--light .grain{mix-blend-mode:multiply;opacity:.16}

.rainbox{position:absolute;pointer-events:none}
.rainbox svg,.ripplebox svg{width:100%;height:100%;display:block}
.ripplebox{position:absolute;pointer-events:none}

.pad{position:absolute;inset:var(--pad)}

/* ── typografia ─────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--body);font-weight:500;font-size:16px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}
.eyebrow-dim{color:var(--ink-40)}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.033em;
  line-height:.94;text-wrap:balance;color:var(--ink)}
.t-hero{font-size:136px}
.t-h1{font-size:107px}
.t-h2{font-size:85px}
.t-h3{font-size:62px}
.t-h4{font-size:44px;letter-spacing:-.02em;line-height:1.06}

.lead{font-size:31px;line-height:1.52;color:var(--ink-78);max-width:23em;font-weight:400}
.body{font-size:26px;line-height:1.58;color:var(--ink-58);max-width:30em}
.small{font-size:22px;line-height:1.5;color:var(--ink-40)}
.hi{color:var(--ink)}
.flash{color:var(--flash)}
.slide--light .flash{color:#B8892B}

.rule{width:76px;height:2px;background:var(--accent);opacity:.85}

.stack{display:flex;flex-direction:column}
.gap-16{gap:16px} .gap-24{gap:24px} .gap-32{gap:32px}
.gap-40{gap:40px} .gap-56{gap:56px}

.logo{display:block;width:236px;height:auto;opacity:.92}

/* ── kuvalevyt ja mosaiikit ─────────────────────────────────────────────── */
.plate{position:relative;overflow:hidden;background:var(--navy)}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px var(--ink-07);pointer-events:none}
.slide--light .plate{background:rgba(23,17,41,.06)}

.mosaic{display:grid;gap:6px}
.mosaic .plate{width:100%;height:100%}

.tile{display:flex;flex-direction:column;gap:14px;min-height:0}
.tile .plate{flex:1;min-height:0}
.tile figcaption{font-family:var(--display);font-weight:600;font-size:22px;
  letter-spacing:-.01em;color:var(--ink-78)}

/* videolinkki + QR */
.watch{display:flex;align-items:center;gap:22px;text-decoration:none;color:inherit;
  padding:16px 0;border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);
  width:max-content;transition:border-color .2s ease}
.watch:hover,.watch:focus-visible{border-color:var(--accent)}
.watch:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.qr{width:104px;height:104px;flex:none;display:block}
.qr path{fill:var(--ink)}
.watch-txt{display:flex;flex-direction:column;gap:6px}
.watch-txt b{font-family:var(--display);font-weight:600;font-size:26px;
  letter-spacing:-.015em;color:var(--ink)}
.watch-txt span{font-size:18px;color:var(--ink-40)}
.watch-txt .go{color:var(--accent);font-weight:500}

/* ── tulostus ───────────────────────────────────────────────────────────── */
@media print{
  @page{size:1920px 1080px;margin:0}
  html,body{overflow:visible;height:auto;background:var(--night)}
  .viewport{position:static;overflow:visible}
  .stage{position:static;left:auto;top:auto;width:1920px;height:auto;transform:none!important}
  .slide{position:relative;inset:auto;opacity:1!important;visibility:visible!important;
    transform:none!important;break-after:page;page-break-after:always}
  .slide:last-child{break-after:auto;page-break-after:auto}
  .grain{opacity:.28}
}


/* ── diakohtaiset sommitelmat ───────────────────────────────────────────── */

/* 01 kansi */
.s1-mark{position:absolute;right:0;bottom:0;width:306px;height:auto;display:block;
  opacity:.95}
.s1-copy{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:34px}
.s1-copy .t-hero{max-width:14em}

/* 02 alku */
.s2{display:grid;grid-template-columns:646px 1fr;gap:96px;align-items:center}
.s2-plate{height:566px}
.s2-plate::after{box-shadow:inset 0 0 0 1px var(--ink-12)}

/* 03 kaksikymmentäyksi */
.s3-sheet{position:absolute;right:0;top:0;width:900px;height:1080px;
  grid-template-columns:1fr 1fr;grid-template-rows:338px 1fr}
.s3-sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:150px;z-index:3;
  background:linear-gradient(to right,var(--night),rgba(23,17,41,0));pointer-events:none}
.s3-text{right:auto;width:888px;display:flex;flex-direction:column;justify-content:center;gap:38px}
.s3-list{display:flex;flex-direction:column;gap:9px;font-size:28px;line-height:1.34;
  color:var(--ink-58);max-width:20em}
.s3-q{font-family:var(--display);font-weight:600;font-size:36px;letter-spacing:-.02em;
  color:var(--ink);margin-top:10px}

/* 04–06 tiimi (vaalea) */
.team{display:flex;flex-direction:column;gap:44px}
.team-head{display:flex;align-items:baseline;justify-content:space-between;gap:40px}
.team-row{display:grid;grid-template-columns:repeat(7,1fr);gap:22px;flex:1;min-height:0;
  align-content:center}
.member{display:flex;flex-direction:column;gap:14px;min-width:0}
.member .shot{height:468px;overflow:hidden;flex:none}
.member .shot img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,0) 100%)}
.member h3{font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:-.015em;line-height:1.15;color:var(--ink)}
.member p{font-size:16px;line-height:1.40;color:var(--ink-58)}
.member .nick{color:var(--accent)}

/* 07 meidän tapa */
.s7-copy{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:30px;
  max-width:1180px}
.s7-values{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.s7-values span{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-40)}
.s7-values span+span::before{content:"·";margin-right:14px;color:var(--accent);opacity:.6}

/* 08 toimeksiannot */
.s8{display:flex;flex-direction:column;gap:26px}
.s8-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;row-gap:0}
.case{padding:15px 0;border-top:1px solid var(--ink-12)}
.case-top{display:flex;align-items:baseline;gap:16px}
.case-top b{font-family:var(--display);font-weight:600;font-size:28px;
  letter-spacing:-.018em;color:var(--ink)}
.case-top .meta{margin-left:auto;display:flex;align-items:baseline;gap:14px;flex:none}
.case-top .score{font-family:var(--display);font-weight:600;font-size:22px;
  color:var(--accent);font-variant-numeric:tabular-nums;flex:none}
.case-top .tag{font-family:var(--body);font-weight:500;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);flex:none}
.case p{margin-top:7px;font-size:18px;line-height:1.46;color:var(--ink-58);max-width:34em}
.s8-strip{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:8px;height:214px;flex:none}

/* 09 track record */
.s9{display:flex;flex-direction:column;justify-content:center;gap:44px}
.s9-num{display:flex;align-items:baseline;gap:34px;font-family:var(--display);font-weight:700}
.s9-num .n{font-size:316px;line-height:.78;letter-spacing:-.055em}
.s9-num .d{font-size:86px;letter-spacing:-.03em;color:var(--ink-40)}
.s9-copy{display:flex;flex-direction:column;gap:26px}

/* 10 siirtymä */
.s10-copy{position:absolute;right:0;bottom:0;width:860px;display:flex;flex-direction:column;gap:30px}

/* 11 omat projektit */
.s11{display:flex;flex-direction:column;gap:56px}
.s11-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;flex:1;min-height:0}
.proj{display:flex;flex-direction:column;gap:26px;padding:38px 36px;
  background:var(--card);border:1px solid var(--ink-12)}
.proj .mark{height:44px;display:flex;align-items:center}
.proj .mark img{max-height:44px;width:auto;max-width:250px;display:block;opacity:.95}
.proj>p{font-size:19px;line-height:1.5;color:var(--ink-58)}
.proj .stats{margin-top:auto;display:flex;flex-direction:column;gap:14px;
  padding-top:26px;border-top:1px solid var(--ink-12)}
.proj .stat{display:flex;align-items:baseline;gap:12px}
.proj .stat b{font-family:var(--display);font-weight:700;font-size:35px;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.proj .stat span{font-size:16px;line-height:1.3;color:var(--ink-40)}
.proj a.site{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;width:max-content;padding-bottom:3px}
.proj a.site:hover,.proj a.site:focus-visible{border-bottom-color:var(--accent)}
.proj a.site:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* 12 lavly (vaalea) */
.s12{display:grid;grid-template-columns:600px 592px 380px;gap:42px}
.s12-left{display:flex;flex-direction:column;gap:26px}
.s12-tags{font-size:20px;line-height:1.62;color:var(--ink-58)}
.s12-stat{margin-top:auto;padding-top:28px;border-top:1px solid var(--ink-12);
  display:flex;flex-direction:column;gap:8px}
.s12-stat b{font-family:var(--display);font-weight:700;font-size:72px;letter-spacing:-.035em;
  line-height:1;color:var(--ink)}
.s12-pics{display:grid;grid-template-rows:404px 1fr;grid-template-columns:1fr 1fr;gap:10px}
.s12-pics .wide{grid-column:1/3}
.s12-media{display:flex;flex-direction:column;gap:10px;min-height:0}
.s12-media>.eyebrow{margin-bottom:4px}
.clip{display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--ink-12);padding:14px 16px;transition:border-color .2s ease}
.clip:hover,.clip:focus-visible{border-color:var(--accent)}
.clip:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.clip .src{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.clip .src b{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink)}
.clip .src span{font-size:12px;letter-spacing:.1em;color:var(--ink-40);
  font-variant-numeric:tabular-nums}
.clip q{quotes:none;font-size:15px;line-height:1.35;color:var(--ink-58);display:block}
.s12-more{margin-top:auto;font-size:15px;letter-spacing:.06em;color:var(--ink-40);
  text-decoration:none;padding-top:8px}
.s12-more:hover{color:var(--accent)}

/* 13 trex */
.s13-plate{position:absolute;right:0;top:123px;width:660px;height:834px}
.s13-copy{position:absolute;left:var(--pad);top:0;bottom:0;width:880px;
  display:flex;flex-direction:column;justify-content:center;gap:28px}
.s13-facts{display:flex;gap:44px;padding:22px 0;border-top:1px solid var(--ink-12);
  border-bottom:1px solid var(--ink-12)}
.s13-facts div{display:flex;flex-direction:column;gap:5px}
.s13-facts b{font-family:var(--display);font-weight:700;font-size:39px;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.s13-facts span{font-size:15px;line-height:1.3;color:var(--ink-40);max-width:11em}

/* 14 praha */
.s14{display:flex;flex-direction:column;gap:46px}
.s14-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:72px}
.s14-body{display:grid;grid-template-columns:1.62fr 1fr;gap:10px;flex:1;min-height:0}
.s14-tiles{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}

/* 15 viimeinen reissu */
.s15-copy{position:absolute;left:0;top:0;width:900px;display:flex;flex-direction:column;gap:28px}

/* 16 speksit (vaalea) */
.s16{display:grid;grid-template-columns:300px 1fr;gap:0}
.s16-rail{position:relative;display:flex;flex-direction:column;justify-content:space-between}
.s16-rail .vert{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-40);writing-mode:vertical-rl;
  transform:rotate(180deg);align-self:flex-start}
.s16-main{display:flex;flex-direction:column;justify-content:center;gap:40px}
.s16-specs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:52px;margin-top:26px}
.s16-specs div{display:flex;flex-direction:column;gap:14px;padding-top:22px;
  border-top:1px solid var(--ink-22)}
.s16-specs .accent{border-top-color:var(--accent)}
.s16-specs b{font-family:var(--display);font-weight:700;font-size:64px;letter-spacing:-.04em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.s16-specs .accent b{color:var(--accent)}
.s16-specs span{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-40)}

/* 17 mitä etsitään */
.s17{display:flex;flex-direction:column;justify-content:center;gap:40px}
.s17-list{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.s17-list li{list-style:none;font-family:var(--display);font-weight:600;font-size:56px;
  letter-spacing:-.028em;line-height:1.12;color:var(--ink)}
.s17-list li.last{font-weight:500;color:var(--ink-58);max-width:17em;line-height:1.24;
  margin-top:16px}

/* 18 mitä voidaan tuoda */
.s18{display:flex;flex-direction:column;gap:44px}
.s18-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:26px;flex:1;min-height:0}
.s18-grid .g1{grid-column:1;grid-row:1/3}
.s18-grid .g2{grid-column:2/4;grid-row:1}
.s18-grid .g3{grid-column:4;grid-row:1}
.s18-grid .g4{grid-column:2;grid-row:2}
.s18-grid .g5{grid-column:3;grid-row:2}
.s18-grid .g6{grid-column:4;grid-row:2}

/* 19 lopetus */
.s19{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center}
.s19 h2{max-width:15em}
.s19-foot{display:flex;flex-direction:column;align-items:center;gap:26px}
.s19-contact{font-size:20px;letter-spacing:.04em;color:var(--ink-40)}
.s19-contact a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ink-22);
  padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
.s19-contact a:hover,.s19-contact a:focus-visible{color:var(--ink);border-color:var(--accent)}
.s19-contact a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.s19-foot .s19-contact{line-height:1.7}

/* kosketusalue linkeille, jotka ovat puhelimen ruudulla vain muutaman pikselin
   korkeita — ulkoasu ei muutu, vain osumapinta kasvaa */
.proj a.site,.s12-more,.s19-contact a{position:relative}
.proj a.site::after,.s12-more::after,.s19-contact a::after{
  content:"";position:absolute;left:-16px;right:-16px;top:-18px;bottom:-18px}


/* ── Versio A · kuusi diaa ──────────────────────────────────────────────────
   Sama visuaalinen maailma kuin B:ssä, mutta tiheämpi rakenne: vastaanottaja
   ei tunne meitä, joten jokainen dia on skannattava kerralla. */

/* oppilaitosten lukkari — sama komponentti kannessa ja lopetuksessa */
.a-schools{display:flex;align-items:center;gap:26px}
.a-schools img{display:block;height:34px;width:auto;opacity:.94}
.a-schools img.pro{height:19px}
.a-schools img.rop{height:30px}
.a-schools-rule{width:1px;height:28px;background:var(--ink-22);flex:none}
.slide--light .a-schools img{opacity:.86}

/* lukukolmikko: sama hiusviivarakenne kuin B:n speksidialla */
.a-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:8px}
.a-facts div{display:flex;flex-direction:column;gap:10px;padding-top:20px;
  border-top:1px solid var(--ink-22)}
.a-facts .accent{border-top-color:var(--accent)}
.a-facts b{font-family:var(--display);font-weight:700;font-size:66px;letter-spacing:-.04em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.a-facts .accent b{color:var(--accent)}
.a-facts span{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-40);line-height:1.4}

/* A1 kansi */
.a1-copy{position:absolute;left:0;bottom:0;width:1080px;
  display:flex;flex-direction:column;gap:30px}
.a1-copy .t-h1{max-width:11em}
.a1-copy .lead{max-width:26em}
.a1-copy .a-schools{margin-top:14px;padding-top:30px;border-top:1px solid var(--ink-12);
  width:max-content}

/* A2 keitä olemme */
.a2{display:grid;grid-template-columns:1fr 720px;gap:96px;align-items:center}
.a2-copy{display:flex;flex-direction:column;gap:30px}
.a2-copy .lead{max-width:26em}
.a2-copy .body{max-width:38em}
.a2-plate{height:816px}
.a2-ropina{font-size:23px;line-height:1.55;color:var(--ink-58);max-width:36em;
  padding-top:26px;border-top:1px solid var(--ink-12)}

/* A3 mitä etsitään */
.a3{display:flex;flex-direction:column;justify-content:space-between}
.a3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:72px}
.a3-item{display:flex;flex-direction:column;gap:20px;padding-top:28px;
  border-top:1px solid var(--ink-22)}
.a3-item:first-child{border-top-color:var(--accent)}
.a3-item p:not(.eyebrow){font-size:30px;line-height:1.44;color:var(--ink-78)}
.a3-kinds{display:flex;flex-direction:column;gap:26px;padding-top:40px;
  border-top:1px solid var(--ink-12)}
.a3-kinds ul{display:flex;flex-wrap:wrap;gap:14px 16px;list-style:none;max-width:1500px}
.a3-kinds li{font-family:var(--body);font-weight:500;font-size:24px;
  color:var(--ink-78);padding:15px 28px;border:1px solid var(--ink-22);
  border-radius:999px;background:var(--card)}
.a3-kinds li:last-child{color:var(--ink-40);border-style:dashed}

/* A4 mitä tuodaan */
.a4{display:flex;flex-direction:column;gap:56px;justify-content:center}
.a4-head{display:grid;grid-template-columns:1fr 620px;align-items:end;gap:80px}
.a4-head .body{max-width:none;color:var(--ink-58)}
.a4-row{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;align-content:start}
.a4-card{display:flex;flex-direction:column;gap:20px;min-width:0}
.a4-card .plate{height:300px;flex:none}
.a4-card h3{font-family:var(--display);font-weight:600;font-size:27px;
  letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.a4-card p{font-size:20px;line-height:1.48;color:var(--ink-58)}

/* A5 näyttö (vaalea) */
.a5{display:flex;flex-direction:column;gap:76px;justify-content:center}
.a5-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:90px}
.a5-head .lead{max-width:30em}
.a5-score{display:flex;flex-direction:column;gap:12px;align-items:flex-end;text-align:right;
  padding-bottom:6px}
.a5-score b{font-family:var(--display);font-weight:700;font-size:126px;letter-spacing:-.05em;
  line-height:.86;color:var(--ink);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:14px}
.a5-score .d{font-size:44px;letter-spacing:-.03em;color:var(--ink-40)}
.a5-score>span{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-40);max-width:15em}
.a5-row{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.a5-case{display:flex;flex-direction:column;gap:14px;padding-top:26px;
  border-top:1px solid var(--ink-22)}
.a5-top{display:flex;align-items:baseline;gap:18px}
.a5-top h3{font-family:var(--display);font-weight:600;font-size:29px;letter-spacing:-.02em;
  line-height:1.1;color:var(--ink)}
.a5-top .score{margin-left:auto;font-family:var(--display);font-weight:600;font-size:21px;
  color:var(--accent);font-variant-numeric:tabular-nums;flex:none}
.a5-case p{font-size:20px;line-height:1.5;color:var(--ink-58)}
.a5-own{border-top-color:var(--accent)}

/* A6 lopetus — ryhmäkuva jatkuu oikealla, teksti omalla tummalla palstallaan.
   Ihmisiä on kehyksen laidasta laitaan, joten vasen kaista pitää tummentaa
   selvästi jyrkemmin kuin muilla dioilla. */
.a6-scrim{background:
  linear-gradient(98deg, rgba(23,17,41,.985) 0%, rgba(23,17,41,.955) 26%,
    rgba(23,17,41,.80) 42%, rgba(23,17,41,.34) 60%, rgba(23,17,41,.12) 80%,
    rgba(23,17,41,.34) 100%),
  linear-gradient(to top, rgba(23,17,41,.86) 0%, rgba(23,17,41,.30) 26%,
    rgba(23,17,41,0) 52%)}

.a6{display:flex;flex-direction:column;justify-content:space-between}
.a6-copy{display:flex;flex-direction:column;gap:30px;max-width:860px;margin-top:26px}
.a6 h2{max-width:9em}
.a6-lead{max-width:21em;color:var(--ink-78)}
.a6-foot{display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  width:max-content}
.a6-contact{font-size:21px;line-height:1.72;color:var(--ink-58)}
.a6-contact b{font-family:var(--display);font-weight:600;font-size:23px;
  letter-spacing:-.015em;color:var(--ink)}
.a6-contact a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ink-22);
  padding-bottom:1px;transition:color .2s ease,border-color .2s ease;position:relative}
.a6-contact a::after{content:"";position:absolute;left:-16px;right:-16px;top:-18px;bottom:-18px}
.a6-contact a:hover,.a6-contact a:focus-visible{color:var(--ink);border-color:var(--accent)}
.a6-contact a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.a6-schools{padding-top:28px;border-top:1px solid var(--ink-12)}

/* ROPINA — sivuston kromi: yläpalkki, navigointivyöhykkeet, avausanimaatio,
   kääntökehote. Deckin oma maailma on deck.css:ssä; tämä on sen kehys. */

:root{ --bar:54px; }

body.deck{
  background:var(--night);
  overflow:hidden;
  overscroll-behavior:none;
}

/* näyttämö alkaa yläpalkin alta */
body.deck .viewport{top:var(--bar);bottom:0;left:0;right:0;height:auto}


/* ── meriitit ja linkitetyt logot ───────────────────────────────────────── */
.a-schools a{display:flex;align-items:center;position:relative;
  transition:opacity .2s ease}
.a-schools a::after{content:"";position:absolute;left:-14px;right:-14px;top:-16px;bottom:-16px}
.a-schools a:hover{opacity:.72}
.a-schools a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

.a5-marks{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;
  align-items:flex-start;gap:20px;border-top:1px solid var(--ink-12)}
.a5-marks a{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  text-decoration:none;color:inherit;position:relative;transition:opacity .2s ease}
.a5-marks a::after{content:"";position:absolute;left:-12px;right:-12px;top:-9px;bottom:-9px}
.a5-marks a:hover{opacity:.68}
.a5-marks a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.a5-marks img{display:block;width:auto;height:22px;flex:none;opacity:.82}
.a5-marks a:nth-child(2) img{height:18px}
.a5-marks a:nth-child(3) img{height:21px}
.a5-marks span{font-size:16px;line-height:1.4;color:var(--ink-40);
  font-variant-numeric:tabular-nums}

/* ── yläpalkki ──────────────────────────────────────────────────────────── */
.topbar{
  position:fixed;left:0;right:0;top:0;height:var(--bar);z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:0 18px;
  background:rgba(23,17,41,.92);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(236,235,234,.10);
  font-family:var(--body);
  user-select:none;
}

.tb-home{display:flex;align-items:center;justify-self:start;padding:6px 4px;
  border-radius:3px;opacity:.72;transition:opacity .2s ease}
.tb-home img{height:15px;width:auto;display:block}
.tb-home:hover{opacity:1}

/* keskiryhmä: nuolet + laskuri */
.tb-mid{display:flex;align-items:center;gap:6px;justify-self:center}
.tb-count{display:flex;align-items:baseline;gap:5px;padding:0 8px;
  font-size:13px;letter-spacing:.14em;font-variant-numeric:tabular-nums;
  color:rgba(236,235,234,.34)}
.tb-count b{font-weight:600;color:var(--mist)}
.tb-count i{font-style:normal;opacity:.5}

/* oikea ryhmä: liput + lataus */
.tb-right{display:flex;align-items:center;gap:8px;justify-self:end}
.tb-sep{width:1px;height:18px;background:rgba(236,235,234,.14);margin:0 4px}

/* yhteinen painikepohja */
.tb-btn{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;
  border:0;background:transparent;padding:0;margin:0;
  color:rgba(236,235,234,.62);cursor:pointer;border-radius:4px;
  text-decoration:none;
  transition:color .2s ease, background-color .2s ease, opacity .2s ease;
}
.tb-btn:hover{color:var(--mist);background:rgba(236,235,234,.08)}
.tb-btn svg{display:block}
.tb-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tb-btn[disabled],.tb-btn[aria-disabled="true"]{opacity:.26;pointer-events:none}

/* lippupainikkeet */
.flag{width:38px;height:34px}
.flag svg{width:24px;height:auto;display:block;border-radius:1.5px;
  box-shadow:0 0 0 1px rgba(236,235,234,.22);opacity:.62;
  transition:opacity .2s ease, box-shadow .2s ease}
.flag:hover svg{opacity:1}
.flag.is-on svg{opacity:1;box-shadow:0 0 0 1px rgba(236,235,234,.5)}
.flag.is-on::after{content:"";position:absolute;bottom:5px;width:16px;height:2px;
  background:var(--blue);border-radius:1px}
.flag{position:relative}
.flag[aria-disabled="true"] svg{opacity:.22}

/* edistymispalkki yläpalkin alareunassa, klikattavissa */
.tb-track{
  position:absolute;left:0;right:0;bottom:-1px;height:9px;
  display:flex;align-items:flex-end;cursor:pointer;
}
.tb-track::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(236,235,234,.09)}
.tb-fill{position:relative;height:2px;width:0;background:var(--blue);opacity:.85;
  transition:width .42s cubic-bezier(.3,.8,.3,1)}
.tb-track:hover .tb-fill{opacity:1}
.tb-track:hover::before{background:rgba(236,235,234,.18)}

/* ── navigointinuolet ───────────────────────────────────────────────────────
   Ei klikkauskerrosta diojen päällä: se peittäisi dioilla olevat linkit
   (QR-linkit, mediakortit, projektisivut) eivätkä ne aukeaisi millään
   laitteella. Klikkaus luetaan dokumentilta ja linkit ohitetaan. */
.zones{position:fixed;top:var(--bar);left:0;right:0;bottom:0;z-index:15;
  pointer-events:none}

.edge{
  position:fixed;top:50%;transform:translateY(-50%);z-index:16;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  color:var(--mist);opacity:0;transition:opacity .25s ease;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(23,17,41,.62) 0%,rgba(23,17,41,.34) 52%,
    rgba(23,17,41,0) 74%);
}
.edge-prev{left:10px} .edge-next{right:10px}
.edge.is-near{opacity:.92}
body.is-pointing .edge{opacity:.34}
@media (hover:none){ .edge{display:none} }

/* ── avausanimaatio ─────────────────────────────────────────────────────────
   Pisara putoaa 19° kulmassa (sama geometria kuin sadeviivoissa), osuu keskelle,
   ja renkaiden mukana Deep Night -verho aukeaa iiriksenä dialle 1. */
@property --iris { syntax:'<percentage>'; inherits:false; initial-value:0%; }

.intro{
  position:fixed;inset:0;z-index:60;background:var(--night);
  cursor:pointer;
}
.intro svg{width:100%;height:100%;display:block}

.intro .drop{
  stroke:var(--blue);stroke-width:4;stroke-linecap:round;fill:none;
  stroke-dasharray:104 2400;stroke-dashoffset:104;
  animation:drop-fall .60s cubic-bezier(.5,.03,.85,.4) forwards;
}
@keyframes drop-fall{ to{ stroke-dashoffset:-596 } }

.intro .ring{fill:none;stroke:var(--mist);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center}
.intro .ring-1{animation:ring-out 1.10s cubic-bezier(.14,.72,.26,1) .56s forwards}
.intro .ring-2{animation:ring-out 1.10s cubic-bezier(.14,.72,.26,1) .70s forwards}
.intro .ring-3{animation:ring-out 1.10s cubic-bezier(.14,.72,.26,1) .86s forwards}
@keyframes ring-out{
  0%  {opacity:.9; transform:scale(.05)}
  65% {opacity:.30}
  100%{opacity:0;  transform:scale(1)}
}

/* verho aukeaa keskeltä. Ilman @property-tukea jäljelle jää siisti häivytys. */
.intro.is-out{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) var(--iris), #000 calc(var(--iris) + 13%));
          mask-image:radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) var(--iris), #000 calc(var(--iris) + 13%));
  animation:curtain .85s cubic-bezier(.32,.04,.2,1) forwards;
  pointer-events:none;
}
@keyframes curtain{
  from{ --iris:0%;  opacity:1 }
  to  { --iris:98%; opacity:0 }
}
.intro.is-done{display:none}

/* dia 1 hengittää sisään verhon takaa */
.rainbox{transition:opacity .9s ease .15s, transform 1.1s cubic-bezier(.2,.7,.3,1) .15s}
body.deck.is-opening .slide .rainbox{opacity:0;transform:translate3d(14px,-26px,0)}

@media (prefers-reduced-motion:reduce){
  .intro .drop,.intro .ring{animation:none;opacity:0}
  .intro.is-out{animation:fade-out .2s linear forwards;-webkit-mask-image:none;mask-image:none}
  @keyframes fade-out{ to{opacity:0} }
  .rainbox{transition:none}
  body.deck.is-opening .slide .rainbox{opacity:1;transform:none}
}

/* ── kääntökehote (mobiili, pystyasento) ───────────────────────────────── */
.rotate{
  position:fixed;inset:0;z-index:55;background:var(--night);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  padding:32px;text-align:center;
}
.rotate svg{width:76px;height:76px;color:var(--mist);opacity:.9;
  animation:tip 2.4s ease-in-out infinite}
@keyframes tip{
  0%,22%{transform:rotate(0)}
  42%,72%{transform:rotate(-90deg)}
  92%,100%{transform:rotate(0)}
}
.rotate p{font-family:var(--display);font-weight:600;font-size:22px;
  letter-spacing:-.02em;color:var(--mist);max-width:15em;line-height:1.2}
.rotate button{
  font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(236,235,234,.4);
  background:transparent;border:0;padding:10px 4px;cursor:pointer;
}
.rotate button:hover{color:var(--mist)}
body.is-portrait .rotate{display:flex}
/* Avausanimaatio saa olla rauhassa: kehote peitti sen kokonaan, koska
   molemmat renderöityivät yhtä aikaa ja .rotate on päällimmäisenä. */
body.deck.is-opening .rotate{display:none!important}

/* ── mobiili ────────────────────────────────────────────────────────────── */
@media (max-width:820px), (max-height:520px){
  :root{ --bar:46px; }
  .topbar{padding:0 10px;gap:8px}
  .tb-home img{height:13px}
  .tb-btn{width:32px;height:32px}
  .flag{width:34px}
  .flag svg{width:21px}
  .tb-count{font-size:12px;padding:0 4px}
}

/* ── tulostus ───────────────────────────────────────────────────────────── */
@media print{
  body.deck{overflow:visible}
  body.deck .viewport{top:0}
  .topbar,.zones,.edge,.intro,.rotate{display:none!important}
}