:root {
  /* Palette and type lifted from the live dvigatelnoatelier.com. Both sites share it. */
  --pine:      #065861;  /* teal — headings, buttons, strong type, dark fills */
  --moss:      #323232;  /* body copy */
  --limestone: #E9DDCF;  /* sand — the page ground */
  --chalk:     #F3EADE;  /* the lighter sand the original panels sit on */
  --way:       #9DB39F;  /* sage — decorative rules and hovers only, too light for text */
  --mark:      #065861;  /* rhombus waymarkers */
  --mark-deep: #04434A;  /* admin bar */
  --alert:     #A6402E;  /* errors; the source theme has no red of its own */
  --line:      #D6C7B5;  /* warm hairline */
  --space:     1.5rem;
  /* Fahkwang (the original's display face) has no Cyrillic — Google serves it in latin,
     latin-ext, thai and vietnamese only, so the original's own Bulgarian headings are a
     browser fallback. Montserrat is the closest Cyrillic-capable geometric. */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--limestone);
  color: var(--pine);
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.75em;
}

h1 { font-size: clamp(2.15rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 600; } /* 600 = the heaviest Montserrat weight loaded */
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1em; color: var(--moss); }

a {
  color: inherit;
  text-decoration: none;
}
a:hover { border-bottom: 1px solid var(--way); }

img { max-width: 100%; display: block; }

.wrap {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

/* header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--chalk);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.25rem;
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  color: var(--pine);
}

.site-header__logo {
  width: 120px;
  max-width: 60vw;
  height: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  word-spacing: -.15em;
}

.site-nav a { color: var(--pine); border-bottom: 1px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--way); }
/* the page you are on keeps the marker lit */
.site-nav a.is-active { border-bottom-color: var(--pine); }

.site-social {
  display: flex;
  align-items: center;
  color: var(--moss);
  margin-left: .5rem;
}

.site-social:hover { color: var(--pine); }

.lang-toggle { display: flex; gap: .4rem; align-items: center; margin-left: .5rem; }
.lang-toggle a { color: var(--moss); opacity: .6; border-bottom: 1px solid transparent; }
.lang-toggle a.is-active { color: var(--moss); opacity: 1; font-weight: 500; }
.lang-toggle a + a::before { content: "|"; margin-right: .4rem; opacity: .4; color: var(--moss); }

/* mobile menu: .site-nav carries the `popover` attribute, so the browser hides it until the ☰
   button opens it (Esc, focus and top layer for free). Above the breakpoint it is undone back to
   the plain inline nav — the UA popover styles (fixed, centred, bordered, hidden) all reset. */
.site-menu-btn { display: none; background: none; border: 0; padding: .5rem; margin: -.5rem;
  color: var(--pine); cursor: pointer; }

@media (min-width: 48.01rem) {
  .site-nav[popover] { display: flex; position: static; inset: auto; width: auto; height: auto;
    margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
}

@media (max-width: 48rem) {
  /* a fixed height (+1px border) so the pinned hero photo below can stick exactly under it */
  .site-header__inner { height: 3.75rem; padding-block: 0; flex-wrap: nowrap; }
  .site-header__logo { width: 96px; }
  .site-menu-btn { display: flex; }
  /* .site-nav's own display: flex outranks the UA's closed-popover display: none */
  .site-nav:not(:popover-open) { display: none; }
  .site-nav:popover-open {
    position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
    margin: 0; border: 0; padding: 5rem 2rem 2rem; background: var(--chalk);
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 1.75rem;
    font-size: 1rem;
    opacity: 1; transition: opacity .2s, display .2s allow-discrete, overlay .2s allow-discrete;
  }
  @starting-style { .site-nav:popover-open { opacity: 0; } }
  .site-menu-btn--close { position: absolute; top: 1.25rem; right: 1.25rem; margin: 0; }
  .site-nav:popover-open .site-social, .site-nav:popover-open .lang-toggle { margin-left: 0; }
}

/* phones: a hero with several texts (the front page's eyebrow/title/subtitle) plays them one per
   screen — the photo layer is pinned (sticky ::before) while each text takes a full viewport of
   scroll over it. overflow: clip, not hidden: hidden would make the hero a scroll container and
   the sticky layer would never stick. */
@media (max-width: 48rem) {
  .hero:has(.wrap > :nth-child(2)) { display: block; min-height: 0; overflow: clip; }
  .hero:has(.wrap > :nth-child(2))::before {
    content: ""; display: block; position: sticky; inset: auto; top: calc(3.75rem + 1px);
    /* 8rem taller than the viewport: iOS 26 Safari draws the page under its floating toolbar, but
       that strip isn't counted by any viewport unit (svh/lvh both stop above it), so a layer that
       only filled the viewport let the hero's own scrolling background show through there. The
       overhang sits under the toolbar or is clipped by the hero (overflow: clip). */
    height: calc(100lvh - 3.75rem - 1px + 8rem); margin-bottom: calc(-100lvh + 3.75rem + 1px - 8rem);
  }
  .hero:has(.wrap > :nth-child(2)) .hero__overlay {
    display: block; padding: 0; background: rgba(22, 33, 28, .45);
  }
  /* each text starts 40% down its own screen, so every one lands in the same spot */
  .hero:has(.wrap > :nth-child(2)) .wrap > * {
    display: block; min-height: 100svh; margin: 0; padding-top: 40svh;
  }
  /* …except the eyebrow, which sits at the top so it clears the photo's subject */
  .hero:has(.wrap > :nth-child(2)) .wrap > .hero__eyebrow { padding-top: 2rem; }
  /* smaller and tighter so the eyebrow fits one line on a 360px phone (a longer one still wraps) */
  .hero .hero__eyebrow { font-size: .72rem; letter-spacing: .02em; }
  /* no diamond on phones, and all texts centred */
  .hero:has(.wrap > :nth-child(2)) .hero__eyebrow::before { display: none; }
  .hero:has(.wrap > :nth-child(2)) .wrap > * { text-align: center; margin-inline: auto; }
  /* where scroll-driven animations exist, the texts don't scroll at all: they stack in the eyebrow's
     spot, pinned under the header, and cross-fade as the hero's 3 screens scroll by — each owns a
     third of the hero's view timeline. Elsewhere the one-per-screen layout above stays (stacked
     texts without the fades would overlap). */
  @supports (animation-timeline: view()) {
    /* 2.2 screens: the last change ends at 85svh of scroll, then a short hold before the page moves on */
    .hero:has(.wrap > :nth-child(2)) .hero__overlay { min-height: 220svh; background: none; }
    /* the wash covers only the top third of the screen, pinned with the texts: a full-width layer
       under the sticky .wrap (sticky makes it a stacking context, so z-index -1 stays behind the
       text but above the photo) */
    .hero:has(.wrap > :nth-child(2)) .wrap::before {
      content: ""; position: absolute; z-index: -1; top: 0; left: 50%; translate: -50%;
      width: 100vw; height: calc((100svh - 3.75rem - 1px) / 3);
      background: linear-gradient(rgba(22, 33, 28, .7), rgba(22, 33, 28, .5) 60%, rgba(22, 33, 28, 0));
    }
    .hero:has(.wrap > :nth-child(2)) .wrap {
      position: sticky; top: calc(3.75rem + 1px); display: grid;
      align-items: start; /* .hero--right's flex-end would bottom-align the stack in a grid */
    }
    .hero:has(.wrap > :nth-child(2)) .wrap > * {
      grid-area: 1 / 1; min-height: 0; padding-top: 2rem;
      /* the page's own scroll, not the hero's view timeline: the hero is always first on the page,
         and this way the first change starts with the very first scroll instead of after a dead
         zone — 1→2 over 0–25svh, 2→3 over 60–85svh */
      animation: linear both; animation-timeline: scroll(root);
    }
    .hero:has(.wrap > :nth-child(2)) .wrap > :first-child { animation-name: hero-out; animation-range: 0 25svh; }
    .hero:has(.wrap > :nth-child(2)) .wrap > :nth-child(2) { animation-name: hero-in-out; animation-range: 0 85svh; }
    .hero:has(.wrap > :nth-child(3)) .wrap > :nth-child(2) { animation-name: hero-in-out; }
    .hero:has(.wrap > :nth-child(2)) .wrap > :last-child { animation-name: hero-in; animation-range: 60svh 85svh; }
  }
}
/* hero-in-out spans 0-85svh: in over the first 25svh, out over the last 25svh (25/85 ≈ 29.4%) */
/* visibility rides along so a faded-out text in the stack can't take the click (live editor) */
@keyframes hero-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes hero-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes hero-in-out { 0% { opacity: 0; visibility: hidden; } 29.4%, 70.6% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

/* hero */

.hero {
  background-size: cover;
  background-position: var(--x, 50%) var(--y, 50%);
  min-height: 72vh;
  display: flex;
  align-items: stretch;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* plan 0016: zoom (var(--z)) scales the section's own background around the focal point via a
   ::before layer, so .hero__overlay's text stays unscaled — see Decision 6 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  transform-origin: var(--x, 50%) var(--y, 50%);
  scale: var(--z, 1);
}

/* the wash must span the whole hero, not just the height of the text — otherwise a
   strip of un-dimmed photo shows above it, and the strip's size follows the copy length */
.hero__overlay {
  flex: 1;
  display: flex;
  align-items: flex-end;
  /* the wash runs sideways so it clears the photo's subject and deepens under the text:
     dark on the title's side, fully clear on the other half */
  /* alpha follows .88 * sqrt(t), t = distance from the clear edge: it climbs fast right where
     the photo takes over and then flattens, so the type sits on an even wash instead of the
     visible ramp a linear gradient leaves across the middle */
  background:
    linear-gradient(90deg,
      rgba(22, 33, 28, .88) 0%,
      rgba(22, 33, 28, .76) 12.5%,
      rgba(22, 33, 28, .62) 25%,
      rgba(22, 33, 28, .44) 37.5%,
      rgba(22, 33, 28, .31) 43.75%,
      rgba(22, 33, 28, 0) 50%);
  padding-block: 3rem 4rem;
}

.hero__overlay > .wrap { width: 100%; }

/* yellow at 12px over a photo is unreadable — chalk carries the text, a waymarker
   carries the colour */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  color: #fff;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1.4em;
}

.hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--mark);
  transform: rotate(45deg);
  flex: none;
}

.hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* the front page photo has its figure on the left, so its copy goes to the right instead */
.hero--right .hero__overlay {
  /* same sqrt ramp, mirrored */
  background: linear-gradient(90deg,
    rgba(22, 33, 28, 0) 50%,
    rgba(22, 33, 28, .31) 56.25%,
    rgba(22, 33, 28, .44) 62.5%,
    rgba(22, 33, 28, .62) 75%,
    rgba(22, 33, 28, .76) 87.5%,
    rgba(22, 33, 28, .88) 100%);
}

.hero--right .wrap { align-items: flex-end; text-align: right; }

/* the photo is busy — a soft shadow keeps the type readable wherever it lands */
.hero h1, .hero p, .hero__eyebrow { text-shadow: 0 1px 14px rgba(22, 33, 28, .85); }

.hero h1, .hero p { color: #fff; }
.hero h1 { max-width: 40rem; }
.hero p { max-width: 34rem; font-family: var(--font-body); font-size: 1.2rem; }

/* the way-line rail: every section but the hero and footer sit on it */

section:not(.hero) > .wrap {
  position: relative;
  padding-left: clamp(1.5rem, 4vw, 2.5rem);
  padding-block: 4rem;
}

section:not(.hero) > .wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

section h2 {
  position: relative;
}

section:not(.hero) h2::before {
  content: "";
  position: absolute;
  left: clamp(-2.1rem, -4vw, -2.9rem);
  top: .55em;
  width: 10px;
  height: 10px;
  background: var(--mark);
  transform: rotate(45deg);
}

/* steps */

.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space);
  margin-top: 2rem;
}

.step__num {
  display: block;
  color: var(--moss);
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75em;
}

/* services */

.services__grid, .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space);
  margin-top: 2rem;
}

.service, .card {
  padding: 1.5rem;
  background: #FBF5ED;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: transform 150ms, border-color 150ms;
}

.service:hover, .card:hover {
  transform: translateY(-2px);
  border-color: var(--moss);
}

.service img, .card img {
  border-radius: 2px;
  margin-bottom: 1rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* plan 0016: zoom (var(--z)) scales a cover-fitted image about its focal point; the image clips
   itself back to its own box (no wrapper needed) — see Decision 5 for the inset math. Blog cards
   and any other image with no vars fall back to today's plain `inset(0 round 2px)`. */
/* the scaled box still counts as scrollable overflow even though clip-path hides it — the image's
   own container clips it (overflow: clip, not hidden: no scroll container) or a zoomed card near
   the edge would scroll the page sideways on a phone */
.service, .card, .about__inner, .portrait { overflow: clip; }

.service img, .card img, .about__inner img, .portrait__photo {
  object-position: var(--x, 50%) var(--y, 50%);
  transform-origin: var(--x, 50%) var(--y, 50%);
  scale: var(--z, 1);
  --k: calc(1 - 1 / var(--z, 1));
  clip-path: inset(
    calc(var(--y, 50%) * var(--k)) calc((100% - var(--x, 50%)) * var(--k))
    calc((100% - var(--y, 50%)) * var(--k)) calc(var(--x, 50%) * var(--k))
    round calc(2px / var(--z, 1))
  );
}

/* card titles carry the grid — Montserrat 400 is too light to head a block of serif copy */

.service, .card--post, .card--linked { position: relative; }
.service h3 a, .card--post h3 a, .card--linked h3 a { color: inherit; }
/* the title anchor stretches over the whole card, so anywhere on it is clickable */
.service h3 a::after, .card--post h3 a::after, .card--linked h3 a::after { content: ""; position: absolute; inset: 0; }

/* „Запази час" sits at the bottom of every service card (cards stretch to the row's height),
   above the stretched title link so it goes to the calendar, not just the page top */
.service { display: flex; flex-direction: column; }
.service__book { position: relative; z-index: 1; align-self: flex-start; margin-top: auto;
  padding: .8rem 2rem; background: var(--pine); color: var(--chalk); border-radius: 2px;
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.service__book:hover { background: var(--moss); color: var(--chalk); }

.service__meta {
  color: var(--moss);
  font-family: var(--font-mono);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* koaching-programi */

.cards--notes { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

/* text-only workshops read as waymarkers on the rail, not as a second slab of cards */
.note { padding-left: 1.25rem; border-left: 1px solid var(--line); position: relative; }
.note h3 { margin-bottom: .5em; }
.note::before {
  content: "";
  position: absolute; left: -4px; top: .55em;
  width: 7px; height: 7px;
  background: var(--mark); transform: rotate(45deg);
}

/* tvorchesko-atelie: poems keep their line breaks as tight verse, not loose paragraphs */
.poem p { font-family: var(--font-body); margin: 0 0 .15em; line-height: 1.5; }
.poem p:last-child { margin-bottom: 0; }

.lede { max-width: 46rem; font-family: var(--font-body); font-size: 1.2rem; line-height: 1.6; }

/* korporativni-programi: six full-width image+text rows, sides alternating down the rail */
.programs { display: flex; flex-direction: column; gap: 3.5rem; margin-top: 2.5rem; }
.programs .about__inner:nth-child(even) { flex-direction: row-reverse; }
.programs h3 { font-size: 1.5rem; }

/* about */

.about__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
}

.about__inner img {
  flex: 2 1 16rem;
  min-width: 16rem;
  max-width: 26rem;
  border-radius: 2px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.about__inner > div { flex: 3 1 20rem; }

/* the За мен teaser mirrors За ателието so the two blocks don't read as one slab */
.about--me .about__inner { flex-direction: row-reverse; }
.about--me .about__inner img { aspect-ratio: 4 / 5; }

.more {
  display: inline-block;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--moss);
  border-bottom: 1px solid var(--way);
  padding-bottom: .3em;
}

.more:hover { color: var(--pine); text-decoration: none; }
.more::after { content: " →"; color: var(--moss); }

/* footer */

.site-footer {
  background: var(--pine);
  color: rgba(252, 253, 250, .7);
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-top: 1px solid var(--moss);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.5rem;
}

.site-footer p { color: inherit; margin: 0; }
/* uppercase mono at .1em tracking makes word gaps wide, so separate the two links
   with a marker rather than more space — space alone reads as another word break */
/* tighter word-spacing inside each link, wide gap between them — the gap is the divider */
.site-footer__legal { display: flex; gap: 2.5rem; word-spacing: -.15em; }
.site-footer__legal a { color: inherit; }

/* placeholder page */

.page { min-height: 40vh; }

/* za-men */

.portrait { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
.portrait__photo { flex: 1 1 16rem; max-width: 22rem; border-radius: 2px; }
.portrait__text { flex: 3 1 20rem; }

/* kontakti */

.contact { display: flex; flex-direction: column; gap: 2.5rem; }
.contact__row { display: flex; flex-direction: column; gap: .4em; }

.contact__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--moss);
}

.contact__value { color: var(--pine); }

.contact__map {
  width: 100%;
  height: 24rem;
  margin-top: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  display: block;
}

/* details left, form in the space beside them; stacks when the row no longer fits */
.contact-grid { display: flex; flex-wrap: wrap; gap: 4rem; align-items: flex-start; }
.contact-grid .contact { flex: 1 1 15rem; }
.contact-grid__form { flex: 2 1 26rem; }
.contact-grid__form h2 { margin-top: 0; }

.form { max-width: 40rem; display: flex; flex-direction: column; gap: .8rem; margin-top: 1.25rem; }
.form label { font-family: var(--font-mono); text-transform: uppercase; font-size: .72rem;
              letter-spacing: .1em; color: var(--moss); display: block; margin-bottom: .4em; }
.form input, .form textarea, .form select {
  width: 100%; padding: .55rem .8rem; background: var(--chalk); color: var(--pine);
  border: 1px solid var(--line); border-radius: 2px;
  font: inherit; }
.form textarea { resize: vertical; }
/* name and email share a row, button and note share another — keeps the form the
   same height as the details column beside it */
.form__row { display: flex; gap: .8rem; flex-wrap: wrap; }
.form__row > div { flex: 1 1 11rem; }
.form__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__foot .form__note { margin: 0; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--moss); }
.form button { align-self: flex-start; padding: .8rem 2rem; background: var(--pine);
  color: var(--chalk); border: 0; border-radius: 2px; cursor: pointer;
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.form button:hover { background: var(--moss); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form__note { font-size: .85rem; }
.form__ok { border-left: 2px solid var(--way); padding-left: 1rem; color: var(--pine); }
.form__errors { border-left: 2px solid var(--alert); padding-left: 1rem; list-style: none;
  margin: 0 0 1.5rem; color: var(--alert); }

/* legal pages: long prose, so a narrow measure and quiet headings */
.article { max-width: 46rem; } /* prose measure, same call as .lede */
/* a subheading inside an article is not a section heading — the section h2 scale would dwarf the h1 */
.article h2 { font-size: 1.3rem; margin-top: 2.25rem; }
.article ul { color: var(--moss); padding-left: 1.1rem; margin: 0 0 1em; }
.article li { margin-bottom: .35em; }
.article p a { text-decoration: underline; text-underline-offset: 2px; } /* inline links in prose must look like links */

.legal { max-width: 52rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2.5rem; }
.legal h2::before { display: none; }
.legal p { font-size: .98rem; }
.legal__scroll { overflow-x: auto; margin: 1.5rem 0 2rem; }

.legal__table {
  border-collapse: collapse;
  min-width: 42rem;
  width: 100%;
  font-size: .88rem;
}

.legal__table th, .legal__table td {
  border: 1px solid var(--line);
  padding: .75rem 1rem;
  vertical-align: top;
  text-align: left;
  color: var(--moss);
}

.legal__table th {
  background: var(--chalk);
  color: var(--pine);
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}

/* zapazete-chas */
.booking__fallback { border-left: 2px solid var(--way); padding-left: 1rem; max-width: 46rem; margin-top: 2rem; }

.booking__pick { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
.cal { flex: 1 1 22rem; max-width: 28rem; margin-top: 2rem; }
.cal__times { flex: 1 1 20rem; margin-top: 2rem; }
.cal__times h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.cal__times h2::before { display: none; }  /* sits inside the calendar column, off the section rail */
.cal__times .booking__fallback { margin-top: 0; }
.cal__head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); text-transform: uppercase; font-size: .72rem;
  letter-spacing: .1em; color: var(--moss); margin-bottom: .6rem;
}
.cal__nav { display: flex; gap: 1rem; align-items: center; }
.cal__nav a { color: var(--moss); font-size: 1.6rem; line-height: 1; }
.cal__nav a:hover { color: var(--pine); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; color: var(--moss); text-align: center; padding: .3rem 0; }
.cal__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--chalk); border: 1px solid var(--line); border-radius: 2px; color: var(--pine);
}
.cal__day:hover { border-color: var(--moss); }
.cal__day--off { color: var(--line); background: transparent; border-color: transparent; }
.cal__day.is-selected { border-color: var(--pine); }

.slots { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.slot {
  padding: .55rem 1rem; background: var(--chalk); color: var(--pine);
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
}
.slot:hover { border-color: var(--moss); }
.slot.is-picked { background: var(--pine); color: var(--chalk); border-color: var(--pine); }

.legal__effective { margin-top: 3rem; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }

/* motion */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.js-reveal [data-reveal].is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* admin (plan 0012) */

.admin-bar { background: var(--mark-deep); color: var(--chalk); }
.admin-bar__inner { display: flex; align-items: center; gap: 2rem; padding-block: .35rem; }
.admin-bar__brand { color: var(--chalk); font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .1em; font-size: .8rem; border-bottom: 0; }
.admin-bar__nav { display: flex; gap: 1.25rem; flex: 1; }
.admin-bar__nav a { color: var(--chalk); border-bottom: 1px solid transparent; }
.admin-bar__nav a:hover { border-bottom-color: var(--way); }
.admin-bar__logout { background: transparent; border: 1px solid var(--chalk); color: var(--chalk);
  padding: .25rem .75rem; border-radius: 2px; cursor: pointer; font-family: var(--font-mono);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.admin-bar__logout:hover { background: var(--chalk); color: var(--pine); }
.admin-main { padding-block: 2rem; }
.admin-login { max-width: 24rem; min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 1rem; padding-block: 4rem; text-align: center; }
.admin-login__logo { height: 64px; width: auto; }
/* same white pill as ultreia-front's „Вход с Google" (src/components/Login.jsx) */
.admin-login__button { display: flex; align-items: center; justify-content: center; gap: .625rem;
  align-self: stretch; padding: .75rem 1.5rem; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; color: #3d4f49; font-weight: 500; font-size: .875rem;
  border-bottom: 1px solid var(--line); transition: background .15s; }
.admin-login__button:hover { background: var(--limestone); }
.admin-login__button svg { width: 18px; height: 18px; }

/* the public .form is a 40rem reading-width column; an admin editor is a work
   surface and must use the whole page, or every field ends up a few characters wide */
.admin-main .form { max-width: none; align-self: stretch; }
.admin-main .form button { align-self: flex-start; }

.admin-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; table-layout: fixed; }
.admin-table th, .admin-table td { padding: .5rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle; }
.admin-table th { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--moss); }
/* fixed layout + explicit widths: the four text columns share the room evenly instead of
   being sized by whichever title happens to be longest */
.admin-table th:first-child, .admin-table td:first-child { width: 12%; word-break: break-word; }
.admin-table th:nth-child(n+2):nth-child(-n+5) { width: 18%; }
.admin-table th:nth-child(6) { width: 5%; }
.admin-table th:nth-child(7) { width: 7%; }
.admin-table th:last-child { width: 6%; }
.admin-table input:not([type="checkbox"]) { width: 100%; padding: .35rem .5rem;
  border: 1px solid var(--line); border-radius: 2px; font: inherit; }
.admin-inline { display: flex; align-items: center; gap: .6rem; }

.admin-content__row { border: 1px solid var(--line); border-radius: 2px; padding: 1rem;
  margin-bottom: 1rem; }
.admin-content__row legend { font-family: var(--font-mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--moss); padding-inline: .3rem; }
.admin-content__cols { display: flex; gap: 1rem; }
.admin-content__cols > div { flex: 1 1 50%; }

/* live admin (plan 0013) */

/* the iframe must not sit in the .wrap measure, and its orange frame sits flush under the bar */
.admin-main--full { max-width: none; padding: 0; }

/* sits inside .admin-bar__inner, right of the nav (which is flex: 1) and left of Изход */
.live-bar { display: flex; align-items: center; gap: .75rem; }
.live-bar__status { font-family: var(--font-mono); font-size: .72rem; color: var(--chalk); }
/* the bar's height isn't a fixed number, so the live page is a column and the frame takes the rest */
body:has(.live__frame) { display: flex; flex-direction: column; height: 100vh; }
body:has(.live__frame) .admin-main { flex: 1; min-height: 0; width: 100%; }
.live__frame { width: 100%; height: 100%; border: 3px solid var(--way); display: block; margin-inline: auto; }
/* the picked model's viewport (--dw/--dh from live.js) plus the 2×3px border; a screen shorter
   than the phone caps the height, the frame then scrolls inside itself */
.live__frame--mobile { width: calc(var(--dw, 390px) + 6px); height: min(calc(var(--dh, 844px) + 6px), 100%);
  max-width: 100%; }
.live-bar__device { background: transparent; color: var(--chalk); border: 1px solid var(--chalk);
  border-radius: 2px; padding: .2rem .4rem; font-family: var(--font-mono); font-size: .72rem; cursor: pointer; }
.live-bar__device option { color: var(--pine); background: var(--chalk); }
body:has(.live__frame--mobile) .admin-main { background: var(--line); }
.live-bar__view { display: flex; }
.live-bar__view .admin-bar__logout[aria-pressed="true"] { background: var(--chalk); color: var(--pine); }
.live-bar__view .admin-bar__logout + .admin-bar__logout { border-left: 0; }

.ed:hover { outline: 1px dashed var(--way); }
.ed:focus { outline: 2px solid var(--pine); outline-offset: 2px; background: rgba(6, 88, 97, .08); }
.ed:empty::before { content: '…'; opacity: .5; } /* still clickable when the value is missing */

/* the innerHTML round-trip that produces .ed spans re-creates every element, so reveal.js's
   IntersectionObserver targets are lost — force them visible instead of stuck at opacity: 0 */
body.is-editing [data-reveal] { opacity: 1; transform: none; }
/* plan 0013: the stretched title link covers the whole card, so in edit mode a click on the
   copy landed on the <a> instead of the text. Lift the editable spans above the overlay — text
   takes the caret, the rest of the card still clicks through to its page. */
body.is-editing .service .ed,
body.is-editing .card--post .ed,
body.is-editing .card--linked .ed { position: relative; z-index: 1; }
/* plan 0014: in edit mode an image opens the file picker — same lift over the stretched card
   link as the .ed spans above, with a dashed hover affordance like .ed:hover */
body.is-editing [data-img-k] { position: relative; z-index: 1; cursor: pointer; }
body.is-editing [data-img-k]:hover { outline: 2px dashed var(--way); outline-offset: -4px; }
/* plan 0015: dragging pans the focal point (a plain click still opens the picker); touch-action:
   none hands the gesture to pointermove instead of letting the browser scroll the page with it. */
body.is-editing [data-img-k] { cursor: grab; touch-action: none; user-select: none; }
body.is-editing [data-img-k]:active { cursor: grabbing; }
/* a hero is both the draggable image and the parent of editable text — user-select: none is
   inherited, so the text inside would lose its caret/selection */
body.is-editing [data-img-k] .ed { user-select: text; cursor: text; }