@charset "utf-8";

:root{
  --yo:#0b0f09;
  --verka-syva:#161c11;
  --verka:#242c1a;
  --verka-valo:#333c24;
  --paperi:#ded0ad;
  --paperi-syva:#cdbd94;
  --muste:#251d10;
  --muste-himmea:#3f3626;
  --muste-nimike:#42320d;
  --luu:#eae0c6;
  --luu-himmea:#c6ba98;
  --okra:#c9ab6b;
  --okra-valo:#e8d29c;
  --tina-valo:#d5cfc2;
  --tina:#a9a08a;
  --rauta:#4d483e;
  --rauta-syva:#2b2822;
  --puna:#9c1d27;

  --kirjain:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Noto Serif","Droid Serif","Times New Roman",serif;
  --kirjain-kapea:"Trebuchet MS","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* heavy slab for headings the drawn woodtype does not cover */
  --kirjain-jykea:"American Typewriter",Rockwell,"Rockwell Nova","Roboto Slab","Bookman Old Style",Bookman,"Courier New",Georgia,serif;

  /* hand-forged iron band: hammered, uneven, never a machined ramp */
  --rautanauha:linear-gradient(180deg,#1d1b16 0,#4d483e 20%,#6d6656 44%,#3d392f 64%,#211f19 100%);
  /* rough-sawn pine, sun-bleached */
  --puunauha:linear-gradient(178deg,#6a614b 0,#8b8168 22%,#726851 48%,#5c5342 74%,#443d30 100%);
  /* grain and saw scratch: noise stretched along the board, never a regular stripe */
  --puusyy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='72'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .62' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .09 .55 .55 .55 0 -.2'/%3E%3C/filter%3E%3Crect width='200' height='72' filter='url(%23w)'/%3E%3C/svg%3E");

  --lepo:0 1px 2px rgba(6,10,4,.62),0 10px 16px -7px rgba(6,10,4,.6),0 26px 40px -22px rgba(6,10,4,.62);
  --mitta:1240px;
  --reuna:clamp(18px,4vw,44px);
  --otsikkomitta:clamp(272px,37vw,440px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--kirjain);
  font-size:clamp(15.5px,.55rem + .8vw,18px);
  line-height:1.58;
  color:var(--luu);
  background-color:var(--verka);
  background-image:
    repeating-linear-gradient(97deg,rgba(232,210,156,.016) 0 2px,rgba(6,10,4,.05) 2px 5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .58 0 0 0 0 .6 0 0 0 0 .4 .13 .13 .13 0 -.13'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23v)'/%3E%3C/svg%3E");
  background-repeat:repeat,repeat;
  background-size:auto,120px 120px;
}

img{max-width:100%;height:auto;display:block}

.piiloteksti{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.ohivienti{
  position:absolute;left:12px;top:-64px;z-index:9;
  padding:10px 18px;border-radius:2px;
  font-family:var(--kirjain-kapea);font-size:15px;font-weight:700;
  color:#1a1305;background:var(--okra-valo);text-decoration:none;
  transition:top .16s ease-out;
}
.ohivienti:focus{top:12px}

:is(a,button,input,summary):focus-visible{
  outline:3px solid var(--okra-valo);
  outline-offset:3px;
  border-radius:2px;
}
.ilmoitin--vaalea :is(a,button,input):focus-visible{outline-color:#4a3a18}
.ilmoitin-kuitti:focus{outline:3px solid var(--okra-valo);outline-offset:3px}

/* --------------------------------------------------------------- type */
h1,h2,h3{margin:0;font-weight:700;line-height:1.14;letter-spacing:-.005em}
h3{font-family:var(--kirjain-jykea);font-size:clamp(18px,.8rem + .5vw,21px);letter-spacing:.01em}
p{margin:0}

/* the drawn woodtype, set for every section heading */
.otsikkopiirto{
  display:block;width:100%;
  max-width:min(100%,var(--otsikkomitta));
  fill:var(--okra-valo);stroke:var(--okra-valo);
  filter:drop-shadow(0 3px 4px rgba(6,10,4,.55));
}
.otsikkopiirto--muste{
  fill:#33270f;stroke:#33270f;
  filter:drop-shadow(0 1px 0 rgba(240,228,198,.5));
}

.pienotsikko{
  font-family:var(--kirjain-kapea);
  font-size:12px;font-weight:700;line-height:1.3;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--okra);
  margin-bottom:10px;
}
.pienotsikko--tumma{color:var(--muste-nimike)}

/* ------------------------------------------------------ zone: top rail */
.ylareuna{
  position:relative;z-index:3;
  background:linear-gradient(180deg,#121710 0,var(--yo) 100%);
  border-bottom:3px solid transparent;
  border-image:var(--rautanauha) 1;
  box-shadow:0 8px 16px -9px rgba(6,10,4,.9);
}
.ylareuna-sisus{
  max-width:var(--mitta);margin:0 auto;
  padding:9px var(--reuna);
  display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;
}
.ylareuna-merkki{width:104px;height:auto;flex:0 0 auto}
.ylareuna-sana{
  flex:1 1 220px;min-width:0;
  font-family:var(--kirjain-kapea);
  font-size:clamp(11px,.35rem + .35vw,13px);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.35;
  color:var(--luu);
}
.ylareuna-ika{flex:0 0 auto}
/* hammered tin tag, struck not cast */
.ylareuna-leima,.sokkeli-leima{
  display:inline-block;
  font-family:var(--kirjain-kapea);
  font-size:13px;font-weight:700;letter-spacing:.03em;
  color:#191710;
  padding:3px 11px;border-radius:2px;
  background:linear-gradient(163deg,#c3bcac 0,#a9a08a 46%,#8d8471 100%);
  box-shadow:0 1px 2px rgba(6,10,4,.7),inset 0 1px 0 rgba(238,234,222,.5),inset 0 -1px 0 rgba(38,34,26,.4);
}

/* -------------------------------------------------- zone: first screen */
.aloitus{
  position:relative;overflow:hidden;
  padding:clamp(20px,2.5vw,34px) var(--reuna) clamp(24px,2.8vw,38px);
  background-image:
    radial-gradient(1100px 420px at 22% -10%,rgba(214,206,168,.13),rgba(214,206,168,0) 68%),
    linear-gradient(180deg,var(--verka-valo) 0,var(--verka) 46%,var(--verka-syva) 100%);
}
.aloitus-kuva{display:none}

.aloitus-sisus{
  position:relative;z-index:2;
  max-width:var(--mitta);margin:0 auto;
  display:grid;grid-template-columns:1fr;
  gap:clamp(20px,2.6vw,34px);
}
.aloitus-nimio{margin:0}
.aloitus-piirto{
  display:block;width:100%;max-width:min(100%,540px);
  filter:drop-shadow(0 5px 6px rgba(6,10,4,.66));
}
.aloitus-saate{
  max-width:46ch;margin-top:clamp(12px,1.6vw,18px);
  font-size:clamp(15.5px,.5rem + .8vw,18.5px);
  color:var(--luu);
}
.aloitus-faktat{
  list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 8px;
}
.aloitus-fakta{
  font-family:var(--kirjain-kapea);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--luu-himmea);
  padding:4px 10px;border-radius:2px;
  border:1px solid rgba(201,171,107,.3);
  background:rgba(6,10,4,.34);
}

/* ------------------------------------------------- the figures, in rows */
.aloitus-taulu{min-width:0}
.luvusto{
  padding:clamp(13px,1.6vw,20px) clamp(14px,1.8vw,22px) clamp(8px,1vw,12px);
  border-radius:3px;
  background:linear-gradient(180deg,rgba(9,13,7,.93) 0,rgba(17,22,13,.93) 100%);
  box-shadow:
    0 0 0 1px rgba(169,160,138,.26),
    0 2px 3px rgba(6,10,4,.6),
    0 22px 36px -18px rgba(6,10,4,.85),
    inset 0 1px 0 rgba(213,207,194,.12);
}
.luvusto-otsake{
  font-family:var(--kirjain-kapea);
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--okra);
  padding-bottom:9px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
}
.luvusto-lahde{
  letter-spacing:.09em;font-weight:400;text-transform:none;
  font-family:var(--kirjain);font-size:13.5px;font-style:italic;
  color:var(--luu-himmea);
}
.luvusto-lista{list-style:none;margin:0;padding:0}

.lukurivi{
  display:grid;
  grid-template-columns:clamp(94px,7.4vw,128px) minmax(0,1fr) auto;
  align-items:center;
  gap:2px 12px;
  padding:clamp(9px,1.1vw,13px) 0;
  border-top:1px solid rgba(169,160,138,.24);
  box-shadow:0 -1px 0 rgba(6,10,4,.6);
}
.lukurivi-luku{
  font-family:var(--kirjain-jykea);
  font-size:clamp(26px,1rem + 1.5vw,37px);
  font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--okra-valo);
  white-space:nowrap;
  text-shadow:0 2px 3px rgba(6,10,4,.62);
}
.lukurivi-etu{
  font-family:var(--kirjain-kapea);
  font-size:.36em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--okra);
  display:inline-block;margin-right:.3em;vertical-align:.55em;
}
.lukurivi-nimi{
  display:block;min-width:0;
  font-family:var(--kirjain-kapea);
  font-size:clamp(13.5px,.4rem + .45vw,15.5px);font-weight:700;
  letter-spacing:.05em;line-height:1.3;
  color:var(--luu);
}
.lukurivi-lisa{
  display:block;
  font-family:var(--kirjain);
  font-size:13.5px;font-weight:400;letter-spacing:0;font-style:italic;
  color:var(--luu-himmea);
}
.lukurivi-puoli{
  font-family:var(--kirjain-kapea);
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--okra-valo);
  white-space:nowrap;
  padding:4px 9px;border-radius:2px;
  border:1px solid rgba(201,171,107,.38);
  background:rgba(201,171,107,.08);
}
.luvusto-huomio{
  margin-top:9px;padding-top:9px;
  border-top:1px solid rgba(169,160,138,.24);
  box-shadow:0 -1px 0 rgba(6,10,4,.6);
  font-size:13.5px;line-height:1.45;
  color:var(--luu-himmea);
}
.luvusto-huomio em{color:var(--okra-valo);font-style:italic}

/* ---------------------------------------------------------- the notice */
.ilmoitin{
  max-width:520px;
  margin:clamp(16px,2vw,22px) 0 0;
  display:grid;grid-template-columns:1fr auto;gap:9px;
  align-items:end;
}
.ilmoitin-rivi{display:flex;flex-direction:column;gap:5px;min-width:0}
.ilmoitin-nimike{
  font-family:var(--kirjain-kapea);
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--luu-himmea);
}
/* a torn slip of bill stock */
.ilmoitin-kentta{
  width:100%;
  font-family:var(--kirjain);
  font-size:17px;line-height:1.3;color:#241c10;
  padding:12px 13px;border:0;border-radius:2px;
  background:linear-gradient(178deg,#e9dcba 0,#ded0ad 55%,#cabb92 100%);
  box-shadow:
    0 1px 2px rgba(6,10,4,.6),
    0 8px 14px -6px rgba(6,10,4,.55),
    inset 0 1px 0 rgba(245,238,216,.8),
    inset 0 -2px 0 rgba(104,86,48,.22);
}
.ilmoitin-kentta::placeholder{color:#4e442f}
.ilmoitin-kentta[aria-invalid="true"]{box-shadow:0 0 0 3px rgba(156,29,39,.9),0 8px 14px -6px rgba(6,10,4,.55)}
/* painted tin, dust ochre, matte */
.ilmoitin-nappi{
  font-family:var(--kirjain-kapea);
  font-size:16px;font-weight:700;letter-spacing:.03em;
  color:#241a08;
  padding:13px 21px;border:0;border-radius:2px;cursor:pointer;
  background:linear-gradient(180deg,#dcc189 0,#c9ab6b 46%,#a98a4c 100%);
  box-shadow:
    0 1px 2px rgba(6,10,4,.65),
    0 9px 15px -6px rgba(6,10,4,.6),
    inset 0 0 0 1px rgba(60,44,16,.3);
  transition:transform .12s ease-out,filter .12s ease-out;
}
.ilmoitin-nappi:hover{filter:brightness(1.06)}
.ilmoitin-nappi:active{transform:translateY(1px)}
.ilmoitin-virhe,.ilmoitin-kuitti{grid-column:1/-1;margin:0}
.ilmoitin-virhe{
  font-size:15px;font-weight:700;color:#ffdcd4;
  padding:9px 13px;border-radius:2px;
  background:rgba(120,20,26,.94);
  box-shadow:inset 0 1px 0 rgba(255,220,210,.22);
}
.ilmoitin-kuitti{
  font-size:15.5px;line-height:1.5;color:#251d10;
  padding:13px 15px;border-radius:2px;
  background:linear-gradient(178deg,#e6d8b6 0,#dbcda9 60%,#c8b98e 100%);
  box-shadow:var(--lepo);
}
.ilmoitin-kuitti strong{display:block;color:#7c1a14}
.ilmoitin[data-valmis] .ilmoitin-rivi,
.ilmoitin[data-valmis] .ilmoitin-nappi{display:none}

.ilmoitin--vaalea .ilmoitin-nimike{color:var(--muste-himmea)}
.ilmoitin--vaalea .ilmoitin-kentta{
  background:#e8dab8;
  box-shadow:0 0 0 1px #8a7a55,inset 0 2px 4px rgba(58,46,20,.22);
}
.ilmoitin--vaalea .ilmoitin-virhe{background:#78141a;color:#ffe3dc}
.ilmoitin--vaalea .ilmoitin-kuitti{background:#e8dab8;box-shadow:0 0 0 1px #8a7a55,0 10px 18px -12px rgba(40,30,8,.5)}

/* ------------------------------------------------- zone: the watchlist */
/* sun-bleached bill stock: coarse tooth, foxed and stained at the edges */
.seuranta,.lupaus{
  position:relative;
  color:var(--muste);
  background-color:var(--paperi);
  background-image:
    linear-gradient(90deg,rgba(88,60,20,.34) 0,rgba(88,60,20,.1) 4%,rgba(88,60,20,0) 11%,rgba(88,60,20,0) 89%,rgba(88,60,20,.1) 96%,rgba(88,60,20,.34) 100%),
    radial-gradient(150% 26% at 50% 0%,rgba(100,70,24,.26),rgba(100,70,24,0) 72%),
    radial-gradient(130% 22% at 50% 100%,rgba(100,70,24,.24),rgba(100,70,24,0) 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .23 0 0 0 0 .09 .3 .3 .3 0 -.24'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:100% 100%,100% 100%,100% 100%,140px 140px;
  box-shadow:inset 0 3px 0 -1px rgba(43,40,34,.6),inset 0 -3px 0 -1px rgba(43,40,34,.6);
}
.seuranta{padding:clamp(28px,3.4vw,46px) var(--reuna) clamp(24px,3vw,42px)}
.seuranta-sisus{max-width:var(--mitta);margin:0 auto}
.seuranta-alku{max-width:62ch}
.seuranta-johdanto{margin-top:12px;color:var(--muste-himmea);font-size:16px}

.seuranta-lista{
  list-style:none;margin:clamp(16px,2vw,24px) 0 0;padding:0;
  border-top:2px solid rgba(64,54,32,.5);
}
.seuranta-rivi{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2px 18px;
  padding:11px 2px;
  border-bottom:1px solid rgba(64,54,32,.28);
}
.seuranta-rivi--otsikko{display:none}
.seuranta-kohde{
  font-family:var(--kirjain-jykea);
  font-size:clamp(15px,.45rem + .5vw,17px);font-weight:700;letter-spacing:.01em;
  color:#2a2008;
}
.seuranta-puoli{
  font-family:var(--kirjain-kapea);
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muste-nimike);
}
.seuranta-ehto{color:var(--muste-himmea);font-size:15.5px;line-height:1.45}
.seuranta-rivi--otsikko :is(.seuranta-kohde,.seuranta-puoli,.seuranta-ehto){
  font-family:var(--kirjain-kapea);
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muste-nimike);
}
.seuranta-paate{
  margin-top:16px;
  font-size:16px;font-style:italic;color:#3a2d10;
}

/* ------------------------------------------------------- zone: a panel */
.nakyma{
  margin:0;
  padding:clamp(22px,2.7vw,38px) var(--reuna);
  background:linear-gradient(180deg,var(--yo) 0,#111710 55%,var(--verka-syva) 100%);
}
/* rough-sawn pine batten, saw marks across the grain */
.nakyma-kehys{
  max-width:1024px;margin:0 auto;
  padding:clamp(6px,.8vw,11px);
  border-radius:2px;
  background-image:var(--puusyy),var(--puunauha);
  background-size:200px 72px,auto;
  box-shadow:
    0 2px 3px rgba(6,10,4,.62),
    0 20px 34px -14px rgba(6,10,4,.8),
    inset 0 1px 0 rgba(226,214,182,.22),
    inset 0 -1px 0 rgba(20,16,10,.55);
}
.nakyma-kuva{
  width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:50% 46%;
  border-radius:1px;
}
.nakyma-selite{
  max-width:1024px;margin:14px auto 0;
  font-family:var(--kirjain-kapea);
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;color:var(--okra);
}

/* ---------------------------------------------------- zone: the method */
.tyotapa{
  padding:clamp(26px,3.2vw,42px) var(--reuna);
  background:linear-gradient(180deg,var(--verka-syva) 0,var(--verka) 40%,var(--verka-syva) 100%);
}
.tyotapa-sisus{max-width:var(--mitta);margin:0 auto}
.tyotapa-lista{
  list-style:none;margin:clamp(16px,2vw,26px) 0 0;padding:0;
  display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:1fr;
}
/* three rough boards nailed to the wall */
.tyotapa-kohta{
  position:relative;
  padding:clamp(16px,1.9vw,22px) clamp(16px,1.9vw,22px) clamp(16px,1.9vw,22px) clamp(52px,4.4vw,62px);
  border-radius:2px;
  background-color:#241f14;
  /* a dark glaze over the grain: a board in shadow, not a fresh plank */
  background-image:
    linear-gradient(178deg,rgba(18,15,9,.62) 0,rgba(12,11,7,.78) 100%),
    var(--puusyy),
    linear-gradient(178deg,#3a3120 0,#241e13 100%);
  background-size:auto,200px 72px,auto;
  box-shadow:
    0 0 0 1px rgba(169,160,138,.16),
    inset 0 1px 0 rgba(213,207,194,.1),
    inset 0 -1px 0 rgba(6,10,4,.6);
}
.tyotapa-pip{
  position:absolute;left:clamp(15px,1.5vw,20px);top:clamp(17px,1.9vw,23px);
  width:24px;height:24px;
  fill:var(--tina-valo);
  filter:drop-shadow(0 1px 1px rgba(6,10,4,.75));
}
.tyotapa-pip--puna{fill:#d9575a}
.tyotapa-nimi{color:var(--okra-valo);margin-bottom:5px}
.tyotapa-teksti{font-size:16px;line-height:1.5;color:var(--luu)}

/* -------------------------------------------------- zone: the promise */
.lupaus{padding:clamp(28px,3.4vw,46px) var(--reuna) clamp(28px,3.4vw,44px)}
.lupaus-sisus{
  max-width:var(--mitta);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,34px);
}
.lupaus-kuva img{
  width:100%;height:auto;border-radius:2px;
  aspect-ratio:4/5;object-fit:cover;
  box-shadow:0 0 0 1px rgba(64,54,32,.45),0 18px 30px -18px rgba(40,30,8,.7);
}
.lupaus-teksti{min-width:0}
.lupaus-lista{margin:clamp(14px,1.8vw,20px) 0 0}
.lupaus-kohta{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px 16px;
  padding:10px 0;
  border-top:1px solid rgba(64,54,32,.28);
}
.lupaus-kohta:first-child{border-top:2px solid rgba(64,54,32,.5)}
.lupaus-avain{
  display:flex;align-items:center;gap:7px;
  font-family:var(--kirjain-kapea);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muste-nimike);
}
.lupaus-merkki{width:15px;height:15px;flex:0 0 auto;fill:#3d3421}
.lupaus-arvo{margin:0;font-size:16px;line-height:1.5;color:var(--muste-himmea)}
.lupaus-kohta--ei .lupaus-avain{color:#75151a}
.lupaus-kohta--ei .lupaus-avain::before{
  content:"";width:15px;height:2px;flex:0 0 auto;background:#75151a;
}

/* ------------------------------------------------------- zone: answers */
.vastaukset{
  padding:clamp(26px,3.2vw,42px) var(--reuna) clamp(28px,3.4vw,44px);
  background:linear-gradient(180deg,var(--verka-syva) 0,var(--verka) 32%,var(--verka-syva) 100%);
}
.vastaukset-sisus{max-width:var(--mitta);margin:0 auto}
.vastaukset-lista{
  margin:clamp(16px,2vw,24px) 0 0;
  display:grid;gap:0 clamp(24px,3vw,44px);
  grid-template-columns:1fr;
}
.vastaukset-pari{
  padding:14px 0;
  border-top:1px solid rgba(169,160,138,.24);
  box-shadow:0 -1px 0 rgba(6,10,4,.6);
}
.vastaukset-kysymys{
  font-family:var(--kirjain-jykea);
  font-size:clamp(16.5px,.62rem + .5vw,19px);font-weight:700;line-height:1.3;
  color:var(--okra-valo);
}
.vastaukset-vastaus{margin:6px 0 0;color:var(--luu);font-size:16px;line-height:1.5}

/* ------------------------------------------------------- zone: footing */
.sokkeli{
  padding:clamp(28px,3.4vw,44px) var(--reuna) clamp(24px,3vw,38px);
  background:linear-gradient(180deg,#101610 0,var(--yo) 100%);
  border-top:3px solid transparent;
  border-image:var(--rautanauha) 1;
}
.sokkeli-sisus{max-width:var(--mitta);margin:0 auto;text-align:center}
.sokkeli-merkki img{width:112px;height:auto;margin:0 auto 8px;opacity:.92}
.sokkeli-merkki p{font-size:15px;color:var(--luu-himmea)}
.sokkeli-polut{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 26px;margin:18px 0}
.sokkeli-polut a{
  font-family:var(--kirjain-kapea);
  font-size:14px;font-weight:700;letter-spacing:.06em;
  color:var(--okra-valo);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.sokkeli-polut a:hover{color:#f3e2ba}
.sokkeli-ika{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:14.5px;color:var(--luu);margin-bottom:16px;
}
.sokkeli-selite{
  max-width:76ch;margin:0 auto 12px;
  font-size:14px;line-height:1.6;color:var(--luu-himmea);
}
.sokkeli-selite strong{color:var(--luu)}
.sokkeli-oikeus{margin-top:16px;font-size:13.5px;color:var(--luu-himmea)}

/* ------------------------------------------------------------- wider */
@media (min-width:600px){
  .seuranta-rivi{grid-template-columns:minmax(0,13em) minmax(0,8.6em) minmax(0,1fr);align-items:baseline}
  .seuranta-rivi--otsikko{display:grid;padding-bottom:7px;border-bottom-color:rgba(64,54,32,.5)}
  .lupaus-kohta{grid-template-columns:minmax(0,9.6em) minmax(0,1fr);align-items:baseline}
}
@media (min-width:760px){
  .tyotapa-lista{grid-template-columns:repeat(3,1fr)}
  .vastaukset-lista{grid-template-columns:repeat(2,1fr)}
  .vastaukset-pari:nth-child(2){border-top:1px solid rgba(169,160,138,.24)}
}
@media (min-width:960px){
  .lupaus-sisus{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:start}
}
@media (min-width:1000px){
  .aloitus{padding-block:clamp(22px,2.6vw,36px)}
  .aloitus-kuva{
    display:block;position:absolute;z-index:0;
    right:0;top:0;bottom:0;width:59%;
  }
  .aloitus-kuva img{width:100%;height:100%;object-fit:cover;object-position:50% 43%}
  .aloitus::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(90deg,var(--verka) 0,rgba(36,44,26,.97) 26%,rgba(36,44,26,.52) 39%,rgba(22,28,17,.12) 55%,rgba(22,28,17,.04) 100%),
      linear-gradient(180deg,rgba(9,13,7,.32) 0,rgba(9,13,7,0) 22%,rgba(9,13,7,0) 74%,rgba(9,13,7,.42) 100%);
  }
  .aloitus-sisus{
    grid-template-columns:minmax(0,1fr) minmax(0,440px);
    align-items:center;
    gap:clamp(24px,3vw,48px);
  }
  .aloitus-piirto{max-width:min(100%,600px)}
}
@media (min-width:1180px){
  .aloitus-sisus{grid-template-columns:minmax(0,1fr) minmax(0,470px)}
}

/* ------------------------------------------------------------ narrow */
@media (max-width:759px){
  .ylareuna-jatko{display:none}
  .ylareuna-sana{letter-spacing:.09em}
}
@media (max-width:699px){
  .aloitus-teksti > .pienotsikko{display:none}
  .aloitus-saate{font-size:16px;margin-top:12px}
}
@media (max-width:559px){
  .ilmoitin{grid-template-columns:1fr}
  .ilmoitin-nappi{width:100%}
  .ylareuna-merkki{width:88px}
  .luvusto{padding-inline:13px}
  .luvusto-lahde{display:none}
  .aloitus-faktat{gap:3px 14px;margin-top:11px}
  .aloitus-fakta{padding:0;border:0;background:none;font-size:11px}
}
/* the tag folds under its figure so the column of numbers survives on a phone */
@media (max-width:520px){
  .lukurivi{
    grid-template-columns:minmax(0,92px) minmax(0,1fr);
    gap:1px 11px;padding-block:8px;align-items:start;
  }
  .lukurivi-luku{grid-column:1;grid-row:1;font-size:28px}
  .lukurivi-nimi{grid-column:2;grid-row:1/span 2;font-size:14px}
  .lukurivi-puoli{
    grid-column:1;grid-row:2;justify-self:start;
    padding:0;border:0;background:none;
    font-size:10px;letter-spacing:.07em;
  }
  .luvusto-huomio{font-size:12.5px}
}
@media (max-width:440px){
  /* logo, disclosure and age badge stay on one rail */
  .ylareuna-sisus{flex-wrap:nowrap;gap:9px;padding-inline:14px}
  .ylareuna-merkki{width:70px}
  .ylareuna-sana{flex:1 1 auto;font-size:9.5px;letter-spacing:.07em}
  .ylareuna-leima{font-size:12px;padding:3px 9px}
  .lukurivi{padding-block:7px}
}
@media (max-width:420px){
  .aloitus-piirto{max-width:min(100%,304px)}
}

/* keep the field and the four figures on the first screen when short */
@media (max-height:820px) and (max-width:999px){
  .aloitus-saate{font-size:16px;margin-top:10px}
  .aloitus-piirto{max-width:min(100%,430px)}
  .aloitus-sisus{gap:16px}
}
@media (max-height:700px){
  .aloitus-piirto{max-width:min(100%,470px)}
  .aloitus-saate{font-size:16px;margin-top:9px}
  .ilmoitin{margin-top:13px}
  .lukurivi{padding-block:8px}
  .aloitus-sisus{gap:14px clamp(24px,3vw,48px)}
}
@media (max-height:700px) and (max-width:999px){
  .aloitus-saate,.aloitus-faktat{display:none}
  .aloitus-piirto{max-width:min(100%,360px)}
  .luvusto-otsake{padding-bottom:6px}
  .lukurivi{padding-block:6px}
  .lukurivi-lisa{font-size:12.5px}
  .ylareuna-sisus{padding-block:6px}
}

/* -------------------------------------------------------------- motion */
@keyframes nosto{
  from{opacity:.08;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .seuranta-rivi,.tyotapa-kohta,.nakyma-kehys,.lupaus-kohta{
      animation:nosto linear both;
      animation-timeline:view();
      animation-range:entry 3% entry 46%;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}