:root{--paper:#fbf8f2;--ink:#213027;--muted:#667169;--moss:#173b2b;--moss-deep:#0c281d;--sand:#d9cba9;--line:rgba(33,48,39,.15);--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",sans-serif;--shell:min(1480px,calc(100vw - 48px));--text:min(760px,calc(100vw - 48px));--radius:30px;--space:clamp(72px,10vw,160px);--light-warmth:0}
html[data-light="morning"]{--light-warmth:.04}html[data-light="evening"]{--light-warmth:.12}html[data-light="night"]{--light-warmth:-.03}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(17px,1.1vw,20px);line-height:1.65;text-rendering:optimizeLegibility}img{max-width:100%;height:auto}a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}button,input,textarea,select{font:inherit}.skip-link{position:fixed;left:16px;top:16px;z-index:9999;padding:12px 16px;background:#fff;color:#000;transform:translateY(-180%)}.skip-link:focus{transform:none}
.site-header{position:fixed;z-index:100;top:0;left:0;width:100%;padding:20px 0;color:#fff;transition:transform .45s ease,padding .35s ease,background .35s ease,backdrop-filter .35s ease}.site-header.is-condensed{padding:10px 0;background:rgba(12,40,29,.72);backdrop-filter:blur(18px)}.site-header.is-hidden{transform:translateY(-110%)}.site-header__inner{width:var(--shell);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.site-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.site-brand__mark{font-size:1.6rem;line-height:1}.custom-logo{max-height:46px;width:auto}.nav-toggle{display:none;border:0;background:transparent;color:inherit;padding:8px}.nav-toggle__label{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}.site-nav__list{display:flex;gap:28px;align-items:center;margin:0;padding:0;list-style:none}.site-nav a{text-decoration:none;font-size:.83rem;letter-spacing:.1em;text-transform:uppercase}.site-nav a:hover,.site-nav a:focus-visible{opacity:.72}
.arrival{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;color:white;background-image:var(--arrival-image);background-size:cover;background-position:center}.arrival::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--arrival-image);background-size:cover;background-position:center;filter:saturate(calc(.9 + var(--light-warmth))) brightness(calc(.92 + var(--light-warmth)))}.arrival__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,21,15,.14) 10%,rgba(5,21,15,.2) 38%,rgba(5,21,15,.82) 100%)}.arrival__content{width:min(1040px,calc(100vw - 48px));margin:0 auto clamp(76px,11vw,150px);padding-right:10vw}.eyebrow{margin:0 0 20px;font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.arrival h1{max-width:1000px;margin:0;font-family:var(--serif);font-size:clamp(3.2rem,7.2vw,7.7rem);font-weight:500;letter-spacing:-.045em;line-height:.94}.arrival__intro{max-width:680px;margin:30px 0 34px;font-size:clamp(1.05rem,1.6vw,1.4rem);color:rgba(255,255,255,.86)}.quiet-button{display:inline-flex;align-items:center;gap:22px;padding:14px 0;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;font-weight:650}.quiet-button span{transition:transform .25s ease}.quiet-button:hover span{transform:translateY(4px)}.quiet-button--dark{color:var(--ink)}.arrival__credit{position:absolute;right:24px;bottom:22px;margin:0;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);writing-mode:vertical-rl}
.section-shell{width:var(--shell);margin-inline:auto;padding-block:var(--space)}.section-heading{max-width:980px;margin:0 auto clamp(58px,8vw,110px);text-align:center}.section-heading h2,.window h2{margin:0;font-family:var(--serif);font-size:clamp(3rem,6vw,6.8rem);font-weight:500;line-height:1;letter-spacing:-.04em}.section-heading>p:last-child{margin:26px auto 0;max-width:720px;color:var(--muted)}
.places__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}.place{grid-column:span 2;min-height:420px;border-radius:var(--radius);overflow:hidden;box-shadow:0 28px 70px rgba(24,47,35,.12)}.place--wide{grid-column:span 3;min-height:500px}.place__link{position:relative;display:flex;min-height:inherit;padding:34px;color:white;text-decoration:none;isolation:isolate;overflow:hidden}.place__image{position:absolute;inset:0;z-index:-3;background-image:var(--place-image);background-size:cover;background-position:center;transition:transform 1.1s cubic-bezier(.2,.65,.2,1),filter .6s ease}.place__shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(4,18,13,.04) 18%,rgba(4,18,13,.14) 44%,rgba(4,18,13,.93) 100%)}.place__content{align-self:end;display:grid;gap:10px;max-width:86%}.place__eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.18em;opacity:.74}.place__title{font-family:var(--serif);font-size:clamp(2rem,3vw,3.4rem);font-weight:500;line-height:1}.place__text{font-size:1rem;color:rgba(255,255,255,.84)}.place__arrow{position:absolute;right:32px;bottom:32px;font-size:1.7rem;transition:transform .3s ease}.place:hover .place__image,.place:focus-within .place__image{transform:scale(1.025);filter:saturate(1.04)}.place:hover .place__arrow,.place:focus-within .place__arrow{transform:translateX(7px)}
.manifesto{width:100%;background:var(--moss);color:#fff}.manifesto__inner{width:var(--text);margin:auto;padding-block:var(--space)}.manifesto blockquote{margin:0;font-family:var(--serif);font-size:clamp(2.4rem,5vw,5.2rem);font-weight:500;line-height:1.08;letter-spacing:-.035em}.manifesto blockquote span{display:block}.manifesto__note{margin:48px 0 0;max-width:640px;color:rgba(255,255,255,.7)}
.window{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(42px,8vw,130px);align-items:center}.window__image{min-height:clamp(520px,65vw,860px);border-radius:var(--radius);background-image:var(--window-image);background-size:cover;background-position:center;box-shadow:0 28px 80px rgba(24,47,35,.13)}.window__words p:last-child{font-family:var(--serif);font-size:clamp(1.65rem,2.5vw,2.7rem);line-height:1.28;color:var(--ink)}
.site-footer{padding:74px 0 42px;background:#f0ebdf;border-top:1px solid var(--line)}.site-footer__inner{width:var(--shell);margin:auto}.site-footer__line{max-width:780px;margin:0;font-family:var(--serif);font-size:clamp(2rem,4vw,4.2rem);line-height:1.08}.site-footer__meta{margin-top:52px;color:var(--muted);font-size:.8rem}.footer-nav{display:flex;gap:22px;list-style:none;margin:32px 0 0;padding:0}.footer-nav a{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;text-decoration:none}
.content-shell{width:var(--text);margin:0 auto;padding:clamp(150px,18vw,240px) 0 var(--space)}.archive-heading,.entry__header{margin-bottom:70px}.archive-heading h1,.entry__header h1,.error-page h1{font-family:var(--serif);font-size:clamp(3.5rem,7vw,7rem);font-weight:500;line-height:.98;letter-spacing:-.04em}.post-list{display:grid;gap:80px}.post-card{padding-bottom:60px;border-bottom:1px solid var(--line)}.post-card__meta{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.post-card h2{font-family:var(--serif);font-size:clamp(2rem,4vw,4rem);font-weight:500;line-height:1.08}.post-card h2 a{text-decoration:none}.entry__image{margin:0 0 64px}.entry__image img{border-radius:var(--radius)}.entry__content{font-family:var(--serif);font-size:clamp(1.15rem,1.45vw,1.35rem)}.entry__content>*+*{margin-top:1.4em}.entry__content h2,.entry__content h3{font-family:var(--serif);font-weight:500;line-height:1.1}.entry__content blockquote{margin:2.5em 0;padding-left:1.2em;border-left:2px solid var(--moss);font-size:1.35em}.error-page{min-height:75vh}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:960px){:root{--shell:min(100% - 32px,1480px);--text:min(100% - 32px,760px)}.nav-toggle{display:inline-flex;align-items:center;gap:12px}.site-nav{position:absolute;top:72px;right:16px;display:none;min-width:230px;padding:20px;background:rgba(12,40,29,.94);border-radius:18px;backdrop-filter:blur(14px)}.site-nav.is-open{display:block}.site-nav__list{display:grid;gap:14px}.places__grid{grid-template-columns:1fr 1fr}.place,.place--wide{grid-column:span 1;min-height:440px}.place:last-child{grid-column:1/-1}.window{grid-template-columns:1fr}.window__image{min-height:68vw}.arrival__content{padding-right:0}.arrival__credit{display:none}}
@media(max-width:640px){:root{--radius:22px}.site-header{padding-top:14px}.site-brand{font-size:.72rem}.arrival h1{font-size:clamp(3.1rem,15vw,5.2rem)}.arrival__content{margin-bottom:72px}.section-shell{padding-block:90px}.places__grid{grid-template-columns:1fr}.place,.place--wide,.place:last-child{grid-column:1;min-height:390px}.place__link{padding:26px}.place__arrow{right:26px;bottom:26px}.manifesto__inner{padding-block:100px}.window__image{min-height:105vw}.footer-nav{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.place__image,.place__arrow,.site-header{transition:none}}


/* OMA Ääni 1.1 */
.village-sound { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80; display: grid; justify-items: end; gap: .75rem; }
.village-sound__toggle { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .78rem 1rem; background: rgba(27,48,39,.94); color: #fff; box-shadow: 0 12px 35px rgba(17,31,25,.22); backdrop-filter: blur(12px); cursor: pointer; display: inline-flex; align-items: center; gap: .65rem; font: inherit; }
.village-sound__toggle:hover, .village-sound__toggle:focus-visible { transform: translateY(-1px); }
.village-sound__icon { width: 1.4rem; height: 1.4rem; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; }
.village-sound.is-playing .village-sound__icon { animation: oma-sound-breathe 3s ease-in-out infinite; }
.village-sound__panel { width: min(92vw, 27rem); max-height: min(76vh, 42rem); overflow: auto; border-radius: 1.4rem; padding: 1.35rem; background: rgba(248,246,238,.98); color: #24382f; border: 1px solid rgba(36,56,47,.14); box-shadow: 0 24px 60px rgba(17,31,25,.24); }
.village-sound__panel[hidden] { display: none; }
.village-sound__eyebrow { margin: 0 0 .35rem; letter-spacing: .16em; font-size: .72rem; font-weight: 700; }
.village-sound__heading h2 { margin: 0 0 .45rem; font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.12; }
.village-sound__heading p:not(.village-sound__eyebrow) { margin: 0; font-size: .93rem; opacity: .78; }
.village-sound__tracks { display: grid; gap: .5rem; margin: 1.15rem 0; }
.village-sound__track { width: 100%; border: 1px solid rgba(36,56,47,.16); background: transparent; color: inherit; border-radius: .9rem; padding: .8rem .9rem; text-align: left; cursor: pointer; font: inherit; display: flex; align-items: center; justify-content: space-between; }
.village-sound__track::after { content: '○'; opacity: .55; }
.village-sound__track[aria-pressed="true"] { background: #e7ebdf; border-color: rgba(36,56,47,.3); }
.village-sound__track[aria-pressed="true"]::after { content: '●'; }
.village-sound__controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.village-sound__play { border: 0; border-radius: 999px; padding: .72rem 1rem; background: #263f34; color: #fff; cursor: pointer; font: inherit; }
.village-sound__volume { display: grid; gap: .28rem; flex: 1 1 10rem; font-size: .78rem; }
.village-sound__volume input { width: 100%; accent-color: #385849; }
.village-sound__note { margin: 1rem 0 0; font-size: .76rem; line-height: 1.45; opacity: .68; }
@keyframes oma-sound-breathe { 0%,100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@media (max-width: 600px) { .village-sound { left: 1rem; right: 1rem; justify-items: stretch; } .village-sound__toggle { justify-self: end; } .village-sound__panel { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .village-sound.is-playing .village-sound__icon { animation: none; } }


/* OMA 1.2.2 – Metsä ja kylä näkyvät nyt selvästi, mutta teksti johtaa edelleen. */
.places,
.manifesto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.places::before,
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.025);
}

/* Kylän paikat: metsään johtava tie näkyy noin kolmanneksen voimalla. */
.places::before {
  background-image:
    linear-gradient(180deg, rgba(250,247,240,.57), rgba(250,247,240,.66)),
    url('../images/metsapolku.webp');
  background-position: center 61%;
  filter: saturate(.72) contrast(.88) brightness(1.04);
}

/* Manifesti: kylämaisema jää syvän vihreän sisään, mutta lato ja metsänreuna erottuvat. */
.manifesto::before {
  background-image:
    linear-gradient(90deg, rgba(10,54,38,.59), rgba(10,54,38,.52) 55%, rgba(10,54,38,.64)),
    url('../images/kylatalo.webp');
  background-position: center 54%;
  filter: saturate(.65) contrast(.90) brightness(.72);
}

.places > *,
.manifesto > * {
  position: relative;
  z-index: 1;
}

/* Otsikon alla on vain kevyt vaalea harsokerros, ei peittävää laatikkoa. */
.places .section-heading {
  padding: clamp(30px,4vw,58px) clamp(18px,3vw,42px);
  border-radius: 34px;
  background: rgba(250,247,240,.34);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.manifesto__inner {
  text-shadow: 0 2px 20px rgba(2,18,12,.34);
}

@media (max-width: 640px) {
  .places::before {
    background-position: 58% center;
  }

  .manifesto::before {
    background-position: 61% center;
  }

  .places .section-heading {
    background: rgba(250,247,240,.44);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .places::before,
  .manifesto::before {
    animation: oma-background-breathe 38s ease-in-out infinite alternate;
  }
}

@keyframes oma-background-breathe {
  from { transform: scale(1.025) translate3d(0,0,0); }
  to   { transform: scale(1.045) translate3d(-.2%,.12%,0); }
}


/* OMA 1.3 – Metsän hyvästit */
.site-footer {
  padding: 0;
  border-top: 0;
  background: var(--moss-deep);
  color: #f5efe4;
}

.farewell {
  position: relative;
  min-height: clamp(520px, 66vw, 920px);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background-color: #123629;
  background-image:
    linear-gradient(180deg, rgba(6,31,23,.08), rgba(4,24,18,.18)),
    url('../images/kiitos-havumetsa.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.farewell::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,28,20,.52));
}

.farewell__content {
  position: absolute;
  left: 50%;
  bottom: clamp(140px, 14vh, 180px);
  transform: translateX(-50%);
  width: min(90%, 760px);
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,.34);
}

.farewell__brand {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.farewell__return {
  margin: .5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-style: italic;
  opacity: .88;
}

.site-footer__lower {
  border-top: 1px solid rgba(255,255,255,.14);
  background: #09271c;
}

.site-footer__inner {
  width: var(--shell);
  margin: auto;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: 22px;
}

.site-footer__meta {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: .78rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  color: rgba(255,255,255,.82);
  font-size: .76rem;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: #fff;
}

@media (max-width: 760px) {
  .farewell {
    min-height: 620px;
    background-size: auto 100%;
    background-position: center center;
  }

  .farewell__content {
    bottom: 24px;
  }

  .site-footer__inner {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    padding-block: 28px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 12px;
  }
}


.farewell__return{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.4rem,2vw,2rem);
  font-style:italic;
  letter-spacing:.03em;
  color:#f7f2ea;
}


/* 1.3.2 Hiljaisempi loppu */
.farewell__content{
    max-width:640px;
}
.farewell__return{
    line-height:1.8;
    text-shadow:0 4px 24px rgba(0,0,0,.45);
}
