/* =============================================================================
   JONI'S BARBER SHOP
   Värit: kuusi roolia, kontrastit mitattu (WCAG 2.1).
   Fontit: anodyne (Adobe Fonts, kitti ydl4dcr) · Yellowtail · Open Sans Condensed
   ============================================================================= */

@font-face {
  font-family: "Yellowtail";
  src: url("assets/fontit/Yellowtail-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("assets/fontit/OpenSans-VF.woff2") format("woff2-variations");
  font-weight: 300 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}

:root {
  --terva:    #1F1814;
  --sakka:    #722727;   /* tumma punainen — staff-osion maa */
  --viini:    #AD3D3D;   /* vaaleampi punainen — korostukset */
  --messinki: #C08A3E;
  --pahvi:    #DBCAAF;
  --kalkki:   #F0E7D8;

  /* Roolit tummalla maalla */
  --maa:      var(--terva);
  --muste:    var(--kalkki);   /* 14.3:1 */
  --muste-2:  var(--pahvi);    /* 10.9:1 */
  --aksentti: var(--messinki); /*  5.8:1 */
  --hiusviiva: #3B2E26;

  --otsikko: "anodyne", "Arial Narrow", sans-serif;
  --script:  "Yellowtail", cursive;
  --leipa:   "Open Sans", sans-serif;

  --reuna: clamp(14px, 2.2vw, 34px);
  --kouru: clamp(20px, 5vw, 80px);
  --jakso:  clamp(72px, 9vw, 132px);
  --syvyys: clamp(26px, 3.4vw, 48px);
  --nopea: .24s;
}

/* Punainen maa: kalkki 8.4:1, pahvi 6.4:1, messinki vain isolle (3.4:1) */
[data-maa="punainen"] {
  --maa:      var(--sakka);
  --muste:    var(--kalkki);
  --muste-2:  var(--pahvi);
  --aksentti: var(--kalkki);
  --hiusviiva: #8E3A3A;
}

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--terva);
  color: var(--muste);
  font-family: var(--leipa);
  font-stretch: 75%;
  font-size: 18px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.piilotettu {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.ohita {
  position: absolute; left: -9999px;
  background: var(--kalkki); color: var(--terva);
  padding: 14px 20px; z-index: 100; text-decoration: none;
}
.ohita:focus { left: 16px; top: 16px; }
:focus-visible { outline: 3px solid var(--messinki); outline-offset: 4px; }

/* =============================================================================
   NAARMUINEN PINTA
   Vain herossa ja Instagram-osiossa: muualla se söi kontrastia eikä
   tarkoittanut mitään.
   ============================================================================= */
.pinta::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Yksi koko ruudun kokoinen kuva, ei toistuvaa tiiltä: naarmut lukevat
     omassa mittakaavassaan eivätkä pikkukuviona.

     Kuva on rajattu alkuperäisestä 5184 px lähteestä natiiviresoluutiolla
     eikä pienennetty: pienennys tappaa naarmujen rakeen ja terävöitys
     palauttaa vain sen jäljitelmän. Sivutuotteena tiedosto on puolet
     kevyempi — 230 kt vastaan 494 kt. */
  background: url("assets/tekstuuri.jpg") no-repeat center / cover;
  background-image: image-set(url("assets/tekstuuri.webp") type("image/webp"),
                              url("assets/tekstuuri.jpg")  type("image/jpeg"));
  /* screen eikä overlay: lähde on naarmuinen musta pinta, eli tummaa
     taustaa ja vaaleita naarmuja. Overlay ei tee lähes mustalla maalla
     juuri mitään, screen nostaa naarmut esiin ja jättää tumman koskematta. */
  mix-blend-mode: screen;
  opacity: .5;
  pointer-events: none;
}
.osio > * { position: relative; z-index: 1; }

/* =============================================================================
   VINYYLIURAT — alatunniste ja sitä edeltävä osio
   Tiheä samankeskinen kuvio kuin levyn pinnassa. repeating-radial-gradient
   maksaa yhden maalauksen eikä lataa mitään.
   ============================================================================= */
.urat { position: relative; }
.urat::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Vuorottelevat leveät kaistat, ei ohuita viivoja: vaalea ja tumma
     vuorotellen samankeskisesti. Jakso 36 px eli 18 px kumpaakin. */
  background: repeating-radial-gradient(circle at 50% var(--urat-y, 50%),
    rgba(240,231,216,.075) 0 18px,
    rgba(0,0,0,.20)       18px 36px);
  -webkit-mask: radial-gradient(circle at 50% var(--urat-y, 50%),
      #000 0 46%, rgba(0,0,0,.6) 70%, transparent 88%);
          mask: radial-gradient(circle at 50% var(--urat-y, 50%),
      #000 0 46%, rgba(0,0,0,.6) 70%, transparent 88%);
}
/* Alatunnisteessa urat kiertävät logoympyrää, edeltävässä osiossa ne
   jatkuvat ylhäältä samasta keskipisteestä. */
.yhteys { --urat-y: 42%; }
.ajankohtaista { --urat-y: 128%; }

/* =============================================================================
   NAVI
   ============================================================================= */
.navi {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  padding: clamp(16px, 2.2vw, 28px) calc(var(--reuna) + var(--kouru));
}
.navi ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 38px);
}
.navi a {
  /* Ei Anodynea eikä kondensoitua versaalia: leiskassa valikko on tavallista
     leveyttä ja isot alkukirjaimet. */
  font-family: var(--leipa); font-stretch: 100%; font-weight: 400;
  font-size: 15px; letter-spacing: .02em;
  color: var(--pahvi); text-decoration: none;
  padding: 10px 2px; display: inline-block; min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: color var(--nopea) ease, border-color var(--nopea) ease;
}
.navi a:hover { color: var(--kalkki); border-bottom-color: var(--messinki); }

/* =============================================================================
   RUNKO JA TYYPPI
   ============================================================================= */
.osio {
  position: relative;
  background: var(--maa); color: var(--muste);
  padding: clamp(64px, 10vw, 128px) 0;
}
.sisus {
  max-width: 1180px; margin: 0 auto;
  padding: 0 calc(var(--reuna) + var(--kouru));
}

.h-iso, .h-osio {
  font-family: var(--otsikko);
  line-height: 1.05;      /* mitattu minimi 1.00 — tämä jättää ilmaa Ä:lle */
  letter-spacing: .01em; margin: 0; text-wrap: balance;
}
.h-iso  { font-size: clamp(2.2rem, 1rem + 4.4vw, 4.8rem); color: var(--viini); }
.h-osio { font-size: clamp(2.1rem, 1rem + 4.2vw, 4.5rem); }

.script { font-family: var(--script); line-height: 1.21; }  /* mitattu minimi */
.leipa  { max-width: 62ch; color: var(--muste-2); margin: 0 0 18px; font-size: 16px; }

.linkki {
  color: var(--aksentti); text-decoration: none; background: none; border: 0;
  border-bottom: 1px solid currentColor; padding: 0 0 2px; cursor: pointer;
  font: inherit;
}

.nappi {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 15px 40px;
  /* Leiskan nappi on tavallista leveyttä ja harvennettu, ei Anodyne. */
  font-family: var(--leipa); font-stretch: 100%; font-weight: 600;
  font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.05; text-decoration: none; width: max-content;
  white-space: nowrap; border-radius: 999px;
  transition: transform var(--nopea) cubic-bezier(.22,.61,.36,1), background var(--nopea) ease;
}
.nappi--kulta { background: var(--messinki); color: var(--kalkki); }
.nappi--kulta:hover { transform: translateY(-2px); background: #CE9748; }

/* --- Käsin piirretyt kaaret napin ympärillä -------------------------------
   Ei kehystä vaan kaksi irrallista vetoa, jotka kiertävät pilleriä
   vastakkaisista kulmista ja jatkavat sen ohi. Veto ei sulkeudu.

   naru.svg ei käy tähän: se on suora veto eikä sitä voi taivuttaa kaareksi
   maskilla. Aiemmin kokeiltu ja hylätty myös border-image (antaa vain ohuet
   pystyreunat) ja container query napin omalla elementillä (irrottaa
   leveyden sisällöstä, jolloin nappi kutistuu).

   preserveAspectRatio="none" venyttää kaaret napin mittoihin. Se vääristää
   viivan paksuutta hieman, mikä on käsin piirretyssä jäljessä pikemminkin
   etu kuin haitta. */
.kehys {
  /* Laatikko on napin ulkopuolella yhtä paljon kuin viewBoxissa on väljyyttä
     (34/300 sivuilla, 24/96 ylhäällä ja alhaalla). Muuten ylitysalue
     puristuu pillerin sisään ja kaaret piirtyvät sen päälle. */
  position: absolute;
  left: -11.3%; right: -11.3%; top: -25%; bottom: -25%;
  pointer-events: none; overflow: visible;
}
.kehys svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kehys__veto {
  fill: none;
  stroke: #D9A96A;
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* paksuus ei veny napin mukana */
}

@keyframes vire {
  0%   { transform: translate(0, 0)        rotate(0deg);    }
  33%  { transform: translate(.9px, -.7px) rotate(.35deg);  }
  66%  { transform: translate(-.7px, .9px) rotate(-.3deg);  }
}
.nappi:hover .kehys, .nappi:focus-visible .kehys {
  animation: vire .42s steps(1) infinite;
}

/* =============================================================================
   HERO — kyltti roikkuu naruissa
   Heilahdus tehdään .kyltti-elementille, jonka kiertokeskipiste on sen
   yläpuolella: silloin narut ja levy kääntyvät yhtenä kappaleena kuten
   oikea kyltti. JS antaa vaimenevan heilahduksen.
   ============================================================================= */
.hero {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 0;
  overflow: hidden;
  /* Sarana on yläreunassa ja katsoja edessä: perspective tekee taitoksesta
     syvyyssuuntaisen eikä litteän kierron. */
  perspective: 1700px;
  perspective-origin: 50% 0%;
}
/* Koko hero on kyltti: naarmuinen tausta heilahtaa mukana. Levy on
   ylikokoinen, jotta kierto ei paljasta kulmia. Kiertokeskipiste on
   yläreunan yläpuolella, kuten naruissa roikkuvalla kyltillä. */
.kyltti {
  position: relative;
  width: 118%; height: 116%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 4vh, 52px);
  background: var(--terva);
  /* Sarana yläreunassa: kyltti taittuu alas paikoilleen. */
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}
.kyltti__sisus {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(24px, 4vh, 48px);
  padding-top: clamp(40px, 7vh, 88px);
}
.kyltti__naru {
  position: absolute; top: 0; width: 2px;
  height: clamp(40px, 7vh, 88px);
  background: linear-gradient(180deg, rgba(219,202,175,.12), rgba(219,202,175,.5));
}
.kyltti__naru--v { left: 33%; transform: rotate(3deg); transform-origin: 50% 0; }
.kyltti__naru--o { right: 33%; transform: rotate(-3deg); transform-origin: 50% 0; }

/* Merkki maskina eikä filtterinä: silloin väri on täsmälleen --kalkki
   eikä suodattimien arvaus. */
.kyltti__merkki {
  width: min(84vw, 620px); aspect-ratio: 723 / 652;
  background: var(--kalkki);
  -webkit-mask: url("assets/logo-merkki.svg") no-repeat center / contain;
          mask: url("assets/logo-merkki.svg") no-repeat center / contain;
}

/* =============================================================================
   INFOPALKKI — piiloutuu itsestään jos tekstiä ei ole
   ============================================================================= */
.infopalkki { background: var(--viini); color: var(--kalkki); position: relative; }
.infopalkki[hidden] { display: none; }
.infopalkki__sisus {
  max-width: 1180px; margin: 0 auto;
  padding: 12px calc(var(--reuna) + var(--kouru));
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
}
.infopalkki__lbl {
  font-family: var(--otsikko); font-size: 13px; line-height: 1.05;
  background: var(--terva); color: var(--kalkki);
  padding: 5px 10px; white-space: nowrap;
}
.infopalkki p { margin: 0; font-size: 15px; min-width: 0; flex: 1 1 320px; }

/* =============================================================================
   MEISTÄ — teksti keskellä, levyt reunoilla
   ============================================================================= */
.meista { overflow: hidden; text-align: center; }
.meista__teksti { display: grid; justify-items: center; gap: 22px; }
.meista .leipa { text-align: center; }
.script--tervetuloa {
  font-size: clamp(2rem, 1rem + 3vw, 3.2rem);
  color: var(--messinki); margin: 6px 0 0;
}

/* =============================================================================
   LEVYT
   Levy on kuvatiedosto (oikea vinyyli), etiketti sen päällä valokuvana.
   ============================================================================= */
.levy { position: relative; width: var(--levy, 260px); aspect-ratio: 900 / 912; }
.levy > img { width: 100%; height: 100%; object-fit: contain; }
.levy__etiketti {
  position: absolute; left: 50%; top: 50%;
  width: 31%; height: 31%; transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}
.levy__etiketti img { width: 100%; height: 100%; object-fit: cover; }

.levy--sivu {
  --levy: clamp(150px, 20vw, 300px);
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 0; opacity: .92;
}
.levy--vasen { left: calc(var(--reuna) - 4vw); }
.levy--oikea { right: calc(var(--reuna) - 4vw); }

.levy--staff { --levy: clamp(130px, 15vw, 220px); justify-self: end; align-self: center; }

/* Levyt eivät ole oma osionsa eikä niillä ole omaa taustaväriä: ne istuvat
   punaisen ja tumman osion rajan päällä ja peittävät sahalaidan osittain.
   Negatiivinen ylämarginaali nostaa ne edellisen osion puolelle, ja z-index
   pitää ne molempien taustojen päällä. */
.levyrivi__ryhma {
  --levy: clamp(140px, 19vw, 280px);
  position: relative; z-index: 4;
  display: flex; justify-content: center; align-items: center;
  /* Puolet levyn korkeudesta plus osion yläpehmuste: silloin levyjen
     keskiviiva osuu osioiden saumaan ja ne jäävät puoliksi molemmille
     puolille, sahalaidan päälle. */
  margin-top: calc(-1 * (var(--levy) / 2 + clamp(64px, 10vw, 128px)));
  margin-bottom: clamp(30px, 5vw, 72px);
  pointer-events: none;
}
.levy--rivi {
  --levy: clamp(140px, 19vw, 280px);
  margin-inline: calc(var(--levy) / -3.1);   /* päällekkäin ennen leviämistä */
  will-change: transform;
}

/* =============================================================================
   SAHALAITA
   Jakso ja syvyys ovat toisistaan riippumattomat, siksi maski eikä kaksi
   gradienttia: gradienttikikka sitoo kulman kautta syvyyden jakson puolikkaaseen.
   ============================================================================= */
.vaihto {
  position: absolute; left: 0; right: 0; top: calc(var(--syvyys) * -1 + 1px);
  height: var(--syvyys); overflow: hidden; pointer-events: none; z-index: 2;
}
.vaihto__hammas {
  position: absolute; left: -30%; width: 160%; top: 0; bottom: 0;
  transform-origin: 50% 100%; background: var(--tuleva);
  -webkit-mask: var(--hammas-kuvio) 0 0 / var(--jakso) 100% repeat-x;
          mask: var(--hammas-kuvio) 0 0 / var(--jakso) 100% repeat-x;
  will-change: transform;
}
:root {
  --hammas-kuvio: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,100 50,0 100,100" fill="black"/></svg>');
}
.vaihto--punaiseen { --tuleva: var(--sakka); }
.vaihto--tummaan   { --tuleva: var(--terva); }

/* =============================================================================
   STAFF
   ============================================================================= */
.staff__paa {
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap;
  margin-bottom: clamp(34px, 5vw, 64px);
}
.staff__iskulause { font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); color: var(--kalkki); margin: 0; }

/* Osio on tarkoituksella kahden ruudun korkuinen: Joni täyttää ylemmän,
   muu porukka alemman. Se ei saa mahtua samaan ruutuun. */
.staff__nosto {
  display: grid; gap: clamp(24px, 3.6vw, 50px);
  grid-template-columns: 1fr; align-items: center; align-content: center;
  min-height: 86dvh;
  margin-bottom: clamp(30px, 4vw, 54px);
}
@media (min-width: 860px) {
  .staff__nosto { grid-template-columns: minmax(320px, 470px) minmax(0, 1fr) auto; }
}
.staff__nimi { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); color: var(--kalkki); margin: 0 0 12px; }

.polaroid {
  margin: 0; background: #FBF7EF; padding: 12px 12px 0;
  box-shadow: 0 18px 34px -20px rgba(0,0,0,.6);
  transform: rotate(var(--kallistus, 0deg));
  will-change: transform;
}
.polaroid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.polaroid__alareuna { padding: 10px 4px 14px; text-align: center; }
.polaroid__nimi {
  font-family: var(--script); line-height: 1.21;
  font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.6rem); color: var(--terva);
}

/* Polaroidit ovat kasa pöydällä, eivät rivi: ne menevät limittäin, nousevat
   ja laskevat, ja kallistuvat eri suuntiin. Limitys tehdään negatiivisella
   marginaalilla eikä absoluuttisella asemoinnilla, jotta rivi kääriytyy
   kapealla ruudulla itsestään. */
.staff .sisus { max-width: 1320px; }
.staff__muut {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  min-height: 84dvh;
  margin-bottom: clamp(34px, 5vw, 60px);
}
.staff__muut > * {
  flex: 0 0 clamp(210px, 25vw, 330px);
  margin-inline: clamp(-22px, -1.5vw, -10px);
  margin-block: var(--nosto, 0);
}
.staff__muut > *:nth-child(1) { --nosto: 26px;  z-index: 1; }
.staff__muut > *:nth-child(2) { --nosto: -18px; z-index: 3; }
.staff__muut > *:nth-child(3) { --nosto: 34px;  z-index: 2; }
.staff__muut > *:nth-child(4) { --nosto: -8px;  z-index: 4; }
.staff__muut > *:hover { z-index: 6; }

.staff__jalki {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
}
.staff__jalki .leipa { flex: 1 1 260px; margin: 0; font-size: 15px; }

/* =============================================================================
   INSTAGRAM
   ============================================================================= */
.ig__paa {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(26px, 4vw, 48px);
}
.ig__sydan { display: block; width: clamp(30px, 3.4vw, 44px); flex: 0 0 auto; }
.sydan { width: 100%; height: auto; overflow: visible; }
.sydan__aaret { fill: none; stroke: var(--viini); stroke-width: 2.4; }
.sydan__taytto { fill: var(--viini); transform-box: fill-box; transform-origin: center; }

.ig__rivi {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 3px; padding-inline: var(--reuna);
}
.ig__kuva { position: relative; aspect-ratio: 1; overflow: hidden; background: #2A211C; }
.ig__kuva img { width: 100%; height: 100%; object-fit: cover; }
.ig__tunnus { margin: clamp(16px, 2.4vw, 28px) 0 0; text-align: right; font-size: 15px; }

/* =============================================================================
   AJANKOHTAISTA
   Natiivi <details>: näppäimistö ja ruudunlukija toimivat ilman JS:ää.
   ============================================================================= */
.uutiset { margin-top: clamp(26px, 4vw, 48px); }
.uutinen { border-bottom: 1px solid var(--hiusviiva); }
.uutinen summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; min-height: 44px;
}
.uutinen summary::-webkit-details-marker { display: none; }
.uutinen__otsikko { font-size: clamp(1.3rem, .9rem + 1.2vw, 1.9rem); color: var(--messinki); }
.uutinen__merkki { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.uutinen__merkki::before, .uutinen__merkki::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px;
  background: var(--muste-2); transition: transform var(--nopea) ease;
}
.uutinen__merkki::after { transform: rotate(90deg); }
.uutinen[open] .uutinen__merkki::after { transform: rotate(0deg); }
.uutinen p { padding-bottom: 22px; }
.uutiset__lisaa { text-align: right; margin: 22px 0 0; font-size: 15px; }

/* =============================================================================
   YHTEYS
   ============================================================================= */
.yhteys { text-align: center; padding-bottom: clamp(50px, 7vw, 90px); }
/* Leveys JA korkeus erikseen: pelkkä aspect-ratio antaa periksi heti kun
   sisältö on korkeampi kuin leveä, ja ympyrästä tulee soikio. */
.yhteys__ympyra {
  width: min(84vw, 480px); height: min(84vw, 480px);
  margin: 0 auto; border-radius: 50%;
  background: var(--sakka);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.4vw, 22px);
  padding: clamp(24px, 4vw, 44px);
}
.yhteys__merkki {
  width: min(40vw, 210px); margin: 0 auto;
  filter: brightness(0) invert(1) sepia(.10) saturate(.7) brightness(.99);
}
.yhteys__tiedot { text-align: center; }
.yhteys__tiedot p { margin: 0 0 6px; font-size: 14px; color: var(--kalkki); }
.yhteys__some {
  display: flex; justify-content: center; gap: 18px;
  margin: clamp(26px, 4vw, 44px) 0 0;
}
.yhteys__some a {
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--muste-2); transition: color var(--nopea) ease;
}
.yhteys__some a:hover { color: var(--kalkki); }
.ikoni { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ikoni__piste, .ikoni__taytto { fill: currentColor; stroke: none; }
.alatunniste { margin: clamp(26px, 4vw, 42px) 0 0; font-size: 14px; color: var(--muste-2); }

/* =============================================================================
   KELLUVA AJANVARAUS
   ============================================================================= */
.varaa-kelluva {
  position: fixed; right: calc(var(--reuna) + 14px); bottom: clamp(14px, 2.2vw, 28px);
  z-index: 60; display: inline-flex; align-items: center; gap: 11px;
  min-height: 52px; padding: 14px 24px;
  background: var(--messinki); color: var(--terva);
  border-radius: 999px;
  font-family: var(--otsikko); font-size: 17px; line-height: 1.05; text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.9);
  transform: translateY(140%); will-change: transform;
}
.varaa-kelluva__piste { width: 8px; height: 8px; border-radius: 50%; background: var(--terva); }
@media (max-width: 560px) {
  .varaa-kelluva { left: calc(var(--reuna) + 12px); right: calc(var(--reuna) + 12px); justify-content: center; }
}

/* =============================================================================
   RIVIMASKI
   ============================================================================= */
.maski { display: block; overflow: hidden; padding-bottom: .06em; }
.maski__sisa { display: block; will-change: transform; }

/* =============================================================================
   PUHELIN
   ============================================================================= */
@media (max-width: 860px) {
  :root { --syvyys: clamp(20px, 5vw, 32px); --jakso: clamp(58px, 15vw, 92px); }
  body { font-size: 17px; }
  .levy--sivu { --levy: clamp(96px, 26vw, 150px); opacity: .5; }
  .levy--vasen { left: calc(var(--reuna) - 12vw); }
  .levy--oikea { right: calc(var(--reuna) - 12vw); }
  .levy--staff { display: none; }
  .polaroid { transform: none; }
  .staff__muut > * { margin-inline: 8px; margin-block: 8px; flex-basis: clamp(180px, 66vw, 300px); }
  .staff__nosto, .staff__muut { min-height: 0; }
  .ig__rivi { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; }
  .staff__jalki { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nappi, .varaa-kelluva, .uutinen__merkki::before, .uutinen__merkki::after { transition: none; }
  .varaa-kelluva { transform: none; }
}