/* DarMon design proposal v3 — one palette (the owner's: black, ivory, champagne gold, powder beige; 20. 10. 2026); one pair of typefaces (Bodoni Moda for
   display, DM Sans for text; Tobias chose it on 18. 10. 2026 from the three the switcher offered). Light cream and beige bands
   alternate with dark-espresso ones. Class names belong to one component each. Motion is only ever applied under html.m-on
   (set by the head script when the visitor has not asked for reduced motion); without it every state below is the final one. */

/* ---------- tokens ---------- */
:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --hh: 76px;
  --gut: clamp(20px, 5vw, 64px);
  --wrapw: 1200px;
  --sec-y: clamp(88px, 11vw, 176px);
  --r: 4px;
  /* the owner's palette (Tobias, 20. 10. 2026, replacing palette A): Elegantná čierna #171511 (header, footer, premium sections), Slonovinová
     #F5F0E9 (background, price list, text sections), Šampanské zlato #D6B783 (buttons, logo, fine details), Púdrová béžová #C9B7A5 (supplementary
     surfaces, soft accents); about 50 / 30 / 15 / 5 %, the gold a detail and never a dominant colour. Not hers, derived because a page needs them:
     the deeper/raised blacks, the beige band (her beige lightened: text on her full beige would not meet contrast), the grey text and the dark gold
     that can carry text on ivory (her gold on ivory is 1.7 : 1). */
  --bg: #F5F0E9;            /* Slonovinová */
  --bg-2: #E8DFD4;          /* Púdrová béžová, lightened for full bands */
  --beige: #C9B7A5;         /* Púdrová béžová */
  --surface: #FBF8F4;
  --ink: #171511; --ink-2: #5A5148;
  --line: #E2D8CB; --line-2: #C9B7A5;
  --deep: #171511;          /* Elegantná čierna */
  --deep-2: #2A2620; --deep-3: #100E0B;
  --on-deep: #F5F0E9; --on-deep-2: #C9B7A5; --line-deep: rgba(245, 240, 233, .2);
  --gold: #D6B783;          /* Šampanské zlato: lines, frames */
  --gold-2: #D6B783;        /* Šampanské zlato: gold on black, and every gold fill */
  --gold-ink: #7A5E2E;      /* her gold darkened, to carry text on ivory */
  --hover: rgba(201, 183, 165, .28);
  --logo-a: var(--gold-2); --logo-b: var(--on-deep);
}
/* typefaces: display + text, and how an emphasised word is set */
:root {
  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --adj: .86; --dw: 400; --dtrack: -.02em; --dlh: 1.08; --em: italic; --kick-size: 1.2rem;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 20px); }
html:not(.lenis) { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--dw); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--deep-2); outline-offset: 3px; }
.deep :focus-visible, .hdr :focus-visible, .mnav :focus-visible { outline-color: var(--gold-2); }
::selection { background: var(--gold-2); color: var(--deep); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--gold-2); color: var(--deep); padding: .7rem 1rem; border-radius: 6px; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrapw)); margin-inline: auto; }
.ic { width: 1.25em; height: 1.25em; flex: none; display: block; }

/* lenis (the one smooth-scroll engine) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- type ---------- */
.h-xl, .h-l { font-family: var(--f-display); font-weight: var(--dw); letter-spacing: var(--dtrack); line-height: var(--dlh); text-wrap: balance; overflow-wrap: break-word; }
.h-xl { font-size: calc(var(--adj) * clamp(2.9rem, 1.1rem + 6vw, 6.6rem)); }
.h-l { font-size: calc(var(--adj) * clamp(2.3rem, 1.1rem + 4vw, 5rem)); }
.h-xl em, .h-l em { font-style: var(--em); color: var(--gold-ink); }
.deep .h-xl em, .deep .h-l em { color: var(--gold-2); }
.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.deep .lead { color: var(--on-deep-2); }
/* a lead-in: the name in the display face, the facts after it in small tracked sans. Nothing is drawn before the text (ui-rules, "Lead-ins and labels"). */
.kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .95rem; margin: 0 0 1.2rem; max-width: 60ch; }
.kicker__n { font-family: var(--f-display); font-style: var(--em); font-size: var(--kick-size); line-height: 1.4; color: var(--gold-ink); }
.kicker__m { font-size: .72rem; font-weight: 500; line-height: 1.6; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2); }
.deep .kicker__n { color: var(--gold-2); }
.deep .kicker__m { color: var(--on-deep-2); }
.lbl { display: block; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.deep .lbl { color: var(--on-deep-2); }
/* the box clips the word for its reveal: room above for the caron of Č Š Ž Ď Ť Ľ (cut flat without it, Tobias 21. 10. 2026) and below for descenders */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .3em .06em .14em; margin: -.3em -.06em -.14em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- sections: cream, beige and espresso bands ---------- */
.sec { padding-block: var(--sec-y); }
.sec--alt { background: var(--bg-2); --line: var(--line-2); }
.deep { background: var(--deep); color: var(--on-deep); }
.sec__head { margin-bottom: clamp(40px, 6vw, 88px); }
.sec__head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px clamp(32px, 6vw, 96px); }
.sec__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sec__head--split .h-xl, .sec__head--split .h-l { max-width: 8.8em; }
.sec__side { margin: 0 0 .6rem; max-width: 30ch; font-family: var(--f-display); font-style: var(--em); font-size: 1.25rem; line-height: 1.45; color: var(--gold-ink); }

/* ---------- logo (the vector of the proposal, unchanged; recoloured here only) ---------- */
/* the logo: the owner's head drawing (img/logo-head.png, 342 x 237, as a mask) beside the wordmark SVG (848 x 373 units): the two shares of
   the width are fixed, so the logo sizes from a height or from a width alike */
.logo { display: flex; align-items: center; aspect-ratio: 3836 / 1000; color: inherit; }
.logo__head { flex: none; display: block; width: 37.6%; aspect-ratio: 342 / 237; margin-right: 3.1%; background-color: var(--logo-a); -webkit-mask: url(img/logo-head.png) center / contain no-repeat; mask: url(img/logo-head.png) center / contain no-repeat; transition: background-color .35s; }
.logo svg { flex: none; display: block; width: 59.3%; height: auto; }
.logo path { fill: var(--logo-b); transition: fill .35s; }
.logo .logo__cap { font-family: var(--f-display); font-style: var(--em); font-weight: 500; font-size: 100px; fill: var(--logo-a); transition: fill .35s; }
/* a logo that is a link: the head and the caption turn cream, the letters gold, on hover and focus */
/* a logo that is a link: the faces and the caption turn cream, the letters gold, on hover and focus */
.hdr__logo:hover .logo, .hdr__logo:focus-visible .logo, .foot__logo:hover .logo, .foot__logo:focus-visible .logo { --logo-a: var(--on-deep); --logo-b: var(--gold-2); }
.hdr__logo .logo { height: 46px; }
.logo--xl { height: auto; }
.logo--xl { width: 100%; }

/* ---------- header ----------
   Nothing in it may wrap onto a second line (white-space: nowrap on every item). The row is wider than the page's 1200px column,
   because six entries, the phone and the booking button do not fit into 1200px; below 1200px the entries go into the menu. */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hh); background: var(--deep); color: var(--on-deep); transition: box-shadow .4s, background-color .4s; }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--line-deep); }
/* over a page hero with a photograph: transparent at the top of the page, solid after the first scroll; its controls sit on a dark espresso glass where the picture is bright */
.hdr--over:not(.is-scrolled):not(:has(.burger[aria-expanded="true"])) { background-color: transparent; }
.hdr--over:not(.is-scrolled) .hdr__logo .logo { filter: drop-shadow(0 1px 8px rgba(16, 14, 11, .55)); }
.hdr--over:not(.is-scrolled) .hdr__tel, .hdr--over:not(.is-scrolled) .burger { background: rgba(16, 14, 11, .66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hdr--over:not(.is-scrolled) .hdr__tel:hover, .hdr--over:not(.is-scrolled) .burger:hover { background: var(--gold-2); }
@media (max-width: 1199px) {
  .hdr--over:not(.is-scrolled) .hdr__logo { padding: 5px 16px 5px 12px; border-radius: 999px; background: rgba(16, 14, 11, .66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (min-width: 1200px) {
  /* the home hero: the photograph starts under the logo (bright wall), so the logo gets the glass pill the phone and tablet header has */
  /* the pill is a pseudo-element hanging out of the logo, so it adds nothing to the width of the header row */
  body:has(.hero--photo) .hdr--over:not(.is-scrolled) .hdr__logo { position: relative; isolation: isolate; }
  body:has(.hero--photo) .hdr--over:not(.is-scrolled) .hdr__logo::before { content: ""; position: absolute; z-index: -1; inset: -5px -16px -5px -12px; border-radius: 999px; background: rgba(16, 14, 11, .66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .hdr--over:not(.is-scrolled) .hdr__nav { gap: 16px; padding: 0 22px; border: 1px solid rgba(245, 240, 233, .16); border-radius: 999px; background: rgba(16, 14, 11, .66); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.hdr__in { width: min(100% - 2 * var(--gut), 1800px); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: clamp(10px, 2vw, 32px); }
.hdr__logo { display: block; flex: none; text-decoration: none; border-radius: 4px; }
.hdr__nav { display: none; margin-inline: auto; gap: clamp(16px, 1.9vw, 34px); align-items: center; white-space: nowrap; }
.hdr__nav a, .dd__btn { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: .95rem; letter-spacing: .02em; white-space: nowrap; color: var(--on-deep); text-decoration: none; transition: color .3s; }
.hdr__nav a::after, .dd__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--gold-2); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.hdr__nav a:hover, .dd__btn:hover, .dd.is-open .dd__btn { color: var(--gold-2); }
.hdr__nav a:hover::after, .dd__btn:hover::after, .dd.is-open .dd__btn::after, .hdr__nav a[aria-current]::after, .dd__btn[aria-current]::after { transform: scaleX(1); }
.hdr__nav a[aria-current], .dd__btn[aria-current] { color: var(--gold-2); }
.dd__btn .ic { width: 1rem; height: 1rem; transition: transform .4s var(--ease); }
.dd.is-open .dd__btn .ic { transform: rotate(180deg); }
.dd { position: relative; }
.dd__panel { position: absolute; top: calc(100% + 12px); left: -22px; min-width: 300px; padding: 10px; background: var(--deep-3); border: 1px solid var(--line-deep); border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease), visibility 0s linear .3s; }
.dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dd.is-open .dd__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd__panel a { display: flex; align-items: baseline; gap: 14px; min-height: 0; padding: 12px 14px; border-radius: 8px; font-size: 1rem; }
.dd__panel a::after { display: none; }
.dd__panel a:hover { background: var(--gold-2); color: var(--deep); }
.dd-num { font-family: var(--f-display); font-size: 1.05rem; color: var(--gold-2); min-width: 1.8rem; }
.dd__panel a:hover .dd-num { color: var(--deep); }
.hdr__tools { margin-left: auto; display: flex; align-items: center; gap: clamp(8px, 1.2vw, 18px); white-space: nowrap; }
.hdr__tel { display: none; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; min-width: 44px; border: 1px solid var(--line-deep); border-radius: 999px; font-size: .95rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap; color: var(--on-deep); transition: color .3s, background-color .3s, border-color .3s; }
.hdr__tel .ic { width: 1.1rem; height: 1.1rem; }
.hdr__tel:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--deep); }
.hdr__telnum { display: none; }
.hdr__book { display: none; }
.burger { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 44px; padding: 0; background: transparent; color: var(--on-deep); border: 1px solid var(--line-deep); border-radius: 999px; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.burger .ic { width: 1.2rem; height: 1.2rem; }
.burger:hover { background: var(--gold-2); color: var(--deep); border-color: var(--gold-2); }
.burger[aria-expanded="true"] { background: var(--on-deep); color: var(--deep); border-color: var(--on-deep); }
.burger[aria-expanded="true"]:hover { background: var(--gold-2); border-color: var(--gold-2); }
.burger__b { display: none; }
.burger[aria-expanded="true"] .burger__a { display: none; }
.burger[aria-expanded="true"] .burger__b { display: block; }
.hdr__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.hdr__progress i { display: block; height: 100%; background: var(--gold-2); transform: scaleX(0); transform-origin: left; }

/* mobile menu (below 1200px): a full-screen panel above the header that fits the window without scrolling. Three bands: the bar (logo, close), the list, the actions
   (booking, phone). The list is two labelled groups, so the eye finds a group first and then a name in it: "Ošetrenia" (every service in ONE list style: the five skin
   groups, Líčenie, Obočie & mihalnice, in the serif, one hairline between two rows and none after the last) and "Salón" (Cenník, Poukážky, Galéria, O mne, Kontakt, in the
   text face, smaller and quieter, in an even grid of three columns, five on a wider window). The row height follows the window height (44 px at the least: a tap target),
   the type follows the row height and the width, so the longest name stays on one line at 320 px. */
.mnav { --pad: clamp(16px, 5vw, 32px); --rh: clamp(44px, calc((100dvh - 360px) / 7), 64px); --fs: min(calc(var(--rh) * .56), calc((100vw - 2 * var(--pad) - 36px) / 11), 2.3rem);
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: contain;
  background: var(--deep); color: var(--on-deep); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.mnav[hidden] { display: none; }
.mnav__bar { display: flex; align-items: center; justify-content: space-between; height: var(--hh); padding-inline: var(--pad); }
.mnav__logo { display: block; border-radius: 4px; }
.mnav__logo .logo { height: 40px; }
.mnav__x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--on-deep); color: var(--deep); border: 1px solid var(--on-deep); border-radius: 50%; cursor: pointer; transition: background-color .25s, border-color .25s; }
.mnav__x .ic { width: 1.2rem; height: 1.2rem; }
.mnav__x:active, .mnav__x:focus-visible { background: var(--gold-2); border-color: var(--gold-2); }
.mnav__body { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.6dvh, 28px); min-height: 0; padding-inline: var(--pad); }
.mnav__grp { min-width: 0; }
.mnav__h { margin: 0 0 6px; font-family: var(--f-text); font-size: .72rem; font-weight: 500; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--gold-2); }
.mnav__a li + li { border-top: 1px solid var(--line-deep); }
.mnav__a a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: var(--rh); font-family: var(--f-display); font-size: var(--fs); line-height: 1.1; white-space: nowrap; text-decoration: none; color: var(--on-deep); transition: color .25s, background-color .25s; }
.mnav__t { min-width: 0; }
.mnav__go { flex: none; display: inline-flex; color: var(--gold-2); opacity: .85; transition: opacity .25s; }
.mnav__go .ic { width: 1rem; height: 1rem; }
.mnav__b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
.mnav__b a { display: flex; align-items: center; min-height: 44px; font-family: var(--f-text); font-size: 1.02rem; font-weight: 400; letter-spacing: .01em; white-space: nowrap; text-decoration: none; color: var(--on-deep-2); transition: color .25s, background-color .25s; }
@media (min-width: 560px) { .mnav__b { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mnav__a a:active, .mnav__b a:active { background: rgba(214, 183, 131, .16); color: var(--gold-2); }
.mnav__a a:focus-visible, .mnav__b a:focus-visible { color: var(--gold-2); background: rgba(214, 183, 131, .1); }
@media (hover: hover) { .mnav__a a:hover, .mnav__b a:hover { color: var(--gold-2); background: rgba(214, 183, 131, .1); } .mnav__a a:hover .mnav__go { opacity: 1; } }
.mnav__foot { display: grid; gap: 4px; padding: 6px var(--pad) 12px; }
.mnav__foot .book { width: 100%; justify-content: space-between; }
.mnav__foot .tel-link { justify-content: center; min-height: 44px; }
html.menu-open, html.menu-open body { overflow: hidden; }
/* a window under 660 px tall (a small phone): the bar is lower, the labels and gaps tighter, and the phone number becomes a round button beside the booking button
   (its number stays in the accessible name), so the two groups and 44 px rows still stand on one screen */
@media (max-height: 659px) {
  .mnav { --rh: clamp(44px, calc((100dvh - 276px) / 7), 66px); }
  .mnav__bar { height: 50px; }
  .mnav__body { gap: 8px; }
  .mnav__h { margin-bottom: 2px; font-size: .68rem; line-height: 1.25; }
  .mnav__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px var(--pad) 8px; }
  .mnav__foot .tel-link { width: 54px; height: 54px; min-height: 54px; padding: 0; background: none; border: 1px solid var(--line-deep); border-radius: 50%; transition: background-color .25s, color .25s, border-color .25s; }
  .mnav__foot .tel-link:hover, .mnav__foot .tel-link:active { background: var(--gold-2); border-color: var(--gold-2); color: var(--deep); }
  .mnav__foot .tel-link .ic { width: 1.25rem; height: 1.25rem; }
  .mnav__foot .tel-link span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1200px) {
  .hdr__nav { display: flex; }
  .burger { display: none; }
  .mnav { display: none !important; }
  .hdr__book { display: block; }
  .hdr__tel { display: inline-flex; }
}
/* seven entries (Galéria is in the menu and the footer only: with it the row is 60 to 110 px too wide up to 1500 px): at 1200-1279 the gaps are tighter */
@media (min-width: 1200px) and (max-width: 1279px) {
  .hdr__nav { gap: 10px; }
  .hdr--over:not(.is-scrolled) .hdr__nav { gap: 10px; padding: 0 14px; }
}
@media (min-width: 1440px) {
  .hdr__tel { padding: 0 1.1rem; }
  .hdr__telnum { display: inline; }
}
@media (min-width: 560px) { .hdr__book { display: block; } }
@media (max-width: 479px) { .hdr__logo .logo { height: 40px; } :root { --hh: 68px; } }

/* ---------- the booking control ---------- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.book {
  --bh: 3.5rem; --pad: 1.75rem;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 1.1rem;
  min-height: var(--bh); padding: .4rem .4rem .4rem var(--pad); border-radius: 999px;
  background: var(--deep-2); color: var(--on-deep); box-shadow: inset 0 0 0 1px var(--line-deep);
  font: 500 .8rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .45s var(--ease), background-color .3s;
}
.book::before { /* the gold thread that travels round the edge */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 50%, var(--gold) 74%, var(--gold-2) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.m-on .book:not(.book--sm)::before { animation: ang 6s linear infinite; }
@keyframes ang { to { --ang: 360deg; } }
.book__flood { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gold-2); clip-path: circle(0 at calc(100% - var(--bh) / 2) 50%); transition: clip-path .7s var(--ease); }
.book__label { position: relative; display: block; height: 1.6em; line-height: 1.6; overflow: hidden; }
.book__l1, .book__l2 { display: block; transition: transform .6s var(--ease); }
.book__l2 { position: absolute; left: 0; top: 100%; }
.book__knob { flex: none; width: calc(var(--bh) - .8rem); height: calc(var(--bh) - .8rem); border-radius: 50%; display: grid; place-items: center; background: var(--gold-2); color: var(--deep); transition: background-color .45s var(--ease), color .45s var(--ease), transform .7s var(--ease); }
.book__knob .ic { width: 1.2rem; height: 1.2rem; }
.book:hover, .book:focus-visible { color: var(--deep); }
.book:hover .book__flood, .book:focus-visible .book__flood { clip-path: circle(150% at calc(100% - var(--bh) / 2) 50%); }
.book:hover .book__l1, .book:focus-visible .book__l1 { transform: translateY(-100%); }
.book:hover .book__l2, .book:focus-visible .book__l2 { transform: translateY(-100%); }
.book:hover .book__knob, .book:focus-visible .book__knob { background: var(--deep); color: var(--gold-2); transform: rotate(45deg); }
.book.is-phone:hover .book__knob, .book.is-phone:focus-visible .book__knob, .book.is-mail:hover .book__knob, .book.is-mail:focus-visible .book__knob { transform: rotate(-12deg); }
.book:active { transform: scale(.98); }
/* the gold tone, for the one main control on an espresso ground: gold at rest, cream on hover */
.book--gold { background: var(--gold-2); color: var(--deep); box-shadow: none; }
.book--gold::before { display: none; }
.book--gold .book__flood { background: var(--on-deep); }
.book--gold .book__knob { background: var(--deep); color: var(--gold-2); }
.book--gold:hover .book__knob, .book--gold:focus-visible .book__knob { background: var(--gold-2); color: var(--deep); }
.book--sm { --bh: 2.75rem; --pad: 1.15rem; gap: .8rem; font-size: .7rem; }
.book--sm .book__knob .ic { width: 1.05rem; height: 1.05rem; }

/* the round form of it, a seal of our own: a ring of two display-face phrases told apart by two small gold rings (turns one way),
   a dial of fine ticks inside it (turns the other way), a coin-like core with its own hairline, two hairlines for the edge.
   Hover floods the whole disc gold. Under reduced motion nothing turns. */
.badge { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--deep); color: var(--on-deep); text-decoration: none; box-shadow: inset 0 0 0 1px var(--gold-2); transition: color .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease); }
.deep .badge { background: var(--deep-2); }
.badge::before { content: ""; position: absolute; inset: 3.4%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(214, 183, 131, .42); pointer-events: none; transition: box-shadow .45s var(--ease); }
.badge__ring, .badge__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.badge__ring text { fill: currentColor; font-family: var(--f-display); font-style: var(--em); font-weight: 600; font-size: 17.5px; letter-spacing: .02em; transition: fill .45s var(--ease); }
.badge__orn { fill: none; stroke: var(--gold-2); stroke-width: 1.4; transition: stroke .45s var(--ease); }
.badge__dial line { stroke: var(--gold-2); stroke-width: .8; stroke-linecap: round; opacity: .8; transition: stroke .45s var(--ease); }
.badge__dial line:nth-child(5n + 1) { stroke-width: 1.5; opacity: 1; }
.badge__core { position: relative; width: 35%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 26%, #F1E4CC 0%, var(--gold-2) 52%, #A3865A 130%); color: var(--deep); box-shadow: 0 0 0 4px rgba(214, 183, 131, .22); transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .7s var(--ease); }
.badge__core::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 21, 17, .4); }
.badge__core .ic { width: 42%; height: 42%; }
a.badge:hover, a.badge:focus-visible { background: var(--gold-2); color: var(--deep); box-shadow: inset 0 0 0 1px var(--deep); }
a.badge:hover::before, a.badge:focus-visible::before { box-shadow: inset 0 0 0 1px rgba(23, 21, 17, .4); }
a.badge:hover .badge__orn, a.badge:focus-visible .badge__orn, a.badge:hover .badge__dial line, a.badge:focus-visible .badge__dial line { stroke: var(--deep); }
a.badge:hover .badge__core, a.badge:focus-visible .badge__core { background: var(--deep); color: var(--gold-2); box-shadow: 0 0 0 4px rgba(23, 21, 17, .25); transform: rotate(45deg); }
a.badge:hover .badge__core::after, a.badge:focus-visible .badge__core::after { box-shadow: inset 0 0 0 1px rgba(214, 183, 131, .5); }
.badge--xl { max-width: 340px; }
@media (prefers-reduced-motion: no-preference) {
  .badge__ring { animation: spin 34s linear infinite; }
  .badge__dial { animation: spin 80s linear infinite reverse; }
  a.badge:hover .badge__ring, a.badge:hover .badge__dial { animation-play-state: paused; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.tel-link { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 500; letter-spacing: .02em; text-decoration: none; color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; padding-bottom: 2px; }
.tel-link .ic { width: 1.1rem; height: 1.1rem; }
.tel-link:hover { background-size: 100% 1px; color: var(--gold-ink); }
.deep .tel-link:hover, .hero .tel-link:hover, .tel-link--light:hover { color: var(--gold-2); }

.knob { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line-2); background: transparent; color: inherit; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s, transform .6s var(--ease); }
.deep .knob { border-color: var(--line-deep); }
.knob .ic { width: 1.1rem; height: 1.1rem; }
.btn-line { display: inline-flex; align-items: center; gap: .9rem; min-height: 44px; font-weight: 500; text-decoration: none; letter-spacing: .02em; transition: color .3s; }
.btn-line:hover { color: var(--gold-2); }
.btn-line:hover .knob { background: var(--gold-2); color: var(--deep); border-color: var(--gold-2); transform: translateX(4px); }

/* ---------- photographs: every frame has the shape of its own file, so cover crops nothing. Straight-edged rectangles with no keyline
   (the owner, 20. 10. 2026: the arches and circles read as "windows", she wants something more modern and fresh, still luxurious) ---------- */
.ph { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar); background: var(--bg-2); border-radius: 0; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph--flat { border-radius: 0; }

/* ---------- hero (home) and page hero: the picture bleeds off the right, top and bottom edges ---------- */
.hero, .phero { position: relative; overflow: clip; background-color: var(--deep); }
.hero { --ph-h: clamp(560px, calc(100svh - var(--hh)), 880px); }
.hero .h-xl { font-size: calc(var(--adj) * clamp(2.7rem, -.9rem + 6.6vw, 6.6rem)); }
.phero { --ph-h: clamp(540px, calc(100svh - var(--hh)), 690px); }
.phero .h-xl { font-size: calc(var(--adj) * clamp(2.7rem, 1rem + 4.8vw, 5.8rem)); }
.hero__in, .phero__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; min-height: var(--ph-h); padding-left: max(var(--gut), calc((100% - var(--wrapw)) / 2)); }
.hero__copy, .phero__copy { align-self: center; max-width: 44rem; padding: clamp(44px, 5vw, 88px) clamp(24px, 4vw, 72px) clamp(44px, 5vw, 88px) 0; }
.hero__copy .lead, .phero__copy .lead { margin: 1.8rem 0 0; }
.hero__cta, .phero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: clamp(30px, 3.6vw, 48px); }
.hero__fig, .phero__fig { margin: 0; align-self: end; height: var(--ph-h); width: calc(var(--ph-h) * var(--arn)); }
.hero__ph { width: 100%; height: 100%; border-radius: 0; }
/* THE HOME HERO (20. 10. 2026): the owner's photograph beside the copy, running up under the transparent header to the top of the page (.hdr--over, the same
   glass controls as the page heroes). The photograph (31. 10. 2026) is a standing figure to the hips, 1024 px wide, and the whole figure is the subject (tools/photo-subjects.json
   "owner-hero": it fits frames of about 0.44-0.68 only, so a wide frame would cut her arms or her head), so the frame has the shape of the file at every width (--arn,
   set inline, is file width / file height) and nothing is cropped: no object-position, no scrim, no filter, no fade; the photograph is never moved, covered or
   dimmed. Her head starts only 7 % below the top of the photograph, which is less than the header is high, so the file carries 80 rows of its own mirrored
   background above her (tools/build-images.mjs, HERO_EXT), so her hair starts below the logo, the pills and the buttons
   (the header's controls end at 59-61 px; measured by the photo audit, not here).
   From 700px: the picture stands on the left, in the page column, as tall as the window (--ph-h, at most 960 px) but never wider than 44 % of the window
   (--fw), flush with the top of the page and the bottom of the hero; the copy is on its right (she looks to the right of the picture, at the copy). The largest
   the picture is ever drawn: about 920 px high, 585 px wide (the file is 1024 px wide). Under 700px: the picture on top, the whole width of the window (at most
   88 % of the screen height), the copy under it. */
.hero--photo { margin-top: calc(-1 * var(--hh)); --ph-h: clamp(600px, 100svh, 960px); --fw: min(calc(var(--ph-h) * var(--arn)), 44vw); }
.hero--photo .hero__in { display: block; min-height: 0; padding-left: 0; }
.hero--photo .hero__fig { width: min(100%, calc(88svh * var(--arn))); height: auto; margin: 0 auto; max-width: none; }
.hero--photo .hero__ph { width: 100%; height: auto; }
.hero--photo .hero__copy { max-width: none; padding: clamp(32px, 7vw, 56px) var(--gut) clamp(44px, 8vw, 72px); }
.hero--photo .h-xl { font-size: calc(var(--adj) * clamp(2.5rem, 1.4rem + 5vw, 4.4rem)); }
/* Under 700px the heading stands ON the picture (Tobias, 31. 10. 2026): the phone file (img/owner-hero-m, tools/build-images.mjs) carries 520 rows of her own grey
   backdrop above her head and ends under the belt, and the kicker and the h1 lie on that backdrop only, under the header (their colours: the ivory block below);
   the photo audit fails the page if they reach her. The lead and the buttons stay under the picture, on espresso. */
@media (max-width: 699px) {
  .hero--photo .hero__in { display: grid; grid-template-columns: minmax(0, 1fr); }
  /* the whole width, never capped by the screen height: a cap in svh left espresso bars beside the picture, and Vivaldi on iOS changes svh while its toolbar
     hides, so the frame grew and jumped during the scroll (Tobias, 31. 10. 2026). The picture may be taller than the screen; the heading is on its top. */
  .hero--photo .hero__fig, .hero--photo .hero__title { grid-area: 1 / 1; width: 100%; }
  .hero--photo .hero__ph { aspect-ratio: var(--arm); }
  .hero__ph picture { display: contents; }
  .hero--photo .hero__copy { display: contents; }
  .hero--photo .hero__title { z-index: 1; align-self: start; padding: calc(var(--hh) + clamp(4px, 12vw - 32px, 16px)) var(--gut) 0; }
  /* Ivory on espresso (Tobias picked proposal B, 1. 11. 2026, design/lettering-proposals/): her black fades down over the top 38 % of the frame, the grey
     backdrop only, and is gone above her hair (row 824 of 2146 = 38.4 %). The type follows what the luxury houses do (README there): no bold, no metallic
     fill, a small tracked caps line, a large regular serif tracked tight, solid ivory with the italic words in her champagne.
     The fade is eased (many stops on a smooth curve, no visible band) and its middle carries faint wisps of smoke, fractal noise in her black masked to the
     transition only (Tobias: "jemnejší … rozpustný … ako dym"); both end at the same line above her hair. */
  .hero--photo .hero__ph::after, .hero--photo .hero__ph::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; pointer-events: none; }
  .hero--photo .hero__ph::after { background: linear-gradient(to bottom, rgba(23, 21, 17, .9) 0%, rgba(23, 21, 17, .86) 50%, rgba(23, 21, 17, .8) 58%,
    rgba(23, 21, 17, .69) 64%, rgba(23, 21, 17, .55) 70%, rgba(23, 21, 17, .4) 76%, rgba(23, 21, 17, .26) 82%, rgba(23, 21, 17, .14) 88%, rgba(23, 21, 17, .055) 94%,
    rgba(23, 21, 17, 0) 100%); }
  .hero--photo .hero__ph::before { z-index: 1; opacity: .75;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.011' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.082 0 0 0 0 0.067 2.2 0 0 0 -0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 58%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 35%, #000 58%, #000 70%, transparent 100%); }
  .hero--photo .hero__title .kicker { gap: .2em clamp(.9em, 6vw - 1em, 1.6em); margin-bottom: 1rem; }
  .hero--photo .hero__title .kicker__n, .hero--photo .hero__title .kicker__m { font-family: var(--f-text); font-style: normal; font-weight: 500; font-size: .74rem;
    letter-spacing: clamp(.12em, 2.4vw - .6em, .26em); line-height: 1.5; text-transform: uppercase; color: var(--on-deep); }
  .hero--photo .hero__title .h-xl { font-weight: 400; letter-spacing: -.035em; line-height: .98; color: var(--on-deep);
    font-size: min(calc(var(--adj) * clamp(2.6875rem, .125rem + 12vw, 5rem)), 11vw); } /* 25 % larger (Tobias, 1. 11. 2026); 11vw keeps each line on one row at 320 */
  .hero--photo .hero__title .h-xl em { color: var(--gold-2); }
  /* "Light in the mist" (proposal E, Tobias 1. 11. 2026, design/lettering-proposals/beauty-studio-dym.png): the title block on the axis of the picture, the h1
     first and "BEAUTY STUDIO" under it, in the smoke band, in a light champagne with a soft glow as if lit through haze. The markup keeps the label before the
     h1 (desktop and screen readers); only the visual order changes. The negative right margin takes the tracking after the last letter off, so the line is
     truly centred. It ends above her hair at every phone width (photo audit). */
  .hero--photo .hero__title { display: flex; flex-direction: column; text-align: center; }
  .hero--photo .hero__title .kicker { order: 1; justify-content: center; margin: clamp(1.4rem, 7vw, 2.2rem) 0 0; }
  .hero--photo .hero__title .kicker__n { color: #E9D3A8; font-size: .9rem; letter-spacing: .7em; margin-right: -.7em;
    text-shadow: 0 0 10px rgba(214, 183, 131, .7), 0 0 26px rgba(214, 183, 131, .45), 0 0 60px rgba(214, 183, 131, .25); }
  .hero--photo .hero__copy > .lead { margin: 0; padding: clamp(28px, 7vw, 44px) var(--gut) 0; }
  .hero--photo .hero__copy > .hero__cta { margin: 0; padding: 1.6rem var(--gut) clamp(44px, 8vw, 72px); }
}
@media (min-width: 700px) {
  .hero--photo .hero__in { display: grid; grid-template-columns: var(--fw) minmax(0, 1fr); align-items: end; padding-inline: max(var(--gut), calc((100% - var(--wrapw)) / 2)); }
  .hero--photo .hero__fig { width: var(--fw); height: calc(var(--fw) / var(--arn)); margin: 0; }
  .hero--photo .hero__ph { height: 100%; }
  .hero--photo .hero__copy { align-self: center; max-width: 36rem; padding: calc(var(--hh) + clamp(20px, 3vw, 56px)) 0 clamp(28px, 4vw, 64px) clamp(24px, 4.2vw, 80px); }
  .hero--photo .h-xl { font-size: calc(var(--adj) * clamp(2.2rem, .4rem + 3.8vw, 4.6rem)); }
  /* "Beauty studio" alone above the h1 (no address, Tobias 1. 11. 2026), larger than any other lead-in: about 26 px at 1024, 32 px at 1440, 38 px at 1920 */
  .hero--photo .kicker { margin-bottom: clamp(1rem, .4rem + .9vw, 1.6rem); }
  .hero--photo .kicker__n { font-size: clamp(1.6rem, .8rem + 1.3vw, 2.4rem); line-height: 1.2; letter-spacing: .005em; }
  .hero--photo .hero__copy .lead { font-size: clamp(1rem, .75rem + .35vw, 1.2rem); }
}
/* Page heroes that carry a photograph (the four skin groups, Líčenie): the picture runs up under the transparent header to the top of the window, the
   header goes solid after the first scroll (the .hdr--over state of the home page), and the picture touches the window edge: on desktop the right edge,
   top and bottom of the hero, on phones and tablets the whole width (no espresso strip beside it). Every frame keeps the shape of its own file, so
   nothing is cropped (--arn is the file's width / height). Where the subjects lie in the frame (tools/photo-subjects.json, % of the frame, y from the
   top): anti-age 22-94, hydratácia 17-62, čistá pleť 12-95, pigment 3-97 (a whole room), make-up 6-96 with the artist's head from 13 %; the header is
   about 10 % of the desktop frame (76 of 766 px) and 14-18 % of a phone frame (68 of 375-500 px): its controls lie on ceiling, wall and window frames,
   never on a face or on the hand with the brush (lips at 43 %). Desktop: the picture is at most 54 % of the width, so the copy keeps a readable column. */
.phero--photo { margin-top: calc(-1 * var(--hh)); }
.phero--photo .phero__in { padding-top: var(--hh); }
@media (min-width: 1000px) {
  .phero--photo { --fw: min(calc((var(--ph-h) + var(--hh)) * var(--arn)), 54vw); --fh: calc(var(--fw) / var(--arn)); }
  .phero--photo .phero__in { grid-template-columns: minmax(0, 1fr) var(--fw); min-height: var(--fh); }
  /* a compact copy column, so that the picture can be as tall as the hero without taking more than 62 % of the width */
  .phero--photo .phero__copy { padding-top: clamp(20px, 3vw, 64px); padding-bottom: clamp(24px, 3.4vw, 72px); padding-right: clamp(20px, 3vw, 56px); }
  .phero--photo .h-xl { font-size: calc(var(--adj) * clamp(2.3rem, .5rem + 4.2vw, 5.4rem)); }
  .phero--photo .phero__copy .lead { margin-top: 1.2rem; font-size: clamp(1rem, .8rem + .35vw, 1.2rem); }
  .phero--photo .pills { margin-top: 1.2rem; gap: 8px; }
  .phero--photo .phero__cta { margin-top: clamp(20px, 2.6vw, 40px); }
  .phero--photo .crumbs { margin-bottom: 1.1rem; }
  .phero--photo .phero__fig { width: var(--fw); height: var(--fh); align-self: start; margin-top: calc(-1 * var(--hh)); }
}
@media (max-width: 999px) {
  /* below 1000px the copy column would be too narrow beside a picture as tall as the hero: the picture goes on top, the whole width of the window */
  .phero--photo .phero__in { grid-template-columns: minmax(0, 1fr); padding: 0; min-height: 0; }
  .phero--photo .phero__fig { order: -1; width: 100%; max-width: none; margin: 0; height: auto; max-height: 92svh; }
  .phero--photo .phero__copy { max-width: none; padding: clamp(32px, 7vw, 48px) var(--gut) clamp(36px, 7vw, 56px); }
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 1.6rem; font-size: .85rem; color: var(--on-deep-2); }
.crumbs a { text-decoration: none; transition: color .3s; min-height: 24px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 4px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8rem; }
.pills li { padding: .5rem 1rem; border: 1px solid var(--line-deep); border-radius: 999px; font-size: .88rem; color: var(--on-deep); }
.phero--text .phero__in { min-height: 0; }
.phero--text .phero__copy { max-width: 60rem; }
.phero__marq { border-top: 1px solid var(--line-deep); }

/* ---------- the three facts, and the running band of names ---------- */
.triad { background: var(--bg); padding-top: clamp(56px, 7vw, 104px); }
.triad__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; padding-bottom: clamp(44px, 6vw, 88px); }
.triad__l li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 0 20px; }
.triad__l li + li { border-left: 1px solid var(--line); }
.triad__t { margin: 8px 0 0; font-family: var(--f-display); font-weight: var(--dw); letter-spacing: var(--dtrack); font-size: calc(var(--adj) * clamp(1.35rem, 1.1rem + .6vw, 1.7rem)); line-height: 1.15; text-wrap: balance; }
.triad .val { margin: 0; max-width: 21em; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.triad .val a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; transition: color .3s; }
.triad .val a:hover { color: var(--gold-ink); }
.chip { flex: none; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-ink); }
.chip .ic { width: 1.35rem; height: 1.35rem; }
.marq { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(18px, 2.4vw, 36px); }
.marq__t { display: flex; width: max-content; }
.marq__l { display: flex; flex: none; align-items: center; }
.marq__l li { position: relative; padding-inline: clamp(24px, 3vw, 52px); font-family: var(--f-display); font-size: calc(var(--adj) * clamp(2.2rem, 1.2rem + 3.4vw, 4.6rem)); line-height: 1.15; letter-spacing: var(--dtrack); white-space: nowrap; }
.marq__l li::after { content: ""; position: absolute; right: -.3rem; top: 50%; width: .6rem; height: .6rem; border: 1.5px solid var(--gold); border-radius: 50%; transform: translateY(-50%); }
.marq__l li.is-i { font-style: var(--em); color: var(--gold-ink); }
.marq--deep { border-color: var(--line-deep); }
.marq--deep li.is-i, .deep .marq li.is-i { color: var(--gold-2); }
.tech-sec .marq { margin-bottom: clamp(36px, 5vw, 64px); }
@media (prefers-reduced-motion: no-preference) {
  .marq__t { animation: marq 70s linear infinite; }
  .marq:hover .marq__t { animation-play-state: paused; }
}
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marq__t { width: auto; justify-content: center; }
  .marq__l { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .marq__l[aria-hidden="true"] { display: none; }
}

/* ---------- home: the four rituals as large lines ---------- */
.idx__l { border-top: 1px solid var(--line); }
.idx { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto clamp(48px, 5vw, 72px) 3rem; align-items: center; column-gap: clamp(16px, 2.4vw, 40px); padding: clamp(22px, 2.8vw, 40px) clamp(8px, 1.4vw, 20px); border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .4s var(--ease); }
.idx { --shift: clamp(8px, 1.2vw, 16px); }
.idx__n, .idx__t { transition: transform .6s var(--ease); }
.idx__t { padding-right: var(--shift); }
.idx__n { font-family: var(--f-display); font-size: 1.25rem; color: var(--gold-ink); }
.idx__name { display: block; font-family: var(--f-display); font-size: calc(var(--adj) * clamp(2.1rem, 1rem + 3.9vw, 4.8rem)); line-height: 1.04; letter-spacing: var(--dtrack); overflow-wrap: break-word; transition: color .3s; }
.idx__sub { display: block; margin-top: 8px; font-size: 1rem; color: var(--ink-2); }
.idx__meta { display: grid; gap: 2px; text-align: right; white-space: nowrap; font-size: .9rem; color: var(--ink-2); }
.idx__ic { display: grid; place-items: center; color: var(--gold-ink); transition: transform .8s var(--ease); }
.idx__ic .ic { width: 100%; height: auto; stroke-width: 1; }
.idx__go { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s, transform .6s var(--ease); }
/* Hover and focus. Hover only where a pointer can hover (a tap must not leave a row stuck in its hovered look); keyboard focus always. Nothing changes
   the layout: the numeral and the title slide right inside room the title column keeps free (--shift), the picture grows 10 %, and tools/checks.mjs
   (hoverstable) fails when any box comes closer than 8 px to the edge of its row or of the window. Below 720px there is no sliding and the picture
   grows 4 % inside a 12 px row padding. */
.idx:focus-visible { background: var(--hover); }
.idx:focus-visible .idx__n, .idx:focus-visible .idx__t { transform: translateX(var(--shift)); }
.idx:focus-visible .idx__name { color: var(--gold-ink); }
.idx:focus-visible .idx__ic { transform: scale(1.08); }
.idx:focus-visible .idx__go { background: var(--gold-2); color: var(--deep); border-color: var(--gold-2); transform: rotate(45deg); }
@media (hover: hover) {
  .idx:hover { background: var(--hover); }
  .idx:hover .idx__n, .idx:hover .idx__t { transform: translateX(var(--shift)); }
  .idx:hover .idx__name { color: var(--gold-ink); }
  .idx:hover .idx__ic { transform: scale(1.08); }
  .idx:hover .idx__go { background: var(--gold-2); color: var(--deep); border-color: var(--gold-2); transform: rotate(45deg); }
}

/* ---------- the salon (20. 10. 2026: the owner's photographs of the salon as it is today): the treatment room, from tools/photo-subjects.json. The wide file
   is 1420 x 568 (2.5:1), the tall one 780 x 975, both uncropped by the browser (the frame has the shape of the file) and never drawn larger than their files:
   under 780px the tall file (at most 779 px wide); from 780px the wide file, edge to edge up to 1448 px of window (1.02 x its width; ui-rules "Wide pictures"),
   and from there a framed element, 48 px from the window's sides, at most 1420 px wide, rounded, with space above and below. From 900px the headline stands on a
   cream plate over the left part of the wide picture (the white wall and the curtain, no subject: the subject starts at 46 % of the width); no gradient lies on
   the picture. ---------- */
.salon { background: var(--deep-3); }
.salon__top { position: relative; }
.salon__ph { display: block; width: 100%; aspect-ratio: auto; border-radius: 0; background: var(--deep-3); }
.salon__ph picture { display: block; }
.salon__ph img { display: block; width: 100%; height: auto; aspect-ratio: 780 / 975; }
@media (min-width: 780px) {
  /* the frame is capped at 64 % of the window height (the audit's "too big" is 66 %) and cover trims the top and bottom on a window that is nearly as wide as it is tall */
  .salon__ph img { aspect-ratio: 1420 / 568; max-height: max(64svh, 31vw); object-fit: cover; object-position: 50% 50%; }
}
@media (min-width: 1449px) {
  .salon { padding-block: 48px; }
  .salon__top { width: min(100% - 96px, 1420px); margin-inline: auto; border-radius: 20px; overflow: clip; }
}
.salon__txt { padding: clamp(32px, 6vw, 56px) var(--gut) clamp(32px, 6vw, 56px); }
.salon__more { margin: 1.2rem 0 0; }
.salon__rate { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.rate__t { grid-column: 1; grid-row: 2; margin: 1rem 0 0; color: var(--on-deep-2); font-size: 1.02rem; line-height: 1.5; }
.salon__book { grid-column: 1 / -1; grid-row: 3; margin-top: 2rem; justify-self: start; }
/* the two places the salon is rated: a line per source with its mark, each a link to the listing; the reviews among the cards carry the same marks.
   No separate big number above them (Tobias, 1. 11. 2026: "5.0 tu je 3x"): the two lines are the rating, set large, the score in the display face and champagne. */
.rate__src { grid-column: 1; grid-row: 1; display: grid; gap: clamp(1.1rem, .8rem + .8vw, 1.6rem); margin: 0; padding: 0; list-style: none; }
.rate__src a { display: flex; align-items: center; gap: clamp(.9rem, .7rem + .6vw, 1.3rem); color: var(--on-deep-2); text-decoration: none; transition: color .25s; }
.rate__src a:hover, .rate__src a:focus-visible { color: var(--gold-2); }
.rate__src a:hover .rate__s, .rate__src a:focus-visible .rate__s { color: var(--gold-2); }
.rate__src .rate__t { grid-column: auto; grid-row: auto; display: grid; margin: 0; }
.rate__s { font-family: var(--f-display); font-size: calc(var(--adj) * clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem)); line-height: 1.1; letter-spacing: var(--dtrack); color: var(--on-deep); transition: color .25s; }
.rate__s b { font-weight: inherit; color: var(--gold-2); }
.rate__t small { margin-top: .3rem; font-size: clamp(.9rem, .85rem + .2vw, 1rem); line-height: 1.45; }
.rate__src .src-mark { width: clamp(2.8rem, 2.4rem + 1vw, 3.4rem); height: clamp(2.8rem, 2.4rem + 1vw, 3.4rem); }
.rate__src .src-mark svg { width: 1.25rem; height: 1.25rem; }
.rate__src .src-n { width: 1.05rem; height: 1.2rem; }
.src-mark { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--line-deep); border-radius: 50%; color: var(--on-deep); }
.src-mark svg { width: .9rem; height: .9rem; }
.src-mark:empty { display: none; }
/* two photographs, the second smaller and lower, each with a caption in the display face */
/* client reviews (Tobias, 20. 10. 2026): intro + the Notino rating on top, the six quotes below as a staggered column set; a swipe row on phones */
.rev { background: var(--deep-3); padding-block: clamp(56px, 8vw, 128px); }
.rev__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(36px, 6vw, 96px); align-items: end; margin-bottom: clamp(44px, 6vw, 88px); }
.rev__intro .kicker { margin-bottom: 1rem; }
.rev__intro .h-l { max-width: 11em; }
.rev__p { margin: 1.4rem 0 0; max-width: 34em; font-size: 1.08rem; line-height: 1.6; color: var(--on-deep-2); text-wrap: pretty; }
.rev__p + .rev__p { margin-top: .7rem; }
.rev .salon__rate { justify-self: end; }
.rev__l { columns: 3 300px; column-gap: clamp(20px, 2.4vw, 36px); }
/* desktop (two-column head, from 1100 px; Tobias, 1. 11. 2026): the booking button leaves the ratings and closes the section at its bottom left, under the
   cards, and the two ratings sit alone at the foot of the head, level with the last line of the intro. Below 1100 px the button stays under the ratings. */
.rev__foot { display: none; }
@media (min-width: 1100px) {
  .rev .salon__book { display: none; }
  .rev__foot { display: block; margin-top: clamp(4px, 1vw, 16px); }
}
.rev__c { break-inside: avoid; display: grid; gap: 1.4rem; margin-bottom: clamp(20px, 2.4vw, 36px); padding: clamp(26px, 2.8vw, 40px); border: 1px solid var(--line-deep); border-radius: 20px; background: rgba(245, 240, 233, .03); }
.rev__c::before { content: "“"; display: block; height: .5em; font-family: var(--f-display); font-size: 4.2rem; line-height: 1; color: var(--gold-2); }
.rev__q { margin: 0; }
.rev__src { display: inline-flex; align-items: center; gap: .55rem; font-size: .68rem; letter-spacing: .14em; color: var(--on-deep-2); }
.rev__src .src-mark { width: 1.6rem; height: 1.6rem; }
.rev__src .src-mark svg { width: .75rem; height: .75rem; }
.rev__q p { margin: 0; font-family: var(--f-display); font-size: calc(var(--adj) * clamp(1.12rem, 1rem + .35vw, 1.32rem)); line-height: 1.5; color: var(--on-deep); text-wrap: pretty; }
.rev__n { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--line-deep); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
@media (min-width: 900px) {
  /* the headline stands on a solid cream plate, centred over the gold trolley (Tobias, 2. 11. 2026: "zakri s tym containerom vozik"); the trolley
     spans x 0.41-0.51 and y 0.52-0.91 of the band at every width (cover crops only top and bottom here), the plate's centre is at x 0.455 */
  .salon__txt { position: absolute; z-index: 2; left: calc(45.5% - min(17.5%, 15rem)); bottom: clamp(12px, 2vw, 32px); width: min(35%, 30rem); padding: clamp(22px, 2.6vw, 38px); border-radius: 20px; background: rgba(245, 240, 233, .95); color: var(--ink); box-shadow: 0 30px 50px -28px rgba(16, 14, 11, .6); }
  .salon__txt .kicker { margin-bottom: .7rem; }
  .salon__txt .kicker__n { font-size: 1.1rem; color: var(--gold-ink); }
  .salon__txt .kicker__m { color: var(--ink-2); }
  .salon__txt .h-l em { color: var(--gold-ink); }
  .salon__txt .btn-line:hover { color: var(--gold-ink); }
}

/* ---------- the price list of the home page ---------- */
.menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 7vw, 112px); align-items: start; }
.menu__g + .menu__g { margin-top: clamp(40px, 5vw, 72px); }
.menu__h { margin: 0 0 4px; border-bottom: 1px solid var(--gold); font-family: var(--f-display); font-style: var(--em); font-size: calc(var(--adj) * clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)); line-height: 1.2; color: var(--gold-ink); }
.menu__h a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; text-decoration: none; transition: color .3s; }
.menu__h a:hover { color: var(--ink); }
.menu__h a .ic { width: 1.1rem; height: 1.1rem; transition: transform .5s var(--ease); }
.menu__h a:hover .ic { transform: translateX(6px); }
.menu__h:not(:has(a)) { padding-bottom: 14px; padding-top: 8px; }
.mrow { display: grid; grid-template-columns: minmax(0, auto) minmax(.75rem, 1fr) auto auto; align-items: baseline; column-gap: 12px; padding: 15px 10px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .3s; }
.mrow:hover, .mrow:focus-visible { background: var(--hover); }
.mrow__n { font-family: var(--f-display); font-size: calc(var(--adj) * 1.45rem); line-height: 1.2; letter-spacing: var(--dtrack); padding-right: 8px; transition: color .3s, transform .5s var(--ease); }
.mrow:hover .mrow__n, .mrow:focus-visible .mrow__n { color: var(--gold-ink); transform: translateX(8px); }
.mrow__n small { display: block; margin-top: 3px; font: 400 .82rem/1.4 var(--f-text); letter-spacing: 0; color: var(--ink-2); }
.mrow__n small.mrow__tel { display: flex; align-items: center; gap: 6px; color: var(--gold-ink); }
.mrow__n small.mrow__tel .ic { width: .9rem; height: .9rem; }
.mrow__dots { align-self: start; margin-top: calc(var(--adj) * 1.2rem); border-bottom: 2px dotted var(--line-2); }
.mrow__d { font-size: .85rem; color: var(--ink-2); white-space: nowrap; }
.mrow__p { font-family: var(--f-display); font-size: calc(var(--adj) * 1.5rem); line-height: 1; white-space: nowrap; min-width: 4.4rem; text-align: right; }

/* ---------- specials / treatment lists ---------- */
.spec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.spec__head { position: sticky; top: calc(var(--hh) + 32px); }
.spec__head .lead { margin-top: 1.4rem; }
.tlist { border-top: 1px solid var(--line); }
.tc { border-bottom: 1px solid var(--line); transition: background-color .4s var(--ease); }
.tc:hover { background: var(--hover); }
.tc.is-open, .tc.is-open:hover { background: var(--surface); }
.tc__row { display: grid; grid-template-columns: minmax(0, 1fr) 7.2rem 6.4rem 11.5rem; align-items: center; column-gap: clamp(14px, 2.2vw, 36px); padding: clamp(16px, 1.8vw, 24px) clamp(8px, 1.4vw, 20px); }
.tc__toggle { box-sizing: border-box; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 2.75rem; align-items: center; gap: 0 12px; width: 100%; min-height: 48px; padding: 0; text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.tc__toggle:focus-visible { outline: 2px solid var(--deep-2); outline-offset: 4px; }
.tc__num { font-family: var(--f-display); font-size: 1.25rem; color: var(--gold-ink); }
.tc__name { font-family: var(--f-display); font-size: calc(var(--adj) * clamp(1.4rem, 1.1rem + 1vw, 2.1rem)); line-height: 1.12; letter-spacing: var(--dtrack); text-wrap: balance; overflow-wrap: break-word; transition: color .3s; }
.tc__sub { display: block; margin-top: 4px; font: 400 .9rem/1.4 var(--f-text); letter-spacing: 0; color: var(--ink-2); }
.tc__toggle:hover .tc__name { color: var(--gold-ink); }
.tc__plus { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s, transform .6s var(--ease); }
.tc__plus .ic { width: 1.05rem; height: 1.05rem; }
.tc__toggle:hover .tc__plus { background: var(--gold-2); color: var(--deep); border-color: var(--gold-2); }
.tc.is-open .tc__plus { background: var(--deep); color: var(--on-deep); border-color: var(--deep); transform: rotate(45deg); }
.tc.is-open .tc__toggle:hover .tc__plus { background: var(--gold-2); color: var(--deep); border-color: var(--gold-2); }
.tc__dur, .tc__price, .pr__dur, .pr__price { margin: 0; display: grid; gap: 2px; }
.tc__lbl { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.tc__val { font-size: 1rem; line-height: 1.3; }
.tc__price .tc__val, .pr__price .tc__val { font-family: var(--f-display); font-size: calc(var(--adj) * 1.7rem); line-height: 1; letter-spacing: var(--dtrack); white-space: nowrap; }
.tc__body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .6s var(--ease), visibility 0s linear .6s; }
.tc.is-open .tc__body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
html:not(.js) .tc__body { grid-template-rows: 1fr; visibility: visible; }
.tc__inner { overflow: hidden; min-height: 0; }
.tc__txt { max-width: 66ch; padding: 2px clamp(8px, 1.4vw, 20px) 30px calc(2.6rem + 12px + clamp(8px, 1.4vw, 20px)); color: var(--ink); }
.tc__txt p { margin: 0 0 .9em; color: var(--ink-2); }
/* a treatment's own course (only where its own source text has one): a closed disclosure in the open card, a hairline box all round, the steps numbered */
.tc-course { margin-top: 1.4rem; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(214, 183, 131, .06); }
.tc-course__s { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 13px; cursor: pointer; list-style: none; transition: background-color .25s; }
.tc-course__s::-webkit-details-marker { display: none; }
.tc-course__s:hover { background: var(--hover); }
.tc-course__s:focus-visible { outline: 2px solid var(--deep-2); outline-offset: 3px; }
.tc-course__t { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.2; letter-spacing: var(--dtrack); }
.tc-course__n { font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.tc-course__i { margin-left: auto; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--gold-ink); }
.tc-course__i .ic { width: 1.05rem; height: 1.05rem; transition: transform .35s var(--ease); }
.tc-course[open] .tc-course__i .ic { transform: rotate(180deg); }
.tc-course__l { margin: 0; padding: 6px 16px 14px; border-top: 1px solid var(--line-2); }
.tc-course__l li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; gap: 0 8px; padding: 9px 0; line-height: 1.45; color: var(--ink); }
.tc-course__l li + li { border-top: 1px solid var(--line); }
.tc-course__k { font-family: var(--f-display); font-size: 1.35rem; line-height: 1; color: var(--gold-ink); }
.tc-course + p { margin-top: 1.2rem; }
.tc-sub { margin-top: 1.2rem; }
.tc-sub h4 { margin: 0 0 .5rem; font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); }
.chk li { position: relative; padding: .28rem 0 .28rem 1.7rem; color: var(--ink-2); line-height: 1.5; }
.chk li::before { content: ""; position: absolute; left: 0; top: .62rem; width: 1rem; height: 1rem; background: var(--gold-ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* always-visible price rows (brows, lashes, depilation) */
.plist { border-top: 1px solid var(--line); }
.pr { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 7.2rem 6.4rem 11.5rem; align-items: start; column-gap: clamp(14px, 2.2vw, 36px); padding: clamp(26px, 2.8vw, 40px) clamp(8px, 1.4vw, 20px); border-bottom: 1px solid var(--line); }
.pr__num { font-family: var(--f-display); font-size: 1.25rem; color: var(--gold-ink); padding-top: .4rem; }
.pr__name { font-family: var(--f-display); font-size: calc(var(--adj) * clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem)); line-height: 1.12; letter-spacing: var(--dtrack); }
.pr__txt { max-width: 62ch; margin-top: .7rem; color: var(--ink-2); }
.pr__txt p { margin: 0 0 .7em; }
.pr__dur, .pr__price { padding-top: .4rem; }
.pr__book { padding-top: .1rem; justify-self: end; }
.tc__book { justify-self: end; }

/* ---------- band: the diagnostic offer ---------- */
.band { padding-block: clamp(72px, 9vw, 136px); }
.band__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.band__copy .lead { margin-top: 1.4rem; }
.band__act { display: grid; justify-items: start; gap: 18px; }

/* ---------- Líčenie on the home page: words and prices only, no photograph (the owner, 20. 10. 2026); the pictures are on licenie.html ---------- */
.lic__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.lic__side .mini { margin-top: 0; }
.lic__copy .lead { margin: 1.6rem 0 0; }
.mini { margin-top: 2.2rem; border-top: 1px solid var(--line-2); }
.mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 22px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.mini__n { font-family: var(--f-display); font-size: calc(var(--adj) * 1.55rem); line-height: 1.15; }
.mini__d { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.mini__p { font-family: var(--f-display); font-size: calc(var(--adj) * 1.55rem); white-space: nowrap; }
/* the wedding make-up stands out in the home Líčenie list (Tobias, 1. 11. 2026: "ružový text aj ružovú cenu nech vyčnieva"): a deep rose, 4.6:1 on the beige band */
.mini--rose .mini__n, .mini--rose .mini__p { color: #A14262; }
.lic__cta { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; margin-top: 2.4rem; }

/* ---------- "Naša práca": every photograph in view at once, nothing scrolls sideways. The lead is a frame no taller than 62 % of the window
   (the audit calls a larger portrait "blown up"), the others are straight-edged frames beside it in 2 or 3 columns. Each frame has the shape of its
   own 3:4 file, so nothing is cropped, and nothing is scaled on hover (a 4 % zoom put the head within 2 % of the frame's edge). ---------- */
.gal { --cols: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 6vw, 44px) clamp(16px, 3vw, 26px); padding: 8px; }
.gal--3 { --cols: 3; }
.gal__i { margin: 0; }
.gal__f { margin: 0; display: grid; gap: 14px; }
.gal__ph { width: 100%; }
.gal__i--lead { grid-column: 1 / -1; justify-self: center; width: min(100%, 440px); }
.gal__c { display: flex; align-items: baseline; gap: .5rem; }
.gal__n { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; letter-spacing: var(--dtrack); color: var(--gold-ink); }
.gal__t { font-size: .72rem; font-weight: 500; letter-spacing: .15em; color: var(--ink-2); }
@media (min-width: 900px) {
  .gal { grid-template-columns: min(440px, calc(62svh * .75)) repeat(var(--cols), minmax(0, 290px)); justify-content: center; align-items: start; gap: 40px clamp(22px, 2.4vw, 32px); padding: 10px; }
  .gal__i--lead { grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: stretch; width: auto; }
}
.work .sec__head--split > div { min-width: 0; }

/* ---------- group pages: for whom, technologies, pager ---------- */
.two { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.two__head { position: sticky; top: calc(var(--hh) + 32px); }
.forwhom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--line); }
.forwhom li { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; line-height: 1.4; }
.forwhom__ic { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--gold); position: relative; }
.forwhom__ic::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; background: var(--gold-ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.reco { margin-top: 0; max-width: 60ch; }
.reco .lbl { margin-bottom: .6rem; }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); padding-block: clamp(56px, 7vw, 104px); }
.pager__a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(18px, 2.4vw, 32px); border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); text-decoration: none; transition: background-color .4s var(--ease), border-color .4s, color .4s; }
.pager__t { display: grid; gap: 4px; min-width: 0; }
.pager__a--next .pager__t { text-align: right; }
.pager__n { font-family: var(--f-display); font-size: calc(var(--adj) * clamp(1.4rem, 1rem + 1.2vw, 2.1rem)); line-height: 1.1; letter-spacing: var(--dtrack); overflow-wrap: break-word; }
.pager__a:hover { background: var(--deep); color: var(--on-deep); border-color: var(--deep); }
.pager__a:hover .lbl { color: var(--on-deep-2); }
.pager__a:hover .knob { background: var(--gold-2); color: var(--deep); border-color: var(--gold-2); }
.pager__a--next:hover .knob { transform: translateX(4px); }
.pager__a--prev:hover .knob { transform: translateX(-4px); }

/* ---------- contact and footer ---------- */
/* follow the owner: two large links under the contact, on ivory before the black footer */
.social { padding-block: clamp(64px, 8vw, 128px); }
.social__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.social__head .kicker { margin-bottom: 1rem; }
.social__p { margin: 1.2rem 0 0; max-width: 26em; font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }
.social__l { display: grid; gap: 14px; }
.soc { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); min-height: 44px; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 32px); border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s; }
.soc__ic { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--bg-2); color: var(--gold-ink); transition: background-color .45s var(--ease), color .45s var(--ease); }
.soc__ic .ic { width: 1.5rem; height: 1.5rem; }
.soc__t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.soc__n { font-family: var(--f-display); font-size: calc(var(--adj) * clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)); line-height: 1.1; letter-spacing: var(--dtrack); }
.soc__h { font-size: .95rem; color: var(--ink-2); overflow-wrap: anywhere; transition: color .45s var(--ease); }
.soc:hover, .soc:focus-visible { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.soc:hover .soc__ic, .soc:focus-visible .soc__ic { background: var(--gold-2); color: var(--deep); }
.soc:hover .soc__h, .soc:focus-visible .soc__h { color: var(--on-deep-2); }
.soc:hover .soc__go, .soc:focus-visible .soc__go { background: var(--gold-2); border-color: var(--gold-2); color: var(--deep); transform: rotate(45deg); }
@media (max-width: 479px) { .soc { gap: 12px; padding: 16px 14px; } .soc__ic { width: 2.75rem; height: 2.75rem; } .soc__ic .ic { width: 1.25rem; height: 1.25rem; } .soc__h { overflow-wrap: normal; } }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.contact__copy .lead { margin: 1.4rem 0 2.2rem; }
.cf li { display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.cf .chip { width: 3.2rem; height: 3.2rem; }
.cf .chip .ic { width: 1.2rem; height: 1.2rem; }
.cf__t { display: grid; gap: 2px; min-width: 0; }
.cf .val { font-size: 1.05rem; line-height: 1.4; overflow-wrap: anywhere; }
.cf .val small { display: block; font-size: .82rem; color: var(--ink-2); }
.cf .val a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; transition: color .3s, text-decoration-color .3s; }
.cf .val a:hover { color: var(--gold-ink); text-decoration-color: var(--gold-ink); }
.contact__badge { display: grid; place-items: center; }
/* ---------- gift vouchers: an espresso panel on the cream page, a tip, two controls, a glossy gold card with a seal ---------- */
.vouch { padding-bottom: var(--sec-y); }
.vouch__panel { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(26px, 6vw, 96px); border-radius: clamp(28px, 5vw, 64px);
  background: radial-gradient(ellipse 55% 70% at 84% 16%, rgba(214, 183, 131, .2), transparent 70%), radial-gradient(ellipse 60% 60% at 6% 104%, rgba(42, 38, 32, .95), transparent 70%), linear-gradient(152deg, var(--deep) 0%, var(--deep-3) 100%); }
.vouch__copy .lead { margin: 1.5rem 0 0; }
.tip { max-width: 34rem; margin-top: clamp(24px, 3vw, 40px); padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--line-deep); border-radius: 22px; background: rgba(245, 240, 233, .04); }
.tip__lbl { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.chip--sm { width: 2.3rem; height: 2.3rem; border-color: var(--gold-2); color: var(--gold-2); }
.chip--sm .ic { width: 1.1rem; height: 1.1rem; }
.tip__t { font-family: var(--f-display); font-size: calc(var(--adj) * clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem)); line-height: 1.15; letter-spacing: var(--dtrack); }
.tip__p { margin: .7rem 0 1.1rem; max-width: 36ch; color: var(--on-deep-2); }
.tip__m { display: flex; align-items: baseline; gap: .7rem; margin: 0; font-family: var(--f-display); font-size: calc(var(--adj) * 1.9rem); line-height: 1; color: var(--gold-2); }
.vouch__ask { margin: clamp(24px, 3vw, 34px) 0 16px; color: var(--on-deep-2); }
.vouch__act { display: flex; flex-wrap: wrap; gap: 14px; }
.vouch__stage { position: relative; display: grid; place-items: center; padding: clamp(16px, 3vw, 36px) clamp(20px, 5.4vw, 72px) clamp(44px, 7vw, 92px) clamp(8px, 2vw, 24px); }
.vouch__halo { position: absolute; left: 50%; top: 46%; width: min(100%, 640px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(214, 183, 131, .16); box-shadow: 0 0 0 clamp(24px, 4vw, 56px) rgba(214, 183, 131, .035), 0 0 0 clamp(50px, 8vw, 112px) rgba(214, 183, 131, .022); pointer-events: none; }
@media (min-width: 900px) { .vouch__halo { width: min(118%, 640px); } }
.vouch__card { position: relative; width: min(100%, 470px); transform: rotate(-7deg); }
.vcard { --rx: 0deg; --ry: 0deg; --gx: 28%; --gy: 18%;
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 1.6; container-type: inline-size; border-radius: 5.6% / 8.9%; color: var(--deep);
  background: linear-gradient(118deg, #F3E2AE 0%, #DDBF78 22%, #B8923F 50%, #E6CC8C 73%, #C79F50 100%);
  box-shadow: 0 54px 70px -34px rgba(0, 0, 0, .78), 0 20px 30px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(96, 64, 12, .4);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); }
.vcard::before { content: ""; position: absolute; inset: 4.4% 2.9%; border: 1px solid rgba(23, 21, 17, .36); border-radius: 4.2% / 6.6%; pointer-events: none; }
.vcard__logo { position: absolute; left: 7%; top: 12%; width: 56%; --logo-a: rgba(23, 21, 17, .8); --logo-b: var(--deep); }
.vcard__t { position: absolute; left: 7.4%; bottom: 10.5%; font-size: max(.6rem, 2.6cqw); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; color: var(--deep); }
.vcard__sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .42), transparent 46%), linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .22) 42%, rgba(255, 255, 255, 0) 54%); }
.vcard__sheen::after { content: ""; position: absolute; inset: -10% -60%; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 49%, rgba(255, 255, 255, .15) 54%, transparent 62%); transform: translateX(-70%); opacity: 0; }
.vouch__seal { position: absolute; right: -10%; bottom: -19%; width: 36%; min-width: 84px; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); }
@container (max-width: 340px) { .vcard__t { white-space: normal; max-width: 44%; line-height: 1.55; letter-spacing: .2em; } }
@media (prefers-reduced-motion: no-preference) {
  .vcard__sheen::after { opacity: 1; animation: sheen 7s var(--ease-io) infinite; }
}
@keyframes sheen { 0%, 52% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }

/* ---------- contact and footer ---------- */
.foot { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(64px, 8vw, 120px); background: var(--deep-3); color: var(--on-deep); }
.foot__orn { position: absolute; z-index: -1; pointer-events: none; }
.foot__orn--l { left: -90px; top: 28px; width: 380px; height: 280px; background: radial-gradient(circle at 110px 110px, rgba(245, 240, 233, .06) 0 104px, transparent 105px), radial-gradient(circle at 250px 160px, rgba(245, 240, 233, .04) 0 104px, transparent 105px); }
.foot__orn--r { right: -150px; top: 28px; width: 340px; height: 340px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 20px, rgba(214, 183, 131, .17) 20px 21px); }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1200px) { .foot__cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, 1fr); } }
.foot__col { padding: 0 clamp(20px, 3.4vw, 56px); }
.foot__col:first-child { padding-left: 0; }
.foot__col:last-child { padding-right: 0; }
.foot__col + .foot__col { border-left: 1px solid rgba(214, 183, 131, .34); }
.foot__h { margin: 0 0 1.2rem; font-family: var(--f-display); font-size: calc(var(--adj) * 2.1rem); line-height: 1.1; letter-spacing: var(--dtrack); color: var(--on-deep); }
.foot__t { margin: 0 0 1.1rem; color: var(--on-deep-2); line-height: 1.55; }
.foot__l { display: grid; gap: 2px; }
.foot__l a { display: inline-flex; align-items: center; gap: .65rem; min-height: 36px; text-decoration: none; color: var(--on-deep-2); background: linear-gradient(var(--gold-2), var(--gold-2)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; white-space: nowrap; transition: background-size .5s var(--ease), color .3s; }
.foot__l a:hover { color: var(--gold-2); background-size: 100% 1px; }
.foot__l .ic { width: 1.05rem; height: 1.05rem; color: var(--gold-2); }
@media (min-width: 1200px) { .foot__l--nav { grid-template-columns: repeat(2, max-content); column-gap: 28px; } }
.foot__l--c { margin-bottom: 1.4rem; }
.foot__l a.foot__addr { align-items: flex-start; white-space: normal; }
.foot__addr address { font-style: normal; line-height: 1.55; }
.foot__addr .ic { margin-top: .2em; }
.foot__btn { margin-top: 1.8rem; }
.foot__col--brand { display: grid; justify-items: center; align-content: center; text-align: center; }
.foot__logo { display: block; width: min(100%, 290px); text-decoration: none; border-radius: 4px; }
.foot__logo .logo { height: auto; }
.foot__logo .logo { width: 100%; }
.foot__tag { margin: 1.5rem 0 0; max-width: 28ch; text-wrap: balance; font-family: var(--f-display); font-style: var(--em); font-size: 1.3rem; line-height: 1.4; color: var(--on-deep); }
.foot__copy { margin: 1.3rem 0 0; font-size: .85rem; color: var(--on-deep-2); }
.foot__soc { display: flex; gap: 12px; }
.foot__soc a { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--on-deep); color: var(--deep); transition: background-color .3s, color .3s, transform .5s var(--ease); }
.foot__soc a:hover, .foot__soc a:focus-visible { background: var(--gold-2); transform: translateY(-3px); }
.foot__soc .ic { width: 1.2rem; height: 1.2rem; fill: currentColor; stroke: none; }
.foot__soc li:last-child .ic { fill: none; stroke: currentColor; }
.foot__soc li:last-child .ic circle:last-child { fill: currentColor; }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line-deep); font-size: .85rem; color: var(--on-deep-2); }
.foot__bar p { margin: 0; }
.foot__ghost { margin: clamp(8px, 2vw, 28px) 0 0; height: .5em; overflow: hidden; font-family: var(--f-display); font-size: min(16.5vw, 15rem); line-height: .8; letter-spacing: .05em; text-align: center; text-transform: uppercase; white-space: nowrap; color: rgba(245, 240, 233, .055); user-select: none; }

/* ---------- page curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; background: var(--deep); }
.m-on .curtain { display: grid; }
.curtain .logo { height: clamp(34px, 6vw, 56px); }

/* ---------- motion starting states (only while html.m-on; GSAP animates them to their rest state) ---------- */
.m-on [data-rv], .m-on [data-rv-item] { opacity: 0; }
.m-on [data-img-rv]:not(.is-in) { clip-path: inset(0 0 100% 0); }
.m-on [data-hero]:not([data-hero="fig"]):not([data-hero="h1"]) { opacity: 0; }
.m-on [data-hero="fig"]:not(.is-in) .hero__ph { clip-path: inset(0 0 100% 0); }

/* the lists decide their layout from their own width (they sit in columns of very different widths) */
.tlist, .plist { container-type: inline-size; }
@container (max-width: 780px) {
  .tc__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 11.5rem; row-gap: 14px; }
  .tc__h { grid-column: 1 / -1; }
  .tc__txt { padding-left: clamp(8px, 1.4vw, 20px); }
  .pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 11.5rem; row-gap: 14px; }
  .pr__num { display: none; }
  .pr__main { grid-column: 1 / -1; }
}
@container (max-width: 480px) {
  .tc__row, .pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tc__book, .pr__book { grid-column: 1 / -1; }
  .tc__book .book, .pr__book .book { width: 100%; justify-content: space-between; }
}
@container (max-width: 340px) {
  .tc__toggle { grid-template-columns: 2.1rem minmax(0, 1fr) 2.5rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .menu { grid-template-columns: minmax(0, 1fr); }
  .menu__g + .menu__g { margin-top: 40px; }
  .menu__c + .menu__c { margin-top: 40px; }
}
@media (max-width: 1099px) {
  .rev__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rev .salon__rate { justify-self: start; }
}
@media (max-width: 899px) {
  .hero__in, .phero__in { grid-template-columns: minmax(0, 1fr); padding-left: 0; min-height: 0; }
  .hero__copy, .phero__copy { max-width: none; padding: clamp(40px, 8vw, 64px) var(--gut) clamp(36px, 7vw, 56px); }
  .hero__fig, .phero__fig { height: auto; width: 100%; max-width: 560px; margin-left: auto; }
  .hero__ph { height: auto; }
  .lic__grid, .spec, .two, .contact__grid, .band__grid, .social__grid { grid-template-columns: minmax(0, 1fr); }
  .spec__head, .two__head { position: static; }
  .foot__cols { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .foot__col, .foot__col:first-child, .foot__col:last-child { padding: 0; }
  .foot__col + .foot__col { border-left: 0; }
  .foot__col--brand { order: -1; }
  /* stacked: a hairline above Navigácia and above Kontakt, with 44 px of air under it (the first column used to lose its padding to the reset above
     and the heading sat on the line); the check "footer" in tools/checks.mjs wants 24 px or more between any divider and the next text */
  .foot__cols > .foot__col--nav, .foot__cols > .foot__col--contact { border-top: 1px solid rgba(214, 183, 131, .34); padding-top: 44px; }
  .vouch__panel { grid-template-columns: minmax(0, 1fr); }
  .vouch__stage { padding-top: 0; }
  .contact__badge { justify-items: start; }
}
@media (max-width: 719px) {
  .idx { grid-template-columns: clamp(40px, 11vw, 56px) minmax(0, 1fr) 2.75rem; row-gap: 6px; padding-inline: 12px; }
  .idx:hover .idx__t, .idx:focus-visible .idx__t { transform: none; }
  .idx:hover .idx__ic, .idx:focus-visible .idx__ic { transform: scale(1.06); }
  .idx__n { display: none; }
  .idx__ic { grid-column: 1; grid-row: 1 / 3; }
  .idx__t { grid-column: 2; grid-row: 1; }
  .idx__meta { grid-column: 2; grid-row: 2; display: flex; gap: 14px; text-align: left; }
  .idx__go { grid-column: 3; grid-row: 1 / 3; }

  .triad__l { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .triad__l li + li { border-left: 0; padding-top: 32px; border-top: 1px solid var(--line); }
}
@media (max-width: 479px) {
  .idx { grid-template-columns: clamp(36px, 11vw, 48px) minmax(0, 1fr); }
  .idx__go { display: none; }
  .idx__t { grid-column: 2; }
  .idx__name { font-size: calc(var(--adj) * clamp(1.5rem, .6rem + 4.6vw, 2rem)); }
}
@media (max-width: 639px) {
  .forwhom { grid-template-columns: minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .mini li { grid-template-columns: minmax(0, 1fr) auto; }
  .mini__d { grid-column: 1; grid-row: 2; }
  .mini__p { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .mrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .mrow__dots { display: none; }
  .mrow__d { grid-column: 1; grid-row: 2; }
  .mrow__p { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .rev { padding-block: 56px 72px; }
  .rev__l { columns: auto; display: flex; gap: 14px; margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--gold-2) transparent; }
  .rev__c { flex: 0 0 min(84%, 340px); margin: 0; scroll-snap-align: start; align-content: start; }
  .cf li { padding: 14px 16px; gap: 14px; }
}
@media (max-width: 519px) {
  .band__act .book, .hero__cta .book, .phero__cta .book { max-width: 100%; }
  .book { gap: .8rem; padding-left: 1.3rem; }
  .hero__cta, .phero__cta { gap: 14px 24px; }
}
@media (max-width: 359px) {
  .book { letter-spacing: .1em; font-size: .72rem; --pad: 1.1rem; }
}

/* ---------- the owner: the page "O mne". Her portrait (1024 x 1536, the owner's own photograph, 31. 10. 2026) is shown whole in a frame of its own shape (--ar) and is never drawn wider than 22rem
   minus its mat (the file is 1024 px wide). The "Môj príbeh" block is a design element: a framed place the owner fills herself. ---------- */
.me__fig { margin: 0; padding: 9px; }
.me__grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.me__fig { position: sticky; top: calc(var(--hh) + 32px); }
.me__ph { width: 100%; }
.me__cap { margin: 26px 0 0; font-family: var(--f-display); font-style: var(--em); font-size: 1.25rem; line-height: 1.25; color: var(--gold-ink); }
.me__cap small { display: block; margin-top: .45rem; font-family: var(--f-text); font-style: normal; font-size: .78rem; letter-spacing: .03em; line-height: 1.45; color: var(--ink-2); }
.me__txt .lead { margin: 1.4rem 0 0; }
.me__story { margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem); padding-top: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); border-top: 1px solid var(--line); max-width: 62ch; }
.me__story p { margin: 1rem 0 0; color: var(--ink-2); }
.me__story .own__h + p { margin-top: 1.1rem; }
.me__l { margin-top: 2rem; border-top: 1px solid var(--line); }
.me__l li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 6px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.me__l .lbl { padding-top: .3rem; }
.me__l .val small { display: block; margin-top: .15rem; font-size: .9rem; color: var(--ink-2); }
.me__l a, .legal a:not(.btn-solid), .ck__p a { text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .25s; }
.me__l a:hover, .legal a:not(.btn-solid):hover, .ck__p a:hover { color: var(--gold-ink); text-decoration-color: var(--gold); }
.own { margin-top: clamp(32px, 4vw, 56px); padding: clamp(22px, 3vw, 36px); border: 1px dashed var(--gold); border-radius: 18px; background: rgba(214, 183, 131, .07); }
.own__h { font-family: var(--f-display); font-style: var(--em); font-size: calc(var(--adj) * 2rem); line-height: 1.15; letter-spacing: var(--dtrack); color: var(--ink); }
.own__note { margin: .9rem 0 0; }
.own__tag, .own-note { display: inline-block; padding: .3rem .85rem; border: 1px dashed var(--gold); border-radius: 999px; background: rgba(214, 183, 131, .08); font-size: .84rem; font-style: italic; letter-spacing: .03em; line-height: 1.4; color: var(--gold-ink); }

/* ---------- cosmetics sold in the salon: the picture is drawn 576 px wide at most (its file is 1152 px wide: never enlarged); side by side with the text from 1200 px, above it below that ---------- */
.koz__grid { display: grid; grid-template-columns: var(--kw) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
/* the picture is portrait (1152 x 1613, the Age Beauty Secret picture of 31. 10. 2026). Its frame is at most 576 px wide (20 % more than the 480 px of the old landscape one) and never taller than 65.5 % of the window's height
   (the photo audit's TOO_BIG, which applies from 1024 px of width up: a frame over 66 % of a screen that is not the hero is "blown up"), so from 1024 px of width --kw, the width of the figure, is the
   smaller of 594 px and 46.7svh + 18 px (the figure's padding): 576 px wide from a window 1233 px high up, 420 px on a 900 px one, 359 px on a 768 px one; below 1024 px always 576 at most. The figure carries the cap, so the sign-off is centred under the frame. */
.koz { --kw: 594px; }
@media (min-width: 1024px) { .koz { --kw: min(594px, max(258px, calc(46.7svh + 18px))); } }
.koz__fig { margin: 0; padding: 9px; width: min(100%, var(--kw)); }
.koz__sign { margin-top: 30px; text-align: center; font-size: .74rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-2); }
.koz__ph { width: 100%; }
.koz__txt .lead { margin: 1.4rem 0 0; }
.koz__p { margin: 1.1rem 0 0; max-width: 52ch; color: var(--ink-2); }
.koz__cta { margin-top: clamp(26px, 3vw, 40px); }

/* ---------- before / after (Čistá & vyrovnaná pleť, 1. 11. 2026): the picture whole (1600 x 1067), in a champagne-ruled frame on espresso; from 900 px the heading
   on the left and the picture on the right. The figure is at most 720 px wide and never wider than 95svh (the frame then stays under 64 % of the window's
   height: the audit's TOO_BIG). "Pred" / "Po" sit on espresso plates in the two top corners, on the wall: the faces lie between 30 and 70 % of the width ---------- */
.ba { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 738px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ba__cta { margin-top: clamp(24px, 3vw, 40px); }
.ba__fig { position: relative; margin: 0; padding: 9px; border: 1px solid rgba(214, 183, 131, .45); justify-self: end; width: min(100%, calc(95svh + 18px)); }
.ba__ph { width: 100%; }
.ba__tag { position: absolute; top: calc(9px + 3.5%); padding: .45rem .95rem; border-radius: 999px; background: rgba(23, 21, 17, .78); color: var(--on-deep);
  font-size: .7rem; font-weight: 500; letter-spacing: .26em; line-height: 1; text-transform: uppercase; }
.ba__tag--l { left: calc(9px + 2.5%); }
.ba__tag--r { right: calc(9px + 2.5%); }
.ba__tag--r { background: rgba(214, 183, 131, .92); color: var(--deep); }
@media (max-width: 899px) {
  .ba { grid-template-columns: minmax(0, 1fr); }
  .ba__fig { justify-self: center; }
}
@media (max-width: 479px) { .ba__tag { padding: .38rem .7rem; font-size: .62rem; letter-spacing: .2em; } }

/* ---------- the link to the full gallery, under "Naša práca" ---------- */
.work__more { display: flex; justify-content: center; margin: clamp(32px, 4vw, 56px) 0 0; }
.work__more .btn-line:hover { color: var(--gold-ink); }
.work__n { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- the full gallery: a justified grid. Every picture keeps the shape of its own file (nothing is cropped, so every face is whole); a row is as
   tall as its pictures are tall, and the pictures of a row share the width in proportion to their shape. The last row is not stretched. ---------- */
.pills--links li { padding: 0; }
.pills--links a { display: flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; text-decoration: none; transition: background-color .25s, color .25s; }
.pills--links a:hover { background: var(--gold-2); color: var(--deep); }
.jg { --rh: clamp(176px, 21vw, 236px); --g: clamp(8px, 1.1vw, 14px); display: flex; flex-wrap: wrap; gap: var(--g); }
.jg::after { content: ""; flex: 1000 1 0; height: 0; margin-top: calc(-1 * var(--g)); }
.jg__i { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--rh)); min-width: 0; }
.jg.is-js::after { display: none; }
.jg.is-js .jg__i { flex: none; }
.jg__a { position: relative; display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: 0; background: var(--bg-2); cursor: zoom-in; }
.jg__a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jg__a { box-shadow: 0 0 0 0 var(--gold-2); transition: box-shadow .25s; }
.jg__a:hover, .jg__a:focus-visible { box-shadow: 0 0 0 3px var(--gold-2); }
.jg__a:focus-visible { outline-offset: 3px; }

/* ---------- the lightbox: one picture whole (never above its own pixels), the count, arrows, close. Narrow: the arrows sit under the picture beside the caption. ---------- */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 84px minmax(0, 1fr) 84px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar bar bar" "prev stage next" "cap cap cap";
  height: 100vh; height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overscroll-behavior: contain; background: var(--deep-3); color: var(--on-deep); }
.lb[hidden] { display: none; }
.lb__bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 12px clamp(16px, 3vw, 32px); }
.lb__count { margin: 0; font-family: var(--f-display); font-size: 1.5rem; line-height: 1; letter-spacing: var(--dtrack); }
.lb__x, .lb__nav { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: transparent; color: var(--on-deep); border: 1px solid var(--line-deep); border-radius: 50%; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.lb__x:hover, .lb__nav:hover, .lb__x:active, .lb__nav:active { background: var(--gold-2); color: var(--deep); border-color: var(--gold-2); }
.lb__x .ic, .lb__nav .ic { width: 1.2rem; height: 1.2rem; }
.lb__nav--prev { grid-area: prev; place-self: center; }
.lb__nav--next { grid-area: next; place-self: center; }
.lb__stage { grid-area: stage; position: relative; min-height: 0; touch-action: pan-y; }
.lb__img { -webkit-user-drag: none; user-select: none; position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: min(100%, var(--nw, 100%)); max-height: min(100%, var(--nh, 100%)); object-fit: contain; border-radius: 4px; opacity: 0; transition: opacity .3s; }
.lb__img.is-ready { opacity: 1; }
.lb__cap { grid-area: cap; display: flex; flex-direction: column; align-items: center; gap: .2rem; margin: 0; padding: 14px clamp(16px, 3vw, 32px) 18px; text-align: center; font-size: .95rem; line-height: 1.45; color: var(--on-deep-2); }
.lb__grp { font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-2); }
html.lb-open, html.lb-open body { overflow: hidden; }
@media (max-width: 719px) {
  .lb { grid-template-columns: 60px minmax(0, 1fr) 60px; grid-template-areas: "bar bar bar" "stage stage stage" "prev cap next"; }
  .lb__cap { align-self: center; padding: 10px 4px 14px; font-size: .88rem; }
  .lb__nav { margin-bottom: 4px; }
}

/* ---------- the cookie panel: a calm card at the bottom left, a bottom sheet on a phone. Accept and Reject are one element with one look. It is above the page (z 70)
   and below the mobile menu (80) and the lightbox (90); the header sits at the top, so it is never covered. ---------- */
.ck { position: fixed; z-index: 70; left: 24px; bottom: 24px; width: min(400px, calc(100vw - 48px)); max-height: calc(100dvh - var(--hh) - 40px); overflow: auto; padding: 22px 22px 20px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(16, 14, 11, .55); }
.ck[hidden], .ck__view[hidden] { display: none; }
.ck:not([hidden]) { animation: ckIn .5s var(--ease) both; }
@keyframes ckIn { from { opacity: 0; transform: translateY(14px); } }
.ck__h { margin: 0 0 .55rem; font-family: var(--f-display); font-size: calc(var(--adj) * 1.9rem); font-weight: var(--dw); line-height: 1.1; letter-spacing: var(--dtrack); }
/* the heading only receives the focus when the panel opens (so a screen reader starts at its title); it is not a control, so it draws no ring */
.ck__h:focus, .ck__h:focus-visible { outline: none; }
.ck__p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.ck__p a { color: var(--ink); }
.ck__p [data-ck-names] { font-weight: 500; color: var(--ink); }
.ck__p--s { margin: 0 0 1rem; }
.ck__act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ck__btn, .btn-solid { min-height: 46px; padding: 0 1rem; font: 500 .95rem/1.2 var(--f-text); letter-spacing: .02em; text-align: center; border: 1px solid var(--deep); border-radius: 999px; background: var(--deep); color: var(--on-deep); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.btn-solid { display: inline-flex; align-items: center; justify-content: center; padding: 0 1.6rem; }
.ck__btn:hover, .btn-solid:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--deep); }
.ck__btn--ghost { background: transparent; color: var(--deep); }
.ck__btn--ghost:hover { background: rgba(214, 183, 131, .22); border-color: var(--gold); color: var(--deep); }
.ck__btn--wide { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .ck__act--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ck__act--3 .ck__btn--wide { grid-column: auto; }
}
.ck__cats { margin: .7rem 0 .9rem; border-top: 1px solid var(--line-2); }
.ck__cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.ck__cn { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.3; }
.ck__cd { margin: .2rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--ink-2); }
/* the switch: the button is 58 x 44 px (a tap target); the track and the knob are drawn inside it */
.ck__sw { position: relative; flex: none; width: 58px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.ck__sw::before { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; height: 32px; border: 1px solid var(--line-2); border-radius: 999px; background: #DDD2C6; transition: background-color .25s, border-color .25s; }
.ck__sw span { position: absolute; top: 10px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 14, 11, .35); transition: transform .3s var(--ease); }
.ck__sw.is-on::before { background: var(--deep); border-color: var(--deep); }
.ck__sw.is-on span { transform: translateX(22px); }
.ck__sw:hover:not(:disabled)::before { background: var(--beige); border-color: var(--gold); }
.ck__sw.is-on:hover:not(:disabled)::before { background: var(--deep-2); border-color: var(--deep-2); }
.ck__sw:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 639px) {
  .ck { left: 0; right: 0; bottom: 0; width: auto; max-height: calc(100dvh - var(--hh) - 12px); padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
}

/* ---------- the footer's two small links (cookie policy, cookie settings) ---------- */
.foot__legal { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot__legal a, .foot__legal button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; background: none; border: 0; font: inherit; color: var(--on-deep-2); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(245, 240, 233, .4); text-underline-offset: 4px; transition: color .25s, text-decoration-color .25s; }
[data-ck-open][hidden], .foot__legal li:has(> [hidden]) { display: none !important; }
.foot__legal a:hover, .foot__legal button:hover { color: var(--gold-2); text-decoration-color: var(--gold-2); }
/* the opt-out switch on the cookies page: the state in words, then the one button that flips it */
.notrack { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 1.2rem 0 1.6rem; }
.notrack__st { margin: 0; font-weight: 500; }
.notrack__btn { min-width: 13.5rem; }
.foot__legal a.foot__dash { justify-content: center; min-width: 36px; text-decoration: none; }
.foot__dash .ic { width: 18px; height: 18px; flex: none; }

/* ---------- the cookie policy page: each thing the site stores is an item with its facts in rows ---------- */
.legal__w { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.legal__head { position: sticky; top: calc(var(--hh) + 32px); }
.legal__b { display: grid; gap: clamp(28px, 4vw, 48px); }
.legal__t { margin-bottom: 1rem; font-family: var(--f-display); font-size: calc(var(--adj) * 1.9rem); line-height: 1.15; letter-spacing: var(--dtrack); }
.legal__st { display: inline-block; margin-left: .7rem; padding: .15rem .7rem; border: 1px dashed var(--gold); border-radius: 999px; font-family: var(--f-text); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); vertical-align: middle; }
.legal__d { margin: 0; border-top: 1px solid var(--line); }
.legal__r { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 6px 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.legal__r dt { padding-top: .22rem; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.legal__r dd { margin: 0; overflow-wrap: anywhere; }
.legal code { padding: .1em .4em; border-radius: 4px; background: var(--bg-2); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .88em; }
.sec--alt .legal code, .legal.sec--alt code { background: var(--bg); }
.legal__fine { margin: 0; font-size: .88rem; color: var(--ink-2); }
@media (max-width: 1199px) {
  .koz__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .me__grid, .legal__w { grid-template-columns: minmax(0, 1fr); }
  .me__fig, .legal__head { position: static; }
  .me__fig { max-width: 22rem; }
}
@media (max-width: 519px) {
  .me__l li, .legal__r { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- reduced motion: nothing moves, every state is final ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .book__flood, .book__l1, .book__l2, .book__knob, .badge__core, .vcard, .tc__body, .tc__plus, .dd__panel, .idx__ic, .gal__ph img, .lb__img, .ck__sw span, .jg__a { transition-duration: .01s !important; }
}

/* ---------- review cards on a soft gold ground (Tobias, 1. 11. 2026: "zlaté pozadie ako je na darčekovej poukážke ale jemnejšie") ----------
   The voucher's gold (.vcard), paled and with less contrast between its stops, so the cards read as champagne paper on the black band. Dark type on it:
   the name in her dark gold (4.8:1 on the darkest stop), the source line and the quote in ink. */
.rev__c { border-color: rgba(214, 183, 131, .55); color: var(--deep);
  background: linear-gradient(118deg, #EFE3C6 0%, #E4D1A6 26%, #D7BE8C 52%, #E9DAB6 76%, #DEC699 100%);
  box-shadow: 0 30px 50px -34px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .55); }
.rev__c::before { color: var(--gold-ink); }
.rev__c .rev__q p { color: var(--deep); }
.rev__c .rev__n { color: #5A4318; border-top-color: rgba(23, 21, 17, .2); }
.rev__c .rev__src { color: #3D342A; }
.rev__c .src-mark { border-color: rgba(23, 21, 17, .3); color: var(--deep); }
/* Notino's mark: the N of its wordmark as a mask, so it takes the colour of the text around it like the Google G */
.src-n { display: block; width: .62rem; height: .7rem; background: currentColor; -webkit-mask: url(img/notino-n.png) center / contain no-repeat; mask: url(img/notino-n.png) center / contain no-repeat; }
.rev__src .src-n { width: .54rem; height: .6rem; }

/* ---------- where the page meets the footer (Tobias, 1. 11. 2026, after rejecting a smoke fade: "nájdi si ako to robia dizajnéri … urob to high end") ----------
   What the luxury houses do (checked through the scraper kit the same day: Aesop, Augustinus Bader, 111 Skin, Tatcha, Diptyque, Aman, Six Senses, La Mer):
   no fade, no curve, no texture at the join; a clean edge, generous space, at most one hairline. So the page ends on its own colour with its own padding,
   and the footer opens with one hairline in her champagne, the colour of the footer's column rules, the whole width; the rings and discs of the footer's
   upper part sit whole under that line (they were cut by it; only the side edges crop them now). */
.foot { border-top: 1px solid rgba(214, 183, 131, .5); }

/* ---------- the promotion pop-up (PROMO in tools/data.mjs; app.js opens it once per visit) ----------
   Tobias, 2. 11. 2026, in turns: short, the page behind it blurred, back to normal when clicked away, a button to book on Notino; light, not black;
   "Ošetrenie mesiaca" in the heading, no chip ("vyzerá úplne ako AI"); then like Moyzesova's pop-up ("to zadarmo, ktoré tak úplne krásne popne …
   urob to luxusne"), but not the round seal and not the photograph: "nájsť niečo iné, čo sa hodí k tomuto retinolu … sell point". So the side
   panel is the sell point: the 4 of A4, her four active substances, in her black and champagne; the offer is "+20 %" set large in the display
   face in her gold, sliding in a moment after the pop-up opens. No italic, no strip on any edge, no foil. */
.promo { width: min(460px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.promo::backdrop { background: rgba(245, 240, 233, .38); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.promo[open] { animation: promoIn .6s var(--ease) both; }
.promo[open]::backdrop { animation: promoFade .5s ease both; }
@keyframes promoIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes promoFade { from { opacity: 0; } to { opacity: 1; } }
.promo:focus, .promo:focus-visible { outline: none; } /* the dialog itself takes the focus on opening (app.js), so no ring is drawn round the cross before anybody presses Tab */
.promo :focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.promo__card { position: relative; max-height: calc(100svh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--bg); border: 1px solid var(--gold); border-radius: 20px; box-shadow: 0 40px 80px -34px rgba(23, 21, 17, .45); }
.promo__body { padding: clamp(32px, 7vw, 44px) clamp(22px, 6vw, 36px) 0; }
.promo__x { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: 50%; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.promo__x:hover, .promo__x:active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.promo__x .ic { width: 1.1rem; height: 1.1rem; }
/* "Ošetrenie mesiaca" is the first line of the heading itself: a smaller display line in her darkened gold over the treatment's name */
.promo__h { display: grid; justify-items: start; gap: .5rem; margin: 0; padding-right: 48px; font-family: var(--f-display); font-weight: var(--dw); letter-spacing: var(--dtrack); color: var(--ink); }
.promo__hm { font-size: calc(var(--adj) * clamp(1.4rem, 1.2rem + .9vw, 1.7rem)); line-height: 1.1; color: var(--gold-ink); }
.promo__hn { font-size: calc(var(--adj) * clamp(2.8rem, 2.2rem + 3vw, 3.9rem)); line-height: 1; }
/* the line under the name in the text face: Bodoni's hairline hyphen vanished at this size ("Anti age", 2. 11. 2026) */
.promo__t { margin: .9rem 0 0; max-width: 32ch; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.promo__m { display: flex; gap: .6rem; margin: .5rem 0 0; font-size: .84rem; letter-spacing: .06em; color: var(--ink-2); }
.promo__m span + span::before { content: "·"; margin-right: .6rem; color: var(--gold-ink); }
/* the sell point: her black and champagne, the 4 large, the four substances (contrast: ivory on black 16:1, champagne 9.5:1, the note 7.5:1) */
.promo__act { margin: 1.4rem clamp(22px, 6vw, 36px) 0; padding: 1.2rem 1.3rem 1.1rem; border-radius: 14px; background: var(--deep); color: var(--on-deep); }
.promo__an { display: flex; align-items: center; gap: .8rem; margin: 0; }
.promo__a4 { font-family: var(--f-display); font-weight: var(--dw); font-size: calc(var(--adj) * 3.6rem); line-height: .8; color: var(--gold-2); }
.promo__al { font-family: var(--f-display); font-size: calc(var(--adj) * 1.45rem); line-height: 1.1; color: var(--on-deep); }
.promo__al-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; margin: 1rem 0 0; padding: .95rem 0 0; border-top: 1px solid var(--line-deep); list-style: none; font-size: .9rem; line-height: 1.3; color: var(--on-deep); }
.promo__ano { margin: .85rem 0 0; font-size: .76rem; line-height: 1.4; letter-spacing: .02em; color: var(--on-deep-2); }
/* the offer: "+20 %" large in the display face in her darkened gold, its line beside it (gold-ink on ivory 5.3:1) */
.promo__foot { padding: 0 clamp(22px, 6vw, 36px) clamp(24px, 6vw, 34px); }
.promo__deal { display: flex; align-items: center; gap: 1rem; margin: 1.3rem 0 1.4rem; }
.promo__pct { flex: none; font-family: var(--f-display); font-weight: var(--dw); font-size: calc(var(--adj) * clamp(3.4rem, 2.9rem + 2.4vw, 4.3rem)); line-height: .85; letter-spacing: -.03em; color: var(--gold-ink); white-space: nowrap; }
.promo__ot { max-width: 15ch; font-family: var(--f-display); font-size: calc(var(--adj) * 1.4rem); line-height: 1.2; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .promo[open] .promo__pct { animation: promoPop .7s var(--ease) .45s backwards; } }
@keyframes promoPop { from { opacity: 0; transform: translateX(-14px) scale(.92); } }
/* the gold button on the ivory card: its own hover would flood it ivory, the colour of the card, and it vanished (Tobias, 2. 11. 2026: "celé tlačidlo splynulo s pozadím");
   here it floods ink with ivory type, the gold knob stays gold */
.promo .book--gold .book__flood { background: var(--ink); }
.promo .book--gold:hover, .promo .book--gold:focus-visible { color: var(--bg); }
html.promo-open, html.promo-open body { overflow: hidden; }
/* a computer: on its side, as Moyzesova's: the sell point is the left panel, the treatment and the offer on the right */
@media (min-width: 900px) {
  .promo--side { width: min(880px, calc(100vw - 64px)); }
  .promo--side .promo__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; max-height: calc(100svh - 64px); }
  .promo--side .promo__act { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 48px 40px; border-radius: 19px 0 0 19px; }
  .promo--side .promo__body { grid-column: 2; grid-row: 1; padding: 48px 44px 0; }
  .promo--side .promo__foot { grid-column: 2; grid-row: 2; padding: 0 44px 40px; }
  .promo--side .promo__a4 { font-size: calc(var(--adj) * 7.5rem); }
  .promo--side .promo__an { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .promo--side .promo__al { font-size: calc(var(--adj) * 1.9rem); }
  .promo--side .promo__al-l { grid-template-columns: 1fr; gap: 0; margin-top: 1.5rem; padding: 0; border: 0; font-family: var(--f-display); font-size: calc(var(--adj) * 1.35rem); }
  .promo--side .promo__al-l li { padding: .7rem 0; border-top: 1px solid var(--line-deep); }
  .promo--side .promo__ano { margin-top: 1rem; }
  .promo--side .promo__deal { margin: 1.8rem 0 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
}
/* a narrow phone (under 360 px): the cross a little smaller */
@media (max-width: 359px) {
  .promo__x { top: 10px; right: 10px; width: 38px; height: 38px; }
  .promo__al-l { font-size: .84rem; }
}
/* a short phone (320x568 and the like): the whole card fits without scrolling inside it */
@media (max-height: 660px) and (max-width: 899px) {
  .promo__body { padding: 26px 20px 0; }
  .promo__h { gap: .3rem; }
  .promo__hm { font-size: calc(var(--adj) * 1.25rem); }
  .promo__hn { font-size: calc(var(--adj) * 2.4rem); }
  .promo__t { margin-top: .5rem; font-size: .9rem; }
  .promo__m { margin-top: .3rem; }
  .promo__act { margin: 1rem 20px 0; padding: .85rem 1rem .8rem; }
  .promo__a4 { font-size: calc(var(--adj) * 2.8rem); }
  .promo__al { font-size: calc(var(--adj) * 1.25rem); }
  .promo__al-l { margin-top: .7rem; padding-top: .7rem; gap: .3rem .8rem; }
  .promo__ano { display: none; }
  .promo__foot { padding: 0 20px 20px; }
  .promo__deal { margin: 1rem 0 1rem; }
  .promo__pct { font-size: calc(var(--adj) * 3rem); }
  .promo__ot { font-size: calc(var(--adj) * 1.2rem); }
}
@media (prefers-reduced-motion: reduce) { .promo[open], .promo[open]::backdrop { animation: none; } }