/* Atelier Mira — concept beauty studio site (kit variant "studio", centred hero).
   Type: Italiana (display) + Hanken Grotesk. Colour 60-30-10: nude / espresso ink / rosewood (actions). */

@font-face { font-family: "Italiana"; src: url("media/italiana.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --display: "Italiana", "Didot", Georgia, serif;
  --bg: #f2ebe4;
  --bg-rgb: 242, 235, 228;
  --band: #e7dcd1;
  --ink: #2a1f1b;
  --muted: #67574f;
  --line: rgba(42, 31, 27, .15);
  --accent: #7a3540;
  --accent-hi: #642a34;
  --on-accent: #f9f2ec;
  --live: #8e4a55;
  --live-halo: rgba(142, 74, 85, .2);
  --warn: #a2332f;
  --hero-text: #fbf6f1;
  --hero-bg: #3a2c27;
  --scrim: 34, 24, 21;
  --bar-solid: rgba(242, 235, 228, .92);
  --paper: #fbf7f3;
  --paper-ink: #2a1f1b;
  --paper-field: #ffffff;
  --paper-line: #dccfc3;
  --ink-soft: #5c4d46;
  --ink-faint: #67574f;
  --ink-off: #a99b93;
  --radius: 2px;
}

em { font-style: normal; color: var(--accent); }
.h2, .hero-h, .foot-h, .sheet-h, .done-h, .logo, .h3, .intro-big { letter-spacing: .005em; }
.logo { font-size: var(--t-lg); }

/* hero: words centred low over the treatment video */
.hero { --dim: .18; justify-content: center; text-align: center; }
.hero-in { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-h { font-size: clamp(var(--t-3xl), 13vw, 8.5rem); line-height: .95; }
.hero-h em { display: block; color: #f3d6d8; }
.hero-lead { margin-left: auto; margin-right: auto; }
.hero-act { justify-content: center; }
.hero .today { margin-bottom: 20px; }
.hero .today::before { background: #f3d6d8; box-shadow: 0 0 0 4px rgba(243, 214, 216, .25); }
.hero .btn-main { background: var(--hero-text); color: var(--ink); }
@media (hover: hover) { .hero .btn-main:hover { background: #ffffff; } }

/* intro */
.intro { display: grid; gap: 48px; align-items: center; }
.intro-media video { aspect-ratio: 4 / 5; max-width: 420px; }
.intro-big { margin: 0; font: 400 clamp(var(--t-xl), 5vw, var(--t-4xl))/1.08 var(--display); text-wrap: balance; }
.intro-text .lead { margin: 32px 0 0; max-width: 44ch; }
@media (min-width: 960px) { .intro { grid-template-columns: 4fr 7fr; gap: 96px; } }

/* treatments menu: every row books that treatment */
.menu { padding-bottom: var(--section); }
.menu-head { display: grid; gap: 16px; padding-top: 32px; border-top: 1px solid var(--line); margin-bottom: 56px; }
.menu-head p { margin: 0; }
@media (min-width: 960px) { .menu-head { grid-template-columns: 1fr 1fr; align-items: end; } }
.menu-cols { display: grid; gap: 56px; }
@media (min-width: 960px) { .menu-cols { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.menu .h3 { margin-bottom: 20px; font-size: var(--t-xl); }
.treat { list-style: none; margin: 0; padding: 0; }
.treat li { border-top: 1px solid var(--line); }
.treat li:last-child { border-bottom: 1px solid var(--line); }
.treat button {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 20px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink);
}
.tr-t { font-size: var(--t-md); line-height: 1.3; transition: color .2s var(--ease); }
.tr-p { font-size: var(--t-md); line-height: 1.3; font-variant-numeric: tabular-nums; }
.tr-d { grid-column: 1 / -1; color: var(--muted); }
.tr-d::after { content: "  Buchen \2192"; color: var(--accent); font-weight: 500; opacity: 0; transition: opacity .2s var(--ease); }
@media (hover: hover) {
  .treat button:hover .tr-t { color: var(--accent); }
  .treat button:hover .tr-d::after { opacity: 1; }
}
@media (hover: none) { .tr-d::after { opacity: 1; } }

/* calm: full-width video band */
.calm { position: relative; isolation: isolate; overflow: hidden; color: var(--hero-text); background: var(--hero-bg); }
.calm-media { position: absolute; inset: 0; z-index: -1; }
.calm-media video { width: 100%; height: 100%; object-fit: cover; }
.calm-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--scrim), .78) 0%, rgba(var(--scrim), .35) 60%, rgba(var(--scrim), .15) 100%); }
.calm-in { padding-top: clamp(160px, 22vw, 280px); padding-bottom: clamp(160px, 22vw, 280px); }
.calm .h2 { max-width: 12ch; }
.calm .h2 em { color: #f3d6d8; }
.calm .lead { max-width: 36ch; margin: 24px 0 0; }

/* gift voucher */
.gift { display: grid; gap: 48px; align-items: center; }
.gift-text .lead { margin: 24px 0 32px; max-width: 40ch; }
.gift-media video { aspect-ratio: 16 / 10; }
@media (min-width: 960px) { .gift { grid-template-columns: 5fr 7fr; gap: 96px; } }

/* visit */
.visit { background: var(--band); padding: var(--section) 0; }
.visit-in { display: grid; gap: 64px; }
.today-band { margin: 24px 0 0; }
.visit .lead { margin: 16px 0 32px; max-width: 36ch; }
@media (min-width: 960px) { .visit-in { grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; } }