/* Hiusstudio Kaislaranta: "Kaislikko"
   Heron kuva on seitsemän kapeaa ikkunaa samaan kuvaan, kuin kaislat rannassa. Ikkunoiden yläreunat
   ovat eri korkeuksilla, mutta kuva pysyy yhtenäisenä. Sivun avautuessa suikaleet nousevat aaltona.
   Fontit: Bodoni Moda (otsikot), Albert Sans (teksti). */

@font-face {
  font-family: "Bodoni Moda";
  src: url("bodoni-moda.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("albert-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --usva: #E8EBE6;      /* pohja, aamu-usva järvellä */
  --jarvi: #1D3A41;     /* syvä petrooli: napit, varausosio (valkoinen 12:1) */
  --jarvi-syva: #142B30;
  --kaisla: #C4AC72;    /* kuivan kaislan olki: viivat ja korostukset järven päällä (5,5:1) */
  --muste: #162024;     /* teksti (13,8:1) */
  --harmaa: #4A5A5C;    /* toissijainen teksti (6,0:1) */
  --viiva: #C9CFC8;
  --jarvi-teksti: #D5DEDC;  /* toissijainen teksti järven päällä (8,9:1) */
  --jarvi-viiva: #3A5559;
  --auki: #2F6B4F;

  --otsikko: "Bodoni Moda", "Didot", Georgia, serif;
  --teksti: "Albert Sans", system-ui, sans-serif;
  --ulko: max(1.25rem, calc((100% - 78rem) / 2));
  --rako: 3px;     /* suikaleiden väli */
  --porras: 0.7rem; /* suikaleiden yläreunojen porrastuksen yksikkö */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--usva);
  color: var(--muste);
  font: 400 1.0625rem/1.6 var(--teksti);
  overflow-wrap: break-word;
}
h1, h2 {
  margin: 0;
  font-family: var(--otsikko);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  overflow-wrap: normal;
  text-wrap: balance;
}
h3 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.kehys { padding-inline: var(--ulko); }
.ohitus { position: absolute; left: 1rem; top: -4rem; padding: 0.6rem 1rem; background: var(--jarvi); color: #fff; z-index: 10; }
.ohitus:focus { top: 1rem; }

/* Napit: suorakulmaiset, ohut kehys */
.napit { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.nappi {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  border: 1px solid var(--jarvi); border-radius: 2px;
  background: var(--jarvi); color: #fff;
  font-weight: 500; letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.nappi:hover { background: var(--jarvi-syva); border-color: var(--jarvi-syva); }
.nappi-toissijainen { background: transparent; color: var(--jarvi); }
.nappi-toissijainen:hover { background: var(--jarvi); color: #fff; }
.nappi-pieni { flex-shrink: 0; white-space: nowrap; min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.9375rem; }
.nappi-vaalea { background: var(--usva); border-color: var(--usva); color: var(--jarvi); }
.nappi-vaalea:hover { background: #fff; border-color: #fff; }
.nappi-reuna { background: transparent; border-color: var(--jarvi-teksti); color: #fff; }
.nappi-reuna:hover { background: var(--usva); border-color: var(--usva); color: var(--jarvi); }

/* Yläpalkki */
.yla-sisa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.logo { font-family: var(--otsikko); font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em; text-decoration: none; text-wrap: balance; }

/* Hero ja kaislikko */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); }
.kaislat {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--rako);
  height: clamp(17rem, 52svh, 34rem);
  padding-inline: var(--ulko);
}
.kaisla { position: relative; overflow: hidden; margin-top: calc(var(--a) * var(--porras)); }
.kaisla picture {
  position: absolute;
  top: calc(-1 * var(--a) * var(--porras));
  left: calc(var(--i) * -1 * (100% + var(--rako)));
  width: calc(700% + 6 * var(--rako));
  height: calc(100% + var(--a) * var(--porras));
}
.kaisla img { width: 100%; height: 100%; object-fit: cover; }
/* --i = suikaleen järjestys, --a = yläreunan porras (kaislojen eri korkeudet) */
.kaisla:nth-child(1) { --i: 0; --a: 3; }
.kaisla:nth-child(2) { --i: 1; --a: 1; }
.kaisla:nth-child(3) { --i: 2; --a: 4.5; }
.kaisla:nth-child(4) { --i: 3; --a: 0; }
.kaisla:nth-child(5) { --i: 4; --a: 2.2; }
.kaisla:nth-child(6) { --i: 5; --a: 5.5; }
.kaisla:nth-child(7) { --i: 6; --a: 1.6; }

.hero-teksti { padding-top: 1.75rem; padding-bottom: 2.5rem; }
.hero h1 { font-size: clamp(2.5rem, 1.45rem + 4.6vw, 5.75rem); max-width: 12ch; }
.hero-lause { max-width: 36ch; margin: 1rem 0 1.5rem; color: var(--harmaa); }

/* Tänään-rivi */
.tanaan-rivi { margin: 0; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--viiva); display: grid; gap: 1rem; }
.tanaan-rivi div { display: grid; gap: 0.1rem; }
.tanaan-rivi dt { font-size: 0.875rem; color: var(--harmaa); }
.tanaan-rivi dd { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.on-auki::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; border-radius: 50%; background: var(--auki); vertical-align: 0.1em; }

/* Hinnasto */
.hinnasto { padding-block: 3.5rem 4.5rem; }
.hinnasto h2, .kampaajat h2 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); margin-bottom: 2rem; }
.hinta-ryhmat { display: grid; gap: 2.5rem; }
.hinta-ryhmat h3 { padding-bottom: 0.75rem; border-bottom: 1px solid var(--muste); }
.hinnat { list-style: none; margin: 0; padding: 0; }
.hinnat li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 1rem; align-items: baseline;
  padding: 0.8rem 0; border-bottom: 1px solid var(--viiva);
}
.kesto { color: var(--harmaa); font-size: 0.875rem; white-space: nowrap; }
.hinta { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.huom { max-width: 52ch; margin: 2rem 0 0; color: var(--harmaa); font-size: 0.9375rem; }

/* Studio */
.studio { padding-bottom: 4.5rem; }
.studio-kuva { display: block; margin-inline: calc(-1 * var(--ulko)); }
.studio-kuva img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.studio-teksti { padding-top: 2rem; }
.studio h2 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); max-width: 14ch; margin-bottom: 1.25rem; }
.studio p { max-width: 42ch; color: var(--harmaa); }

/* Kampaajat: kapeat pystykuvat */
.kampaajat { padding-block: 4.5rem; border-top: 1px solid var(--viiva); }
.tiimi { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.tiimi li { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.tiimi-kuva img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; }
.tiimi h3 { font-family: var(--otsikko); font-size: 1.75rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.rooli { margin: 0.2rem 0 0.75rem; color: var(--harmaa); font-size: 0.9375rem; }
.tiimi-teksti p:last-child { margin: 0; font-size: 0.9375rem; }

/* Varaa aika: järven väri */
.varaa { background: var(--jarvi); color: #fff; padding-block: 4.5rem; }
.varaa-sisa { display: grid; gap: 3rem; }
.varaa h2 { font-size: clamp(3rem, 2rem + 5vw, 7rem); margin-bottom: 1.5rem; }
.varaa-teksti p { max-width: 40ch; color: var(--jarvi-teksti); margin-bottom: 2rem; }
.varaa h3 { color: var(--kaisla); font-weight: 500; margin-bottom: 0.75rem; }
.ajat { margin: 0 0 2rem; max-width: 24rem; }
.ajat div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--jarvi-viiva); }
.ajat dd { margin: 0; color: var(--jarvi-teksti); }
.ajat div.on-tanaan dt, .ajat div.on-tanaan dd { color: var(--kaisla); font-weight: 600; }
.ajat div.on-tanaan dt::after { content: ", tänään"; font-weight: 400; }
.varaa-tiedot p { color: var(--jarvi-teksti); }

/* Mobiilin varauspalkki: viimeinen lapsi .jatko-kääreessä, joten se tarttuu ruudun alareunaan
   vasta, kun kääre (studiosta alkaen) tulee näkyviin. Silloin heron omat napit ovat jo poissa ruudulta. */
.palkki {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  padding: 0.6rem var(--ulko) calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--usva); border-top: 1px solid var(--viiva);
}

/* Alatunniste */
.ala { background: var(--jarvi-syva); color: var(--jarvi-teksti); font-size: 0.875rem; }
.ala-sisa { display: grid; gap: 0.75rem; padding-block: 2.5rem 3rem; }
.ala p { margin: 0; }
.ala-logo { font-family: var(--otsikko); font-size: 1.75rem; color: #fff; line-height: 1.1; }

@media (min-width: 40rem) {
  :root { --rako: 5px; --porras: 1rem; }
  .tanaan-rivi { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 4rem; }
  .hinta-ryhmat { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .studio-kuva img { aspect-ratio: 3 / 2; }
}
@media (min-width: 48rem) {
  .tiimi { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
  .tiimi li { display: block; }
  .tiimi li:nth-child(2) { margin-top: 4rem; }
  .tiimi li:nth-child(3) { margin-top: 2rem; }
  .tiimi-kuva { display: block; margin-bottom: 1.25rem; }
}
@media (min-width: 64rem) {
  :root { --rako: 6px; --porras: 1.6rem; }
  .hero {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    min-height: min(calc(100svh - 4.5rem), 54rem);
    padding-inline: var(--ulko);
  }
  .kaislat { grid-column: 2; grid-row: 1; height: auto; padding: 0; }
  .hero-teksti { grid-column: 1; grid-row: 1; align-self: end; padding: 0 3rem 0 0; }
  .hero h1 { font-size: clamp(3.5rem, 1rem + 3.9vw, 5.25rem); max-width: none; }
  .hero-lause { font-size: 1.1875rem; }
  .tanaan-rivi { padding-block: 2.5rem 3rem; margin-top: 3rem; }
  .hinnasto { padding-block: 5rem 7rem; }
  .hinta-ryhmat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio { padding-bottom: 7rem; }
  .studio-sisa { display: grid; grid-template-columns: 5fr 7fr; gap: 6rem; align-items: end; }
  .studio-kuva { margin: 0; }
  .studio-kuva img { aspect-ratio: 2 / 3; }
  .studio-teksti { padding: 0 0 2rem; }
  .kampaajat { padding-block: 6rem 8rem; }
  .varaa { padding-block: 7rem; }
  .varaa-sisa { grid-template-columns: 7fr 5fr; gap: 6rem; align-items: start; }
  .palkki { display: none; }
}

/* Avausjakso: suikaleet nousevat aaltona ja muodostavat kuvan, sitten teksti. Vain transform ja opacity. */
@media (prefers-reduced-motion: no-preference) {
  .kaisla picture { animation: nousu-kaisla var(--kesto) cubic-bezier(0.2, 0.75, 0.15, 1) var(--viive) both; }
  .kaisla:nth-child(1) { --viive: 0.05s; --kesto: 1.25s; }
  .kaisla:nth-child(2) { --viive: 0.12s; --kesto: 1.4s; }
  .kaisla:nth-child(3) { --viive: 0.17s; --kesto: 1.1s; }
  .kaisla:nth-child(4) { --viive: 0.26s; --kesto: 1.5s; }
  .kaisla:nth-child(5) { --viive: 0.31s; --kesto: 1.2s; }
  .kaisla:nth-child(6) { --viive: 0.4s; --kesto: 1.35s; }
  .kaisla:nth-child(7) { --viive: 0.45s; --kesto: 1.15s; }
  .hero h1 { animation: nousu 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s both; }
  .hero-lause { animation: nousu 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.85s both; }
  .hero .napit { animation: nousu 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1s both; }
}
@keyframes nousu-kaisla {
  from { transform: translateY(101%); }
  to { transform: none; }
}
@keyframes nousu {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}