/* self-hosted webfonts — no third-party requests (GDPR) */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-italic-400-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: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-italic-400-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: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-italic-400-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: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-italic-400-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: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-normal-400-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: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-normal-400-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: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-normal-400-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: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-normal-400-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-grotesk-normal-500-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-grotesk-normal-500-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-grotesk-normal-500-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-grotesk-normal-500-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-normal-500-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-normal-500-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;
}

/* ============================================================
   Stubnerhof · v1 "The Quiet Side" — calm boutique, single accent
   ============================================================ */

:root {
  /* ---- palette ---- */
  --cream:        #F6F0E6;   /* page stucco */
  --paper:        #FBF7EF;   /* cards / warm paper */
  --ink:          #243027;   /* forest text */
  --ink-soft:     #3b463d;   /* secondary text */
  --gold:         #C0922E;   /* decoration ONLY — hairlines, eyebrows, dots */
  --gold-warm:    #d8b367;   /* warmer gold — eyebrows over dark / on photo */
  --ochre:        #7D6325;   /* AA-safe gold TEXT */
  --gold-fill:    #9B6C29;   /* gold button fill (white text) */
  --red:          #B83A2B;   /* single accent CTA (white text) */
  --red-deep:     #9c2f22;
  --forest:       #1B2620;   /* deep band */
  --paper-on-forest: #ece5d6;

  /* ---- spacing scale (the ONLY spacing tokens) ---- */
  --s1: .25rem;  --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --section-y: clamp(3.5rem, 7vw, 6.5rem);  /* shared vertical band rhythm */
  --gutter:    clamp(1.1rem, 4vw, 2.5rem);
  --measure:   66ch;
  --maxw:      1200px;

  /* ---- one hairline weight, one radius, one border ---- */
  --hair:   color-mix(in srgb, var(--gold) 38%, transparent);
  --hair-2: color-mix(in srgb, var(--gold) 50%, transparent); /* media frames */
  --radius: 4px;
  --border: 1px solid var(--hair);

  /* ---- modular type scale (ratio ~1.25) ---- */
  --t-step--1: .82rem;
  --t-base:    1.0625rem;
  --t-step1:   1.28rem;
  --t-step2:   1.6rem;
  --t-step3:   2rem;
  --t-step4:   2.6rem;
  --t-hero:    clamp(2.6rem, 7.5vw, 5rem);
  --t-h2:      clamp(2rem, 4.5vw, 3.1rem);
  --t-h3:      clamp(1.6rem, 3.5vw, 2.2rem);

  /* ---- one tonal grade for all editorial photos ---- */
  --photo-grade: saturate(.94) contrast(1.02);

  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Keep what the visitor lands on clear of the pinned bars. A browser scrolls a focused link, or
   the target of an in-page jump like #book, flush to the viewport edge and ignores anything
   fixed or sticky on top of it — so without this a keyboard user tabs into links hidden under
   the header or, on a phone, under the booking bar (WCAG 2.2, 2.4.11 Focus Not Obscured). */
html { scroll-padding-top: 5.5rem; }
@media (max-width: 939px) { html { scroll-padding-bottom: 5.5rem; } }   /* .bookbar lives below 940px */
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, iframe { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--ff-display); font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -0.01em; }
p { margin: 0; }
/* one flow rhythm for body copy */
main p { margin: 0 0 var(--s4); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- focus ---------- */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- shared editorial photo treatment ---------- */
.intro__figure,
.room__media,
.stube__figure,
.g-item { position: relative; }
/* hover micro-interaction: image drifts up in scale inside its clipped frame */
.intro__figure,
.room__media,
.stube__figure,
.g-item,
.season__media { overflow: hidden; }
.intro__figure img,
.room__media img,
.stube__figure img,
.g-item img,
.season__media img { transition: transform .7s var(--ease); }
@media (hover: hover) {
  .intro__figure:hover img,
  .room:hover .room__media img,
  .stube__figure:hover img,
  .g-item:hover img,
  .season:hover .season__media img { transform: scale(1.045); }
}
.intro__figure img,
.room__media img,
.stube__figure img,
.g-item img,
.place__media img,
.breather__media img { filter: var(--photo-grade); }
/* warm unifying overlay so the page reads as one shoot */
.intro__figure::after,
.room__media::after,
.stube__figure::after,
.g-item::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(rgba(192,146,46,.05), rgba(27,38,32,.06));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ochre);
  letter-spacing: 0.02em;
  margin: 0 0 var(--s3);
}
.eyebrow--hero { color: var(--gold-warm); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.eyebrow--light { color: var(--gold-warm); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s6);
  font-family: var(--ff-sans); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none; border: 0; border-radius: 2px;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.btn--book { background: var(--red); color: #fff; }
.btn--book:hover { background: var(--red-deep); transform: translateY(-1px); }
.btn--hero { font-size: 1.05rem; padding: var(--s4) var(--s6); box-shadow: 0 10px 30px rgba(27,38,32,.35); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--border);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
/* sticky-header refinement: subtle shrink + shadow once the page scrolls */
.header-inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 74px;
  transition: min-height .3s var(--ease);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  box-shadow: 0 6px 24px -18px rgba(27,38,32,.55);
}
.site-header.is-stuck .header-inner { min-height: 60px; }
.site-header.is-stuck .brand__logo { height: 34px; }

/* ---- real logo wordmark ---- */
.wordmark {
  text-decoration: none; display: inline-flex; align-items: center;
  margin-right: auto; min-height: 44px;
}
/* the source PNG is a 500×500 canvas with the wordmark centred in ~34% v-padding;
   we clip to the ink region (ratio ~2.13) and recolour the white ink to forest-ink */
.brand__logo {
  display: block; height: 40px; width: auto; aspect-ratio: 354 / 166;
  object-fit: cover; /* crops the transparent top/bottom padding of the square canvas */
  filter: brightness(0) saturate(100%) invert(14%) sepia(18%)
          saturate(620%) hue-rotate(88deg) brightness(94%) contrast(90%);
  transition: height .3s var(--ease);
}
/* fallback text wordmark, only shown if the logo image fails */
.wordmark__name {
  font-family: var(--ff-display); font-weight: 500; font-size: 1.3rem;
  letter-spacing: 0.14em; color: var(--ink);
}
.wordmark__sub {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ochre); text-transform: none;
}

.primary-nav { display: none; gap: var(--s6); }
.primary-nav a {
  text-decoration: none; font-weight: 600; font-size: 0.92rem;
  color: var(--ink-soft); padding: var(--s3) 0;
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--gold); transition: width .3s var(--ease);
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after { width: 100%; }
/* current page marker (multi-page nav) */
.primary-nav a[aria-current="page"] { color: var(--ink); }
.primary-nav a[aria-current="page"]::after { width: 100%; background: var(--ochre); }

.header-end { display: flex; align-items: center; gap: var(--s4); }

.lang { display: flex; align-items: center; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.lang li { display: flex; }
.lang a {
  text-decoration: none; font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.04em; color: var(--ink-soft);
  padding: var(--s2); min-height: 44px; display: inline-flex; align-items: center;
  border-radius: 2px;
}
.lang a.is-active { color: var(--ochre); }
.lang a:not(.is-active):hover { color: var(--ink); }
.lang li:not(:last-child)::after { content: "·"; color: var(--gold); align-self: center; }

.header-cta { display: none; }

/* ---------- mobile menu (below 940px) ---------- */
.site-menu { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: auto;
  background: none; border: 0; border-radius: 2px; cursor: pointer; color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; display: block; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; left: 0; }
.nav-toggle__bars::after  { position: absolute; top: 7px; left: 0; }
.site-header.is-nav-open .nav-toggle__bars { background: transparent; }
.site-header.is-nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-nav-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 939px) {
  .header-inner { position: relative; }
  .site-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: var(--s3) var(--gutter) var(--s5);
    background: var(--cream);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 20px 40px -28px rgba(27,38,32,.55);
  }
  .site-header.is-nav-open .site-menu { display: flex; }
  .site-menu .primary-nav { display: flex; flex-direction: column; gap: 0; }
  .site-menu .primary-nav a {
    min-height: 52px; font-size: 1.05rem; padding: var(--s2) 0;
    border-bottom: 1px solid var(--hair);
  }
  .site-menu .primary-nav a::after { display: none; }
  .site-menu .header-end {
    flex-direction: column; align-items: stretch; gap: var(--s4);
    margin-top: var(--s4);
  }
  .site-menu .lang { justify-content: center; }
  .site-menu .header-cta { display: inline-flex; width: 100%; }
}

/* ============================================================
   1 · HERO
   ============================================================ */
.hero {
  /* the headline is white; without this it is white-on-cream (~1.06:1) until the
     hero image paints — on a weak cell that is the first thing a guest sees */
  background: var(--forest);
  position: relative;
  min-height: clamp(560px, 88svh, 860px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 116%; /* extra height so parallax drift never reveals an edge */
  object-fit: cover; object-position: 30% 45%; filter: var(--photo-grade);
  will-change: transform;
  transform: translate3d(0, var(--hero-shift, 0px), 0);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 92%, rgba(20,28,22,.78) 0%, rgba(20,28,22,.30) 38%, transparent 64%),
    linear-gradient(to top, var(--cream) 0%, rgba(246,240,230,.0) 26%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(var(--s7), 7vw, var(--s9)); }
.hero__lockup { max-width: 34rem; }

.hero__title {
  color: #fff;
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  margin-bottom: var(--s4);
}
.hero__lede {
  color: #f3efe6;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  max-width: 30rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  margin-bottom: var(--s6);
}

/* ============================================================
   Section rhythm + heads
   ============================================================ */
section { padding-block: var(--section-y); }

.section-head { max-width: 42rem; margin-bottom: var(--s7); }
.section-head h2 { font-size: var(--t-h2); margin-bottom: var(--s3); }
.section-head__lede { color: var(--ink-soft); font-size: 1.1rem; max-width: var(--measure); }

/* ============================================================
   2 · INTRO
   ============================================================ */
.intro__grid { display: grid; gap: var(--s6); align-items: center; }
.intro__text h2 { font-size: var(--t-h2); margin-bottom: var(--s4); }
.intro__text p { color: var(--ink-soft); max-width: var(--measure); }
.intro__sig { font-family: var(--ff-display); font-style: italic; color: var(--ink); margin-top: var(--s5); }
.intro__figure { margin: 0; }
.intro__figure img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 24px 60px -28px rgba(27,38,32,.5);
}
.intro__figure figcaption {
  font-family: var(--ff-display); font-style: italic; font-size: 0.92rem;
  color: var(--ochre); margin-top: var(--s3);
}

/* ============================================================
   3 · ROOMS (editorial list)
   ============================================================ */
.room-list { list-style: none; margin: 0; padding: 0; }
.room {
  display: grid; gap: var(--s5);
  padding-block: var(--s7);
  border-top: var(--border);
  align-items: center;
}
.room:last-child { border-bottom: var(--border); }
.room__media img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius);
}
.room__name { font-size: var(--t-h3); margin-bottom: var(--s2); }
.room__desc { color: var(--ink-soft); max-width: var(--measure); margin-bottom: var(--s4); }

/* editorial spec line — quiet kicker, no pill */
.room__spec {
  display: flex; align-items: center; gap: var(--s3); margin: 0;
  font-family: var(--ff-sans); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ochre);
}
.room__spec::before {
  content: ""; flex: none; width: 28px; height: 1px; background: var(--gold);
}

/* ============================================================
   3 · THE PLACE — full-bleed photo, dark panel overlay
   ============================================================ */
.place {
  position: relative;
  padding-block: 0;
  isolation: isolate;
  overflow: hidden;
}
.place__media { position: absolute; inset: 0; z-index: 0; }
.place__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.place__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(20,28,22,.86) 0%, rgba(20,28,22,.60) 46%, rgba(20,28,22,.14) 100%),
    linear-gradient(to top, rgba(20,28,22,.5), transparent 40%);
}
.place__inner { position: relative; z-index: 2; padding-block: var(--section-y); }
.place__panel { max-width: 40rem; color: var(--paper-on-forest); }
.place__panel h2 { color: #fff; font-size: var(--t-h2); margin-bottom: var(--s5); }
.place__panel > p { color: color-mix(in srgb, var(--paper-on-forest) 92%, #fff); }
.place__panel strong { color: #fff; font-weight: 600; }
.place__list { list-style: none; margin: var(--s5) 0; padding: 0; }
.place__list li {
  padding: var(--s3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  color: color-mix(in srgb, var(--paper-on-forest) 88%, transparent);
}
.place__lead { color: #fff; font-weight: 700; }
.place__foot {
  font-family: var(--ff-display); font-style: italic;
  color: var(--gold-warm); margin-top: var(--s5); margin-bottom: 0;
}

/* ============================================================
   5 · CTA BAND — compact, on paper
   ============================================================ */
.cta-band { background: var(--forest); color: var(--paper-on-forest); }
.cta-band__inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5);
}
.cta-band .eyebrow--light { margin-bottom: var(--s2); }
.cta-band__title { color: #fff; font-size: var(--t-h3); }

/* ============================================================
   4 · BOOK (forest band)
   ============================================================ */
.book { background: var(--forest); color: var(--paper-on-forest); }
.section-head--light h2 { color: #fff; }
.section-head--light { text-align: center; margin-inline: auto; }
.inclusions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2);
  font-family: var(--ff-display); font-style: italic; font-size: 1.15rem;
  color: var(--paper-on-forest); margin: 0;
}
.inclusions__sep { color: var(--gold); }
.book__frame {
  background: var(--paper);
  padding: var(--s3);
  border-radius: var(--radius);
  border: 1px solid var(--hair-2);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}
.book__frame iframe { display: block; border-radius: 2px; }
/* official Previo RESERVATION+ embed (loader script auto-sizes the iframe) */
.previo-reservation-form iframe { display: block; width: 100%; border: 0; border-radius: 2px; }
/* Above the frame, not below it. The iframe is hard-coded to 2000px, so a Previo
   outage used to leave the guest staring at 2000px of nothing with the escape hatch
   off-screen underneath. */
.book__fallback {
  text-align: center; margin: 0 0 var(--s4); font-size: 0.95rem;
  color: color-mix(in srgb, var(--paper-on-forest) 80%, transparent);
}
.book__fallback a { color: #e3c074; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.book__fallback a:hover { color: #fff; }

/* ============================================================
   5 · SEASONS — alternating full-width editorial rows
   ============================================================ */
.season-row { display: grid; gap: var(--s6); align-items: center; }
.season-row + .season-row {
  margin-top: var(--s8);
  padding-top: var(--s8);
  border-top: 1px solid var(--hair);
}
.season-row__media {
  position: relative; overflow: hidden; border-radius: var(--radius); margin: 0;
}
.season-row__media img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 16/10; object-fit: cover;
  filter: var(--photo-grade);
  transition: transform .7s var(--ease);
}
@media (hover: hover) {
  .season-row__media:hover img { transform: scale(1.045); }
}
.season-row__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(192,146,46,.05), rgba(27,38,32,.10));
  mix-blend-mode: multiply;
}
.season-row__body { max-width: 34rem; }
.season__title {
  font-size: var(--t-h3); margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--gold);
  display: inline-block; align-self: flex-start;
}
.season__intro {
  color: var(--ink-soft); font-family: var(--ff-display);
  font-style: italic; font-size: 1.08rem;
  margin: 0 0 var(--s4); max-width: 36ch;
}
.season__list { list-style: none; margin: 0; padding: 0; }
.season__list li {
  padding: var(--s3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink-soft);
}
.season__list li:last-child { border-bottom: 0; }
.season__lead { color: var(--ink); font-weight: 700; }

/* ============================================================
   6 · STUBE
   ============================================================ */
.stube__grid { display: grid; gap: var(--s6); align-items: center; }
.stube__figure { margin: 0; }
.stube__figure img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 24px 60px -28px rgba(27,38,32,.5);
}
.stube__text h2 { font-size: var(--t-h2); margin-bottom: var(--s4); }
.stube__text p { color: var(--ink-soft); max-width: var(--measure); }

/* ============================================================
   8 · BREATHER — single full-bleed image + one line
   ============================================================ */
.breather {
  position: relative;
  min-height: clamp(340px, 52vh, 560px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-block: 0;
}
.breather__media { position: absolute; inset: 0; z-index: 0; }
.breather__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.breather__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(20,28,22,.82) 0%, rgba(20,28,22,.28) 44%, rgba(20,28,22,.08) 100%);
}
.breather__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.breather__line {
  color: #fff; max-width: 22ch;
  font-size: var(--t-h2);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

/* ============================================================
   9 · GALLERY — explicit editorial composition (grid-template-areas;
   every tile has a named slot at every breakpoint — nothing can dangle)
   ============================================================ */
.gallery__grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.g-item { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.g-item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3/2; border-radius: var(--radius);
}
.g-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s5) var(--s4) var(--s3);
  font-family: var(--ff-display); font-style: italic; font-size: 0.9rem;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6);
  background: linear-gradient(transparent, rgba(20,28,22,.55));
  pointer-events: none;
}
@media (min-width: 640px) {
  .g-facade { grid-area: facade; }
  .g-valley { grid-area: valley; }
  .g-cascade { grid-area: cascade; }
  .g-mist { grid-area: mist; }
  .g-peak { grid-area: peak; }
  .g-buffet { grid-area: buffet; }
  .g-winter { grid-area: winter; }
}
@media (min-width: 640px) {
  .q-lead { grid-area: lead; }
  .q-second { grid-area: second; }
  .q-c { grid-area: c; }
  .q-d { grid-area: d; }
}
@media (min-width: 640px) and (max-width: 979px) {
  .gallery__grid {
    gap: var(--s5);
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 230px;
    grid-template-areas:
      "facade facade"
      "valley cascade"
      "mist   winter"
      "peak   peak"
      "buffet buffet";
  }
  .gallery__grid--quad {
    grid-template-areas:
      "lead   lead"
      "second second"
      "c      d";
  }
  .g-item img { aspect-ratio: auto; }
}
@media (min-width: 980px) {
  .gallery__grid {
    gap: var(--s5);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 240px);
    grid-template-areas:
      "facade facade valley  valley"
      "facade facade cascade mist"
      "winter buffet peak    peak";
  }
  .gallery__grid--quad {
    grid-template-rows: repeat(2, 240px);
    grid-template-areas:
      "lead lead second second"
      "lead lead c      d";
  }
  .g-item img { aspect-ratio: auto; }
}

/* ============================================================
   7 · FIND
   ============================================================ */
.find { background: var(--paper); }
.find__grid { display: grid; gap: var(--s6); align-items: stretch; }
.find__text h2 { font-size: var(--t-h3); margin-bottom: var(--s4); }
.find__text p { color: var(--ink-soft); max-width: var(--measure); }
.find__hours { margin: var(--s5) 0; display: grid; gap: var(--s4); }
.find__hours dt {
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ochre); margin-bottom: var(--s1);
}
.find__hours dd { margin: 0; color: var(--ink); }
.link-more {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--ochre); text-decoration: none;
  border-bottom: 2px solid var(--gold);
}
.link-more:hover { color: var(--ink); }
/* two of these now sit side by side under the address (larger map · route) */
.link-more + .link-more { margin-left: var(--s5); }
.find__map {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hair-2);
  min-height: 320px;
  box-shadow: 0 24px 60px -32px rgba(27,38,32,.45);
}
.find__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ============================================================
   8 · TRUST
   ============================================================ */
.trust { background: var(--forest); color: var(--paper-on-forest); }
.trust__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6);
}
.trust__list li { text-align: center; }
.trust__big {
  display: block; font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-step4); color: #fff; line-height: 1;
  margin-bottom: var(--s2);
}
.trust__cap {
  display: block; font-size: 0.92rem;
  color: color-mix(in srgb, var(--paper-on-forest) 85%, transparent);
}

/* ============================================================
   BAD GASTEIN page — activity areas, tiles, events
   (page-specific; guarded by these classes)
   ============================================================ */
.events__figure,
.area__lead { position: relative; overflow: hidden; }
.events__figure img,
.area__lead > img { transition: transform .7s var(--ease); filter: var(--photo-grade); }
@media (hover: hover) {
  .events__figure:hover img,
  .area__lead:hover > img { transform: scale(1.045); }
}
.events__figure::after,
.area__lead::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: var(--radius);
  background: linear-gradient(rgba(192,146,46,.05), rgba(27,38,32,.06));
  mix-blend-mode: multiply; pointer-events: none;
}

/* full-width lead image at the top of an activity area */
.area__lead { margin-bottom: var(--s7); }
.area__lead > img {
  width: 100%; aspect-ratio: 5/2; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 24px 60px -32px rgba(27,38,32,.45);
}
.area__lead-cap {
  position: relative; z-index: 2;
  font-family: var(--ff-display); font-style: italic; font-size: 0.92rem;
  color: var(--ochre); margin: var(--s3) 0 0;
}

/* activity tile grid */
.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s6); grid-template-columns: 1fr;
}
.tile {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -34px rgba(27,38,32,.45);
}
.tile__media { position: relative; overflow: hidden; }
.tile__media img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  filter: var(--photo-grade);
  transition: transform .7s var(--ease);
}
.tile__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(192,146,46,.05), rgba(27,38,32,.10));
  mix-blend-mode: multiply;
}
@media (hover: hover) { .tile:hover .tile__media img { transform: scale(1.045); } }
.tile__body { padding: var(--s5) var(--s5) var(--s6); display: flex; flex-direction: column; flex: 1; }
.tile__title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-step2); line-height: 1.1;
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--gold);
  align-self: flex-start;
}
.tile__body p { color: var(--ink-soft); margin: 0; }

/* events note — image + text */
.events__grid { display: grid; gap: var(--s6); align-items: center; }
.events__figure { margin: 0; }
.events__figure img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 24px 60px -30px rgba(27,38,32,.5);
}
.events__text h2 { font-size: var(--t-h2); margin-bottom: var(--s4); }
.events__text p { color: var(--ink-soft); max-width: var(--measure); }
.events__text strong { color: var(--ink); font-weight: 700; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--cream); padding-block: var(--section-y); border-top: var(--border); }
.footer-grid { display: grid; gap: var(--s6); }
.footer-logo { display: inline-flex; margin-bottom: var(--s4); min-height: 44px; align-items: center; }
.brand__logo--footer { height: 50px; }
.site-footer .brand__logo--footer { transition: none; }
.footer-tag { color: var(--ink-soft); max-width: 22rem; margin-bottom: var(--s5); }
.footer-col__title { font-family: var(--ff-sans); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ochre); margin: 0 0 var(--s4); }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer-contact a {
  text-decoration: none; color: var(--ink); font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer-contact a:hover { color: var(--ochre); text-decoration: underline; text-underline-offset: 3px; }
.footer-address { font-style: normal; color: var(--ink-soft); line-height: 1.7; margin-bottom: var(--s4); }
.lang--footer a { padding-left: 0; padding-right: var(--s2); }
.footer-base {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between;
  padding-block: var(--s5); margin-top: var(--s5);
  border-top: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  font-size: 0.85rem; color: var(--ink-soft);
}
.footer-base p { margin: 0; }

/* ============================================================
   SUBPAGE · PAGE HERO (shorter than the home hero; one h1)
   ============================================================ */
.page-hero {
  position: relative;
  min-height: clamp(360px, 56svh, 560px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-block: 0;
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 66% 42%;
  filter: var(--photo-grade);
}
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 92% at 10% 94%, rgba(20,28,22,.80) 0%, rgba(20,28,22,.32) 40%, transparent 66%),
    linear-gradient(to top, var(--cream) 0%, rgba(246,240,230,.0) 30%);
}
.page-hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(var(--s7), 6vw, var(--s9));
}
.page-hero__lockup { max-width: 36rem; }
.page-hero__title {
  color: #fff; font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.04; letter-spacing: -0.015em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  margin-bottom: var(--s4);
}
.page-hero__lede {
  color: #f3efe6;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  max-width: 32rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  margin: 0;
}

/* ============================================================
   SUBPAGE · CONTACT block
   ============================================================ */
.contact-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
.contact-card {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--s6);
  box-shadow: 0 24px 60px -36px rgba(27,38,32,.4);
  display: flex; flex-direction: column;
}
.contact-card__title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--t-step2);
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 2px solid var(--gold);
  align-self: flex-start;
}
.contact-list { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s4); }
.contact-list li { display: flex; flex-direction: column; gap: var(--s1); }
.contact-list__label {
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ochre);
}
.contact-list a {
  font-family: var(--ff-display); font-size: var(--t-step1);
  color: var(--ink); text-decoration: none;
  align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.contact-list a:hover { color: var(--ochre); border-bottom-color: var(--gold); }
.contact-address {
  font-style: normal; font-family: var(--ff-display); font-size: var(--t-step1);
  line-height: 1.5; color: var(--ink); margin: 0 0 var(--s4);
}
.contact-card__note {
  margin: auto 0 0; color: var(--ink-soft); font-size: 0.95rem;
  padding-top: var(--s4);
}

/* ============================================================
   SUBPAGE · HOURS
   ============================================================ */
.hours { background: var(--paper); }
.hours-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
.hours-item {
  padding: var(--s6);
  background: var(--cream);
  border: var(--border);
  border-radius: var(--radius);
}
.hours-item dt {
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ochre); margin-bottom: var(--s3);
}
.hours-item dd {
  margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55;
}
.hours-item dd strong { color: var(--ink); font-weight: 700; }
.hours-note {
  margin: var(--s6) 0 0; color: var(--ink-soft);
  font-family: var(--ff-display); font-style: italic;
  max-width: var(--measure);
}

/* ============================================================
   ACCOMMODATION PAGE — intro note, room types, inclusions strip
   ============================================================ */
.sub-intro { background: var(--paper); }
.sub-intro__grid { display: grid; gap: var(--s5); }
.sub-intro__lead h2 { font-size: var(--t-h2); max-width: 16ch; }
.sub-intro__body p { color: var(--ink-soft); max-width: var(--measure); }
.sub-intro__hint { font-size: 0.95rem; color: var(--ink-soft); }
.sub-intro__hint a {
  color: var(--ochre); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--hair-2); white-space: nowrap;
}
.sub-intro__hint a:hover { color: var(--ink); }

/* room types — editorial, alternating background + photo side */
.room-types > .rt:nth-child(even) { background: var(--paper); }
.rt__grid { display: grid; gap: var(--s6); align-items: center; }
.rt__body h2 { font-size: var(--t-h3); }
.rt__name { margin-bottom: var(--s4); }
.rt__desc { color: var(--ink-soft); max-width: var(--measure); margin-bottom: var(--s5); }
.rt__specs {
  list-style: none; margin: 0 0 var(--s6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
}
.rt__specs li {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--ff-sans); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ochre);
}
.rt__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.rt__cta { align-self: flex-start; }

/* small per-room gallery: one wide shot + two beneath */
.rt__gallery { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
/* two-up only once there is room for it; below this a room photo was ~164px wide,
   which is not enough to choose a room from */
@media (min-width: 560px) { .rt__gallery { grid-template-columns: 1fr 1fr; } }
.rt__shot { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.rt__shot img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
  filter: var(--photo-grade); transition: transform .7s var(--ease);
}
.rt__shot--main { grid-column: 1 / -1; }
.rt__shot--main img { aspect-ratio: 3/2; }
/* two-shot gallery: the single detail shot spans the full width under the main */
.rt__gallery--four .rt__shot--main { grid-column: 1 / -1; }
.rt__gallery--pair .rt__shot:not(.rt__shot--main) { grid-column: 1 / -1; }
.rt__gallery--pair .rt__shot:not(.rt__shot--main) img { aspect-ratio: 16/7; }
.rt__shot::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(rgba(192,146,46,.05), rgba(27,38,32,.06));
  mix-blend-mode: multiply; pointer-events: none;
}
@media (hover: hover) { .rt__shot:hover img { transform: scale(1.045); } }

/* inclusions strip — forest band */
.incl-strip { background: var(--forest); color: var(--paper-on-forest); }
.incl-strip__title { color: #fff; font-size: var(--t-h3); margin-bottom: var(--s7); max-width: 20ch; }
.incl-strip__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.incl-strip__list li {
  color: color-mix(in srgb, var(--paper-on-forest) 88%, transparent);
  padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.incl-strip__lead {
  display: block; font-family: var(--ff-display); font-size: 1.3rem;
  color: #fff; margin-bottom: var(--s2); line-height: 1.15;
}
@media (min-width: 700px) {
  .sub-intro__grid { grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
  .rt__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s7); }
  .rt--alt .rt__gallery { order: 2; }
  .incl-strip__list { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 700px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  /* auto-fit, not a fixed pair: the contact page gained a third card (parking) and a hard
     two-column rule left it stranded alone on a second row. */
  .hours-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .events__grid { grid-template-columns: 0.95fr 1.05fr; }
  .events__grid .events__figure { order: 2; }
  .room { grid-template-columns: 0.9fr 1.1fr; gap: var(--s6); }
  .room:nth-child(even) .room__media { order: 2; }
  .season-row { grid-template-columns: 1.15fr 0.85fr; gap: clamp(var(--s6), 4vw, var(--s8)); }
  .season-row--flip .season-row__media { order: 2; }
  /* auto-fit, not a fixed four: the Czech version carries a fifth item ("Česky" — the
     hotel is in Czech hands), and a hard four left it stranded alone on a second row. */
  .trust__list { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .intro__grid { grid-template-columns: 1.05fr 0.95fr; }
  .stube__grid { grid-template-columns: 1.1fr 0.9fr; }
  .find__grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .cta-band__inner {
    flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s6);
  }
}

@media (min-width: 940px) {
  .primary-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .hero__media img { object-position: 62% 40%; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   SIGNATURE MOTION — "settle" reveal
   - DISPLAY HEADINGS (.reveal--head): tracking-collapse settle (earned typesetting)
   - body / figures / rooms: quiet opacity + translateY only
   - trust set (.reveal--stagger): staggered entry
   ============================================================ */
/* Scoped to .js — set by a one-line inline script in <head>.
   Without this scoping the hidden state is unconditional, and the only thing that
   ever removes it is script.js, which loads AFTER a third-party booking script. If
   that vendor were slow or down, or JS failed at all, the h1 and the "Check
   availability" button would stay invisible. Now no-JS means everything is simply
   visible, and the animation is what depends on JS — not the content. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* the singular signature: only display headings collapse their tracking */
.reveal--head .eyebrow,
.reveal--head h1,
.reveal--head h2 {
  letter-spacing: 0.06em;
  transition: letter-spacing .7s var(--ease);
}
.reveal--head.is-in .eyebrow { letter-spacing: 0.02em; }
.reveal--head.is-in h1 { letter-spacing: -0.015em; }
.reveal--head.is-in h2 { letter-spacing: -0.01em; }

/* trust items stagger on entry */
.reveal--stagger { transition-delay: var(--stagger, 0s); }

/* soft clip/mask reveal for editorial figures — the image wipes open + settles.
   Applied to the FRAME (overflow:hidden already set above). */
.js .reveal--mask img {
  clip-path: inset(0 0 22% 0);
  transform: scale(1.06);
  transition: clip-path .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.js .reveal--mask.is-in img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* count-up numbers hold their box so the layout never jumps as digits change */
.trust__big { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal--head .eyebrow { letter-spacing: 0.02em !important; transition: none !important; }
  .reveal--head h1 { letter-spacing: -0.015em !important; transition: none !important; }
  .reveal--head h2 { letter-spacing: -0.01em !important; transition: none !important; }
  .btn, .primary-nav a::after { transition: none !important; }
  /* new moderate effects — fully disabled */
  .reveal--mask img {
    clip-path: none !important; transform: none !important; transition: none !important;
  }
  .hero__media img { transform: none !important; height: 100% !important; will-change: auto !important; }
  .intro__figure img, .room__media img, .stube__figure img,
  .g-item img, .season__media img { transition: none !important; }
  .intro__figure:hover img, .room:hover .room__media img, .stube__figure:hover img,
  .g-item:hover img, .season:hover .season__media img { transform: none !important; }
  /* bad-gastein page tiles / leads / events */
  .tile__media img, .area__lead > img, .events__figure img { transition: none !important; }
  .tile:hover .tile__media img,
  .area__lead:hover > img,
  .events__figure:hover img { transform: none !important; }
  .site-header, .header-inner, .brand__logo { transition: none !important; }
}

/* ---------- footer page links (always available, incl. mobile) ---------- */
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0 0 var(--s5); }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ochre); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; border-bottom: 1px solid transparent;
}
.footer-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- legal links in the footer base row ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ochre); font-size: 0.86rem; text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-legal a:hover { color: var(--ink); }

/* ---------- skip to content (visible on keyboard focus) ---------- */
.skip-link {
  position: fixed; left: var(--s4); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--s2) var(--s5);
  background: var(--red); color: #fff; font-weight: 700; text-decoration: none;
  border-radius: 2px; transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s3); }
main:focus { outline: none; }

/* ============================================================
   GOOD TO KNOW — the practical facts block
   ============================================================ */
.facts { background: var(--paper); }
.facts__grid { display: grid; gap: 0; margin: 0; }
.fact {
  display: grid; gap: var(--s1);
  padding: var(--s5) 0;
  border-top: 1px solid var(--hair);
}
.fact:last-child { border-bottom: 1px solid var(--hair); }
.fact dt {
  font-family: var(--ff-sans); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ochre);
}
.fact dd { margin: 0; color: var(--ink-soft); max-width: var(--measure); }
.fact dd strong { color: var(--ink); font-weight: 600; }
@media (min-width: 700px) {
  .facts__grid { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .fact { grid-template-columns: 8.5rem 1fr; gap: var(--s2) var(--s5); align-items: baseline; }
  .fact dt { padding-top: 0.15rem; }
}
@media (min-width: 1040px) { .facts__grid { grid-template-columns: 1fr 1fr; } }


/* ==========================================================================
   NEWS — index, post, video facade
   Built from the existing tokens only. No new fonts, no new colours.
   ========================================================================== */

.section-head h1 { font-size: var(--t-h2); margin-bottom: var(--s3); }

/* ---------- index ---------- */

.news-index { padding-block: var(--section-y); }

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s7);
}

.news-card__link {
  display: grid;
  gap: var(--s4);
  color: inherit;
  text-decoration: none;
}

.news-card__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--paper);
}

.news-card__img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--photo-grade);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.news-card__link:hover .news-card__img { transform: scale(1.03); }

.news-card__date {
  font-size: var(--t-step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: var(--s2);
}

.news-card__title {
  font-size: var(--t-step2);
  line-height: 1.15;
  margin-bottom: var(--s3);
  text-wrap: balance;
}

.news-card__link:hover .news-card__title { color: var(--ochre); }

.news-card__lede {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.news-empty { color: var(--ink-soft); font-size: 1.1rem; }

/* The newest post is the lead story: bigger, and set beside its photo.
   Everything after it sits in a calmer two-column grid. */
@media (min-width: 940px) {
  .news-list { grid-template-columns: 1fr 1fr; column-gap: var(--s7); }

  /* The lead story spans the grid and sits beside its photo. A trailing card left
     alone in its row does the same, so the layout never ends on a half-empty row. */
  .news-card:first-child,
  .news-card:last-child:nth-child(even) { grid-column: 1 / -1; }

  .news-card:first-child .news-card__link,
  .news-card:last-child:nth-child(even) .news-card__link {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: var(--s8);
  }
  .news-card:first-child .news-card__title { font-size: var(--t-step3); }
  .news-card:first-child .news-card__lede { font-size: 1.1rem; }
}

/* ---------- post ---------- */

.post__head { padding-block: var(--section-y) var(--s6); }
.post__head-inner { max-width: 46rem; }

.post__title {
  font-size: var(--t-h2);
  line-height: 1.06;
  margin-block: var(--s3) var(--s4);
  text-wrap: balance;
}

.post__lede {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.post__meta {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: var(--border);
  font-size: var(--t-step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ochre);
}

.post__cover { margin: 0 0 var(--section-y); }
.post__cover-img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--photo-grade);
}

.post__body { max-width: 44rem; padding-bottom: var(--s8); }
.post__body > * + * { margin-top: var(--s5); }
.post__body p { max-width: var(--measure); }

.post__body h2 {
  font-size: var(--t-h3);
  line-height: 1.15;
  margin-top: var(--s8);
  text-wrap: balance;
}

.post__body h3 {
  font-size: var(--t-step2);
  margin-top: var(--s7);
}

.post__body a {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post__body a:hover { color: var(--ink); }

.post__list { padding-left: 1.2em; max-width: var(--measure); }
.post__list li + li { margin-top: var(--s2); }
.post__list::marker, .post__list li::marker { color: var(--gold); }

.post__body blockquote {
  margin-inline: 0;
  padding-left: var(--s5);
  border-left: 2px solid var(--hair-2);
  font-family: var(--ff-display);
  font-size: var(--t-step1);
  line-height: 1.4;
  color: var(--ink);
}

.post__figure { margin: var(--s7) 0; }
.post__figure-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  filter: var(--photo-grade);
}
.post__figure figcaption {
  margin-top: var(--s3);
  font-size: var(--t-step--1);
  color: var(--ink-soft);
}

.post__foot { border-top: var(--border); padding-block: var(--s7) var(--s9); }
.post__foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
}
.post__back {
  color: var(--ochre);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.post__back:hover { color: var(--ink); }

/* ---------- YouTube facade ----------
   Nothing is requested from youtube.com until the visitor clicks. That is what
   keeps the site free of third-party requests — and free of a cookie banner. */

.post__video { margin: var(--s7) 0; }

.video-facade {
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: 100%;
  padding: var(--s6);
  text-align: left;
  color: var(--paper-on-forest);
  background: var(--forest);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  transition: background .3s ease;
}
.video-facade:hover { background: #223027; }

.video-facade__play {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--red);
  position: relative;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.video-facade__play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .6rem 0 .6rem 1rem;
  border-color: transparent transparent transparent #fff;
}
.video-facade:hover .video-facade__play { transform: scale(1.08); }

.video-facade__text { display: grid; gap: var(--s1); }
.video-facade__title { font-family: var(--ff-display); font-size: var(--t-step1); line-height: 1.2; }
.video-facade__note {
  font-size: var(--t-step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-warm);
}

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--forest);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .news-card__img, .video-facade__play, .video-facade { transition: none; }
  .news-card__link:hover .news-card__img { transform: none; }
  .video-facade:hover .video-facade__play { transform: none; }
}

/* ---------- homepage teaser ---------- */

.news-teaser { padding-block: var(--section-y); background: var(--paper); }
.news-teaser__more { margin-top: var(--s6); }
.news-teaser__more a {
  color: var(--ochre);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.news-teaser__more a:hover { color: var(--ink); }

.news-list--teaser .news-card__title { font-size: var(--t-step1); }

/* the teaser is an even pair — the lead-story rule from the index must not apply */
@media (min-width: 940px) {
  .news-list--teaser .news-card:first-child,
  .news-list--teaser .news-card:last-child:nth-child(even) { grid-column: auto; }
  .news-list--teaser .news-card:first-child .news-card__link,
  .news-list--teaser .news-card:last-child:nth-child(even) .news-card__link {
    grid-template-columns: none;
    gap: var(--s4);
  }
  .news-list--teaser .news-card:first-child .news-card__title { font-size: var(--t-step1); }
}

/* ==========================================================================
   LEGAL PAGES — privacy notice, Impressum
   ========================================================================== */

.legal-page { padding-block: var(--section-y); }
.legal-body { max-width: 44rem; }
.legal-body > * + * { margin-top: var(--s4); }
.legal-body h2 {
  font-size: var(--t-step2);
  line-height: 1.2;
  margin-top: var(--s8);
  text-wrap: balance;
}
.legal-body p { max-width: var(--measure); }
.legal-body .lede { font-size: 1.15rem; color: var(--ink-soft); }
.legal-body a {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--ink); }

.legal-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1) 0;
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: var(--border);
}
.legal-dl dt {
  font-size: var(--t-step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ochre);
}
.legal-dl dd { margin: 0 0 var(--s4); }

@media (min-width: 640px) {
  .legal-dl { grid-template-columns: 16rem 1fr; gap: var(--s3) var(--s5); align-items: baseline; }
  .legal-dl dd { margin-bottom: 0; }
}

.legal-updated {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: var(--border);
  font-size: var(--t-step--1);
  color: var(--ink-soft);
}

/* ==========================================================================
   STICKY BOOKING BAR — phones only
   The one conversion used to be unreachable on a phone: .header-cta is hidden
   below 940px and only reappears inside the opened hamburger, while the Previo
   form sits ~13 sections down. 60%+ of hotel traffic is mobile and mobile
   conversion is the weakest of any surface, so this is the single highest-leverage
   element on the site.

   Visible by DEFAULT and hidden by JS only while the hero CTA is on screen — so a
   JS failure leaves a working booking path rather than removing one.
   ========================================================================== */

.bookbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: var(--border);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.bookbar__btn { width: 100%; }

/* hidden while the hero's own CTA is doing the job */
.bookbar.is-tucked { transform: translateY(110%); }

/* the bar covers the last of the page, so give the footer room to clear it */
@media (max-width: 939px) {
  body { padding-bottom: 5.5rem; }
}

/* desktop has a permanent CTA in the header — the bar would be noise */
@media (min-width: 940px) {
  .bookbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bookbar { transition: none; }
}

/* ==========================================================================
   CONSENT BAR
   Only ever rendered when a GTM container is configured — see lib/analytics.mjs.
   A region pinned to the bottom, not a modal over the hero: the photograph is this
   hotel's first impression and a scrim over it costs more than the measurement is worth.
   ========================================================================== */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;                      /* above .bookbar (40), which is hidden while this is up */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  background: var(--forest);
  color: var(--paper-on-forest);
  border-top: 2px solid var(--gold);
}
.consent__text {
  margin: 0; flex: 1 1 22rem; min-width: 0;
  font-size: 0.95rem; line-height: 1.5;
}
.consent__text a {
  color: #e3c074; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.consent__text a:hover { color: #fff; }

.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); flex: 0 0 auto; margin-left: auto; }
.consent__btn { min-height: 48px; padding: var(--s3) var(--s5); font-size: 0.95rem; }
/* the base .btn sets display, which would beat the hidden attribute */
.consent [hidden] { display: none !important; }
.consent :focus-visible { outline-color: #e3c074; }

/* Reject all and Accept all look the same on purpose. Refusing has to be as easy as agreeing —
   a red "accept everything" next to a faint "no" is the dark pattern regulators actually fine.
   Same size, same colour, both real buttons on the first layer. */
.consent__btn--choice { background: var(--paper-on-forest); color: var(--forest); }
.consent__btn--choice:hover { background: #fff; }
.consent__btn--quiet {
  background: transparent; color: var(--paper-on-forest);
  border: 2px solid color-mix(in srgb, var(--paper-on-forest) 55%, transparent);
}
.consent__btn--quiet:hover { border-color: var(--paper-on-forest); background: rgba(255,255,255,.06); }

/* the categories: a plain list, opened by Settings or by the footer's Cookie settings link */
.consent__cats {
  flex: 1 1 100%; order: 2;
  margin: 0; padding: var(--s3) 0 0; border: 0;
  border-top: 1px solid color-mix(in srgb, var(--paper-on-forest) 25%, transparent);
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.consent__actions { order: 3; }
.consent__cat {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); align-items: start;
}
.consent__box {
  width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0;
  accent-color: var(--gold); cursor: pointer;
}
.consent__box:disabled { cursor: default; opacity: .75; }
.consent__cat-name { font-weight: 700; cursor: pointer; padding-block: 0.1rem; }
.consent__box:disabled + .consent__cat-name { cursor: default; }
.consent__always { font-weight: 400; opacity: .8; }
.consent__cat-desc {
  grid-column: 2; margin: 0.15rem 0 0;
  font-size: 0.875rem; line-height: 1.45;
  color: color-mix(in srgb, var(--paper-on-forest) 85%, transparent);
}

/* two bars stacked at the bottom of a phone is one bar too many */
.consent-open .bookbar { display: none; }

/* With the categories open the bar can outgrow a short phone screen; it scrolls inside
   rather than pushing its buttons off the bottom. */
.consent { max-height: 100dvh; overflow-y: auto; }

@media (max-width: 560px) {
  /* Settings across the top, the two equal choices side by side under it, nearest the thumb.
     Same order as the markup, so the tab order matches what the eye sees. */
  .consent__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .consent__btn--quiet { grid-column: 1 / -1; }
  .consent__btn { padding-inline: var(--s3); }
}

/* ==========================================================================
   FAQ (contact page)
   Questions phrased the way a guest types them — and the way an assistant is asked on the
   guest's behalf. The answers repeat facts stated elsewhere on the site, never new ones.
   ========================================================================== */
.faq { background: var(--paper); }
.faq__list { margin: 0; max-width: 52rem; }
.faq__item { padding: var(--s5) 0; border-top: 1px solid var(--hair); }
.faq__item:last-child { border-bottom: 1px solid var(--hair); }
.faq__item dt { font-family: var(--ff-display); font-size: 1.15rem; line-height: 1.35; color: var(--ink); margin-bottom: var(--s2); }
.faq__item dd { margin: 0; color: var(--ink-soft); max-width: var(--measure); }