@charset "utf-8";
/* ==========================================================================
   BISTRO LIEKKI — Puuhiiligrilli Tikkurilan sydämessä
   Designjärjestelmä ja tyylit. Yksi tiedosto, ei riippuvuuksia.
   ========================================================================== */

/* --------------------------------------------------------------- 01 TOKENIT */
:root {
  /* Hiili ja tuli */
  --ink:        #080707;
  --char:       #100E0C;
  --char-2:     #17140F;
  --char-3:     #201B15;
  --ash:        #2C251E;
  --brown:      #3A2A1D;

  --bone:       #F4EFE6;
  --bone-2:     #D8D0C2;
  --bone-3:     #A79C8C;
  --bone-4:     #6F675C;

  --ember:      #C9552A;
  --ember-lit:  #E9743B;
  --ember-deep: #8E3417;
  --copper:     #B98B4E;

  --line:       rgba(244,239,230,.13);
  --line-soft:  rgba(244,239,230,.07);
  --line-strong:rgba(244,239,230,.26);

  /* Typografia */
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Maltillinen asteikko: otsikot erottuvat, mutta eivät huuda.
     Ylin porras on nyt 62 px aiemman 105 px sijaan. */
  --step--1: clamp(.79rem, .77rem + .1vw,  .85rem);   /* 12.6 – 13.6 px */
  --step-0:  clamp(1rem,   .97rem + .14vw, 1.06rem);  /*   16 – 17   px */
  --step-1:  clamp(1.1rem, 1.05rem + .24vw, 1.24rem); /* 17.6 – 19.8 px */
  --step-2:  clamp(1.3rem, 1.19rem + .5vw,  1.62rem); /* 20.8 – 26   px */
  --step-3:  clamp(1.58rem, 1.38rem + .9vw, 2.15rem); /* 25.3 – 34.4 px */
  --step-4:  clamp(1.92rem, 1.6rem + 1.5vw, 2.9rem);  /* 30.7 – 46.4 px */
  --step-5:  clamp(2.25rem, 1.8rem + 2.2vw, 3.85rem); /*   36 – 61.6 px */

  /* Rytmi */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shell: 1320px;
  --shell-narrow: 780px;
  --section-y: clamp(4.5rem, 9vw, 9.5rem);

  --header-h: 92px;
  --header-h-min: 64px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-min) + 1.5rem);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone-2);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Hienovarainen filmirae koko sivun päällä — antaa kuville syvyyttä */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background-image: url('../img/grain.png');
  background-size: 180px 180px;
  opacity: .035;
  mix-blend-mode: overlay;
}

/* hidden-attribuutti voittaa aina display-määrittelyt */
[hidden] { display: none !important; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--bone);
  line-height: 1.14;
  letter-spacing: -.008em;
  margin: 0;
  text-wrap: balance;
  /* WONK 0 = suorat, rauhalliset kirjainmuodot. WONK 1 antaa Frauncesille
     tarkoituksellisen vinon g:n ja y:n, joka isossa koossa erottui liikaa. */
  font-variation-settings: 'SOFT' 16, 'WONK' 0, 'opsz' 40;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--ember); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ember-lit);
  outline-offset: 3px;
  border-radius: 1px;
}

.ohita {
  position: absolute; left: -9999px; top: 0;
  background: var(--ember); color: #fff;
  padding: .8rem 1.4rem; z-index: 10000; font-weight: 600;
}
.ohita:focus { left: 1rem; top: 1rem; }

.vain-ruudunlukijalle {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- 03 LAYOUTIT */
.kuori {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.kuori--kapea { max-width: 920px; }

.osio { position: relative; padding-block: var(--section-y); }
.osio--tiivis { padding-block: clamp(3rem, 6vw, 6rem); }
.osio--char { background: var(--char); }
.osio--char2 { background: var(--char-2); }

.viiva-ylä { border-top: 1px solid var(--line-soft); }

/* -------------------------------------------------------- 04 TYPOGRAFIA UI */
.etiketti {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember-lit);
  margin: 0 0 1.4rem;
}
.etiketti::before {
  content: '';
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, var(--ember), rgba(201,85,42,0));
  flex: none;
}
.etiketti--keskellä { justify-content: center; }
.etiketti--vaalea { color: var(--copper); }

.otsikko-xl { font-size: var(--step-5); line-height: 1.04; }
.otsikko-l  { font-size: var(--step-4); line-height: 1.08; }
.otsikko-m  { font-size: var(--step-3); }
.otsikko-s  { font-size: var(--step-2); }

.ingressi {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--bone-2);
  max-width: 46ch;
}

.leipa { color: var(--bone-3); max-width: 56ch; }
.leipa--leveä { max-width: 68ch; }

.korostus { color: var(--bone); }

/* Iso taustatypografia — "PUUHIILIGRILLI" hiillosta vasten */
.taustateksti {
  position: absolute;
  right: -.06em;
  bottom: -.22em;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  letter-spacing: -.03em;
  line-height: .8;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,239,230,.075);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ------------------------------------------------------------ 05 PAINIKKEET */
.nappi {
  --nappi-bg: var(--ember);
  --nappi-vari: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.02rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--nappi-bg);
  color: var(--nappi-vari);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
  min-height: 52px;
}
.nappi > * { position: relative; z-index: 2; }
.nappi::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, var(--ember-lit), var(--ember-deep));
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.nappi:hover::after, .nappi:focus-visible::after { transform: translateY(0); }
.nappi:active { transform: translateY(1px); }

.nappi--ääriviiva {
  --nappi-bg: transparent;
  --nappi-vari: var(--bone);
  border-color: var(--line-strong);
}
.nappi--ääriviiva:hover { color: #fff; border-color: transparent; }

.nappi--hiljainen {
  --nappi-bg: transparent;
  --nappi-vari: var(--bone-2);
  border-color: var(--line);
  letter-spacing: .1em;
}
.nappi--hiljainen:hover { color: #fff; border-color: transparent; }

.nappi--pieni { padding: .72rem 1.25rem; min-height: 44px; font-size: .74rem; }

.nappi[aria-disabled='true'] {
  --nappi-bg: transparent;
  --nappi-vari: var(--bone-4);
  border-color: var(--line-soft);
  cursor: default;
  pointer-events: none;
}
.nappi[aria-disabled='true']::after { display: none; }

.napit { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Tekstilinkki, jossa alleviiva kasvaa hoverilla */
.linkki {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  padding-block: .35rem;
  background-image: linear-gradient(var(--ember-lit), var(--ember-lit));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .4s var(--ease-out), color .3s var(--ease);
}
.linkki:hover, .linkki:focus-visible { background-size: 100% 1px; color: #fff; }
.linkki svg { flex: none; transition: transform .35s var(--ease-out); }
.linkki:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------- 06 HEADERI */
.headeri {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.headeri::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,7,7,.72), rgba(8,7,7,0));
  opacity: 1;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.headeri.on-kiinni {
  height: var(--header-h-min);
  background: rgba(12,10,9,.9);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.headeri.on-kiinni::before { opacity: 0; }

.headeri__sisus {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Headerin logo: ravintolan oma logo sellaisenaan, ei erillistä tekstiä.
   Korkeus on sidottu headerin korkeuteen, joten logo ei voi kasvaa yli
   palkin edes silloin kun tyylitiedosto latautuu myöhässä. */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  flex: none;
}
.logo__kuva {
  display: block;
  width: auto;
  height: 62px;
  max-height: calc(var(--header-h) - 22px);
  transition: height .45s var(--ease), max-height .45s var(--ease);
}
/* Työpöydällä headerissa on tilaa, joten logo saa olla isompi ja luettavampi */
@media (min-width: 720px) {
  :root { --header-h: 112px; }
  .logo__kuva { height: 84px; }
}
.headeri.on-kiinni .logo__kuva {
  height: 46px;
  max-height: calc(var(--header-h-min) - 14px);
}

/* Työpöytävalikko näkyy vasta kun logo, kahdeksan linkkiä, yhteystiedot ja
   varauspainike mahtuvat riville. Sitä kapeammalla käytetään valikkonappia. */
.navi { display: none; }
@media (min-width: 1240px) {
  .navi { display: flex; align-items: center; gap: clamp(.9rem, 1.2vw, 1.25rem); }
}
.navi a {
  position: relative;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-2);
  padding-block: .5rem;
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.navi a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ember-lit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease-out);
}
.navi a:hover, .navi a[aria-current='page'] { color: var(--bone); }
.navi a:hover::after, .navi a[aria-current='page']::after { transform: scaleX(1); }

.headeri__oikea { display: flex; align-items: center; gap: .75rem; flex: none; }
.headeri__cta { display: none; }
@media (min-width: 720px) { .headeri__cta { display: inline-flex; } }

/* --------------------------------- Yhteystiedot valikon vieressä */
/* Puhelimessa nämä ovat valikon sisällä ja kiinteässä alapalkissa, joten
   headerissa ne näkyvät vasta kun tilaa riittää. 1080–1319 px: pelkkä
   ikoni. 1320 px ylöspäin: numero ja osoite kokonaan. */
.headeri__yhteys { display: none; }
@media (min-width: 1240px) {
  .headeri__yhteys { display: flex; align-items: center; gap: .2rem; }
}
.headeri__yhteyslinkki {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  padding-inline: .6rem;
  border-radius: 2px;
  font-size: .78rem;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--bone-3);
  white-space: nowrap;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.headeri__yhteyslinkki svg { flex: none; opacity: .75; transition: opacity .3s var(--ease); }
.headeri__yhteyslinkki:hover { color: var(--bone); background: rgba(255,255,255,.05); }
.headeri__yhteyslinkki:hover svg { opacity: 1; }
/* Sähköpostiosoite on pitkä eikä mahdu kahdeksan valikkokohdan viereen millään
   ruudun leveydellä (sisältöalue on enintään 1320 px). Siksi sähköposti on
   headerissa ikonina ja puhelinnumero kokonaisuudessaan — numero on se, joka
   pitää nähdä vilkaisulla. Molemmat näkyvät kokonaan valikossa ja footerissa. */
.headeri__yhteyslinkki--posti span,
.headeri__yhteyslinkki[data-href="sahkoposti"] span {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.headeri__yhteyslinkki[data-href="sahkoposti"] { padding-inline: .5rem; }
/* Kapealla työpöytäruudulla myös numero jää pois, ikoni riittää */
@media (min-width: 1240px) and (max-width: 1379px) {
  .headeri__yhteyslinkki[data-href="puhelin"] span {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .headeri__yhteyslinkki { padding-inline: .5rem; }
}
/* Erotin headerin toimintojen ja yhteystietojen väliin */
@media (min-width: 1240px) {
  .headeri__yhteys::after {
    content: '';
    width: 1px; height: 20px;
    margin-left: .45rem;
    background: var(--line);
  }
  .headeri__sisus { gap: 1rem; }
}

/* ------------------------------------------- ILMOITUKSET ALALAIDASSA */
/* Yksi pino, jotta ilmoitukset eivät mene päällekkäin. Ei vie tilaa
   sisällöltä eikä peitä navigaatiota; sulkeminen muistetaan istunnon ajan. */
.ilmoituspino {
  position: fixed;
  left: var(--gutter); right: var(--gutter);
  bottom: 1rem;
  z-index: 750;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  pointer-events: none;
}
.ilmoituspino > * { pointer-events: auto; }
.ilmoituspino:empty { display: none; }
/* Puhelimessa kiinteä toimintopalkki on jo alalaidassa — ilmoitus sen päälle */
@media (max-width: 719px) {
  .ilmoituspino { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}
/* Työpöydällä oikeaan yläkulmaan headerin alle: näkyy heti eikä peitä
   heron painikkeita, jotka ovat ruudun alaosassa. */
@media (min-width: 900px) {
  .ilmoituspino {
    left: auto;
    right: clamp(1.5rem, 3vw, 2.5rem);
    top: calc(var(--header-h) + 1rem);
    bottom: auto;
    max-width: 400px;
    margin-inline: 0;
  }
  /* Liuku sivusta, koska laatikko tulee nyt ylhäältä */
  .aanestyslaatikko,
  .tyonalla { transform: translateX(calc(100% + 3rem)); }
  .aanestyslaatikko.on-poistuu,
  .tyonalla.on-poistuu { transform: translateX(calc(100% + 3rem)); }
}

/* --------------------------------- ÄÄNESTYS: SUOMEN PARAS LOUNAS */
/* Edenredin punainen aksenttina, muuten talon hiillospinta — laatikko
   näyttää kampanjalta mutta kuuluu sivustolle. */
.aanestyslaatikko {
  --edenred: #F72717;
  position: relative;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.6rem);
  padding-right: 3rem;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(247,39,23,.16), transparent 62%),
    rgba(20,16,14,.96);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--edenred);
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transform: translateY(150%);
  transition: transform .65s var(--ease-out), opacity .4s var(--ease);
}
.aanestyslaatikko.on-nakyvissa { transform: none; }
.aanestyslaatikko.on-poistuu { transform: translateY(150%); opacity: 0; }
.aanestyslaatikko__sulje { position: absolute; top: .5rem; right: .5rem; margin: 0; }

.aanestyslaatikko__ylatunnus {
  margin: 0 0 .35rem;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--edenred);
}
.aanestyslaatikko__otsikko {
  margin: 0 0 .45rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  font-variation-settings: 'opsz' 32, 'SOFT' 16, 'WONK' 0;
  line-height: 1.2;
  color: var(--bone);
}
.aanestyslaatikko__teksti {
  margin: 0 0 1.05rem;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--bone-3);
  max-width: 46ch;
}
.aanestyslaatikko__nappi {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .6rem 1.2rem;
  background: var(--edenred);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: background-color .3s var(--ease), transform .3s var(--ease-out);
}
.aanestyslaatikko__nappi:hover { background: #D91E10; transform: translateY(-1px); }
.aanestyslaatikko__nappi svg { transition: transform .3s var(--ease-out); }
.aanestyslaatikko__nappi:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .aanestyslaatikko { transition: none; }
  .aanestyslaatikko__nappi, .aanestyslaatikko__nappi svg { transition: none; }
}

/* ------------------------------------ ILMOITUS: SIVUSTO TYÖN ALLA */
.tyonalla {
  position: relative;
  background: rgba(20,16,14,.94);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ember);
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  transform: translateY(140%);
  transition: transform .6s var(--ease-out), opacity .4s var(--ease);
}
.tyonalla.on-nakyvissa { transform: none; }
.tyonalla.on-poistuu { transform: translateY(140%); opacity: 0; }
.tyonalla__rivi {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .95rem 1rem;
}
.tyonalla__merkki {
  flex: none;
  width: 7px; height: 7px;
  margin-top: .42rem;
  border-radius: 50%;
  background: var(--ember-lit);
  box-shadow: 0 0 0 0 rgba(214,106,56,.55);
  animation: tyonallaSyke 2.6s var(--ease) infinite;
}
@keyframes tyonallaSyke {
  0%   { box-shadow: 0 0 0 0 rgba(214,106,56,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(214,106,56,0); }
  100% { box-shadow: 0 0 0 0 rgba(214,106,56,0); }
}
.tyonalla__teksti {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--bone-3);
}
.tyonalla__teksti strong { color: var(--bone); font-weight: 600; }
.tyonalla__sulje {
  flex: none;
  width: 34px; height: 34px;
  margin: -.3rem -.3rem 0 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 2px;
  color: var(--bone-4);
  cursor: pointer;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.tyonalla__sulje:hover { color: var(--bone); background: rgba(255,255,255,.06); }
@media (max-width: 719px) {
  .tyonalla__teksti { font-size: .76rem; }
  .aanestyslaatikko__teksti { font-size: .78rem; }
}
@media (hover: none) and (pointer: coarse) {
  .tyonalla__sulje { width: 44px; height: 44px; margin: -.5rem -.5rem 0 0; }
  .aanestyslaatikko__sulje { top: .25rem; right: .25rem; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tyonalla { transition: none; }
  .tyonalla__merkki { animation: none; }
}

/* Hampurilainen */
.valikkonappi {
  --koko: 46px;
  width: var(--koko); height: var(--koko);
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
/* Sama raja kuin työpöytävalikolla — muuten jää kaista, jolla kumpaakaan
   valikkoa ei näy. */
@media (min-width: 1240px) { .valikkonappi { display: none; } }
.valikkonappi:hover { border-color: var(--line-strong); }
.valikkonappi { position: relative; }
.valikkonappi span {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 1.5px;
  background: var(--bone);
  transform: translate(-50%, -50%) translateY(var(--y, 0px));
  transition: transform .4s var(--ease-out), opacity .2s var(--ease);
}
.valikkonappi span:nth-child(1) { --y: -6px; }
.valikkonappi span:nth-child(3) { --y: 6px; }
.valikkonappi[aria-expanded='true'] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.valikkonappi[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.valikkonappi[aria-expanded='true'] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Mobiilivalikko */
.mobiilivalikko {
  position: fixed;
  inset: 0;
  z-index: 790;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  /* "safe center": jos valikko on ruutua korkeampi, se ei saa leikkautua
     yläreunasta piiloon vaan alkaa ylhäältä ja vierii. */
  justify-content: center;
  justify-content: safe center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobiilivalikko::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/hero-charcoal-sm.webp') center/cover no-repeat;
  opacity: .22;
  filter: saturate(115%);
}
.mobiilivalikko.on-auki { opacity: 1; visibility: visible; }
/* Matalilla ruuduilla valikko alkaa aina ylhäältä — varmistus, jos selain ei
   tue "safe center" -arvoa. */
@media (max-height: 720px) {
  .mobiilivalikko { justify-content: flex-start; }
}
.mobiilivalikko__sisus { position: relative; z-index: 2; width: 100%; max-width: 620px; margin-inline: auto; }

/* Valikon linkit: sama Fraunces kuin otsikoissa, mutta pienemmälle koolle
   viritettynä (opsz 24, WONK pois) — luettava ja rauhallinen, ei kirjamainen.
   Koko on mitoitettu niin, että koko valikko mahtuu ruudulle kerralla. */
.mobiilivalikko a.mob-linkki {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-size: clamp(1.22rem, 5.4vw, 1.58rem);
  font-variation-settings: 'opsz' 24, 'SOFT' 14, 'WONK' 0;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.004em;
  color: var(--bone);
  text-decoration: none;
  padding: .62em 0;
  min-height: 52px;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s var(--ease);
}
.mobiilivalikko a.mob-linkki[aria-current='page'] { color: var(--ember-lit); }
.mobiilivalikko.on-auki a.mob-linkki { opacity: 1; transform: none; transition-delay: calc(60ms * var(--i, 0) + 120ms); }
.mobiilivalikko a.mob-linkki:hover { color: var(--ember-lit); }
.mobiilivalikko__jalki {
  margin-top: 1.6rem;
  display: flex; flex-direction: column; gap: .35rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease-out) .5s, transform .5s var(--ease-out) .5s;
}
.mobiilivalikko.on-auki .mobiilivalikko__jalki { opacity: 1; transform: none; }
/* Nimike ja numero omille sarakkeilleen, ettei "PÖYTÄVARAUKSET050…" tökkää yhteen */
.mobiilivalikko__yhteys {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-4);
  text-decoration: none;
}
.mobiilivalikko__yhteys strong {
  margin-left: auto;
  font-family: var(--teksti);
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--bone);
  font-weight: 600;
}
.mobiilivalikko__yhteys + .mobiilivalikko__yhteys { border-top: 1px solid var(--line-soft); }
.mobiilivalikko__jalki .nappi { margin-top: 1rem; }

/* ----------------------------------------------------------------- 07 HERO */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + 3rem) clamp(2.6rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: hidas-zoom 26s var(--ease) forwards;
}
@keyframes hidas-zoom { to { transform: scale(1); } }

.hero__peite {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 85% at 82% 78%, rgba(201,85,42,.16), transparent 62%),
    linear-gradient(180deg, rgba(8,7,7,.72) 0%, rgba(8,7,7,.10) 22%, rgba(8,7,7,.30) 44%,
                    rgba(8,7,7,.82) 66%, rgba(8,7,7,.96) 86%, var(--ink) 100%),
    linear-gradient(90deg, rgba(8,7,7,.42) 0%, rgba(8,7,7,.10) 45%, rgba(8,7,7,0) 72%);
}
.hero__hiukkaset { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero__sisus { position: relative; width: 100%; }

.hero__ylanimi {
  font-size: var(--step--1);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #EBDCC4;
  margin: 0 0 1.5rem;
}

/* Teksti pysyy luettavana minkä tahansa valokuvan päällä */
.hero h1, .hero__ylanimi, .hero__iskulause,
.sivuhero h1, .sivuhero .ingressi, .sivuhero .etiketti, .sivuhero .murupolku,
.band__sisus h2, .band__sisus .ingressi, .band__sisus .leipa, .band__sisus .etiketti {
  text-shadow: 0 2px 28px rgba(8,7,7,.6), 0 1px 3px rgba(8,7,7,.45);
}

.hero h1 {
  font-size: clamp(2.5rem, 8.2vw, 4.9rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: .96;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  font-variation-settings: 'SOFT' 26, 'WONK' 0, 'opsz' 120;
}
.hero h1 span { display: block; }

.hero__ala {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  max-width: 1000px;
}
.hero__iskulause {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.24;
  color: var(--bone);
  max-width: 22ch;
  margin: 0;
}

.hero__vieritys {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3rem, 8vw, 6rem);
  display: none;
  align-items: center;
  gap: .8rem;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bone-4);
  writing-mode: vertical-rl;
}
@media (min-width: 1080px) { .hero__vieritys { display: flex; } }
.hero__vieritys::after {
  content: ''; width: 1px; height: 64px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
  animation: vieritys 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes vieritys { 0%,100% { transform: scaleY(.3); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ------------------------------------------------------------- 08 TILAPALKKI */
.tila {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: var(--char);
  border-block: 1px solid var(--line-soft);
}
.tila__rivi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  padding-block: 1.15rem;
}
.tila__nyt {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.tila__piste {
  --p: var(--bone-4);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--p);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--p) 60%, transparent);
  flex: none;
}
.tila--auki .tila__piste { --p: #55B36B; animation: syke 2.6s var(--ease) infinite; }
.tila--kohta .tila__piste { --p: var(--ember-lit); animation: syke 2.6s var(--ease) infinite; }
.tila--kiinni .tila__piste { --p: var(--bone-4); }
@keyframes syke {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tila__aika { font-size: var(--step--1); color: var(--bone-3); letter-spacing: .05em; }
.tila__aika strong { color: var(--bone-2); font-weight: 600; }
.tila__erotin { width: 1px; height: 20px; background: var(--line); display: none; }
@media (min-width: 760px) { .tila__erotin { display: block; } }
.tila__huomio {
  font-size: var(--step--1);
  color: var(--bone-4);
  margin-left: auto;
  letter-spacing: .02em;
}

/* --------------------------------------- 08b MOBIILIN TOIMINTOPALKKI */
/* Varaa pöytä ja Soita aina peukalon ulottuvilla puhelimessa. */
.mobiilipalkki {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 760;
  display: flex;
  gap: .55rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(12,10,9,.93);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line-soft);
  transform: translateY(115%);
  transition: transform .45s var(--ease-out);
}
.mobiilipalkki.on-nakyvissa { transform: none; }
.mobiilipalkki .nappi { flex: 1; padding-inline: 1rem; }
.mobiilipalkki .nappi--ikoni { flex: 0 0 auto; width: 52px; padding-inline: 0; }
@media (min-width: 720px) { .mobiilipalkki { display: none; } }
/* Huom: footerin alatila kiinteälle toimintopalkille asetetaan tiedoston
   lopussa (osio 23), koska .footeri-perussääntö tulee tämän jälkeen. */
body.is-locked .mobiilipalkki { transform: translateY(115%); }

/* ------------------------------------------------------- 09 AJANKOHTAISTA */
.ilmoituspalkki {
  background: linear-gradient(90deg, var(--ember-deep), var(--ember));
  color: #fff;
}
.ilmoituspalkki__rivi {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding-block: .85rem;
  font-size: var(--step--1);
}
.ilmoituspalkki strong { letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.ilmoituspalkki a { color: #fff; }

.uutiset { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
@media (min-width: 760px) { .uutiset { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.uutinen { background: var(--char); padding: clamp(1.6rem, 3vw, 2.4rem); }
.uutinen h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.uutinen time { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ember-lit); margin-bottom: .9rem; }
.uutinen p { color: var(--bone-3); font-size: var(--step--1); margin: 0; }

.tyhja-tila {
  border: 1px dashed var(--line);
  border-radius: 2px;
  padding: clamp(1.8rem, 4vw, 3rem);
  text-align: center;
  color: var(--bone-4);
  font-size: var(--step--1);
  letter-spacing: .04em;
}
.tyhja-tila strong { display: block; color: var(--bone-2); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .55rem; font-size: .78rem; }

/* --------------------------------------------------------- 10 SPLIT-OSIOT */
.split {
  display: grid;
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--laaja-kuva { grid-template-columns: 1.15fr .85fr; }
  .split--laaja-teksti { grid-template-columns: .85fr 1.15fr; }
  .split--kaanteinen .split__media { order: 2; }
  .split--ylos { align-items: start; }
}

.split__teksti > * + * { margin-top: 1.3rem; }
.split__teksti .napit { margin-top: 2.1rem; }

.media {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--char-2);
}
.media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.media--pysty img { aspect-ratio: 3 / 4; }
.media--3-2 img { aspect-ratio: 3 / 2; }
.media--neliö img { aspect-ratio: 1 / 1; }
.media--leveä img { aspect-ratio: 16 / 9; }
.media::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line-soft), inset 0 -90px 120px -60px rgba(8,7,7,.85);
  pointer-events: none;
}
a.media:hover img, .media--zoom:hover img { transform: scale(1.045); }

/* Kuvateksti / merkintä kuvan kulmassa */
.media__merkinta {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: .7rem 1.1rem;
  background: rgba(8,7,7,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-2);
}

/* Kahden kuvan rivi */
.kuvapari { display: grid; gap: clamp(.7rem, 1.6vw, 1.3rem); }
@media (min-width: 760px) { .kuvapari { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------- 11 TUNNUSLUVUT */
.luvut {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (min-width: 640px) { .luvut { grid-template-columns: repeat(3, 1fr); } }
.luku { background: var(--char); padding: clamp(1.6rem, 3vw, 2.4rem); }
.luku__arvo {
  font-family: var(--display);
  font-size: var(--step-3);
  color: var(--bone);
  line-height: 1;
  display: block;
  margin-bottom: .5rem;
}
.luku__nimi { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-4); }

/* ------------------------------------------------------- 12 TÄYSLEVEÄ BAND */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 14vw, 13rem);
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__peite {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,7,7,.90) 0%, rgba(8,7,7,.52) 46%, rgba(8,7,7,.04) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(8,7,7,.10) 20%, rgba(8,7,7,.18) 70%, var(--ink) 100%);
}
.band--keskellä .band__peite {
  background:
    radial-gradient(75% 90% at 50% 50%, rgba(8,7,7,.88), rgba(8,7,7,.5) 70%),
    linear-gradient(180deg, var(--ink) 0%, rgba(8,7,7,.2) 24%, rgba(8,7,7,.3) 70%, var(--ink) 100%);
}
.band__media img { transform: scale(1.02); object-position: center 68%; }
.band__sisus { position: relative; max-width: 700px; }
.band--keskellä .band__sisus { max-width: 760px; margin-inline: auto; text-align: center; }
.band--keskellä .ingressi, .band--keskellä .leipa { margin-inline: auto; }
.band--keskellä .napit { justify-content: center; }

/* --------------------------------------------------------------- 13 LOUNAS */
.lounas-kortti {
  background: var(--char-2);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: clamp(1.8rem, 4vw, 3rem);
}
.lounas-aika {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-family: var(--display);
  font-size: var(--step-3);
  color: var(--bone);
  line-height: 1;
  margin-bottom: .4rem;
}
.lounas-aika small { font-family: var(--sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ember-lit); }

.tietolista { list-style: none; margin: 0; padding: 0; }
.tietolista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.tietolista li:last-child { border-bottom: 0; }
.tietolista dt, .tietolista .avain {
  flex: none;
  min-width: 8.5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-4);
  font-size: .72rem;
}
.tietolista .arvo { color: var(--bone-2); }
.tietolista .arvo strong { color: var(--bone); font-weight: 600; }
/* Pieni tarkennus arvon alle: kenelle numero tai osoite on tarkoitettu */
.tietolista__lisa {
  flex-basis: 100%;
  margin-left: 9.5rem;
  margin-top: -.35rem;
  font-size: .68rem;
  color: var(--bone-4);
}
@media (max-width: 479px) {
  .tietolista__lisa { margin-left: 0; margin-top: 0; }
}

/* Aukioloaikataulukko */
.aukiolot { list-style: none; margin: 0; padding: 0; }
.aukiolot li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .82rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
  color: var(--bone-3);
}
.aukiolot li:last-child { border-bottom: 0; }
.aukiolot .paiva { letter-spacing: .06em; }
.aukiolot .kello { color: var(--bone-2); font-variant-numeric: tabular-nums; }
.aukiolot li.on-tanaan { color: var(--bone); }
.aukiolot li.on-tanaan .paiva { font-weight: 600; }
.aukiolot li.on-tanaan .kello { color: var(--ember-lit); font-weight: 600; }
.aukiolot li.on-kiinni .kello { color: var(--bone-4); }

/* ------------------------------------------------------------- 14 GALLERIA */
/* Editorial-tyylinen masonry: sarakkeet, ei aukkoja, luonnolliset kuvasuhteet */
.galleria {
  --gal-vali: clamp(.5rem, 1.1vw, .95rem);
  columns: 2;
  column-gap: var(--gal-vali);
}
@media (min-width: 720px) { .galleria { columns: 3; } }
@media (min-width: 1080px) { .galleria { columns: 4; } }

.galleria__kohde {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--gal-vali);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--char-2);
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.galleria__kohde img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter .5s var(--ease);
}
.galleria__kohde--iso img { aspect-ratio: 16/11; }
.galleria__kohde--pysty img { aspect-ratio: 3/4; }
.galleria__kohde::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow .4s var(--ease);
}
.galleria__kohde:hover img { transform: scale(1.06); filter: brightness(1.08); }
.galleria__kohde:hover::after { box-shadow: inset 0 0 0 1px rgba(233,116,59,.45); }

/* Lightbox */
.valolaatikko {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(6,5,5,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.valolaatikko.on-auki { opacity: 1; visibility: visible; }
.valolaatikko img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 2px; }
.valolaatikko__teksti { margin-top: 1rem; text-align: center; font-size: var(--step--1); color: var(--bone-3); }
.valolaatikko__sulje, .valolaatikko__nuoli {
  position: absolute;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: rgba(244,239,230,.06);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--bone);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.valolaatikko__sulje:hover, .valolaatikko__nuoli:hover { background: var(--ember); border-color: transparent; }
.valolaatikko__sulje { top: 1.2rem; right: 1.2rem; }
.valolaatikko__nuoli--edell { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.valolaatikko__nuoli--seur { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------ 15 SOME */
.some-yla {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
@media (min-width: 900px) { .some-yla { grid-template-columns: 1fr auto; } }
.some-yla__teksti { max-width: 46ch; }
.some-yla h2 + .leipa { margin-top: 1.1rem; }

/* Kanavaikonit: iso osumapinta, nimi ikonin alla */
.some-ikonit {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
@media (min-width: 900px) { .some-ikonit { justify-content: flex-end; } }
.some-ikoni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  min-width: 74px;
  min-height: 74px;
  padding: .8rem .6rem;
  background: var(--char-3);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  color: var(--bone-3);
  text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background-color .3s var(--ease), transform .3s var(--ease-out);
}
.some-ikoni span {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.some-ikoni:hover {
  color: var(--bone);
  border-color: var(--ember);
  background: var(--char-3);
  transform: translateY(-2px);
}
.some-ikoni svg { width: 20px; height: 20px; }

/* Kanavakortit rinnakkain */
.some-ruudukko {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Kortit venyvät samaan korkeuteen, kun ne ovat vierekkäin. */
  align-items: stretch;
}
@media (min-width: 720px)  { .some-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .some-ruudukko { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.some-kortti {
  display: flex;
  flex-direction: column;
  background: var(--char);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.some-kortti__ylä {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.some-kortti__merkki {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 2px;
  background: var(--char-3);
  color: var(--bone-2);
}
.some-kortti__merkki svg { width: 16px; height: 16px; }
.some-kortti__nimi {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.some-kortti__linkki {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  /* Kosketuskohde vähintään 44 px korkea, jotta linkkiin osuu sormella. */
  min-height: 44px;
  padding-inline: .35rem;
  margin-right: -.35rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-4);
  transition: color .3s var(--ease);
}
.some-kortti__linkki:hover { color: var(--ember-lit); }
.some-kortti__linkki svg { transition: transform .3s var(--ease-out); }
.some-kortti__linkki:hover svg { transform: translateX(3px); }
.some-kortti__sisus {
  padding: 1rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.some-kortti__sisus > *:not([hidden]) { flex: 1 1 auto; min-height: 0; }

/* TikTok-kortin pystyvideot ovat luonnostaan muita korkeampia — rajataan
   ne, jotta kortit ovat suunnilleen samanmittaisia. */
.some-kortti[data-some-kortti="tiktok"] .karuselli__rata > * {
  width: 100%;
  max-width: 100%;
}
.some-kortti[data-some-kortti="tiktok"] .tiktok-kortti { aspect-ratio: 4 / 5; }
.some-kortti[data-some-kortti="tiktok"] .karuselli__nappi { display: none; }

/* Instagram: neljä kuvaa ruudukkona (varanäkymä) */
.some-ig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
/* Oikea Instagram-upotus (widget-palvelu tai nimetyt julkaisut): yksi
   valkoinen kortti kuten TikTokilla, ei ruudukkoa. */
.some-ig--upotus {
  display: block;
  gap: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}
.some-ig__upotus { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }
.some-ig--upotus .karuselli { height: 100%; display: flex; flex-direction: column; }
.some-ig--upotus .karuselli__rata { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.some-ig--upotus .karuselli__nappi { display: none; }
.some-ig--upotus .karuselli::before,
.some-ig--upotus .karuselli::after { content: none; }
/* Reelit ovat pystyvideoita, joten Instagramin upotus on aina korttia
   korkeampi. Näytetään kortin verran ylhäältä — tekijän nimi ja video
   näkyvät, loppu rajautuu siististi pois. "Avaa" vie koko julkaisuun. */
.some-ig__julkaisu { width: 100%; max-width: 100%; flex: none; overflow: hidden; }
.some-ig__julkaisu iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}
.some-ig__kuva {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
}
.some-ig__kuva img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out), opacity .3s var(--ease);
}
.some-ig__kuva:hover img { transform: scale(1.06); opacity: .9; }

/* Facebook-upotus ja varakortti */
/* Upotus latautuu vasta kun kortti tulee näkyviin, joten tila varataan
   etukäteen — muuten kortti nytkähtää auki. Valitsin on tarkempi kuin
   .some-kortti__sisus > * -sääntö, joka muuten nollaisi min-heightin. */
.some-kortti__sisus > .some-fb { min-height: 420px; }
.some-fb__upotus {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  border-radius: 3px;
  background: #fff;
}
.some-vara {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  background: var(--char-2);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  text-decoration: none;
}
.some-vara__otsikko {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--bone);
}
.some-vara__teksti { font-size: var(--step--1); color: var(--bone-4); line-height: 1.55; }
.some-vara__linkki {
  margin-top: .4rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember-lit);
}

/* Varakortissa on oma kuvamme taustana, jotta kortti ei jää tyhjäksi
   laatikoksi Facebook-upotuksen ollessa pois päältä. */
.some-vara { position: relative; overflow: hidden; padding: 0; min-height: 250px; }
.some-vara__kuva {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
  filter: saturate(.75);
  transition: transform .8s var(--ease-out), opacity .4s var(--ease);
}
.some-vara:hover .some-vara__kuva { transform: scale(1.04); opacity: .38; }
.some-vara__sisus {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  justify-content: flex-end;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  background: linear-gradient(to top,
              rgba(8, 7, 7, .94) 0%, rgba(8, 7, 7, .78) 45%, rgba(8, 7, 7, .3) 100%);
}


/* ------------------------------------------------ TIKTOK-KARUSELLI */
/* Vaakasuuntainen selattava rata: pyyhkäisy puhelimella, nuolet
   työpöydällä. Kortit napsahtavat paikalleen (scroll-snap). */
.karuselli { position: relative; }

.karuselli__rata {
  display: flex;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-block: .2rem;
  /* Reunoilla hieman ilmaa, jotta ensimmäinen ja viimeinen kortti
     eivät liimaudu kiinni kuoren reunaan */
  padding-inline: 1px;
}
.karuselli__rata::-webkit-scrollbar { display: none; }

.karuselli__rata > * {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: clamp(268px, 76vw, 324px);
}
@media (min-width: 720px) { .karuselli__rata > * { scroll-snap-align: start; } }

/* Häivytys reunoissa kertoo, että rataa voi vierittää */
.karuselli::before, .karuselli::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(24px, 6vw, 64px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.karuselli::before { left: -1px;  background: linear-gradient(90deg, var(--char-2), transparent); }
.karuselli::after  { right: -1px; background: linear-gradient(270deg, var(--char-2), transparent); }
.karuselli.on-alkua-ennen::before { opacity: 1; }
.karuselli.on-loppua-jaljella::after { opacity: 1; }

.karuselli__nappi {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 48px; height: 48px;
  display: none;
  place-items: center;
  transform: translateY(-50%);
  background: rgba(12,10,9,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--bone);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              opacity .3s var(--ease), transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .karuselli__nappi { display: grid; } }
.karuselli__nappi:hover { background: var(--ember); border-color: transparent; }
.karuselli__nappi:disabled { opacity: 0; pointer-events: none; }
.karuselli__nappi--edell { left: clamp(-22px, -1.4vw, -8px); }
.karuselli__nappi--seur  { right: clamp(-22px, -1.4vw, -8px); }
/* Kaikki kortit näkyvissä kerralla: ei pisteitä eikä nuolia */
.karuselli.on-mahtuu .karuselli__pisteet,
.karuselli.on-mahtuu .karuselli__nappi { display: none; }

.karuselli__pisteet {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.3rem;
}
.karuselli__piste {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--line-strong);
  cursor: pointer;
  transition: width .35s var(--ease-out), background-color .35s var(--ease);
}
.karuselli__piste.on { width: 22px; background: var(--ember-lit); }
/* Kosketuksella pisteet saavat ison osumapinnan, mutta näkyvä piste pysyy
   pienenä: tausta piirretään vain sisältölaatikkoon. */
@media (hover: none) and (pointer: coarse) {
  .karuselli__pisteet { gap: 0; margin-top: .7rem; }
  .karuselli__piste {
    height: 44px;
    /* Osumapinta vähintään 26 px leveä, näkyvä piste pysyy 7 px:ssä. */
    width: 26px;
    padding: 18.5px 9.5px;
    background-clip: content-box;
  }
  .karuselli__piste.on { width: 40px; }
}

/* Yksittäinen TikTok-video kortissa */
.tiktok-kortti-video {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--char);
  border: 1px solid var(--line-soft);
  min-height: 480px;
}
.tiktok-kortti-video blockquote { margin: 0 !important; max-width: none !important; min-width: 0 !important; }
.tiktok-kortti-video iframe { width: 100% !important; border-radius: 3px; }

/* TikTokin profiiliupotus, kun yksittäisiä videoita ei ole määritelty */
.tiktok-syote { min-height: 200px; }
.tiktok-syote--profiili { display: flex; justify-content: center; }
.tiktok-syote--profiili > * { width: 100%; max-width: 780px; }
.tiktok-syote iframe { border-radius: 3px; }
.tiktok-syote blockquote.tiktok-embed { margin: 0 auto; }
/* Latautuessa upotuksen tilalla on rauhallinen hiillos-pinta, ei tyhjä laatikko */
.tiktok-syote:not(.on-ladattu) blockquote {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 52vw, 420px);
  display: grid;
  place-items: center;
  background: var(--char);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 2rem;
  color: var(--bone-4);
  font-size: var(--step--1);
  text-align: center;
}
.tiktok-syote:not(.on-ladattu) blockquote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%,
              rgba(214, 106, 56, .09) 50%, transparent 68%);
  background-size: 260% 100%;
  animation: hiilloshohde 2.6s var(--ease) infinite;
}
@keyframes hiilloshohde {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tiktok-syote:not(.on-ladattu) blockquote::before { animation: none; }
}

/* Varanäkymä, jos upotus estyy */
.tiktok-kortti {
  position: relative;
  display: block;
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: 3px;
  background: var(--char-2);
  text-decoration: none;
  border: 1px solid var(--line-soft);
}
.tiktok-kortti img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .5s var(--ease), transform 1s var(--ease-out); }
.tiktok-kortti:hover img { opacity: 1; transform: scale(1.05); }
.tiktok-kortti__paalle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem;
  background: linear-gradient(180deg, transparent 45%, rgba(8,7,7,.9));
}
.tiktok-kortti__teksti { font-size: var(--step--1); color: var(--bone); line-height: 1.4; }
.tiktok-kortti__soita {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(244,239,230,.12);
  border: 1px solid var(--line-strong);
  color: var(--bone);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .35s var(--ease), transform .35s var(--ease-out);
}
.tiktok-kortti:hover .tiktok-kortti__soita { background: var(--ember); transform: translate(-50%,-50%) scale(1.08); }
.tiktok-vara-teksti {
  margin: 1.1rem 0 0;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--bone-4);
  text-align: center;
}

/* --------------------------------------- 15b SOMEKORTTIEN TASAKORKEUS */
/* Kun kanavakortit ovat vierekkäin, niiden sisältöalue saa saman
   korkeuden ja jokainen upotus venyy siihen. Tämän lohkon on oltava
   .karuselli-, .tiktok-kortti-, .some-ig- ja .some-fb-perussääntöjen
   JÄLKEEN, jotta se voittaa kaskadissa. */
@media (min-width: 720px) {
  .some-kortti__sisus {
    height: clamp(360px, 33vw, 470px);
    flex: 0 0 auto;
    overflow: hidden;
  }
  .some-kortti__sisus > *:not([hidden]) { flex: 1 1 auto; min-height: 0; }

  /* TikTok: karuselli täyttää korkeuden, pisterivi jää sen alle */
  .some-kortti[data-some-kortti="tiktok"] [data-tiktok-vara],
  .some-kortti[data-some-kortti="tiktok"] .karuselli {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .some-kortti[data-some-kortti="tiktok"] [data-tiktok-vara][hidden] { display: none; }
  .some-kortti[data-some-kortti="tiktok"] [data-tiktok-vara] > .karuselli { flex: 1 1 auto; }
  .some-kortti[data-some-kortti="tiktok"] .karuselli__rata {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }
  .some-kortti[data-some-kortti="tiktok"] .karuselli__pisteet { flex: 0 0 auto; }
  .some-kortti[data-some-kortti="tiktok"] .tiktok-kortti {
    aspect-ratio: auto;
    height: 100%;
  }
  /* Kortin ylätunnisteen "Avaa" kertoo saman — turha rivi pois. */
  .some-kortti[data-some-kortti="tiktok"] .tiktok-vara-teksti { display: none; }

  /* Instagram: neljä kuvaa täyttää alueen kahtena rivinä */
  .some-ig:not(.some-ig--upotus) { grid-template-rows: 1fr 1fr; height: 100%; }
  .some-ig:not(.some-ig--upotus) .some-ig__kuva { aspect-ratio: auto; min-height: 0; }
  /* Upotus täyttää saman alueen yhtenä korttina */
  .some-ig--upotus { height: 100%; }
  .some-ig__upotus,
  .some-ig__julkaisu iframe { min-height: 0; }

  /* Facebook: upotus ja varakortti venyvät samaan mittaan */
  .some-kortti__sisus > .some-fb { display: flex; flex-direction: column; min-height: 0; }
  .some-fb .some-vara { flex: 1 1 auto; min-height: 0; }
  .some-fb__upotus { flex: 1 1 auto; min-height: 0; }
}

/* ------------------------------------------------------------ 16 LOMAKKEET */
.lomake { display: grid; gap: 1.3rem; }
@media (min-width: 700px) { .lomake--kaksi { grid-template-columns: 1fr 1fr; } .lomake--kaksi .kentta--koko { grid-column: 1 / -1; } }

/* Aiheen valinta: palaute vai tarjouspyyntö */
.lomake__kysymys {
  margin: 0 0 .7rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-4);
}
.aihevalitsin {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--char-2);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
}
.aihevalitsin__nappi {
  min-height: 44px;
  padding: .6rem 1.15rem;
  background: none;
  border: 0;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-4);
  cursor: pointer;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.aihevalitsin__nappi:hover { color: var(--bone-2); }
.aihevalitsin__nappi.on-valittu {
  background: var(--ember);
  color: #fff;
}
@media (max-width: 419px) {
  .aihevalitsin { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .aihevalitsin__nappi { padding-inline: .5rem; font-size: .7rem; }
}

.kentta { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.kentta label {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-4);
}
.kentta label .pakollinen { color: var(--ember-lit); }
.kentta input, .kentta textarea, .kentta select {
  width: 100%;
  background: rgba(244,239,230,.035);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .95rem 1.05rem;
  color: var(--bone);
  font-family: inherit;
  font-size: var(--step-0);
  line-height: 1.5;
  /* Päivämäärävalitsin ja pudotusvalikko tummina, ei selaimen valkoisina */
  color-scheme: dark;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.kentta textarea { min-height: 160px; resize: vertical; }
.kentta select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bone-3) 50%),
    linear-gradient(135deg, var(--bone-3) 50%, transparent 50%);
  background-position: right 1.25rem center, right 1rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.kentta input[type="date"] { min-height: 3.35rem; }
.kentta input::placeholder, .kentta textarea::placeholder { color: var(--bone-4); }
.kentta input:focus, .kentta textarea:focus, .kentta select:focus {
  outline: none;
  border-color: var(--ember);
  background: rgba(244,239,230,.055);
}
.kentta input:user-invalid, .kentta textarea:user-invalid { border-color: #A5442F; }
.kentta__virhe { font-size: .75rem; color: #E08A6C; min-height: 1em; }

/* Hunajapurkki — näkymätön ansa roboteille, ei captchaa käyttäjälle */
.hunaja { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; overflow: hidden; }

.lomake__viesti {
  padding: 1rem 1.2rem;
  border-radius: 2px;
  font-size: var(--step--1);
  border: 1px solid var(--line);
  background: rgba(244,239,230,.04);
  color: var(--bone-2);
}
.lomake__viesti--ok { border-color: rgba(85,179,107,.4); color: #9FD6AC; }
.lomake__viesti--virhe { border-color: rgba(200,80,60,.45); color: #E5A08A; }

.lomake-tietosuoja { font-size: .78rem; color: var(--bone-4); }

/* ------------------------------------------------------------- 17 KARTTA */
.kartta-pilari { position: sticky; top: calc(var(--header-h-min) + 1.5rem); }
.kartta {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
  background: var(--char-2);
  min-height: 340px;
}
.kartta iframe { width: 100%; height: 100%; min-height: clamp(340px, 62vh, 620px); border: 0; filter: grayscale(.55) invert(.9) hue-rotate(180deg) contrast(.88) brightness(.92); }

/* ------------------------------------------------------------- 18 FOOTERI */
.footeri {
  position: relative;
  background: var(--char);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  overflow: hidden;
}
.footeri::before {
  content: '';
  position: absolute; left: 50%; top: -140px;
  width: 900px; height: 300px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(201,85,42,.16), transparent);
  pointer-events: none;
}
.footeri__ruudukko {
  position: relative;
  display: grid;
  gap: clamp(2.2rem, 4vw, 3.5rem);
}
@media (min-width: 720px) { .footeri__ruudukko { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; } }
@media (min-width: 1040px) { .footeri__ruudukko { grid-template-columns: 1.5fr 1fr 1fr; } }

.footeri h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .6rem;
}
.footeri__logo { margin: 0 0 1.2rem; line-height: 0; }
.footeri__logo img {
  width: auto;
  height: clamp(96px, 12vw, 132px);
}
.footeri__iskulause { color: var(--bone-3); font-size: var(--step--1); max-width: 30ch; margin-bottom: 1.6rem; }
.footeri__otsikko {
  font-family: var(--sans);
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bone-4); margin: 0 0 1.15rem;
}
.footeri ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footeri a { color: var(--bone-2); text-decoration: none; font-size: var(--step--1); transition: color .3s var(--ease); }
.footeri a:hover { color: var(--ember-lit); }
.footeri address { font-style: normal; color: var(--bone-3); font-size: var(--step--1); display: grid; gap: .55rem; }

.some { display: flex; gap: .6rem; flex-wrap: wrap; }
.some a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--bone-2);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease-out);
}
.some a:hover { background: var(--ember); border-color: transparent; color: #fff; transform: translateY(-2px); }

.footeri__ala {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--bone-4);
}

/* ------------------------------------------------------- 19 SIVUN HEADERI */
.sivuhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem)) clamp(3rem, 6vw, 5.5rem);
}
.sivuhero__media { position: absolute; inset: 0; z-index: -2; }
.sivuhero__media img { width: 100%; height: 100%; object-fit: cover; }
.sivuhero__peite {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(100% 90% at 80% 100%, rgba(201,85,42,.18), transparent 60%),
    linear-gradient(180deg, rgba(8,7,7,.86), rgba(8,7,7,.6) 45%, var(--ink));
}
.sivuhero h1 { font-size: var(--step-4); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 1.1rem; }
.sivuhero .ingressi { max-width: 52ch; }

/* Tiivis versio sivuille, joilla pääsisältö pitää nähdä heti (lounaslista).
   Hero jää tunnelmaksi, ei tilanviejäksi. */
.sivuhero--tiivis {
  padding-block: calc(var(--header-h) + clamp(1.6rem, 3.5vw, 2.8rem)) clamp(1.6rem, 3vw, 2.6rem);
}
.sivuhero--tiivis h1 { font-size: var(--step-3); margin-bottom: .7rem; }
.sivuhero--tiivis .ingressi { font-size: var(--step-0); }
.sivuhero--tiivis .murupolku { margin-bottom: 1rem; }

/* Elävä lounastilanne heron alla: onko buffet nyt tarjolla */
.lounas-tila {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .5rem .9rem .5rem .75rem;
  background: rgba(23,20,15,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  font-size: var(--step--1);
  color: var(--bone-2);
}
.lounas-tila::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember-lit);
}
.lounas-tila:empty { display: none; }


.murupolku { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-4); margin-bottom: 1.5rem; list-style: none; padding: 0; }
.murupolku a { text-decoration: none; color: var(--bone-4); transition: color .3s var(--ease); }
.murupolku a:hover { color: var(--ember-lit); }
.murupolku li + li::before { content: '/'; margin-right: .5rem; color: var(--line-strong); }

/* --------------------------------------------------------------- 20 KORTIT */
.kortit { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (min-width: 760px) { .kortit--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .kortit--3 { grid-template-columns: repeat(3, 1fr); } }
.kortti {
  background: var(--char);
  padding: clamp(1.7rem, 3.2vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: background-color .4s var(--ease);
}
.kortti:hover { background: var(--char-2); }
.kortti__nro { font-size: .7rem; letter-spacing: .22em; color: var(--ember-lit); }
.kortti h3 { font-size: var(--step-2); }
.kortti p { color: var(--bone-3); font-size: var(--step--1); margin: 0; }
.kortti .linkki { margin-top: auto; padding-top: .8rem; }

/* Menu-osiot (ruokalistan rakenne) */
.menu-osio + .menu-osio { margin-top: clamp(2.6rem, 5vw, 4.5rem); }
.menu-osio__otsikko {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding-bottom: 1rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.menu-osio__otsikko h3 { font-size: var(--step-2); text-transform: uppercase; letter-spacing: .02em; }
.menu-rivi { display: grid; gap: .3rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line-soft); }
/* Kapealla ruudulla pitkä nimi ja kahden hinnan pari eivät mahdu samalle
   riville — silloin hinta siirtyy omalle rivilleen oikeaan reunaan. */
.menu-rivi__ylä {
  display: flex;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: .1rem;
  flex-wrap: wrap;
}
.menu-rivi__nimi {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--bone);
  min-width: 0;
  overflow-wrap: anywhere;
}
.menu-rivi__pisteet {
  flex: 1 1 1.2rem;
  min-width: 1.2rem;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-.2em);
}
.menu-rivi__hinta {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--bone-2);
  white-space: nowrap;
  text-align: right;
}
/* Tarjoushinta erottuu hiillosvärillä, normaalihinta jää sen alle yliviivattuna */
.menu-rivi__hinta:has(.menu-rivi__hintalisa) { color: var(--ember-lit); font-weight: 600; }
.menu-rivi__hintalisa {
  display: block;
  margin-top: .15rem;
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--bone-4);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.menu-rivi__kuvaus { font-size: var(--step--1); color: var(--bone-4); }

/* --------------------------------- Menu-sivun välilehdet ja paneelit */
/* Välilehtirivi vierii kapealla ruudulla. Oikean reunan häivytys kertoo
   että lehtiä on lisää — ilman sitä "Juomat" jää huomaamatta. */
.menu-kehys { position: relative; }
.menu-valilehdet {
  position: relative;
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  transition: -webkit-mask-image .3s var(--ease), mask-image .3s var(--ease);
}
.menu-valilehdet.on-lisaa {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
}
.menu-valilehdet::-webkit-scrollbar { display: none; }
.menu-valilehti {
  flex: none;
  position: relative;
  padding: .95rem 1.15rem;
  min-height: 48px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone-4);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .35s var(--ease);
}
.menu-valilehti:hover { color: var(--bone-2); }
.menu-valilehti[aria-selected='true'] {
  color: var(--bone);
  border-bottom-color: var(--ember);
}
.menu-paneeli { animation: menuEsiin .5s var(--ease-out) both; }
@keyframes menuEsiin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .menu-paneeli { animation: none; } }
.menu-paneeli__kuvaus {
  max-width: 60ch;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  color: var(--bone-3);
  font-size: var(--step-0);
}
.menu-lista { max-width: 820px; }
.menu-ryhma + .menu-ryhma { margin-top: clamp(2.6rem, 5vw, 4rem); }
.menu-ryhma__otsikko {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Kapealla ruudulla lisäteksti siirtyy omalle rivilleen otsikon alle
     eikä työnnä sivua leveämmäksi. */
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: .2rem;
  margin: 0 0 .5rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ember-lit);
}
.menu-ryhma__lisa {
  flex: none;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-4);
}
/* Ruokavaliomerkinnät nimen perässä — luettavissa, mutta ei vie huomiota */
.menu-rivi__merkit {
  margin-left: .55rem;
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-4);
  white-space: nowrap;
}
.menu-rivi__kuvaus { max-width: 62ch; }

/* ------------------------------------------------- 404-VIRHESIVU */
.virhesivu {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  text-align: center;
}
.virhesivu__media { position: absolute; inset: 0; }
.virhesivu__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
  transform: scale(1.08);
}
.virhesivu__peite {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(201,85,42,.16), transparent 60%),
    linear-gradient(180deg, rgba(8,7,7,.92), rgba(8,7,7,.7) 45%, var(--ink));
}
.virhesivu__sisus { position: relative; z-index: 2; max-width: 62ch; }

/* Iso 404 taustalla — hehkuva, mutta ei vie huomiota otsikolta */
.virhesivu__luku {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -58%);
  z-index: -1;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(9rem, 34vw, 22rem);
  line-height: .8;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, rgba(233,116,59,.3), rgba(142,52,23,.05) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.virhesivu h1 { margin-top: .5rem; }
.virhesivu .ingressi { margin-inline: auto; margin-top: 1.1rem; }
.napit--keskellä { justify-content: center; }

/* Muut sivut yhtenä rivinä alle */
.virhesivu__linkit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line-soft);
}
.virhesivu__linkit a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-3);
  transition: color .3s var(--ease);
}
.virhesivu__linkit a:hover { color: var(--ember-lit); }

.virhesivu__apu {
  margin-top: 1.6rem;
  font-size: var(--step--1);
  color: var(--bone-4);
}
.virhesivu__apu a { color: var(--bone-2); text-underline-offset: .22em; }
.virhesivu__apu a:hover { color: var(--ember-lit); }

@media (prefers-reduced-motion: reduce) {
  .virhesivu__media img { transform: none; }
}

/* ------------------------------------------ VIIKON LOUNAS (Lounas) */
.lounasviikko__ylä { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.lounasviikko__ylä .otsikko-l { margin-top: .4rem; }
/* Hinnat ja sisältö tulevat päivälistan jälkeen */
.lounasviikko__ala { margin-top: clamp(2.4rem, 5vw, 3.6rem); }

/* Mitä lounaaseen kuuluu */
.lounas-sisaltyy {
  margin-top: 0;
  padding: clamp(1.2rem, 2.5vw, 1.7rem) clamp(1.2rem, 2.5vw, 1.8rem);
  background: var(--char-2);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--ember);
  border-radius: 3px;
}
.lounas-sisaltyy__otsikko {
  margin: 0 0 .9rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ember-lit);
}
.lounas-sisaltyy ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .5rem clamp(1rem, 2.5vw, 2rem);
}
/* Kahteen sarakkeeseen jo kapealla ruudulla, jotta viikon lista ei jää
   turhan kauas alas puhelimessa. */
@media (min-width: 360px) { .lounas-sisaltyy ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .9rem; } }
@media (min-width: 1000px) { .lounas-sisaltyy ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lounas-sisaltyy li {
  position: relative;
  padding-left: .95rem;
  font-size: var(--step--1);
  color: var(--bone-2);
}
.lounas-sisaltyy li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ember-deep);
}

/* Hinnat */
.lounas-hinnat {
  list-style: none;
  margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0;
  padding: 0;
  display: grid;
  gap: .55rem clamp(1.2rem, 3vw, 2.4rem);
}
@media (min-width: 400px) { .lounas-hinnat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lounas-hinnat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lounas-hinnat li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding-block: .45rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.lounas-hinnat__nimi { color: var(--bone-4); }
.lounas-hinnat__hinta {
  margin-left: auto;
  color: var(--bone);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Viikonpäivät */
.lounaspaivat {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}
/* minmax(0,…) jotta pitkät annosnimet eivät leventäisi sarakkeita.
   Viisi saraketta olisi liian ahdas 14 annokselle, siksi enintään kolme. */
@media (min-width: 620px)  { .lounaspaivat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lounaspaivat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lounaspaiva {
  padding: clamp(1.2rem, 2.2vw, 1.5rem);
  background: var(--char-2);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--line);
  border-radius: 3px;
}
/* Kuluva päivä erottuu hiilloksella */
.lounaspaiva.on-tanaan {
  background: var(--char-3);
  border-top-color: var(--ember);
  box-shadow: 0 0 0 1px rgba(201,85,42,.25), 0 14px 40px rgba(0,0,0,.35);
}
.lounaspaiva__ylä {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .7rem;
  padding-bottom: .85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.lounaspaiva__nimi {
  margin: 0;
  font-size: var(--step-1);
  letter-spacing: -.005em;
  color: var(--bone);
}
.lounaspaiva__pvm {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--bone-4);
}
.lounaspaiva__merkki {
  margin-left: auto;
  flex: none;
  padding: .22rem .5rem;
  background: var(--ember);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.lounaspaiva__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .62rem;
}
.lounaspaiva__lista li { line-height: 1.4; overflow-wrap: anywhere; }
.lounaspaiva__annos {
  font-size: var(--step--1);
  color: var(--bone-2);
}
.lounaspaiva .menu-rivi__merkit { margin-left: .4rem; }
/* Huomautus annoksen alla — ei ruokavaliomerkintä, joten tavallista tekstiä */
.lounaspaiva__lisa {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--bone-4);
}

/* --------------------------------------------- SAAVUTUKSET (Tarina) */
.saavutukset__ylä { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.saavutukset {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.2rem);
}
@media (min-width: 720px) {
  .saavutukset { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.saavutus {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--char-2);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--ember);
  border-radius: 3px;
}
/* Uusin vuosi erottuu hiillosreunuksella */
.saavutus:first-child { background: var(--char-3); }
.saavutus__vuosi {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
  font-variation-settings: 'opsz' 72, 'SOFT' 18, 'WONK' 0;
  line-height: 1;
  color: var(--ember-lit);
}
.saavutus__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.saavutus__lista li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--bone-2);
}
.saavutus__lista li::before {
  content: '';
  position: absolute;
  left: 0; top: .48em;
  width: 8px; height: 8px;
  background: var(--ember);
  transform: rotate(45deg);
}

/* Tapahtuman tiedot: päivä, kattaukset, hinta */
.menu-tiedot {
  max-width: 820px;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.2rem, 2.5vw, 1.7rem) clamp(1.2rem, 2.5vw, 1.8rem);
  list-style: none;
  background: var(--char-2);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--ember);
  border-radius: 3px;
  display: grid;
  gap: .75rem;
}
.menu-tiedot li {
  display: grid;
  gap: .2rem;
}
@media (min-width: 560px) {
  .menu-tiedot li {
    grid-template-columns: 9rem 1fr;
    align-items: baseline;
    gap: .4rem 1.4rem;
  }
}
.menu-tiedot__avain {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-4);
}
.menu-tiedot__arvo { color: var(--bone); font-size: var(--step-0); line-height: 1.45; }

/* Buffet-ryhmä: pelkkiä nimiä, ei hintasaraketta */
.menu-buffet {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
@media (min-width: 780px) {
  .menu-buffet { grid-template-columns: 1fr 1fr; gap: .9rem clamp(1.5rem, 3vw, 2.6rem); }
}
.menu-buffet li {
  display: grid;
  gap: .18rem;
  padding-left: 1rem;
  position: relative;
}
.menu-buffet li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ember-deep);
}
.menu-buffet__nimi {
  font-family: var(--display);
  font-size: var(--step-0);
  color: var(--bone);
  line-height: 1.35;
}
.menu-buffet__kuvaus { font-size: var(--step--1); color: var(--bone-4); }

/* Osion loppuhuomautukset ja merkkien selitys */
.menu-huomiot {
  max-width: 820px;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.menu-huomiot p {
  margin: 0 0 .8rem;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--bone-4);
}
.menu-huomiot p:last-child { margin-bottom: 0; }
.menu-selite {
  font-family: var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .66rem !important;
  color: var(--bone-4);
}

/* Osio, jonka annoksia ei ole vielä lisätty — rehellinen, ei tyhjä laatikko */
.menu-tulossa {
  max-width: 620px;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--char-2);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--ember-deep);
  border-radius: 3px;
}
.menu-tulossa__otsikko {
  margin: 0 0 .7rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ember-lit);
}
.menu-tulossa__teksti {
  margin: 0 0 1.6rem;
  color: var(--bone-3);
  font-size: var(--step--1);
  line-height: 1.65;
}
.menu-tulossa .napit { margin: 0; }

/* -------------------------------------------------------- 21 ANIMOINTI/UX */
[data-esiin] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--viive, 0) * 85ms);
  will-change: opacity, transform;
}
[data-esiin].on-nakyvissa { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-esiin] { opacity: 1 !important; transform: none !important; }
  .hero__media img { animation: none; transform: none; }
  .hero__hiukkaset { display: none; }
}

/* ----------------------------------------------------------- 22 APULUOKAT */
.keskita { text-align: center; }
.keskita .ingressi, .keskita .leipa { margin-inline: auto; }
.keskita .napit { justify-content: center; }
.pinota > * + * { margin-top: 1.25rem; }
.pinota-l > * + * { margin-top: clamp(2rem, 4vw, 3.2rem); }
.piilota { display: none !important; }
.rajaa-leveys { max-width: var(--shell-narrow); }
.ei-marginia { margin: 0 !important; }

.hiili-tausta {
  position: relative;
  isolation: isolate;
}
.hiili-tausta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: url('../img/band-embers.webp') center/cover no-repeat;
  opacity: .16;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

@media print {
  body::after, .headeri, .mobiilivalikko, .hero__hiukkaset, .valolaatikko { display: none !important; }
  body { background: #fff; color: #111; }
}


/* ==========================================================================
   23 MOBIILIVIIMEISTELY
   Puhelin on sivuston tärkein laite: yli puolet ravintolan kävijöistä tulee
   sieltä. Alla kaikki, mikä koskee vain kosketusnäyttöä ja kapeaa ruutua.
   ========================================================================== */

/* Ei sinistä välähdystä napautuksessa — oma :active-tila hoitaa palautteen */
html { -webkit-tap-highlight-color: transparent; }

/* Kosketuskohteet: mikään painettava ei jää alle 44 px:n */
@media (hover: none) and (pointer: coarse) {
  .linkki { min-height: 44px; align-items: center; }
  .murupolku a { padding-block: .35rem; }
  .galleria__kohde { cursor: default; }
  .media--zoom:hover img, .galleria__kohde:hover img,
  .tiktok-kortti:hover img { transform: none; }
}

@media (max-width: 719px) {

  /* Pääpainikkeet koko leveydeltä — helppo osua peukalolla */
  .napit { flex-direction: column; align-items: stretch; gap: .7rem; }
  .napit .nappi { width: 100%; }
  .napit--rivi { flex-direction: row; flex-wrap: wrap; }
  .napit--rivi .nappi { width: auto; flex: 1 1 auto; }

  /* Aukiolopalkki: tiedot allekkain, ei ahdettuna yhdelle riville */
  .tila__rivi { flex-direction: column; align-items: flex-start; gap: .45rem; padding-block: 1rem; }
  .tila__huomio { margin-left: 0; }
  .tila__erotin { display: none; }

  /* Kartta ei jää roikkumaan yhden palstan näkymässä */
  .kartta-pilari { position: static; }
  .kartta iframe { min-height: 320px; }

  /* Hero: hiukan tiiviimpi, jotta painikkeet näkyvät ilman vieritystä */
  .hero { padding-bottom: 2.2rem; }
  .hero__ala { gap: 1.4rem; padding-top: 1.2rem; }
  .hero__iskulause { max-width: 100%; }

  /* Galleria kahteen palstaan, hieman tiiviimmin */
  .galleria { columns: 2; --gal-vali: .5rem; }

  /* TikTok-varakortit: kaksi rinnakkain */
  .tiktok-ruudukko { grid-template-columns: 1fr 1fr; }
  .tiktok-ruudukko > :nth-child(3) { display: none; }

  /* Kuvaparit allekkain */
  .kuvapari { gap: .7rem; }

  /* Footer: hengittävämpi, ja tilaa alapalkille — kiinteä "Varaa pöytä"
     -palkki ei saa peittää tekijänoikeusriviä. */
  .footeri__ala { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .footeri { padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 479px) {
  /* Tietolistat: otsikko oman rivinsä päälle, arvo alle — ei puristusta */
  .tietolista li { flex-direction: column; gap: .2rem; padding-block: .8rem; }
  .tietolista dt, .tietolista .avain { min-width: 0; }

  /* Osoiterivi heron yläpuolella lyhenee */
  .hero__ylanimi .vain-leveä { display: none; }

  /* Gallerian kuvatekstit pois tieltä */
  .media__merkinta { padding: .55rem .8rem; font-size: .62rem; }
}

/* Erittäin kapeat laitteet (esim. 320 px) */
@media (max-width: 359px) {
  :root { --gutter: 1.05rem; }
  .galleria { columns: 1; }
  .tiktok-ruudukko { grid-template-columns: 1fr; }
  .tiktok-ruudukko > :nth-child(2) { display: none; }
}

/* Puhelin vaaka-asennossa: hero ei saa täyttää koko matalaa ruutua */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--header-h-min) + 2.5rem) 2.5rem; }
  .hero h1 { font-size: clamp(2.4rem, 8vw, 4rem); }
  .hero__vieritys { display: none; }
  .mobiilivalikko { justify-content: flex-start; padding-top: calc(var(--header-h) + 1.2rem); }
  .mobiilivalikko a.mob-linkki { font-size: 1.05rem; padding: .3em 0; min-height: 44px; }
  /* Vaaka-asennossa ruutu on matala mutta leveä: linkit kahteen palstaan,
     jolloin koko valikko mahtuu näkyviin ilman vieritystä. */
  .mobiilivalikko__sisus { max-width: 940px; }
  .mobiilivalikko__sisus > nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.6rem, 5vw, 3rem);
  }
  .mobiilivalikko__jalki {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    column-gap: clamp(1.6rem, 5vw, 3rem);
    gap: .35rem clamp(1.6rem, 5vw, 3rem);
  }
  .mobiilivalikko__yhteys + .mobiilivalikko__yhteys { border-top: 0; }
  .mobiilivalikko__jalki .nappi { margin-top: 0; }
}

/* Kaikkein matalimmat vaakaruudut (esim. 740x360): kavennetaan ylätilaa,
   jotta valikko mahtuu kokonaan ilman vieritystä. Kosketuskohteet
   pysyvät 44 px:ssä. */
@media (max-height: 400px) and (orientation: landscape) {
  .mobiilivalikko {
    padding-top: calc(var(--header-h-min) + .7rem);
    padding-bottom: 1.2rem;
  }
  .mobiilivalikko a.mob-linkki { font-size: 1rem; padding: .18em 0; }
  .mobiilivalikko__jalki { margin-top: .6rem; }
}

/* Lomakekentät vähintään 16 px, muuten iOS zoomaa sivun kenttään napautettaessa */
@media (max-width: 860px) {
  input, textarea, select,
  .kentta input, .kentta textarea, .kentta select { font-size: 16px; }
}

/* Kosketuskohteiden vähimmäiskoko: puhelin- ja sähköpostilinkit ovat
   toimintoja, ei koristeita — niihin pitää osua kerralla. */
@media (hover: none) and (pointer: coarse) {
  .logo { min-height: 48px; align-items: center; }
  /* Tabletti vaaka-asennossa nayttaa työpöytävalikon — kosketuskoko myös siihen */
  .navi a { padding-block: .78rem; }
  .mobiilivalikko__yhteys {
    display: flex;
    align-items: center;
    min-height: 46px;
  }
  .tietolista .arvo a,
  .tietolista a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Osoitelinkki EI saa olla flex: silloin selain pudottaa välilyönnin
     pilkun jälkeen ja tulee "Talvikkitie 30,01300 Vantaa". */
  .footeri address a {
    display: inline-block;
    min-height: 44px;
    padding-block: .6rem;
  }
  .tietolista li { padding-block: .55rem; }
  .footeri ul a,
  .footeri__iskulause a { display: inline-flex; align-items: center; min-height: 44px; }
  .footeri ul { gap: .1rem; }
  .tiktok-syote blockquote a { display: inline-flex; min-height: 44px; align-items: center; }
}

/* Lightbox kosketuskäytössä: napit isommiksi ja pois alapalkin alta */
@media (max-width: 719px) {
  .valolaatikko { padding: 3.5rem 1rem 5rem; }
  .valolaatikko img { max-height: 68vh; }
  .valolaatikko__sulje, .valolaatikko__nuoli { width: 46px; height: 46px; }
  .valolaatikko__nuoli--edell { left: .8rem; }
  .valolaatikko__nuoli--seur { right: .8rem; }
  .valolaatikko__sulje { top: .8rem; right: .8rem; }
}


/* ==========================================================================
   24 EFEKTIT
   Tavoite: sivusto tuntuu kalliilta ja huolellisesti tehdyltä — ei
   näyttävältä demolta. Jokainen liike on lyhyt, pehmeä ja perusteltu.
   Kaikki tässä osiossa kytkeytyy pois, jos käyttäjä on valinnut
   "vähennä liikettä" -asetuksen (ks. osio 21).
   ========================================================================== */

/* --------------------------------------------------- 24.1 SIVUN AVAUS */
/* Lyhyt esirippu ensimmäisellä käynnillä: nimi nousee hiilloksesta,
   kuparinen viiva vetäistään auki, verho nousee pois. Kesto ~1,2 s. */
.esirippu {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: transform .82s cubic-bezier(.76,0,.24,1), opacity .5s ease .32s;
  will-change: transform;
}
.esirippu::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(140vw, 1200px); aspect-ratio: 2/1;
  transform: translate(-50%, -50%) scale(.6);
  background: radial-gradient(closest-side, rgba(201,85,42,.32), transparent 70%);
  opacity: 0;
  transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out);
}
.esirippu.on-kaynnissa::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.esirippu__sisus { position: relative; text-align: center; }
/* Avausnäkymän logo nousee esiin ja tarkentuu */
.esirippu__logo {
  display: block;
  width: auto;
  height: clamp(120px, 26vw, 200px);
  margin-inline: auto;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .9s var(--ease-out) .05s,
              transform 1.1s cubic-bezier(.16,1,.3,1) .05s;
}
.esirippu.on-kaynnissa .esirippu__logo { opacity: 1; transform: none; }

.esirippu__viiva {
  display: block;
  height: 1px;
  margin: 1.1rem auto 0;
  width: min(240px, 50vw);
  background: linear-gradient(90deg, transparent, var(--ember-lit), transparent);
  transform: scaleX(0);
  transition: transform .9s var(--ease-out) .35s;
}
.esirippu.on-kaynnissa .esirippu__viiva { transform: scaleX(1); }

.esirippu.on-poistuu { transform: translateY(-101%); opacity: .4; }
html.esirippu-paalla, html.esirippu-paalla body { overflow: hidden; }

/* ------------------------------------------- 24.2 SIVUNVAIHDON SIIRTYMÄ */
/* Selaimissa jotka tukevat View Transitions -rajapintaa sivut vaihtuvat
   pehmeästi ristiinhäivyttäen. Muissa selaimissa tämä ei tee mitään. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-ulos .32s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-sisaan .42s cubic-bezier(0,0,.2,1) both; }
@keyframes vt-ulos  { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-sisaan { from { opacity: 0; transform: translateY(14px); } }
.headeri { view-transition-name: liekki-headeri; }
.mobiilipalkki { view-transition-name: liekki-palkki; }

/* --------------------------------------------------- 24.3 VIERITYSPALKKI */
.vieritys-palkki {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.headeri.on-kiinni .vieritys-palkki { opacity: 1; }
.vieritys-palkki span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--ember-deep), var(--ember-lit) 70%, #FFC48A);
  box-shadow: 0 0 12px rgba(233,116,59,.55);
}

/* ------------------------------------------ 24.4 OTSIKOT SANA KERRALLAAN */
.sana { display: inline-block; overflow: hidden; vertical-align: bottom; }
.sana > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(108%);
  transition: transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--s, 0) * 55ms);
}
[data-sanat].on-nakyvissa .sana > i,
.on-nakyvissa [data-sanat] .sana > i { transform: none; }
/* Otsikko, joka animoituu sana kerrallaan, ei tarvitse erillistä häivytystä */
[data-sanat][data-esiin] { opacity: 1; transform: none; }

/* --------------------------------------------------- 24.5 KUVIEN VERHO */
/* Kuva paljastuu alhaalta ylös nousevan verhon takaa ja asettuu
   paikalleen hienoisesta lähikuvasta. */
.media { --kuva-zoom: 1; }
.media img { transform: scale(var(--kuva-zoom)); }
.media--zoom:hover, a.media:hover { --kuva-zoom: 1.045; }

.media[data-verho] { --kuva-zoom: 1.09; }
.media[data-verho]::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 4;
  background: var(--ink);
  transform-origin: bottom;
  transition: transform 1.05s cubic-bezier(.76,0,.24,1);
}
.media[data-verho].on-nakyvissa { --kuva-zoom: 1; }
.media[data-verho].on-nakyvissa::before { transform: scaleY(0); }
.media[data-verho] img { transition: transform 1.5s var(--ease-out); }
.media[data-verho].on-nakyvissa:hover { --kuva-zoom: 1.045; }

/* ------------------------------------------------------ 24.6 HIILINAUHA */
/* Hitaasti liukuva typografinen nauha — editorial-lehden henkeä. */
.nauha {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  background: var(--char);
  padding-block: clamp(.9rem, 2vw, 1.4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nauha__rata {
  display: flex;
  width: max-content;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  animation: nauha-liuku 46s linear infinite;
}
.nauha__rata > span {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  font-family: var(--display);
  font-size: clamp(.92rem, 1.5vw, 1.28rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-3);
  white-space: nowrap;
}
.nauha__rata b { color: var(--ember-lit); font-weight: 500; }
.nauha:hover .nauha__rata { animation-play-state: paused; }
@keyframes nauha-liuku { to { transform: translateX(-50%); } }

/* -------------------------------------------------- 24.7 KURSORIN HEHKU */
/* Painikkeen ja kortin pinnalle syttyy lämmin hehku sinne, missä osoitin on. */
@media (hover: hover) and (pointer: fine) {
  .nappi::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%),
                rgba(255,196,138,.30), transparent 62%);
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
  }
  .nappi:hover::before { opacity: 1; }

  .kortti, .lounas-kortti, .uutinen, .luku { position: relative; overflow: hidden; }
  .kortti::after, .lounas-kortti::after, .luku::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                rgba(233,116,59,.13), transparent 68%);
    opacity: 0;
    transition: opacity .45s var(--ease);
  }
  .kortti:hover::after, .lounas-kortti:hover::after, .luku:hover::after { opacity: 1; }

  /* Gallerian kuva kohoaa hieman ja saa lämpimän reunuksen */
  .galleria__kohde { transition: transform .5s var(--ease-out); }
  .galleria__kohde:hover { transform: translateY(-4px); }
}

/* ------------------------------------------------------ 24.8 PARALLAKSI */
.hero__media, [data-parallaksi] .band__media, [data-parallaksi] .sivuhero__media {
  will-change: transform;
}

/* --------------------------------------------------------- 24.9 LASKURI */
.luku__arvo { font-variant-numeric: tabular-nums; }

/* ------------------------------------------ 24.10 LIGHTBOXIN ZOOM-AVAUS */
.valolaatikko img { will-change: transform; }

/* ------------------------------------------------- 24.11 LIIKKEEN ESTO */
@media (prefers-reduced-motion: reduce) {
  .esirippu { display: none !important; }
  .nauha__rata { animation: none; }
  .sana > i { transform: none !important; }
  .media[data-verho]::before { display: none; }
  .media[data-verho] { --kuva-zoom: 1; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ------------------------------------- 24.12 MIKROTEKSTIEN LUETTAVUUS */
/* Harvennetut versaalit ovat osa talon ilmettä, mutta alle 11 px:n teksti
   on puhelimessa hankala lukea. max() pitää koon vähintään lattiassa ja
   antaa sen silti kasvaa, jos käyttäjä on suurentanut selaimen fonttia.
   Tämän lohkon on oltava tiedoston lopussa, jotta se voittaa aiemmat
   mediakyselyt, jotka pienentävät samoja tekstejä puhelimessa. */
.aanestyslaatikko__ylatunnus,
.lounaspaiva__merkki,
.menu-rivi__merkit,
.menu-rivi__hintalisa,
.media__merkinta,
.some-ikoni span { font-size: max(11px, .66rem); }

.mobiilivalikko__yhteys,
.tietolista__lisa,
.menu-ryhma__lisa,
.lounaspaiva__pvm,
.some-kortti__linkki,
.tiktok-vara-teksti,
.menu-tiedot__avain,
.lounas-sisaltyy__otsikko { font-size: max(11.5px, .68rem); }

/* .menu-selite on merkitty !importantiksi aiemmin, joten lattia tarvitsee
   saman painon voittaakseen sen. */
.menu-selite { font-size: max(11.5px, .68rem) !important; }
.hero__vieritys { font-size: max(11px, .62rem); }

/* --------------------------------- 24.13 KAIKKEIN KAPEIMMAT RUUDUT */
/* Taittuvat puhelimet suljettuna ovat vain 280 px leveitä. Ilmoituslaatikon
   sisennykset ja nappien kiinteät mitat kevennetään, jottei mikään työnnä
   sivua vaakasuunnassa leveämmäksi kuin ruutu. */
@media (max-width: 360px) {
  .aanestyslaatikko {
    padding: 1rem .9rem;
    padding-right: 2.5rem;
  }
  .aanestyslaatikko__nappi {
    padding: .6rem .9rem;
    letter-spacing: .1em;
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
  .tyonalla__rivi { gap: .6rem; }
  .menu-valilehti { padding: .95rem .8rem; }
  .nappi, .nappi--pieni { max-width: 100%; }
  .tyhja-tila { padding: 1.4rem 1rem; }
}

/* Grid- ja flex-lapset saavat oletuksena vähimmäisleveydekseen sisältönsä
   min-content-leveyden, mikä työntää kapealla ruudulla koko sivua
   leveämmäksi. Sallitaan kutistuminen ja rivitetään pitkät parit. */
.split > *,
.kuori > * { min-width: 0; }

.aukiolot li {
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0;
}
.tyhja-tila strong { overflow-wrap: anywhere; }
.tietolista__lisa,
.lounaspaiva__pvm { overflow-wrap: anywhere; }