/* Mökkikesä · A8 esite: koko leveyden lohkot, suuri typografia */
@font-face{font-family:"Outfit";src:url(/rakenne/fontit/outfit-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/rakenne/fontit/literata-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/rakenne/fontit/literata-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
:root{--kerma:#fbf7f0;--hiekka:#f0e4cf;--sammal:#e7eadf;--puu:#6b3f1d;--jarvi:#2f5d7c;--jarvi-t:#1f4258;--musta:#2a2522;--harmaa:#6e6459;--viiva:#d8cfc0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--kerma);color:var(--musta);font:18px/1.62 "Literata",Georgia,serif}
a{color:var(--jarvi-t);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--puu)}
:focus-visible{outline:3px solid var(--puu);outline-offset:3px}
.tjp-ohita{position:absolute;left:-999px;top:8px;background:var(--puu);color:#fff;padding:8px 14px;border-radius:6px}
.tjp-ohita:focus{left:12px;z-index:30}
.tjp-ylaosa{background:var(--kerma);border-bottom:1px solid var(--viiva)}
.tjp-ylaosa-sisus{max-width:1240px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tjp-tunnus{font-family:"Outfit",system-ui,sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.01em;text-decoration:none;color:var(--puu);display:flex;align-items:center;gap:10px}
.tjp-tunnus svg{width:34px;height:34px}
.tjp-rubriikit ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;font-family:"Outfit",system-ui,sans-serif}
.tjp-rubriikit a{display:inline-block;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--musta);background:var(--sammal);font-weight:600;font-size:.95rem;min-height:40px}
.tjp-rubriikit a:hover,.tjp-rubriikit a[aria-current]{background:var(--puu);color:#fff}
.tjp-ankkurit{position:sticky;top:0;z-index:12;background:var(--jarvi-t);color:#fff;font-family:"Outfit",system-ui,sans-serif}
.tjp-ankkurit ul{list-style:none;margin:0 auto;padding:0 20px;max-width:1240px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tjp-ankkurit ul::-webkit-scrollbar{display:none}
.tjp-ankkurit a{display:inline-block;padding:12px 12px;color:#dfe9ef;text-decoration:none;white-space:nowrap;font-size:.92rem;border-bottom:3px solid transparent;min-height:44px}
.tjp-ankkurit a.tjp-nyt,.tjp-ankkurit a:hover{color:#fff;border-color:#f0b35a}
.tjp-sankari{background:var(--jarvi-t);color:#fff;padding:56px 28px 60px}
.tjp-sankari-sisus{max-width:1240px;margin:0 auto}
.tjp-sankari h1{font-family:"Outfit",system-ui,sans-serif;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px;max-width:18ch}
.tjp-sankari p{font-size:1.25rem;max-width:62ch;margin:0 0 14px;color:#e6eef3}
.tjp-sankari .tjp-tiedot{font-family:"Outfit",system-ui,sans-serif;font-size:.95rem;color:#b9cbd6;display:flex;gap:20px;flex-wrap:wrap}
.tjp-polku{font-family:"Outfit",system-ui,sans-serif;font-size:.9rem;margin:0 0 20px;color:#b9cbd6}
.tjp-polku ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tjp-polku a{color:#fff}
.tjp-polku li+li::before{content:"→";margin-right:6px}
.tjp-lohko{padding:52px 28px}
.tjp-lohko:nth-of-type(odd){background:var(--kerma)}
.tjp-lohko:nth-of-type(even){background:var(--hiekka)}
.tjp-lohko.tjp-vihrea{background:var(--sammal)}
.tjp-lohko-sisus{max-width:960px;margin:0 auto}
.tjp-lohko h2{font-family:"Outfit",system-ui,sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.01em;margin:0 0 18px;color:var(--puu);scroll-margin-top:60px}
.tjp-lohko h3{font-family:"Outfit",system-ui,sans-serif;font-size:1.25rem;margin:24px 0 8px}
.tjp-lohko p{margin:0 0 1.05em;max-width:70ch}
.tjp-johdanto p:first-child{font-size:1.18rem}
.tjp-taulu{overflow-x:auto;margin:14px 0 24px;background:#fff;border:1px solid var(--viiva);border-radius:12px}
table{border-collapse:collapse;width:100%;font-family:"Outfit",system-ui,sans-serif;font-size:.95rem}
th,td{padding:10px 12px;border-bottom:1px solid var(--viiva);text-align:left;vertical-align:top}
th{background:var(--sammal);font-weight:700}
figure{margin:22px 0}
figure img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--viiva);background:#fff}
figcaption{font-family:"Outfit",system-ui,sans-serif;font-size:.88rem;color:var(--harmaa);margin-top:8px}
dl{margin:0 0 1.1em}
dt{font-weight:700;font-family:"Outfit",system-ui,sans-serif;margin-top:10px}
dd{margin:2px 0 0 0}
ul,ol{padding-left:1.3em}
.tjp-ukk h3{margin:18px 0 6px}
.tjp-lahteet{font-size:.94rem}
.tjp-kortit{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:10px 0 0;padding:0;list-style:none}
.tjp-kortit li{background:#fff;border:1px solid var(--viiva);border-radius:14px;padding:18px 20px}
.tjp-kortit h3{margin:0 0 6px;font-size:1.15rem}
.tjp-kortit h3 a{text-decoration:none}
.tjp-kortit h3 a:hover{text-decoration:underline}
.tjp-kortit p{margin:0;font-size:.95rem;color:var(--harmaa)}
.tjp-kortit time{display:block;margin-top:8px;font-family:"Outfit",system-ui,sans-serif;font-size:.8rem;color:var(--harmaa)}
.tjp-kortit .tjp-rub{font-family:"Outfit",system-ui,sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--jarvi);margin-bottom:4px}
.tjp-jalka{background:var(--musta);color:#d9d2c7;font-family:"Outfit",system-ui,sans-serif;padding:36px 28px}
.tjp-jalka-sisus{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px 60px}
.tjp-jalka a{color:#fff}
.tjp-jalka ul{list-style:none;padding:0;margin:0}
.tjp-jalka li{margin:4px 0}
.tjp-jalka b{display:block;color:#fff;margin-bottom:6px;font-size:1.05rem}
.tjp-jalka p{margin:0;max-width:60ch;font-size:.92rem}
.tjp-404{text-align:center;padding:40px 0}
@media(max-width:720px){
  body{font-size:17px}
  .tjp-ylaosa-sisus{padding:12px 16px}
  .tjp-sankari{padding:36px 16px 40px}
  .tjp-lohko{padding:36px 16px}
  .tjp-rubriikit a{padding:8px 11px;font-size:.88rem}
}
@media print{.tjp-ankkurit,.tjp-jalka,.tjp-rubriikit{display:none}.tjp-lohko{background:#fff!important}}

@media (max-width:640px){.tjp-taulu{position:relative}.tjp-taulu::before{content:"Pyyhkäise nähdäksesi lisää sarakkeita";display:block;font-size:.78rem;opacity:.75;padding:.25rem .5rem;font-style:italic}} /* vihje-taulu */
