/* =========================================================================
   Villa Johannes - pages.css
   Hero and content-specific section compositions. Each major section has its
   own layout; they share the tokens/components so they stay one design system.
   ========================================================================= */

/* Generic action row (a wrapping flex row of a button + a link).
   Retained from the old hero for the 404 page, which reuses .hero__actions. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}

/* #########################################################################
   HOMEPAGE
   Editorial, photography-led composition. Each section owns its layout but
   shares the global tokens/components. All classes are prefixed `hm-` so they
   never collide with the shared section styles further down this file.
   ######################################################################### */

/* ---- Shared homepage typographic helpers ---- */
.hm-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: var(--sp-5);
}
.hm-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--text);
  margin: 0 0 var(--sp-5);
}
/* Fine burgundy rule under a heading, as in the reference. */
.hm-rule {
  width: 56px;
  height: 2px;
  background: var(--wine);
  border: 0;
  margin: 0 0 var(--sp-6);
}

/* =========================================================================
   1. HERO - cream editorial composition on the garden photograph.

   Six elements in one column: eyebrow, two-line display heading, photograph
   with an inset rule and its caption, copy, outlined action and the Hotel &
   Bistro seal. The phone layout is the approved design; the wider breakpoints
   re-flow those same six elements rather than introducing a second idea.

   Everything sits on the shared page gutter from `.container`, so the hero
   lines up with every section below it. Only the caption and the inset rule
   are positioned, and both are inside the photograph's own frame.
   ========================================================================= */
.hm-hero {
  background: var(--bg);
  /* Compact under the fixed green bar - the bar's own offset is applied to
     <main> in layout.css, so there is no seam and no white strip. */
  padding-top: clamp(1.35rem, 5vw, 2.25rem);
  padding-bottom: clamp(2.5rem, 9vw, 4rem);
}
.hm-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Location eyebrow ---- */
.hm-hero__eyebrow {
  margin: 0 0 clamp(0.7rem, 3vw, 1.15rem);
  font-family: var(--font-body);
  font-size: clamp(0.625rem, 0.56rem + 0.24vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wine);
}

/* ---- Two-line display heading ---- */
.hm-hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  /* Fills the text column at every phone width without reaching the gutter.
     Tuned by measuring the longest line ("Viel Raum für") in the serif stack:
     it stays between 84% and 92% of the column from 320px to 430px. */
  font-size: clamp(2.5rem, 12.4vw, 3.5rem);
  line-height: 1.01;
  letter-spacing: -0.02em;
  color: var(--forest);
}
.hm-hero__line {
  display: block;
}
.hm-hero__line--accent {
  font-style: italic;
  color: var(--wine);
}

/* ---- Garden photograph ---- */
.hm-hero__figure {
  position: relative;
  /* Negates exactly the container gutter, so the frame reaches the screen
     edge on the trailing side only and the leading edge stays on the text
     grid line. */
  margin: clamp(1.5rem, 5.5vw, 2.1rem) calc(var(--gutter) * -1) 0 0;
  aspect-ratio: 15 / 8;
  overflow: hidden;
  background: var(--surface-alt);
}
.hm-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Holds the lawn, the fire circle and the house on the skyline; trims the
     empty sky that makes the property look small on a narrow screen. */
  object-position: 50% 64%;
}
/* The thin cream rule set inside the frame. */
.hm-hero__figure::after {
  content: "";
  position: absolute;
  inset: clamp(0.6rem, 2.6vw, 1rem);
  border: 1px solid rgba(244, 241, 235, 0.55);
  pointer-events: none;
}
.hm-hero__caption {
  position: absolute;
  right: clamp(1.5rem, 5.6vw, 2.1rem);
  bottom: clamp(1.05rem, 3.9vw, 1.55rem);
  font-family: var(--font-body);
  font-size: clamp(0.5625rem, 0.52rem + 0.18vw, 0.6875rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 235, 0.96);
  text-shadow: 0 1px 10px rgba(20, 30, 22, 0.55);
}

/* ---- Supporting copy ---- */
.hm-hero__text {
  margin: clamp(1.15rem, 4.6vw, 1.7rem) 0 0;
  max-width: 34ch;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.55;
  color: var(--text-soft);
}

/* ---- Action row: outlined link, then the seal ---- */
.hm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.85rem, 4vw, 1.5rem);
  margin-top: clamp(1.4rem, 5.5vw, 2rem);
}
.hm-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 48px;
  padding: 0 clamp(1.05rem, 4vw, 1.5rem);
  font-family: var(--font-body);
  font-size: clamp(0.6875rem, 0.65rem + 0.18vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  border: 1px solid var(--forest);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.hm-hero__cta-arrow {
  transition: transform 0.25s var(--ease);
}
.hm-hero__cta:hover,
.hm-hero__cta:focus-visible {
  background: var(--forest);
  color: var(--on-dark);
}
.hm-hero__cta:hover .hm-hero__cta-arrow,
.hm-hero__cta:focus-visible .hm-hero__cta-arrow {
  transform: translateX(4px);
}

/* ---- Hotel & Bistro seal ---- */
.hm-hero__seal {
  flex: none;
  display: grid;
  justify-items: center;
  align-content: center;
  /* The floor keeps the seal beside the action on a 320px screen instead of
     wrapping below it; from 360px up the vw term takes over. */
  width: clamp(4.75rem, 21vw, 6.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--forest);
  color: var(--on-dark-soft);
  font-family: var(--font-body);
  font-size: clamp(0.5rem, 0.46rem + 0.18vw, 0.625rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.hm-hero__seal-amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2em;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-dark);
}

/* ---- Tablet (768-1099): the same order, widened. Eyebrow and heading run
   full width over a wide frame, then the copy and the action sit side by side
   in one controlled row rather than continuing to stack. ---- */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .hm-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .hm-hero__eyebrow,
  .hm-hero__title,
  .hm-hero__figure {
    grid-column: 1 / -1;
  }
  .hm-hero__title {
    font-size: clamp(3.25rem, 7vw, 4.5rem);
  }
  .hm-hero__figure {
    aspect-ratio: 2 / 1;
  }
  .hm-hero__text {
    grid-column: 1;
    align-self: center;
    max-width: 46ch;
  }
  .hm-hero__actions {
    grid-column: 2;
    align-self: center;
  }
}

/* ---- Desktop (1100+): asymmetric editorial grid, copy left, photograph
   right. The two 1fr spacer rows centre the text block against the taller
   frame, so the pair reads as one composition without any fixed heights. ---- */
@media (min-width: 1100px) {
  .hm-hero {
    padding-top: clamp(2.25rem, 3.4vw, 3.75rem);
    padding-bottom: clamp(3rem, 5.5vw, 5.5rem);
  }
  .hm-hero__inner {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    /* One spacer above the copy and one below, with the four content rows
       between them. The top spacer is the lighter of the two, so the block
       settles just above the optical centre of the photograph instead of
       leaving a large empty band under the navbar. */
    grid-template-rows: 0.55fr auto auto auto auto 1fr;
    column-gap: clamp(2.5rem, 4.5vw, 5.5rem);
  }
  .hm-hero__eyebrow {
    grid-column: 1;
    grid-row: 2;
  }
  .hm-hero__title {
    grid-column: 1;
    grid-row: 3;
    /* Large enough to anchor a laptop screen, short of billboard scale. */
    font-size: clamp(3.5rem, 4.4vw, 4.75rem);
  }
  .hm-hero__text {
    grid-column: 1;
    grid-row: 4;
    max-width: 32ch;
  }
  .hm-hero__actions {
    grid-column: 1;
    grid-row: 5;
    justify-content: flex-start;
    gap: clamp(1.5rem, 2.6vw, 2.5rem);
  }
  .hm-hero__figure {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    /* A wide frame that still carries height: at 1366 it is ~735x551, which
       keeps the whole composition inside a 768px-tall laptop screen. */
    aspect-ratio: 4 / 3;
  }
}

/* ---- Entrance: pure CSS, so every element is present and readable with
   JavaScript disabled. `both` holds the opening frame through the delay and
   the closing frame afterwards; the whole sequence finishes in 0.94s. ---- */
@keyframes hm-hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hm-hero-unveil {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
.hm-hero__eyebrow,
.hm-hero__title,
.hm-hero__text,
.hm-hero__actions {
  animation: hm-hero-rise 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hm-hero__title {
  animation-delay: 0.08s;
}
.hm-hero__figure {
  animation: hm-hero-unveil 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
.hm-hero__text {
  animation-delay: 0.26s;
}
.hm-hero__actions {
  animation-delay: 0.32s;
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero__eyebrow,
  .hm-hero__title,
  .hm-hero__figure,
  .hm-hero__text,
  .hm-hero__actions {
    animation: none;
  }
  .hm-hero__cta,
  .hm-hero__cta-arrow {
    transition: none;
  }
}

/* =========================================================================
   2. STORY - asymmetrical 12-column editorial composition
   Content in columns 1-5, the dominant architectural photograph in 7-11 and a
   smaller detail overlapping its edge. Deliberately top-aligned and staggered
   rather than a centred two-column split.
   ========================================================================= */
.hm-story {
  /* Own vertical rhythm rather than the generic .section, so the gap after the
     hero is deliberate: ~66px mobile, ~95px tablet, ~140px laptop, 160px wide. */
  padding-top: var(--section-lead);
  padding-bottom: var(--section);
}
.hm-story__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.hm-story__head {
  position: relative;
}
/* Decorative chapter number, layered behind the heading. It starts below the
   eyebrow so the two never collide, and the heading's own margin is all that
   moves, so the number does not push the copy down. */
.hm-story__num {
  position: absolute;
  top: clamp(1.35rem, 2.2vw, 2.1rem);
  left: -0.05em;
  z-index: 0;
  font-family: var(--font-serif);
  font-size: clamp(6rem, 11.5vw, 13.75rem);
  font-weight: 400;
  line-height: 0.7;
  letter-spacing: -0.045em;
  color: rgba(38, 59, 48, 0.07);
  user-select: none;
}
.hm-story__eyebrow {
  position: relative;
  z-index: 2;
}
.hm-story__title {
  position: relative;
  z-index: 1;
  max-width: 20ch;
  color: var(--forest);
  margin: clamp(1.25rem, 2vw, 2rem) 0 0;
}
.hm-story__body {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 33rem;
}
.hm-story__body p {
  color: var(--text-soft);
}
.hm-story__media {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
}
.hm-story__main {
  grid-column: 1 / span 5;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
}

.hm-story__detail {
  grid-column: 4 / span 3;
  grid-row: 1;
  align-self: end;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(-3.5rem, -5vw, -2rem);
  border: 4px solid var(--bg);
  border-radius: 2px;
}

.hm-story__main img,
.hm-story__detail img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 900px) {
  .hm-story__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2vw, 2.5rem);
    align-items: start;
  }
  .hm-story__text {
    grid-column: 1 / span 5;
  }
  .hm-story__media {
    grid-column: 7 / -1;
    /* Staggered against the copy rather than vertically centred. */
    margin-top: clamp(1.5rem, 4vw, 4.5rem);
  }
}
/* Desktop only (the site's desktop breakpoint, as used by the header): six raw
   columns of a 1650px grid made the photographs roughly twice the height of the
   copy beside them, which stretched the section and left the space under the
   text empty. Capping the media block scales the whole composition down as one
   unit - both frames keep their aspect ratios and both art-directed crops are
   percentage based, so the visible region of each photograph is unchanged and
   stays sharp. The pair stays anchored to the container's trailing edge, and
   tablet and phone widths keep the layout above untouched. */
@media (min-width: 1100px) {
  .hm-story__media {
    /* A definite width, not max-width: a grid item whose max-width stops it
       stretching is re-sized to fit-content, and these figures are ratio boxes
       with absolutely positioned images, so they have no intrinsic width. */
    width: min(100%, clamp(26rem, 34vw, 36rem));
    margin-inline-start: auto;
  }
}
/* Phones: the oversized number would crowd the heading, so it is dropped and
   the heading takes back its space. */
@media (max-width: 480px) {
  .hm-story__num {
    display: none;
  }
  .hm-story__title {
    margin-top: 0;
  }
}

/* =========================================================================
   3. ROOMS - dark forest slider (tabs + prev/next, one visible slide)
   ========================================================================= */
.hm-rooms {
  background: var(--forest);
  color: var(--on-dark);
}
.hm-rooms__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-10);
  margin-bottom: var(--sp-10);
}
.hm-rooms__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.hm-rooms__tabs {
  display: flex;
  gap: var(--sp-6);
}
.hm-rooms__tab {
  background: none;
  border: 0;
  min-height: 44px;
  padding: 0 0 var(--sp-2);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--on-dark-soft);
  opacity: 0.55;
  border-bottom: 2px solid transparent;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.hm-rooms__tab:hover {
  opacity: 0.9;
}
.hm-rooms__tab[aria-selected="true"] {
  opacity: 1;
  color: var(--on-dark);
  border-color: var(--wine);
}
.hm-rooms__viewport {
  position: relative;
}
.hm-rooms__slide {
  display: grid;
  gap: var(--sp-6);
}
.hm-rooms__slide[hidden] {
  display: none;
}
.hm-rooms__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hm-rooms__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(31, 50, 39, 0.35);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  backdrop-filter: blur(2px);
  transition: background 0.25s var(--ease);
}
.hm-rooms__arrow:hover {
  background: rgba(31, 50, 39, 0.6);
}
.hm-rooms__arrow--prev {
  left: var(--sp-4);
}
.hm-rooms__arrow--next {
  right: var(--sp-4);
}
.hm-rooms__card {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  align-self: center;
}
.hm-rooms__num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wine);
  line-height: 1;
}
.hm-rooms__card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  margin: var(--sp-2) 0 var(--sp-4);
  letter-spacing: 0;
}
.hm-rooms__desc {
  color: var(--text-soft);
  max-width: 40ch;
  margin-bottom: var(--sp-6);
}
.hm-specs {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0 0 var(--sp-6);
}
.hm-specs li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--text);
}
.hm-specs li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--wine);
}
@media (min-width: 860px) {
  .hm-rooms__slide {
    grid-template-columns: 1.12fr 0.88fr;
    gap: var(--sp-10);
    align-items: stretch;
  }
  .hm-rooms__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: clamp(24rem, 30vw, 32rem);
  }
}

/* =========================================================================
   4. BISTRO & BREAKFAST - text left, two food photographs right
   ========================================================================= */
.hm-bistro__inner {
  display: grid;
  gap: var(--sp-10);
}
.hm-bistro__text p {
  color: var(--text-soft);
  max-width: 40ch;
}
/* The two food photographs are a matched pair. Three things had made them
   different sizes: unequal grid tracks (1.25fr / 1fr), different ratio classes
   (4/3 against 3/4) and a top margin on the second that pushed it off the
   first one's baseline. All three are gone. Equal tracks plus one shared
   aspect-ratio class in the markup means identical width, height and ratio at
   every breakpoint, and `align-items: start` puts both tops on the same line.
   The border radius is the shared --r-lg from .media, so it already matches. */
.hm-bistro__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
/* Focal points. Both sources are portrait and .media img is object-fit: cover,
   so each is cropped rather than stretched; these keep the food in frame.
   Addressed by position because the section has exactly these two pictures. */
.hm-bistro__media .media:first-child img {
  /* Laid table: the dishes sit in the lower two thirds, the top is terrace
     furniture and lawn, so the crop is taken off the top. */
  object-position: 50% 72%;
}
.hm-bistro__media .media:last-child img {
  /* Plated dish, centred in its frame; only width is cropped here. */
  object-position: 50% 45%;
}
@media (min-width: 900px) {
  .hm-bistro__inner {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }
}

/* =========================================================================
   5. NATURE / FICHTEL MOUNTAINS - photo left, text + stylised map right
   ========================================================================= */
.hm-nature__inner {
  display: grid;
  gap: var(--sp-10);
}
.hm-nature__text p {
  color: var(--text-soft);
  max-width: 42ch;
}
.hm-features {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-8);
}
.hm-features li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1rem;
  color: var(--text);
}
.hm-features svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--wine);
}
/* Stylised route map (inline SVG), kept intentionally simple and light. */
.hm-map {
  width: 100%;
  max-width: 420px;
  height: auto;
  color: var(--green);
}
.hm-map .hm-map__route {
  fill: none;
  stroke: var(--stone);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
}
.hm-map .hm-map__dot {
  fill: var(--surface);
  stroke: var(--green);
  stroke-width: 1.4;
}
.hm-map .hm-map__here {
  fill: var(--wine);
  stroke: none;
}
.hm-map text {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--text-soft);
}
.hm-map .hm-map__label-here {
  fill: var(--wine);
  font-weight: 600;
}
/* The facts as an index strip: a row under the picture, each item over a
   hairline, rather than a bulleted list at the foot of the text column. */
.hm-features--strip {
  gap: 0;
  margin: 0;
}
.hm-features--strip li {
  align-items: flex-start;
  gap: 0.7rem;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.hm-features--strip svg {
  margin-top: 0.1rem;
}

/* The map gets a card of its own so it reads as a deliberate object instead of
   drifting under the paragraphs. */
.hm-nature__map {
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--bg);
  border: 1px solid var(--line);
}
.hm-nature__map .hm-map {
  max-width: none;
}
.hm-nature__map figcaption {
  margin-top: 0.6rem;
  color: var(--text-soft);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Each side is its own column and stacks its own children.

   Placing all four blocks directly on one grid looked right on paper and wrong
   on screen: row one was as tall as the wording, which is taller than the
   picture, so the picture left a dead gap beneath it before the facts strip
   started. Two columns cannot produce that gap, and the CSS is shorter for it. */
.hm-nature__col {
  display: grid;
  align-content: start;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (min-width: 900px) {
  /* Laptop and desktop only. Phones keep the stacked layout above, untouched.

     Two independent columns were the first attempt and they left a hole: each
     column stacked its own children, the picture is shorter than the wording,
     so the left column ran out level with the middle of the right one and the
     facts ended up marooned in the top-left corner with empty space under them.

     The fix is to stop having two columns of things and have one grid of rows.
     display: contents dissolves the two wrappers at this width so all six
     blocks become items of the same grid and can be placed against a shared
     7/5 axis:

        row 1   the heading, across the full width
        row 2   the photograph          |  the wording and the link
        row 3   the map, enlarged       |  the three facts

     Every row now has weight on both sides, the two halves line up on one
     axis, and nothing is left hanging. The wrappers still exist in the markup
     and still do the stacking on phones. */
  .hm-nature__inner {
    /* Capped and centred: at 1920 the wide container is over 1800px, which
       stretches a reading column past comfort and reintroduces empty space at
       the sides of the composition rather than inside it. */
    max-width: 78rem;
    margin-inline: auto;
    grid-template-columns: 7fr 5fr;
    align-items: start;
    column-gap: clamp(2.5rem, 4.5vw, 4rem);
    row-gap: clamp(2rem, 3.5vw, 3.25rem);
  }
  .hm-nature__col,
  .hm-nature__text {
    display: contents;
  }
  .hm-nature__head {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .hm-nature__head .hm-display {
    max-width: 18ch;
  }
  .hm-nature__media {
    grid-column: 1;
    grid-row: 2;
  }
  .hm-nature__body {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
  .hm-nature__map {
    grid-column: 1;
    grid-row: 3;
  }
  /* The facts sit beside the map and spread over its height, so the row reads
     as two deliberate blocks rather than a tall card next to a short list. */
  .hm-features--strip {
    grid-column: 2;
    grid-row: 3;
    /* stretch, because the grid sets align-items: start and the list would
       otherwise stay at its content height and leave a hole under itself.
       Stretched to the map's height, space-between then spreads the three
       facts across it. */
    align-self: stretch;
    align-content: space-between;
    gap: 0;
  }
  .hm-features--strip li {
    padding-block: clamp(0.75rem, 1.5vw, 1.1rem);
  }
}

/* Tablet: the picture and the wording stack, but the three facts still read
   better as a row than as a stack. */
@media (min-width: 620px) and (max-width: 899.98px) {
  .hm-features--strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
  .hm-features--strip li {
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* =========================================================================
   6. CONTACT + ENQUIRY - details left, form right (matches reference footer)
   ========================================================================= */
.hm-contact {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.hm-contact__inner {
  display: grid;
  gap: var(--sp-12);
}
.hm-contact__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: var(--sp-6);
}
.hm-contact__list {
  list-style: none;
  display: grid;
  gap: var(--sp-5);
}
.hm-contact__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.hm-contact__list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--wine);
}
.hm-contact__list a {
  /* Phone and email are primary actions on a phone: keep them tappable. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.hm-contact__list a:hover {
  color: var(--wine);
}
.hm-contact__intro {
  color: var(--text-soft);
  max-width: 40ch;
  margin-bottom: var(--sp-6);
}
/* Closing note under the contact list. It also balances the column, which was
   half the height of the form beside it. */
.hm-contact__note {
  max-width: 40ch;
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.92rem;
}
.hm-contact__note a {
  color: var(--wine);
  border-bottom: 1px solid currentColor;
}
@media (min-width: 900px) {
  .hm-contact__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(3rem, 7vw, 6rem);
    align-items: start;
  }
}

/* =========================================================================
   BISTRO — compact editorial composition
   ========================================================================= */
.internal-container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.editorial-label {
  margin: 0 0 0.75rem;
  color: var(--wine);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Internal-page motion is progressive enhancement: content is visible by
   default and only enters the initial animation state after JavaScript opts in. */
.editorial-reveal {
  opacity: 1;
  transform: none;
}
.internal-page.motion-ready .editorial-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 0.88s cubic-bezier(0.22, 1, 0.36, 1);
}
.internal-page.motion-ready .editorial-reveal--lead {
  clip-path: inset(0 0 12% 0);
}
.internal-page.motion-ready .editorial-reveal--delay {
  transition-delay: 140ms;
}
.internal-page.motion-ready .editorial-reveal.in {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}
@media (max-width: 699.98px) {
  .internal-page.motion-ready .editorial-reveal {
    transform: translateY(16px);
  }
  .internal-page.motion-ready .editorial-reveal--delay {
    transition-delay: 90ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-reveal,
  .internal-page.motion-ready .editorial-reveal,
  .internal-page.motion-ready .editorial-reveal--lead {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}
.bistro-page {
  --bistro-space: clamp(3.5rem, 6vw, 6.5rem);
}
.bistro-container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bistro-label {
  margin: 0 0 0.65rem;
  color: var(--wine);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.bistro-intro {
  padding: calc(var(--header-h) + clamp(1.5rem, 3vw, 3.25rem)) 0 var(--bistro-space);
}
.bistro-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2vw, 2.25rem);
  align-items: center;
}
.bistro-intro__crumb {
  grid-column: 1 / -1;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.bistro-intro__copy {
  grid-column: 1 / span 5;
  max-width: 34rem;
}
.bistro-intro h1 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.75rem + 2vw, 4.15rem);
  font-weight: 400;
  line-height: 1.03;
  color: var(--forest);
}
/* The lead keeps the larger size; the paragraphs that follow it are ordinary
   body copy, so the block reads as an intro plus text rather than three
   competing leads. */
.bistro-intro__lead {
  color: var(--text-soft);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.16rem);
}
.bistro-intro__copy > p {
  color: var(--text-soft);
}
.bistro-intro__copy > p:last-child {
  margin-bottom: 0;
}
.bistro-intro__images {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto clamp(2.5rem, 5vw, 5rem);
  width: min(100%, 45rem);
  margin-left: auto;
  align-items: end;
}
.bistro-page figure.media {
  border-radius: 0;
}
.bistro-intro__image {
  grid-column: 1 / span 10;
  grid-row: 1 / span 2;
  aspect-ratio: 4 / 3;
}
.bistro-intro__image img {
  object-position: 50% 48%;
}
.bistro-intro__detail {
  grid-column: 9 / -1;
  grid-row: 2 / span 2;
  aspect-ratio: 1 / 1;
  border: clamp(0.3rem, 0.7vw, 0.65rem) solid var(--bg);
}
.bistro-intro__detail img {
  object-position: 50% 42%;
}
.bistro-intro__image figcaption,
.bistro-intro__detail figcaption {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 0.45rem 0.65rem;
  background: rgba(31, 50, 39, 0.86);
  color: var(--on-dark);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bistro-experience {
  position: relative;
  padding-block: var(--bistro-space);
  overflow: hidden;
  background: var(--forest);
  color: var(--on-dark);
}
.bistro-experience__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 0.75fr) minmax(18rem, 0.9fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.bistro-experience__heading {
  max-width: 26rem;
}
.bistro-experience h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.45rem + 1.25vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--on-dark);
}
.bistro-contact h2 {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.45rem + 1.25vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
}
.bistro-experience__body {
  max-width: 34rem;
  color: var(--on-dark-soft);
}
/* --wine on --forest is roughly 1.2:1, so the eyebrow was effectively
   invisible on the dark band. The site already carries a lightened wine for
   exactly this case (see .about-character .about-label and .room-facts). */
.bistro-experience .bistro-label {
  color: #c98a92;
}
.bistro-experience__marker {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-6);
  color: rgba(241, 238, 231, 0.28);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.bistro-notes {
  margin: 0;
  border-top: 1px solid var(--line-on-dark);
}
.bistro-notes > div {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.bistro-notes dt {
  color: var(--wine);
  font-family: var(--font-serif);
}
.bistro-notes dd {
  display: grid;
  margin: 0;
}
.bistro-notes strong {
  color: var(--on-dark);
  font-weight: 600;
}
.bistro-notes span {
  color: var(--on-dark-soft);
  font-size: 0.9rem;
}
.bistro-contact {
  padding-block: clamp(3.25rem, 5vw, 5rem);
}
.bistro-contact__inner {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: center;
}
.bistro-contact__action {
  max-width: 38rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.bistro-contact__action p {
  color: var(--text-soft);
}
.bistro-contact__action p a {
  color: var(--wine);
  border-bottom: 1px solid currentColor;
}
@media (max-width: 899.98px) {
  .bistro-intro__copy { grid-column: 1 / span 6; }
  .bistro-intro__images { grid-column: 7 / -1; }
  .bistro-experience__grid { grid-template-columns: 0.7fr 1fr; }
  .bistro-notes { grid-column: 1 / -1; }
}
@media (max-width: 699.98px) {
  .bistro-page { --bistro-space: clamp(3rem, 11vw, 4.25rem); }
  .bistro-intro { padding-top: calc(var(--header-h) + clamp(1.5rem, 7vw, 2rem)); }
  .bistro-intro__grid { grid-template-columns: 1fr; }
  .bistro-intro__crumb,
  .bistro-intro__copy,
  .bistro-intro__images { grid-column: 1; }
  .bistro-intro__crumb { margin-bottom: 1.4rem; }
  .bistro-intro__images { width: 100%; margin: 1.75rem 0 0; }
  .bistro-intro__image { grid-column: 1 / span 11; }
  .bistro-intro__detail { grid-column: 9 / -1; }
  .bistro-experience__grid,
  .bistro-contact__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .bistro-notes { grid-column: 1; }
  .bistro-contact__action { padding-top: 1rem; }
}
@media (max-width: 379.98px) {
  .bistro-intro__images { grid-template-rows: auto 2rem; }
  .bistro-intro__detail { grid-column: 8 / -1; }
}

/* =========================================================================
   ROOMS INDEX — connected editorial room directory
   ========================================================================= */
.rooms-hero {
  padding: calc(var(--header-h) + clamp(1.5rem, 3vw, 3rem)) 0 clamp(3rem, 6vw, 6rem);
}
.rooms-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem) clamp(1rem, 2vw, 2.25rem);
  align-items: end;
}
.rooms-hero__copy {
  grid-column: 1 / span 7;
  max-width: 52rem;
}
.rooms-hero .breadcrumb {
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.rooms-hero h1 {
  margin: 0 0 1rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.7rem);
  font-weight: 400;
  line-height: 1.02;
}
.rooms-hero__aside {
  grid-column: 9 / -1;
  padding: 1.2rem 0 0 1.5rem;
  border-left: 1px solid var(--wine);
  color: var(--text-soft);
}
.rooms-hero__aside span {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--wine);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rooms-hero__aside p {
  max-width: 30ch;
  font-size: 0.92rem;
}
.rooms-hero__aside p:last-child {
  margin-bottom: 0;
}
.rooms-hero__note {
  max-width: 58ch;
  color: var(--text-soft);
}
.rooms-hero__note:last-of-type {
  margin-bottom: 0;
}
.rooms-hero__note a {
  color: var(--wine);
  border-bottom: 1px solid currentColor;
}
.rooms-catalog {
  padding-block: clamp(3rem, 6vw, 6rem);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.rooms-index {
  display: grid;
}
.room-item {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 4.5rem) clamp(1rem, 2vw, 2.25rem);
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
  align-items: center;
}
.room-item:last-child {
  border-bottom: 1px solid var(--line);
}
.room-item__index {
  position: absolute;
  top: clamp(2.5rem, 5vw, 5rem);
  left: 0;
  color: var(--wine);
  font-family: var(--font-serif);
  font-size: 1rem;
}
.room-item__body {
  grid-column: 2 / span 5;
}
.room-item__body h2 {
  margin-bottom: 0.85rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.55rem + 1.25vw, 3rem);
  font-weight: 400;
}
.room-item__description {
  max-width: 43ch;
  color: var(--text-soft);
}
.room-item__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.room-item__facts div {
  display: grid;
  grid-template-columns: minmax(4rem, 0.65fr) 1.35fr;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}
.room-item__facts div:nth-child(odd) {
  padding-right: 1rem;
}
.room-item__facts div:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}
.room-item__facts dt {
  color: var(--text-soft);
  font-size: 0.76rem;
  text-transform: uppercase;
}
.room-item__facts dd {
  margin: 0;
  color: var(--forest);
  font-size: 0.88rem;
}
.room-item__action {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: end;
  justify-content: space-between;
}
.room-item__price {
  display: grid;
  margin: 0;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: 1.3rem;
}
.room-item__price span {
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.room-item__media {
  grid-column: 8 / -1;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.room-item__media img {
  object-position: 50% 52%;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.room-item__media::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  z-index: 1;
  border: 1px solid rgba(251, 249, 244, 0.65);
  pointer-events: none;
}
.room-item__media:hover img {
  transform: scale(1.035);
}
.room-item:nth-child(even) .room-item__body {
  grid-column: 8 / -1;
}
/* 2 / span 5, not 1 / span 6. The odd rows put the picture in columns 8-12,
   five wide; a six-column picture on the even rows made every second
   photograph visibly larger than the one above it (620px against 512px at
   1400). Mirroring the odd row exactly - body indented one column on one side,
   picture indented one column on the other - gives every card the same five
   columns, and with the shared 4/3 box, the same height. */
.room-item:nth-child(even) .room-item__media {
  grid-column: 2 / span 5;
  grid-row: 1;
}
.rooms-empty {
  padding-block: var(--sp-10);
}
@media (max-width: 899.98px) {
  .rooms-hero__copy { grid-column: 1 / span 8; }
  .rooms-hero__aside { grid-column: 9 / -1; }
  .room-item__body,
  .room-item:nth-child(even) .room-item__body { grid-column: 1 / span 6; }
  .room-item__media,
  .room-item:nth-child(even) .room-item__media { grid-column: 7 / -1; }
  .room-item__index { position: static; grid-column: 1 / -1; }
}
@media (max-width: 699.98px) {
  .rooms-hero { padding-top: calc(var(--header-h) + 1.5rem); }
  .rooms-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .rooms-hero__copy,
  .rooms-hero__aside { grid-column: 1; }
  .rooms-hero__aside { padding: 1rem 0 0; border-top: 1px solid var(--wine); border-left: 0; }
  .room-item { grid-template-columns: 1fr; }
  .room-item__index,
  .room-item__body,
  .room-item:nth-child(even) .room-item__body,
  .room-item__media,
  .room-item:nth-child(even) .room-item__media { grid-column: 1; }
  .room-item__media,
  .room-item:nth-child(even) .room-item__media { grid-row: 2; }
  .room-item__media img { object-position: 50% 48%; }
  .room-item__body,
  .room-item:nth-child(even) .room-item__body { grid-row: 3; }
  .room-item__facts { grid-template-columns: 1fr; }
  .room-item__facts div:nth-child(odd),
  .room-item__facts div:nth-child(even) { padding-inline: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .room-item__media img { transition: none; }
}

/* =========================================================================
   INNER PAGE HEADER (light band, not repeated dark green)
   ========================================================================= */
.page-head {
  padding-top: calc(var(--header-h) + clamp(2rem, 3.5vw, 3.5rem));
  padding-bottom: clamp(2.25rem, 4vw, 3.75rem);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-head__inner {
  display: grid;
  gap: var(--sp-4);
  max-width: 48rem;
}
.page-head h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.7rem + 2.3vw, 4.5rem);
  line-height: 1.02;
}
.page-kicker {
  order: -1;
  margin: 0 0 0.65rem;
  color: var(--wine);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.internal-page .page-head .breadcrumb {
  order: -2;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.internal-page .section h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--forest);
}

/* =========================================================================
   ABOUT — page-specific editorial composition
   ========================================================================= */
.about-page {
  --about-space: clamp(4rem, 7vw, 7.5rem);
}
.about-container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.about-page .media {
  border-radius: 0;
  box-shadow: none;
}
.about-page figure.media figcaption {
  /* An absolutely positioned caption sizes to its content, so a long word can
     grow wider than the picture and push the page sideways. */
  max-width: 100%;
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 0.45rem 0.65rem;
  background: rgba(31, 50, 39, 0.86);
  color: var(--on-dark);
  font-size: 0.65rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.about-label {
  margin: 0 0 0.7rem;
  color: var(--wine);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.about-intro {
  padding: calc(var(--header-h) + clamp(1.5rem, 3vw, 3.25rem)) 0 var(--about-space);
}
.about-intro__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2vw, 2.25rem);
  align-items: end;
}
.about-intro__crumb {
  grid-column: 1 / -1;
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}
.about-intro__copy {
  grid-column: 1 / span 6;
  align-self: center;
  padding-right: clamp(1rem, 4vw, 4rem);
}
.about-intro h1 {
  max-width: 12ch;
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 4.35rem);
  font-weight: 400;
  line-height: 1.03;
  color: var(--forest);
}
.about-intro__lead {
  max-width: 35rem;
  margin: 0 0 1.1rem;
  color: var(--text-soft);
  font-size: clamp(1.02rem, 0.95rem + 0.25vw, 1.18rem);
  line-height: 1.65;
}
/* Second intro paragraph: same measure as the lead, one step quieter. */
.about-intro__note {
  max-width: 35rem;
  margin: 0;
  color: var(--text-soft);
}
.about-intro__image {
  grid-column: 8 / -1;
  aspect-ratio: 4 / 3;
}
.about-intro__image img {
  object-position: 50% 48%;
}
.about-intro__chapter {
  position: absolute;
  /* Not right: 0. The container's padding is inside it, so 0 puts the glyph
     hard against the screen edge on a phone, where it reads as cut off. The
     gutter lines it up with the text above it instead. */
  right: var(--gutter);
  bottom: -0.15em;
  z-index: -1;
  color: rgba(124, 34, 51, 0.1);
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 10rem);
  line-height: 0.8;
}
.about-story {
  padding-block: var(--about-space);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem) clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: center;
}
.about-story__copy {
  max-width: 34rem;
}
.about-story__copy h2 {
  margin-bottom: 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--forest);
}
.about-story__copy p:not(.about-label) {
  color: var(--text-soft);
}
/* One composition rather than two cards: the house fills the column and the
   key detail is stepped into its lower right corner, inset in the section
   colour so the overlap reads as deliberate. The 9/12 and 5/12 spans make the
   two finish at the same height, so nothing hangs below the block. */
.about-story__images {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  align-items: end;
}
.about-story__image-main {
  grid-column: 1 / span 9;
  grid-row: 1;
  aspect-ratio: 4 / 3;
}
.about-story__image-detail {
  grid-column: 9 / -1;
  grid-row: 1;
  align-self: end;
  aspect-ratio: 3 / 4;
  border: clamp(0.3rem, 0.7vw, 0.6rem) solid var(--surface);
}
/* The detail sits over the house picture's lower right, so its caption goes to
   the top edge; two bars along the same bottom would read as one smear. */
.about-story__image-detail figcaption {
  inset: 0 auto auto 0;
}
.about-story__image-main img {
  object-position: 50% 44%;
}
.about-story__image-detail img {
  object-position: 58% 50%;
}
.about-story__image-detail figcaption {
  inset: 0 auto auto 0;
}
.about-character {
  padding-block: var(--about-space);
  background: var(--forest);
  color: var(--on-dark);
}
.about-character__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
}
.about-character__heading {
  max-width: 25rem;
}
.about-character h2 {
  margin-bottom: 1.25rem;
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
}
.about-character .about-label {
  color: #c98a92;
}
.about-character__intro {
  max-width: 31ch;
  color: var(--on-dark-soft);
}
.about-character__list {
  margin: 0;
  border-top: 1px solid var(--line-on-dark);
}
.about-character__list > div {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.about-character dt {
  color: var(--wine);
  font-family: var(--font-serif);
}
.about-character dd {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) 1.3fr;
  gap: 1.5rem;
  margin: 0;
}
.about-character dd strong {
  color: var(--on-dark);
  font-weight: 600;
}
.about-character dd span {
  color: var(--on-dark-soft);
}
.about-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.about-links a {
  min-height: 88px;
  padding: 1.4rem 0;
  border-block: 1px solid var(--line-strong);
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}
.about-links a + a {
  padding-left: clamp(1.5rem, 4vw, 4rem);
  border-left: 1px solid var(--line);
}
.about-links span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-links a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.6rem;
  color: var(--wine);
  transition: transform 0.25s var(--ease);
}
.about-links a:hover::after {
  transform: translateX(0.25rem);
}
@media (max-width: 899.98px) {
  .about-intro__copy { grid-column: 1 / span 7; }
  .about-intro__image { grid-column: 8 / -1; }
  .about-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .about-character__grid { grid-template-columns: 0.75fr 1.25fr; gap: 3rem; }
  .about-character dd { grid-template-columns: 1fr; gap: 0.25rem; }
}
@media (max-width: 699.98px) {
  .about-page { --about-space: clamp(3.25rem, 13vw, 4.75rem); }
  .about-intro { padding-top: calc(var(--header-h) + clamp(1.5rem, 7vw, 2rem)); }
  .about-intro__grid { grid-template-columns: 1fr; }
  .about-intro__crumb,
  .about-intro__copy,
  .about-intro__image { grid-column: 1; }
  .about-intro__crumb { margin-bottom: 1.5rem; }
  .about-intro__copy { padding: 0; }
  .about-intro h1 { font-size: clamp(2.25rem, 10.5vw, 3.1rem); }
  .about-intro__lead { max-width: 31rem; }
  .about-intro__image { width: 88%; margin-top: 2rem; aspect-ratio: 4 / 3; }
  .about-story__grid { grid-template-columns: 1fr; }
  .about-story__copy,
  .about-story__grid { grid-template-columns: minmax(0, 1fr); }
  .about-story__images { width: 100%; }
  /* Same overlap as the desktop, one column tighter so the detail reads
     clearly at phone size without swallowing the house. */
  .about-story__image-main { grid-column: 1 / span 9; }
  .about-story__image-detail { grid-column: 8 / -1; border-width: 5px; }
  .about-character__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .about-links { grid-template-columns: 1fr; }
  .about-links a + a { padding-left: 0; border-top: 0; border-left: 0; }
}
@media (max-width: 379.98px) {
  .about-intro__image { width: 100%; }
  .about-story__image-detail { border-width: 4px; }
}

/* =========================================================================
   ROOM DETAIL — compact gallery with practical information rail
   ========================================================================= */
.room-detail {
  padding: calc(var(--header-h) + clamp(1.5rem, 3vw, 3rem)) 0 clamp(3.5rem, 7vw, 7rem);
}
.room-detail .breadcrumb {
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
}
.room-detail__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.room-detail__head h1 {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.7rem);
  font-weight: 400;
  line-height: 1.02;
}
.room-detail__head-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
  padding: 0.8rem 0;
  border-block: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.room-detail__composition {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.75fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.room-detail__visuals {
  min-width: 0;
}
.room-detail__primary {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.room-detail__primary figcaption,
.room-gallery figcaption {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 0.4rem 0.6rem;
  background: rgba(31, 50, 39, 0.86);
  color: var(--on-dark);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.room-detail__content {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.room-detail__description {
  padding-top: 1rem;
  border-top: 1px solid var(--wine);
}
.room-detail__description p:not(.editorial-label) {
  color: var(--text-soft);
}
.room-detail__price {
  margin: 0 0 var(--sp-5);
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 1.1rem + 0.8vw, 2rem);
  font-weight: 400;
}
.room-facts {
  display: grid;
  gap: 0;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--forest);
  color: var(--on-dark);
}
.room-facts .editorial-label {
  color: #c98a92;
}
.room-facts dl {
  display: grid;
  margin: 0;
}
.room-facts .fact {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.room-facts .fact:last-of-type {
  border-bottom: 0;
}
.room-facts dt {
  color: var(--on-dark-soft);
}
.room-facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.room-facts .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--sp-5);
  background: var(--on-dark);
  color: var(--forest);
  border-color: var(--on-dark);
}
.room-facts .text-soft {
  margin: var(--sp-3) 0 0;
  color: var(--on-dark-soft);
  font-size: 0.85rem;
}
.room-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin-top: clamp(0.5rem, 1.2vw, 1rem);
}
.room-gallery figure {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.room-gallery figure:only-child,
.room-gallery figure:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}
.room-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
.room-nav a {
  display: grid;
  gap: 0.2rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: 1.2rem;
}
.room-nav small {
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.room-nav .next {
  margin-left: auto;
  text-align: right;
}
@media (max-width: 899.98px) {
  .room-detail__composition { grid-template-columns: 1fr; gap: 2.5rem; }
  .room-detail__content { grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr); align-items: start; }
}
@media (max-width: 699.98px) {
  .room-detail { padding-top: calc(var(--header-h) + 1.5rem); }
  .room-detail__head { grid-template-columns: 1fr; gap: 1.25rem; }
  .room-detail__head-rail { justify-content: flex-start; }
  .room-detail__content { grid-template-columns: 1fr; }
}
@media (max-width: 379.98px) {
  .room-gallery { grid-template-columns: 1fr; }
}

/* =========================================================================
   CONTACT — architectural information column and refined form
   ========================================================================= */
.contact-intro {
  padding: calc(var(--header-h) + clamp(1.5rem, 3vw, 3rem)) 0 clamp(3.5rem, 7vw, 7rem);
}
.contact-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem clamp(1rem, 2vw, 2.25rem);
  align-items: center;
}
.contact-intro__copy {
  grid-column: 1 / span 5;
}
.contact-intro .breadcrumb {
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.contact-intro h1 {
  margin: 0 0 1rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.7rem);
  font-weight: 400;
  line-height: 1.02;
}
/* Supporting paragraphs under the lead: body size, soft colour, same measure
   as the lead so the column reads as one block. */
.contact-intro__note {
  max-width: 46ch;
  color: var(--text-soft);
}
.contact-intro__note:last-of-type {
  margin-bottom: 0;
}
.contact-intro__image {
  grid-column: 7 / -1;
  aspect-ratio: 16 / 10;
  border-radius: 0;
}
.contact-intro__image img {
  object-position: 63% 55%;
}
.contact-intro__image figcaption {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 0.45rem 0.65rem;
  background: rgba(31, 50, 39, 0.86);
  color: var(--on-dark);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-workspace {
  padding-block: clamp(3.5rem, 7vw, 7rem);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.contact-workspace__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: start;
}
.contact-information {
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--forest);
  color: var(--on-dark);
}
.contact-information .editorial-label {
  color: #c98a92;
}
.contact-block {
  padding-block: 1.3rem;
  border-top: 1px solid var(--line-on-dark);
}
.contact-block:last-child {
  padding-bottom: 0;
}
.contact-block h2 {
  margin: 0 0 0.65rem;
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
}
.contact-block address {
  color: var(--on-dark-soft);
  font-style: normal;
  line-height: 1.85;
}
.contact-information .text-soft {
  color: var(--on-dark-soft);
}
.contact-information .link {
  color: var(--on-dark);
}
/* The enquiry form, as a card.

   It used to be bare underlines on the page background, which read as a
   wireframe rather than a form: the fields had no edges, so there was nothing
   to show where you could type, and the whole panel had no weight next to the
   dark information block beside it. It is a card now - its own surface, a
   hairline and a soft shadow - so the two halves of the section balance.

   The field styling is deliberate rather than the browser default: a filled
   box on a lighter ground than the card, a brand-coloured focus ring, and
   micro-labels in the same uppercase used for the section eyebrows. */
.contact-form-panel {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.contact-form-panel h2 {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.6rem);
  font-weight: 400;
}
.contact-form-panel .form {
  gap: clamp(1.1rem, 2vw, 1.4rem);
}
/* :not(.field-check) matters. The consent line is a full sentence, and set in
   uppercase with letter-spacing it became a wall of capitals that nobody would
   read - the opposite of what a consent notice is for. Only the short field
   names get the micro-label treatment. */
.contact-form-panel .field:not(.field-check) label {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
/* The checkbox keeps its sentence beside it rather than under it: the label
   takes the rest of the row and wraps inside its own column. */
.contact-form-panel .field-check label {
  flex: 1;
  min-width: 12rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.55;
}
.contact-form-panel .field-check input[type="checkbox"] {
  margin-top: 0.15rem;
}
.contact-form-panel .field-check__note {
  padding-left: calc(1.1rem + 0.65rem);
  font-size: 0.85rem;
}
.contact-form-panel .field input,
.contact-form-panel .field select,
.contact-form-panel .field textarea {
  padding: 0.85rem 1rem;
  /* A shade lighter than the card, so the box reads as an opening in it. */
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background 0.2s var(--ease);
}
.contact-form-panel .field input::placeholder,
.contact-form-panel .field textarea::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}
.contact-form-panel .field input:hover,
.contact-form-panel .field select:hover,
.contact-form-panel .field textarea:hover {
  border-color: var(--forest);
}
.contact-form-panel .field input:focus,
.contact-form-panel .field select:focus,
.contact-form-panel .field textarea:focus {
  background: #fff;
  border-color: var(--wine);
  /* A ring rather than a heavier border, so the field does not jump by a pixel
     when it takes focus. */
  box-shadow: 0 0 0 3px rgba(124, 34, 51, 0.13);
}
.contact-form-panel .field textarea {
  min-height: 9.5rem;
}
/* The native select arrow differs on every platform and none of them match the
   rest of this form, so it is replaced with the site's own chevron. */
.contact-form-panel .field select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23263b30' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}
/* Brand colour for the tick instead of the operating system's blue. */
.contact-form-panel .field-check input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--wine);
}
.contact-form-panel .errorlist {
  margin: 0;
  padding: 0;
}
/* The submit row reads as the end of the card: a rule above it, the button and
   the small print sharing a line where there is room for both. */
.contact-form-panel .form > div:has(> .btn) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-top: 0.25rem;
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--line);
}
.contact-form-panel .form > .text-soft {
  margin: 0;
  font-size: 0.85rem;
}

@media (max-width: 559.98px) {
  /* One thumb, one target: the button spans the card on a narrow phone. */
  .contact-form-panel .form > div:has(> .btn) .btn {
    width: 100%;
  }
}

/* =========================================================================
   LEGAL PAGES — restrained document layout
   ========================================================================= */
.legal-page .page-head {
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  border-bottom: 0;
}
.legal-page .page-head__inner {
  max-width: 62rem;
  padding-left: clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--wine);
}
.legal-section {
  padding-block: clamp(3rem, 6vw, 6rem);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.legal-section__grid {
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.legal-section__marker {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--wine);
}
.legal-section__marker span {
  color: var(--text-soft);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal-section__marker strong {
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
}
.prose {
  max-width: 68ch;
}
.prose h2 {
  margin-top: var(--sp-10);
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  font-weight: 400;
}
.prose h2:first-of-type {
  margin-top: var(--sp-8);
}
.prose h3 {
  margin-top: var(--sp-8);
  font-size: 1.2rem;
}
.prose p,
.prose li {
  color: var(--text-soft);
}
.prose ul {
  padding-left: 1.2rem;
}
.prose a {
  color: var(--wine);
  border-bottom: 1px solid currentColor;
}

/* Contextual inquiry strip and connected page endings. */
.inquiry {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(2rem, 5vw, 3.75rem);
  background: var(--forest);
  color: var(--on-dark);
  border-radius: 0;
}
.inquiry h2 {
  max-width: 20ch;
  /* The heading and the paragraph below it sat flush against each other. It
     only shows now that the heading is no longer painted invisible. */
  margin: 0 0 0.65rem;
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-weight: 400;
}
/* The strip sits inside a <section class="section"> on every page that uses
   it, and `.internal-page .section h2` (two classes) outranks the rule above
   (one class), so the heading was being painted --forest on a --forest
   ground: invisible. This selector is scoped to the strip and outranks both. */
.internal-page .section .inquiry h2 {
  color: var(--on-dark);
}
.inquiry p {
  max-width: 48ch;
  margin: 0;
  color: var(--on-dark-soft);
}
.inquiry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
}
.related-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
/* Where the strip follows the dark .inquiry block, the section's bottom
   padding and this one's top padding stacked into roughly 190px of empty
   band. The block above already provides the separation. */
.related-pages--tight {
  padding-top: 0;
}
.related-pages a {
  padding-block: 1.25rem;
  border-block: 1px solid var(--line-strong);
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1rem + 0.65vw, 1.65rem);
}
.related-pages a + a {
  padding-left: clamp(1.5rem, 4vw, 4rem);
  border-left: 1px solid var(--line);
}
.related-pages span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =========================================================================
   404 — compact editorial wayfinding
   ========================================================================= */
.error-page {
  display: grid;
  align-items: center;
  min-height: 68svh;
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 6rem)) var(--gutter) clamp(3rem, 6vw, 6rem);
}
.error-page__inner {
  display: grid;
  grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 8rem);
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  align-items: center;
}
.error-page__number {
  color: var(--wine);
  font-family: var(--font-serif);
  font-size: clamp(5rem, 13vw, 10rem);
  line-height: 0.8;
  text-align: center;
}
.error-page__copy {
  padding-left: clamp(1.5rem, 4vw, 4rem);
  border-left: 1px solid var(--line-strong);
}
.error-page h1 {
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 4rem);
  font-weight: 400;
}
.error-page__actions {
  margin-top: var(--sp-6);
}

@media (min-width: 780px) {
  .inquiry {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
  .inquiry__actions {
    justify-content: flex-end;
  }
}
@media (max-width: 899.98px) {
  .contact-intro__copy { grid-column: 1 / span 6; }
  .contact-intro__image { grid-column: 7 / -1; }
  .contact-workspace__grid { grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem; }
}
@media (max-width: 699.98px) {
  .contact-intro { padding-top: calc(var(--header-h) + 1.5rem); }
  .contact-intro__grid { grid-template-columns: 1fr; }
  .contact-intro__copy,
  .contact-intro__image { grid-column: 1; }
  .contact-intro__image { aspect-ratio: 4 / 3; }
  .contact-intro__image img { object-position: 68% 50%; }
  .contact-workspace__grid { grid-template-columns: 1fr; }
  /* padding-top is the card's own padding now, so it is not reset here. */
  .legal-section__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .legal-section__marker { grid-template-columns: auto 1fr; align-items: baseline; }
  .related-pages { grid-template-columns: 1fr; }
  .related-pages a + a { padding-left: 0; border-top: 0; border-left: 0; }
  .error-page__inner { grid-template-columns: 1fr; text-align: left; }
  .error-page__number { text-align: left; }
  .error-page__copy { padding: 1.5rem 0 0; border-top: 1px solid var(--line-strong); border-left: 0; }
}

/* Section transition helper: a hairline divider used sparingly */
.section--surface {
  background: var(--surface);
}

/* =========================================================================
   ABOUT - additions: the "Ihr Aufenthalt" overview and the location section.
   Both reuse the rhythm the page already has (--about-space, .about-container)
   and its two-column editorial grid, so they need no new tokens.
   ========================================================================= */
.about-stay {
  padding-block: var(--about-space);
}
.about-stay__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: start;
}
.about-stay__heading {
  max-width: 25rem;
}
.about-stay h2 {
  margin-bottom: 1.25rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
}
.about-stay__intro {
  max-width: 31ch;
  margin: 0;
  color: var(--text-soft);
}
.about-stay__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--line-strong);
}
.about-stay__items > div {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-bottom: 1px solid var(--line);
}
.about-stay__items h3 {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.about-stay__items p {
  max-width: 40ch;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
}
.about-stay__items .link {
  justify-self: start;
  margin-top: 0.35rem;
  font-size: 0.82rem;
}
.about-place {
  padding-block: var(--about-space);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.about-place__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 2vw, 2.25rem);
  align-items: center;
}
.about-place__image {
  grid-column: 1 / span 6;
  /* Wide, so it sits against the text column instead of towering over it. The
     source is 1.64, so a 16/10 box trims a little width and no height. */
  aspect-ratio: 16 / 10;
}
.about-place__image img {
  /* Centred: the crop is only a few pixels of width, and the treeline sits
     across the middle of the frame. */
  object-position: 50% 50%;
}
.about-place__copy {
  grid-column: 8 / -1;
  max-width: 34rem;
}
.about-place__copy h2 {
  margin-bottom: 1.25rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
}
.about-place__copy p:not(.about-label) {
  color: var(--text-soft);
}
@media (max-width: 899.98px) {
  .about-stay__grid { grid-template-columns: 0.75fr 1.25fr; gap: 2.5rem; }
  .about-place__image { grid-column: 1 / span 5; }
  .about-place__copy { grid-column: 7 / -1; }
}
@media (max-width: 699.98px) {
  .about-stay__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .about-stay__items { grid-template-columns: 1fr; }
  .about-place__grid { grid-template-columns: 1fr; }
  .about-place__image,
  .about-place__copy { grid-column: 1; }
}

.bistro-menu {
  padding-block: var(--bistro-space);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.bistro-menu__inner {
  display: grid;
  grid-template-columns: minmax(15rem, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: start;
}
.bistro-menu__head {
  max-width: 26rem;
}
.bistro-menu h2 {
  margin: 0 0 1.1rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.45rem + 1.25vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
}
.bistro-menu__intro {
  max-width: 32ch;
  margin: 0;
  color: var(--text-soft);
}
/* The reserved space. A minimum height keeps the section present while it is
   empty, so adding the real menu later fills the frame instead of changing
   the page around it. */
/* One composition with a clear hierarchy: the winter garden is the venue and
   dominates, the water station is a detail stepped into its lower right corner
   and inset in the section colour. The 9/12 and 5/12 spans make the two finish
   at the same height, so they overlap rather than sitting apart, and nothing
   hangs below the block. */
.bistro-menu__figures {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  align-items: end;
  min-width: 0;
}
.bistro-menu__pending {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
  line-height: 1.35;
}
.bistro-menu__hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
}
/* Second, smaller photograph under the main one in the heading column. */
.bistro-menu__figure--small {
  width: 100%;
}
@media (max-width: 899.98px) {
  .bistro-menu__inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 2.5rem; }
}
@media (max-width: 699.98px) {
  .bistro-menu__inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* =========================================================================
   FEATURE PAGES - one shared composition for "Freizeit & Entspannung" and
   "Feiern & Firmenveranstaltungen", built from the pieces the About and Bistro
   pages already use: a 12-column intro with the photograph on the right, a
   numbered list on the light band, a dark note, then the existing .inquiry and
   .related-pages components.
   ========================================================================= */
.feature-page {
  --feature-space: clamp(3.5rem, 6vw, 6.5rem);
}
.feature-container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.feature-page .media {
  border-radius: 0;
  box-shadow: none;
}
.feature-page figure.media figcaption {
  max-width: 100%;
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 0.45rem 0.65rem;
  background: rgba(31, 50, 39, 0.86);
  color: var(--on-dark);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.feature-label {
  margin: 0 0 0.7rem;
  color: var(--wine);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.feature-intro {
  padding: calc(var(--header-h) + clamp(1.5rem, 3vw, 3.25rem)) 0 var(--feature-space);
}
.feature-intro__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2vw, 2.25rem);
  align-items: center;
}
.feature-intro__crumb {
  grid-column: 1 / -1;
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}
.feature-intro__copy {
  grid-column: 1 / span 6;
  align-self: center;
  padding-right: clamp(1rem, 4vw, 4rem);
}
.feature-intro h1 {
  max-width: 17ch;
  margin: 0 0 1.25rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 1.6rem + 2.1vw, 4rem);
  font-weight: 400;
  line-height: 1.03;
  /* "Firmenveranstaltungen" is one unbreakable 21-character compound: at the
     display size it is wider than a 320px screen, and wider than its own
     column at 768px, so it pushed the whole page sideways. The page is
     lang="de", so hyphens split it properly ("Firmenveran-staltungen").
     overflow-wrap must be `anywhere`, not `break-word`: only `anywhere`
     also shrinks the heading's min-content width, and it is that width the
     grid track is sized from. With `break-word` the track still grew to the
     full word and the page kept scrolling sideways. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
.feature-intro__lead {
  max-width: 35rem;
  margin: 0 0 1.1rem;
  color: var(--text-soft);
  font-size: clamp(1.02rem, 0.95rem + 0.25vw, 1.18rem);
  line-height: 1.65;
}
.feature-intro__note {
  max-width: 35rem;
  margin: 0;
  color: var(--text-soft);
}
.feature-intro__image {
  grid-column: 8 / -1;
  aspect-ratio: 4 / 3;
}
/* The events hero is a 3/2 source in a 4/3 box, so cover crops the width and
   not the height, and only the horizontal value has any effect. Pulling the
   frame left keeps the run of the laid table and loses the post at the right
   edge. Scoped to the page so the Freizeit hero is unaffected. */
.page-events .feature-intro__image img {
  object-position: 45% 50%;
}
.feature-intro__chapter {
  position: absolute;
  /* Not right: 0. The container's padding is inside it, so 0 puts the glyph
     hard against the screen edge on a phone, where it reads as cut off. The
     gutter lines it up with the text above it instead. */
  right: var(--gutter);
  bottom: -0.15em;
  z-index: -1;
  color: rgba(124, 34, 51, 0.1);
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 10rem);
  line-height: 0.8;
}
.feature-blocks {
  padding-block: var(--feature-space);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.feature-blocks__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: start;
}
.feature-blocks__heading {
  max-width: 26rem;
}
.feature-blocks h2 {
  margin: 0 0 1.1rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.45rem + 1.25vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
}
.feature-blocks__intro {
  max-width: 32ch;
  margin: 0;
  color: var(--text-soft);
}
/* Quiet fact rail under the section heading. Same idiom as .room-item__facts
   on the room list, so it needs no new visual language, and it fills the space
   the short heading column used to leave empty. */
.feature-facts {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  border-top: 1px solid var(--line);
}
.feature-facts > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.6fr) minmax(0, 1.4fr);
  gap: 0.75rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.feature-facts dt {
  color: var(--text-soft);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.feature-facts dd {
  margin: 0;
  color: var(--forest);
  font-size: 0.9rem;
}
.feature-blocks__list {
  margin: 0;
  border-top: 1px solid var(--line-strong);
}
.feature-blocks__list > div {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.35rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.feature-blocks__list dt {
  color: var(--wine);
  font-family: var(--font-serif);
  font-size: 1.05rem;
}
.feature-blocks__list dd {
  margin: 0;
}
.feature-blocks__list h3 {
  margin: 0 0 0.45rem;
  color: var(--forest);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
}
.feature-blocks__list p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.feature-aside {
  padding-block: var(--feature-space);
  background: var(--forest);
  color: var(--on-dark);
}
.feature-aside__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: start;
}
.feature-aside__heading {
  max-width: 26rem;
}
.feature-aside .feature-label {
  color: #c98a92;
}
.feature-aside h2 {
  margin: 0;
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.45rem + 1.25vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
}
.feature-aside__body {
  max-width: 62ch;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-on-dark);
  color: var(--on-dark-soft);
}
.feature-aside__body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 899.98px) {
  .feature-intro__copy { grid-column: 1 / span 7; }
  .feature-intro__image { grid-column: 8 / -1; }
  .feature-blocks__grid,
  .feature-aside__grid { grid-template-columns: 0.7fr 1.3fr; gap: 2.5rem; }
}
@media (max-width: 699.98px) {
  .feature-page { --feature-space: clamp(3rem, 11vw, 4.25rem); }
  .feature-intro { padding-top: calc(var(--header-h) + clamp(1.5rem, 7vw, 2rem)); }
  .feature-intro__grid { grid-template-columns: 1fr; }
  .feature-intro__crumb,
  .feature-intro__copy,
  .feature-intro__image { grid-column: 1; }
  .feature-intro__crumb { margin-bottom: 1.5rem; }
  .feature-intro__copy { padding-right: 0; }
  .feature-intro h1 { max-width: none; font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .feature-intro__image { margin-top: 2rem; }
  .feature-blocks__grid,
  .feature-aside__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .feature-blocks__list > div { grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; }
}

/* =========================================================================
   CONTACT - the map of Bistro Johannes, loaded only on request.
   The frame keeps the same box before and after loading, so pressing the
   button does not shift the rest of the page.
   ========================================================================= */
.contact-map {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.contact-map__head {
  max-width: 42rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.contact-map h2 {
  margin: 0 0 0.5rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.4rem);
  font-weight: 400;
  line-height: 1.08;
}
.contact-map__head p:last-child {
  margin: 0;
}
/* The address that used to sit inside the placeholder stays, above the map:
   it is the one fact this section exists to give, and it should not depend on
   an external iframe rendering. */
.contact-map__head .contact-map__address {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.5;
}
/* An aspect-ratio box rather than a fixed height, so the map keeps a sensible
   shape at every width instead of becoming a letterbox slit on a phone. 21/9
   is right for a wide desktop and far too flat for a narrow screen, so it
   steps to 4/3 there. The surface colour shows while Google's tiles arrive. */
.contact-map__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
}
.contact-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-map__open {
  margin: clamp(0.85rem, 2vw, 1.25rem) 0 0;
  font-size: 0.92rem;
}

@media (max-width: 899.98px) {
  .contact-map__frame {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 599.98px) {
  .contact-map__frame {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 699.98px) {
  .contact-map__frame { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   PHOTOGRAPH LAYOUTS - added with the client's interior and leisure photos.
   Five different compositions so no two pages repeat the same arrangement:
     .leisure-offer   alternating copy / picture rows (Freizeit)
     .leisure-pano    panoramic band beside a short note (Freizeit)
     .events-spaces   equal two-up grid (Feiern)
     .about-house     offset tall + wide pair with copy (Ueber uns)
     .rooms-detail    single wide picture beside a note (Zimmer)
   Every figure is a .media ratio box, so the image is absolutely positioned
   and cropped with object-fit: cover. Nothing is ever stretched.
   ========================================================================= */

/* ---- Freizeit: alternating rows ---- */
.leisure-offer {
  padding-block: var(--feature-space);
}
.leisure-offer--surface {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.leisure-offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.leisure-offer--reverse .leisure-offer__grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
/* Copy first, portrait picture second: the mirror of --reverse, used so three
   consecutive rows alternate sides instead of repeating one arrangement. */
.leisure-offer--single-right .leisure-offer__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.leisure-offer--single-right .leisure-offer__single {
  justify-self: end;
}
.leisure-offer__copy {
  max-width: 36rem;
}
.leisure-offer h2 {
  margin: 0 0 1.1rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.45rem + 1.25vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
}
.leisure-offer__copy p {
  color: var(--text-soft);
}
.leisure-offer .feature-facts {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* The wide/tall pair. The tall picture overlaps the wide one from below and
   is inset by a border in the page colour, the same device the About and
   Bistro intros already use. */
.leisure-duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.leisure-duo__wide {
  grid-column: 1 / span 9;
  grid-row: 1 / span 2;
  aspect-ratio: 4 / 3;
}
.leisure-duo__wide img {
  object-position: 50% 55%;
}
.leisure-duo__tall {
  grid-column: 8 / -1;
  grid-row: 2 / span 2;
  aspect-ratio: 3 / 4;
  border: clamp(0.3rem, 0.7vw, 0.6rem) solid var(--bg);
}
.leisure-duo__tall img {
  object-position: 50% 42%;
}
.leisure-offer--surface .leisure-duo__tall {
  border-color: var(--surface);
}

/* Massage: the client's banner, shown whole beside the copy.

   Held at exactly 16/9, the ratio the file was made at, so object-fit: cover has
   nothing to trim and the lettering printed into the picture survives intact.

   The white mount is the reason for box-sizing: content-box. aspect-ratio
   normally applies to the border box, so a border would steal height from the
   picture and start cropping the type; against the content box the ratio
   describes the image itself and the mount sits outside it. That is also why
   the frame is a border rather than padding: the image inside a .media box is
   absolutely positioned to inset 0, which resolves against the padding box, so
   padding would not inset it but a border does.

   The result reads as a printed notice pinned to the page, which is what the
   artwork actually is. */
/* Massage: the supplied file is a 1600x900 advert - lettering on the left half,
   the masseuse on the right. Only the right half is wanted, so the picture sits
   in a 3/4 portrait slot and object-position pushes the frame across to her.

   Both numbers are measured rather than chosen by eye. A 3/4 box shows 675 of
   the 1600 source pixels, so 87% starts the crop at x=805 and the printed text,
   which ends around x=780, falls outside it. The ratio cannot be widened past
   about 0.9 for the same reason: a 1/1 box would show 900px of source and no
   horizontal position could keep the lettering out.

   So the picture is made smaller by narrowing the frame, not by reshaping it.
   It is a supporting portrait beside a paragraph, not the subject of the
   section, and at 26rem it was competing with the wording. */
.leisure-offer--single-right .leisure-offer__single {
  width: min(100%, 20rem);
}
.leisure-offer--single-right .leisure-offer__single img {
  object-position: 87% 50%;
}

@media (max-width: 699.98px) {
  /* On a phone it stops being a full-width block and becomes what it is: a
     small portrait, left aligned with the text above it, taking about half the
     column instead of the whole screen. */
  .leisure-offer--single-right .leisure-offer__single {
    width: min(58%, 13.5rem);
    justify-self: start;
  }
}

/* The single tall picture (sauna) keeps its portrait ratio and is capped so it
   never towers over the copy beside it. */
.leisure-offer__single {
  width: min(100%, 26rem);
  aspect-ratio: 3 / 4;
}
.leisure-offer__single img {
  object-position: 50% 45%;
}


/* ---- Freizeit: the lake panorama ---- */
.leisure-pano {
  padding-bottom: var(--feature-space);
}
.leisure-pano__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.leisure-pano__figure {
  aspect-ratio: 1448 / 517;
}
.leisure-pano__figure img {
  object-position: 50% 50%;
}
.leisure-pano__copy {
  max-width: 62ch;
}
.leisure-pano h2 {
  margin: 0 0 0.75rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.1rem);
  font-weight: 400;
}
.leisure-pano__copy p {
  margin: 0;
  color: var(--text-soft);
}

/* Captions on this page match the ones the other pages already use. */
.leisure-page figure.media figcaption {
  max-width: 100%;
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 0.45rem 0.65rem;
  background: rgba(31, 50, 39, 0.86);
  color: var(--on-dark);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Feiern: equal two-up ---- */
.events-spaces {
  padding-block: var(--feature-space);
}
.events-spaces__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.events-spaces__head {
  max-width: 52rem;
}
.events-spaces h2 {
  margin: 0 0 0.9rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.5rem);
  font-weight: 400;
  line-height: 1.08;
}
.events-spaces__head p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-soft);
}
.events-spaces__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.events-spaces__item {
  aspect-ratio: 3 / 2;
}
.events-spaces__item img {
  object-position: 50% 55%;
}

/* ---- Ueber uns: offset tall + wide pair ---- */
.about-house {
  padding-block: var(--about-space);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
/* Written mobile first. The previous version had one twelve column rule and no
   breakpoints at all, which put the copy in columns 11 and 12 at every width:
   188px on a desktop, where the heading wrapped onto five lines, and about 60px
   on a phone, where it collapsed to one word per line and ran off the screen.

   Phones and tablets: the two photographs share a row as an equal pair, the
   wording sits underneath at full width. Both pictures take the same 3/4 box so
   the pair lines up instead of stepping. */
.about-house__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.25rem);
  align-items: start;
}
.about-house__tall {
  aspect-ratio: 3 / 4;
}
.about-house__tall img {
  object-position: 50% 42%;
}
.about-house__wide {
  aspect-ratio: 3 / 4;
}
.about-house__wide img {
  object-position: 55% 50%;
}
.about-house__copy {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  /* Desktop: the offset pair the section was always meant to be, with the
     wording given four columns rather than two. The wide picture returns to its
     own 4/3 and sits on the tall one's baseline, which is the same device the
     other picture pairs on this site use. */
  .about-house__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2.25rem);
    align-items: center;
  }
  .about-house__tall {
    grid-column: 1 / span 4;
  }
  .about-house__wide {
    grid-column: 5 / span 4;
    aspect-ratio: 4 / 3;
    align-self: end;
  }
  .about-house__copy {
    grid-column: 9 / -1;
    align-self: center;
  }
}
.about-house h2 {
  margin: 0 0 0.9rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
}
.about-house__copy p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* ---- Zimmer: single wide picture beside a note ---- */
.rooms-detail {
  padding-block: clamp(3rem, 6vw, 6rem);
}
/* Mobile first. This section had a single two-column rule and no breakpoints,
   so on a phone the picture and the wording each got roughly half of 390px:
   a 180px photograph beside a 150px column of text. It stacks now, and the
   picture takes the full width it deserves.

   4/3 is the file's own ratio (724x543 = 1.3333), so object-fit has nothing to
   crop at any width - the photograph is never stretched and never trimmed. */
.rooms-detail__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
}
.rooms-detail__figure {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
@media (min-width: 900px) {
  .rooms-detail__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}
.rooms-detail__figure img {
  object-position: 50% 50%;
}
.rooms-detail__copy {
  max-width: 34rem;
}
.rooms-detail h2 {
  margin: 0 0 1rem;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.4rem);
  font-weight: 400;
  line-height: 1.08;
}
.rooms-detail__copy p {
  color: var(--text-soft);
}
.rooms-detail__copy p:last-child {
  margin-bottom: 0;
}

/* ---- Bistro: the water-station picture under the menu heading ---- */
.bistro-menu__figure {
  grid-column: 1 / span 9;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.bistro-menu__figure img {
  /* The winter garden: the tables sit in the lower half, the roof in the
     upper, so the crop is taken off the top. */
  object-position: 50% 62%;
}
/* Every --small declaration lives here, after .bistro-menu__figure above: the
   two selectors have equal specificity, so source order decides, and an
   earlier copy of these rules was silently losing to the generic one. That is
   why the detail came out landscape and full width. */
.bistro-menu__figure--small {
  grid-column: 9 / -1;
  grid-row: 1;
  align-self: end;
  aspect-ratio: 3 / 4;
  border: clamp(0.3rem, 0.7vw, 0.6rem) solid var(--surface);
}
.bistro-menu__figure--small img {
  object-position: 50% 45%;
}
/* The detail overlaps the venue picture's bottom right, so its caption goes to
   the top; two bars on the same edge would collide. */
.bistro-menu__figure--small figcaption {
  inset: 0 auto auto 0;
}
.bistro-menu__figure figcaption {
  max-width: 100%;
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 0.45rem 0.65rem;
  background: rgba(31, 50, 39, 0.86);
  color: var(--on-dark);
  font-size: 0.65rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---- Tablet ---- */
@media (max-width: 899.98px) {
  .leisure-offer__grid,
  .leisure-offer--reverse .leisure-offer__grid,
  .leisure-offer--single-right .leisure-offer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem;
  }
}

/* ---- Phone ---- */
@media (max-width: 699.98px) {
  /* Every modifier is named here. The --reverse and --single-right rules above
     are (0,2,0); a bare .leisure-offer__grid is (0,1,0) and loses to them, so a
     row whose modifier is missing from this list silently keeps two columns on
     a phone. That is what happened to the massage row: it stayed side by side
     and squeezed its picture to 114px. */
  .leisure-offer__grid,
  .leisure-offer--reverse .leisure-offer__grid,
  .leisure-offer--single-right .leisure-offer__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  /* The picture always follows the copy on a phone, including in the mirrored
     row, so the reading order does not flip halfway down the page. */
  .leisure-offer--reverse .leisure-offer__single { order: 2; }
  .leisure-offer--reverse .leisure-offer__copy { order: 1; }
  .leisure-offer--single-right .leisure-offer__single { justify-self: start; }
  .leisure-offer__single { width: 88%; }
  .leisure-duo { grid-template-rows: auto 2rem; }
  .leisure-duo__wide { grid-column: 1 / span 10; }
  .leisure-duo__tall { grid-column: 8 / -1; }
}
@media (max-width: 379.98px) {
  .leisure-duo__tall { grid-column: 7 / -1; }
}

/* =========================================================================
   ROOM CAROUSEL - one horizontal track holding every photograph of a room.
   Replaces the old fixed "one big picture + a two-column grid of extras",
   which could not cope with one photograph (empty grid) or with many.

   Scroll-snap does the work: the track is a native horizontally scrollable
   row, so a touch screen swipes it with no JavaScript. The arrows are
   progressive enhancement and main.js removes them when there is nothing to
   scroll, which is the case while a room has a single photograph.
   ========================================================================= */
.room-carousel {
  position: relative;
}
.room-carousel__track {
  display: flex;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The scrollbar would sit under the photographs and break the composition;
     swipe, arrows and keyboard all still work without it. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Room for the focus ring, which would otherwise be clipped by overflow. */
  padding: 3px;
  margin: -3px;
}
.room-carousel__track::-webkit-scrollbar {
  display: none;
}
/* One photograph per view. flex-basis 100% keeps every slide the same size
   whatever the count, so nothing is stretched and a single photograph fills
   the frame exactly as the old primary image did. */
.room-carousel__item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 3 / 2;
  border-radius: 0;
}
.room-carousel__item img {
  object-position: 50% 50%;
}
.room-carousel__item figcaption {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 0.4rem 0.6rem;
  background: rgba(31, 50, 39, 0.86);
  color: var(--on-dark);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.room-carousel__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background: rgba(251, 249, 244, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--forest);
  font-size: 1.5rem;
  line-height: 1;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.room-carousel__btn:hover {
  background: var(--forest);
  color: var(--on-dark);
}
.room-carousel__btn--prev {
  left: clamp(0.5rem, 1.5vw, 1rem);
}
.room-carousel__btn--next {
  right: clamp(0.5rem, 1.5vw, 1rem);
}
/* Nothing to scroll: main.js sets `hidden`, which needs help against the
   display:grid above. */
.room-carousel__btn[hidden] {
  display: none;
}
/* Coarse pointers get swipe instead; the arrows would only cover the picture. */
@media (hover: none) and (pointer: coarse) {
  .room-carousel__btn {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .room-carousel__track {
    scroll-behavior: auto;
  }
  .room-carousel__btn {
    transition: none;
  }
}


/* =========================================================================
   ZIMMER - the "Bad & Komfort" card.
   It IS a .room-item, so every dimension, the 4/3 image, the type scale, the
   borders and the alternating sides come from the rules above and stay in step
   at every breakpoint. This modifier only removes what a non-clickable card
   must not have.
   ========================================================================= */
/* The card has no action row, so the facts list is the last thing in the body
   and its bottom margin would leave the text column ending short of the
   picture. Dropping it lets the two columns finish level. */
.room-item--feature .room-item__facts {
  margin-bottom: 0;
}
/* The media is a <figure> here, not a link. The zoom on hover is an
   affordance for something clickable, so it would be a false promise. */
.room-item--feature .room-item__media:hover img {
  transform: none;
}

/* =========================================================================
   SPEISEKARTE - the menu sheet and its lightbox.
   The supplied file is only 300x488, so every size here is chosen to stay
   near 1:1 rather than to fill space: printed at most 26rem wide, enlarged at
   most to 600px or 86vh. Nothing uses object-fit: cover, so no edge of the
   menu is ever cropped, and the intrinsic width/height on the <img> keep the
   proportions exactly as supplied.
   ========================================================================= */

.menu-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}
.menu-lightbox[hidden] {
  display: none;
}
.menu-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 22, 0.82);
}
.menu-lightbox__panel {
  position: relative;
  display: grid;
  justify-items: center;
}
.menu-lightbox__img {
  display: block;
  /* An explicit width, not max-width: max-width only ever caps, so the image
     rendered at its intrinsic 300px and the "enlarged" view came out smaller
     than the sheet on the page.

     The three terms are the three limits: the viewport width, a 600px ceiling
     so a wide monitor cannot blow a 300px source up into mush, and the height
     of the screen expressed as a width via the file's own 300/488 ratio. Width
     alone is constrained and height stays auto, so the proportions are exactly
     the file's and nothing is stretched. object-fit: contain is the safety net
     if the menu is later replaced with a different shape: the picture would
     letterbox rather than distort. */
  width: min(92vw, 600px, calc(86vh * 0.6148));
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  background: #fff;
  padding: clamp(0.4rem, 1.2vw, 0.75rem);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
/* Inside the panel on a comfortable screen, but pinned to the screen corner on
   a phone, where the panel edge is only a few pixels from the viewport edge.
   44px square either way, so it is always a real tap target. */
.menu-lightbox__close {
  position: absolute;
  top: -3.25rem;
  right: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--forest);
  font-size: 1.6rem;
  line-height: 1;
}
.menu-lightbox__close:hover {
  background: var(--forest);
  color: var(--on-dark);
}
body.menu-open {
  overflow: hidden;
}
@media (max-width: 699.98px) {
  /* No room above the panel on a phone, so the button moves to the top right
     of the screen itself and the image gives up the height it needs. */
  .menu-lightbox {
    padding-top: 4rem;
  }
  .menu-lightbox__close {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
  }
  .menu-lightbox__img {
    /* Same three limits, with room for the fixed close button at the top. */
    width: min(94vw, calc(80vh * 0.6148));
    max-height: 80vh;
  }
}

/* The card. 20rem puts the 300x488 file at roughly its own size: smaller than
   it was, and sharper with it, because nothing is upscaled any more. */

/* Square details, deliberately smaller than the card so they frame it rather
   than compete with it. */

/* The card. 20rem puts the 300x488 file at roughly its own size: smaller than
   it was, and sharper with it, because nothing is upscaled any more. */

/* Square details, deliberately smaller than the card so they frame it rather
   than compete with it. */


/* Phones keep a composition rather than collapsing to a plain stack, but the
   card gets most of the width: sharing a row with a picture squeezed it to
   186px, where the dish names stop being legible at all. It now takes eight of
   ten columns, close to the file's own 300px, and the two details sit stepped
   against each other in the row below, indented from the edges so the row
   reads as arranged rather than merely listed. */

@media (max-width: 699.98px) {
  .bistro-menu__figures {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    align-items: end;
  }
  /* The venue picture takes ten of twelve columns and the detail four, so the
     hierarchy is unmistakable at phone size: the winter garden reads as the
     room, the water station as a note in its corner. The overlap is two
     columns, which keeps the venue caption clear of the inset. */
  .bistro-menu__figure {
    grid-column: 1 / span 10;
    aspect-ratio: 4 / 3;
  }
  .bistro-menu__figure--small {
    grid-column: 9 / -1;
    border-width: clamp(0.25rem, 1.2vw, 0.45rem);
  }
  /* The small picture sits over the big one's bottom right, so its caption
     moves to the top: two dark bars along the same bottom edge would collide.
     Same device as .about-story__image-detail. */
  .bistro-menu__figure--small figcaption {
    inset: 0 auto auto 0;
  }
  .bistro-menu__figure figcaption {
    padding: 0.35rem 0.5rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
}

/* =========================================================================
   BISTRO - "Die Karte": the menu composed, not centred.

   Five pieces on one 12-column grid, staggered across two rows: heading top
   left, a food detail bottom left, the card in the middle spanning both rows,
   a second food detail top right, the caption under it. The stagger is what
   makes it read as a composition; nothing is layered over the card, so no part
   of the menu is ever covered.

   NOTE: this block is the ONLY place .bistro-card is styled. Earlier edits
   left several copies of it further up the file, and because they were later
   in source order the stale ones silently won. Keep it that way.
   ========================================================================= */
.bistro-card {
  padding-block: var(--bistro-space);
}
.bistro-card__collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2.25rem);
}
.bistro-card__head {
  grid-column: 1 / span 4;
  grid-row: 1;
  align-self: end;
}
.bistro-card h2 {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.45rem + 1.25vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
}
/* 20rem puts the 300x488 file at roughly its own size: smaller than it was,
   and sharper with it, because nothing is upscaled any more. */
.bistro-card__sheet {
  grid-column: 6 / span 4;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: center;
  width: min(100%, 20rem);
  padding: clamp(0.45rem, 1.2vw, 0.8rem);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bistro-card__sheet img {
  display: block;
  width: 100%;
  height: auto;
}
.bistro-card__sheet:hover,
.bistro-card__sheet:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -30px rgba(30, 40, 32, 0.55);
}
/* Square details, deliberately smaller than the card so they frame it rather
   than compete with it. */
.bistro-card__detail {
  aspect-ratio: 1 / 1;
  border-radius: 0;
}
/* Whole frames squared by the box above, so each one is positioned on its own
   subject rather than blindly centred. */
.bistro-card__detail--wurst img { object-position: 50% 50%; }
.bistro-card__detail--laugen img { object-position: 58% 50%; }
.bistro-card__detail--salat img { object-position: 50% 38%; }
.bistro-card__detail--brotzeit img { object-position: 56% 50%; }
/* Four details at three deliberately different sizes, so the eye reads the
   card first and the photographs as support. Nothing overlaps the card. */
.bistro-card__detail--wurst {
  grid-column: 1 / span 4;
  grid-row: 2;
  align-self: start;
}
.bistro-card__detail--salat {
  grid-column: 3 / span 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: clamp(0.5rem, 1.5vw, 1.25rem);
}
.bistro-card__detail--laugen {
  grid-column: 10 / span 3;
  grid-row: 1;
  align-self: end;
}
.bistro-card__detail--brotzeit {
  grid-column: 11 / -1;
  grid-row: 2;
  align-self: end;
}
/* The caption sits between the two right-hand pictures rather than alone in
   empty space, so the enlarge cue and the CTA belong to the composition. */
.bistro-card__caption {
  grid-column: 10 / span 3;
  grid-row: 2;
  align-self: start;
}
.bistro-card__zoom {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--wine);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bistro-card__hint {
  max-width: 30ch;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}
@media (max-width: 899.98px) {
  .bistro-card__head { grid-column: 1 / span 5; }
  .bistro-card__detail--wurst { grid-column: 1 / span 4; }
  .bistro-card__detail--laugen { grid-column: 10 / -1; }
  .bistro-card__caption { grid-column: 10 / -1; }
  /* Two details is the right density for this width; four would crowd it. */
  .bistro-card__detail--salat,
  .bistro-card__detail--brotzeit { display: none; }
}
/* ---- Phones. The layouts above are untouched. ----
   The card stays the subject and keeps a readable width at every phone size,
   indented one column so the block has an axis of its own. The two food
   details sit beneath it as an equal, aligned pair rather than two differently
   sized tiles stepped against each other, and the caption returns to the
   card's axis so the whole thing hangs together. */
@media (max-width: 699.98px) {
  .bistro-card__collage {
    gap: clamp(0.75rem, 3vw, 1.1rem);
  }
  .bistro-card__head {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .bistro-card__sheet {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    width: min(100%, 17rem);
  }
  .bistro-card__detail--wurst {
    grid-column: 1 / span 6;
    grid-row: 3;
    align-self: start;
  }
  .bistro-card__detail--laugen {
    grid-column: 7 / -1;
    grid-row: 3;
    align-self: start;
  }
  .bistro-card__caption {
    grid-column: 2 / -1;
    grid-row: 4;
  }
  .bistro-card__hint {
    max-width: none;
  }
  .bistro-card__detail--salat,
  .bistro-card__detail--brotzeit { display: none; }
}
/* ---- Desktop and laptop only. Everything above is untouched. ----
   Two columns: the whole picture composition on the left, the wording on the
   right. The card is the centre of that composition and the four photographs
   are laid over its left and right edges.

   The card and all four photographs share ONE grid area. That is the whole
   trick: each photograph is then placed against the card's centre line rather
   than against a column edge, so the tuck is identical on both sides and stays
   identical as the composition scales. --card-w drives the card's width and
   every horizontal offset, so the two can never drift apart.

   The photographs sit ABOVE the card. The tuck is sized against a measurement
   of the file itself: menu.jpg carries a purely decorative checkerboard frame
   about 30px wide on a 300px-wide source, with no text in it. The overlap is
   held to roughly two thirds of that frame at every width, so a photograph
   reaches onto the border and stops there and no dish, price or heading is
   ever behind one. --tuck is the single number to change if that ever needs
   revisiting. The menu is never cropped and never stretched. */
@media (min-width: 900px) {
  .bistro-card__collage {
    /* Capped at 22rem: the source is 300px wide, so anything larger trades
       sharpness for size, and this card has to stay readable. */
    --card-w: clamp(20rem, 14rem + 8vw, 22rem);
    --tuck: clamp(2rem, 2.2vw, 2.5rem);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }
  /* The wording stacks against the middle of the composition beside it: the
     heading rises to the row boundary, the cue and the CTA start just under
     it, so the right column reads as one block rather than two stranded ones. */
  .bistro-card__head {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    align-self: end;
    text-align: left;
  }
  .bistro-card__caption {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    align-self: start;
    text-align: left;
  }
  .bistro-card__hint {
    max-width: 34ch;
  }
  .bistro-card__sheet,
  .bistro-card__detail {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: center;
  }
  .bistro-card__sheet {
    width: var(--card-w);
    z-index: 1;
  }
  .bistro-card__detail {
    width: var(--w);
    margin: 0;
    z-index: 2;
    /* --dir flips the same offset to the other side of the card. */
    --dir: -1;
    /* This is the independent `translate` property, not `transform`. The
       reveal animation owns `transform` through a higher-specificity rule
       (.internal-page.motion-ready .editorial-reveal), so placing the
       photographs with `transform` silently did nothing and left all four
       stacked on the card. The two properties compose, so the reveal still
       slides them in from below. */
    translate: calc(var(--dir) * (var(--card-w) / 2 + var(--w) / 2 - var(--tuck))) var(--y);
    /* A ring in the page colour and a soft shadow, so each photograph reads as
       laid on top of the card rather than pasted into it. */
    border: clamp(0.25rem, 0.5vw, 0.4rem) solid var(--bg);
    box-shadow: 0 22px 44px -26px rgba(30, 40, 32, 0.55);
  }
  /* Four sizes, largest bottom-left, smallest top-right, so the pairs balance
     diagonally instead of sitting in matching blocks. */
  .bistro-card__detail--laugen {
    --w: clamp(9rem, 6.5rem + 5vw, 11.5rem);
    --y: -8.5rem;
  }
  .bistro-card__detail--wurst {
    --w: clamp(10.5rem, 7.5rem + 6vw, 13.5rem);
    --y: 7.25rem;
  }
  .bistro-card__detail--brotzeit {
    --dir: 1;
    --w: clamp(7rem, 5rem + 4vw, 9rem);
    --y: -9.5rem;
  }
  .bistro-card__detail--salat {
    --dir: 1;
    --w: clamp(8rem, 5.5rem + 4.5vw, 10.5rem);
    --y: 6.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bistro-card__sheet,
  .bistro-card__sheet:hover,
  .bistro-card__sheet:focus-visible {
    transition: none;
    transform: none;
  }
}