/* =========================================================================
   Z3 "Svet" — zahrada-v3
   The page is one continuous garden. Every band paints edge to edge; the
   world (foliage, shade, haze) is full bleed and only the reading measure is
   constrained. Nothing anywhere reveals the body colour beside the page.
   ========================================================================= */

/* ---------- type: self-hosted, no third-party CDN ----------
   Instrument Serif + Instrument Sans served from this origin. Subsets and
   unicode-ranges are the Google Fonts ones, so a rural connection downloads
   latin + latin-ext only and nothing leaves the site to render the page. */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/dev/zahrada-v1-fonts/sans-normal-latin.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: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/dev/zahrada-v1-fonts/sans-normal-latin-ext.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: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('/dev/zahrada-v1-fonts/sans-italic-latin.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: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('/dev/zahrada-v1-fonts/sans-italic-latin-ext.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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/dev/zahrada-v1-fonts/serif-normal-latin.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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/dev/zahrada-v1-fonts/serif-normal-latin-ext.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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/dev/zahrada-v1-fonts/serif-italic-latin.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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/dev/zahrada-v1-fonts/serif-italic-latin-ext.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;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: auto; }
body { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

/* ---------- tokens ---------- */
:root {
  --cream: #f6f2e6;
  --cream-2: #f1ecda;
  --card: #fdfbf4;
  --ink: #11231d;
  --ink-soft: #3a4b43;
  --line: #e2dbc8;
  --line-2: #cdc5ab;
  --pine: #0d211c;
  --moss: #1a3329;
  --moss-2: #24402f;
  --teal: #159b9c;
  --teal-deep: #0d6f70;
  --teal-ink: #0b5758;
  --teal-wash: #e2efe9;
  /* The one accent is --teal (#159b9c). --mint is the locked design's own
     token for accent labels on the deep field (app.css --color-mint), so it
     is only ever text or a hairline on pine, never a fill. */
  --mint: #9adfd7;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 84rem;
  --gut: clamp(1.25rem, 5vw, 5rem);
  --hdr-h: 4.5rem;

  --fs-body: clamp(1.125rem, 0.28vw + 1.06rem, 1.25rem);
  --fs-lead: clamp(1.25rem, 0.9vw + 1.05rem, 1.6rem);
  --fs-small: 1rem;

  --gx: 0;
  --gy: 0;
}
@media (min-width: 1700px) { :root { --wrap: 100rem; --gut: clamp(5rem, 7vw, 9rem); } }
@media (min-width: 2200px) { :root { --wrap: 116rem; } }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--cream);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- primitives ---------- */
.band { position: relative; overflow: clip; isolation: isolate; }
.wrap {
  position: relative; z-index: 4;
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.ser { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; }
/* An atom: a run of words that must wrap as one. Used on the hero declaration,
   where the three facts are separated by · and the line may break there and
   nowhere else — a stray "€" on its own line was what prompted it. */
.nb { white-space: nowrap; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Display sizes run one step below where the walk started: the hero and the
   record by the door were shouting, and the rest of the page had to shout
   back to keep its rank. Every ratio between the steps is unchanged, so the
   hierarchy reads exactly as before, one octave quieter. */
.stmt {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.05rem, 4.1vw, 3.9rem);
  line-height: 1.04; letter-spacing: -0.016em;
  max-width: 20ch;
}
.stmt em { font-style: italic; }
.stmt--wide { max-width: 26ch; }

.eyebrow {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-ink);
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; background: currentColor; opacity: 0.55;
}
.on-dark .eyebrow, .eyebrow--dark { color: var(--mint); }

.lead { font-size: var(--fs-lead); line-height: 1.42; color: var(--ink-soft); }
.on-dark { color: var(--cream); }
:where(.on-dark) p, :where(.on-dark) li { color: var(--cream); }
.on-dark .lead { color: #dfe7d8; }

/* ---------- atmosphere: foliage rig ----------
   THE LEAF CONTRACT. Three rules, and every placement obeys all three:

   1. Leaves enter from OUTSIDE the reading measure. An anchor is a negative
      left/right, or a positive one beyond the wrap edge. No leaf is ever
      anchored at a positive inset that lands inside the text column, which is
      how a page ends up with a soft grey blur sitting under a paragraph.
   2. No leaf outranks the content. Foliage is z-index 0-2; .wrap is 4. There
      is no case where a leaf belongs in front of a word.
   3. Shade is a trace, not a wash. The two multiply tones are capped low
      enough that a full-width leaf crossing behind a heading costs contrast
      it can afford. Density lives in .lf-live at the band seams, where the
      canopy between rooms is supposed to read.

   Break any of the three and the foliage stops being a place and starts
   being decoration that landed where it landed. */
.fol { position: absolute; pointer-events: none; z-index: 2; will-change: transform; }
.fol-p {
  transform: translate3d(calc(var(--gx) * var(--dx, 34px)), calc(var(--gy) * var(--dy, 22px)), 0);
}
.fol-b { transform-origin: 60% 40%; }
.fol img { width: 100%; height: auto; }

@keyframes folA { from { transform: translate3d(0,0,0) rotate(-0.9deg) } to { transform: translate3d(1.1%, -1.4%, 0) rotate(1.2deg) } }
@keyframes folB { from { transform: translate3d(0,0,0) rotate(0.8deg) scale(1) } to { transform: translate3d(-1.4%, 1.1%, 0) rotate(-0.7deg) scale(1.03) } }
@keyframes folC { from { transform: translate3d(0,0,0) rotate(0.4deg) } to { transform: translate3d(0.8%, 1.6%, 0) rotate(-1.4deg) } }

@media (prefers-reduced-motion: no-preference) {
  .fol-b-a { animation: folA 19s ease-in-out infinite alternate; }
  .fol-b-b { animation: folB 25s ease-in-out infinite alternate; }
  .fol-b-c { animation: folC 31s ease-in-out infinite alternate; }
}

/* ---------- the watermark ----------
   Primland's botanical marks: enormous, roughly four percent contrast, and
   only ever in genuinely empty space. Three of them carry the whole homepage,
   and each one is anchored so that the part of it inside the band falls in a
   field with no words in it.

   The media gate is part of the rule, not a fallback. Below 1280px the reading
   measures fill the bands edge to edge, so there is no empty field for a mark
   to stand in, and a band with no empty field gets no mark. */
.lf-mark img { filter: brightness(0.34) saturate(1.35) blur(1.5px); opacity: 0.055; mix-blend-mode: multiply; }
.lf-mark-dark img { filter: brightness(1.5) saturate(0.45) blur(2px); opacity: 0.07; mix-blend-mode: screen; }
@media (max-width: 1279px) {
  .lf-mark, .lf-mark-dark { display: none; }
}

/* leaf treatments */
/* shade is green, not grey: the linden's own colour, darkened and multiplied */
.lf-shade img { filter: brightness(0.46) saturate(1.55) blur(8px); opacity: 0.085; mix-blend-mode: multiply; }
.lf-shade-soft img { filter: brightness(0.55) saturate(1.45) blur(28px); opacity: 0.055; mix-blend-mode: multiply; }
.lf-dark img { filter: brightness(0.32) saturate(0.55) contrast(1.1); opacity: 0.95; }
.lf-dark-blur img { filter: brightness(0.26) saturate(0.5) blur(7px); opacity: 0.9; }
.lf-glow img { filter: brightness(1.55) saturate(0.6) blur(9px); opacity: 0.16; mix-blend-mode: screen; }
.lf-live img { filter: saturate(0.92) contrast(1.02); }
.lf-live-blur img { filter: saturate(0.85) blur(6px); opacity: 0.92; }

/* ---------- atmosphere: dappled light ---------- */
.dapple { position: absolute; inset: -10%; z-index: 1; pointer-events: none; }
.dapple::before, .dapple::after {
  content: ""; position: absolute; inset: -12%;
  background-repeat: no-repeat;
}
.dapple--light::before {
  background-image:
    radial-gradient(38% 30% at 18% 22%, rgba(255,255,245,0.85), transparent 70%),
    radial-gradient(30% 26% at 74% 16%, rgba(255,252,232,0.7), transparent 72%),
    radial-gradient(44% 38% at 58% 82%, rgba(226,239,233,0.75), transparent 70%);
  mix-blend-mode: soft-light;
}
/* The shaded half of the dapple, taken down by about half. At its old weight
   it read as a grey smudge lying on the cream rather than as light. */
.dapple--light::after {
  background-image:
    radial-gradient(26% 22% at 32% 68%, rgba(26,51,41,0.26), transparent 72%),
    radial-gradient(34% 26% at 86% 54%, rgba(26,51,41,0.2), transparent 74%);
  mix-blend-mode: soft-light;
}
.dapple--dark::before {
  background-image:
    radial-gradient(40% 34% at 22% 24%, rgba(154,223,215,0.3), transparent 72%),
    radial-gradient(34% 28% at 78% 70%, rgba(246,242,230,0.22), transparent 74%);
  mix-blend-mode: screen;
}
.dapple--dark::after {
  background-image: radial-gradient(50% 40% at 60% 20%, rgba(21,155,156,0.22), transparent 72%);
  mix-blend-mode: screen;
}
@keyframes drift1 { from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.05) } to { transform: translate3d(3%, 2%, 0) scale(1.14) } }
@keyframes drift2 { from { transform: translate3d(2%, 2.5%, 0) scale(1.12) } to { transform: translate3d(-3%, -2%, 0) scale(1.03) } }
@media (prefers-reduced-motion: no-preference) {
  .dapple::before { animation: drift1 47s ease-in-out infinite alternate; }
  .dapple::after { animation: drift2 61s ease-in-out infinite alternate; }
}

/* near-invisible grain */
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- buttons + links ---------- */
/* ROLLBACK: this whole commented block is the pill it replaces. To revert,
   delete the live block below down to the next "----" comment and uncomment
   this one; nothing else on the page references .btn's internals.
.btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.5rem 1rem 1.7rem;
  border-radius: 999px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.004em;
  text-decoration: none;
  background: var(--teal); color: var(--pine);
  box-shadow: 0 1px 0 rgba(11,87,88,0.2);
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.3s;
}
.btn .arw { display: block; transition: transform 0.34s cubic-bezier(0.2,0.7,0.3,1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(11,87,88,0.85); } /* superseded below; kept for rollback */
.btn:hover .arw { transform: translateX(5px); }
.btn:active { transform: translateY(0); }
.btn--onDark { background: none; }
.btn--onDark:hover { box-shadow: 0 16px 34px -16px rgba(0,0,0,0.75); }
.btn--big { padding: 1.2rem 1.8rem 1.2rem 2rem; font-size: 1.15rem; }
.btn--sm { padding: 0.7rem 1.15rem 0.7rem 1.3rem; font-size: 1rem; }
*/

/* ----------------------------------------------------------------------
   THE FOLDED-CORNER BUTTON. Picked after six /_dev rounds (brand -> buttons
   -> buttons-f -> buttons-m -> back to the brand guide's own cut, ported
   verbatim from .bk-btn/.bk-cut in brand.css, plus a 3px radius on the three
   corners the fold does not touch).

   THE CUT is never clip-path on .btn itself, because clip-path also clips
   `outline` and the focus ring may never be clipped. It is painted on two
   pseudo elements under the label: ::before is a RING (outer outline
   clockwise, inner outline counter-clockwise, joined by a zero-area bridge,
   nonzero fill rule leaves the inside genuinely transparent), ::after is the
   FILL inset by the stroke width. --btn-sw: 0 collapses the ring to nothing,
   which is exactly what the solid primary wants: the fill alone covers the
   shape. .btn itself stays an unclipped rectangle, so :focus-visible (the
   sitewide rule below, unchanged) draws a whole ring around it.

   THE RADIUS composes with the clip-path rather than fighting it: border-
   radius rounds the box first, clip-path then intersects that rounded box
   with the cut polygon. The polygon's vertices at the three uncut corners
   sit exactly on the box's literal corners, which is outside the rounded
   arc there, so the intersection there is just the rounded corner -- radius
   survives untouched. At the cut corner --btn-r is 0, so the polygon's
   diagonal is the only thing drawn.

   COLOUR, verified (WCAG 2.1 contrast, see report):
     cream #f6f2e6 on --teal-deep #0d6f70   5.32:1  rest, on cream or pine
     cream on --teal-ink #0b5758            7.45:1  hover -- contrast RISES
     cream on #084344                       9.89:1  active/pressed
     #159b9c on pine #0d211c                4.95:1  the pine-ground hairline
     --teal-deep fill on pine               2.82:1  why the hairline exists
     #55605a on #dcd7c6                      4.55:1  disabled, still legible
   Bright #159b9c is a hairline and an arrow, never a text ground (3.03:1 on
   cream, fails). The 2px hover LIFT is retired: the box never moves, only
   .arw travels, 3px on hover and on press alike.
   ---------------------------------------------------------------------- */
.btn {
  --btn-cut: 12px;
  --btn-r: 3px;
  --btn-sw: 0px;
  --btn-in: calc(var(--btn-cut) - var(--btn-sw) * 0.5858);
  --btn-stroke: transparent;
  --btn-fill: var(--teal-deep);

  /* The superseded pill above is still live CSS, not a comment, so its paint
     has to be cancelled here or a teal 999px slab renders underneath the fold.
     Reset rather than delete: the old block is the rollback. */
  background: none;
  box-shadow: none;
  border-radius: 0;
  transform: none;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  height: 3rem;
  padding-inline: 1.4rem 1.5rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.004em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  color: var(--cream);
  transition: color 180ms linear;
}
.btn > * { position: relative; z-index: 1; }
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  /* the cut corner (bottom right, radius 0) plus a radius on the other
     three; see the note above for why this composes cleanly with clip-path */
  border-radius: var(--btn-r) var(--btn-r) 0 var(--btn-r);
  transition: background-color 180ms linear;
}
.btn::before {
  inset: 0;
  z-index: -2;
  background: var(--btn-stroke);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--btn-cut)),
    calc(100% - var(--btn-cut)) 100%,
    0 100%,
    0 0,
    var(--btn-sw) var(--btn-sw),
    var(--btn-sw) calc(100% - var(--btn-sw)),
    calc(100% - var(--btn-in) - var(--btn-sw)) calc(100% - var(--btn-sw)),
    calc(100% - var(--btn-sw)) calc(100% - var(--btn-in) - var(--btn-sw)),
    calc(100% - var(--btn-sw)) var(--btn-sw),
    var(--btn-sw) var(--btn-sw));
}
.btn::after {
  inset: var(--btn-sw);
  z-index: -1;
  background: var(--btn-fill);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--btn-in)),
    calc(100% - var(--btn-in)) 100%,
    0 100%);
}
.btn .arw { display: block; transition: transform 300ms cubic-bezier(0.2,0.7,0.3,1); }
.btn:hover .arw,
.btn.is-hover .arw { transform: translateX(3px); }
.btn:active .arw,
.btn.is-active .arw { transform: translateX(3px); }

.btn:hover,
.btn.is-hover {
  --btn-fill: var(--teal-ink);
  /* The superseded pill's rules above are live CSS, not comments, so its
     2px lift and drop shadow must be cancelled here. The control does not
     move; only the arrow travels. */
  transform: none;
  box-shadow: none;
}
.btn:active,
.btn.is-active { --btn-fill: #084344; }
.btn[disabled],
.btn.is-off {
  color: #55605a;
  --btn-stroke: #dcd7c6;
  --btn-fill: #dcd7c6;
  cursor: not-allowed;
  pointer-events: none;
}
.btn[disabled] .arw,
.btn.is-off .arw { transform: none; }

.btn--big { height: 3.5rem; padding-inline: 1.7rem 1.8rem; font-size: 1.15rem; --btn-cut: 14px; }
.btn--sm { height: 2.5rem; padding-inline: 1rem 1.1rem; font-size: 1rem; --btn-cut: 10px; }

/* Below 420 a long Slovak label ("Zavolať 0914 107 900") is wider than the
   phone. The control is allowed to take two lines and grow taller; the cut
   stays at its stated pixel value, because the fold is a property of the
   control's family, not of how many lines its label happens to need. */
@media (max-width: 420px) {
  .btn {
    height: auto; min-height: 3rem;
    padding-block: 0.7rem;
    white-space: normal; text-align: center; line-height: 1.25;
  }
  .btn--sm { min-height: 2.5rem; }
  .btn--big { min-height: 3.5rem; }
}

/* On the pine ground the deep fill is only 2.82:1 against its own ground,
   under the 3:1 floor a control boundary owes (WCAG 1.4.11), so it takes a
   1px #159b9c hairline (4.95:1 on pine). Two ways a button ends up on pine:
   carrying .btn--onDark itself (header CTA, drawer, hero) or sitting inside
   an .on-dark ground wrapper (the kontakt band's plain .btn). */
.btn--onDark,
.on-dark .btn {
  --btn-stroke: var(--teal);
  --btn-sw: 1px;
}
.btn--onDark:hover, .btn--onDark.is-hover,
.on-dark .btn:hover, .on-dark .btn.is-hover { --btn-stroke: var(--mint); }
.btn--onDark:active, .btn--onDark.is-active,
.on-dark .btn:active, .on-dark .btn.is-active { --btn-stroke: var(--teal); }
.btn--onDark[disabled], .btn--onDark.is-off,
.on-dark .btn[disabled], .on-dark .btn.is-off {
  color: #a9bcb5;
  --btn-stroke: #2c4b45;
  --btn-fill: #2c4b45;
}
/* ---------------------------------------------------------------------- */

.tel {
  display: inline-block; text-decoration: none;
  font-family: var(--serif); letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.2,0.7,0.3,1), color 0.3s;
  padding-bottom: 0.06em;
}
.tel:hover { background-size: 100% 2px; color: var(--teal-deep); }
.on-dark .tel:hover { color: var(--mint); }

/* the rule clears the descenders of the contact e-mail */
.ilink {
  display: inline-block;
  text-decoration: none; color: var(--teal-ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.3s, color 0.3s;
  padding-bottom: 0.22em;
}
.ilink:hover { background-size: 100% 2px; }
.on-dark .ilink { color: var(--mint); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :where(a, button):focus-visible, .hero :where(a, button):focus-visible { outline-color: var(--mint); }

/* =========================================================================
   HEADER
   ========================================================================= */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background-color 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}
/* The row is brand, then either the desktop nav and the pill or the number and
   Menu. Its gap is fluid because below roughly 400px the row is intrinsically
   wider than the viewport: a fixed 1.5rem gap was 3rem of the 335px a 375px
   phone actually has, .brand was the only item allowed to shrink, and
   "Župčany" was squeezed until it ran into the phone number. Nothing shrinks
   now; the row buys its space back from the gaps and, at the narrowest sizes,
   from the two controls. */
.hdr-in {
  display: flex; align-items: center; gap: clamp(0.6rem, 2.6vw, 1.5rem);
  min-height: var(--hdr-h);
  padding-block: 0.7rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; flex: 0 0 auto; min-width: 0; }
.brand b { white-space: nowrap; }
.hdr-tel, .burger, .hdr-cta { flex: 0 0 auto; }
.brand img { width: 2rem; height: 2rem; }
.brand b {
  font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--cream);
  transition: color 0.4s;
}
.brand small {
  display: block; font-size: 1rem; letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--mint); font-weight: 600; transition: color 0.4s;
}
.nav-d { display: flex; align-items: center; gap: 1.6rem; }

/* Header dial control, mobile only. It shows the number rather than a label
   because it is the one control up here that actually dials, and a control
   that says "arrange a visit" and silently dials is lying about itself. */
.hdr-tel {
  display: none; align-items: center;
  margin-left: auto; margin-right: 0.9rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; color: var(--cream);
  white-space: nowrap;
}
.hdr.is-solid .hdr-tel { color: var(--teal-ink); }
.nav-d a {
  position: relative; text-decoration: none; font-size: 1.0625rem; font-weight: 500;
  color: var(--cream); padding-block: 0.35rem; transition: color 0.3s;
}
.nav-d a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--mint); transform: scaleX(0); transform-origin: left;
  transition: transform 0.34s cubic-bezier(0.2,0.7,0.3,1);
}
.nav-d a:hover::after, .nav-d a.is-here::after { transform: scaleX(1); }
.nav-d a.is-here { color: var(--mint); }

/* ---------- the plate under the dark header ----------
   The dark state stands on a photograph, and the top corners of that
   photograph are where the hero's linden hangs. A cutout leaf is not a ground:
   at 390 the wordmark landed on mid-green foliage and lost most of its
   contrast, which is the complaint this whole pass exists to answer. This is
   the plate the header stands on for as long as it is over the picture, and it
   fades out exactly when the cream plate takes over, so the transition is one
   move rather than two. It is inside the header's own stacking context, so it
   can never cover anything below the header. */
.hdr::before {
  content: ""; position: absolute; inset: 0 0 -1.75rem 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(13,33,28,0.42), rgba(13,33,28,0.22) 62%, rgba(13,33,28,0));
  transition: opacity 0.4s;
}
.hdr.is-solid::before, .hdr--onCream::before { opacity: 0; }

/* ---------- the solid header ----------
   Two ways in. `.hdr.is-solid` is the scrolled state on a page that opens on a
   dark hero, written by the script. `.hdr--onCream` is the standing state for
   a page that opens on cream: it is on the element from the first pixel, it
   never transitions in, and it is what the three subpages should carry
   (<header class="hdr hdr--onCream">) instead of each keeping its own local
   copy of these declarations. */
.hdr.is-solid, .hdr--onCream {
  background: rgba(246,242,230,0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line), 0 14px 30px -28px rgba(13,33,28,0.7);
}
/* it opens solid, so it has nothing to fade from */
.hdr--onCream { transition: none; }
.hdr.is-solid .brand b, .hdr--onCream .brand b { color: var(--ink); }
.hdr.is-solid .brand small, .hdr--onCream .brand small { color: var(--teal-ink); }
.hdr.is-solid .nav-d a, .hdr--onCream .nav-d a { color: var(--ink); }
.hdr.is-solid .nav-d a::after, .hdr--onCream .nav-d a::after { background: var(--teal-deep); }
.hdr.is-solid .nav-d a.is-here, .hdr--onCream .nav-d a.is-here { color: var(--teal-ink); }
/* ROLLBACK: .btn--onDark no longer paints its own background (the fill lives
   in --btn-fill on the ::after pseudo element); old rule commented, not
   deleted, so reverting the block above also makes this line meaningful again.
.hdr.is-solid .btn--onDark, .hdr--onCream .btn--onDark { background: none; }
*/
/* Once the header is solid/cream it is a light ground again: drop the
   pine hairline and fall back to the plain light-ground fill. */
.hdr.is-solid .btn--onDark, .hdr--onCream .btn--onDark { --btn-sw: 0px; background: none; }
.hdr.is-solid .burger, .hdr--onCream .burger { color: var(--ink); border-color: rgba(17,35,29,0.3); }
.hdr--onCream .burger:hover { background: rgba(17,35,29,0.06); }
.hdr--onCream .hdr-tel { color: var(--teal-ink); }

.burger {
  display: none; align-items: center; gap: 0.6rem; cursor: pointer;
  padding: 0.6rem 1rem; border-radius: 999px;
  border: 1px solid rgba(246,242,230,0.45); color: var(--cream);
  font-size: 1rem; font-weight: 600; transition: color 0.4s, border-color 0.4s, background-color 0.3s;
}
.burger:hover { background: rgba(246,242,230,0.12); }
.burger i { display: block; width: 1.1rem; height: 1px; background: currentColor; position: relative; }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
}
.burger i::before { top: -5px; } .burger i::after { top: 5px; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 70;
  background: var(--pine);
  display: flex; flex-direction: column;
  padding: 1.25rem var(--gut) 2rem;
  overflow: hidden auto;
  visibility: hidden; opacity: 0;
  transition: opacity 0.32s, visibility 0.32s;
}
.drawer.is-open { visibility: visible; opacity: 1; }
/* the drawer's linden stays behind the words */
.drawer > :not(.fol) { position: relative; z-index: 1; }
.drawer .fol img { filter: brightness(0.2) saturate(0.5) blur(10px); opacity: 0.5; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--hdr-h); }
.drawer-x { cursor: pointer; color: var(--cream); font-size: 1rem; font-weight: 600; padding: 0.6rem 1rem; border: 1px solid rgba(246,242,230,0.4); border-radius: 999px; }
.drawer nav { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.25rem; }
.drawer nav a {
  font-family: var(--serif); font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.26;
  color: var(--cream); text-decoration: none;
}
.drawer nav a:hover { color: var(--mint); }
.drawer-foot { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.drawer-foot .tel { color: var(--mint); font-size: 1.7rem; }

/* =========================================================================
   1. HERO — arrival. Sticky stage, scrubbed: the garden opens.
   ========================================================================= */
.hero { height: 152svh; background: var(--pine); }
.hero-stage {
  position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate;
  /* the seam, see .hero-curve */
  --hero-curve-deep: clamp(5.5rem, 11vw, 13rem);
  --hero-curve-t: 0;
}

/* ---------- the seam ----------
   The hero used to end on a horizontal cut. It now ends on an arc: the cream
   of the page rises at both edges and dips away in the middle, so the page
   reads as curving up to meet the photograph.

   Painted with one radial gradient rather than a border-radius, because the
   shape wanted is the inverse of a rounded corner: transparent inside the
   ellipse, cream outside it. The plate is absolutely positioned inside the
   sticky stage and its height is the depth of the curve, so deepening the
   curve moves nothing on the page.

   --hero-curve-t is the scroll progress of the hero, 0 to 1, written by the
   script, and it is the ONLY number the script writes: both the depth and the
   width of the ellipse are derived from it here, so the reduced-motion and
   no-JavaScript cases get the whole shape by parking one value.

   At t = 0 the plate has no height and paints nothing, so the hero arrives on a
   flat edge with square corners. That is deliberate. The curve is something the
   page does as you scroll, not a radius the hero was born with.

   Two things grow at once, and that is what keeps it from reading mechanical.
   The depth runs 0 to --hero-curve-deep. The ellipse narrows from 112% of the
   width down to 62%, which is the part that matters: at 112% the arc is wider
   than the viewport, so the cream edge is nearly a straight line and only the
   far corners lift at all; by 62% the sweep sits inside the frame and the
   corners are properly round. So the curve does not slide down into place at a
   fixed shape, it forms. The visible lift at the edge is the product of the
   two, which blooms faster than either, and the script can therefore use a soft
   symmetric ease and still get a swell.

   Numbers behind the 112% and 62%: the cream's top edge sits at
   depth * sqrt(1 - (50/w)^2), so the lift at the frame edge is
   depth * (1 - sqrt(1 - (50/w)^2)) -- about 10% of the depth at w = 112%, and
   41% of it at w = 62%. */
.hero-curve {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 5;
  pointer-events: none;
  height: calc(var(--hero-curve-deep) * var(--hero-curve-t));
  background: radial-gradient(calc(112% - 50% * var(--hero-curve-t)) 100% at 50% 0%,
    rgba(246,242,230,0) 99.1%, var(--cream) 99.7%);
}
/* Both fallbacks park the shape rather than losing it: a hero that ends on a
   hard horizontal cut stops dead, which is the thing the seam exists to fix.
   0.68 is a little past halfway, deep enough to read as a curve and shallow
   enough not to look like the end of an animation nobody saw. */
html:not(.js) .hero-stage { --hero-curve-t: 0.68; }
@media (prefers-reduced-motion: reduce) {
  .hero-stage { --hero-curve-t: 0.68; }
}
.hero-layer { position: absolute; inset: 0; }
.hero-house { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; will-change: transform; }
.hero-haze { width: 100%; height: 100%; object-fit: cover; opacity: 0.24; mix-blend-mode: screen; will-change: transform; }

.hero-fall-b {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top,
    rgba(13,33,28,0.96) 0%, rgba(13,33,28,0.92) 20%, rgba(13,33,28,0.78) 38%,
    rgba(13,33,28,0.5) 56%, rgba(13,33,28,0.16) 76%, rgba(13,33,28,0) 92%);
}
.hero-fall-l {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to right, rgba(13,33,28,0.55) 0%, rgba(13,33,28,0.14) 40%, rgba(13,33,28,0) 64%);
}
.hero-fall-t {
  position: absolute; inset: 0 0 auto 0; height: 13rem; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13,33,28,0.72) 0%, rgba(13,33,28,0.34) 44%, rgba(13,33,28,0) 100%);
}
@media (min-width: 900px) {
  .hero-fall-b {
    background: linear-gradient(to top,
      rgba(13,33,28,0.95) 0%, rgba(13,33,28,0.62) 22%, rgba(13,33,28,0.2) 44%, rgba(13,33,28,0) 68%);
  }
}

.hero-copy {
  position: absolute; inset: auto 0 0 0; z-index: 6;
  padding-bottom: clamp(2.5rem, 5vh, 4.5rem);
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.45rem, 5.4vw, 5.1rem);
  line-height: 1.02; letter-spacing: -0.02em;
  color: #fffdf6; max-width: 15ch;
  margin-top: 1.1rem;
  text-shadow: 0 2px 30px rgba(13,33,28,0.35);
}
.hero-sub { margin-top: 1.4rem; max-width: 48ch; color: #eef2e6; font-size: var(--fs-lead); line-height: 1.42; }
.hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.hero-cta .say { color: #e5ebdd; font-size: var(--fs-small); }
.hero-cta .tel { color: #fffdf6; font-size: 1.55rem; margin-left: 0.6rem; vertical-align: -0.12em; }
.hero-decl {
  margin-top: 2.2rem; padding-top: 1.4rem; width: 100%;
  border-top: 1px solid rgba(246,242,230,0.28);
  font-family: var(--serif); font-size: clamp(1.1rem, 1.65vw, 1.5rem); line-height: 1.3;
  color: #fffdf6; font-variant-numeric: lining-nums tabular-nums;
}
.hero-decl b { font-weight: 400; color: var(--mint); }
.hero-scroll {
  position: absolute; z-index: 6; right: var(--gut); bottom: clamp(2.5rem, 5vh, 4.5rem);
  display: none; align-items: center; gap: 0.7rem;
  color: rgba(246,242,230,0.78); font-size: 1rem; letter-spacing: 0.09em; text-transform: uppercase;
}
@media (min-width: 1180px) { .hero-scroll { display: flex; } }
.hero-scroll span { display: block; width: 3rem; height: 1px; background: currentColor; transform-origin: right; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pull { 0%,100% { transform: scaleX(0.4) } 50% { transform: scaleX(1) } }
  .hero-scroll span { animation: pull 3.6s ease-in-out infinite; }
}

/* =========================================================================
   2. ZÁPIS — the record posted by the door, linden shade moving over it
   ========================================================================= */
.zapis { background: var(--cream); padding-block: clamp(6.5rem, 14vh, 10rem) clamp(5.5rem, 13vh, 9.5rem); }
/* the hero's evening dissolves into the record's daylight, not a razor cut */
.zapis::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: 3; pointer-events: none;
  height: clamp(5rem, 12vh, 9rem);
  background: linear-gradient(to bottom, rgba(13,33,28,0.88) 0%, rgba(13,33,28,0.38) 46%, rgba(13,33,28,0) 100%);
}
.zapis-in { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 1000px) { .zapis-in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.zapis-txt {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.35vw, 2.25rem);
  line-height: 1.28; letter-spacing: -0.01em;
  max-width: 30ch; color: var(--ink);
  font-variant-numeric: lining-nums;
}
.zapis-txt b { font-weight: 400; color: var(--teal-ink); }
.zapis-txt i { font-style: italic; }
.zapis-txt + .zapis-txt { margin-top: 1.1rem; }
.zapis-mark { display: grid; gap: 0.9rem; justify-items: start; }
.zapis-mark img { width: clamp(4.5rem, 8vw, 6.5rem); height: auto; }
.zapis-mark p { font-size: var(--fs-small); color: var(--ink-soft); max-width: 22ch; }
@media (min-width: 1000px) { .zapis-mark { justify-items: end; text-align: right; } .zapis-mark p { text-align: right; } }

/* =========================================================================
   3. PRE KOHO — tri cesty, jedny dvere

   Three rails leading with the reader's own situation, a hairline joint
   dropping out of each, and one dark panel they all arrive at.

   What this replaced indented rows two and three by one and two steps, which
   drew three mutually exclusive routes as a sequence a family had to pass
   through. It also floated the photograph on position:absolute at a fixed top
   offset, free of a much taller copy column, which is where the band's dead
   quarter came from. Neither is here.
   ========================================================================= */
.prekoho { position: relative; background: var(--cream-2); padding-block: clamp(7rem, 14vh, 11rem) clamp(6rem, 12vh, 9rem); }
.prekoho-head { margin-bottom: clamp(3.5rem, 7vh, 5rem); }
.prekoho-head .stmt { margin-top: 0; max-width: 15ch; }
.prekoho-lead { margin-top: 1.4rem; max-width: 48ch; }

.cesty {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.cesta {
  position: relative; min-width: 0;
  padding-top: clamp(1.75rem, 3.5vh, 2.5rem);
  padding-bottom: clamp(3rem, 6vh, 4.5rem);
  border-top: 2px solid var(--teal);
}
/* The reader matches themselves against this line; the formal route name below
   it is what a social worker checks. Both present, in that order. */
.cesta-kto {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.14;
  letter-spacing: -0.012em; color: var(--teal-ink); text-wrap: balance;
}
.cesta-nazov {
  margin: 0.9rem 0 0; font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.cesta-txt { margin: 0.7rem 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
/* Anchored to each rail's own bottom edge, which is what lets three columns of
   different heights all reach the same line with no measurement in script. */
.cesta-joint {
  position: absolute; left: 0; bottom: 0;
  width: 1px; height: clamp(2rem, 4vh, 3rem);
  background: linear-gradient(to bottom, var(--teal), rgba(21,155,156,0));
}

.dvere { display: grid; align-items: stretch; background: var(--pine); color: var(--cream); overflow: hidden; }
@media (min-width: 62rem) {
  .dvere { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.dvere-in { padding: clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; align-items: flex-start; }
.dvere-h {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1;
  letter-spacing: -0.014em; color: #fffdf6; max-width: 18ch;
}
.dvere-p { margin: 1.1rem 0 0; color: #dfe7dd; line-height: 1.6; max-width: 46ch; }
.dvere-in .btn { margin-top: clamp(1.75rem, 3.5vh, 2.5rem); }
.dvere-ph { position: relative; overflow: hidden; min-height: 18rem; }
.dvere-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 62rem) {
  /* Rails become a plain stacked list. A converging diagram on a phone is
     three arrows pointing at nothing. */
  .cesty { grid-template-columns: 1fr; gap: 0; }
  .cesta { padding-bottom: 1.75rem; }
  .cesta + .cesta { margin-top: 1.75rem; }
  .cesta-joint { display: none; }
}

/* =========================================================================
   4. IZBY — three photographs standing in the cream.

   They used to abut on a 3px seam, which made a contact sheet: one level strip
   of three frames, a heading stranded above an empty half, and a dead field
   under it. Now each photograph is a hard-edged rectangle with real air around
   it, taller than it was and larger in area than it was, and the space for
   that came out of the band's own padding rather than out of the page.

   Still three equal siblings: identical width, identical proportion,
   identical type, the same control underneath. What differs is only where each
   one stands. The third is dropped furthest, because the third photograph is a
   kúpeľňa and not a bedroom; off the line it reads as a different thing, which
   is what it is, instead of as the odd frame in a run.

   Nothing is bordered, filled or shadowed. The only rule anywhere in the band
   is the hairline under the link, which is the reference's link treatment.
   ========================================================================= */
/* The dead field, spent. The band used to open and close on 113px of nothing
   at 1440; the photographs are now roughly 170px taller than they were and
   that is where the height went. The foot is cut hardest, because the
   starostlivosť band below opens on a padding of its own and the two of them
   together were leaving a visitor staring at a quarter screen of cream. */
.izby { background: var(--cream); padding-top: clamp(4rem, 8vh, 6.5rem); padding-bottom: clamp(2.5rem, 5vh, 4rem); }
/* The head runs the whole measure: heading left, lead sitting on its baseline
   at the right. Left on its own in a 46rem column the heading was a line of
   type marooned above an empty half of the band. */
.izby-head { max-width: none; }
.izby-head .stmt { margin-top: 0; }
.izby-head .lead { margin-top: 1.4rem; max-width: 44ch; }
@media (min-width: 1000px) {
  .izby-head {
    display: grid; align-items: end;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
  }
  .izby-head .lead { margin-top: 0; padding-bottom: 0.4rem; }
}

.wall {
  margin-top: clamp(2.75rem, 6vh, 4rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4.2vw, 4.5rem);
  align-items: start;
}
/* The offsets. Measured in rem, not vw, so they stay a fixed fraction of the
   type they sit beside at every width, and released entirely once the wall
   stacks. The band's own padding was cut by the same order of magnitude, so
   the taller photographs and these offsets together cost it nothing. */
@media (min-width: 960px) {
  .wpane:nth-child(2) { margin-top: clamp(1.25rem, 2.2vw, 2.25rem); }
  .wpane:nth-child(3) { margin-top: clamp(2.75rem, 4.8vw, 5rem); }
}
.wpane {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.wpane-ph {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 5 / 6; background: var(--line);
}
.wpane-ph img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(0.2,0.7,0.3,1), filter 0.5s;
}
.wpane:hover .wpane-ph img, .wpane:focus-visible .wpane-ph img { transform: scale(1.065); }
/* The caption block. Every step in it got air: the name stands well clear of
   the photograph's edge, the count and the plocha clear of the name, and the
   control clear of both. */
.wpane-tx { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: clamp(1.4rem, 2.2vw, 2rem); }
.wpane-nm {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem); line-height: 1.1; letter-spacing: -0.012em;
  color: var(--ink);
}
.wpane-mt { display: block; margin-top: 0.7rem; font-size: var(--fs-small); color: var(--ink-soft); }
.wpane-mt i { font-style: normal; color: var(--teal); padding-inline: 0.5em; }
.wpane-note {
  display: block; margin-top: 0.85rem; max-width: 32ch;
  font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft);
}
.wpane-cue {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 0.6rem;
  margin-top: auto; padding-top: clamp(1.25rem, 2vw, 1.75rem);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--teal-ink);
}
/* The hairline is on the words, not on a box: it hugs the label and leaves the
   arrow free to travel out of it on hover. */
.wpane-cue-t { box-shadow: 0 1px 0 currentColor; }
.wpane-cue .arw { transition: transform 0.34s cubic-bezier(0.2,0.7,0.3,1); }
.wpane:hover .wpane-cue .arw, .wpane:focus-visible .wpane-cue .arw { transform: translateX(5px); }
/* Below 960 three columns would put a 220px photograph beside a room name that
   wraps twice, so the wall goes two up and the third stands alone under them.
   It keeps all three the same size, and the one that stands alone is the
   izolačná, which is the one the run was never really about. */
@media (max-width: 959px) {
  .wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3.2vw, 2.75rem);
    row-gap: clamp(2.75rem, 7vh, 4rem);
  }
  .izby-head .lead { max-width: 52ch; }
}
/* One column once even two of them would be postage stamps. Landscape here,
   because a portrait photograph at the full width of a phone costs most of a
   screen on its own. */
@media (max-width: 559px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
  .wpane-ph { aspect-ratio: 5 / 4; }
}

/* ---------- izba, detail: the dialog ----------
   Without JavaScript this whole block is ordinary content at the foot of the
   document, which is where the pane anchors land. html.js is what lifts it
   off the page, so no-JS visitors are never shown an empty screen. */
.rmodal { position: relative; z-index: 1; background: var(--cream); }
html:not(.js) .rmodal-veil { display: none; }
html:not(.js) .rsheet-x { display: none; }
html:not(.js) .rsheet { padding-block: clamp(3rem, 7vh, 5rem); border-top: 1px solid var(--line); }
html:not(.js) .rmodal-scroll { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

html.js .rmodal {
  position: fixed; inset: 0; z-index: 90;
  visibility: hidden; background: none;
}
html.js .rmodal-veil {
  position: absolute; inset: 0; opacity: 0;
  background: rgba(9,26,22,0.66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html.js .rmodal-scroll {
  position: absolute; inset: 0;
  overflow: hidden auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1rem, 4vh, 3.5rem) clamp(0.75rem, 3vw, 2.5rem);
}
html.js .rsheet[hidden] { display: none; }
/* Wide. The old sheet was a photograph beside a column of type at 72rem; this
   one carries a gallery, and a gallery in a narrow column is a thumbnail. */
html.js .rsheet {
  position: relative;
  width: min(1180px, 92vw);
  margin-block: auto;
  padding: clamp(1.25rem, 2vw, 2rem);
  background: var(--card);
  border-radius: clamp(0.75rem, 1.4vw, 1.25rem);
  box-shadow: 0 60px 120px -60px rgba(9,26,22,0.9);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
html.js .rsheet:focus { outline: none; }
@media (min-width: 900px) {
  /* The gallery takes the larger column, the particulars the smaller. */
  html.js .rsheet { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}
/* Full bleed on a phone: a 92vw sheet on a 390px screen leaves two useless
   cream margins and shrinks the one photograph the visitor came for. */
@media (max-width: 720px) {
  html.js .rmodal-scroll { padding: 0; align-items: stretch; }
  html.js .rsheet {
    width: 100%; min-height: 100%; margin-block: 0;
    border-radius: 0; box-shadow: none;
    padding: 0 0 clamp(2rem, 6vh, 3rem);
    gap: clamp(1.5rem, 4vh, 2rem);
  }
  html.js .rsheet .rgal-cap,
  html.js .rsheet .rgal-strip,
}

/* ---------- the room's gallery ----------
   One large frame, a caption line, a thumbnail strip. Prev and next sit on the
   frame itself rather than in a bar under it, which is what keeps this from
   being the galéria band's rig wearing a different name.

   With no JavaScript the whole thing is a plain column of photographs with
   their captions printed under them, and the controls are not drawn. */
.rgal { min-width: 0; }
.rgal-stage { position: relative; background: var(--line); }
.rgal-slide { margin: 0; }
.rgal-slide img { width: 100%; height: auto; display: block; }
.rgal-slide-cap {
  padding: 0.7rem 0 1.6rem;
  font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft);
}
html:not(.js) .rgal-arw, html:not(.js) .rgal-cap, html:not(.js) .rgal-strip { display: none; }

html.js .rgal-stage { aspect-ratio: 4 / 3; overflow: hidden; }
html.js .rgal-slide { position: absolute; inset: 0; }
html.js .rgal-slide img { width: 100%; height: 100%; object-fit: cover; }
html.js .rgal-slide-cap {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.rgal-arw {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; cursor: pointer;
  width: 2.85rem; height: 2.85rem; border-radius: 999px;
  color: var(--ink); background: rgba(253,251,244,0.92);
  box-shadow: 0 2px 14px -6px rgba(9,26,22,0.6);
  transition: background 0.25s, transform 0.25s;
}
.rgal-arw--p { left: clamp(0.6rem, 1.4vw, 1rem); }
.rgal-arw--n { right: clamp(0.6rem, 1.4vw, 1rem); }
.rgal-arw:hover { background: var(--cream); }
.rgal-arw:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; }
.rgal-cap {
  display: flex; align-items: baseline; gap: 0.9rem;
  margin-top: 1rem; font-size: var(--fs-small); line-height: 1.5;
}
.rgal-idx { flex: 0 0 auto; font-weight: 600; color: var(--teal-ink); }
.rgal-txt { color: var(--ink-soft); }
.rgal-strip {
  margin-top: 1.1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 0.6rem;
}
.rgal-thumb {
  display: block; cursor: pointer; padding: 0;
  aspect-ratio: 3 / 2; overflow: hidden; background: var(--line);
  opacity: 0.5; transition: opacity 0.3s;
}
.rgal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rgal-thumb:hover { opacity: 0.8; }
.rgal-thumb.is-on { opacity: 1; }
.rgal-thumb:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; }
.rsheet-tx { min-width: 0; padding: 0; }
@media (max-width: 720px) {
  html.js .rsheet-tx { padding-inline: var(--gut); }
}
.rsheet-tx h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.06; letter-spacing: -0.016em;
}
.rspec { margin-top: clamp(1.5rem, 3vh, 2rem); }
.rspec-r {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem;
  align-items: baseline;
  padding-block: 0.75rem; border-top: 1px solid var(--line);
}
.rspec-r:last-child { border-bottom: 1px solid var(--line); }
.rspec dt {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.085em; text-transform: uppercase; color: var(--teal-ink);
}
.rspec dd { margin: 0; color: var(--ink); line-height: 1.45; }
@media (max-width: 520px) {
  .rspec-r { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}
.rvyb-h {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}
.rvyb { margin-top: 1.1rem; display: grid; gap: 0.85rem; }
.rvyb li { display: flex; gap: 0.9rem; color: var(--ink-soft); max-width: 46ch; }
.rvyb li::before {
  content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin-top: 0.62em;
  border-radius: 50% 0 50% 50%; background: var(--teal); transform: rotate(-12deg);
}
.rsheet-cta { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
/* Fixed to the viewport, not to the sheet: a sheet taller than the screen
   used to carry its own close control off the top edge as you read down it. */
html.js .rsheet-x { position: fixed; top: clamp(0.75rem, 2.5vh, 1.75rem); right: clamp(0.75rem, 3vw, 2.75rem); }
.rsheet-x {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  padding: 0.6rem 1.05rem; border-radius: 999px;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  background: rgba(253,251,244,0.92); box-shadow: 0 2px 14px -6px rgba(9,26,22,0.6);
}
.rsheet-x:hover { background: var(--cream); }
.rsheet-x i {
  display: block; width: 0.8rem; height: 0.8rem; position: relative;
}
.rsheet-x i::before, .rsheet-x i::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px;
  background: currentColor;
}
.rsheet-x i::before { transform: rotate(45deg); }
.rsheet-x i::after { transform: rotate(-45deg); }

/* =========================================================================
   5. STAROSTLIVOSŤ, teaser. The nine services in full live on
   /starostlivost. Here they are one run of names, so the homepage answers
   "what do we get for the money" in four lines instead of three screens.
   ========================================================================= */
.staro { background: var(--cream-2); padding-block: clamp(6.5rem, 14vh, 10.5rem); }
.staro-head { max-width: 42rem; }
.staro-head .stmt { margin-top: 0; }
.staro-head .lead { margin-top: 1.4rem; max-width: 46ch; }

/* One sentence made of nine names. Not a list of boxes and not a column of
   headings: the services read as a single breath, the way you would say them
   out loud on the phone. */
.staro-run {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  max-width: 52rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.95rem); line-height: 1.42; letter-spacing: -0.008em;
  color: var(--ink);
}
.staro-run span::after {
  content: ""; display: inline-block; vertical-align: 0.28em;
  width: 0.5rem; height: 0.5rem; margin-inline: 0.75rem 0.65rem;
  border-radius: 50% 0 50% 50%; background: var(--teal); transform: rotate(-12deg);
}
.staro-run span:last-child::after { display: none; }
.staro-more { margin-top: clamp(2.75rem, 6vh, 4rem); }

/* =========================================================================
   6. DEŇ — the day in order. One rail from morning to the end of the evening:
   the meal on the left of it, what happens around that meal on the right, a
   node where the two meet. The rail deepens as the day does, and it fades in
   at first light and out after the last meal, so the section reads as a day
   passing rather than a list of rows.
   ========================================================================= */
.den { background: var(--cream); padding-block: clamp(7rem, 15vh, 11rem); }
.den-head .stmt { margin-top: 0; max-width: 17ch; }
.den-head .lead { margin-top: 1.4rem; max-width: 48ch; }

.day { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.day-st {
  display: grid;
  grid-template-columns: minmax(0, 11.5rem) 1px minmax(0, 1fr);
  column-gap: clamp(1.25rem, 2.6vw, 2.25rem);
  color: var(--pine);
}
/* the arc of the day, lit to deep. The rail and the node take it from
   currentColor, so one declaration moves both. */
.day-st:nth-child(1) { color: #0b5758; }
.day-st:nth-child(2) { color: #0f5148; }
.day-st:nth-child(3) { color: #17453a; }
.day-st:nth-child(4) { color: #1a3d33; }
.day-st:nth-child(5) { color: #16352c; }
.day-st:nth-child(6) { color: var(--pine); }

.day-when {
  padding-block: clamp(1.4rem, 3.2vh, 2.25rem) 0;
  text-align: right;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.day-part {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft);
}
.day-meal {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.1; letter-spacing: -0.014em;
  color: currentColor;
}
.day-rail {
  position: relative;
  background: var(--line-2);
  background: color-mix(in srgb, currentColor 34%, transparent);
}
.day-rail::before {
  content: ""; position: absolute; left: 50%; top: clamp(1.75rem, 3.7vh, 2.6rem);
  width: 0.6rem; height: 0.6rem; margin-left: -0.3rem;
  border-radius: 50% 0 50% 50%; background: currentColor; transform: rotate(-12deg);
}
/* the day opens out of nothing and settles into nothing */
.day-st:first-child .day-rail {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.4rem);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.4rem);
}
.day-st:last-child .day-rail {
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
.day-what { padding-block: clamp(1.4rem, 3.2vh, 2.25rem) clamp(1.4rem, 3.2vh, 2.25rem); }
.day-line { color: var(--ink-soft); max-width: 52ch; }

.day-hours {
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
  padding-top: 1.1rem; border-top: 1px solid var(--line-2);
  max-width: 34rem;
}
.day-hours-lbl {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal-ink); margin-bottom: 0.6rem;
}
.day-hours-r {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 1rem;
  padding-block: 0.3rem;
}
.day-hours-r .d { font-size: var(--fs-small); color: var(--ink-soft); min-width: 12rem; }
.day-hours-r .t {
  font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2;
  color: var(--teal-ink); font-variant-numeric: lining-nums tabular-nums;
}

/* The afternoon's own picture, a hard-edged rectangle standing in the cream.
   The radial feather it used to carry was the one soft-edged photograph on the
   page, and a feathered edge is what makes a photograph read as wallpaper. It
   is a film now, so the rule addresses whichever element is in the figure. */
.day-ph { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); max-width: 42rem; }
.day-ph :is(img, video) { width: 100%; height: auto; }
/* The afternoon is the pivot of the day and the one station that carries a
   picture, so on a wide screen it opens across the whole measure: the hours a
   family comes back to look up on the left, the hour itself on the right. */
@media (min-width: 1200px) {
  .day-st--wide .day-what {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .day-st--wide .day-ph { margin-top: 0.4rem; max-width: none; }
}

.day-acts {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: clamp(1.5rem, 3.5vh, 2.25rem);
  border-top: 1px solid var(--line-2);
}
.day-acts-lbl {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal-ink);
}
.day-acts-run {
  margin-top: 0.9rem; max-width: 68rem;
  font-size: var(--fs-body); line-height: 1.7; color: var(--ink);
}
.day-acts-run span::after {
  content: ""; display: inline-block; vertical-align: 0.24em;
  width: 0.4rem; height: 0.4rem; margin-inline: 0.7rem 0.6rem;
  border-radius: 50% 0 50% 50%; background: var(--teal); transform: rotate(-12deg);
}
.day-acts-run span:last-child::after { display: none; }

@media (max-width: 760px) {
  .day-st { grid-template-columns: 1px minmax(0, 1fr); column-gap: 1.25rem; }
  .day-when {
    grid-column: 2; grid-row: 1;
    text-align: left; padding-block: clamp(1.25rem, 3vh, 1.75rem) 0.5rem;
  }
  .day-rail { grid-column: 1; grid-row: 1 / span 2; }
  .day-what { grid-column: 2; grid-row: 2; padding-top: 0; }
  .day-rail::before { top: clamp(1.6rem, 3.4vh, 2.1rem); }
  .day-hours-r .d { min-width: 0; width: 100%; }
}

/* =========================================================================
   7. CENNÍK — the clearing. This one holds still.
   ========================================================================= */
.cennik { background: var(--card); padding-block: clamp(7.5rem, 16vh, 12rem); }
.cennik-head { display: grid; gap: 1.2rem; max-width: 54rem; }
.cennik-head .stmt { max-width: 22ch; }
.cennik-head .note { color: var(--ink-soft); max-width: 50ch; }

.rates { margin-top: clamp(3.75rem, 8vh, 6rem); display: grid; gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) { .rates { grid-template-columns: 1fr 1fr; } }
.rate-grp > h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.14; }
.rate-grp > p { margin-top: 0.4rem; font-size: var(--fs-small); color: var(--teal-ink); font-weight: 600; letter-spacing: 0.02em; }
.rate-rows { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.rate-row { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.rate-row .nm { flex: 1 1 auto; }
.rate-row .pr {
  font-family: var(--serif); font-size: clamp(1.85rem, 2.95vw, 2.6rem); line-height: 1;
  letter-spacing: -0.016em; color: var(--teal-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.rate-row .per { font-size: var(--fs-small); color: var(--ink-soft); }

.cennik-more {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
}
.cennik-more span { font-size: var(--fs-small); color: var(--ink-soft); max-width: 34ch; }

/* =========================================================================
   8. KONTAKT — the door, at dusk. The page's one full-bleed dark band.
   The cenník's daylight dissolves into the pine across the top edge and the
   band deepens into the footer's night below: the dusk is a change of light,
   never a razor seam. The facts stand on the field itself, no box.
   ========================================================================= */
.kontakt { background: var(--pine); padding-block: clamp(8.5rem, 18vh, 13rem) clamp(6rem, 13vh, 9.5rem); }
.kontakt-edge { position: absolute; left: 0; right: 0; z-index: 5; pointer-events: none; }
.kontakt-edge--t {
  top: 0; height: clamp(4rem, 9vh, 8rem);
  background: linear-gradient(to bottom, var(--card) 0%, rgba(19,44,37,0.72) 55%, rgba(13,33,28,0) 100%);
}
.kontakt-edge--b {
  bottom: 0; height: clamp(3rem, 7vh, 5.5rem);
  background: linear-gradient(to top, #091a16 0%, rgba(9,26,22,0) 100%);
}
.kontakt-in { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 1000px) { .kontakt-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.kontakt .stmt { margin-top: 0; color: #fffdf6; }
.kontakt-lead { margin-top: 1.4rem; max-width: 40ch; color: #dfe7d8; font-size: var(--fs-lead); line-height: 1.4; }
.kontakt-call { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }

/* Where the door is. It ends the left column where the re-cropped hero used
   to sit, and it is the line a family reads out to whoever is driving. */
.kontakt-where {
  margin-top: clamp(2.5rem, 6vh, 3.75rem);
  padding-top: 1.5rem; border-top: 1px solid rgba(246,242,230,0.24);
  max-width: 34rem;
}
.kontakt-where .lbl {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mint);
}
.kontakt-where .val {
  margin-top: 0.55rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.16; letter-spacing: -0.012em;
  color: #fffdf6; font-variant-numeric: lining-nums;
}
.kontakt-where .sub { margin-top: 0.6rem; font-size: var(--fs-small); color: #dfe7d8; }

.kontakt-card { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) {
  .kontakt-card {
    position: sticky; top: 6.5rem;
    border-left: 1px solid rgba(246,242,230,0.2);
    padding-left: clamp(1.75rem, 3.4vw, 3rem);
  }
}
@media (max-width: 999px) {
  .kontakt-card { border-top: 1px solid rgba(246,242,230,0.2); padding-top: 2rem; }
}
.kfact { display: grid; gap: 0.3rem; }
.kfact .lbl { font-size: var(--fs-small); color: var(--mint); }
.kfact .val { font-family: var(--serif); font-size: clamp(1.25rem, 1.85vw, 1.6rem); line-height: 1.26; color: #fffdf6; }
.kfact .val a { text-decoration: none; }
.khours { margin-top: 0.4rem; padding-top: 1.5rem; border-top: 1px solid rgba(246,242,230,0.24); display: grid; gap: 0.75rem; }
.khours-lbl { font-size: var(--fs-small); color: var(--mint); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.35rem; }
/* The timetable rows (.r/.d/.t) are gone with the návštevné hodiny, removed
   18 August 2026. One sentence stands where the two-row grid did, set at the
   card's own body size rather than at the serif figure size the times used:
   this is a fact, not a number to look up. */
.khours-say { color: #dfe7d8; font-size: var(--fs-small); line-height: 1.6; max-width: 24rem; }

/* =========================================================================
   9. FOOTER — same dusk field, the operator's record
   ========================================================================= */
.foot { position: relative; background: #091a16; color: #cdd8cc; padding-block: clamp(3rem, 7vh, 4.5rem); }
.foot-in { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .foot-in {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: 2.75rem;
    align-items: start;
  }
  .foot-bot { grid-column: 1 / -1; }
}
.foot-mark { display: flex; align-items: center; gap: 1rem; }
.foot-mark img { width: 3.25rem; height: 3.25rem; }
.foot-mark > span { display: block; line-height: 1.2; }
.foot-mark b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--cream); display: block; }
.foot-mark small { display: block; margin-top: 0.15rem; font-size: var(--fs-small); color: var(--mint); }
.foot-rec { font-size: 1.0625rem; line-height: 1.7; max-width: 74ch; }
.foot-rec b { color: var(--cream); font-weight: 600; }
.foot-bot { padding-top: 1.4rem; border-top: 1px solid rgba(246,242,230,0.14); display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-size: var(--fs-small); }
/* teal-ink is unreadable on the night ground; mint labels are the dark-field rule */
.foot .ilink { color: var(--mint); }

/* =========================================================================
   reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .fol-p { transform: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =========================================================================
   layout corrections + responsive behaviour
   ========================================================================= */
.brand > span { display: block; line-height: 1.12; }
.hero-fore { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform; }
section[id], .den, .foot { scroll-margin-top: 5.5rem; }

/* nav model: drawer once the row would crowd */
html:not(.js) .burger { display: none; }
html:not(.js) .drawer { display: none; }
@media (max-width: 1159px) {
  html.js .nav-d, html.js .hdr-cta { display: none; }
  html.js .burger { display: inline-flex; }
  /* The pill steps aside here, the number does not. */
  html.js .hdr-tel { display: inline-flex; }
  html:not(.js) .hdr-in { flex-wrap: wrap; row-gap: 0.5rem; }
  html:not(.js) .hdr-cta { display: none; }
  html:not(.js) .nav-d { flex-wrap: wrap; gap: 0.4rem 1.15rem; width: 100%; }
}
@media (min-width: 1160px) { .drawer { display: none; } }

/* mobile choreography: the world stays, it just carries less weight */
@media (max-width: 899px) {
  .hero { height: 146svh; }
  .hero-copy { padding-bottom: clamp(2rem, 4vh, 3rem); }
  .hero-cta { gap: 0.9rem 1.4rem; }
  .hero-cta .say { width: 100%; }
  /* the copy owns most of a narrow frame, so the evening comes further up */
  .hero-fall-b {
    background: linear-gradient(to top,
      rgba(13,33,28,0.97) 0%, rgba(13,33,28,0.95) 26%, rgba(13,33,28,0.86) 46%,
      rgba(13,33,28,0.62) 62%, rgba(13,33,28,0.28) 80%, rgba(13,33,28,0) 96%);
  }
  .day-acts-run { line-height: 1.75; }
}
@media (max-width: 560px) {
  .brand small { display: none; }
  .brand b { font-size: 1.2rem; }
}
/* The narrow header, repaired at source. Three items that all have to stay
   whole: the mark and the village, the number that dials, and the way into the
   menu. Below 420px the row is given back the room it needs by tightening its
   own padding, the swan, and the two controls, rather than by squeezing the
   only thing that was allowed to squeeze. The type never goes under 1rem,
   which is the small floor. */
@media (max-width: 420px) {
  .hdr-in { padding-inline: 1rem; gap: 0.55rem; }
  .brand img { width: 1.75rem; height: 1.75rem; }
  .brand { gap: 0.55rem; }
  .brand b { font-size: 1.1rem; }
  .hdr-tel { font-size: 1rem; letter-spacing: 0; margin-right: 0; }
  .burger { padding: 0.55rem 0.8rem; gap: 0.45rem; }

  .hero h1 { font-size: 2.25rem; }
  .hero-cta .tel { font-size: 1.35rem; }
}
/* 320px, the narrowest phone still in the wild. Measured: mark, village,
   number and Menu come to 333px of intrinsic width at the sizes above, so the
   last 13px are bought back from the row's own padding and gaps rather than
   from any of the four things. */
@media (max-width: 359px) {
  .hdr-in { padding-inline: 0.75rem; gap: 0.4rem; }
  .burger { padding: 0.55rem 0.7rem; }
}


/* ===================== GALÉRIA ==========================================
   "Okná": six frames you pass on the way through. Two unequal runs, the
   right one dropped by a third of a viewport, so no frame ever sits level
   with its neighbour and the band reads as a walk rather than a grid. It
   is the only multi-photograph composition on the page, which keeps it a
   layout family of its own.

   Every frame declares its aspect ratio, and every img carries width and
   height, so nothing reflows as the photographs arrive on a slow rural
   connection. Depths alternate sign in the JS rig, so the band breathes
   against scroll instead of sliding one way.
   ====================================================================== */
.galeria { background: var(--cream-2); padding-block: clamp(6.5rem, 14vh, 10rem); }
.gal-head { position: relative; z-index: 4; }
.gal-head .stmt { margin-top: 0; max-width: 16ch; }

/* The disclaimer is the first thing the section says, not a footnote under
   it. This page publishes what the category hides; that has to include
   admitting which pictures are not the house. */
.gal-note {
  margin-top: 1.6rem; max-width: 46ch;
  font-size: var(--fs-body); line-height: 1.62; color: var(--ink-soft);
}
.gal-note strong { color: var(--ink); font-weight: 600; }

/* One frame the photographs pass through, rather than a wall of frames the
   visitor passes. Portrait and landscape both stand to the same height and
   the frame keeps its size, so nothing on the page moves as they change. */
.gal-view { position: relative; z-index: 4; margin-top: clamp(2.5rem, 6vh, 3.75rem); }
.gal-stage {
  position: relative;
  height: clamp(17rem, 48svh, 29rem);
}
/* On a wide screen the disclosure stands beside the frame rather than above
   it, so the whole gallery is one screen and the photograph is not stranded
   in the middle of an empty band. */
@media (min-width: 1000px) {
  .galeria > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .galeria .gal-head { grid-column: 1; }
  .galeria .gal-view { grid-column: 2; margin-top: 0.5rem; }
}
.gal-slide {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
}
.gal-slide.is-on { opacity: 1; visibility: visible; }
.gal-slide :is(img, video) {
  height: 100%; width: auto; max-width: 100%; object-fit: contain;
  box-shadow: 0 30px 70px -34px rgba(13, 33, 28, 0.6);
}
html.js .gal-slide-cap { display: none; }

.gal-bar {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--line-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
}
.gal-cap { display: flex; align-items: baseline; gap: 0.85rem; min-width: 0; }
.gal-idx {
  font-family: var(--serif); font-size: 1.15rem; color: var(--teal-ink);
  font-variant-numeric: lining-nums tabular-nums; flex: none;
}
.gal-txt { font-size: var(--fs-body); color: var(--ink); }
.gal-nav { display: flex; gap: 0.5rem; flex: none; }
.gal-arrow {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px;
  color: var(--ink); border: 1px solid var(--line-2);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.gal-arrow:hover { background: var(--teal); color: var(--pine); border-color: var(--teal); }

.gal-strip {
  margin-top: 1.25rem;
  display: flex; gap: 0.5rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 0.4rem;
}
.gal-thumb {
  cursor: pointer; flex: 0 0 auto; scroll-snap-align: start;
  width: clamp(4.5rem, 9vw, 7.25rem);
  padding: 0; position: relative; overflow: hidden;
  background: var(--line);
}
/* height:auto is load-bearing. The height="2700" attribute is a presentational
   hint, which is a real declaration: without overriding it the thumbnail is
   2700px tall and aspect-ratio is ignored, because neither axis is auto. */
.gal-thumb img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  opacity: 0.62; filter: saturate(0.65);
  transition: opacity 0.35s, filter 0.35s, transform 0.5s cubic-bezier(0.2,0.7,0.3,1);
}
.gal-thumb:hover img { opacity: 0.88; filter: none; }
.gal-thumb.is-on img { opacity: 1; filter: none; }
.gal-thumb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform 0.34s cubic-bezier(0.2,0.7,0.3,1);
}
.gal-thumb.is-on::after { transform: scaleX(1); }

/* No script: the six photographs are simply six photographs, captioned. */
html:not(.js) .gal-stage { height: auto; display: grid; gap: clamp(2rem, 5vh, 3rem); }
html:not(.js) .gal-slide { position: static; opacity: 1; visibility: visible; display: block; }
html:not(.js) .gal-slide :is(img, video) { width: 100%; height: auto; }
html:not(.js) .gal-slide-cap { margin-top: 0.8rem; font-size: var(--fs-small); color: var(--ink-soft); }
html:not(.js) .gal-bar, html:not(.js) .gal-strip { display: none; }

@media (max-width: 60rem) {
  .gal-head .stmt { max-width: none; }
  .gal-bar { flex-wrap: wrap; }
}

/* ===================== ZÁZNAM O ZARIADENÍ ===============================
   The posted record. A standing heading on the left, one ruled sheet on the
   right: the layout family of a document, which no other band uses. Rows are
   hairlines rather than a table, because a table would read as data and this
   has to read as a notice pinned by the door.
   ====================================================================== */
.zaznam { background: var(--cream); padding-block: clamp(4.5rem, 10vh, 7rem); }
.zaznam-in {
  position: relative; z-index: 4;
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 5vw, 5.5rem); align-items: start;
}
.zaznam-head .stmt { margin-top: 1.1rem; max-width: 13ch; }
.zaznam-lead {
  margin-top: 1.3rem; max-width: 34ch;
  font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft);
}
.zaznam-mark { margin-top: clamp(2rem, 5vh, 3.25rem); }
.zaznam-mark img { width: 3rem; height: auto; display: block; }
.zaznam-mark p {
  margin-top: 0.7rem; font-size: var(--fs-small); line-height: 1.5;
  color: var(--ink-soft);
}

.zaznam-sheet { margin: 0; min-width: 0; }
.zaznam-sheet .zr {
  display: grid; grid-template-columns: 13.5rem 1fr; gap: 1.5rem;
  align-items: baseline;
  padding-block: 0.9rem;
  border-top: 1px solid var(--line);
}
.zaznam-sheet .zr:last-child { border-bottom: 1px solid var(--line); }
.zaznam-sheet dt {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.085em; text-transform: uppercase; color: var(--teal-ink);
}
.zaznam-sheet dd {
  margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--ink);
}

@media (max-width: 60rem) {
  .zaznam-in { grid-template-columns: 1fr; gap: clamp(2rem, 6vh, 3rem); }
  .zaznam-head .stmt { max-width: none; }
  .zaznam-sheet .zr { grid-template-columns: 1fr; gap: 0.25rem; padding-block: 0.95rem; }
}

/* ===================== PREČO PRÁVE TENTO DOM ============================
   The statement, then the film, then the facts as its caption.

   This band used to be a statement, a gap, a hairline and three equal columns
   of body copy, which read as a spec sheet one screen after a photographic
   hero. The film is the section now. The three reasons are still a three-up
   row, but they are demoted to a caption band under it and everything here is
   built to keep them that way: sans instead of serif, body size instead of
   display, the proof at the small step. If they ever read as loud as the film
   the band is back to being a table.
   ====================================================================== */
.preco { background: var(--cream); padding-block: clamp(6rem, 13vh, 10rem) clamp(4.5rem, 10vh, 7.5rem); }
/* No eyebrow: the section opens by speaking to the reader, and a corporate
   label above that sentence is what made the page read as a form.

   Title left, standfirst right. The 1fr / 0.86fr split gives the paragraph a
   real measure without letting it match the title's weight, and the gap is
   wide enough that the two never read as a two-column text. Below 62rem they
   stack, because a 40ch paragraph beside a display serif on a phone is two
   columns of four words each. */
.preco-head { display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); align-items: start; }
@media (min-width: 62rem) {
  .preco-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    column-gap: clamp(3rem, 7vw, 7rem);
  }
  /* The note sits below the title's first baseline rather than level with it:
     aligned, the two tops fight; offset, the paragraph reads as hanging off the
     title. Optical, so it is in em of the paragraph and follows its size. */
  .preco-about { padding-top: 0.55em; }
}
.preco-stmt { margin-top: 0; max-width: 16ch; text-wrap: balance; }
.preco-about p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); max-width: 48ch; }
.preco-more { margin-top: 1.1rem; }
.preco-more .ilink { font-size: var(--fs-small); }

/* Edge to edge, outside .wrap entirely. 16:6 rather than 16:9 so it reads as a
   band across the page and not as an embedded player; the source is 16:9 and
   object-fit takes the middle third out of it, which is where the faces are.
   The dark ground is what shows while the poster is still decoding. */
.preco-film {
  position: relative; z-index: 4;
  margin-top: clamp(3rem, 7vh, 5rem);
  width: 100%; aspect-ratio: 16 / 6; overflow: hidden;
  background: var(--pine);
}
.preco-film .film { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 62rem) { .preco-film { aspect-ratio: 4 / 3; } }

.preco-strip {
  list-style: none; margin: clamp(2.5rem, 5vh, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
/* Divided by rules between the cells rather than boxed: the first cell has no
   rule, so the band reads as one caption in three parts. */
.pr-cell { min-width: 0; padding-left: clamp(1.25rem, 2.5vw, 2.25rem); border-left: 1px solid var(--line-2); }
.pr-cell:first-child { padding-left: 0; border-left: 0; }
.pr-fact {
  margin: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.35;
  color: var(--ink);
  /* three short statements side by side: none may hang a word on its own line */
  text-wrap: balance;
}
.pr-txt {
  margin: 0.55rem 0 0; font-size: var(--fs-small);
  line-height: 1.55; color: var(--ink-soft);
}
@media (max-width: 62rem) {
  .preco-strip { grid-template-columns: 1fr; gap: 1.5rem; }
  .pr-cell { padding-left: 0; border-left: 0; padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
  .pr-cell:first-child { padding-top: 0; border-top: 0; }
  .preco-stmt { max-width: none; }
}

/* ==========================================================================
   BUTTON, authoritative. Appended last on purpose: two earlier .btn blocks
   are still in this file and the custom-property indirection between them
   was resolving to empty, which left the ring pseudo-element unclipped and
   painting a solid teal slab. This block hardcodes the values instead of
   threading them through variables, so there is nothing left to resolve.
   Fold: bottom right. Radius: 3px on the other three corners.
   The element stays an unclipped rectangle so :focus-visible is never cut;
   only the ::before fill carries the clip-path.
   ========================================================================== */
.btn, .btn--sm, .btn--big, .btn--onDark {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: none;
  box-shadow: none;
  border-radius: 0;
  transform: none;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn::after { content: none; }
.btn { padding-inline: 1.4rem 1.5rem; height: 3rem; font-size: 1.0625rem; font-weight: 600; }
.btn--sm { padding-inline: 1.1rem 1.2rem; height: 2.5rem; font-size: 1rem; }
.btn--big { padding-inline: 1.7rem 1.8rem; height: 3.5rem; font-size: 1.15rem; }

.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--teal-deep);
  border-radius: 3px 3px 0 3px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background-color 180ms linear;
}
.btn:hover::before { background: var(--teal-ink); }
.btn:active::before { background: #084344; }
.on-dark .btn::before, .btn--onDark::before { box-shadow: inset 0 0 0 1px var(--teal); }
.btn .arw { display: block; transition: transform 300ms cubic-bezier(0.2,0.7,0.3,1); }
.btn:hover .arw { transform: translateX(3px); }