/* Parturi Kulmapää: "Kulmakyltti"
   Nimi on kuin kulmaliikkeen kyltti kahdella seinällä: toinen osa vaakasuoraan kuvan yllä,
   toinen pystysuoraan kuvan vieressä. Seinät kohtaavat keltaisessa kulmassa.
   Fontit: Antonio (kyltti ja otsikot), Public Sans (teksti). */

@font-face {
  font-family: "Antonio";
  src: url("antonio.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("public-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --liitu: #F2F1EC;    /* pohja */
  --betoni: #CFCCC4;   /* toissijainen pinta (musta teksti 12,6:1) */
  --musta: #0A0A0A;    /* teksti ja hintataulu (17,5:1 liidulla) */
  --kyltti: #F4C21B;   /* merkkikeltainen: kulma, napit, hinnat mustalla (11,9:1) */
  --harmaa: #5B5A56;   /* toissijainen teksti liidulla (6,1:1) */
  --harmaa-musta: #B4B2AB; /* toissijainen teksti mustalla (9,4:1) */
  --viiva: #D9D7D0;
  --viiva-musta: #2E2E2C;
  --auki: #2E7D32;

  --kyltti-fontti: "Antonio", "Arial Narrow", sans-serif;
  --teksti: "Public Sans", system-ui, sans-serif;
  --ulko: max(1.25rem, calc((100% - 78rem) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--liitu); color: var(--musta); font: 400 1.0625rem/1.55 var(--teksti); overflow-wrap: break-word; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--kyltti-fontti);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: normal;
  text-wrap: balance;
}
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: 3px solid currentColor; outline-offset: 3px; }

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

/* Jokainen osio alkaa keltaisesta kulmamerkistä */
h2::before { content: ""; display: block; width: 0.32em; height: 0.32em; margin-bottom: 0.3em; background: var(--kyltti); }

/* Napit */
.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: 2px solid var(--musta); background: var(--kyltti); color: var(--musta);
  font-weight: 600; text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.nappi:hover { background: var(--musta); color: var(--kyltti); }
.nappi-toissijainen { background: transparent; }

/* Yläpalkki */
.yla-sisa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.logo { font-family: var(--kyltti-fontti); font-weight: 700; font-size: 1.375rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; text-wrap: balance; }
.tila { font-size: 0.9375rem; font-weight: 500; white-space: nowrap; text-decoration: none; }
.tila.on-auki, .tila.on-kiinni { display: inline-flex; align-items: center; gap: 0.5em; }
.tila.on-auki::before, .tila.on-kiinni::before { content: ""; width: 0.6em; height: 0.6em; }
.tila.on-auki::before { background: var(--auki); }
.tila.on-kiinni::before { border: 1.5px solid currentColor; }

/* Kulmakyltti
   Fonttikoko lasketaan seinien merkkimääristä (--n1 vaaka, --n2 pysty):
   - vaakasana ja kulma täyttävät leveyden: n1 × k × fs + S = 100cqw, kun S = 1,1 × fs
   - pystysana mahtuu kuvan korkeuteen: n2 × k × fs ≤ H
   k = 0,52 on Antonion versaalien keskileveys (em) pienellä varalla. Ä:n pisteet ulottuvat 1,04 em:iin, joten 1,1 em jättää niiden yläpuolelle pienen raon. */
.kyltti { container-type: inline-size; }
.kyltti-sisa {
  --k: 0.52;
  --H: 84cqw;
  --fs-max: 34cqw;
  --fs: min(100cqw / (var(--n1) * var(--k) + 1.1), var(--H) / (var(--n2) * var(--k)), var(--fs-max));
  --S: calc(var(--fs) * 1.1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--S);
  grid-template-rows: var(--S) var(--H);
}
[data-vaaka="2"] { --n1: 2; }
[data-vaaka="3"] { --n1: 3; }
[data-vaaka="4"] { --n1: 4; }
[data-vaaka="5"] { --n1: 5; }
[data-vaaka="6"] { --n1: 6; }
[data-vaaka="7"] { --n1: 7; }
[data-vaaka="8"] { --n1: 8; }
[data-vaaka="9"] { --n1: 9; }
[data-vaaka="10"] { --n1: 10; }
[data-vaaka="11"] { --n1: 11; }
[data-vaaka="12"] { --n1: 12; }
[data-vaaka="13"] { --n1: 13; }
[data-vaaka="14"] { --n1: 14; }
[data-vaaka="15"] { --n1: 15; }
[data-vaaka="16"] { --n1: 16; }
[data-pysty="2"] { --n2: 2; }
[data-pysty="3"] { --n2: 3; }
[data-pysty="4"] { --n2: 4; }
[data-pysty="5"] { --n2: 5; }
[data-pysty="6"] { --n2: 6; }
[data-pysty="7"] { --n2: 7; }
[data-pysty="8"] { --n2: 8; }
[data-pysty="9"] { --n2: 9; }
[data-pysty="10"] { --n2: 10; }
[data-pysty="11"] { --n2: 11; }
[data-pysty="12"] { --n2: 12; }
[data-pysty="13"] { --n2: 13; }
[data-pysty="14"] { --n2: 14; }
[data-pysty="15"] { --n2: 15; }
[data-pysty="16"] { --n2: 16; }
.seina {
  overflow: hidden;
  background: var(--musta); color: var(--liitu);
  font: 700 var(--fs) / var(--S) var(--kyltti-fontti);
  text-transform: uppercase; white-space: nowrap;
}
.seina > span { display: inline-block; }
.seina-vaaka { grid-area: 1 / 1; text-align: right; }
.seina-pysty { grid-area: 2 / 2; writing-mode: vertical-rl; }
.kulma { grid-area: 1 / 2; background: var(--kyltti); }
.kyltti-kuva { grid-area: 2 / 1; overflow: hidden; }
.kyltti-kuva img { width: 100%; height: 100%; object-fit: cover; }

.hero-teksti { padding-block: 1.75rem 2.5rem; }
.hero h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 5.25rem); max-width: 16ch; }
.hero-lause { max-width: 38ch; margin: 1rem 0 1.5rem; color: var(--harmaa); }

/* Tänään-rivi */
.tanaan { background: var(--betoni); }
.tanaan-rivi { margin: 0; padding-block: 1.5rem; display: grid; gap: 1rem; }
.tanaan-rivi div { display: grid; gap: 0.1rem; }
.tanaan-rivi dt { font-size: 0.875rem; color: #45443F; }
.tanaan-rivi dd { margin: 0; font-weight: 600; }
.tanaan-rivi dd.on-auki::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.45em; background: var(--auki); vertical-align: 0.05em; }

/* Hintataulu */
.hinnasto { background: var(--musta); color: var(--liitu); padding-block: 4rem 4.5rem; }
.hinnasto h2, .parturit h2, .yhteys h2 { font-size: clamp(2.75rem, 2rem + 4vw, 5.5rem); margin-bottom: 2rem; }
.taulu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--viiva-musta); }
.taulu li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 1rem; align-items: baseline;
  padding: 0.9rem 0; border-bottom: 1px solid var(--viiva-musta);
}
.taulu .kesto { color: var(--harmaa-musta); font-size: 0.875rem; white-space: nowrap; }
.taulu .hinta { min-width: 3.5rem; text-align: right; color: var(--kyltti); font: 700 1.75rem/1 var(--kyltti-fontti); font-variant-numeric: tabular-nums; white-space: nowrap; }
.huom { margin: 1.75rem 0 0; max-width: 46ch; color: var(--harmaa-musta); font-size: 0.9375rem; }

/* Parturit */
.parturit { padding-block: 4.5rem; }
.tiimi { display: grid; gap: 2rem; }
.tiimi-kuva img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 75%; }
.tiimi-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.tiimi-lista li { padding-top: 1.25rem; border-top: 2px solid var(--musta); }
.tiimi h3 { font-size: 2.25rem; margin: 0 0 0.5rem; }
.tiimi p { max-width: 40ch; margin: 0; color: var(--harmaa); }

/* Yhteystiedot */
.yhteys { background: var(--betoni); padding-bottom: 4.5rem; }
.yhteys-kuva { display: block; margin-inline: calc(-1 * var(--ulko)); }
.yhteys-kuva img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.yhteys-teksti { padding-top: 2.5rem; }
.osoite { font-size: 1.125rem; font-weight: 600; }
.osoite + .ajat { margin-top: 1.5rem; }
.ajat { margin: 0 0 1.5rem; max-width: 24rem; border-top: 1px solid var(--musta); }
.ajat div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.5rem; border-bottom: 1px solid #B3B0A8; }
.ajat dd { margin: 0; font-variant-numeric: tabular-nums; }
.ajat div.on-tanaan { background: var(--kyltti); font-weight: 600; }
.ajat div.on-tanaan dt::after { content: ", tänään"; font-weight: 400; }
.yhteys-linkit { font-weight: 600; }

/* Mobiilin palkki: viimeinen lapsi .jatko-kääreessä, joten se tarttuu ruudun alareunaan
   vasta Parturit-osiosta alkaen. Silloin heron 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(--liitu); border-top: 2px solid var(--musta);
}

/* Alatunniste */
.ala { background: var(--musta); color: var(--harmaa-musta); font-size: 0.875rem; }
.ala-sisa { display: grid; gap: 0.6rem; padding-block: 2.5rem 3rem; }
.ala p { margin: 0; }

@media (min-width: 40rem) {
  .tanaan-rivi { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 4rem; }
  .yhteys-kuva img { aspect-ratio: 3 / 2; }
}
@media (min-width: 48rem) {
  .tiimi { grid-template-columns: 5fr 7fr; column-gap: 3rem; align-items: start; }
  .tiimi-kuva img { aspect-ratio: 1; }
}
@media (min-width: 64rem) {
  .hero-sisa {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: end;
    padding-bottom: 3.5rem;
  }
  .kyltti { grid-column: 2; grid-row: 1; }
  .kyltti-sisa { --H: 62cqw; --fs-max: 30cqw; }
  .hero-teksti { grid-column: 1; grid-row: 1; padding: 0; }
  .hero-lause { font-size: 1.1875rem; }
  .tanaan-rivi { padding-block: 1.75rem; }
  .hinnasto { padding-block: 6rem 7rem; }
  .hinnasto .kehys { display: grid; grid-template-columns: 4fr 8fr; column-gap: 4rem; align-items: start; }
  .hinnasto h2 { grid-row: span 2; }
  .taulu .hinta { font-size: 2.25rem; }
  .parturit { padding-block: 7rem 9rem; }
  .yhteys { padding-block: 0; }
  .yhteys-sisa { display: grid; grid-template-columns: 6fr 6fr; column-gap: 5rem; align-items: center; padding-inline: 0 var(--ulko); }
  .yhteys-kuva { margin: 0; }
  .yhteys-kuva img { aspect-ratio: 4 / 5; }
  .yhteys-teksti { padding: 4rem 0; }
  .palkki { display: none; }
}

/* Avausjakso: vaakasana liukuu vasemmalta, pystysana ylhäältä, ja keltainen kulma syttyy
   kohtaamishetkellä. Vain transform. */
@media (prefers-reduced-motion: no-preference) {
  .seina-vaaka > span { animation: vaaka 1.1s cubic-bezier(0.25, 0.8, 0.2, 1) 0.15s both; }
  .seina-pysty > span { animation: pysty 1.1s cubic-bezier(0.25, 0.8, 0.2, 1) 0.3s both; }
  .kulma { animation: kulma 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 1.2s both; }
}
@keyframes vaaka { from { transform: translateX(-100cqw); } to { transform: none; } }
@keyframes pysty { from { transform: translateY(calc(-1 * var(--H) - var(--S))); } to { transform: none; } }
@keyframes kulma { from { transform: scale(0); } to { transform: none; } }