/* Szikra Szalon, szikraszalon.hu
   Palette from her own things: the chalkboard street sign (board, cream line art, gold dust, walnut
   frame) and the pale wall of her treatment room. Marcellus for display (the flared roman capitals
   of the sign), Jost for text. Upright type only: no italics anywhere. */

@font-face { font-family: "Marcellus"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(assets/fonts/marcellus-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Marcellus"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(assets/fonts/marcellus-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(assets/fonts/jost-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(assets/fonts/jost-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap;
  src: url(assets/fonts/jost-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap;
  src: url(assets/fonts/jost-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* the street sign */
  --board: #161513;
  --board-lift: #1d1b18;
  --cream: #efe3c8;          /* logo cream, 14.3:1 on board */
  --cream-soft: #c9bfa9;     /* 10.0:1 on board */
  --cream-mute: #a39a86;     /* 6.5:1 on board, small meta only */
  --gold: #c9a96a;           /* sparkle gold, 8.1:1 on board */
  --gold-bright: #e3c98f;
  --walnut: #5a3b30;         /* the sign's wooden frame */
  --walnut-deep: #3b261f;
  /* the treatment room */
  --wall: #e4ded4;
  --wall-soft: #efeae2;      /* a lighter band of the wall, for the tone bands (2026-09-26f) */
  --ink: #1b1b1b;            /* logo ink, 12.9:1 on wall */
  --ink-soft: #57504a;       /* 5.9:1 on wall */
  --gold-ink: #6b5026;       /* gold that passes AA on the wall, 5.6:1 */

  /* Booking widget tokens (BOOKING-MOUNT.md section 4). The dialog is light, in the colours of
     the treatment room, so the form reads easily; the on-page CTA sits on the dark card. */
  --szb-bg: #efeae2;
  --szb-surface: #fbf9f5;
  --szb-sand: #e4ded4;
  --szb-ink: #1b1b1b;
  --szb-ink-soft: #57504a;
  --szb-accent: #161513;
  --szb-accent-deep: #3a3632;
  --szb-on-accent: #efe3c8;
  --szb-highlight: #8a6a34;
  --szb-highlight-soft: #f1e7d2;
  --szb-hairline: rgba(27, 27, 27, .16);
  --szb-danger-bg: #f5ddd6;
  --szb-danger-ink: #8a2b1e;
  --szb-backdrop: rgba(22, 21, 19, .62);
  --szb-radius: 4px;
  --szb-radius-sm: 2px;
  --szb-radius-pill: 2px;          /* square-cornered like the rest of the site */
  --szb-font-display: "Marcellus", Georgia, serif;
  --szb-font-body: "Jost", "Segoe UI", system-ui, sans-serif;
  --szb-font-label: "Jost", "Segoe UI", system-ui, sans-serif;
  --szb-cta-bg: #c9a96a;
  --szb-cta-ink: #161513;
  --szb-cta-note-ink: #c9bfa9;
  --szb-spark: #c9a96a;           /* the sign's sparkle gold: the success spark and its dots */
  --szb-spark-deep: #8a6a34;      /* deep gold on the light dialog: the flare's edge, the loading star */
  --szb-spark-light: #fff8ea;     /* the flare's bright centre */

  --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Segoe UI", system-ui, sans-serif;
  --radius: 2px;
  --gutter: 1rem;
  --head-h: 3.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--board);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-style: normal;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
em, i, cite, address, dfn, var { font-style: normal; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 40em) { :root { --gutter: 2rem; } }

/* Surfaces. Each one sets its own focus colour so the ring is visible on it. */
.surface-board {
  --focus: var(--gold-bright);
  background: url(assets/dust.svg) 0 0 / 520px repeat, var(--board);
  color: var(--cream);
}
.surface-wall {
  --focus: var(--gold-ink);
  background: var(--wall);
  color: var(--ink);
}
:focus-visible { outline: 2px solid var(--focus, var(--gold-bright)); outline-offset: 3px; }
.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 50;
  padding: .6rem 1rem;
  background: var(--cream);
  color: var(--board);
  border-radius: var(--radius);
}
.skip:focus { top: .75rem; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--ruled { padding-top: 0; }
.section--ruled > .wrap { padding-top: clamp(3.5rem, 8vw, 6rem); } /* the rule itself: "The star mark" below */
.sec-head { max-width: 40rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(2rem, 1.45rem + 2.4vw, 2.9rem); letter-spacing: .005em; }
.sec-head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.125rem; }

/* Buttons: square-cornered like the sign board, one filled gold action per view. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { fill: currentColor; flex: none; }
.btn--gold { background: var(--gold); color: var(--board); }
.btn--gold:hover { background: var(--gold-bright); }
.btn--line { border-color: rgba(239, 227, 200, .38); color: var(--cream); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .05em; }
.btn--line svg { fill: var(--gold); }
.btn--line:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn--ink { background: var(--ink); color: var(--wall); }
.btn--ink:hover { background: #33302c; }
.btn--ink-line { border-color: rgba(27, 27, 27, .45); color: var(--ink); }
.btn--ink-line:hover { border-color: var(--ink); background: rgba(27, 27, 27, .05); }
.btn--small { min-height: 2.5rem; padding: .45rem 1rem; font-size: .95rem; }

/* Header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  --focus: var(--gold-bright);
  background: rgba(22, 21, 19, .94);
  border-bottom: 1px solid rgba(239, 227, 200, .1);
}
@supports (backdrop-filter: blur(8px)) {
  .site-head { background: rgba(22, 21, 19, .82); backdrop-filter: blur(8px); }
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--head-h);
}
.site-head__brand { margin-right: auto; padding-block: .5rem; }
.site-head__brand img { width: 105px; height: auto; }
.site-nav { display: none; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(239, 227, 200, .22);
}
.icon-btn svg { fill: var(--gold); }
.icon-btn:hover { border-color: var(--gold); }
@media (min-width: 60em) {
  .site-nav { display: flex; gap: 1.75rem; margin-right: 1rem; }
  .site-nav a { text-decoration: none; color: var(--cream-soft); font-size: .98rem; padding-block: .5rem; }
  .site-nav a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--gold); }
}

/* Hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem); }
.hero__grid { display: grid; gap: 2.75rem; }
/* The logo lights up (szikra idea 3, 2026-09-26; replaces the earlier top-to-bottom mask reveal). This is the
   only place the logo does it. CSS holds the logo dim for the first 3.4 s and then brings it up; assets/site.js
   adds a canvas over it and, in step with this animation, runs one point of warm light inside the line of her
   face (jaw, lips, nose, bridge) that ends as a small four-point glint on the lashes. Without the script the
   logo simply fades up. Opacity only; nothing moves under prefers-reduced-motion. */
.hero__mark {
  position: relative;
  display: block;
  width: clamp(9.5rem, 34vw, 12.5rem);
  margin-bottom: 1.75rem;
}
.hero__logo { width: 100%; height: auto; }
.hero__mark canvas { position: absolute; inset: -8%; width: 116%; height: 116%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__logo { animation: szk-wake 4.53s linear both; }
}
@keyframes szk-wake {
  0% { opacity: .38; }
  75.7% { opacity: .38; animation-timing-function: ease; }
  100% { opacity: 1; }
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  line-height: 1.3;
  color: var(--gold-bright);
  margin-bottom: .9rem;
}
.hero h1 {
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3rem);
  line-height: 1.12;
  max-width: 18ch;
}
@media (min-width: 40em) { .nowrap-wide { white-space: nowrap; } }
.nowrap { white-space: nowrap; }
.hero__lead {
  margin-top: 1.25rem;
  max-width: 34rem;
  color: var(--cream-soft);
  font-size: 1.125rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (max-width: 29.99em) { .hero__actions .btn { flex: 1 1 100%; } }
/* The portrait loop (2026-09-26e): an AI-generated woman after a facial on the hero's own black (#161513), so
   the frame needs no box: its four edges fade into the hero through a mask (the poster <img> and the video share
   the box). The figure's aspect ratio holds the space before anything loads, so nothing shifts. Phones: a square
   crop around the face; tablets 4:5; wide screens the full 3:4, bleeding into the right gutter. */
.hero__portrait {
  position: relative;
  width: min(100%, 23rem);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%);
  mask-composite: intersect;
}
.hero__poster, .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
.hero__video { pointer-events: none; }
/* One column (phones and tablets, 2026-09-26, Dave's second call): the portrait is a background layer on the right
   of the hero, beside the logo and the slogan, instead of a block above them. It takes no space in the flow (so the
   booking button moves up), fades out towards the text on its left and at its bottom, and sits under the copy, which
   stays fully readable on top. Desktop (60em+) is unchanged. */
@media (max-width: 59.99em) {
  .hero { overflow-x: clip; }
  .hero__grid { position: relative; gap: 0; }
  .hero__copy { position: relative; z-index: 1; }
  .hero__portrait {
    position: absolute;
    z-index: 0;
    top: -.5rem;
    right: calc(-1 * var(--gutter));
    width: min(66vw, 22rem);
    aspect-ratio: 3 / 4;
    margin: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%, #000 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 58%, transparent 96%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 42%, #000 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 58%, transparent 96%);
    mask-composite: intersect;
  }
  .hero__poster, .hero__video { object-position: 50% 30%; }
  /* Dave, 2026-09-26: no animated logo on mobile; the header wordmark carries the brand. display:none also stops
     the light-up (no CSS animation runs, and site.js sees the mark as off screen). */
  .hero__mark { display: none; }
  .hero__copy { padding-top: 1.5rem; }
  /* The copy now crosses the portrait's chin and shoulder: a soft halo in the hero black keeps every line legible. */
  .hero__tagline, .hero h1, .hero__lead { text-shadow: 0 0 .6rem rgba(22, 21, 19, .9), 0 0 1.4rem rgba(22, 21, 19, .75); }
  .hero__tagline { max-width: 13ch; }
  .hero__actions { margin-top: 1.5rem; }
}
@media (min-width: 60em) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 3.5rem; }
  .hero__portrait { width: min(100% + var(--gutter), 34rem); aspect-ratio: 3 / 4; margin: 0 calc(-1 * var(--gutter)) 0 auto; }
  .hero__poster, .hero__video { object-position: 50% 50%; }
}

/* The price list (2026-09-26e). Kriszti asked for it without the frame, so the frameless list (until now the
   ?arlista=minimal variant) is the list: her rows and dotted leaders in ink on the pale wall, the group headings in
   the display face in deep gold, hairline rules above the list and above its foot. No board, no walnut, no dust,
   no corner sparkles, no glint. */
.pricelist { --focus: var(--gold-ink); color: var(--ink); padding-top: clamp(1.5rem, 3.5vw, 2.25rem); border-top: 1px solid rgba(27, 27, 27, .16); }
.pricelist__cols { display: grid; gap: 2.25rem; }
.pricelist__side { display: grid; gap: 2.25rem; align-content: start; }
.pricelist__group h3 { font-size: 1.55rem; color: var(--gold-ink); margin-bottom: .5rem; }
/* One quiet line under the facial heading: the group holds the Janssen facials and the teen facial
   (she did not call that one Janssen), so Janssen is named here rather than in the heading. */
.pricelist__note { color: var(--ink-soft); font-size: .98rem; margin: -.15rem 0 .35rem; }
.pricelist__foot {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(27, 27, 27, .16);
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}
.pricelist__foot p { color: var(--ink-soft); max-width: 36rem; }
@media (min-width: 60em) {
  .pricelist__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4.5rem; }
  .pricelist__foot { grid-template-columns: 1fr auto; align-items: center; }
}

/* Menu rows: name, a dotted leader, minutes, price. Minutes drop under the name on small screens. */
.menu { list-style: none; margin: 0; padding: 0; }
.mi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "dur dur" "desc desc";
  column-gap: .75rem;
  padding-block: .55rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.menu--main .mi { padding-block: .85rem; }
.mi-name {
  grid-area: name;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  color: var(--ink);
}
.mi-name::after {
  content: "";
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted rgba(27, 27, 27, .4);
  transform: translateY(-.3em);
}
.mi-name--display { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; letter-spacing: .015em; }
.mi-price { grid-area: price; align-self: baseline; text-align: right; font-weight: 500; color: var(--ink); white-space: nowrap; }
.mi-dur { grid-area: dur; color: var(--ink-soft); font-size: .92rem; }
.mi-desc { grid-area: desc; margin-top: .3rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.5; max-width: 40ch; }
.menu--main .mi-price { font-size: 1.05rem; }
@media (min-width: 30em) {
  .mi { grid-template-columns: minmax(0, 1fr) auto 5.6rem; grid-template-areas: "name dur price" "desc desc desc"; }
  .mi-dur { align-self: baseline; text-align: right; white-space: nowrap; padding-left: .5rem; }
}

/* Janssen strip. The photo stays in the flow (never sticky: Dave, 2026-09-26). Wide screens: the photo beside the
   heading and her first two paragraphs, then the other four full width in two columns under that row, so no
   side is left empty. Phones and tablets: photo, then the text in one column. */
.janssen { display: grid; gap: 1.75rem; margin-top: clamp(3rem, 7vw, 5rem); align-items: center; }
.janssen__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.janssen__text h3 { font-size: 1.6rem; margin-bottom: .75rem; }
.janssen__text p, .janssen__more p { color: var(--ink-soft); max-width: 36rem; font-size: 1.0625rem; }
.janssen__text p + p, .janssen__more p + p { margin-top: .9rem; }
.janssen__more { margin-top: -.85rem; } /* one paragraph gap (.9rem) to the text above, not the grid gap */
@media (min-width: 60em) {
  .janssen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 4rem; row-gap: 2.25rem; }
  .janssen__more { grid-column: 1 / -1; margin-top: 0; columns: 2; column-gap: 4rem; }
  .janssen__more p { max-width: none; break-inside: avoid; }
  .janssen__more p + p { margin-top: 0; }
  .janssen__more p { margin-bottom: .9rem; }
}

/* Gépi kezelések: part of her personalised facials, so no prices and no booking control. Quiet like the
   rest of the wall: hairline rules, no boxes, one line-art icon per treatment in the wall gold. */
.machines { margin-top: clamp(3rem, 7vw, 5rem); }
#kezelesek > .tone { margin-top: clamp(3.5rem, 8vw, 6rem); padding-block: clamp(3.5rem, 8vw, 5.5rem); }
#kezelesek > .tone .machines { margin-top: 0; }
#kezelesek > .tone + .wrap .janssen { margin-top: clamp(3.5rem, 8vw, 6rem); }
.machines__head { max-width: 40rem; }
.machines__head h3 { font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem); }
.machines__tag { margin-top: .35rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; color: var(--gold-ink); }
.machines__head .machines__tag + p { margin-top: .9rem; color: var(--ink-soft); font-size: 1.0625rem; }
.machines__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
.machine, .machines__combo {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 1.1rem;
  align-content: start;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(27, 27, 27, .14);
}
.machine > :not(.machine__icon) { grid-column: 2; }
.machine__icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: var(--gold-ink);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.machine h4, .machines__combo h4 { margin: .35rem 0 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; line-height: 1.25; }
.machine p, .machines__combo p { margin-top: .45rem; color: var(--ink-soft); max-width: 36rem; }
/* Her benefit tags: each with its own small deep-gold four-point star (the site's mark, see "The star mark"
   below), so a wrapped line never starts with a separator. */
.machine__gains { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .95rem; color: var(--ink); }
.machine__gains li { display: inline-flex; align-items: center; gap: .5rem; }
.machine__gains li::before { content: ""; flex: none; width: 10px; height: 10px; }
.machines__combo { padding-bottom: 0; }
.machines__combo .machine__icon { grid-row: 1; }
@media (min-width: 48em) {
  .machines__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3.5rem; }
}

/* Booking */
.book { display: grid; gap: 3rem; }
.book-card {
  padding: clamp(1.5rem, 5vw, 2.75rem);
  background: var(--board-lift);
  border: 1px solid rgba(201, 169, 106, .42);
  border-radius: var(--radius);
}
.book-card h2 { margin-bottom: 1.5rem; }
.booking-slot:empty { display: none; }
/* The one widget override (BOOKING-MOUNT.md allows it where no token exists): the on-page CTA
   keeps the site's sentence-case button type instead of the widget's tracked capitals. */
.book-card .szb-open { text-transform: none; letter-spacing: .02em; font-size: 1rem; }
.book-phone p { color: var(--cream-soft); }
.book-when-on { display: none; }
.book-card:has(.booking-mount:not([hidden])) .book-when-on { display: block; }
.book-card:has(.booking-mount:not([hidden])) .book-when-off { display: none; }
.book-phone__number {
  display: inline-block;
  margin-block: .35rem .9rem;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4rem);
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  line-height: 1.25;
}
.book-phone__number:hover { color: var(--gold-bright); }
.book-phone__mail a { color: var(--cream); }

/* Messaging links (Messenger, Instagram, Viber, WhatsApp): quiet outlined chips with a monochrome
   brand mark and a visible name; 44px tall. Dark surfaces by default, --ink on the wall, --plain in the
   footer. */
.msg { list-style: none; margin: .55rem 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.msg a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .4rem .95rem .4rem .8rem;
  border: 1px solid rgba(239, 227, 200, .28);
  border-radius: var(--radius);
  color: var(--cream);
  font-size: .98rem;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.msg a:hover { border-color: var(--gold); color: var(--gold-bright); }
.msg svg { width: 1.125rem; height: 1.125rem; flex: none; fill: var(--gold); }
.msg--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 24rem; }
.msg--grid a { width: 100%; }
.msg--ink { margin: .15rem 0 0; }
.msg--ink a { border-color: rgba(27, 27, 27, .3); color: var(--ink); }
.msg--ink a:hover { border-color: var(--ink); color: var(--ink); background: rgba(27, 27, 27, .04); }
.msg--ink svg { fill: var(--gold-ink); }
.msg--plain { margin: .1rem 0 0; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 2rem; }
@media (min-width: 40em) { .msg--plain { display: flex; column-gap: 1.5rem; } }
.msg--plain a { padding-inline: 0; border: 0; color: var(--cream-soft); }
.msg--plain a:hover { color: var(--cream); }
.rules h2 { margin-bottom: 1.5rem; }
.rules dl { margin: 0; display: grid; gap: 1.35rem; }
.rules dt { font-weight: 500; color: var(--cream); }
.rules dd { margin: .2rem 0 0; color: var(--cream-soft); max-width: 36rem; }
/* Opening hours: day and time in two aligned columns (Tudnivalók and Hol találsz?). */
.hours { display: grid; grid-template-columns: max-content max-content; column-gap: 1.5rem; row-gap: .1rem; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 60em) {
  .book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
}

/* Férfi vendégek: one centred line on the wall (the flanking portraits were removed 2026-09-26). */
.men { padding-top: clamp(2.75rem, 7vw, 4.5rem); }
.men > .wrap { padding-bottom: clamp(2.25rem, 5vw, 3.5rem); } /* the rule under it: "The star mark" below */
.men__text { max-width: 26rem; margin-inline: auto; text-align: center; }
.men__label { font-family: var(--font-body); font-size: .95rem; font-weight: 500; letter-spacing: .02em; color: var(--ink-soft); margin-bottom: .45rem; }
.men__line { font-family: var(--font-display); font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2rem); line-height: 1.3; text-wrap: balance; }

/* About */
.about { display: grid; gap: 1.5rem; }
.about__text { max-width: 38rem; }
.about__lead { font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.95rem); line-height: 1.35; margin-bottom: 1.1rem; }
.about__text p:not(.about__lead) { color: var(--ink-soft); font-size: 1.125rem; }
.about__text p:not(.about__lead) + p { margin-top: .95rem; }
.about__text p:not(.about__lead).about__close { margin-top: 1.6rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.35; color: var(--ink); }
/* Her portrait (2026-09-26e): under the heading on phones, beside her text on wide screens (heading and photo in
   the left column, the text in the right one). In the flow, never sticky. */
.about__photo { width: min(100%, 24rem); }
.about__photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 60em) {
  .about { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "head text" "photo text"; grid-template-rows: auto 1fr; column-gap: 4rem; row-gap: 2rem; }
  .about > h2 { grid-area: head; }
  .about__photo { grid-area: photo; width: 100%; align-self: start; }
  .about__text { grid-area: text; }
}

/* Where */
.where { display: grid; gap: 2.25rem; }
.where__photo { order: 2; }
.where__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.where__text h2 { margin-bottom: 1.25rem; }
.where__address { margin-bottom: 1.1rem; }
.where__street { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.1rem); line-height: 1.25; }
.where__city { display: block; margin-top: .2rem; font-size: 1.125rem; font-weight: 500; font-variant-numeric: lining-nums; }
.where__text > p { color: var(--ink-soft); max-width: 34rem; }
.where__text > p + p:not(.where__routes) { margin-top: .6rem; }
.where__routes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.facts { margin: 2.25rem 0 0; display: grid; gap: 1rem; }
.facts > div { display: grid; gap: .1rem; padding-top: 1rem; border-top: 1px solid rgba(27, 27, 27, .14); }
.facts dt { color: var(--ink-soft); font-size: .95rem; }
.facts dd { margin: 0; }
.facts a { text-decoration-color: var(--gold-ink); }
@media (min-width: 40em) {
  .facts > div { grid-template-columns: 11rem 1fr; gap: 1rem; }
}
@media (min-width: 60em) {
  .where { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 4.5rem; align-items: center; }
  .where__photo { order: 0; }
  .where__photo img { max-height: 42rem; }
}

/* Footer */
.site-foot { padding-block: 3.5rem 2.5rem; font-size: .98rem; }
.site-foot__in { display: grid; gap: 2rem; }
.site-foot__brand img { width: 6.5rem; height: auto; }
.site-foot__contact address { line-height: 1.8; color: var(--cream-soft); }
.site-foot__contact address a { color: var(--cream); }
.site-foot__msg { margin-top: 1.1rem; color: var(--cream-soft); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.site-foot__links a { color: var(--cream-soft); padding-block: .35rem; }
.site-foot__links a:hover { color: var(--cream); }
.site-foot__legal { color: var(--cream-mute); font-size: .9rem; }
/* The MI-Térkép AI-READY badge (2026-09-26f, Dave; as in the Nádszál footer): the white variant, local file (the CSP
   allows same-origin images only), 92 px with a 2x source, the last row of the footer, centred, a little dimmed. */
.ai-ready-badge { justify-self: center; display: inline-block; line-height: 0; opacity: .85; transition: opacity .18s ease; }
.ai-ready-badge:hover, .ai-ready-badge:focus-visible { opacity: 1; }
.ai-ready-badge img { width: 92px; height: 92px; }
@media (min-width: 60em) {
  .site-foot__in { grid-template-columns: auto 1fr auto; align-items: end; column-gap: 4rem; }
  .site-foot__links { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .site-foot__legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid rgba(239, 227, 200, .12); }
  .ai-ready-badge { grid-column: 1 / -1; }
}

/* Legal pages */
.legal-main { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.legal { max-width: 44rem; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.8rem); margin-bottom: 1rem; }
.legal h2 { font-size: 1.45rem; margin: 2.5rem 0 .75rem; }
.legal p, .legal li { color: #2f2b27; }
.legal p + p { margin-top: .9rem; }
.legal ul { padding-left: 1.2rem; margin: .75rem 0 0; }
.legal ul + p { margin-top: 1rem; }
.legal li + li { margin-top: .4rem; }
.legal a { text-decoration-color: var(--gold-ink); }
.legal .lead { font-size: 1.125rem; color: var(--ink-soft); }
.legal .todo { color: var(--gold-ink); font-weight: 500; }
.legal-table { margin: 1rem 0 0; display: grid; gap: .75rem; }
.legal-table > div { display: grid; gap: .1rem; padding-top: .75rem; border-top: 1px solid rgba(27, 27, 27, .14); }
.legal-table dt { color: var(--ink-soft); font-size: .95rem; }
.legal-table dd { margin: 0; }
@media (min-width: 40em) {
  .legal-table > div { grid-template-columns: 13rem 1fr; gap: 1rem; }
}
.legal-date { margin-top: 3rem; color: var(--ink-soft); font-size: .95rem; }
.back-link { display: inline-block; margin-bottom: 2rem; color: var(--ink-soft); }

/* Gallery orbit (2026-09-26e; replaces the photo strip), ported from printablewalls' GalleryOrbit: her photos on a
   concave CSS-3D ring that turns slowly, drifting left to right. Card i hangs at rotateY(i * 360/N)
   translateZ(-R): NEGATIVE, so the ring bows away in the middle and the edge panels come forward and are cut off
   by this box's clip, and faded by its mask. R, the perspective (always about 2.4 R, so no panel ever crosses the
   camera plane) and the spin come from scripts/orbit-markup.py (the geometry block below). The box is as wide as
   the hero section, never 100vw, so the page cannot scroll sideways. Hover or keyboard focus pauses the turn;
   a click, tap or Enter opens the lightbox. Panels: a thin chalkboard-dark mat with a faint gold hairline, quiet
   against the board. Transform only; under reduced motion the ring stands still as a composed arc. */
/* orbit:geometry:start (generated by scripts/orbit-markup.py: N=48, GAP=1.15, P/R=2.39) */
.orbit {
  --orbit-r-sm: 1193px; --orbit-p-sm: 2850px;
  --orbit-r-md: 1474px; --orbit-p-md: 3500px;
  --orbit-r-lg: 1755px; --orbit-p-lg: 4200px;
  --orbit-base: -3.7500deg;
  --orbit-spin: 480s;
}
/* orbit:geometry:end */
.orbit {
  --orbit-w: 8.5rem;
  --orbit-r: var(--orbit-r-sm);
  --orbit-p: var(--orbit-p-sm);
  position: relative;
  z-index: 1;
  height: 11rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(2rem, 11%, 10rem), #000 calc(100% - clamp(2rem, 11%, 10rem)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(2rem, 11%, 10rem), #000 calc(100% - clamp(2rem, 11%, 10rem)), transparent 100%);
}
@media (min-width: 30em) {
  .orbit { --orbit-w: 10.5rem; --orbit-r: var(--orbit-r-md); --orbit-p: var(--orbit-p-md); height: 13.5rem; }
}
@media (min-width: 64em) {
  .orbit { --orbit-w: 12.5rem; --orbit-r: var(--orbit-r-lg); --orbit-p: var(--orbit-p-lg); height: 15.75rem; }
}
.orbit__stage { position: absolute; inset: 0; perspective: var(--orbit-p); perspective-origin: 50% 50%; }
.orbit__ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* --orbit-turn: set by assets/site.js under reduced motion, to bring a keyboard-focused panel to the front */
  transform: rotateY(calc(var(--orbit-base) + var(--orbit-turn, 0deg)));
  /* The ring's own empty box sits in front of every card in the hit test; it steps out of the way so the
     panels can be hovered and clicked (the component's note). */
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .orbit__ring { will-change: transform; animation: szk-orbit var(--orbit-spin) linear infinite; }
}
@keyframes szk-orbit {
  from { transform: rotateY(var(--orbit-base)); }
  to   { transform: rotateY(calc(var(--orbit-base) - 360deg)); }
}
.orbit:hover .orbit__ring,
.orbit:has(:focus-visible) .orbit__ring,
.lb-open .orbit__ring { animation-play-state: paused; }
.orbit__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-w);
  translate: -50% -50%;
  transform: rotateY(var(--orbit-a)) translateZ(calc(-1 * var(--orbit-r)));
  backface-visibility: hidden;
  pointer-events: auto;
  contain: layout style;
  outline: none;
}
.orbit__panel {
  display: block;
  padding: .3rem;
  background: var(--board-lift);
  border: 1px solid rgba(201, 169, 106, .3);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(239, 227, 200, .06) inset, 0 22px 34px -22px rgba(0, 0, 0, .9);
  transition: transform .2s ease-out, border-color .2s ease-out;
}
.orbit__panel img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; }
.orbit__card:hover .orbit__panel { transform: scale(1.03); border-color: rgba(201, 169, 106, .7); }
.orbit__card:focus-visible .orbit__panel { transform: scale(1.03); border-color: var(--gold-bright); outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* Lightbox (built by assets/site.js as a native modal <dialog>: Esc, focus containment and the inert page
   come from the browser; site.js adds the Tab wrap, arrow keys and swipe). */
.lb {
  --focus: var(--gold-bright);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 13, 12, .96);
  color: var(--cream);
  overflow: hidden;
}
.lb::backdrop { background: rgba(14, 13, 12, .96); }
/* Open: a column of stage (takes the free height) and footer (caption + nav); the close button floats. */
.lb[open] { display: flex; flex-direction: column; }
.lb__stage { flex: 1 1 auto; min-height: 0; margin-top: 3.75rem; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; user-select: none; }
.lb__stage picture { display: contents; }
.lb__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.lb__foot { flex: none; padding: .9rem var(--gutter) 1.1rem; display: grid; gap: .6rem; justify-items: center; text-align: center; }
.lb__nav { display: flex; align-items: center; gap: 1rem; }
.lb__count { min-width: 4.5rem; color: var(--cream-soft); font-variant-numeric: lining-nums tabular-nums; }
.lb__btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(239, 227, 200, .3);
  border-radius: var(--radius);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.lb__btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.lb__btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lb__close { position: absolute; top: .6rem; right: var(--gutter); }
@media (min-width: 48em) {
  .lb__stage { margin-top: 4rem; padding-inline: 4.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .lb[open] .lb__img { animation: lb-in .22s ease-out; }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-open { overflow: hidden; }

/* The star mark (szikra idea 5, 2026-09-26): the four-point star from the corners of her board is the site's
   small signature. It only replaces what was there: the hairline section dividers get a star in a gap at the
   centre, list bullets become stars (the gépi kezelések benefit tags, the Tudnivalók rules, the lists on the
   legal pages), and the booking widget's loading sign is the same star (booking.css). Deep gold on the wall,
   cream on the dark board. Drawn with a CSS mask (assets/star.svg, assets/star-bold.svg for small sizes). */
.machine__gains li::before,
.rules dt::before,
.legal ul > li::before,
.men > .wrap::after,
.section--ruled > .wrap::before,
.tone::before,
.tone--seam-bottom::after,
.site-foot__legal::before {
  -webkit-mask: url(assets/star-bold.svg) center / contain no-repeat;
  mask: url(assets/star-bold.svg) center / contain no-repeat;
  background: var(--gold-ink);
}
.men > .wrap::after,
.section--ruled > .wrap::before,
.tone::before,
.tone--seam-bottom::after,
.site-foot__legal::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  -webkit-mask-image: url(assets/star.svg);
  mask-image: url(assets/star.svg);
  pointer-events: none;
}
/* Dividers: the hairline with a 2.5rem gap in the middle for the star. */
.men > .wrap {
  position: relative;
  background: linear-gradient(90deg, rgba(27, 27, 27, .16) calc(50% - 1.25rem), transparent 0 calc(50% + 1.25rem), rgba(27, 27, 27, .16) 0) center bottom 7.5px / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.men > .wrap::after { bottom: 0; }
.section--ruled > .wrap {
  position: relative;
  background: linear-gradient(90deg, rgba(27, 27, 27, .16) calc(50% - 1.25rem), transparent 0 calc(50% + 1.25rem), rgba(27, 27, 27, .16) 0) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.section--ruled > .wrap::before { top: -7.5px; }
/* Tone bands (2026-09-26f, Dave): a lighter band of the wall colour separates long light runs (Gépi kezelések between
   the price list and Janssen; the blog under Rólam). The seam itself is the divider; the star sits on it. The seam
   under the blog band needs no star of its own: Hol találsz? starts with its ruled star right there. */
.tone { position: relative; background: var(--wall-soft); }
.tone::before { top: -8px; }
.tone--seam-bottom::after { bottom: -8px; }
.site-foot__legal::before { display: none; }
@media (min-width: 60em) {
  .site-foot__legal {
    position: relative;
    border-top: 0;
    background: linear-gradient(90deg, rgba(239, 227, 200, .12) calc(50% - 1.25rem), transparent 0 calc(50% + 1.25rem), rgba(239, 227, 200, .12) 0) top center / 100% 1px no-repeat;
  }
  .site-foot__legal::before { display: block; top: -7.5px; width: 14px; height: 14px; margin-left: -7px; background: var(--cream); }
}
/* Bullets. */
.rules dt { position: relative; padding-left: 1.35rem; }
.rules dd { padding-left: 1.35rem; }
.rules dt::before { content: ""; position: absolute; left: 0; top: calc(.8em - 5px); width: 10px; height: 10px; background: var(--cream); }
.legal ul { list-style: none; padding-left: 0; }
.legal ul > li { position: relative; padding-left: 1.3rem; }
.legal ul > li::before { content: ""; position: absolute; left: 0; top: calc(.8em - 5px); width: 10px; height: 10px; }

/* Dandelions (2026-09-26e; the line-art seeds and meadow are gone). Two full-width Seedance loops of dandelion clocks
   and grass on the site's own colours. Dark: behind Időpontfoglalás and Tudnivalók, anchored to the bottom of that
   section so the plants rise from its lower edge, with the photographic seeds that turn into sparks (szikra idea 1);
   assets/media.js draws the loop and the seeds on one canvas. It is subdued: the mask holds it at about half
   strength and fades it out upward, and the section has extra room at the bottom, so the plants live below the
   booking card and the rules, never at full strength under text. Light: at the foot of Rólam, a plain video. Both
   load only near the screen; the poster <img> (the loop's first frame) is under the video/canvas. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero { position: relative; }
#foglalas { position: relative; isolation: isolate; padding-bottom: clamp(10.5rem, 24vw, 19rem); }
#foglalas > .wrap { position: relative; z-index: 1; }
.book__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: clamp(16rem, 36vw, 32rem);
  overflow: hidden;
  pointer-events: none;
}
.book__band .band__stage {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .55) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .55) 86%, transparent 100%);
}
.book__band .band__media { display: none; } /* drawn into the canvas (assets/media.js) */
/* The gallery orbit sits in its own dark block right under the hero. */
.gallery { padding-block: clamp(.5rem, 2vw, 1.5rem) clamp(3rem, 7vw, 5rem); }
.band { position: relative; overflow: hidden; }
.band__stage {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.band__poster, .band__media, .band__seeds { position: absolute; inset: 0; width: 100%; height: 100%; }
.band__poster, .band__media { object-fit: cover; object-position: 50% 100%; }
.band__seeds { pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.band__seeds.is-on { opacity: 1; }
.section--band { padding-bottom: 0; }
.band--light { height: clamp(12rem, 30vw, 26rem); margin-top: clamp(1rem, 3vw, 2.5rem); }

/* Blog on the homepage (2026-09-26f): the two latest posts under Rólam, on a tone band. The markup between the
   blog-teaser markers in index.html is written by scripts/blog-build.mjs from content/hu/blog/. Quiet: photo,
   date, title, one line, a link to the blog. */
.blogteaser__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.75rem; }
.bt { display: grid; gap: .5rem; align-content: start; }
.bt__img { display: block; margin-bottom: .6rem; }
.bt__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); transition: opacity .18s ease; }
.bt__img:hover img { opacity: .88; }
.bt__meta { color: var(--ink-soft); font-size: .92rem; font-variant-numeric: lining-nums; }
.bt h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.6rem); line-height: 1.22; }
.bt h3 a { color: var(--ink); text-decoration: none; }
.bt h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold-ink); }
.bt__lead { color: var(--ink-soft); max-width: 34rem; }
.blogteaser__all { margin-top: clamp(2rem, 5vw, 2.75rem); }
.blogteaser__all a { color: var(--gold-ink); font-weight: 500; text-decoration-color: rgba(107, 80, 38, .45); }
.blogteaser__all a:hover { text-decoration-color: var(--gold-ink); }
@media (min-width: 48em) { .blogteaser__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }

@media (prefers-reduced-motion: reduce) {
  .hero__logo { animation: none; }
  .btn, .msg a, .orbit__panel, .band__seeds { transition: none; }
}

/* Visually hidden text for screen readers (the "részletei" after a treatment name in its trigger). */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Treatment details (2026-09-26). The name in each price-list row is a button that opens the row's dialog. It looks
   like the name it always was, with a small deep-gold four-point star after it as the hint; its hit area covers the
   whole row (the ::before below), so a tap anywhere on the row opens it. The markup is static (build_menu.py), so
   nothing shifts when the script arrives. */
.mi { position: relative; }
.mi-open {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.mi-open::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.mi-open:focus-visible { outline: none; }
.mi-open:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 2px; }
.mi-open__star {
  display: inline-block;
  width: .58em;
  height: .58em;
  margin-left: .42em;
  vertical-align: .1em;
  -webkit-mask: url(assets/star-bold.svg) center / contain no-repeat;
  mask: url(assets/star-bold.svg) center / contain no-repeat;
  background: var(--gold-ink);
  opacity: .7;
  transition: opacity .18s ease, transform .3s ease;
}
/* Hover only where there is a real hover (a tap on a phone would leave it stuck); keyboard focus always. */
.mi-open:focus-visible [data-tx-name] { text-decoration: underline; text-decoration-color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.mi-open:focus-visible .mi-open__star { opacity: 1; transform: scale(1.3); }
@media (hover: hover) {
  .mi-open:hover [data-tx-name] { text-decoration: underline; text-decoration-color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
  .mi-open:hover .mi-open__star { opacity: 1; transform: scale(1.3); }
}

/* The dialog: a cream panel of the treatment-room wall over a dimmed page, Marcellus title, deep-gold accents, one gold
   action. Native modal <dialog> (focus containment, Esc, the inert page); assets/site.js opens it, wraps Tab, returns
   focus to the row and closes it before scrolling to the booking card. Scrolls inside itself on small screens. */
.txd {
  --focus: var(--gold-ink);
  width: min(34rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid rgba(107, 80, 38, .3);
  border-radius: var(--radius);
  background: var(--wall-soft);
  color: var(--ink);
  box-shadow: 0 1.5rem 4rem rgba(14, 13, 12, .38);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.txd::backdrop { background: rgba(22, 21, 19, .62); }
.txd__in { position: relative; padding: 1.75rem 1.25rem 1.5rem; border-top: 3px solid var(--gold); }
@media (min-width: 30em) { .txd__in { padding: 2.25rem 2.25rem 2rem; } }
.txd__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(27, 27, 27, .22);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.txd__close:hover { border-color: var(--ink); background: rgba(27, 27, 27, .05); }
.txd__close svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.txd__kicker { display: flex; align-items: center; gap: .5rem; padding-right: 3rem; color: var(--gold-ink); font-size: .95rem; font-weight: 500; letter-spacing: .02em; }
.txd__kicker::before {
  content: "";
  width: .7rem;
  height: .7rem;
  flex: none;
  -webkit-mask: url(assets/star-bold.svg) center / contain no-repeat;
  mask: url(assets/star-bold.svg) center / contain no-repeat;
  background: var(--gold-ink);
}
.txd__title { margin-top: .5rem; padding-right: 2.5rem; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.15rem); line-height: 1.15; color: var(--ink); }
.txd__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .75rem;
  margin-top: .7rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(27, 27, 27, .14);
  color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
.txd__sep { width: .45rem; height: .45rem; -webkit-mask: url(assets/star-bold.svg) center / contain no-repeat; mask: url(assets/star-bold.svg) center / contain no-repeat; background: var(--gold-ink); opacity: .7; }
.txd__price { color: var(--ink); font-weight: 500; font-size: 1.1rem; }
.txd__desc { margin-top: 1.1rem; font-size: 1.0625rem; color: var(--ink); max-width: 44ch; }
.txd__h { margin-top: 1.35rem; font-size: 1.2rem; line-height: 1.25; color: var(--gold-ink); }
.txd__h + p { margin-top: .3rem; color: var(--ink-soft); }
.txd__note { margin-top: 1.35rem; color: var(--ink-soft); font-size: .98rem; }
.txd__note a { color: var(--ink); text-decoration-color: var(--gold-ink); }
.txd__rule { position: relative; margin-top: 1.1rem; padding-left: 1.1rem; color: var(--ink-soft); }
.txd__rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .6rem;
  height: .6rem;
  -webkit-mask: url(assets/star-bold.svg) center / contain no-repeat;
  mask: url(assets/star-bold.svg) center / contain no-repeat;
  background: var(--gold-ink);
}
.txd__actions { margin-top: 1.6rem; }
@media (max-width: 29.99em) { .txd__actions .btn { width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .txd[open] { animation: txd-in .26s cubic-bezier(.2, .7, .2, 1); }
  .txd[open]::backdrop { animation: txd-fade .26s ease-out; }
}
@keyframes txd-in { from { opacity: 0; transform: translateY(.6rem) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes txd-fade { from { opacity: 0; } to { opacity: 1; } }
/* While a dialog is open the page does not scroll; the scrollbar gutter is kept, so nothing behind it moves. */
html.txd-open { overflow: hidden; scrollbar-gutter: stable; }

/* Price list on phones (2026-09-26, Dave): each group folds. assets/site.js adds .pl-fold and turns each group heading
   into a toggle (name, number of treatments, price range from the rows on the page, so live prices count) with a
   chevron; every group starts closed. The rows stay in the HTML (crawlers and price-inject see all of them); a closed
   group is only hidden. Wider screens and no script: the full list, as before. */
.pl-toggle { display: none; }
@media (max-width: 39.99em) {
  .pl-fold .pricelist__cols, .pl-fold .pricelist__side { gap: 0; }
  .pl-fold .pricelist__group { border-bottom: 1px solid rgba(27, 27, 27, .16); }
  .pl-fold .pricelist__group h3 { margin: 0; font-size: inherit; }
  .pl-fold .pl-title { display: none; }
  .pl-fold .pl-toggle {
    appearance: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name icon" "sum icon";
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    min-height: 3.75rem;
    margin: 0;
    padding: .85rem 0;
    border: 0;
    background: none;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .pl-toggle__name { grid-area: name; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; color: var(--gold-ink); }
  .pl-toggle__sum { grid-area: sum; margin-top: .15rem; font-family: var(--font-body); font-size: .95rem; line-height: 1.4; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
  .pl-toggle__icon { grid-area: icon; width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--gold-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s ease; }
  .pl-toggle[aria-expanded="true"] .pl-toggle__icon { transform: rotate(180deg); }
  .pl-body { overflow: hidden; }
  .pl-body > :last-child { margin-bottom: .75rem; }
  .pl-fold .is-shut > .pl-body { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mi-open__star, .pl-toggle__icon { transition: none; }
}