/* =====================================================================
   TOKENS
   ===================================================================== */
:root {
  /* Dark surfaces: refined charcoal, matches Ennios's brand primary (#333) but
     a hair deeper for typographic contrast on screen. */
  --ink: #2A2A2A;
  --ink-soft: #3A3A3A;
  --ink-bevel: #4A4A4A;

  /* Light surfaces: clean white with one subtle off-white step. */
  --paper: #FFFFFF;
  --paper-alt: #F6F4F0;
  --rule: #E6E3DE;

  /* Body text */
  --text: #2A2A2A;
  --text-soft: #6B6B6B;

  /* Cream: used for body copy on dark surfaces (so it doesn't shout). */
  --cream: #F2EEE6;
  --cream-soft: #E8E4DA;

  /* Gold: the single accent, used sparingly and only on dark surfaces. */
  --gold: #C9A063;
  --gold-soft: #A88450;
  --gold-glow: rgba(201, 160, 99, .38);

  /* Kept defined but no longer applied (left here so the token can be
     reintroduced for a seasonal palette without re-plumbing the file. */
  --maroon: #5E120B;
  --forest: #0C3D1C;

  --display: 'belda-normal', 'Times New Roman', 'Georgia', serif;
  --display-cond: 'belda-condensed', 'belda-normal', serif;
  --body: 'General Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --sidebar-w: 320px;
  --maxw: 1280px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
html {
  scroll-behavior: smooth;
  /* Slightly stretchier wheel-scroll feel on supported browsers without
     reaching for a library (Lenis is a known AI-default fingerprint per
     the design rubric). */
  scroll-padding-top: 24px;
}
body {
  overscroll-behavior-y: contain;
}
body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  font-feature-settings: 'ss01' 1, 'ss02' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* =====================================================================
   SHARED PRIMITIVES
   ===================================================================== */
.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow.dark { color: var(--text-soft); letter-spacing: .28em; }
.stars {
  letter-spacing: .35em;
  color: var(--gold);
  font-size: 14px;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: inherit;
  letter-spacing: -0.012em;
  line-height: 1.05;
}
h1 { font-weight: 300; }
h3, h4 { font-weight: 500; letter-spacing: -0.005em; }
.display-1 { font-size: clamp(40px, 6.2vw, 88px); }
.display-2 { font-size: clamp(32px, 4.4vw, 60px); }
.display-3 { font-size: clamp(24px, 2.4vw, 34px); }
em.script, .script,
h1 em, h2 em, h3 em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.lede {
  font-size: clamp(14.5px, 1.02vw, 17px);
  line-height: 1.65;
  color: var(--text-soft);
  font-weight: 400;
  max-width: 50ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border: 1px solid var(--gold);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: transparent;
  transition: background .28s var(--ease), color .28s var(--ease), letter-spacing .28s var(--ease);
}
.btn:hover { background: var(--gold); color: var(--ink); letter-spacing: .26em; }
.btn.solid { background: var(--gold); color: var(--ink); }
.btn.solid:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn.ghost { color: var(--text); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--cream); }

/* Arch primitive: single source of truth.
   Matches the Ennios building's Victorian-warehouse window shape:
   a tall portrait rectangle (3:5) with a SHALLOW segmental arch on top,
   not a Roman half-circle. Vertical radius is 12% of height so the
   arch rise is roughly 20% of the box width (a chord of a large circle).
   Combined with 50% horizontal radius this produces a flattened ellipse
   cap that reads as the same shape as the windows above the awnings. */
.arch {
  border-radius: 50% 50% 0 0 / 12% 12% 0 0;
  overflow: hidden;
  isolation: isolate;
}
.arch-img {
  position: relative;
  aspect-ratio: 3 / 5;
  background: #2A2220;
}
.arch-img img {
  width: 100%; height: 100%; object-fit: cover;
}

/* =====================================================================
   SIDEBAR (desktop) / DRAWER (mobile)
   ===================================================================== */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 36px 30px 32px;
  z-index: 60;
  border-right: 1px solid rgba(244, 236, 222, .06);
}
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(201, 160, 99, .06), transparent 60%),
    radial-gradient(80% 50% at 50% 100%, rgba(255, 255, 255, .04), transparent 65%);
  pointer-events: none;
}
.sidebar > * { position: relative; }

.brand {
  display: block;
  text-align: center;
  margin: 8px auto 36px;
  padding: 0 6px;
}
.brand img {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}

.nav {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}
.nav a {
  display: block;
  padding: 12px 18px;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--cream);
  border-left: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.nav a:hover, .nav a.active {
  border-left-color: var(--gold);
  color: var(--gold);
  padding-left: 16px;
}

.sidebar-foot {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(244, 236, 222, .08);
}
.sidebar-foot .phone-badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gold);
  display: grid; place-items: center;
  color: var(--gold);
}
.sidebar-foot .phone-num {
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  color: var(--cream);
  letter-spacing: .02em;
}
.sidebar-foot .phone-hint {
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(244, 236, 222, .55);
}
.sidebar-foot .socials {
  display: flex; gap: 10px;
  margin-top: 8px;
}
.sidebar-foot .socials a {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream);
  border: 1px solid rgba(244, 236, 222, .18);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.sidebar-foot .socials a:hover { color: var(--gold); border-color: var(--gold); }

/* Mobile top bar (hidden by default on desktop) */
.topbar { display: none; }
.drawer-scrim { display: none; }

/* =====================================================================
   MAIN
   ===================================================================== */
main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 660px;
  max-height: 980px;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
}
.hero-slides {
  /* Extends 15% above the hero so the parallax translate (image moves
     slightly downward as the user scrolls down — slower than content)
     never reveals a gap at the hero top. The hero has overflow: hidden. */
  position: absolute;
  top: -15%; bottom: 0;
  left: 0; right: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s var(--ease), transform 12s linear;
  transform: scale(1.04);
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1.12);
}
.hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(27,22,20,.35) 0%, rgba(27,22,20,.05) 30%, rgba(27,22,20,.55) 100%),
    radial-gradient(80% 60% at 50% 50%, transparent 30%, rgba(27,22,20,.55) 100%);
}
.hero-inner {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 72px 36px 130px;
}
.hero-arch {
  /* Same segmental-arch shape as the building windows.
     Aspect 4:5 here (a bit wider than the regular arches so the headline
     and lede fit comfortably). v-radius 16% keeps the rise-as-%-of-width
     equal to the 12% / 3:5 arches elsewhere on the page. */
  position: relative;
  width: min(620px, 80vw);
  aspect-ratio: 4 / 5;
  padding: clamp(36px, 4.5vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 22px;
  border-radius: 50% 50% 8px 8px / 16% 16% 8px 8px;
  background: rgba(27, 22, 20, .42);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid var(--gold-glow);
  box-shadow: inset 0 0 0 1px rgba(244,236,222,.04), 0 30px 80px rgba(0,0,0,.35);
}
.hero-arch::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(244,236,222,.08);
  border-radius: 50% 50% 4px 4px / 16% 16% 4px 4px;
  pointer-events: none;
}
.hero-arch h1 {
  font-size: clamp(36px, 5.2vw, 76px);
  font-weight: 400;
}
.hero-arch h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.hero-arch .lede {
  color: rgba(244, 236, 222, .82);
  font-size: clamp(14px, 1.1vw, 16.5px);
  max-width: 42ch;
}

.hero-meta {
  position: absolute;
  bottom: 36px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 48px;
  pointer-events: none;
  color: rgba(244, 236, 222, .8);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
/* =====================================================================
   RESERVATION STRIP
   ===================================================================== */
.reservation {
  background: var(--ink);
  color: var(--cream);
  padding: 38px clamp(32px, 5vw, 72px);
  position: relative;
}
.reservation::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, rgba(201,160,99,.06) 100%);
  pointer-events: none;
}
.reservation-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
.reservation-label {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.reservation-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.field label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(244, 236, 222, .55);
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244, 236, 222, .2);
  color: var(--cream);
  font-family: var(--display);
  font-size: 17px;
  padding: 6px 0;
  font-weight: 400;
}
.field input:focus, .field select:focus {
  outline: 0;
  border-bottom-color: var(--gold);
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.85) sepia(.4) saturate(2) hue-rotate(0deg);
  cursor: pointer;
}
.reservation-ctas {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
}

/* =====================================================================
   WELCOME
   ===================================================================== */
.welcome {
  padding: clamp(96px, 10vw, 168px) clamp(32px, 5vw, 72px);
  background: var(--paper);
}
.welcome-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
.welcome-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.welcome-center h2 {
  max-width: 14ch;
  font-size: clamp(32px, 3.6vw, 52px);
}
.welcome-center h2 em { font-style: italic; color: var(--ink); font-weight: 500; }
.welcome-rating {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.welcome-rating .label {
  font-size: 13px; color: var(--text-soft);
}
.welcome-side .arch-img { aspect-ratio: 3 / 5; }

/* =====================================================================
   AMENITIES (three arch cards)
   ===================================================================== */
.amenities {
  padding: clamp(48px, 7vw, 88px) clamp(32px, 5vw, 72px) clamp(96px, 10vw, 168px);
  background: var(--paper);
}
.amenities-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.6vw, 40px);
}
.amenity-card {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 56px 40px 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.amenity-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 24px 48px -28px rgba(94,18,11,.2);
}
.amenity-icon {
  /* Same segmental shape (3:5 + 12% v-radius) as every other arch on
     the page. Width 72 → height 120, reading as a small window. */
  width: 72px;
  aspect-ratio: 3 / 5;
  background: var(--ink);
  border-radius: 50% 50% 4px 4px / 12% 12% 4px 4px;
  display: grid;
  place-items: center;
  color: var(--cream);
  margin-bottom: 6px;
  padding-top: 14px;
  box-shadow: inset 0 -10px 24px rgba(0,0,0,.3);
}
.amenity-card h3 {
  font-size: clamp(20px, 1.4vw, 24px);
  letter-spacing: .01em;
}
.amenity-card p {
  color: var(--text-soft);
  font-size: 14px;
  max-width: 28ch;
}

/* =====================================================================
   STORY
   ===================================================================== */
.story {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(112px, 11vw, 192px) clamp(32px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}
.story::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 720px; height: 720px;
  background: radial-gradient(closest-side, rgba(201,160,99,.12), transparent 70%);
  pointer-events: none;
}
.story-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6.5vw, 112px);
  align-items: center;
}
.story-copy h2 {
  font-size: clamp(34px, 4vw, 58px);
  margin: 16px 0 24px;
}
.story-copy h2 em { font-style: italic; color: var(--gold); font-weight: 500; }
.story-copy p {
  color: rgba(244,236,222,.75);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.75;
  max-width: 56ch;
}
.story-copy p + p { margin-top: 18px; }
.story-copy .signature {
  margin-top: 30px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.story-copy .signature .name {
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  color: var(--gold);
}
.story-copy .signature .role {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(244,236,222,.55);
}
.story-portrait {
  position: relative;
  max-width: 420px;
  justify-self: end;
}
.story-portrait .arch-img {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--gold-glow);
}
.story-portrait::before {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--gold-glow);
  border-radius: 50% 50% 4px 4px / 12% 12% 4px 4px;
  pointer-events: none;
}

/* =====================================================================
   ROOMS
   ===================================================================== */
.rooms {
  padding: clamp(112px, 11vw, 192px) clamp(32px, 5vw, 72px);
  background: var(--paper-alt);
}
.rooms-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}
.rooms-head h2 {
  font-size: clamp(32px, 3.8vw, 54px);
  max-width: 18ch;
  color: var(--ink);
}
.rooms-head h2 em { font-style: italic; color: var(--ink); font-weight: 500; }
.rooms-head .lede { color: var(--text); }
.rooms-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.4vw, 36px);
}
.room-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.room-card .arch-img {
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(42,42,42,.12);
  transition: transform .4s var(--ease);
}
.room-card:hover .arch-img { transform: translateY(-4px); }
.room-card .arch-img img { transition: transform .8s var(--ease); }
.room-card:hover .arch-img img { transform: scale(1.05); }
.room-card h3 {
  font-size: 19px;
  color: var(--ink);
  margin-top: 4px;
}
.room-card .meta {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.room-card .price {
  margin-top: 6px;
  font-family: var(--display);
  font-style: italic;
  color: var(--ink);
  font-size: 16px;
}

/* =====================================================================
   AWARDS
   ===================================================================== */
.awards {
  padding: clamp(96px, 10vw, 144px) clamp(32px, 5vw, 72px);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.awards-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.awards-head {
  text-align: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.awards-head h3 {
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--ink);
  font-weight: 400;
  max-width: 28ch;
}
.awards-group + .awards-group { margin-top: 56px; }
.awards-label {
  font-family: var(--body);
  text-align: center;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 28px;
  position: relative;
}
.awards-label::before, .awards-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: var(--rule);
}
.awards-label::before { right: calc(50% + 90px); }
.awards-label::after { left: calc(50% + 90px); }
.awards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  justify-items: center;
}
.awards-row.primary img { height: 104px; width: auto; }
.awards-row.secondary img { max-height: 56px; max-width: 100%; }
.awards-row img {
  object-fit: contain;
  filter: opacity(.92);
  transition: filter .3s var(--ease), transform .3s var(--ease);
}
.awards-row img:hover { filter: opacity(1); transform: translateY(-2px); }
/* Corriere della Sera ships as white-on-transparent; invert for white bg. */
.awards-row img[src*="corriere"] { filter: invert(1) opacity(.85); }
.awards-row img[src*="corriere"]:hover { filter: invert(1) opacity(1); }

/* =====================================================================
   CTA ARCH
   ===================================================================== */
.cta-arch {
  position: relative;
  padding: clamp(144px, 13vw, 224px) clamp(32px, 5vw, 72px);
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.cta-arch-bg {
  position: absolute;
  inset: 0;
  background: url('img/hero-109.webp') center/cover no-repeat;
  transform: scale(1.05);
  z-index: -2;
}
.cta-arch::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,22,20,.7), rgba(27,22,20,.6));
  z-index: -1;
}
.cta-arch h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  max-width: 22ch;
  margin: 0 auto 14px;
}
.cta-arch h2 em { font-style: italic; color: var(--gold); font-weight: 500; }
.cta-arch p {
  color: rgba(244,236,222,.75);
  margin-bottom: 36px;
  font-size: 14px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer.site-foot {
  background: var(--ink);
  color: rgba(244, 236, 222, .7);
  padding: clamp(88px, 9vw, 128px) clamp(32px, 5vw, 72px) 40px;
  font-size: 14px;
}
.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.foot-brand img.logo {
  max-width: 180px;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.foot-brand p {
  max-width: 32ch;
  line-height: 1.7;
}
.foot-col h4 {
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 18px;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-col a:hover { color: var(--cream); }
.foot-bottom {
  max-width: var(--maxw);
  margin: 60px auto 0;
  border-top: 1px solid rgba(244,236,222,.1);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(244,236,222,.45);
  letter-spacing: .06em;
}
.foot-bottom .ornament {
  /* Tiny version of the segmental window arch (3:5 + 12% v-radius). */
  width: 22px;
  aspect-ratio: 3 / 5;
  border-radius: 50% 50% 0 0 / 12% 12% 0 0;
  border: 1px solid var(--gold);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  .reservation-inner { grid-template-columns: 1fr; gap: 18px; }
  .reservation-fields { grid-template-columns: repeat(4, 1fr); }
  .reservation-ctas { justify-content: flex-start; }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    transition: transform .35s var(--ease);
  }
  .sidebar.open { transform: translateX(0); }
  .drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(27,22,20,.65);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease);
    z-index: 55;
  }
  .drawer-scrim.show { opacity: 1; pointer-events: auto; }
  main { margin-left: 0; padding-top: 64px; }
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 18px;
    background: var(--ink);
    color: var(--cream);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(244,236,222,.08);
  }
  .topbar .brand-line {
    display: block;
    height: 38px;
  }
  .topbar .brand-line img {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
  }
  .topbar .hamburger {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid rgba(244,236,222,.18);
    border-radius: 50%;
  }
  .topbar .topbar-phone {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
  }

  .hero { min-height: 600px; }
  .welcome-inner { grid-template-columns: 1fr; }
  .welcome-side { display: none; }
  .amenities-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .story-inner { grid-template-columns: 1fr; }
  .story-portrait { justify-self: center; max-width: 320px; }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .rooms-head { grid-template-columns: 1fr; }
  .awards-label::before, .awards-label::after { display: none; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  /* Phone: tighten hero-inner horizontal padding and constrain the grid track
     to the parent width. Without minmax(0, 1fr) the auto track expands to the
     arch's intrinsic 92vw width and the cell starts at the left padding edge,
     pushing the arch off-screen right. */
  .hero-inner {
    padding-left: 16px;
    padding-right: 16px;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-arch {
    width: min(420px, 100%);
    aspect-ratio: 4 / 5;
    padding: 28px 22px;
    border-radius: 50% 50% 6px 6px / 26% 26% 6px 6px;
  }
  .hero-meta { padding: 0 20px; bottom: 22px; font-size: 11px; }
  .reservation-fields { grid-template-columns: 1fr 1fr; }
  .rooms-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .awards-row { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .awards-row.primary img { max-height: 90px; }
  .awards-row.secondary img { max-height: 54px; }
  .foot-inner { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; gap: 14px; text-align: center; }
}

/* =====================================================================
   PAGE-LOAD REVEAL
   ===================================================================== */
@keyframes lift {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-arch > * { opacity: 0; animation: lift .9s var(--ease) forwards; }
.hero-arch > *:nth-child(1) { animation-delay: .25s; }
.hero-arch > *:nth-child(2) { animation-delay: .45s; }
.hero-arch > *:nth-child(3) { animation-delay: .65s; }
.hero-arch > *:nth-child(4) { animation-delay: .85s; }

/* =====================================================================
   ROOM LISTINGS: Booking.com-style horizontal cards for the rooms page.
   ===================================================================== */
.room-listings {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}
.room-listing {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.room-listing:hover {
  box-shadow: 0 24px 60px -36px rgba(42, 42, 42, .25);
  transform: translateY(-2px);
}
.room-listing__photo {
  aspect-ratio: 4 / 3;
  background: var(--ink-soft);
  overflow: hidden;
}
.room-listing__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.room-listing:hover .room-listing__photo img { transform: scale(1.04); }
.room-listing__content {
  padding: clamp(32px, 3vw, 48px) clamp(32px, 3vw, 48px) clamp(32px, 3vw, 48px) 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.room-listing__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 34px);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.1;
}
.room-listing__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  font-size: 11.5px;
  color: var(--text-soft);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
}
.room-listing__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.room-listing__meta-item svg { color: var(--gold-soft); }
.room-listing__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
}
.room-listing__amenity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.room-listing__amenity svg { color: var(--text-soft); flex-shrink: 0; }
.room-listing__description {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 26px;
  flex: 1;
}
.room-listing__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.room-listing__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.room-listing__price-from {
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.room-listing__price-value {
  font-family: var(--display);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  line-height: 1;
}
.room-listing__price-note {
  font-size: 11.5px;
  color: var(--text-soft);
  margin-top: 4px;
  letter-spacing: .04em;
}
.room-listing__cta { white-space: nowrap; }

@media (max-width: 1024px) {
  .room-listing { grid-template-columns: 1fr; gap: 0; }
  .room-listing__photo { aspect-ratio: 16 / 10; }
  .room-listing__content { padding: clamp(24px, 3vw, 32px); }
}

/* =====================================================================
   MENU LIST: a tidy grid of menu PDFs.
   ===================================================================== */
.menu-list {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(20px, 2.2vw, 28px);
}
.menu-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 28px 28px;
  background: #fff;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.menu-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(42, 42, 42, .25);
}
.menu-card__icon {
  width: 48px;
  aspect-ratio: 3 / 5;
  border-radius: 50% 50% 2px 2px / 12% 12% 2px 2px;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: var(--cream);
  margin-bottom: 6px;
}
.menu-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.2;
}
.menu-card__note {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.menu-card__action {
  margin-top: 8px;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* =====================================================================
   BOOKING PANEL: slides in from the right when "Book this room" is clicked.
   ===================================================================== */
.booking-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 22, 20, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.booking-panel-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.booking-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100%;
  background: #fff;
  color: var(--text);
  z-index: 101;
  transform: translateX(100%);
  transition: transform .42s var(--ease);
  display: flex;
  flex-direction: column;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  box-shadow: -32px 0 80px -32px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.booking-panel.open { transform: translateX(0); }
.booking-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--rule);
  gap: 16px;
}
.booking-panel__head-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.booking-panel__eyebrow {
  font-family: var(--body);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.booking-panel__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.booking-panel__sub {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.booking-panel__close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.booking-panel__close:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.booking-panel__photo {
  aspect-ratio: 16 / 9;
  background: var(--ink-soft);
  overflow: hidden;
  flex-shrink: 0;
}
.booking-panel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.booking-panel__body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  overflow-y: auto;
}
.booking-panel__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.booking-panel__form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.booking-panel__form label {
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.booking-panel__form input,
.booking-panel__form select {
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 17px;
  padding: 8px 0;
  background: transparent;
  color: var(--ink);
  width: 100%;
}
.booking-panel__form input:focus,
.booking-panel__form select:focus {
  outline: 0;
  border-bottom-color: var(--gold);
}
.booking-panel__form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(.35);
}
.booking-panel__price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.booking-panel__price-from {
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 2px;
}
.booking-panel__price-value {
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}
.booking-panel__price-note {
  font-size: 11.5px;
  color: var(--text-soft);
  text-align: right;
  max-width: 14ch;
  line-height: 1.4;
}
.booking-panel__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.booking-panel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 28px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), letter-spacing .25s var(--ease);
}
.booking-panel__cta:hover {
  background: var(--gold);
  color: var(--ink);
  letter-spacing: .26em;
}
.booking-panel__footnote {
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.55;
  text-align: center;
}

/* The room-listing photo is now a button — keep it visually a clickable image */
button.room-listing__photo {
  border: 0;
  padding: 0;
  background: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

@media (max-width: 640px) {
  .booking-panel {
    width: 100%;
    border-radius: 0;
  }
  .booking-panel__header { padding: 22px 24px 18px; }
  .booking-panel__body { padding: 22px 24px 26px; }
}

/* "Your stay" indicator — shows under the rooms heading once dates exist */
.your-stay {
  margin-top: 18px;
  display: inline-block;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* =====================================================================
   MENU BROWSER: tabbed, fully browsable menus baked into the page.
   ===================================================================== */
.menu-browser {
  padding: clamp(60px, 8vw, 110px) clamp(24px, 5vw, 64px) clamp(80px, 9vw, 120px);
  background: var(--paper-alt);
  position: relative;
}
.menu-browser__inner {
  max-width: 980px;
  margin: 0 auto;
}

/* --- Tabs --------------------------------------------------------- */
.menu-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(clamp(24px, 5vw, 64px) * -1) clamp(28px, 4vw, 44px);
  padding: 0 clamp(24px, 5vw, 64px);
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
}
.menu-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 0 0;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-soft);
  letter-spacing: .01em;
  padding: 14px 18px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.menu-tab:hover { color: var(--ink); }
.menu-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.menu-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Panels ------------------------------------------------------- */
.menu-panels { position: relative; }
.menu-panel {
  display: none;
  animation: menuFade .35s var(--ease);
}
.menu-panel.is-active { display: block; }
@keyframes menuFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu-panel__head {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.menu-panel__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 42px);
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 12px;
}
.menu-panel__subtitle {
  font-family: var(--body);
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto;
}

/* --- Sections ----------------------------------------------------- */
.menu-section {
  margin: 0 0 clamp(36px, 4.5vw, 56px);
  padding: 0;
}
.menu-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.menu-section__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 28px);
  color: var(--ink);
  letter-spacing: .005em;
  margin: 0;
  line-height: 1.1;
}
.menu-section__sub {
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 500;
}
.menu-section__intro {
  font-family: var(--body);
  color: var(--text-soft);
  font-size: 14px;
  margin: -6px 0 18px;
  font-style: italic;
}
.menu-section__notes {
  font-family: var(--body);
  color: var(--text-soft);
  font-size: 13px;
  margin: 14px 0 0;
  font-style: italic;
  line-height: 1.55;
}

/* --- Items -------------------------------------------------------- */
.menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.menu-item {
  padding: 4px 0;
}
.menu-item__line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.menu-item__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(15.5px, 1.45vw, 17px);
  color: var(--ink);
  line-height: 1.3;
  flex-shrink: 0;
}
.menu-item__tags {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: baseline;
}
.menu-item__tag {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: var(--cream);
  border: 1px solid var(--cream-soft);
  border-radius: 3px;
  line-height: 1.4;
  cursor: help;
}
.menu-item__leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--rule);
  align-self: end;
  margin: 0 4px 6px;
  min-width: 18px;
}
.menu-item__price {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(15.5px, 1.45vw, 17px);
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}
.menu-item__price-value { display: inline; }
.menu-item__pricenote {
  display: block;
  font-family: var(--body);
  font-style: italic;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-soft);
  letter-spacing: .01em;
  margin-top: 2px;
}
.menu-item__desc {
  font-family: var(--body);
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 4px;
  padding-right: 12%;
}
.menu-item__pair {
  font-family: var(--body);
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: .04em;
  margin-top: 4px;
  font-style: italic;
}

/* --- Panel footer (PDF link + notes) ------------------------------ */
.menu-panel__notes {
  font-family: var(--body);
  color: var(--text-soft);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  margin: clamp(28px, 4vw, 40px) auto 0;
  max-width: 56ch;
  line-height: 1.6;
}
.menu-panel__foot {
  margin-top: clamp(32px, 4.5vw, 48px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.menu-panel__pdf {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.menu-panel__pdf:hover {
  background: var(--ink);
  color: var(--cream);
}

/* --- Legend + allergen notice ------------------------------------- */
.menu-legend {
  margin-top: clamp(60px, 7vw, 90px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  justify-content: center;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--text-soft);
}
.legend-chip__tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: var(--cream);
  border: 1px solid var(--cream-soft);
  border-radius: 3px;
}
.menu-allergens {
  font-family: var(--body);
  font-style: italic;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 60ch;
  text-align: center;
  margin: 18px auto 0;
}

/* --- Mobile tweaks ------------------------------------------------ */
@media (max-width: 720px) {
  .menu-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .menu-item__line {
    flex-wrap: wrap;
  }
  .menu-item__name {
    flex: 1 1 auto;
  }
  .menu-item__leader {
    display: none;
  }
  .menu-item__desc {
    padding-right: 0;
  }
  .menu-tab {
    padding: 12px 14px 14px;
    font-size: 15px;
  }
}

/* =====================================================================
   GALLERY: masonry via CSS columns + filter chips + lightbox.
   ===================================================================== */
.gallery-section {
  padding: clamp(60px, 7vw, 110px) clamp(24px, 5vw, 64px) clamp(80px, 9vw, 130px);
  background: var(--paper);
}

/* --- Filter chips: editorial italic text, not generic buttons --- */
.gallery-chips {
  max-width: var(--maxw);
  margin: 0 auto clamp(40px, 5vw, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  justify-content: center;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
}
.gallery-chip {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  padding: 8px 4px 10px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--text-soft);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.gallery-chip:hover { color: var(--ink); }
.gallery-chip.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.gallery-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- Masonry: CSS columns lays out top-to-bottom per column --- */
.gallery-masonry {
  max-width: var(--maxw);
  margin: 0 auto;
  column-count: 3;
  column-gap: clamp(14px, 1.4vw, 22px);
}
@media (max-width: 1000px) {
  .gallery-masonry { column-count: 2; }
}
@media (max-width: 560px) {
  .gallery-masonry { column-count: 1; }
}

.gallery-figure {
  position: relative;
  display: block;
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
  background: var(--paper-alt);
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.gallery-figure.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.gallery-figure.is-hidden { display: none; }
.gallery-figure img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .9s var(--ease);
}
.gallery-figure:hover img {
  transform: scale(1.025);
}

/* Subtle vignette + caption appearing on hover */
.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 32px 18px 14px;
  color: var(--cream);
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 90%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.gallery-figure:hover .gallery-caption,
.gallery-figure:focus-within .gallery-caption {
  opacity: 1;
}
.gallery-caption__text {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.35;
}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, .96);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
  padding: clamp(40px, 5vw, 80px);
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__figure {
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0;
}
.lightbox__img {
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.lightbox__caption {
  font-family: var(--display);
  font-style: italic;
  color: var(--cream);
  font-size: 15px;
  text-align: center;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(244, 236, 222, .25);
  color: var(--cream);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(244, 236, 222, .08);
  border-color: var(--gold);
  color: var(--gold);
}
.lightbox__close {
  top: 28px;
  right: 28px;
}
.lightbox__nav--prev { left: 28px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 28px; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
  .lightbox { padding: 20px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__close { top: 14px; right: 14px; }
}

/* =====================================================================
   OFFERS: editorial cards with arch-framed media + flowing copy.
   ===================================================================== */
.offers-section {
  padding: clamp(60px, 7vw, 110px) clamp(24px, 5vw, 64px) clamp(60px, 7vw, 90px);
  background: var(--paper);
}
.offer-list {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 9vw, 130px);
}
.offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.offer-card--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.offer-card--flip .offer-card__media { order: 2; }
.offer-card--flip .offer-card__body { order: 1; }
.offer-card__media .arch-img {
  width: 100%;
  aspect-ratio: 4 / 5;
}
.offer-card__media .arch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offer-card__eyebrow {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.offer-card__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 18px;
}
.offer-card__lede {
  font-family: var(--body);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  max-width: 38ch;
  margin: 0 0 18px;
}
.offer-card__body-text {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 42ch;
  margin: 0 0 24px;
}
.offer-card__price {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(15.5px, 1.2vw, 18px);
  color: var(--gold-soft);
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  max-width: 36ch;
}
.offer-card .btn.ghost {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.offer-card .btn.ghost:hover {
  background: var(--ink);
  color: var(--cream);
}
.offers-foot {
  max-width: var(--maxw);
  margin: clamp(60px, 7vw, 100px) auto 0;
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--rule);
  text-align: center;
  font-family: var(--body);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
}
.offers-foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.offers-foot a:hover { text-decoration-color: var(--gold); }
@media (max-width: 820px) {
  .offer-card,
  .offer-card--flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .offer-card--flip .offer-card__media { order: 1; }
  .offer-card--flip .offer-card__body { order: 2; }
  .offer-card__media .arch-img { aspect-ratio: 5 / 6; max-width: 420px; margin: 0 auto; }
}

/* =====================================================================
   TABLE BOOKING PANEL: variant of .booking-panel that hosts the
   SevenRooms /explore/ iframe at full width inside the panel.
   ===================================================================== */
.booking-panel--table {
  width: 520px;
}
.booking-panel--table .booking-panel__header {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--rule);
}
.booking-panel__iframe-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: var(--paper-alt);
}
.booking-panel__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 640px) {
  .booking-panel--table { width: 100%; }
}

/* =====================================================================
   HOMEPAGE LANDSCAPE FEATURE: the wide exterior shot mid-page.
   Two-column layout, image left, copy right (or stacked on mobile).
   The arch sits in a horizontal landscape ratio rather than the
   portrait 3:5 used elsewhere on the site.
   ===================================================================== */
.home-feature {
  padding: clamp(72px, 8vw, 130px) clamp(32px, 5vw, 72px);
  background: var(--paper);
}
.home-feature__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.home-feature__media {
  position: relative;
}
.home-feature__media .arch-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 50% 50% 2px 2px / 18% 18% 2px 2px;
  overflow: hidden;
}
.home-feature__media .arch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-feature__eyebrow {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.home-feature__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 18px;
}
.home-feature__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.home-feature__body {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 26px;
  max-width: 42ch;
}
.home-feature__address {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.5;
}
@media (max-width: 820px) {
  .home-feature__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-feature__media .arch-img { aspect-ratio: 16 / 11; }
}

/* =====================================================================
   SCROLL REVEALS: lightweight, varied. NOT a uniform "fade-up
   everything" stack (that's the AI-default per the design rubric).
   Variants intentionally use different durations, easings and distances
   so the rhythm of the page reveal isn't mechanical.
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Variant: subtle fade only, no movement. For things that already have
   their own visual weight (hero arches, big imagery). */
.reveal--fade {
  transform: none;
  transition: opacity 1.4s var(--ease);
}

/* Variant: slow + gentle. Used for editorial copy blocks. */
.reveal--soft {
  transform: translateY(18px);
  transition:
    opacity 1.4s cubic-bezier(.16, .68, .24, 1),
    transform 1.4s cubic-bezier(.16, .68, .24, 1);
}

/* Variant: sideways drift for items in a flanked layout. */
.reveal--right {
  transform: translateX(-20px);
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease);
}
.reveal--right.is-visible { transform: none; }
.reveal--left {
  transform: translateX(20px);
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease);
}
.reveal--left.is-visible { transform: none; }

/* Stagger helpers — applied to children of a .reveal-group container.
   The JS adds .is-visible to each child in turn with a small step so a
   row of items cascades rather than appearing in unison. */
.reveal-group > .reveal[data-stagger="1"] { transition-delay: .08s; }
.reveal-group > .reveal[data-stagger="2"] { transition-delay: .16s; }
.reveal-group > .reveal[data-stagger="3"] { transition-delay: .24s; }
.reveal-group > .reveal[data-stagger="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--fade,
  .reveal--soft,
  .reveal--right,
  .reveal--left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   MOBILE EDITORIAL CLEANUPS
   Hide repetitive / decorative chrome on mobile only. All elements
   remain in the DOM (so SEO + screen readers are unaffected) — just
   suppressed visually to give the small screen room to breathe.
   ===================================================================== */
@media (max-width: 720px) {
  /* Reservation strip: it's a ROOMS booking strip (check-in / check-out /
     adults / children — none of which apply to a table booking). The
     "Book a table" CTA is redundant here on mobile, where the dedicated
     SevenRooms triggers elsewhere on the page (and in the burger nav)
     are more discoverable. Keep "Book a room" as the single primary. */
  .reservation-ctas #booknow1 { display: none; }

  /* Room listings (/rooms/): every room shares the identical six-amenity
     grid (Wi-Fi, TV, AC, shower, heat, tea/coffee). Showing it four
     times stacks 24 amenity chips on a small screen for no extra
     information. Hide on mobile — the description blurb plus the
     bed / size / max-guests meta row carry the real per-room info. */
  .room-listing__amenities { display: none; }

  /* Awards section: the secondary "Featured & Reviewed" row (Corriere /
     Google / Tripadvisor / Booking.com logos) is supporting trust signal
     on desktop; on mobile, the AA awards alone do the job and the
     duplicated row of small logos is just visual noise. */
  .awards-group + .awards-group { display: none; }

  /* Footer: the "Explore" column duplicates the sidebar nav (which is
     in the burger drawer on mobile). Hide it; keep "Visit" and "Reach
     us" since those carry contact info you actually want at the foot
     of every page. Using :last-child here is robust even if .foot-brand
     ever moves; nth-of-type would mis-count because .foot-brand is also
     a div. */
  .foot-inner .foot-col:last-child { display: none; }

  /* Homepage story signature: on the homepage Krystoff is visible in
     the portrait directly beside the copy, so the "Krystoff · General
     Manager · Ennios" caption is redundant on mobile. Other pages'
     signatures (restaurant tagline, bar's Ellis Wines context, rooms'
     Telegraph quote) carry actual information and stay visible. */
  #story .signature { display: none; }
}