/* Löwen 1560 — shared site styles. Follow BRAND.md for any new component. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }

body {
  min-height: 100vh;
  background: var(--bg-dark);
  color: var(--cream);
  font-family: "EB Garamond", Georgia, serif;
  line-height: 1.6;
  position: relative;
}

/* Fixed full-height lion watermark, bled off the left edge of the viewport
   (shifted left by half its own width so only the right half shows). Stays
   in place while the page scrolls. Inlined SVG + currentColor (same proven
   technique as the header/hero lion icons) — CSS mask-image was tried first
   but WebKit's luminance-mode default made the black currentColor strokes
   invisible; this sidesteps that entirely. */
.watermark-lion {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: auto;
  transform: translateX(-50%);
  color: var(--gold);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.watermark-lion svg {
  display: block;
  height: 100%;
  width: auto;
}

/* Full-viewport centered layout — used by the coming-soon pages (it/en) only. */
body.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 32%, var(--bg-light), var(--bg-dark) 72%);
  text-align: center;
  padding: 2rem;
  overflow: hidden;
}

.card {
  position: relative;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 8vw, 5rem);
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  animation: fade-in 1.6s ease both;
}

.card::before, .card::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border-color: var(--gold);
  border-style: solid;
}
.card::before { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.card::after { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }

.lion {
  display: block;
  width: clamp(120px, 26vw, 190px);
  height: auto;
  margin: 0 auto 1.5rem;
  color: var(--gold);
  filter: drop-shadow(0 2px 18px rgba(201, 162, 75, 0.25));
}

h1 {
  font-family: "Cinzel", "EB Garamond", serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: clamp(2.2rem, 9vw, 4.5rem);
  color: var(--gold);
  text-shadow: 0 2px 18px rgba(201, 162, 75, 0.25);
  line-height: 1;
}

.rule {
  width: 60%;
  max-width: 260px;
  margin: 1.4rem auto;
  border: none;
  border-top: 1px solid var(--gold-soft);
  position: relative;
}
.rule::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
}

.langs {
  margin-top: 1.4rem;
  font-family: "Cinzel", serif;
  font-size: clamp(0.8rem, 2.6vw, 0.95rem);
  letter-spacing: 0.26em;
  color: var(--cream);
  text-transform: uppercase;
}
.langs span { opacity: 0.5; }

/* Language switcher — shared across de/it/en pages (BRAND.md: equal weight, no default). */
.lang-switch {
  margin-top: 2rem;
  font-family: "Cinzel", serif;
  font-size: clamp(0.75rem, 2.4vw, 0.85rem);
  letter-spacing: 0.18em;
}
.lang-switch a {
  color: var(--cream-dim);
  text-decoration: none;
  padding: 0 0.4em;
  transition: color 0.2s ease;
}
.lang-switch a:hover,
.lang-switch a:focus-visible {
  color: var(--gold);
}
.lang-switch a[aria-current="page"] {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
}
.lang-switch span { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Site chrome — header, hero, sections, cards, stats, forms, footer.
   Used by real content pages (not the coming-soon placeholder).
   ========================================================================== */

a { color: inherit; }

/* Inline text links within body copy (nav/buttons/lang-switch have their
   own styling and are unaffected — this is scoped to prose paragraphs). */
.lede a,
.info-item p a,
.room__body p a,
.section--tight > p a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 0.15em;
}
.lede a:hover,
.info-item p a:hover,
.room__body p a:hover,
.section--tight > p a:hover {
  text-decoration-color: var(--gold);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(26, 21, 18, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gold-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  color: var(--gold);
  white-space: nowrap;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 1.8rem);
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-nav a {
  text-decoration: none;
  color: var(--cream-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--gold);
  border-color: var(--gold-soft);
}

.site-header .lang-switch { margin-top: 0; }

/* In-page jump nav (e.g. Summer page's Biken/Wandern/Wasser/Sonstiges) —
   plain anchor links to full sections below, not tabs: keeps everything
   visible/scannable rather than hiding content behind clicks. */
.section-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.8rem;
  font-family: "Cinzel", serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-nav a {
  color: var(--cream-dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--gold-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.section-nav a:hover,
.section-nav a:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}
/* Account for the sticky header when jumping to an anchored section. */
section[id] { scroll-margin-top: 90px; }
#inquiry-lion { scroll-margin-top: 90px; }

/* Hero — full-bleed photo with overlay content */
.hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--cream);
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hero slideshow — Swiper.js (loaded via CDN) handles the .hero-swiper
   markup; these rules make it fill the hero and match the brand's dot
   styling. A page with a single plain <img> (no .hero-swiper) is untouched. */
.hero .swiper.hero-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero .swiper-pagination {
  bottom: 1.4rem !important;
}
.hero .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 0.3rem !important;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: rgba(239, 230, 213, 0.3);
  opacity: 1;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hero .swiper-pagination-bullet:hover,
.hero .swiper-pagination-bullet:focus-visible {
  border-color: var(--gold);
}
.hero .swiper-pagination-bullet-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
  .hero .swiper-slide { transition: none !important; }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,21,18,0.55) 0%, rgba(26,21,18,0.35) 45%, rgba(26,21,18,0.85) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  max-width: 40rem;
}
.hero .lion { width: clamp(70px, 14vw, 110px); }
.lion--small { width: clamp(60px, 10vw, 90px); }
.hero h1 { font-size: clamp(2rem, 7vw, 3.6rem); }
.hero__tagline {
  margin-top: 1rem;
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--cream-dim);
}
.hero .btn { margin-top: 1.8rem; }

/* Section containers */
.section {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 2.5rem);
}
.section--narrow { max-width: 46rem; }
.section--tight { padding-top: 0; }

.section h2 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--gold);
  text-align: center;
  margin-bottom: 1.2rem;
}

/* Legal/utility pages (Impressum, Datenschutz) — smaller, plainer
   headings than the marketing pages, still on-brand. */
.legal-page h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.legal-page h2 {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-align: left;
  margin-bottom: 0.4rem;
}

.lede {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  color: var(--cream-dim);
}

/* Small tracked eyebrow label above a heading */
.kicker {
  font-family: "Cinzel", serif;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}


/* Divider — hairline broken by a diamond, echoing the lion mark's geometry */
.divider {
  width: 100%;
  max-width: 220px;
  margin: 1.6rem auto;
  border: none;
  border-top: 1px solid var(--gold-soft);
  position: relative;
}
.divider::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
}

/* Teaser/feature tiles */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 600px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
.tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: var(--cream);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tile:hover,
.tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.tile__media { aspect-ratio: 4 / 3; overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__body { padding: 1.25rem 1.4rem 1.5rem; }
.tile__body h3 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.tile__body p { color: var(--cream-dim); font-size: 1.08rem; line-height: 1.55; }
.tile__meta {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.tile--placeholder .tile__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  color: var(--cream-dim);
  font-family: "Cinzel", serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

/* Photo-free info list — for destinations/activities we don't have our own
   photos of (ski areas, trails). Name + distance/time meta + description,
   stacked with hairline dividers. */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2rem;
}
.info-item {
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1.75rem;
}
.info-item:last-child { border-bottom: none; padding-bottom: 0; }
.info-item h3 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
.info-item p { color: var(--cream-dim); font-size: 1.08rem; }

/* Stat row (m², bedrooms, bathrooms, guests) */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin: clamp(2rem, 5vw, 3rem) 0;
  text-align: center;
}
.stat__value {
  display: block;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--gold);
  text-shadow: 0 2px 18px rgba(201, 162, 75, 0.2);
}
.stat__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* Room-by-room breakdown */
.room-list { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3rem); margin-top: 2rem; }
.room {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 800px) {
  .room { grid-template-columns: 1.1fr 1fr; }
  .room--reverse .room__media { order: 2; }
}
.room__media { aspect-ratio: 4 / 3; border: 1px solid var(--gold-soft); overflow: hidden; }
.room__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room__body h3 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}
.room__body p { color: var(--cream-dim); font-size: 1.08rem; }

/* Image pairs (bathrooms, seasonal diptych) */
.gallery-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 700px) {
  .gallery-pair { grid-template-columns: 1fr 1fr; }
}
.gallery-pair figure,
.gallery-grid figure { border: 1px solid var(--gold-soft); overflow: hidden; }
.gallery-pair img,
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
.gallery-pair figcaption,
.gallery-grid figcaption {
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--cream-dim);
  border-top: 1px solid var(--gold-soft);
  background: rgba(0,0,0,0.15);
}

/* Larger image sets (trip photos) */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Lightbox — click-to-magnify for gallery-pair/gallery-grid images */
.gallery-pair img,
.gallery-grid img { cursor: zoom-in; }
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 4rem);
  background: rgba(26, 21, 18, 0.92);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}
.lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 42px;
  height: 42px;
  border: 1px solid var(--gold-soft);
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

/* Amenities list — compact two-column list with a small diamond marker
   echoing the logo's ornament (see BRAND.md §5), instead of plain bullets. */
.amenities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem 2.5rem;
  margin: 2rem auto 0;
  max-width: 30rem;
  text-align: left;
}
@media (min-width: 600px) {
  .amenities { grid-template-columns: 1fr 1fr; }
}
.amenities li {
  list-style: none;
  position: relative;
  padding-left: 1.2em;
  color: var(--cream-dim);
}
.amenities li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Floorplan figure */
.floorplan {
  margin: 2rem auto 0;
  max-width: 46rem;
  text-align: center;
}
.floorplan img {
  width: 100%;
  height: auto;
  border: 1px solid var(--gold-soft);
  background: var(--cream);
}
.floorplan figcaption {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--cream-dim);
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.9em 1.8em;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--gold);
  color: var(--bg-dark);
}

/* Forms (inquiry form) */
.form {
  max-width: 38rem;
  margin: 2rem auto 0;
  display: grid;
  gap: 1.1rem;
}
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) {
  .form-row--split { grid-template-columns: 1fr 1fr; }
}
.form label {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 0.4rem;
  text-align: left;
}
.form input,
.form textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  padding: 0.7em 0.9em;
  color: var(--cream);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1rem;
}
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form input[type="date"] { color-scheme: dark; }
.form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(70%) sepia(58%) saturate(526%) hue-rotate(358deg) brightness(93%) contrast(92%);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form .btn { justify-self: center; margin-top: 0.5rem; }
.form-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--cream-dim);
  font-style: italic;
}
.form-status {
  text-align: center;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.form-status--success { color: var(--gold); }
.form-status--error { color: #d98a6a; }

/* Honeypot — invisible to real visitors (off-canvas, not display:none, so
   naive bots that skip hidden fields still fill it in), tabindex -1 and
   aria-hidden so keyboard/screen-reader users never land on it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inquiry stage — crossfades the form into the booking-chat widget once the
   guest submits. Both panels share the same lion/heading/divider above the
   stage (see the "thinking" pulse below), so only the content beneath swaps. */
#inquiry-stage { position: relative; }
.inquiry-panel {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: translateY(0);
}
/* Form content self-centers via its own component rules (.lede, .form-note,
   etc). The chat is explicit left-aligned — streamed prose reads badly
   centered, and this holds regardless of where the widget renders its DOM. */
#inquiry-form-panel { text-align: center; }
#inquiry-chat-panel { text-align: left; }
#inquiry-chat-panel .lede { margin-bottom: 1.25rem; }
.inquiry-panel.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
  position: absolute;
  inset: 0;
  width: 100%;
}
.inquiry-panel.is-entering {
  opacity: 0;
  transform: translateY(10px);
}
.inquiry-panel.is-entered { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .inquiry-panel { transition: none; }
}

/* Lion "thinking" pulse — while the booking agent composes a reply. A slow
   glow breathe, not a bounce/scale (BRAND.md: subtle motion only). */
.lion--thinking { animation: lion-pulse 1.8s ease-in-out infinite; }
@keyframes lion-pulse {
  0%, 100% { filter: drop-shadow(0 2px 18px rgba(201, 162, 75, 0.25)); opacity: 1; }
  50% { filter: drop-shadow(0 2px 30px rgba(201, 162, 75, 0.6)); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .lion--thinking { animation: none; }
}

/* Booking chat widget (@n8n/chat) — retheme via its documented CSS custom
   properties to match the site palette instead of its purple/light default.
   Set on :root (not a scoped ancestor) because the widget appears to render
   its DOM outside #inquiry-chat-panel's subtree — scoped variables silently
   didn't reach it. Reference: BRAND.md §3/§4/§5. */
:root {
  --chat--color--primary: var(--gold);
  --chat--color--primary-shade-50: #b8913f;
  --chat--color--primary--shade-100: #a67f34;
  --chat--color--secondary: var(--gold);
  --chat--color-secondary-shade-50: #b8913f;
  --chat--color-white: var(--bg-dark);
  --chat--color-light: var(--bg-light);
  --chat--color-light-shade-50: #241d18;
  --chat--color-light-shade-100: #1f1915;
  --chat--color-medium: var(--gold-soft);
  --chat--color-dark: var(--cream);
  --chat--color-disabled: var(--cream-dim);
  --chat--color-typing: var(--gold);

  --chat--spacing: 1rem;
  --chat--border-radius: 2px;
  --chat--transition-duration: 0.25s;
  /* Sans-serif here specifically, not the site's EB Garamond body serif -
     streamed, small-size chat text reads noticeably easier in a clean
     system sans than in a display serif. Scoped to the chat only. */
  --chat--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --chat--window--width: 100%;
  --chat--window--height: 100%;
  --chat--window--border: 1px solid var(--gold-soft);
  --chat--window--border-radius: 2px;

  --chat--header-height: 0px;
  --chat--header--padding: 0;
  --chat--header--background: var(--bg-light);
  --chat--header--color: var(--gold);
  --chat--header--border-bottom: none;
  --chat--heading--font-size: 1.05rem;
  --chat--subtitle--font-size: 0.85rem;

  --chat--message--font-size: 0.92rem;
  --chat--message--padding: 0.7em 0.9em;
  --chat--message--border-radius: 2px;
  --chat--message--margin-bottom: 0.9rem;
  --chat--messages-list--padding: 1rem;
  --chat--message--bot--background: rgba(0, 0, 0, 0.2);
  --chat--message--bot--color: var(--cream-dim);
  --chat--message--bot--border: none;
  --chat--message--user--background: var(--gold);
  --chat--message--user--color: var(--bg-dark);
  --chat--message--user--border: 1px solid var(--gold);

  --chat--toggle--background: var(--gold);
  --chat--toggle--hover--background: var(--gold);
  --chat--toggle--active--background: var(--gold);
  --chat--toggle--color: var(--bg-dark);

  --chat--textarea--height: 3rem;
  /* Matches CHAT_INPUT_MAX_HEIGHT_PX in js/chat.js, which drives the actual
     grow-as-you-type resize (the widget's own JS wasn't doing it reliably). */
  --chat--textarea--max-height: 160px;
  --chat--input--border: 1px solid var(--gold-soft);
  --chat--input--border-radius: 2px;
  --chat--input--background: rgba(0, 0, 0, 0.2);
  --chat--input--text-color: var(--cream);
  --chat--input--border-active: var(--gold);
  --chat--input--font-size: 1rem;
  --chat--input--padding: 0.7em 0.9em;
  --chat--input--placeholder--font-size: 1rem;

  --chat--button--color--primary: var(--bg-dark);
  --chat--button--background--primary: var(--gold);
  --chat--button--border--primary: 1px solid var(--gold);
  --chat--button--color--primary--hover: var(--bg-dark);
  --chat--button--background--primary--hover: var(--gold);
  --chat--input--send--button--background: transparent;
  --chat--input--send--button--color: var(--gold);
  --chat--input--send--button--background-hover: transparent;
  --chat--input--send--button--color-hover: var(--cream);

  --chat--body--background: transparent;
  --chat--footer--background: var(--bg-light);
  --chat--footer--color: var(--cream-dim);
}
/* Exact structure (from devtools):
   #n8n-chat > main.chat-layout > .chat-header, .chat-body > .chat-messages-list, .chat-footer > .chat-input > .chat-inputs > textarea + .chat-inputs-controls > button
   #n8n-chat is a pure clip boundary; .chat-messages-list is the real
   scrollport. Flex children default to min-height:auto (never shrink below
   content), which is why the layout just kept growing instead of scrolling
   internally regardless of overflow on an outer wrapper - min-height:0 on
   every flexed ancestor is what actually fixes it. */
#n8n-chat {
  height: min(65vh, 640px);
  overflow: hidden;
}
/* Single background + border on the outer wrapper so messages and input
   read as one panel, not two separate boxes with a gap of raw page
   background between them (the input previously had its own independent
   border/background). */
#n8n-chat .chat-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-light) !important;
  border: 1px solid var(--gold-soft) !important;
  border-radius: 2px !important;
}
#n8n-chat .chat-body,
#n8n-chat .chat-messages-list,
#n8n-chat .chat-footer {
  background: transparent !important;
}
#n8n-chat .chat-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#n8n-chat .chat-messages-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-soft) transparent;
}
#n8n-chat .chat-messages-list::-webkit-scrollbar { width: 8px; }
#n8n-chat .chat-messages-list::-webkit-scrollbar-track { background: transparent; }
#n8n-chat .chat-messages-list::-webkit-scrollbar-thumb {
  background-color: var(--gold-soft);
  border-radius: 4px;
}
#n8n-chat .chat-messages-list::-webkit-scrollbar-thumb:hover { background-color: var(--gold); }

/* Paragraph spacing inside chat messages — same root cause as the list
   fix below: the site's global reset strips the browser's default <p>
   margin, so the agent's separate paragraphs (it already renders each as
   its own real <p>, confirmed via devtools) end up packed tight with no
   visual break between them. */
#n8n-chat .chat-message-markdown p {
  margin: 0 0 0.75em 0;
}
#n8n-chat .chat-message-markdown p:last-child { margin-bottom: 0; }

/* List indentation inside chat messages was collapsed by the site's own
   `* { margin:0; padding:0; }` reset (it applies document-wide, reaching
   into the widget's rendered content too) — restoring it explicitly here. */
#n8n-chat ol,
#n8n-chat ul {
  padding-left: 1.4em;
  margin: 0.5em 0;
}
#n8n-chat li { margin-bottom: 0.35em; }

/* Input row — real classes now (.chat-input wraps .chat-inputs, which holds
   the textarea and .chat-inputs-controls/.chat-input-send-button). Margin
   matches --chat--messages-list--padding so it lines up with the message
   content instead of sitting flush with the footer's edge (same root cause
   as the list-indentation fix: the global reset stripped the footer's own
   padding). */
/* Inset belongs on the footer (padding), not on .chat-input itself: that
   element has width:100% from the widget's own styles, and margin is never
   part of the box-sizing calculation, so adding margin on top of a 100%-wide
   box pushed it past the footer's edges instead of insetting it - which is
   exactly what caused the new horizontal scrollbar. */
/* Divider line instead of a separate bordered box - the footer is now part
   of the same panel as .chat-layout above, so the input just needs a
   visual separator, not its own background/border. */
#n8n-chat .chat-footer {
  padding: 1rem !important;
  margin: 0 !important;
  border-top: 1px solid var(--gold-soft) !important;
}
#n8n-chat .chat-input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
}
/* Focus affordance now that the input has no border of its own - the
   divider line brightens instead. */
#n8n-chat .chat-footer:focus-within { border-top-color: var(--gold) !important; }
#n8n-chat .chat-inputs { display: flex !important; align-items: center !important; }
#n8n-chat textarea[data-test-id="chat-input"] {
  background: transparent !important;
  border: none !important;
  color: var(--cream) !important;
  flex: 1 1 auto !important;
  padding: 0.7em 0.9em !important;
  overflow-y: auto !important;
}
#n8n-chat .chat-input-send-button {
  background: transparent !important;
  border: none !important;
  color: var(--gold) !important;
  cursor: pointer !important;
}
#n8n-chat .chat-input-send-button:hover:not(:disabled) { color: var(--cream) !important; }
#n8n-chat .chat-input-send-button:disabled { color: var(--gold-soft) !important; }

/* Header removal — exact class confirmed via devtools. */
#n8n-chat .chat-header { display: none !important; }

/* Map (Leaflet + CartoDB light "Positron" tiles) — themed to match the
   site rather than default Google-Maps chrome. See js/map.js for the init
   logic. A light basemap reads calmer than the site's own dark theme and
   keeps roads/labels naturally legible without needing tile filters. */
.map-frame {
  width: 100%;
  height: 460px;
  margin: 2rem 0 3rem;
  overflow: hidden;
  background: var(--cream);
}
.map-frame .leaflet-container {
  background: var(--cream);
  font-family: "EB Garamond", Georgia, serif;
}
/* Raster tiles can't be recolored directly, but a CSS filter gives
   continuous control over how light/dark the basemap reads — this is a
   middle ground between the plain light tiles and the (too dark) old
   theme. Adjust the brightness value to taste. */
.map-frame .leaflet-tile-pane {
  filter: brightness(0.9) saturate(0.85);
}
.map-marker span {
  display: block;
  width: 14px;
  height: 14px;
  background: var(--gold);
  border: 2px solid var(--bg-dark);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(26, 21, 18, 0.4);
}
/* The apartment's own marker — a diamond (echoes .divider's motif) instead
   of a dot, larger, so it reads as "home base" at a glance. */
.map-marker--home span {
  width: 11px;
  height: 11px;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 1px 5px rgba(26, 21, 18, 0.45);
}
.leaflet-popup-content-wrapper {
  background: var(--bg-light);
  color: var(--cream);
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.leaflet-popup-tip { background: var(--bg-light); }
.leaflet-popup-content h4 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.2rem;
}
.leaflet-popup-content p { margin: 0; font-size: 0.85rem; color: var(--cream-dim); }
.leaflet-control-attribution {
  background: rgba(26, 21, 18, 0.75) !important;
  color: var(--cream-dim) !important;
}
.leaflet-control-attribution a { color: var(--gold) !important; }
.leaflet-control-zoom a {
  background: var(--bg-light) !important;
  color: var(--cream) !important;
  border-color: var(--gold-soft) !important;
}
.leaflet-control-zoom a:hover { background: var(--bg-dark) !important; color: var(--gold) !important; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--gold-soft);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2.5rem);
  text-align: center;
  color: var(--cream-dim);
  font-size: 0.9rem;
}
.site-footer .brand { justify-content: center; margin-bottom: 0.8rem; }
.site-footer .lang-switch { margin-top: 0.6rem; }
.site-footer p { margin-top: 0.6rem; }
.footer-legal { margin-top: 0.8rem; font-size: 0.82rem; }
.footer-legal a {
  color: var(--cream-dim);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--gold); text-decoration-color: var(--gold); }

@media (min-width: 700px) {
  .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* Guest guide (printable in-apartment welcome sheet) */
.guide-page { min-height: 100vh; }
.guide-watermark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  transform: translateX(-50%);
}
.guide {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 4.5rem) clamp(1.25rem, 5vw, 2.5rem);
  z-index: 1;
}
.guide__header { text-align: center; margin-bottom: clamp(2rem, 6vw, 3rem); }
.guide__header .lion { width: 64px; height: auto; color: var(--gold); margin: 0 auto 1rem; display: block; }
.guide__header h1 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  color: var(--gold);
  text-shadow: 0 2px 18px rgba(201, 162, 75, 0.25);
}
.guide__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .guide__grid { grid-template-columns: 1fr 1fr; }
}
.guide__card {
  border: 1px solid var(--gold-soft);
  padding: 1.25rem 1.4rem;
}
.guide__card h2 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.guide__card h2 span { color: var(--cream-dim); font-weight: 400; letter-spacing: 0; }
.guide__card p { color: var(--cream-dim); font-size: 1.1rem; line-height: 1.55; margin-bottom: 0.6rem; }
.guide__card p:last-child { margin-bottom: 0; }
.guide__card a { color: var(--gold); text-decoration: none; }
.guide__card a:hover, .guide__card a:focus-visible { text-decoration: underline; }
.guide__card strong { color: var(--cream); }
.guide__qr { display: block; margin-top: 0.4rem; border: 1px solid var(--gold-soft); }
.guide__footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 105mm;
  text-align: center;
  margin-top: clamp(1rem, 3vw, 1.5rem);
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  color: var(--cream-dim);
}
.guide__closing-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.06;
  pointer-events: none;
}
.guide__closing-mark .lion { position: relative; top: -100px; width: 507px; height: auto; color: var(--gold); }
.guide__footer p { position: relative; z-index: 1; }

/* Wine list table (same guide-page shell, tabular instead of cards) */
.wine-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.wine-table th {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--gold);
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--gold-soft);
}
.wine-table td {
  padding: 0.75rem 0.7rem;
  border-bottom: 1px solid var(--gold-soft);
  color: var(--cream-dim);
  font-size: 1rem;
  vertical-align: top;
}
.wine-table td.wine-name { color: var(--cream); }
.wine-table td.wine-name strong { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.02em; color: var(--gold); display: block; margin-bottom: 0.2rem; }
.wine-table td.wine-price { white-space: nowrap; font-weight: 600; color: var(--cream); }
.wine-table td.wine-qty { text-align: center; white-space: nowrap; }
.wine-qty__line { display: inline-block; width: 3.2rem; border-bottom: 1px solid var(--gold-soft); }
.wine-note {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--cream-dim);
  text-align: center;
}
.wine-total {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--gold-soft);
  text-align: right;
  font-family: "Cinzel", serif;
  letter-spacing: 0.04em;
  color: var(--gold);
}

@media print {
  @page { size: A4; margin: 15mm; }
  .guide-page { background: #ffffff !important; }
  .guide { max-width: 100%; padding: 0; }
  .guide-watermark { color: var(--gold); opacity: 0.08; }
  .guide__closing-mark { opacity: 0.08; }
  .guide__header { margin-bottom: 1.5rem; }
  .guide__header h1 { color: #5c4419; text-shadow: none; }
  .guide__header .lion { color: #5c4419; }
  .guide__grid { gap: 0.9rem; }
  .guide__card { border-color: #d8c8a0; padding: 1rem 1.1rem; break-inside: avoid; }
  .guide__card h2 { color: #5c4419; }
  .guide__card h2 span,
  .guide__card p,
  .guide__footer { color: #1a1512; }
  .guide__card a { color: #5c4419; }
  .guide__card strong { color: #1a1512; }
  .guide__footer { margin-top: 1.5rem; break-inside: avoid; }
  .wine-table { margin-top: 0.6rem; }
  .wine-table th { color: #5c4419; border-color: #d8c8a0; padding: 0.4rem 0.6rem; }
  .wine-table td { color: #1a1512; border-color: #d8c8a0; padding: 0.5rem 0.6rem; font-size: 0.92rem; line-height: 1.35; break-inside: avoid; }
  .wine-table td.wine-name strong { color: #5c4419; }
  .wine-table td.wine-price { color: #1a1512; }
  .wine-qty__line { border-color: #8a7a55; }
  .wine-note { color: #1a1512; margin-top: 0.5rem; }
  .wine-total { color: #5c4419; border-color: #d8c8a0; margin-top: 0.9rem; padding: 0.6rem 0.9rem; }
}

/* Door sign (printable "closed" notice) */
.sign-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sign {
  position: relative;
  width: 100%;
  max-width: 46rem;
  padding: clamp(2rem, 8vw, 4rem);
  text-align: center;
}
.sign__lion {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 105%;
  height: auto;
  transform: translate(-50%, -50%);
  color: var(--gold);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}
.sign__content { position: relative; z-index: 1; }
.sign__line {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: clamp(2.6rem, 11vw, 6rem);
  color: var(--gold);
  line-height: 1.15;
  text-shadow: 0 2px 24px rgba(201, 162, 75, 0.3);
}
.sign__divider { margin: clamp(1.2rem, 5vw, 2.2rem) auto; width: 45%; }
.sign__divider--wide { margin-bottom: clamp(2.6rem, 11vw, 4.8rem); }
.sign__line--sub { font-size: clamp(1.2rem, 4.6vw, 2.2rem); margin-top: 0.3rem; white-space: nowrap; }
.sign__note {
  margin-top: clamp(1.2rem, 4vw, 2rem);
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: var(--cream-dim);
}
.sign__note a { color: inherit; text-decoration: none; }

@media print {
  @page { size: A4; margin: 20mm; }
  .sign-page { background: #ffffff !important; min-height: auto; }
  .sign__lion { color: var(--gold); opacity: 0.15; }
  .sign__line { color: #1a1512; text-shadow: none; }
  .sign__note { color: #1a1512; }
}

/* Online check-in wizard */
.checkin-page { min-height: 100vh; }
.checkin-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
}
.brand-mark {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 1rem;
  color: var(--gold);
}
.lang-flags { display: flex; gap: 0.5rem; }
.lang-flag {
  width: 28px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-flag:hover,
.lang-flag:focus-visible { opacity: 0.85; }
.lang-flag.is-active { opacity: 1; border-color: var(--gold); }

.checkin {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 5vw, 2.5rem) clamp(3rem, 8vw, 4.5rem);
  text-align: center;
}
.checkin .lion { width: clamp(80px, 16vw, 120px); }
.checkin h1 {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
}

.step-progress {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.5rem 0 2.5rem;
}
.step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-soft);
}
.step-dot.is-active { background: var(--gold); }

.step-panel h2 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.checkin-form { text-align: left; }

.nights-display {
  text-align: center;
  font-family: "Cinzel", serif;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: 0.95rem;
  min-height: 1.2em;
}

.info-box {
  border: 1px solid var(--gold-soft);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  background: rgba(201, 162, 75, 0.05);
}
.info-box h3 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.info-box p {
  color: var(--cream-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}

.form select {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  padding: 0.7em 0.9em;
  color: var(--cream);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1rem;
}
.form select:focus { outline: none; border-color: var(--gold); }

.segmented {
  display: flex;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  overflow: hidden;
}
.segmented__option {
  flex: 1;
  text-align: center;
  margin: 0 !important;
  padding: 0.7em 0.5em;
  cursor: pointer;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 0.9rem;
  color: var(--cream-dim);
  border-right: 1px solid var(--gold-soft);
  transition: background 0.2s ease, color 0.2s ease;
}
.segmented__option:last-child { border-right: none; }
.segmented__option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__option:has(input:checked) {
  background: var(--gold);
  color: var(--bg-dark);
}
.segmented__option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.35;
}

.guest-card {
  border: 1px solid var(--gold-soft);
  border-radius: 3px;
  padding: 1.3rem clamp(1rem, 4vw, 1.6rem);
  margin-bottom: 1.5rem;
  display: grid;
  gap: 1.1rem;
}
.guest-card legend {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: 1rem;
  padding: 0 0.4em;
}
.guest-card__main-fields {
  display: grid;
  gap: 1.1rem;
  border-top: 1px solid var(--gold-soft);
  padding-top: 1.1rem;
  margin-top: 0.2rem;
}
.guest-card__main-fields h4 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: 0.9rem;
}
.field-note {
  font-size: 0.8rem;
  color: var(--cream-dim);
  font-style: italic;
  margin-top: 0.3rem;
}

.step-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.btn--ghost {
  color: var(--cream-dim);
  border-color: var(--gold-soft);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

.checkin-summary,
.tax-summary {
  text-align: left;
  max-width: 32rem;
  margin: 1.5rem auto;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--gold-soft);
  border-radius: 3px;
  color: var(--cream-dim);
}
.checkin-summary p,
.tax-summary p { margin-bottom: 0.5rem; }
.tax-summary h3 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.tax-summary__line {
  font-family: "Cinzel", serif;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.checkin-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--gold-soft);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2.5rem);
  text-align: center;
  color: var(--cream-dim);
  font-size: 0.9rem;
}

@media (min-width: 600px) {
  .step-actions { justify-content: flex-end; }
}

/* Arcade machine instructions (printable guest guide) */
.arcade-kicker {
  text-align: center;
  margin-bottom: 1.5rem;
}
.arcade-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.arcade-step {
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: 1rem clamp(1rem, 4vw, 1.5rem);
}
.arcade-step__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.arcade-step__number {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arcade-step__header h2 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: clamp(0.9rem, 2.6vw, 1.05rem);
  color: var(--gold);
  margin: 0;
}
.arcade-step__header h2 span { color: var(--cream-dim); font-weight: 400; letter-spacing: 0; }
.arcade-step__media {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.arcade-step__photo {
  width: 170px;
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--gold-soft);
  border-radius: 3px;
}
.arcade-step__body p {
  color: var(--cream-dim);
  line-height: 1.5;
  font-size: 0.95rem;
}
.arcade-lang {
  display: block;
  margin-top: 0.6rem;
}
.arcade-lang:first-child { margin-top: 0; }
.arcade-lang__tag {
  display: inline-block;
  margin-right: 0.4em;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 0.7em;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.arcade-step--inline .arcade-step__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.arcade-step--inline .arcade-step__media { margin-bottom: 0; flex: 0 0 auto; }
.arcade-step--inline .arcade-step__body { flex: 1 1 12rem; }
.arcade-page .guide__footer { min-height: 0; }

@media print {
  .arcade-kicker { color: #5c4419; margin-bottom: 0.3rem; }
  .arcade-steps { gap: 0.25rem; }
  .arcade-step { border-color: #d8c8a0; break-inside: avoid; padding: 0.26rem 0.7rem; }
  .arcade-step__header { margin-bottom: 0.15rem; gap: 0.5rem; }
  .arcade-step__number { width: 1.25rem; height: 1.25rem; font-size: 0.66rem; border-color: #5c4419; color: #5c4419; }
  .arcade-step__header h2 { font-size: 0.82rem; color: #5c4419; }
  .arcade-step__header h2 span,
  .arcade-step__body p { color: #1a1512; }
  .arcade-step__body p { font-size: 0.89rem; line-height: 1.22; }
  .arcade-lang { margin-top: 0.22rem; }
  .arcade-lang:first-child { margin-top: 0; }
  .arcade-lang__tag { color: #5c4419; }
  .arcade-step__media { margin-bottom: 0.16rem; gap: 0.3rem; }
  .arcade-step__photo { width: 115px; border-color: #d8c8a0; }
  .arcade-page .guide__footer { margin-top: 0.3rem; font-size: 0.79rem; }
}