/* ==========================================================================
   HOTELLI VERSTAS — tyylit

   Maailma: valoisa putiikki. Emosivusto nakkilanverstas.fi ja sisarsivusto
   verstasgoesbusiness.fi ovat tummia ja teollisia, koska niiden aihe on
   konehalli ja tapahtumat. Hotelli on toinen lupaus: 16 huonetta
   punatiilitalossa vuodelta 1935, ei ketjua. Siksi pohja on lampiman
   valkoinen paperi, tummaa kaytetaan vain kahdessa ankkurissa, ja aani on
   korkeakontrastinen antiikva eikä kondensoitu grotesk.

   Fontit: GT Super Display (ostettu) naytolle, Switzer (OFL) leipatekstiin.
   Molemmat itse isannoityja.

   Ei buildia. Kaikki tassa tiedostossa.
   ========================================================================== */

/* GT Super Display, Grilli Type. Ostettu: tilaukset 118795 (Regular),
   118796 (Display Light) ja 118894 (Display Light Italic). Korvasi
   Melodraman 22.10.2026: sen ohuet paatteet katosivat tiiliseinaa vasten
   eivatka E ja T erottuneet toisistaan. */
@font-face {
  font-family: "GT Super";
  src: url("/assets/fonts/GT-Super-Display-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Super";
  src: url("/assets/fonts/GT-Super-Display-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Super";
  src: url("/assets/fonts/GT-Super-Display-Light-Italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/Switzer-Variable.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* 01 TOKENIT ------------------------------------------------------------- */

:root {
  /* Paperi on lampiman valkoinen, ei kylma. Tummat savyt ovat ruskeaan
     taittuvia, jotta ne istuvat tiilen kanssa eivatka lue harmaaksi. */
  --paperi: #f7f3ed;
  --paperi-2: #efe9e0;
  --paperi-3: #e5ddd1;

  /* Tumma pinta on ruskea, ei musta: talon tiili ja puupinnat jatkuvat
     samassa savyperheessa myos kaanteisella pinnalla. */
  --muste: #2e2118;
  --muste-2: #3b2c20;

  --t-muste: #241f1a;
  --t-muste-2: #6d635a;
  --t-paperi: #f4efe7;
  --t-paperi-2: #a9a096;

  /* Savi on talon tiilesta, mutta murrettu: kylttivari, ei signaalivari. */
  --savi: #9c5240;
  --savi-syva: #7f4131;
  /* Tummalla pinnalla aksentti on lampimasti kullanhohtoinen. Kuparinen
     #e5a68b oli liian punainen ja hiekkainen #ddc4a4 liian lahella
     luunvalkoista tekstia; tama erottuu molemmista. */
  --savi-vaalea: #edb763;

  --viiva: rgba(46, 33, 24, 0.16);
  --viiva-2: rgba(46, 33, 24, 0.32);
  --viiva-tumma: rgba(244, 239, 231, 0.18);
  --viiva-tumma-2: rgba(244, 239, 231, 0.34);

  /* Pintakohtaiset muuttujat: sektio asettaa nama, komponentit lukevat. */
  --fg: var(--t-muste);
  --fg-2: var(--t-muste-2);
  --rl: var(--viiva);
  --rl-2: var(--viiva-2);
  --aks: var(--savi-syva);

  --font-display: "GT Super", "Iowan Old Style", Georgia, serif;
  --font-body: "Switzer", "Helvetica Neue", Arial, sans-serif;

  /* Naytto pysyy 6rem:n alapuolella myos isoilla ruuduilla: antiikva ei
     tarvitse kokoa vaan tilaa ymparilleen. */
  --fs-h1: clamp(3.05rem, 6.3vw, 5.7rem);
  --fs-h2: clamp(2.4rem, 5.05vw, 4.6rem);
  --fs-h3: clamp(1.625rem, 2.3vw, 2.25rem);
  --fs-lead: clamp(1.125rem, 1.35vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 64px);
  --sec-y: clamp(5.5rem, 11vw, 11rem);
  --mitta: 68ch;

  --h-nav: 76px;
  --radius: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 640ms;
}

.pinta--tumma {
  background: var(--muste);
  color: var(--t-paperi);
  --fg: var(--t-paperi);
  --fg-2: var(--t-paperi-2);
  --rl: var(--viiva-tumma);
  --rl-2: var(--viiva-tumma-2);
  --aks: var(--savi-vaalea);
  color-scheme: dark;
}

/* 02 PERUSTA ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-nav) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paperi);
  color: var(--t-muste);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
p { margin: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
}
.copy { max-width: var(--mitta); }
.copy p + p { margin-top: 1.1em; }
.copy a { color: var(--aks); text-underline-offset: 3px; }
.small { font-size: var(--fs-small); }

/* Pikkuversaali otsikkokenttien ja listojen avainsarakkeelle. */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 16px;
  background: var(--muste); color: var(--t-paperi); text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--savi); outline-offset: 3px; }

/* 03 RAKENNE ------------------------------------------------------------- */

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.sec { padding-block: var(--sec-y); }
.sec--tiivis { padding-block: clamp(3.5rem, 7vw, 7rem); }
/* Aamiaisen ja tilojen valiin kertyi kolme valia perakkain: osion alareuna,
   seuraavan ylareuna ja viivan marginaali. Alareuna kevennetaan. */
#aamiainen { padding-bottom: clamp(1rem, 2.2vw, 2.25rem); }
/* Talo-osion otsikko on kahdella rivilla. Palsta on leveilla naytoilla
   noin 590 px, ja yleinen h2-katto (5.25rem) katkaisi ekan rivin.
   Kapealla naytolla sita ei rajoiteta, muuten se jaisi muita pienemmaksi. */
@media (min-width: 961px) {
  #talo h2 { font-size: clamp(2.4rem, 5.05vw, 4.35rem); }
}
#muut { padding-block: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4rem); }

/* Otsikkokentta: otsikko vasemmalle, johdanto oikealle omaan palstaansa.
   Yla ja ala ovat eri levyiset tarkoituksella, se pitaa sivun hengittavana. */
.otsikko {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(2.75rem, 5vw, 5rem);
}
.otsikko--yksin { grid-template-columns: 1fr; }
.otsikko > p { margin-bottom: 0.35em; }

/* Vaakaviiva osion ylla: yksi hiusviiva koko leveydelta. Ei koristetta,
   vaan osion alkupiste. */
.raja { border: 0; border-top: 1px solid var(--rl); margin: 0 0 clamp(2.5rem, 5vw, 4.5rem); }
.raja--tiivis { margin: clamp(28px, 3.4vw, 44px) 0; }
/* Sulkeva viiva: marginaali ylapuolelle, muuten sama kuin avaava. */
.raja--alla { margin: clamp(2.5rem, 5vw, 4.5rem) 0 0; }

.kaksi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.split--kaanteinen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.split--kaanteinen > :first-child { order: 2; }

.pino-16 > * + * { margin-top: 16px; }
.pino-24 > * + * { margin-top: 24px; }
.pino-32 > * + * { margin-top: 32px; }
.mt-16 { margin-top: 16px; }
.mt-28 { margin-top: 28px; }
.mt-40 { margin-top: 40px; }
.mt-88 { margin-top: clamp(56px, 8vw, 104px); }

/* 04 NAPIT --------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-line: var(--rl-2);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  border: 1px solid var(--btn-line);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color 260ms var(--ease), color 260ms var(--ease),
              border-color 260ms var(--ease);
}
.btn svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
.btn--taytetty { --btn-bg: var(--savi-syva); --btn-fg: #fbf8f3; --btn-line: var(--savi-syva); }
.pinta--tumma .btn--taytetty { --btn-bg: var(--savi); --btn-line: var(--savi); }
.btn--pieni { padding: 12px 20px; font-size: 0.8125rem; }
.btn--levea { justify-content: center; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: var(--muste); --btn-fg: var(--t-paperi); --btn-line: var(--muste); }
  .pinta--tumma .btn:hover { --btn-bg: var(--t-paperi); --btn-fg: var(--muste); --btn-line: var(--t-paperi); }
  .btn--taytetty:hover { --btn-bg: var(--savi); --btn-fg: #fbf8f3; --btn-line: var(--savi); }
}
.btn-rivi { display: flex; flex-wrap: wrap; gap: 12px; }

/* Tekstilinkki, jonka alleviivaus kasvaa esiin. */
.linkki {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--fg);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rl-2);
  transition: border-color 260ms var(--ease), color 260ms var(--ease);
}
.linkki svg { width: 14px; height: 14px; fill: currentColor; }
@media (hover: hover) { .linkki:hover { color: var(--aks); border-color: currentColor; } }

/* 05 NAVI ---------------------------------------------------------------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 90; isolation: isolate;
  height: var(--h-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-inline: var(--gutter);
  color: var(--t-paperi);
  transition: background-color 320ms var(--ease), color 320ms var(--ease),
              border-color 320ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav {
  --fg: var(--t-paperi);
  --fg-2: var(--t-paperi-2);
  --rl-2: rgba(244, 239, 231, 0.42);
}
.nav::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1;
  height: 190%;
  background: linear-gradient(to bottom,
    rgba(28, 20, 14, 0.66) 0%,
    rgba(28, 20, 14, 0.42) 38%,
    rgba(28, 20, 14, 0.16) 68%,
    rgba(28, 20, 14, 0) 100%);
  transition: opacity 320ms var(--ease);
}
.nav.on-vierinyt::before { opacity: 0; }
.nav.on-vierinyt {
  --fg: var(--t-muste);
  --fg-2: var(--t-muste-2);
  --rl-2: var(--viiva-2);
  background: rgba(247, 243, 237, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--t-muste);
  border-bottom-color: var(--viiva);
}
.nav__merkki {
  display: flex; align-items: baseline; gap: 8px;
  text-decoration: none; flex: 0 0 auto;
}
/* Molemmat sanat samankokoisia: nimi luetaan yhtena, "Hotelli Verstas".
   Ero tehdaan painolla eika koolla. */
.nav__merkki b, .nav__merkki span {
  font-family: var(--font-display);
  font-size: 1.375rem; line-height: 1; letter-spacing: 0.01em;
}
/* "Hotelli" on samaa savya kuin "Verstas", vain askeleen kevyempi. Liian
   haalea katosi molemmilla pinnoilla, joten ero pidetaan pienena: tummalla
   lapinakyvyys 0.92, vaalealla #3a332c eli noin 11:1. */
.nav__merkki span { font-weight: 400; }
.nav__merkki i {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.5; flex: 0 0 auto;
  align-self: center; margin-inline: 2px;
}
.nav__merkki b { font-weight: 400; }
.nav__oikea { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.nav__linkit { display: flex; gap: clamp(16px, 2vw, 34px); }
.nav__linkki {
  text-decoration: none; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease), opacity 220ms var(--ease);
  opacity: 0.82;
}
.nav__linkki:hover, .nav__linkki.on { opacity: 1; border-bottom-color: currentColor; }
.nav__cta { border-color: currentColor; }
.nav.on-vierinyt .nav__cta { --btn-bg: var(--savi-syva); --btn-fg: #fbf8f3; --btn-line: var(--savi-syva); }
/* Navin napin hover kirjoitetaan omaksi saannokseen: .btn:hover on
   kevyempi kuin .nav.on-vierinyt .nav__cta, joten vieritetylla navilla
   hover ei muuten nakynyt lainkaan. */
@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover { --btn-bg: var(--t-paperi); --btn-fg: var(--muste); --btn-line: var(--t-paperi); }
  .nav.on-vierinyt .nav__cta:hover { --btn-bg: var(--savi); --btn-fg: #fbf8f3; --btn-line: var(--savi); }
}

.nav__burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid currentColor; border-radius: var(--radius);
  background: transparent; color: inherit; cursor: pointer;
}
.nav__burger svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.nav__burger .i-x, .nav.on-auki .nav__burger .i-menu { display: none; }
.nav.on-auki .nav__burger .i-x { display: block; }

/* 06 VALIKKO ------------------------------------------------------------- */

.valikko {
  position: fixed; inset: 0; z-index: 85;
  background: var(--muste); color: var(--t-paperi);
  padding: calc(var(--h-nav) + 28px) var(--gutter) 32px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 360ms var(--ease), visibility 0s linear 360ms;
}
.valikko.on-auki {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 360ms var(--ease);
}
.valikko__lista { list-style: none; margin: 0; padding: 0; }
.valikko__lista li + li { border-top: 1px solid var(--viiva-tumma); }
.valikko__linkki {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; min-height: 48px;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 5.8vw, 2.125rem); line-height: 1.05;
  letter-spacing: -0.02em;
}
.valikko__linkki svg { width: 18px; height: 18px; fill: currentColor; opacity: 0.5; }
.valikko__alu {
  margin-top: auto; padding-top: 32px;
  display: grid; gap: 12px; font-size: var(--fs-small);
}
.valikko__alu a { text-decoration: none; }
.valikko__alu .btn { margin-top: 8px; }

/* 07 HERO ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--h-nav) + 40px) 0 clamp(2.5rem, 6vw, 5rem);
  background: var(--muste); color: var(--t-paperi);
  --fg: var(--t-paperi); --fg-2: var(--t-paperi-2);
  --rl: var(--viiva-tumma); --rl-2: var(--viiva-tumma-2); --aks: var(--savi-vaalea);
  overflow: hidden;
}
.hero__tausta { position: absolute; inset: 0; overflow: hidden; }
/* object-position alaspain: 100svh-hero rajaa 16:9-kuvasta pystysuunnassa,
   ja keskitys jatti rakennuksen matalalle. Suurempi Y-arvo nayttaa kuvan
   alaosaa, jolloin rakennus nousee nakymassa ylemmas. */
/* Parallaksi: kuva on --par verran korkeampi kuin kehys ja nousee saman
   verran ylos, jolloin sita voi siirtaa molempiin suuntiin ilman etta
   reunoihin jaa rakoa. Siirto tulee JS:sta muuttujaan --par-y. */
.hero__tausta img {
  --par: 90px;
  position: absolute; left: 0; top: calc(var(--par) * -1);
  width: 100%; height: calc(100% + var(--par) * 2);
  object-fit: cover; object-position: 50% 74%;
  transform: translate3d(0, var(--par-y, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero__tausta img { transform: none; }
}
.hero__tausta .paikka { align-items: start; justify-items: end; padding: calc(var(--h-nav) + 20px) var(--gutter) 0; }
/* Kuva vaimennetaan alhaalta, jotta teksti pysyy luettavana ilman
   laatikkoa sen takana. */
.hero__tausta::after {
  content: ""; position: absolute; inset: 0;
  /* Kaksi kerrosta: pystyliuku tummentaa ylareunan navia varten ja
     alareunan tekstia varten, vaakaliuku syventaa vasenta laitaa jossa
     otsikko ja napit ovat. Oikea ellipsi on nostettu ylos ja kasvatettu,
     koska matalalla lapparinaytolla ingressi nousee ruudun puolivaliin ja
     jai aiemmin kirkkaan taivaan paalle (3,4:1). Yhdessa ne tekevat
     kevyen vinjetin. */
  background:
    radial-gradient(ellipse 68% 36% at 31% 84%,
      rgba(38, 26, 18, 0.58) 0%,
      rgba(38, 26, 18, 0.38) 46%,
      rgba(38, 26, 18, 0.14) 76%,
      rgba(38, 26, 18, 0) 100%),
    radial-gradient(ellipse 40% 44% at 78% 72%,
      rgba(38, 26, 18, 0.6) 0%,
      rgba(38, 26, 18, 0.42) 40%,
      rgba(38, 26, 18, 0.14) 72%,
      rgba(38, 26, 18, 0) 100%),
    linear-gradient(100deg,
      rgba(38, 26, 18, 0.34) 0%,
      rgba(38, 26, 18, 0.18) 34%,
      rgba(38, 26, 18, 0.04) 64%,
      rgba(38, 26, 18, 0) 82%),
    linear-gradient(190deg,
      rgba(38, 26, 18, 0.46) 0%,
      rgba(38, 26, 18, 0.14) 36%,
      rgba(38, 26, 18, 0.64) 82%,
      rgba(38, 26, 18, 0.9) 100%);
}
/* .wrap hoitaa leveyden ja reunukset, tassa vain pinojarjestys.
   Leveilla naytoilla otsikko on vasemmalla ja ingressi + napit oikealla,
   molemmat kiinni heron alareunassa. */
.hero__sisalto { position: relative; }
.hero__oikea { display: grid; gap: clamp(18px, 2.2vw, 26px); justify-items: start; }
/* Kapealla naytolla otsikko on aina kolmella rivilla: "Butiikkihotelli",
   "Nakkilassa," ja kursiivinen "vanhassa tiilitalossa.". Mitan maaraa
   kolmas rivi, joka vaatii noin 6.5 x fonttikoon verran leveytta. Koko on
   siksi sidottu leveyteen - kiintea koko meni neljalle riville pienilla
   ruuduilla ja kahdelle isoilla. */
@media (max-width: 960px) {
  :root { --fs-h1: clamp(2.05rem, 12.4vw - 6px, 3.85rem); }
}
/* Yhden palstan heroissa otsikko ja ingressi ovat allekkain, joten niiden
   valiin tarvitaan oma vali - ruudukon gap koskee vain kahta palstaa. */
@media (max-width: 960px) { .hero__oikea { margin-top: clamp(18px, 3vw, 26px); } }
@media (min-width: 961px) {
  .hero__sisalto {
    /* Oikea palsta mitoittuu sisallon mukaan, jotta napit pysyvat
       vierekkain. Otsikko saa loput. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    /* Vali kasvaa vasta kun tilaa on: kapealla naytolla se veisi otsikolta
       rivin. Taysi 120 px saavutetaan 1600 px:sta ylospain. */
    gap: clamp(40px, 9vw - 48px, 80px); align-items: end;
  }
  /* Kahdessa palstassa otsikko saa vahemman tilaa, joten sen katto on
     matalampi kuin yhden palstan heroissa. Muuten se venyy neljalle
     riville. */
  /* Hero saa muuta sivua leveamman mitan: oikea palsta on nappien
     levyinen (349 px), joten kaikki lisaleveys menee otsikolle. */
  .hero__sisalto { width: min(100% - var(--gutter) * 2, 1320px); }
  .hero { --fs-h1: clamp(2.275rem, 3.9vw, 4.9rem); --fs-lead: clamp(1.0625rem, 1.4vw, 1.3125rem); }
  .hero h1 { max-width: none; }
  .hero__oikea { max-width: 27rem; }
  .hero .hero__lead { max-width: 30ch; }
}
/* Otsikon kasvu porrastetaan kolmeen tasoon. Pisin rivi "Butiikkihotelli
   Nakkilassa," vaatii noin 8 x fonttikoon verran leveytta, ja vasemman
   palstan leveys on wrap miinus vali ja nappien levyinen oikea palsta.
   Yksi vw-kerroin ei kata koko valia: kapealla se katkaisisi rivin ja
   leveilla se jaisi turhan pieneksi. */
@media (min-width: 1100px) {
  .hero { --fs-h1: clamp(2.275rem, 4.4vw, 4.9rem); }
}
@media (min-width: 1400px) {
  .hero { --fs-h1: clamp(2.275rem, 5.55vw, 4.9rem); }
  .hero__oikea { gap: clamp(20px, 2.6vw, 34px); }
  .hero__oikea .btn-rivi { flex-wrap: nowrap; gap: 10px; }
  .hero__oikea .btn { padding-inline: 19px; font-size: 0.8125rem; letter-spacing: 0.05em; gap: 9px; }
}
/* Ei ch-kattoa: se kutistuisi fonttikoon mukana ja otsikko rivittyisi
   silti. Leveyden maaraa heron oma palsta. */
.hero h1 { max-width: none; }
.hero h1 em { font-style: italic; font-weight: 300; }
.hero__lead { margin: 0; max-width: 44ch; color: var(--t-paperi); opacity: 0.92; }
.hero .btn-rivi { margin-top: 0; }

/* Luvut Talo-osiossa: ikoni, luku ja selite pystyyn. */
.luvut {
  list-style: none; margin: clamp(24px, 3.4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.luvut li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px; align-items: start;
}
/* Ikoni on luvun rivilla, selite luvun alla. Ikoni ei siis keskity
   kahden rivin valiin vaan istuu numeron kanssa samalle korkeudelle. */
.luvut svg { width: 30px; height: 30px; color: var(--aks); align-self: center; }
.luvut b { grid-column: 2; }
.luvut span { grid-column: 2; margin-top: 2px; }
.luvut b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.05; letter-spacing: -0.015em;
}
.luvut span { font-size: var(--fs-small); color: var(--fg-2); }

/* Merkit eivat istu aina samassa paikassa: kroissantti pilkistaa
   aamiaiskuvan takaa ja sanky on huoneosion otsikon vastapainona. */
.merkki { width: clamp(46px, 5vw, 68px); height: clamp(46px, 5vw, 68px); color: var(--aks); }
.kuva-merkilla { position: relative; }
/* Merkki nousee kuvan ylareunan yli ja on hieman sivussa kulmasta, jotta
   se lukee irrallisena merkkina eika kehyksen koristeena. */
.kuva-merkilla .merkki {
  position: absolute; z-index: 1;
  left: clamp(14px, 3vw, 34px);
  top: clamp(-34px, -3.2vw, -22px);
}

.merkki--varaa { margin-bottom: 20px; }

/* Booking-arvio on sivuston ainoa ulkopuolinen todiste, joten se on
   varauskehotteen vieressa eika piilotettuna faktariviin. */
.arvio {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  font-size: var(--fs-small); color: var(--fg-2);
}
.arvio svg { width: 22px; height: 22px; color: var(--aks); flex: 0 0 auto; }
/* Luku leipafontilla: naytonantiikvan numerot eivat istu pienessa
   tietorivissa, ne lukivat koristeena. */
.arvio b {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: 0; color: var(--fg);
}
.arvio__lisa { opacity: 0.72; }
/* Varauskehote on oma tumma kortti, ei hiusviivojen valiin jaava osio.
   Iso avainmerkki nurkassa antaa kortille luonteen ilman kuvaa. */
.varaa-kortti {
  position: relative; overflow: hidden;
  padding: clamp(32px, 4.4vw, 72px);
  border-radius: var(--radius);
}
.varaa-kortti__merkki {
  position: absolute; right: -52px; top: -82px; z-index: 0;
  width: clamp(150px, 16vw, 220px); height: clamp(150px, 16vw, 220px);
  color: var(--aks); opacity: 0.14;
  transform: rotate(24deg);
  pointer-events: none;
}
/* Kapealla naytolla kortti on matala ja kapea, joten sama nurkkasijainti
   tyontaisi avaimen lahes kokonaan ulos. Tuodaan se alemmas nakyviin. */
@media (max-width: 700px) {
  .varaa-kortti__merkki {
    right: -30px; top: -30px;
    width: clamp(118px, 32vw, 155px); height: clamp(118px, 32vw, 155px);
  }
}
.varaa-kortti .split { position: relative; z-index: 1; }
#varaa .split { align-items: end; }
.varaa-oikea { display: grid; gap: 20px; justify-items: start; }
@media (max-width: 700px) {
  .arvio__lisa { flex-basis: 100%; }
  .hero__arvio .arvio__lisa { flex-basis: auto; }
}
/* Kapeimmilla naytoilla "/ 10" jaa pois, jotta arvosana ja arviomaara
   pysyvat samalla rivilla. */
@media (max-width: 380px) {
  .hero__arvio .arvio__per { display: none; }
  .hero__arvio { gap: 4px 9px; }
  .hero__arvio .arvio__lisa::before { margin-right: 9px; }
}
/* Heron arvosana on tiivis rivi otsikon alla: se on sama tieto kuin
   varauskortissa, mutta paatoksen hetkella. */
.hero__arvio {
  margin-top: 18px;
  /* Rivi on valokuvan paalla, joten se tarvitsee enemman kontrastia kuin
     varauskortin vastaava. Arviomaara ei saa jaada haaleaksi lisatiedoksi. */
  color: rgba(246, 242, 235, 0.92); text-shadow: 0 1px 8px rgba(24, 16, 10, 0.55);
}
.hero__arvio .arvio__lisa { opacity: 1; }
.hero__arvio .arvio__lisa::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.65;
  margin-right: 12px; margin-bottom: 2px;
}
.hero__vasen { display: grid; justify-items: start; }

/* 08 KUVAPAIKAT ---------------------------------------------------------- */
/* Oikeita kuvia ei ole viela saatu. Paikanvaraus on tasainen savypinta ja
   sen paalla se, mita kuvaa paikkaan tulee: se kertoo asiakkaalle mita
   halutaan, eika teeskentele kuvaa. */
.kuva { position: relative; overflow: hidden; background: var(--paperi-3); border-radius: var(--radius); }
.kuva img { width: 100%; height: 100%; object-fit: cover; }
.kuva--4-3 { aspect-ratio: 4 / 3; }
.kuva--3-4 { aspect-ratio: 3 / 4; }
.kuva--korkea { aspect-ratio: 5 / 7; }
.kuva--levea { aspect-ratio: 16 / 9; }
/* Yhteystiedoissa kuva venyy viereisen taulukon korkuiseksi: split
   venyttaa palstan ja kuva tayttaa sen. */
#yhteys .split { align-items: stretch; }
/* Yhteystiedot kahteen palstaan niin, etta kartan ylareuna on otsikon
   ylareunan tasalla ja alareuna tietolistan viimeisen viivan tasalla.
   Kartan korkeus tulee siis vasemmasta palstasta, leveys seuraa perassa. */
.yhteys-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px); align-items: stretch;
}
.yhteys-kuva { display: flex; align-items: stretch; justify-content: center; }
.yhteys-kuva .kartta-kehys { width: auto; max-width: 100%; margin: 0; }
.yhteys-kuva .kartta { height: 100%; width: auto; max-width: 100%; }
@media (max-width: 960px) {
  .yhteys-grid { grid-template-columns: 1fr; gap: 40px; }
  .yhteys-kuva .kartta { height: auto; width: 100%; }
  .yhteys-kuva .kartta-kehys { width: 100%; }
}
.kuva--taysi { width: 100%; min-height: 320px; }
.paikka {
  display: grid; place-items: center; padding: 20px;
  background: var(--paperi-3);
  color: var(--t-muste-2);
  text-align: center;
}
.pinta--tumma .paikka, .hero .paikka { background: var(--muste-2); color: var(--t-paperi-2); }
.paikka span {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
}

/* 09 TIETORIVIT ---------------------------------------------------------- */

.tiedot { border-top: 1px solid var(--rl); }
.tieto {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 8px 32px; padding: 18px 0;
  border-bottom: 1px solid var(--rl);
}
.tieto__k { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-2); align-self: start; padding-top: 3px; }
.tieto__v { margin: 0; }
.tieto__v a { color: inherit; text-underline-offset: 3px; }

/* Etaisyydet: nimi ja luku samalle riville, luku savella. */
/* Saapuminen: kaksi isoa lausetta luettelon sijaan. Kellonajat ovat se
   mita sivulta oikeasti haetaan, joten ne ladotaan naytonfontilla. */
.saapuminen { display: grid; gap: clamp(20px, 2.6vw, 32px); }
/* Paino 400 eika 300: ohuet vedot haipyvat tummaa vasten 40 pikselin
   koossa ja teksti lukee harmaana vaikka savy on luunvalkoinen.
   Otsikkokoossa (84 px) sama paino riittaa, tassa ei. */
.saapuminen__iso {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.25;
  letter-spacing: -0.015em; max-width: 34ch; text-wrap: balance;
  color: #fbf8f3;
}
.saapuminen__iso b { font-weight: 400; color: var(--aks); }
@media (max-width: 960px) {
  .saapuminen__iso { font-size: clamp(1.5rem, 5.6vw, 1.875rem); }
  .kaksi h3 { font-size: clamp(1.875rem, 7vw, 2.375rem); }
}
.saapuminen__lisa { color: var(--fg-2); max-width: 52ch; }

.saapuminen-split {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 80px); align-items: start;
}
/* Ingressi ja otsikko alkavat samalta korkeudelta, ja etaisyyslaatikko
   nousee ingressin mukana ylos. */
.saapuminen__oikea { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.saapuminen__oikea .lead { margin: 0; }
/* Etaisyydet omaan laatikkoonsa. Ei kehysta: laatikko erottuu omalla,
   osiota hivenen tummemmalla pinnallaan. Rivivaliviivat pitavat luvut ja
   kaupungit samalla rivilla luettavina. */
.matkalaatikko {
  background: #271b13;
  padding: clamp(26px, 2.8vw, 40px);
  border-radius: var(--radius);
}
.matkalaatikko .label { display: block; margin-bottom: 14px; }
.matkat { list-style: none; margin: 0; padding: 0; }
.matkat li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rl);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem); letter-spacing: -0.015em;
}
.matkat li:last-child { border-bottom: 0; padding-bottom: 0; }
.matkat .num { color: var(--aks); }

/* 10 HUONEET ------------------------------------------------------------- */
/* Vuorottelevat rivit ruudukon sijaan: viisi korttia vierekkain jatti
   kuvista postimerkin kokoisia, ja huoneet ovat hotellin tuote. Kuva
   vaihtaa puolta joka rivilla, jotta osio ei ala kayda sarjaksi. */
/* Kolme ylos, kaksi alas. Kuusi saraketta: ylarivin kortit vievat kaksi ja
   alarivin kolme, jolloin molemmat rivit tayttyvat eika alariviin jaa
   aukkoa. Alarivin kortit ovat samalla isompia. */
.huoneet {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(30px, 3.6vw, 52px) clamp(20px, 2.4vw, 32px);
}
.huone { grid-column: span 2; display: grid; align-content: start; }
.huone.kuva-merkilla { position: relative; }
.huone:nth-child(n+4) { grid-column: span 3; }
.huone__kuva { aspect-ratio: 4 / 5; margin-bottom: 20px; }
.huone:nth-child(n+4) .huone__kuva { aspect-ratio: 3 / 2; }
.huone__nro { display: block; margin-bottom: 10px; }
.huone h3 { margin-bottom: 14px; }
.huone p { color: var(--fg-2); max-width: 44ch; }
.huone__hinta { margin-top: 14px; font-size: var(--fs-small); color: var(--fg-2); }
.huone__hinta b { font-family: var(--font-body); font-weight: 700; color: var(--fg); }

/* Kuva on linkki varausjarjestelman huonesivulle. Hoverilla kuva zoomaa
   hitaasti, paalle tulee kevyt tummennus ja Varaa-merkki nousee esiin.
   Kortti ei liiku, jotta ruudukko pysyy paikallaan. */
.huone-nuolet { display: none; gap: 8px; margin-bottom: 18px; }
.huone-nuoli {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--rl-2); border-radius: var(--radius); color: var(--fg);
  background: none; cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.huone-nuoli svg { width: 18px; height: 18px; fill: currentColor; }
.huone-nuoli[data-huone="-1"] svg { transform: rotate(180deg); }
.huone-nuoli[disabled] { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .huone-nuoli:not([disabled]):hover { background: rgba(244, 239, 231, 0.08); border-color: var(--rl); }
}

.huone__kuvalinkki {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius); margin-bottom: 20px;
  text-decoration: none; color: inherit;
}
.huone__kuvalinkki .huone__kuva { margin-bottom: 0; }
.huone__kuvalinkki img { transition: transform 900ms var(--ease); }
.huone__kuvalinkki::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(38, 26, 18, 0.42);
  opacity: 0; transition: opacity 420ms var(--ease); pointer-events: none;
}
.huone__varaa {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-shadow: 0 1px 10px rgba(24, 16, 10, 0.5);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(-50%, calc(-50% + 10px));
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  pointer-events: none;
}
.huone__varaa > span {
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.huone__varaa svg { width: 14px; height: 14px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .huone:hover .huone__kuvalinkki img { transform: scale(1.045); }
  .huone:hover .huone__kuvalinkki::after { opacity: 1; }
  .huone:hover .huone__varaa { opacity: 1; transform: translate(-50%, -50%); }
}
.huone__kuvalinkki:focus-visible::after { opacity: 1; }
.huone__kuvalinkki:focus-visible .huone__varaa { opacity: 1; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
  .huone__kuvalinkki img { transition: none; }
  .huone:hover .huone__kuvalinkki img { transform: none; }
}

/* Varustelu koskee kaikkia 16 huonetta, ei vain viitta teemahuonetta.
   Rivi nostaa myos ne yksitoista joita ei esitella erikseen. */
.varustelu {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rl);
  display: grid; gap: 18px;
}
.varustelu__k {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--fg-2);
}
/* Nelja saraketta, eli nelja ylos ja kolme alas. Vaakaviivojen sijaan
   ikoni tekee kohdasta yksikon. */
.varustelu__lista {
  list-style: none; margin: 0; padding: 0;
  /* Rivilla kohdat pakkautuvat perakkain sisallon leveyden mukaan, jotta
     pisimman kohdan jalkeen ei jaa tyhjaa saraketta. */
  display: flex; flex-wrap: wrap;
  --rivivali: clamp(8px, 1vw, 13px);
  gap: var(--rivivali) clamp(28px, 3.4vw, 52px);
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1rem, 1.15vw, 1.125rem); letter-spacing: 0;
}
/* Kaksiriviset kohdat (esim. vaatekaappi ja kirjoituspoyta) tasautuvat
   ekan rivin mukaan, jotta ikonirivi pysyy suorana. */
.varustelu__lista li { display: flex; align-items: flex-start; gap: 11px; }
.varustelu__lista svg { flex: none; margin-top: 0.16em; width: 22px; height: 22px; color: var(--aks); flex: 0 0 auto; }
.varustelu__lista li { max-width: 100%; }
/* Rivinvaihto ennen pisinta kohtaa: nelja kohtaa ekalle riville ja
   vaatekaappi, wifi ja lemmikit perakkain tokalle. */
.varustelu__lista .varustelu__tauko { flex: 0 0 100%; height: 0; margin: 0; padding: 0; }
@media (max-width: 960px) { .varustelu__lista { --rivivali: 8px; gap: var(--rivivali) clamp(24px, 5vw, 40px); } }
@media (max-width: 520px) {
  .varustelu__lista { flex-direction: column; --rivivali: 14px; gap: 14px; }
  .varustelu__lista .varustelu__tauko { display: none; }
}
.varustelu__lisa { font-size: var(--fs-small); color: var(--fg-2); max-width: 62ch; }

/* 11 KERROKSET ----------------------------------------------------------- */
/* Talon leikkaus viivapiirroksena ja kerrokset sen rinnalla. Piirros on
   pelkkaa geometriaa, ei kuvitusta: se kertoo mita talossa on missakin
   ja sitoo vuoden 1935 rakennuksen osioon. */
.leikkaus {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
/* Leveilla naytoilla piirros on keskella ja kerrokset sen ymparilla eri
   korkeuksilla: ylin ja kellari vasemmalla, keskikerros oikealla. Nain
   tekstit lukevat piirroksen selitteina eivatka omana palstanaan. */
@media (min-width: 961px) {
  /* Ylin kerros piirroksen ylle keskelle, kellari vasemmalle ja
     keskikerros oikealle. Nain tekstit asettuvat talon ymparille siina
     jarjestyksessa kuin kerrokset ovat. */
  .leikkaus {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
    grid-template-rows: auto auto;
    gap: clamp(4px, 0.8vw, 12px) clamp(28px, 3.6vw, 60px);
    align-items: center; justify-items: stretch;
  }
  /* Piirros rivin alareunaan, jotta kellariteksti tulee heti sen alle eika
     rivikorkeus jata valiin tyhjaa. */
  .leikkaus__kuva { grid-column: 2; grid-row: 1; align-self: end; }
  .kerros { border-top: 0; padding-top: 0; }
  .kerros:nth-of-type(1) { grid-column: 1; grid-row: 1; text-align: right; }
  .kerros:nth-of-type(1) h3 { justify-content: flex-end; }
  .kerros:nth-of-type(3) h3 { justify-content: center; }
  .kerros:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .kerros:nth-of-type(3) {
    grid-column: 1 / -1; grid-row: 2;
    text-align: center; max-width: 62ch; justify-self: center;
  }
  .leikkaus .kerros p { max-width: none; }
  .leikkaus .kerros:nth-of-type(3) p { margin-inline: auto; max-width: 58ch; }
}
/* Piirros on pienempi kuin ennen, joten viereiset tekstit pienennetaan
   mukana, etta palstat pysyvat tasapainossa. */
.leikkaus .kerros h3 {
  font-size: clamp(1.875rem, 2.5vw, 2.5rem);
  display: flex; align-items: center; gap: 12px;
}
.leikkaus .kerros h3::before {
  content: ""; flex: none;
  width: clamp(26px, 2.6vw, 38px); height: 6px;
  background:
    radial-gradient(circle 3px at calc(100% - 3px) 50%, var(--aks) 98%, transparent 100%),
    linear-gradient(var(--aks), var(--aks)) left center / calc(100% - 3px) 1px no-repeat;
}
.leikkaus .kerros p { font-size: var(--fs-small); }
.leikkaus__kuva { margin: 0; width: 100%; justify-self: stretch; }
.leikkaus__kuva svg { width: 100%; height: auto; display: block; }
/* Aksonometria: yksi viivanpaksuus ja yksi savy koko piirroksessa, jotta
   se lukee yhtena piirustuksena eika kolmena tasona. */
.ax { fill: none; stroke: var(--fg); stroke-linejoin: round; stroke-linecap: round; }
.ax path { vector-effect: non-scaling-stroke; fill: none; }
/* Runko, ikkunat ja apuviivat ovat samaa savya, vain lapinakyvyys eroaa,
   jolloin piirros lukee yhtena luonnoksena eika kolmena tasona. */
.ax-runko { stroke-width: 1; opacity: 0.62; }
.ax-ikk { stroke-width: 0.85; opacity: 0.4; }
.ax-apu { stroke-width: 0.7; opacity: 0.16; }
/* Kapealla naytolla piirros ja kerrokset ovat yksi pino. Leveilla naytoilla
   valit tulevat ruudukolta, joten pinon marginaali on rajattu tanne. */
@media (max-width: 960px) {
  .leikkaus > * + * { margin-top: clamp(28px, 4vw, 44px); }
}
/* Ei ylaviivaa: piirros erottaa kerrokset toisistaan riittavasti. */
.kerros { border-top: 0; padding-top: 0; }
.kerros h3 { margin-bottom: 10px; }
.kerros p { color: var(--fg-2); max-width: 54ch; }

/* 12 ALAPALKKI ----------------------------------------------------------- */

.footer { background: var(--muste); color: var(--t-paperi); padding-block: clamp(3.5rem, 7vw, 6rem) 32px; --fg: var(--t-paperi); --fg-2: var(--t-paperi-2); --rl: var(--viiva-tumma); --rl-2: var(--viiva-tumma-2); }
.footer__yla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); }
.footer__merkki { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.footer__merkki { display: flex; align-items: baseline; gap: 10px; align-self: start; }
.footer__merkki span { font-weight: 300; }
.footer__merkki i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; align-self: center; }
.footer__tiedot { display: grid; gap: 4px; justify-items: end; text-align: right; }
.footer__alu {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 24px;
  border-top: 1px solid var(--viiva-tumma);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: var(--fs-small); color: var(--t-paperi-2);
}
.footer__alu a { text-underline-offset: 3px; }
.footer__krediitti { margin-left: auto; }

/* 13 EVASTEET ------------------------------------------------------------ */

.evaste {
  position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 95;
  width: min(452px, calc(100vw - var(--gutter) * 2));
  padding: 24px;
  background: var(--paperi); color: var(--t-muste);
  border: 1px solid var(--viiva);
  box-shadow: 0 20px 48px rgba(46, 33, 24, 0.2);
  font-size: var(--fs-small);
  opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms;
}
.evaste.on-nakyvissa {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.evaste p { margin: 0 0 18px; }
/* Napit vierekkain ja yhta leveina. Kortti on 452 px ja nappien teksti
   tiiviimpaa kuin muualla, jotta "Vain valttamattomat" mahtuu yhdelle
   riville puolikkaaseen sarakkeeseen. */
.evaste__napit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evaste__napit .btn {
  white-space: nowrap; justify-content: center;
  padding: 12px 10px; font-size: 0.75rem; letter-spacing: 0.04em;
}
.evaste .btn { justify-content: center; padding-inline: 12px; text-align: center; }

/* 14 SISAANTULO ---------------------------------------------------------- */
/* Yksi kasikirjoitettu hetki: heron sisalto nousee jarjestyksessa, muut
   osiot vain hiipuvat paikalleen. Alkutila on CSS:ssa html.js-luokan takana,
   joten mikaan ei valahda ennen animaatiota. */

html.js:not(.reduced) .hero__sisalto > * {
  opacity: 0;
  transform: translateY(18px);
}
html.js:not(.reduced) .hero.on-sisalla .hero__sisalto > * {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
html.js:not(.reduced) .hero.on-sisalla h1 { transition-delay: 60ms; }
html.js:not(.reduced) .hero.on-sisalla .hero__lead { transition-delay: 200ms; }
html.js:not(.reduced) .hero.on-sisalla .btn-rivi { transition-delay: 300ms; }
html.js:not(.reduced) .hero.on-sisalla .hero__rivi { transition-delay: 400ms; }

/* Otsikon sisaantulo: rivi kerrallaan maskin takaa.

   Kirjain kerrallaan nouseva efekti on toimistojen kieltä: energinen ja
   levoton. Butiikkihotelli ja korkeakontrastinen nayttoantiikva kaipaavat
   rauhallisempaa liiketta, joten otsikko paljastuu rivi kerrallaan.
   Jokainen rivi on oma maskinsa, jonka takaa teksti liukuu ylos yhtena
   kokonaisuutena. Kirjaimet eivat hajoa, kursiivi sailyy ehjana.

   Liike on pitka ja pysahtyy pehmeasti ilman ylitysta: se lukee
   harkituksi eika vikkelaksi. Rivien vali 130 ms riittaa siihen, etta
   silma ehtii lukea edellisen rivin.

   Maskia levennetaan alaspain negatiivisella marginaalilla, jotta j:n ja
   p:n alapidennykset mahtuvat. Asettelu ei muutu.

   Otsikko pilkotaan vasta kun fontit ovat valmiina. Rivit ovat
   aria-hidden ja otsikolla on aria-label, joten ruudunlukija lukee
   otsikon yhtena lauseena. */
.rivi {
  display: block; overflow: hidden;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
html.js:not(.reduced) .rivi__s { display: block; transform: translateY(112%); }
html.js:not(.reduced) .on-kirjaimet .rivi__s {
  transform: none;
  transition: transform 1150ms cubic-bezier(0.16, 1, 0.3, 1) var(--kd, 0ms);
}

html.js:not(.reduced) .esiin { opacity: 0; transform: translateY(14px); }
html.js:not(.reduced) .esiin.on-sisalla {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (max-width: 700px) {
  html.js:not(.reduced) .esiin { transform: translateY(10px); }
  html.js:not(.reduced) .esiin.on-sisalla { transition-duration: 900ms; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 15 RESPONSIIVISUUS ----------------------------------------------------- */

@media (max-width: 1100px) {
  .huoneet { gap: clamp(26px, 3vw, 38px) 24px; }
}

@media (max-width: 960px) {
  .nav__linkit { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__cta { display: none; }
  .split, .split--kaanteinen { grid-template-columns: 1fr; gap: 32px; }
  .split--kaanteinen > :first-child { order: 0; }
  .otsikko { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .otsikko > p { margin-bottom: 0; }
  .kerros { grid-template-columns: 1fr; gap: 10px; }
  .huoneet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .huone, .huone:nth-child(n+4) { grid-column: span 1; }
  .huone:nth-child(n+4) .huone__kuva { aspect-ratio: 4 / 5; }
  .leikkaus { grid-template-columns: 1fr; gap: 0; }
  .leikkaus__kuva { max-width: 360px; margin-inline: auto; }
  .kerros h3 { font-size: clamp(1.875rem, 5.6vw, 2.25rem); }
  .saapuminen-split { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 700px) {
  :root { --h-nav: 68px; }
  .kaksi { grid-template-columns: 1fr; }
  .footer__yla { grid-template-columns: 1fr; }
  .footer__tiedot { justify-items: start; text-align: left; }
  .tieto { grid-template-columns: 1fr; gap: 4px; }
  /* Kapealla ruudulla rivi katkeaa: viivat pois ja kohdat allekkain. */
  .hero__rivi { gap: 8px 18px; }
  .hero__rivi li + li { padding-left: 0; border-left: 0; }
  .footer__krediitti { margin-left: 0; width: 100%; }
  .btn { padding: 15px 22px; }
  .btn-rivi .btn { flex: 1 1 auto; justify-content: center; }
}

/* Valikon sisalto matalilla naytoilla: linkit ja yhteystiedot on mahduttava
   ilman vierittamista myos 568 ja 480 pikselin korkeudella. */
@media (max-width: 767px) and (max-height: 720px) {
  .valikko { padding-top: calc(var(--h-nav) + 16px); padding-bottom: 20px; }
  .valikko__linkki { font-size: 1.5rem; padding: 10px 0; min-height: 44px; }
  .valikko__alu { padding-top: 20px; gap: 9px; }
}
@media (max-width: 767px) and (max-height: 600px) {
  .valikko { padding-top: calc(var(--h-nav) + 10px); padding-bottom: 14px; }
  .valikko__linkki { font-size: 1.3125rem; padding: 7px 0; min-height: 38px; }
  .valikko__alu { padding-top: 14px; gap: 7px; font-size: 0.875rem; }
  .valikko__alu .btn { padding: 11px 18px; }
}
@media (max-width: 767px) and (max-height: 520px) {
  :root { --h-nav: 56px; }
  .valikko { padding-top: calc(var(--h-nav) + 6px); padding-bottom: 10px; }
  .valikko__linkki { font-size: 1.0625rem; padding: 4px 0; min-height: 32px; }
  .valikko__linkki svg { width: 14px; height: 14px; }
  .valikko__alu { padding-top: 10px; gap: 4px; font-size: 0.8125rem; }
  .valikko__alu .btn { padding: 9px 16px; font-size: 0.75rem; }
}

/* Kapealla naytolla viisi pitkaa korttia allekkain vei ruudulta valtavasti
   tilaa, joten ne ovat vaakaradalla. Nuolet nakyvat vain kun rata vierii. */
@media (max-width: 700px) {
  /* Kapealla naytolla otsikot saavat oman, isomman asteikkonsa: vw-osuus
     jaa niin pieneksi, etta clampin alaraja maarittaa koon. */
  :root { --fs-h2: 2.375rem; --fs-h3: 1.875rem; }
  .hero__tausta img { object-position: 32% 74%; }
  .huone-nuolet { display: flex; }
  .huoneet {
    display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-bottom: 4px;
  }
  .huoneet::-webkit-scrollbar { display: none; }
  .huone, .huone:nth-child(n+4) {
    grid-column: auto; flex: 0 0 min(78%, 320px); scroll-snap-align: start;
  }
  .huone__kuva, .huone:nth-child(n+4) .huone__kuva { aspect-ratio: 4 / 5; }
  /* Radalla kortti ei saa liikkua pystysuunnassa esiintulossa: pyyhkaisyn
     aikana se nayttaisi karkaavan radalta. */
  html.js:not(.reduced) .huoneet .esiin,
  html.js:not(.reduced) .huoneet .esiin.on-sisalla { transform: none; }
}

@media (max-width: 480px) {
  .evaste__napit { grid-template-columns: 1fr; }
  .evaste__napit .btn { font-size: 0.8125rem; }
  .luvut { grid-template-columns: 1fr; gap: 20px; }
}

/* Matala mutta levea ruutu, esimerkiksi 1366x768: hero ei saa vieda koko
   nakyman korkeutta niin, etta faktarivi jaa taitteen alle. */
@media (min-width: 961px) and (max-height: 820px) {
  :root { --fs-h1: clamp(2.75rem, 5.4vw, 4.75rem); }
  .hero { min-height: 100svh; }
  .hero__rivi { margin-top: 20px; }
}

@media print {
  .nav, .valikko, .evaste, .hero__tausta { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .footer, .pinta--tumma { background: #fff !important; color: #000 !important; }
}

/* 14 PIIRROSKARTTA ------------------------------------------------------ */
/* Kartta on kasin piirretty vektori, ei kuva: se perii sivun fontit ja
   varit, joten sama piirros toimii seka vaalealla etta tummalla pinnalla
   ja pysyy teravana kaikilla naytoilla. Suunnat ovat oikeat, etaisyydet
   tiivistetyt kuten kuvitetuissa kartoissa. */
/* Yhteystiedoissa kartta on samassa rivissa tietolistan kanssa: pidetaan
   se suunnilleen listan korkuisena, jotta palstat ovat tasapainossa. */
.kartta-kehys { width: 100%; max-width: 400px; margin-inline: auto; }
.kartta { display: block; width: 100%; height: auto;
  color: var(--kartta-muste); background: var(--kartta-pohja); }
.kartta .muste { fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.kartta .muste--vahva { stroke-width: 2.6; }
.kartta .muste--ohut { stroke-width: 1.25; opacity: 0.72; }
.kartta .pelto .muste--ohut { opacity: 0.4; }
.kartta .joki .muste--ohut { opacity: 0.55; }
.kartta .maisema { opacity: 0.85; }
.kartta .polku { fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-dasharray: 2.5 8; stroke-linecap: round; opacity: 0.8; }
.kartta .nuoli { fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; }
.kartta .kehys { fill: none; stroke: currentColor; stroke-width: 2.1; opacity: 0.75; }
.kartta .kehys--ohut { stroke-width: 1.2; opacity: 0.45; }
/* Tekstien ympari sama vari kuin pohja, jotta nimet lukevat viivojen paalla. */
.kartta text { fill: currentColor; stroke: var(--kartta-pohja); stroke-width: 6;
  paint-order: stroke fill; }
.kartta__teksti { font-family: var(--kartta-font-teksti); font-size: 21px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.kartta__teksti--pieni { font-size: 17px; letter-spacing: 0.1em; opacity: 0.72; }
.kartta__teksti--vesi { font-size: 22px; letter-spacing: 0.24em; opacity: 0.78; }
.kartta__teksti--ilma { font-size: 24px; letter-spacing: 0.1em; }
.kartta__nimi { font-family: var(--kartta-font-nimi); font-size: 36px; }
.kartta__nimi--iso { font-size: 50px; }
.kartta .merkki { display: none; }
.kartta .merkki__keha { fill: none; stroke: var(--kartta-aks); stroke-width: 2.2;
  stroke-dasharray: 2.5 10; opacity: 0.85; }
.kartta .kompassi__pohjoinen { fill: var(--kartta-aks); stroke: var(--kartta-aks);
  stroke-width: 1; }
/* Kapealla naytolla piirros kutistuu noin 350 px:iin, jolloin 21 px:n
   nimikilvet olisivat 8 px. Kasvatetaan tekstit ja viivat suhteessa
   piirrokseen, jotta kartta pysyy luettavana myos puhelimessa. */
@media (max-width: 700px) {
  .kartta__teksti { font-size: 28px; letter-spacing: 0.1em; }
  .kartta__teksti--pieni { font-size: 22px; letter-spacing: 0.06em; }
  .kartta__teksti--vesi { font-size: 27px; letter-spacing: 0.16em; }
  .kartta__teksti--ilma { font-size: 30px; }
  .kartta__nimi { font-size: 42px; }
  .kartta__nimi--iso { font-size: 58px; }
  .kartta .muste { stroke-width: 2.4; }
  .kartta .muste--vahva { stroke-width: 3.2; }
  .kartta .muste--ohut { stroke-width: 1.6; }
  .kartta text { stroke-width: 7; }
}
.kartta-kehys {
  --kartta-pohja: var(--paperi-2);
  --kartta-muste: var(--t-muste);
  --kartta-aks: var(--savi);
  --kartta-font-teksti: var(--font-body);
  --kartta-font-nimi: var(--font-display);
}
.pinta--tumma .kartta-kehys {
  --kartta-pohja: var(--muste-2);
  --kartta-muste: var(--t-paperi);
  --kartta-aks: var(--savi-vaalea);
}
.kartta--hotelli .merkki--hotelli { display: block; }

/* Muut kohteemme -lohko footerissa: Harri 30.9.2026 pyysi, etta sivuilla
   nakyy talojen kuuluvan samaan kokonaisuuteen. Harrin oma sana on
   "kokonaisuus", ei "perhe". */
.footer__muut-otsikko {
  margin-top: 28px; font-family: var(--font-body); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t-paperi-2);
}

/* -------------------------------------------------------------------------
   Filmi: katsottava pystyvideo (Satunnainen Seikkailija). Kapea tarkoituksella,
   lähde on 9:16 puhelinvideo eikä sitä venytetä leveäksi.
   ------------------------------------------------------------------------- */
.filmi { position: relative; width: min(100%, 352px); margin: 0; overflow: hidden; border-radius: var(--pyoristys, 0); background: #1b1512; }
/* height: auto on pakollinen: <video>:n height-attribuutti on esitysvihje,
   joka voittaisi aspect-ration ja venyttäisi kuvan 1280 px korkeaksi. */
.filmi__v { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #1b1512; }
.filmi__play {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(rgba(27,21,18,.12), rgba(27,21,18,.5));
  border: 0; cursor: pointer; color: #fbf8f3;
  font-family: inherit; font-weight: 600; font-size: 0.8125rem;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background 240ms ease;
}
.filmi.on .filmi__play { display: none; }
.filmi__play:hover { background: linear-gradient(rgba(27,21,18,.04), rgba(27,21,18,.42)); }
.filmi__ico {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--savi-syva); color: #fbf8f3; transition: transform 240ms ease;
}
.filmi__play:hover .filmi__ico { transform: scale(1.06); }
.filmi__ico svg { width: 24px; height: 24px; fill: currentColor; }
.filmi__txt { display: grid; gap: 4px; text-align: center; }
.filmi__txt small { font-size: 0.6875rem; opacity: .76; letter-spacing: .06em; }
.filmi__play:focus-visible { outline: 2px solid #fbf8f3; outline-offset: -6px; }
.filmi-split { display: grid; grid-template-columns: minmax(0, 352px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 860px) {
  .filmi-split { grid-template-columns: minmax(0, 1fr); }
  .filmi { width: min(100%, 320px); margin-inline: auto; }
}
/* Tekstihierarkia: otsikko -> ingressi 20 px, ingressi -> krediitti 26 px.
   Ilman naita h2 ja lead istuvat kiinni toisissaan. */
.filmi-split h2 { margin: 0 0 20px; }
.filmi-split .lead { margin: 0 0 26px; }
.filmi-krediitti { margin: 0; font-size: 0.875rem; opacity: .68; }

/* Korjaamo Lounge kahdesta suunnasta. Tiki-Loungen tekoalykuva
   poistettiin ja lounge jai yksin; pari kertoo tilan paremmin kuin
   yksi rajattu kuva ja tayttaa osion pohjan. */
.kuvapari {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
}
.kuvapari figure { margin: 0; }
@media (max-width: 760px) {
  .kuvapari { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 5vw, 32px); }
}
/* Kuvateksti nimeaa tilan ja tayttaa kuvan alle jaaneen tyhjan. */
.kuva__teksti { margin-top: 14px; font-size: 0.875rem; color: var(--bone-dim, #8a8278); text-align: center; }
.mt-72 { margin-top: clamp(44px, 6vw, 72px); }
/* Osion alareuna tiukemmaksi, koska kuva paattaa sen. */
#tilat { padding-bottom: clamp(2.5rem, 4vw, 4rem); }