/* ==========================================================================
   Suviranta — tyylit
   Värit julkisivukyltistä: tervattu hirsi, messinki, kalkkikivi, järvi.
   Typografia: Sorts Mill Goudy (otsikot) + Instrument Sans (leipäteksti).
   ========================================================================== */

/* Fontit palvelimelta itseltään – ei kutsuja Googlelle ennen suostumusta. */
@font-face { font-family: "Sorts Mill Goudy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/sorts-mill-goudy-400.woff2") format("woff2"); }
@font-face { font-family: "Sorts Mill Goudy"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/sorts-mill-goudy-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-var.woff2") format("woff2"); }

:root {
  --terva: #1c1c1b;
  --terva-2: #252523;
  --lauta: #2f2e2b;
  --messinki: #b08f5a;
  --messinki-vaalea: #d2b98c;
  --kalkki: #eeeae2;
  --kalkki-2: #e4ded2;
  --jarvi: #c6d3d2;
  --jarvi-tumma: #8fa6a5;
  --sammal: #4a6352;
  --muste: #ebe7de;        /* leipäteksti tummalla */
  --muste-2: #aaa59c;      /* toissijainen teksti */
  --hiili: #0b0b0a;        /* syvin pohja */
  --viiva: rgba(235,231,222,.14);
  --lamppu: 236,170,92;    /* lämmin valo rgb-arvoina */

  --otsikko: "Sorts Mill Goudy", "Goudy Old Style", Georgia, serif;
  --teksti: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --leveys: 1240px;
  --kapea: 700px;
  --ylapalkki: 132px;
  --liuku: cubic-bezier(.2, .7, .25, 1);

  /* Värikonteksti: oletuksena tumma (musta hirsi). Vaaleat osiot vaihtavat
     nämä muuttujat, jolloin samat komponentit toimivat molemmilla pohjilla. */
  --c-otsikko: var(--kalkki);
  --c-teksti: var(--muste);
  --c-teksti-2: var(--muste-2);
  --c-johdanto: rgba(235,231,222,.8);
  --c-linkki: var(--kalkki);
  --c-korostus: var(--messinki);
  --c-merkki: rgba(238,234,226,.62);
  --c-viiva: rgba(235,231,222,.14);
  --c-nappi-reuna: rgba(238,234,226,.55);
  --c-kaanteinen: var(--terva);
  --c-kentta: rgba(8,8,7,.62);
  --c-kentta-reuna: rgba(235,231,222,.22);
  --c-skeema: dark;
}

/* Vaalea konteksti: kalkki- ja järviosiot (raikkaus mustan hirren vastapainoksi) */
.vaalea,
.osio--kalkki,
.osio--jarvi {
  --c-otsikko: #1c1c1b;
  --c-teksti: #2d2c29;
  --c-teksti-2: #66625b;
  --c-johdanto: #4b4843;
  --c-linkki: #1c1c1b;
  --c-korostus: #9a7743;
  --c-merkki: rgba(28,28,27,.58);
  --c-viiva: rgba(28,28,27,.13);
  --c-nappi-reuna: rgba(28,28,27,.45);
  --c-kaanteinen: var(--kalkki);
  --c-kentta: #fbfaf7;
  --c-kentta-reuna: rgba(28,28,27,.2);
  --c-skeema: light;
  color: var(--c-teksti);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--hiili);
  background-image: url("../img/hirsi.webp");
  background-size: 1600px auto;
  background-position: center top;
  color: var(--c-teksti);
  font-family: var(--teksti);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--otsikko);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--c-otsikko);
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }
h4 { font-size: 1.15rem; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--c-korostus); }

p { margin: 0 0 1.1em; max-width: 60ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-linkki); text-decoration-color: var(--messinki); text-underline-offset: 4px; }
a:hover { color: var(--messinki-vaalea); }

:focus-visible { outline: 2px solid var(--messinki); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Pohjat
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 3rem, var(--leveys)); margin-inline: auto; }
.kapea { width: min(100% - 3rem, var(--kapea)); margin-inline: auto; }
.kapea--leve { width: min(100% - 3rem, 980px); }

/* Musta hirsiseinä (tools/hirsi/tee-hirsi.mjs) on koko sivun pohja bodyssa.
   .lauta-osiot näyttävät sen täydessä iltavalossa; laatikot piirtävät oman. */
@media (max-width: 700px) {
  body { background-size: 1150px auto; }
}
.lauta { color: var(--kalkki); }
.lauta h1, .lauta h2, .lauta h3, .lauta h4 { color: var(--kalkki); }
.lauta a { color: var(--kalkki); }
.lauta a:hover { color: var(--messinki-vaalea); }

.osio { position: relative; isolation: isolate; padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.osio--tiivis { padding: clamp(3rem, 5.5vw, 5rem) 0; }

/* Pinnat piirretään ::before-kerrokseen, jotta hirsiseinä jatkuu saumatta
   osiosta toiseen ja vain valo ja sävy vaihtuvat. */
.osio::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Perusosio: hirsi himmennettynä, jotta pitkä teksti lukee rauhassa */
.osio::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--lamppu), .07), transparent 70%),
    linear-gradient(rgba(8,8,7,.48), rgba(8,8,7,.48));
}

/* Hirsiosio: musta hirsi täydessä iltavalossa, kuin terassin lyhdyt */
.osio.lauta::before {
  background:
    radial-gradient(ellipse 55% 75% at 14% 0%, rgba(var(--lamppu), .17), transparent 68%),
    radial-gradient(ellipse 40% 55% at 96% 100%, rgba(var(--lamppu), .09), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.08) 20%, rgba(0,0,0,.08) 80%, rgba(0,0,0,.55) 100%);
}

/* Saunapaneeli: musta paneeli ja lämmin LED-nauha yläreunassa (Sihauksen sauna) */
.osio--sauna::before {
  background:
    linear-gradient(to bottom, rgba(var(--lamppu), .2) 0, rgba(var(--lamppu), .05) 110px, transparent 320px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 132px),
    linear-gradient(#0e0e0d, #0b0b0a);
  border-top: 1px solid rgba(var(--lamppu), .7);
  box-shadow: 0 -10px 34px -6px rgba(var(--lamppu), .4);
}

/* Ranta: Suvirannan oma ranta ja tyyni vesi, vasemmalta tummennettu tekstille */
.osio--ranta::before {
  background:
    linear-gradient(90deg, rgba(14,14,13,.9) 0%, rgba(14,14,13,.74) 55%, rgba(14,14,13,.42) 100%),
    url("../img/foto/ranta-portaat.jpg") 72% 42% / cover no-repeat;
}

/* Kalkki: julkisivun patsaiden kalkinvalkoinen, lämmin ja valoisa */
.osio--kalkki::before {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(#f4f0e8, #ede8de);
}

/* Järvi: kyltin penkin vaaleansininen, raikas kuin kesäaamu rannassa */
.osio--jarvi::before {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255,255,255,.5), transparent 70%),
    linear-gradient(#e3eae8, #d6e0de);
}

.merkki {
  font-family: var(--teksti);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-merkki);
  margin: 0 0 1.2rem;
}

.johdanto {
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.6;
  color: var(--c-johdanto);
  max-width: 46ch;
}
.lauta .johdanto { color: rgba(238,234,226,.78); }

.otsake { max-width: 50rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.otsake--keski { margin-inline: auto; text-align: center; }
.otsake--keski p { margin-inline: auto; }


/* --------------------------------------------------------------------------
   Painikkeet
   -------------------------------------------------------------------------- */

.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--teksti);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .25s var(--liuku), color .25s var(--liuku), border-color .25s var(--liuku);
}
.nappi--messinki { background: var(--messinki); border-color: var(--messinki); color: var(--terva); }
.nappi--messinki:hover { background: var(--messinki-vaalea); border-color: var(--messinki-vaalea); color: var(--terva); }
.nappi--viiva { background: none; border-color: var(--c-nappi-reuna); color: var(--c-linkki); }
.nappi--viiva:hover { background: var(--c-otsikko); border-color: var(--c-otsikko); color: var(--c-kaanteinen); }
.lauta .nappi--viiva, .sankari .nappi--viiva { color: var(--kalkki); border-color: rgba(238,234,226,.55); }
.lauta .nappi--viiva:hover, .sankari .nappi--viiva:hover { background: var(--kalkki); color: var(--terva); border-color: var(--kalkki); }
.nappi--pieni { padding: .75rem 1.25rem; font-size: .68rem; }

.napit { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.napit--keski { justify-content: center; }

.linkki {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-linkki);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--messinki);
}
.linkki::after { content: "→"; transition: transform .25s var(--liuku); }
.linkki:hover { color: var(--messinki-vaalea); }
.linkki:hover::after { transform: translateX(4px); }
.lauta .linkki { color: var(--kalkki); }

/* --------------------------------------------------------------------------
   Ylätunniste: kyltti laudalla
   -------------------------------------------------------------------------- */

.ylatunniste {
  position: relative;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(5,5,4,.62), rgba(5,5,4,.3));
  border-bottom: 1px solid rgba(176,143,90,.35);
}

.ylatunniste__kyltti {
  width: min(100% - 3rem, var(--leveys));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0 1.1rem;
}
.ylatunniste__sijainti {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(238,234,226,.6);
}
.logo { display: block; line-height: 0; }
.logo img { width: clamp(190px, 22vw, 290px); height: auto; }
.ylatunniste__oikea { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }

.nav { border-top: 1px solid rgba(176,143,90,.22); }
.nav__lista {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .2rem 2.4rem;
  list-style: none;
  margin: 0;
  padding: .85rem 1.5rem;
}
.nav__linkki {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(238,234,226,.82);
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--liuku), border-color .2s var(--liuku);
}
.nav__linkki:hover { color: var(--messinki-vaalea); }
.nav__mobiili { display: none; }
.nav__linkki[aria-current="page"] { color: var(--messinki-vaalea); border-bottom-color: var(--messinki); }

.nav-avaa {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(176,143,90,.5);
  cursor: pointer;
}
.nav-avaa__viivat, .nav-avaa__viivat::before, .nav-avaa__viivat::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--messinki-vaalea);
  transition: transform .25s var(--liuku), background-color .25s var(--liuku);
}
.nav-avaa__viivat { position: relative; }
.nav-avaa__viivat::before, .nav-avaa__viivat::after { content: ""; position: absolute; left: 0; }
.nav-avaa__viivat::before { transform: translateY(-6px); }
.nav-avaa__viivat::after { transform: translateY(6px); }
.nav-avaa[aria-expanded="true"] .nav-avaa__viivat { background: transparent; }
.nav-avaa[aria-expanded="true"] .nav-avaa__viivat::before { transform: rotate(45deg); }
.nav-avaa[aria-expanded="true"] .nav-avaa__viivat::after { transform: rotate(-45deg); }

@media (max-width: 900px) {
  .ylatunniste__kyltti { grid-template-columns: auto 1fr; padding: 1rem 0; }
  .ylatunniste__sijainti { display: none; }
  .logo img { width: 180px; }
  .ylatunniste__oikea .nappi { display: none; }
  .nav-avaa { display: flex; }
  .nav { display: none; border-top: 1px solid rgba(176,143,90,.22); }
  .nav[data-open="true"] { display: block; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.5rem 1.5rem; }
  .nav__linkki { display: block; padding: 1rem 0; font-size: .8rem; border-bottom: 1px solid rgba(238,234,226,.08); }
  .nav__linkki[aria-current="page"] { border-bottom-color: rgba(238,234,226,.08); }
  .nav__mobiili { display: list-item; }
}

.ohita {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--messinki);
  color: var(--terva);
  padding: .75rem 1.25rem;
}
.ohita:focus { top: .75rem; }

/* --------------------------------------------------------------------------
   Sankarikuva
   -------------------------------------------------------------------------- */

.sankari {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--terva);
  color: var(--kalkki);
  padding: clamp(5rem, 11vw, 9rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.sankari__kuva {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sankari::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(28,28,27,.92) 0%, rgba(28,28,27,.45) 48%, rgba(28,28,27,.25) 100%),
    linear-gradient(to right, rgba(28,28,27,.72) 0%, rgba(28,28,27,0) 62%);
}
.sankari h1 { color: var(--kalkki); }
.sankari .johdanto { color: rgba(238,234,226,.86); }
.sankari .merkki { color: var(--messinki-vaalea); }

.sankari__asettelu {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: end;
}
@media (max-width: 900px) { .sankari__asettelu { grid-template-columns: minmax(0, 1fr); } }

.sankari--sivu { padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 5vw, 4.25rem); }
.sankari--sivu h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); max-width: 16ch; }

/* --------------------------------------------------------------------------
   Valokyltti
   Tila vaihdetaan etusivulla: data-tila="avoinna" | "suljettu" | "yksityistilaisuus"
   -------------------------------------------------------------------------- */

.valokyltti {
  position: relative;
  padding: 2.1rem 2rem 1.9rem;
  text-align: center;
  /* Musta kyltti messinkireunalla */
  border: 1px solid var(--messinki);
  background:
    linear-gradient(rgba(9,9,8,.82), rgba(9,9,8,.82)),
    url("../img/hirsi.webp") center / 900px auto;
  box-shadow: 0 34px 70px -18px rgba(0,0,0,.85);
}
.valokyltti__otsikko {
  margin: 0 0 .9rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(238,234,226,.55);
}
.valokyltti__tila { display: none; }
.valokyltti[data-tila="avoinna"] [data-nayta="avoinna"],
.valokyltti[data-tila="suljettu"] [data-nayta="suljettu"],
.valokyltti[data-tila="yksityistilaisuus"] [data-nayta="yksityistilaisuus"],
.valokyltti[data-tila="ajankohtaista"] [data-nayta="ajankohtaista"] { display: block; }

.valokyltti__sana {
  margin: 0 auto;
  max-width: none;
  font-family: var(--otsikko);
  font-style: normal;
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: .01em;
}
.valokyltti__lisa {
  margin: 1rem auto 0;
  max-width: 30ch;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(238,234,226,.74);
}

/* Avoinna: lämmin messinkineon */
[data-nayta="avoinna"] .valokyltti__sana {
  color: #fff3dc;
  text-shadow:
    0 0 4px rgba(255,236,200,.9),
    0 0 14px rgba(245,190,110,.85),
    0 0 34px rgba(230,150,70,.6),
    0 0 70px rgba(220,130,60,.35);
  animation: hehku 5s ease-in-out infinite;
}
/* Suljettu: sammunut putki */
[data-nayta="suljettu"] .valokyltti__sana {
  color: rgba(210,185,140,.46);
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.06);
}
/* Yksityistilaisuus: viileä järvenvalo */
[data-nayta="yksityistilaisuus"] .valokyltti__sana {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  color: #eefafa;
  text-shadow:
    0 0 4px rgba(230,250,250,.9),
    0 0 14px rgba(160,215,215,.8),
    0 0 34px rgba(120,190,195,.55),
    0 0 70px rgba(100,170,180,.3);
}
.valokyltti::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 64px;
  height: 1px;
  transform: translateX(-50%);
  background: var(--messinki-vaalea);
}

@keyframes hehku {
  0%, 100% { opacity: 1; }
  46% { opacity: 1; }
  48% { opacity: .82; }
  50% { opacity: 1; }
  52% { opacity: .9; }
  54% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Ajankohtaista
   -------------------------------------------------------------------------- */

.ajankohtaista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--c-viiva);
}
.ajankohtaista__kohta {
  padding: 2rem 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ajankohtaista__kohta + .ajankohtaista__kohta { padding-left: 2rem; border-left: 1px solid var(--c-viiva); }
.ajankohtaista__aika {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-merkki);
}
.ajankohtaista__kohta h3 { margin-bottom: .35rem; }
.ajankohtaista__kohta p { font-size: .96rem; color: var(--c-teksti-2); }
.ajankohtaista__kohta .linkki { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) {
  .ajankohtaista { grid-template-columns: minmax(0, 1fr); }
  .ajankohtaista__kohta, .ajankohtaista__kohta + .ajankohtaista__kohta {
    padding: 1.75rem 0; border-left: 0; border-bottom: 1px solid var(--c-viiva);
  }
}

/* --------------------------------------------------------------------------
   Kuvalaatat (yleiskuva)
   -------------------------------------------------------------------------- */

.laatat {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}
.laatta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-column: span 2;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
  color: var(--kalkki);
  text-decoration: none;
  background: var(--terva);
}
.laatta--iso { grid-column: span 3; min-height: 460px; }
.laatta img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--liuku);
}
.laatta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(28,28,27,.88) 0%, rgba(28,28,27,.15) 60%);
}
.laatta:hover img { transform: scale(1.04); }
.laatta__merkki {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--messinki-vaalea);
  margin: 0 0 .5rem;
}
.laatta h3 { color: var(--kalkki); margin: 0 0 .35rem; }
.laatta p { font-size: .92rem; color: rgba(238,234,226,.78); margin: 0; }
.laatta:hover { color: var(--kalkki); }
.laatta:hover h3 { color: var(--messinki-vaalea); }
@media (max-width: 960px) {
  .laatat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laatta, .laatta--iso { grid-column: span 1; min-height: 320px; }
  .laatta--iso:first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .laatat { grid-template-columns: minmax(0, 1fr); }
  .laatta, .laatta--iso, .laatta--iso:first-child { grid-column: span 1; min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Jaettu asettelu: kuva + teksti
   -------------------------------------------------------------------------- */

.jako {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.jako--kaanna .jako__kuva { order: 2; }
@media (max-width: 860px) {
  .jako { grid-template-columns: minmax(0, 1fr); }
  .jako--kaanna .jako__kuva { order: 0; }
}
.jako__kuva { margin: 0; position: relative; }
.jako__kuva img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.jako__kuva--leve img { aspect-ratio: 4 / 3; }
.jako__kuva img { box-shadow: 0 24px 50px -20px rgba(0,0,0,.75); }
.jako__kuva figcaption {
  margin-top: 1.1rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-teksti-2);
}
.lauta .jako__kuva figcaption { color: rgba(238,234,226,.55); }

.kaista img { width: 100%; height: clamp(300px, 56vh, 620px); object-fit: cover; }

.kuvarivi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.kuvarivi img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 700px) { .kuvarivi { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Listat
   -------------------------------------------------------------------------- */

.ominaisuudet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.ominaisuudet--yksi { grid-template-columns: minmax(0, 1fr); }
.ominaisuudet li {
  padding: 1rem 0;
  border-top: 1px solid var(--c-viiva);
  font-size: .95rem;
  color: var(--c-teksti-2);
}
.ominaisuudet b {
  display: block;
  font-family: var(--otsikko);
  font-weight: 400;
  font-size: 1.22rem;
  color: var(--c-otsikko);
  margin-bottom: .1rem;
}
.lauta .ominaisuudet li { border-top-color: rgba(238,234,226,.14); color: rgba(238,234,226,.7); }
.lauta .ominaisuudet b { color: var(--kalkki); }
@media (max-width: 640px) { .ominaisuudet { grid-template-columns: minmax(0, 1fr); } }

/* Isot numerot (kapasiteetit ym.) */
.luvut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid rgba(176,143,90,.4);
  border-bottom: 1px solid rgba(176,143,90,.4);
}
.luku { padding: 2rem 1.25rem; text-align: center; }
.luku + .luku { border-left: 1px solid rgba(176,143,90,.25); }
.luku b {
  display: block;
  font-family: var(--otsikko);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1;
  color: var(--c-merkki);
  font-variant-numeric: lining-nums tabular-nums;
}
.luku span {
  display: block;
  margin-top: .7rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-teksti-2);
}
.lauta .luku span { color: rgba(238,234,226,.62); }
@media (max-width: 640px) { .luku + .luku { border-left: 0; border-top: 1px solid rgba(176,143,90,.25); } }

/* --------------------------------------------------------------------------
   Ruokalista
   -------------------------------------------------------------------------- */

.ryhma + .ryhma { margin-top: 3.25rem; }
.ryhma__otsikko {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--messinki);
}
.ryhma__otsikko h3 { margin: 0; }
.ryhma__otsikko span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-teksti-2); }
.annokset { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.annos { display: flex; align-items: baseline; gap: 1rem; padding: .95rem 0; }
.annos + .annos { border-top: 1px dotted rgba(235,231,222,.2); }
.annos__teksti { flex: 1; }
.annos__nimi { font-family: var(--otsikko); font-size: 1.22rem; color: var(--c-otsikko); margin: 0; }
.annos__kuvaus { margin: .1rem 0 0; font-size: .92rem; color: var(--c-teksti-2); }
.annos__hinta {
  font-family: var(--otsikko);
  font-size: 1.15rem;
  color: var(--c-merkki);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.huomio {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-viiva);
  font-size: .88rem;
  color: var(--c-teksti-2);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Tapahtumakalenteri
   -------------------------------------------------------------------------- */

.kalenteri { list-style: none; margin: 0; padding: 0; }
.kalenteri__kausi {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-merkki);
  margin: 3.5rem 0 0;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--messinki);
}
.kalenteri__kausi:first-child { margin-top: 0; }
.tapahtuma {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: baseline;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--c-viiva);
}
.tapahtuma__aika { font-family: var(--otsikko); font-size: 1.5rem; line-height: 1.1; color: var(--c-otsikko); }
.tapahtuma__aika small {
  display: block;
  margin-top: .35rem;
  font-family: var(--teksti);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-teksti-2);
}
.tapahtuma h3 { margin: 0 0 .3rem; }
.tapahtuma p { margin: 0; font-size: .95rem; color: var(--c-teksti-2); }
.tapahtuma__paikka {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-merkki);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .tapahtuma { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

/* --------------------------------------------------------------------------
   Vaiheet (juhlat)
   -------------------------------------------------------------------------- */

.vaiheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: vaihe;
}
.vaiheet li { counter-increment: vaihe; border-top: 1px solid rgba(176,143,90,.5); padding-top: 1.25rem; }
.vaiheet li::before {
  content: counter(vaihe);
  display: block;
  font-family: var(--otsikko);
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--c-merkki);
  margin-bottom: .8rem;
}
.vaiheet b { display: block; font-family: var(--otsikko); font-weight: 400; font-size: 1.25rem; color: var(--c-otsikko); margin-bottom: .35rem; }
.vaiheet span { font-size: .92rem; color: var(--c-teksti-2); }
@media (max-width: 900px) { .vaiheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vaiheet { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Yhteystiedot & lomake
   -------------------------------------------------------------------------- */

.yhteys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 860px) { .yhteys { grid-template-columns: minmax(0, 1fr); } }

.tiedot { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.tiedot__nimi {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-merkki);
  margin-bottom: .25rem;
}
.tiedot__arvo { font-family: var(--otsikko); font-size: 1.3rem; color: var(--c-otsikko); }
.tiedot a { text-decoration: none; }

.ajat { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ajat th, .ajat td { padding: .75rem 0; border-bottom: 1px solid rgba(238,234,226,.12); }
.ajat th { text-align: left; font-weight: 400; color: rgba(238,234,226,.7); }
.ajat td { text-align: right; color: var(--kalkki); font-variant-numeric: tabular-nums; }
.ajat tr:last-child th, .ajat tr:last-child td { border-bottom: 0; }
.laatikko { padding: 2.25rem; }
.laatikko.lauta {
  position: relative;
  border: 1px solid rgba(176,143,90,.6);
  background:
    linear-gradient(rgba(9,9,8,.74), rgba(9,9,8,.74)),
    url("../img/hirsi.webp") center / 1200px auto;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
}

.lomake { display: grid; gap: 1.3rem; }
.kentta { display: grid; gap: .45rem; }
.kentta label { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-otsikko); }
.kentta .vihje { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .86rem; color: var(--c-teksti-2); }
.kentta input, .kentta select, .kentta textarea {
  font: inherit;
  width: 100%;
  padding: .9rem 1rem;
  background: var(--c-kentta);
  color: var(--c-otsikko);
  color-scheme: var(--c-skeema);
  border: 1px solid var(--c-kentta-reuna);
  border-radius: 0;
  transition: border-color .2s var(--liuku), box-shadow .2s var(--liuku);
}
.kentta textarea { min-height: 150px; resize: vertical; }
.kentta input:focus, .kentta select:focus, .kentta textarea:focus {
  outline: none;
  border-color: var(--messinki);
  box-shadow: 0 0 0 3px rgba(176,143,90,.2);
}
.rivi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
@media (max-width: 560px) { .rivi { grid-template-columns: minmax(0, 1fr); } }
.suostumus { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--c-teksti-2); }
.suostumus input { width: auto; margin-top: .35rem; accent-color: var(--messinki); }
.form__status { padding: 1rem 1.25rem; font-size: .92rem; }
.form__status[data-state="success"] { background: rgba(74,99,82,.28); border-left: 2px solid #8fb59a; color: #cfe2d4; }
.form__status[data-state="error"] { background: rgba(176,143,90,.16); border-left: 2px solid var(--messinki); color: var(--messinki-vaalea); }
.honeypot { position: absolute; left: -9999px; opacity: 0; }

.kartta { position: relative; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.kartta iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }
.kartta__kansi.lauta {
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, rgba(var(--lamppu), .14), transparent 70%),
    linear-gradient(rgba(8,8,7,.55), rgba(8,8,7,.55)),
    url("../img/hirsi.webp") center / 1200px auto;
  box-shadow: inset 0 0 0 1px rgba(176,143,90,.4);
}
.kartta__kansi {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .25rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  color: var(--kalkki);
}
.kartta__kansi p { margin: 0; }
.kartta__osoite { font-family: var(--otsikko); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; margin-bottom: .75rem !important; }
.kartta__kansi .linkki { color: var(--messinki-vaalea); }
.kartta__huomio { font-size: .8rem; opacity: .7; margin-top: .75rem !important; max-width: 30em; }
.kartta.on-ladattu .kartta__kansi { display: none; }

/* --------------------------------------------------------------------------
   Kehotus & alatunniste
   -------------------------------------------------------------------------- */

.kehotus {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0;
  color: var(--kalkki);
}
.kehotus img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kehotus::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28,28,27,.8); }
.kehotus h2 { color: var(--kalkki); }
.kehotus p { margin-inline: auto; max-width: 46ch; color: rgba(238,234,226,.8); }

.alatunniste {
  position: relative;
  padding: clamp(4rem, 7vw, 6rem) 0 2rem;
  font-size: .92rem;
  color: rgba(238,234,226,.66);
  background: linear-gradient(to bottom, rgba(5,5,4,.35), rgba(5,5,4,.78));
}
/* Lämmin LED-nauha alatunnisteen yläreunassa, kuten Sihauksen saunassa */
.alatunniste::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--lamppu), .85) 20%, rgba(var(--lamppu), .85) 80%, transparent);
  box-shadow: 0 0 26px 3px rgba(var(--lamppu), .35);
}
.alatunniste a { color: rgba(238,234,226,.72); text-decoration: none; }
.alatunniste a:hover { color: var(--messinki-vaalea); }
.alatunniste__yla { text-align: center; padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(176,143,90,.25); }
.alatunniste__yla img { width: min(320px, 70vw); margin: 0 auto 1.2rem; }
.alatunniste__yla p { margin: 0 auto; max-width: 44ch; }
.alatunniste__ruudukko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
@media (max-width: 760px) { .alatunniste__ruudukko { grid-template-columns: minmax(0, 1fr); } }
.alatunniste h4 {
  font-family: var(--teksti);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--messinki);
  margin-bottom: 1rem;
}
.alatunniste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.alatunniste__ala {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(238,234,226,.1);
  font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   WordPress-sovitus
   Sivujen sisältö on WordPressin ydinlohkoja (ryhmä, kansikuva, kuva,
   painikkeet, lista). Nämä säännöt sovittavat ne samaan ulkoasuun.
   ========================================================================== */

/* Nollaukset :where()-valitsimella, jotta komponenttien omat välit voittavat. */
.wp-site-blocks { padding: 0; }
:where(.wp-site-blocks, .wp-block-post-content, .sivu) > * { margin-block: 0; }
:where(.wp-block-group) { margin-block: 0; }
:where(figure.wp-block-image) { margin: 0; }
.wp-block-image img { display: block; width: 100%; height: auto; }

.otsake--viimeinen { margin-bottom: 0; }


/* Kansikuvalohkot: sankari, kehotus, laatta */
.wp-block-cover.sankari,
.wp-block-cover.kehotus,
.wp-block-cover.laatta { min-height: 0; }
.wp-block-cover.sankari::before,
.wp-block-cover.kehotus::before,
.wp-block-cover.laatta::before { content: none; }
.wp-block-cover.sankari,
.wp-block-cover.kehotus { display: block; }
.wp-block-cover.sankari { padding: clamp(5rem, 11vw, 9rem) 0 clamp(3.5rem, 6vw, 5rem); }
.wp-block-cover.sankari--sivu { padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 5vw, 4.25rem); }
.wp-block-cover.kehotus { padding: clamp(5rem, 10vw, 8rem) 0; }
.wp-block-cover .wp-block-cover__inner-container { width: 100%; }

.wp-block-cover.sankari > .wp-block-cover__background {
  opacity: 1 !important;
  background:
    linear-gradient(to top, rgba(28,28,27,.92) 0%, rgba(28,28,27,.45) 48%, rgba(28,28,27,.25) 100%),
    linear-gradient(to right, rgba(28,28,27,.72) 0%, rgba(28,28,27,0) 62%) !important;
}
.wp-block-cover.kehotus > .wp-block-cover__background {
  opacity: 1 !important;
  background: rgba(28,28,27,.8) !important;
}
.wp-block-cover.laatta > .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(to top, rgba(28,28,27,.88) 0%, rgba(28,28,27,.15) 60%) !important;
}

.wp-block-cover.sankari h1,
.wp-block-cover.kehotus h2,
.wp-block-cover.laatta h3 { color: var(--kalkki); }
.wp-block-cover p.merkki { color: var(--messinki); }
.wp-block-cover.sankari p.merkki,
.wp-block-cover.laatta p.laatta__merkki { color: var(--messinki-vaalea); }
.wp-block-cover.sankari p.johdanto { color: rgba(238,234,226,.86); }
.wp-block-cover.kehotus p:not(.merkki) { color: rgba(238,234,226,.8); }
.wp-block-cover.laatta p:not(.laatta__merkki) { color: rgba(238,234,226,.78); }

.wp-block-cover.laatta {
  min-height: 360px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  cursor: pointer;
}
.wp-block-cover.laatta--iso { min-height: 460px; }
.laatta .wp-block-cover__image-background { transition: transform 1.2s var(--liuku); }
.laatta:hover .wp-block-cover__image-background { transform: scale(1.04); }
.laatta h3 a { color: inherit; text-decoration: none; }
.laatta:hover h3 a { color: var(--messinki-vaalea); }
@media (max-width: 960px) {
  .wp-block-cover.laatta, .wp-block-cover.laatta--iso { min-height: 320px; }
}
@media (max-width: 600px) {
  .wp-block-cover.laatta, .wp-block-cover.laatta--iso { min-height: 300px; }
}

/* Painikkeet */
.wp-block-buttons.napit { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.wp-block-buttons.napit--keski { justify-content: center; }
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--teksti);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color .25s var(--liuku), color .25s var(--liuku), border-color .25s var(--liuku);
}
.wp-block-button.is-style-messinki .wp-block-button__link { background: var(--messinki); border-color: var(--messinki); color: var(--terva); }
.wp-block-button.is-style-messinki .wp-block-button__link:hover { background: var(--messinki-vaalea); border-color: var(--messinki-vaalea); color: var(--terva); }
.wp-block-button.is-style-viiva .wp-block-button__link { background: none; border-color: var(--c-nappi-reuna); color: var(--c-linkki); }
.wp-block-button.is-style-viiva .wp-block-button__link:hover { background: var(--c-otsikko); color: var(--c-kaanteinen); border-color: var(--c-otsikko); }
.lauta .wp-block-button.is-style-viiva .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-viiva .wp-block-button__link { color: var(--kalkki); border-color: rgba(238,234,226,.55); }
.lauta .wp-block-button.is-style-viiva .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-viiva .wp-block-button__link:hover { background: var(--kalkki); color: var(--terva); border-color: var(--kalkki); }

/* Listat: lihavoitu alku otsikoksi */
.ominaisuudet strong {
  display: block;
  font-family: var(--otsikko);
  font-weight: 400;
  font-size: 1.22rem;
  color: var(--c-otsikko);
  margin-bottom: .1rem;
}
.lauta .ominaisuudet strong { color: var(--kalkki); }
.vaiheet li { font-size: .92rem; color: var(--c-teksti-2); }
.vaiheet strong {
  display: block;
  font-family: var(--otsikko);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--c-otsikko);
  margin-bottom: .35rem;
}

/* Luvut */
.luku__numero {
  margin: 0;
  font-family: var(--otsikko);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1;
  color: var(--c-merkki);
  font-variant-numeric: lining-nums tabular-nums;
  max-width: none;
}
.luku__teksti {
  margin: .7rem 0 0;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-teksti-2);
  max-width: none;
}

/* Kuvariviin ja jaettuihin osioihin kuvat reunasta reunaan */

.laatikko__huomio { margin-top: 1.4rem; font-size: .9rem; color: rgba(238,234,226,.7); max-width: none; }

/* Editorissa dynaamiset lohkot eivät reagoi klikkauksiin */
.editor-styles-wrapper .valokyltti,
.editor-styles-wrapper .lomake { pointer-events: none; }

/* ==========================================================================
   Raikas Suviranta (1.3)
   Musta hirsi ja Sihauksen puu tunnelmana, vaaleat kalkki- ja järviosiot
   raikkautena. Rytmi ja keskitetyt johdannot Löylyn tapaan.
   ========================================================================== */

/* --- Ylätunniste: pikavaraus vasemmalla, kulkee mukana vierittäessä -------- */
.ylatunniste {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  transition: background-color .35s var(--liuku), box-shadow .35s var(--liuku);
}
.ylatunniste__kyltti { transition: padding .35s var(--liuku); }
.logo img { transition: width .35s var(--liuku); }
.ylatunniste.on-vieritetty {
  background: rgba(10,10,9,.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7);
}
.ylatunniste.on-vieritetty .ylatunniste__kyltti { padding: .7rem 0 .55rem; }
.ylatunniste.on-vieritetty .logo img { width: clamp(160px, 15vw, 200px); }
.ylatunniste.on-vieritetty .nav__lista { padding-block: .5rem; }

.ylatunniste__varaa {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--messinki-vaalea);
  line-height: 1.5;
}
.ylatunniste__varaa a { color: var(--kalkki); text-decoration: underline; text-decoration-color: rgba(176,143,90,.7); text-underline-offset: 5px; }
.ylatunniste__varaa a:hover { color: var(--messinki-vaalea); }
.ylatunniste__varaa span { color: rgba(238,234,226,.45); }
@media (max-width: 900px) { .ylatunniste__varaa { display: none; } }

/* Yhteystietorivi: puhelin ja sähköposti heti näkyvissä, myös puhelimella */
.ylatunniste__yhteys { background: rgba(5,5,4,.55); border-bottom: 1px solid rgba(176,143,90,.22); }
.ylatunniste__yhteys-sisus {
  width: min(100% - 3rem, var(--leveys));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .3rem 1.6rem;
  padding: .5rem 0;
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(238,234,226,.6);
}
.ylatunniste__yhteydet { display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; }
.ylatunniste__yhteys a { color: var(--kalkki); text-decoration: none; white-space: nowrap; transition: color .2s var(--liuku); }
.ylatunniste__yhteys a span { color: var(--messinki-vaalea); margin-right: .2rem; }
.ylatunniste__yhteys a:hover { color: var(--messinki-vaalea); }
@media (max-width: 700px) {
  .ylatunniste__osoite { display: none; }
  .ylatunniste__yhteys-sisus { justify-content: center; }
  .ylatunniste__yhteydet { justify-content: center; gap: .3rem 1.4rem; }
}
.nav__lista { transition: padding .35s var(--liuku); }

/* --- Keskitetty esittely (Löylyn tapaan): paljon tilaa, vähän tekstiä -------- */
.esittely { text-align: center; }
.esittely .otsake { margin-inline: auto; margin-bottom: 0; }
.esittely h2 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
.esittely .johdanto { margin-inline: auto; max-width: 52ch; }
.esittely .napit { justify-content: center; }

/* --- Kuvalaatat: keskitetty otsikko kuvan päällä --------------------------- */
.wp-block-cover.laatta,
.laatta {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.wp-block-cover.laatta > .wp-block-cover__background {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10,10,9,.55), rgba(10,10,9,.15) 75%),
    linear-gradient(to top, rgba(10,10,9,.45), transparent 50%) !important;
}
.wp-block-cover.laatta .wp-block-cover__inner-container { text-align: center; }
.laatta h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: 0; }
.laatta h3::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin: .9rem auto .8rem;
  background: var(--messinki-vaalea);
  transition: width .4s var(--liuku);
}
.laatta:hover h3::after { width: 84px; }
.laatta__merkki { margin-bottom: .7rem !important; }
.laatta p:not(.laatta__merkki) { max-width: 30ch; margin-inline: auto !important; }
.laatat { gap: 12px; }

/* --- Ajankohtaista kortteina ------------------------------------------------ */
.ajankohtaista { gap: 1.25rem; border-top: 0; }
.ajankohtaista__kohta,
.ajankohtaista__kohta + .ajankohtaista__kohta {
  padding: 2.1rem 2rem 2.2rem;
  border: 0;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--c-viiva);
}
.vaalea .ajankohtaista__kohta,
.osio--kalkki .ajankohtaista__kohta,
.osio--jarvi .ajankohtaista__kohta {
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 40px -26px rgba(28,28,27,.35);
}
.ajankohtaista__kohta .linkki { margin-top: 1.4rem; }
@media (max-width: 860px) {
  .ajankohtaista__kohta, .ajankohtaista__kohta + .ajankohtaista__kohta { padding: 1.75rem 1.5rem; }
}

/* --- Menu (Löylyn tapaan): keskitetyt ryhmät, annokset kahdessa sarakkeessa -- */
.ruokalista { text-align: center; }
.ryhma + .ryhma { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.ryhma__otsikko {
  display: block;
  text-align: center;
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.ryhma__otsikko h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-style: normal;
  color: var(--c-korostus);
}
.ryhma__otsikko span { display: block; margin-top: .4rem; }
.annokset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.annos {
  display: block;
  padding: 1.6rem clamp(1rem, 3vw, 2.5rem);
  text-align: center;
}
.annos + .annos { border-top: 0; }
.annos:nth-child(odd) { border-right: 1px solid var(--c-viiva); }
.annos:nth-child(n+3) { border-top: 1px solid var(--c-viiva); }
.annos__nimi { font-size: 1.32rem; }
.annos__kuvaus { margin: .4rem auto .55rem; max-width: 34ch; }
.annos__hinta { display: block; }
@media (max-width: 640px) {
  .annokset { grid-template-columns: minmax(0, 1fr); }
  .annos:nth-child(odd) { border-right: 0; }
  .annos:nth-child(n+2) { border-top: 1px solid var(--c-viiva); }
}
.ruokalista .huomio { text-align: center; border-top: 0; margin-inline: auto; max-width: 52ch; }
.ruokalista--tyhja {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: inset 0 0 0 1px var(--c-viiva);
}
.ruokalista__tulossa {
  font-family: var(--otsikko);
  font-style: normal;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.3;
  color: var(--c-otsikko);
  margin: 0 auto .8rem !important;
  max-width: 26ch;
}
.ruokalista--tyhja p { margin-inline: auto; }

/* Menun kolme kulmakiveä */
.pilarit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
}
.pilari { padding: .5rem clamp(1rem, 3vw, 2.5rem); }
.pilari + .pilari { border-left: 1px solid var(--c-viiva); }
.pilari__sana {
  font-family: var(--otsikko);
  font-style: normal;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  color: var(--c-korostus);
  margin: 0 auto .7rem !important;
  max-width: none;
}
.pilari p:not(.pilari__sana) { font-size: .98rem; color: var(--c-teksti-2); margin-inline: auto; max-width: 30ch; }
@media (max-width: 760px) {
  .pilarit { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pilari + .pilari { border-left: 0; border-top: 1px solid var(--c-viiva); padding-top: 2.5rem; }
}

/* --- Vaaleiden osioiden kuvat ---------------------------------- */
.osio--kalkki .jako__kuva img,
.osio--jarvi .jako__kuva img { box-shadow: 0 26px 50px -24px rgba(28,28,27,.45); }
.osio--kalkki .luvut,
.osio--jarvi .luvut { border-color: rgba(143,109,60,.35); }

/* --- Alatunniste keskitettynä ------------------------------------------------ */
.alatunniste { text-align: center; }
.alatunniste__yla { border-bottom: 0; padding-bottom: 0; margin-bottom: 2.5rem; }
.alatunniste .alatunniste__yhteys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 2.2rem;
  list-style: none;
  margin: 0 auto 2.5rem;
  padding: 0;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.alatunniste .alatunniste__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.8rem;
  list-style: none;
  margin: 0 auto;
  padding: 2.2rem 0;
  border-top: 1px solid rgba(176,143,90,.25);
  border-bottom: 1px solid rgba(176,143,90,.25);
  max-width: 980px;
}
.alatunniste__nav a { font-family: var(--otsikko); font-size: 1.12rem; color: rgba(238,234,226,.86); }
.alatunniste__kausi { margin: 2.2rem auto 0; font-size: .82rem; color: rgba(238,234,226,.55); max-width: none; }
.alatunniste__ala { justify-content: center; text-align: center; }

/* --- Menuvalinta: Kesämenu · Saunamenu · Juhlapaketit (Löylyn tapaan) ------- */
.menuvalinta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem clamp(1.5rem, 4vw, 3.2rem);
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--c-viiva);
}
.menuvalinta p { margin: 0; max-width: none; }
.menuvalinta a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-linkki);
  padding-bottom: .35rem;
  background: linear-gradient(var(--messinki), var(--messinki)) left bottom / 100% 2px no-repeat;
  transition: background-size .3s var(--liuku), color .2s var(--liuku);
}
.menuvalinta a:hover { color: var(--c-korostus); background-size: 40% 2px; }
.ruokalista + .napit, .ruokalista + .wp-block-buttons { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Ankkurilinkit (esim. menu/#saunamenu) eivät jää kiinteän ylätunnisteen alle */
.osio[id] { scroll-margin-top: 110px; }

/* --- Etusivu: osoite ja etäisyydet valokyltin yläpuolella --------------------- */
.sankari__sivu { display: flex; flex-direction: column; gap: .35rem; }
.sankari .sijainti__osoite {
  margin: 0;
  max-width: none;
  text-align: center;
  font-family: var(--otsikko);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  color: var(--kalkki);
}
.sankari .sijainti__matkat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.6rem;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--messinki-vaalea);
}

/* --- Usein kysyttyä ------------------------------------------------------------ */
.ukk__lista { border-top: 1px solid var(--c-viiva); }
.ukk .wp-block-details { border-bottom: 1px solid var(--c-viiva); margin: 0; }
.ukk summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--otsikko);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.3;
  color: var(--c-otsikko);
}
.ukk summary::-webkit-details-marker { display: none; }
.ukk summary::after {
  content: "+";
  flex: none;
  font-family: var(--teksti);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-merkki);
  transition: transform .25s var(--liuku);
}
.ukk details[open] summary::after { transform: rotate(45deg); }
.ukk summary:hover { color: var(--c-korostus); }
.ukk details p { margin: 0 0 1.5rem; max-width: 62ch; color: var(--c-teksti-2); }

/* --------------------------------------------------------------------------
   Yksi otsikkofontti (omistajan linjaus 5.10.2026, kursiivista pystyyn
   2.11.2026): kaikki otsikot ja väliotsikot Sorts Mill Goudyn pystyleikkauksella
   – samalla fontilla kuin SUVIRANTA-logo. Ei kursiivia, ei antiikvan ja
   kursiivin sekoitusta eikä harvennettuja versaalitunnisteita otsikoiden
   yhteydessä. Leipäteksti, painikkeet, valikko ja lomakkeen kentät pysyvät
   Instrument Sansina.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.annos__nimi, .tapahtuma__aika, .vaiheet b, .vaiheet strong,
.ominaisuudet b, .ominaisuudet strong, .luku b, .luku__numero,
.tiedot__arvo, .kartta__osoite, .alatunniste__nav a,
.sankari .sijainti__osoite, .ukk summary {
  font-family: var(--otsikko);
  font-style: normal;
  letter-spacing: 0;
}
h1 em, h2 em, h3 em, h4 em { font-style: normal; color: inherit; } /* yksivärinen otsikko */

/* Väliotsikot ja tunnisteet: sama kursiivi, ei versaaleja */
.merkki, .laatta__merkki, .valokyltti__otsikko, .jako__kuva figcaption,
.ryhma__otsikko span, .kalenteri__kausi, .tiedot__nimi, .alatunniste h4,
.luku__teksti, .luku span, .sankari .sijainti__matkat, .ylatunniste__varaa {
  font-family: var(--otsikko);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .01em;
}
.merkki, .laatta__merkki { font-size: 1.2rem; line-height: 1.3; }
.valokyltti__otsikko { font-size: 1.15rem; }
.jako__kuva figcaption, .ryhma__otsikko span, .kalenteri__kausi,
.tiedot__nimi, .luku__teksti, .luku span { font-size: 1.05rem; }
.alatunniste h4 { font-size: 1.25rem; }
.sankari .sijainti__matkat { font-size: 1.05rem; gap: .2rem 1.4rem; }
.ylatunniste__varaa { font-size: .98rem; line-height: 1.35; }
.ylatunniste__varaa a { text-underline-offset: 4px; }

/* Valikko mahtuu yhdelle riville myös kausisivun kanssa */
.nav__lista { gap: .2rem clamp(1rem, 1.9vw, 2.2rem); }
.nav__linkki { letter-spacing: .14em; }
@media (min-width: 901px) and (max-width: 1180px) {
  .nav__lista { gap: .2rem .95rem; padding-inline: .75rem; }
  .nav__linkki { font-size: .66rem; letter-spacing: .1em; }
}

/* Päivämäärä- ja paikkatunnisteet otsikoiden yhteydessä samaan otsikkofonttiin */
.ajankohtaista__aika, .tapahtuma__paikka, .tapahtuma__aika small {
  font-family: var(--otsikko);
  font-style: normal;
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: .01em;
  text-transform: none;
}

/* Kyltin Ajankohtaista-tila: omistajan teksti ilman neonsanaa */
[data-nayta="ajankohtaista"] .valokyltti__lisa {
  max-width: 34ch;
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(238,234,226,.86);
}
[data-nayta="ajankohtaista"] .valokyltti__lisa:first-child {
  margin-top: .35rem;
  font-family: var(--otsikko);
  font-style: normal;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--kalkki);
}
.valokyltti__linkki { margin: 1.1rem 0 0; }

/* Yhteystiedot-sivun puhelinnumero otsikkona */
.yhteys__puhelin a { color: inherit; text-decoration: none; }
.yhteys__puhelin a:hover { color: var(--c-korostus); }

/* Menu-sivun pilarisanat ilman selitteitä: yhdellä rivillä, ei tavuviivakatkoja */
.pilari__sana { white-space: nowrap; font-size: clamp(1.45rem, 2.3vw, 2.1rem); margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   QR-tilaukset: asiakkaan tilausnäkymä (/tilaa/) ja baarin pääte (/baari/).
   Omat kevyet näkymät ilman valikkoa: asiakkaalla puhelin, baarissa pääte.
   -------------------------------------------------------------------------- */

.sv-nakyma h1 { font-size: clamp(2rem, 7vw, 2.8rem); margin: 0 0 .5rem; }
.sv-nakyma h2 { font-size: 1.5rem; margin: 0 0 .9rem; }

.sv-kuori { width: min(100% - 2rem, 620px); margin-inline: auto; padding: 1.5rem 0 7rem; }
body.on-kori .sv-kuori { padding-bottom: 9rem; }
.sv-yla { display: flex; flex-direction: column; gap: .35rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--c-viiva); }
.sv-logo { width: 190px; height: auto; }
.sv-tila { margin: 0; font-family: var(--otsikko); font-style: normal; font-size: 1.15rem; color: var(--messinki-vaalea); }
.sv-ohje { margin: 0 0 2rem; color: var(--c-johdanto); }
.sv-ilmo { padding: .9rem 1.1rem; background: rgba(176,143,90,.16); border-left: 2px solid var(--messinki); }

.sv-tilalista { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.sv-tilalista a {
  display: block; padding: 1.1rem 1.25rem;
  background: rgba(8,8,7,.5); border: 1px solid var(--c-viiva);
  font-family: var(--otsikko); font-style: normal; font-size: 1.2rem; text-decoration: none;
}
.sv-tilalista a:hover { border-color: var(--messinki); }

.sv-tyhja { padding: 2.5rem 0; }
.sv-tyhja p { color: var(--c-johdanto); max-width: 42ch; }

.sv-ryhma { margin-bottom: 2.5rem; }
.sv-ryhma .kentta + .kentta { margin-top: 1.1rem; }
.sv-ryhma textarea { min-height: 72px; }

.sv-tuote {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .6rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--c-viiva);
}
.sv-tuote.on-valittu { border-bottom-color: var(--messinki); }
.sv-tuote__tieto { min-width: 0; }
.sv-tuote__nimi { margin: 0; font-family: var(--otsikko); font-style: normal; font-size: 1.22rem; line-height: 1.25; color: var(--c-otsikko); }
.sv-tuote__kuvaus { margin: .15rem 0 0; font-size: .88rem; color: var(--c-teksti-2); }
.sv-tuote__hinta { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--messinki-vaalea); }

.sv-maara { display: flex; align-items: center; gap: .15rem; }
.sv-maara__nappi {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font: inherit; font-size: 1.3rem; line-height: 1;
  color: var(--kalkki);
  background: rgba(8,8,7,.5);
  border: 1px solid var(--c-nappi-reuna);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s var(--liuku), border-color .15s var(--liuku);
}
.sv-maara__nappi:hover { border-color: var(--messinki); }
.sv-maara__nappi:active { background: var(--messinki); border-color: var(--messinki); color: var(--terva); }
.sv-maara__luku { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; font-size: 1.05rem; }

.sv-lasku { margin: 2.5rem 0; padding: 1.4rem 1.5rem; background: rgba(8,8,7,.5); border: 1px solid var(--c-viiva); }
.sv-lasku__rivit { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sv-lasku__rivit li { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.sv-lasku__rivit li span:last-child { font-variant-numeric: tabular-nums; color: var(--messinki-vaalea); white-space: nowrap; }
.sv-lasku__summa { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--c-viiva); font-family: var(--otsikko); font-style: normal; font-size: 1.3rem; }
.sv-lasku__huomio { margin: .4rem 0 0; font-size: .85rem; color: var(--c-teksti-2); }
.sv-huomio { margin: 2rem 0 0; font-size: .85rem; line-height: 1.6; color: var(--c-teksti-2); }

.sv-palkki {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  background: rgba(11,11,10,.96);
  border-top: 1px solid var(--messinki);
}
.sv-palkki__sisus { width: min(100% - 1rem, 620px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sv-palkki__summa { margin: 0; font-size: .9rem; color: var(--c-teksti-2); }
.sv-palkki__summa strong { display: block; font-family: var(--otsikko); font-style: normal; font-size: 1.35rem; color: var(--kalkki); }
.sv-palkki .nappi { flex: 0 0 auto; }

.sv-kiitos {
  position: fixed; inset: auto 1rem calc(5.5rem + env(safe-area-inset-bottom)) 1rem; z-index: 30;
  width: min(100% - 2rem, 600px); margin-inline: auto;
  padding: 1.25rem 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem;
  background: rgba(74,99,82,.96); color: #eaf2ec;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
}
.sv-kiitos[data-tila="virhe"] { background: rgba(140,74,52,.96); color: #f6e7e0; }
.sv-kiitos__teksti { margin: 0; flex: 1 1 14rem; }
.sv-kiitos .nappi--viiva { color: inherit; border-color: currentColor; }

.sv-ala { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-viiva); font-size: .82rem; color: var(--c-teksti-2); }
.sv-ala p { margin: 0 0 .2rem; }

/* Baarin pääte */
.sv-pate { width: min(100% - 2rem, 1100px); margin-inline: auto; padding: 1.25rem 0 4rem; }
.sv-pate__yla { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--messinki); }
.sv-pate__otsikko { margin: 0; font-family: var(--otsikko); font-style: normal; font-size: 2rem; line-height: 1; color: var(--kalkki); }
.sv-pate__kello { margin: .2rem 0 0; font-size: .85rem; color: var(--c-teksti-2); font-variant-numeric: tabular-nums; }
.sv-pate__napit { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-pate__virhe { margin: 0 0 1.25rem; padding: .85rem 1.1rem; background: rgba(176,143,90,.16); border-left: 2px solid var(--messinki); font-size: .9rem; }
.sv-pate__osa { margin-bottom: 2.5rem; }
.sv-pate__osa h2 { font-size: 1.35rem; margin-bottom: .9rem; }
.sv-pate__ohje { margin: -.5rem 0 1rem; font-size: .85rem; color: var(--c-teksti-2); }
.sv-pate__tyhja { margin: 0; color: var(--c-teksti-2); }

.sv-jono, .sv-tilat { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.sv-kortti { padding: 1.1rem 1.25rem 1.25rem; background: rgba(8,8,7,.55); border: 1px solid var(--c-viiva); border-left: 3px solid var(--messinki); }
.sv-kortti[data-vaihe="tyossa"] { border-left-color: var(--sammal); opacity: .9; }
.sv-kortti__yla { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.sv-kortti__tila { margin: 0; font-family: var(--otsikko); font-style: normal; font-size: 1.3rem; color: var(--kalkki); }
.sv-kortti__kello { margin: 0; font-size: .8rem; color: var(--c-teksti-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-kortti__ryhma { margin: 0 0 .6rem; font-size: .85rem; color: var(--messinki-vaalea); }
.sv-kortti__rivit { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .3rem; }
.sv-kortti__rivit li { font-size: 1.02rem; }
.sv-kortti__huomio { margin: 0 0 .75rem; padding: .6rem .8rem; background: rgba(176,143,90,.14); font-size: .9rem; }
.sv-kortti__napit { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sv-nappi--hiljainen { opacity: .6; }
.sv-nappi--hiljainen:hover { opacity: 1; }

.sv-tila-kortti { padding: 1.1rem 1.25rem 1.25rem; background: rgba(8,8,7,.4); border: 1px solid var(--c-viiva); }
.sv-tila-kortti[data-auki="true"] { background: rgba(8,8,7,.6); border-color: rgba(176,143,90,.5); }
.sv-tila-kortti__yla { margin-bottom: .75rem; }
.sv-tila-kortti h3 { margin: 0; font-size: 1.25rem; }
.sv-tila-kortti__tieto { margin: .15rem 0 0; font-size: .82rem; color: var(--c-teksti-2); }
.sv-tila-kortti__summa { margin: .8rem 0 1rem; padding-top: .7rem; border-top: 1px solid var(--c-viiva); font-family: var(--otsikko); font-style: normal; font-size: 1.2rem; }
.sv-tila-kortti__tyhja { margin: 0 0 1rem; font-size: .88rem; color: var(--c-teksti-2); }
.sv-tila-kortti__nimi {
  font: inherit; font-size: .92rem; flex: 1 1 10rem; min-width: 0;
  padding: .7rem .8rem; color: var(--c-otsikko);
  background: var(--c-kentta); border: 1px solid var(--c-kentta-reuna);
}
.sv-tila-kortti .sv-lasku__rivit { margin-bottom: .2rem; }

.sv-saatavuus__otsikko { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.sv-saatavuus__rivit { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sv-saatavuus__rivi { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; background: rgba(8,8,7,.35); font-size: .92rem; cursor: pointer; }
.sv-saatavuus__rivi input { accent-color: var(--messinki); width: 20px; height: 20px; }
.sv-saatavuus__rivi:has(input:checked) { opacity: .5; text-decoration: line-through; }

.sv-toimitettu { margin: 0 0 .35rem; font-size: .88rem; color: var(--c-teksti-2); }
.sv-toimitettu span { color: var(--messinki-vaalea); }

@media (max-width: 480px) {
  .sv-tuote { grid-template-columns: 1fr auto; }
  .sv-tuote__hinta { grid-column: 2; text-align: right; }
  .sv-maara { grid-column: 2; justify-self: end; }
}

/* Piilotettu elementti pysyy piilossa myös silloin, kun sille on annettu
   display-arvo (kiitosilmoitus, tilauspalkki). */
.sv-nakyma [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Etusivun yhteydenottolohko
   Lomake on heti sankarikuvan alla omana rauhallisena lohkonaan: otsikko ja
   puhelin keskitettyinä, kentät luettavan levyisinä ja vasempaan tasattuina.
   -------------------------------------------------------------------------- */

.lomakelohko {
  max-width: 42rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--c-viiva);
  text-align: center;
}
.lomakelohko h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 .9rem; max-width: 24ch; margin-inline: auto; }
.lomakelohko > p { margin: 0 auto; max-width: 46ch; }
.lomakelohko .lomake { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: left; }
.yhteystieto-pieni { margin-top: 1.4rem; }
.yhteystieto-pieni .yhteys__puhelin,
.yhteystieto-pieni .yhteys__sahkoposti {
  margin: 0;
  max-width: none;
  font-family: var(--otsikko);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  line-height: 1.2;
  color: var(--c-otsikko);
}
.yhteys__sahkoposti a { color: inherit; text-decoration: none; }
.yhteys__sahkoposti a:hover { color: var(--c-korostus); }

/* Etusivun alku tiiviinä: esittely on johdatus, ei pääesitys, ja lomake
   mahtuu yhteen ruutuun ilman että sivu venyy. */
.esittely--tiivis .merkki { margin-bottom: .7rem; }
.esittely--tiivis h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.esittely--tiivis .johdanto { font-size: 1rem; max-width: 50ch; }
.esittely--tiivis .otsake { margin-bottom: 0; }

.lomakelohko--tiivis {
  max-width: 34rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.lomakelohko--tiivis h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-bottom: .5rem; max-width: 30ch; }
.lomakelohko--tiivis > p { font-size: .95rem; }
.lomakelohko--tiivis .yhteystieto-pieni { margin-top: .9rem; }
.lomakelohko--tiivis .yhteystieto-pieni .yhteys__sahkoposti,
.lomakelohko--tiivis .yhteystieto-pieni .yhteys__puhelin { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.lomakelohko--tiivis .lomake { margin-top: 1.5rem; gap: .8rem; font-size: .95rem; }
.lomakelohko--tiivis .rivi { gap: .8rem; }
.lomakelohko--tiivis .kentta { gap: .3rem; }
.lomakelohko--tiivis .kentta label { font-size: .62rem; letter-spacing: .14em; }
.lomakelohko--tiivis .kentta .vihje { font-size: .78rem; }
.lomakelohko--tiivis .kentta input,
.lomakelohko--tiivis .kentta select,
.lomakelohko--tiivis .kentta textarea { padding: .55rem .7rem; }
.lomakelohko--tiivis .kentta textarea { min-height: 92px; }
.lomakelohko--tiivis .suostumus { font-size: .8rem; }
.lomakelohko--tiivis .nappi { padding: .7rem 1.5rem; font-size: .72rem; }

/* --------------------------------------------------------------------------
   Keskitetty sankari (omistajan linjaus 2.11.2026)
   Kansikuvan teksti on yhdellä keskiakselilla, jolloin sivu on tasapainossa:
   sama akseli jatkuu esittelyssä, kuvalaatoissa, ajankohtaisissa ja kehotuksessa.
   -------------------------------------------------------------------------- */

.sankari--keski .wrap { text-align: center; }
.sankari__keski { max-width: 58rem; }
.sankari__keski > * { margin-inline: auto; }
.sankari__keski h1 { max-width: 18ch; }
.sankari__keski .johdanto { max-width: 48ch; }
.sankari__keski .merkki { margin-bottom: 1.4rem; }
.sankari__keski .napit { justify-content: center; }
.sankari__keski .sijainti__osoite { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sankari__keski .sijainti__matkat { margin-bottom: 0; }

/* Tummennus symmetriseksi, kun teksti ei ole enää vasemmassa reunassa. */
.wp-block-cover.sankari--keski > .wp-block-cover__background,
.sankari--keski::before {
  background:
    radial-gradient(ellipse 80% 70% at 50% 52%, rgba(28,28,27,.5), rgba(28,28,27,.08) 78%),
    linear-gradient(to top, rgba(28,28,27,.92) 0%, rgba(28,28,27,.64) 28%, rgba(28,28,27,.2) 62%, rgba(28,28,27,.34) 100%) !important;
}

/* --- Saunaillan lisäpalvelut: tarjoilut ja hinnasto vierekkäin, siroina ---- */
.lisapalvelut {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: left;
}
@media (min-width: 60rem) {
  .lisapalvelut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 4.5rem); }
  .lisapalvelu + .lisapalvelu {
    border-left: 1px solid var(--c-viiva);
    padding-left: clamp(3rem, 5vw, 4.5rem);
  }
}
.lisapalvelu .ruokalista { text-align: left; }
.lisapalvelu .ryhma__otsikko {
  text-align: left;
  margin-bottom: 1.25rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--c-viiva);
}
.lisapalvelu .ryhma__otsikko h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--c-otsikko); }
.lisapalvelu .ryhma__otsikko span { margin-top: .3rem; }
.lisapalvelu .annokset { display: block; }
.lisapalvelu .annos {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  text-align: left;
  padding: .85rem 0;
  border: 0;
}
.lisapalvelu .annos + .annos { border-top: 1px solid var(--c-viiva); }
.lisapalvelu .annos__teksti { flex: 1; }
.lisapalvelu .annos__nimi { font-size: 1.05rem; }
.lisapalvelu .annos__kuvaus { margin: .2rem 0 0; max-width: 38ch; font-size: .86rem; }
.lisapalvelu .annos__hinta { display: inline; white-space: nowrap; font-size: .95rem; }
.lisapalvelu .ruokalista .huomio { text-align: left; margin-inline: 0; max-width: none; }
.lisapalvelu__huomio {
  margin-top: 1.5rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--c-teksti-2);
  max-width: none;
}
.lisapalvelu .ruokalista--tyhja { padding: clamp(1.5rem, 3vw, 2rem); text-align: center; }

/* --- Sarjamenu: illallisen ruokalajit yhdessä sarakkeessa järjestyksessä --- */
.menu--sarja .annokset {
  grid-template-columns: minmax(0, 1fr);
  max-width: 44rem;
  margin-inline: auto;
}
/* Sarjamenu on yksi kokonaisuus: ei viivoja ruokalajien väliin. */
.menu--sarja .annos { border-right: 0; border-top: 0; }