:root {
  --bg: #11100f;
  --surface: #1c1916;
  --ink: #f3eee6;
  --muted: #b9aea0;
  --accent: #c5a56a;
  --accent-ink: #17130d;
  --line: color-mix(in srgb, var(--ink) 17%, transparent);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  --radius: 0px;
  --img-radius: 0px;
  --container: min(1240px, calc(100vw - 48px));
  --display: "Playfair Display", Georgia, serif;
  --body: Inter, Arial, sans-serif;
}

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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 var(--body);
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.section {
  padding: 110px 0;
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 720px;
  margin-bottom: 48px;
}

.section-head h2,
.page-section h2 {
  margin: 0 0 20px;
  font: 500 clamp(2rem, 4.4vw, 4.2rem) / 1 var(--display);
  letter-spacing: -0.035em;
}

.section-head p,
.lead {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 680px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  transition: 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  color: var(--accent);
  font-weight: 750;
}

.text-link::after {
  content: "→";
}

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  transition: 0.25s;
}

.site-header.scrolled {
  border-color: var(--line);
}

.header-inner {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 260px;
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1;
}

.brand img {
  /* content-box so padding adds breathing room on top of the capped logo
     size, instead of the page-wide border-box reset eating into it (a
     border-box max-height here would count the padding as PART of the
     40px cap, shrinking the actual visible logo to 20px). */
  box-sizing: content-box;
  width: auto;
  max-width: 160px;
  max-height: 32px;
  height: auto;
  padding: 10px 0;
  object-fit: contain;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.nav a {
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nav a:hover {
  color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-button {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
}

/* background-color: a safety net for the rare case where images.hero comes
   back empty/broken at runtime — without it, a missing photo leaves this
   full-bleed hero the exact same flat --bg color as the rest of the page,
   indistinguishable from a broken/empty section (confirmed live: reported
   as "hero looks empty"). homeHero()/pageHero() already substitute a
   fallback photo (heroImageKey(), src/casino-new/renderer.js) for a
   known-missing slot at generation time — this is the second, CSS-only
   layer for anything that slips past that (a load failure after the page
   has already shipped). */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding: 160px 0 110px;
  background-position: center;
  background-size: cover;
  background-color: var(--surface);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 42%, transparent) 60%,
    color-mix(in srgb, var(--bg) 18%, transparent)
  );
}

.hero-copy {
  max-width: 850px;
}

.hero h1 {
  margin: 0;
  max-width: 900px;
  font: 500 clamp(3.2rem, 7.2vw, 7.2rem) / 0.88 var(--display);
  letter-spacing: -0.055em;
}

.hero .lead {
  margin: 28px 0 34px;
  max-width: 680px;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.booking-strip {
  position: relative;
  z-index: 3;
  margin: -40px auto 0;
  width: min(1160px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.booking-field {
  padding: 17px 20px;
  border-right: 1px solid var(--line);
}

.booking-field label {
  display: block;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-field input,
.booking-field select {
  width: 100%;
  padding: 5px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.booking-strip .btn {
  height: 100%;
  min-width: 190px;
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}

.pathway {
  position: relative;
  min-height: 270px;
  padding: 34px;
  border-right: 1px solid var(--line);
  transition: 0.25s;
}

.pathway:last-child {
  border-right: 0;
}

.pathway:hover {
  background: var(--surface);
  transform: translateY(-6px);
}

.pathway .index {
  color: var(--accent);
  font-size: 0.7rem;
}

.pathway h3 {
  margin: 56px 0 12px;
  font: 500 1.75rem/1 var(--display);
}

.pathway p,
.card p,
.split-copy p {
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  min-height: 620px;
  /* Matches .split-copy's own background below — .split-media (the image
     column) has no background of its own, so without this the rounded
     photo's corners (or any gap in its 100%-fill) revealed the page's
     --bg instead, a visible seam against the copy column's --surface. */
  background: var(--surface);
}

.split.reverse {
  grid-template-columns: 0.98fr 1.02fr;
}

.split.reverse .split-media {
  order: 2;
}

.split-media {
  min-height: 520px;
  overflow: hidden;
}

.split-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 110px);
  background: var(--surface);
}

.split-copy h2 {
  margin: 0 0 24px;
  font: 500 clamp(2.2rem, 4.4vw, 4.6rem) / 0.98 var(--display);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

.cards-1 {
  grid-template-columns: minmax(0, 1fr);
}

.cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cards.four {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  padding: 30px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  border-radius: var(--radius);
}

.card h3 {
  margin: 0 0 14px;
  font: 500 1.45rem/1.08 var(--display);
  overflow-wrap: anywhere;
}

.image-cards .card {
  padding: 0;
  overflow: visible;
}

.image-cards .card-image {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.image-cards .card-body {
  min-width: 0;
  padding: 26px;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.feature-list-1 {
  grid-template-columns: minmax(0, 1fr);
}

.feature-list-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-list-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-list-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-list > div {
  padding: 30px;
  background: var(--bg);
}

.feature-list strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 1.35rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 12px;
}

.gallery-grid figure {
  margin: 0;
  overflow: hidden;
}

.gallery-grid figure:first-child {
  grid-row: 1/3;
}

.gallery-grid figure:last-child {
  grid-column: 2/4;
}

.faq {
  max-width: 900px;
}

.faq details {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}

.faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.28rem;
}

.faq summary::after {
  content: "+";
  float: right;
  color: var(--accent);
}

.faq details[open] summary::after {
  content: "−";
}

.faq p {
  max-width: 760px;
  color: var(--muted);
}

.final-cta {
  text-align: center;
  padding: 110px 24px;
  background: var(--accent);
  color: var(--accent-ink);
}

.final-cta h2 {
  margin: 0 auto 22px;
  max-width: 800px;
  font: 500 clamp(2.6rem, 5.3vw, 5.7rem) / 0.95 var(--display);
}

.final-cta p {
  max-width: 650px;
  margin: 0 auto 32px;
}

.final-cta .btn {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

/* background-color: same safety net as .hero above, for the same reason —
   secondary-page hero photos (room2/casino/dining1/overview/gallery3) are
   nominally guaranteed slots too, but a runtime load failure would
   otherwise leave this exact same flat, structureless void. */
.page-hero {
  min-height: 66vh;
  padding: 170px 0 90px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--surface);
  isolation: isolate;
  position: relative;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bg) 94%, transparent),
    color-mix(in srgb, var(--bg) 30%, transparent)
  );
}

.page-hero h1 {
  margin: 0;
  max-width: 920px;
  font: 500 clamp(3rem, 6.2vw, 6.2rem) / 0.92 var(--display);
  letter-spacing: -0.045em;
}

.page-hero .lead {
  margin: 24px 0 0;
}

.page-section {
  padding: 90px 0;
  border-top: 1px solid var(--line);
}

.room-card .room-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.pill {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
}

.contact-list {
  display: grid;
  gap: 14px;
}

.contact-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.contact-item span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.request-form {
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field.full {
  grid-column: 1/-1;
}

.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  outline: none;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.policy {
  max-width: 900px;
}

.policy-intro {
  padding: 24px;
  border: 1px solid var(--accent);
  color: var(--muted);
}

.policy section {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.policy section h2 {
  font-size: 1.8rem;
}

.site-footer {
  padding: 70px 0 24px;
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 50px;
}

.footer-brand p {
  max-width: 370px;
  color: var(--muted);
}

.footer-col h3 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-col a {
  display: block;
  margin: 9px 0;
  color: var(--muted);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}

.cookie {
  position: fixed;
  z-index: 80;
  left: 24px;
  bottom: 24px;
  width: min(480px, calc(100vw - 48px));
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.cookie[hidden] {
  display: none;
}

.cookie p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.88rem;
}

.cookie-actions {
  display: flex;
  gap: 10px;
}

.cookie .btn {
  flex: 1 1 0;
  min-height: 42px;
  padding: 0 14px;
  font-size: 0.66rem;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Navigation modes: compact header navigation or an immersive resort drawer. */
.menu-button {
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: auto;
  min-width: 48px;
  padding: 0 13px;
}

.menu-lines {
  display: grid;
  gap: 4px;
  width: 20px;
}

.menu-lines i {
  display: block;
  height: 1px;
  background: currentColor;
}

.menu-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drawer-head,
.nav-close,
.nav-backdrop {
  display: none;
}

.nav-mode-drawer .header-inner {
  grid-template-columns: auto 1fr auto;
}

.nav-mode-drawer .menu-button {
  display: inline-flex;
}

.nav-mode-drawer .brand {
  justify-self: center;
  max-width: 360px;
  text-align: center;
}

.drawer-nav {
  position: fixed;
  z-index: 102;
  inset: 0 auto 0 0;
  width: min(460px, 92vw);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px clamp(28px, 5vw, 64px) 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translate3d(-105%, 0, 0);
  visibility: hidden;
  transition:
    transform 0.42s cubic-bezier(0.22, 0.76, 0.2, 1),
    visibility 0.42s;
}

.drawer-nav.open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.drawer-nav a {
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font: 500 clamp(1.8rem, 3.3vw, 2.7rem) / 1.05 var(--display);
  letter-spacing: -0.025em;
  text-transform: none;
}

.drawer-nav .drawer-head {
  position: absolute;
  inset: 30px 30px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.drawer-nav .nav-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
}

.drawer-backdrop {
  position: fixed;
  z-index: 101;
  inset: 0;
  display: block;
  border: 0;
  background: rgba(3, 8, 7, 0.7);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(5px);
  transition: 0.35s;
}

.drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* Established legal HTML is intentionally rich: lists, tables and long sections. */
.legal-page {
  padding: 160px 0 100px;
  min-height: 70vh;
  overflow-wrap: anywhere;
}

.legal-page > .container {
  max-width: 980px;
  min-width: 0;
}

.legal-page h1 {
  font: 500 clamp(2.2rem, 6vw, 6rem) / 0.98 var(--display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.legal-page h2 {
  margin: 58px 0 18px;
  font: 500 clamp(1.7rem, 3.1vw, 2.7rem) / 1.05 var(--display);
}

.legal-page h3 {
  margin: 30px 0 12px;
  font: 600 1.15rem/1.3 var(--body);
}

.legal-page p,
.legal-page li {
  color: var(--muted);
}

.legal-page a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page section {
  min-width: 0;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.legal-page ul,
.legal-page ol {
  padding-left: 1.3rem;
}

.legal-page li + li {
  margin-top: 9px;
}

.legal-page table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.92rem;
  -webkit-overflow-scrolling: touch;
}
.legal-page tbody {
  display: table;
  width: max-content;
  min-width: 100%;
}

.legal-page th,
.legal-page td {
  padding: 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--line);
}

.legal-page th {
  background: var(--surface);
  color: var(--ink);
}

.legal-page .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-page .legal-box,
.legal-page .legal-notice,
.legal-page .legal-warning {
  margin: 24px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Structural variants selected by the deterministic blueprint. */
.preview-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(36px, 7vw, 110px);
  align-items: center;
}

.preview-media {
  /* height, not min-height: .preview-grid uses align-items:center (not the
     grid default stretch), so this box's height is otherwise never definite
     — img's own height:100% (base rule above) then silently resolves to
     auto, and the photo renders at its native aspect ratio instead of
     filling the frame, leaving a bare gap below it whenever that's shorter
     than the intended panel. Confirmed live: a 3:2 photo at ~600px render
     width came out ~400px tall inside what was meant to be a 560px frame. */
  height: 560px;
  overflow: hidden;
}

.preview-copy .section-head {
  margin-bottom: 28px;
}

.layout-poster {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: flex-end;
  padding: 110px 0;
  background-size: cover;
  background-position: center;
  background-color: var(--surface);
  isolation: isolate;
}

.layout-poster::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bg) 92%, transparent),
    color-mix(in srgb, var(--bg) 22%, transparent)
  );
}

.layout-poster .container {
  max-width: 760px;
  margin-left: max(24px, calc((100vw - min(1240px, calc(100vw - 48px))) / 2));
  margin-right: auto;
}

.layout-poster h2 {
  margin: 0 0 22px;
  font: 500 clamp(2rem, 5.3vw, 5.3rem) / 0.98 var(--display);
}

.layout-poster p {
  max-width: 620px;
  color: var(--muted);
}

.offers-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 42px;
}

.offers-intro .section-head {
  margin: 0;
}

.layout-stacked-list .feature-list {
  grid-template-columns: 1fr;
}

.layout-stacked-list .feature-list > a {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 40px;
  padding: 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.layout-stacked-list .feature-list span {
  font: 500 1.55rem var(--display);
}

.layout-stacked-list .feature-list small {
  color: var(--muted);
  font-size: 0.95rem;
}

.module-band {
  display: block;
}

/* .module-section .module-band ... (3 classes) rather than plain .module-band
   ...: Grand Editorial's theme.css sets an eyebrow/heading grid split on the
   equally-specific ".module-section .section-head" and loads after base.css,
   so a same-specificity reset here would lose that cascade tie and never
   apply — this needs to genuinely outrank it, not just come first. */
.module-section .module-band .section-head {
  /* Full-width intro block, not a side-by-side column: a plain intro (eyebrow
     + heading + one paragraph) has no image to justify pairing it against the
     cards/button block the way .preview-grid/.layout-image-feature do — and
     in Grand Editorial, .section-head has its OWN eyebrow/heading grid split
     (theme.css), which would nest inside an already-narrow column and squeeze
     the heading into a sliver. Reset that split here too, unconditionally. */
  display: block;
  grid-template-columns: none;
  max-width: 720px;
  margin: 0 0 40px;
}

.module-section .module-band .section-head .eyebrow,
.module-section .module-band .section-head h2,
.module-section .module-band .section-head p {
  grid-column: auto;
}

.layout-compact-list .feature-list span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

.core-preview {
  overflow: clip;
}

.layout-featured-room .room-card:first-child,
.layout-featured-area .card:first-child,
.layout-featured-dining .card:first-child {
  grid-column: span 2;
}

.layout-featured-room .room-card:first-child .card-image,
.layout-featured-dining .card:first-child .card-image {
  aspect-ratio: 2/1;
}

.layout-alternating-rooms .cards {
  grid-template-columns: 1fr;
}

.layout-alternating-rooms .room-card {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
}

.layout-alternating-rooms .room-card:nth-child(even) {
  grid-template-columns: 0.92fr 1.08fr;
}

.layout-alternating-rooms .room-card:nth-child(even) .card-image {
  order: 2;
}

.layout-alternating-rooms .card-image {
  aspect-ratio: auto;
  min-height: 420px;
  /* Side-by-side here (image beside text, not above it — the shared
     .card-image rule's top-only radius assumes a stacked card), so this
     needs its own bottom corners rounded too. */
  border-radius: var(--img-radius);
}

.layout-editorial-areas .cards {
  grid-template-columns: 1fr;
}

.layout-editorial-areas .card {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.layout-editorial-areas .card-image {
  /* Side-by-side here too — see .layout-alternating-rooms .card-image above. */
  border-radius: var(--img-radius);
}

.layout-mosaic-dining .cards {
  /* minmax(0, ...) keeps these tracks from growing past their share of the
     row: without it, the spanning first-card image below (height set with no
     matching width, still under the shared aspect-ratio:4/3 rule) derives its
     width FROM that height instead of the grid column, and a bare fr track's
     automatic minimum lets that oversized min-content blow the column out —
     ballooning column 1 and crushing column 2's two cards into a sliver. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
}

.layout-mosaic-dining .card:first-child {
  grid-row: span 2;
}

.layout-mosaic-dining .card:first-child .card-image {
  width: 100%;
  height: 100%;
  min-height: 620px;
}

.mobile-booking {
  display: none;
}

.room-price {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 14px;
  margin: 18px 0 20px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}

.room-price span {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.room-price strong {
  font: 500 1.5rem/1.1 var(--display);
  color: var(--accent);
}

.room-price small {
  color: var(--muted);
  font-size: 0.75rem;
}

.pricing-disclaimer {
  max-width: 850px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Responsive imagery and structural media variants */
picture {
  display: block;
}

.split-media > picture,
.preview-media > picture,
.card-image > picture,
.module-feature-media > picture,
.pathway-media > picture,
.hero-media > picture,
.gallery-media figure > picture {
  width: 100%;
  height: 100%;
}

/* Decoration system: radius/shape/frame are an independent axis, chosen
   once per site (createBlueprint()'s `decor`) and applied uniformly across
   every photo frame here so a site reads as one consistent look rather than
   a mix of styles. --img-radius comes from the inline palette <style> block
   (paletteStyle()); shape/frame are body-level class tokens set alongside
   the existing design-* class (see shell()). border-radius goes on both the
   frame AND its <img> (not just `overflow:hidden` on the frame) because a
   few frames — e.g. .gallery-media figure via a masonry/carousel span, or a
   frame whose aspect-ratio is later overridden by `shape` below — can end
   up with the img painting past a corner before layout settles; radius on
   both makes the corner correct unconditionally. */
.split-media,
.preview-media,
.module-feature-media,
.hero-media,
.gallery-media figure {
  border-radius: var(--img-radius);
}

/* .split-media and .hero-media (layout-side-image) already sit on a parent
   with its own background (.split, .hero.layout-side-image) — everything
   else here has no such parent (.preview-grid, .layout-image-feature >
   .container, .gallery-media, .pathway-grid are all backgroundless), so a
   photo that doesn't fully cover its frame (unloaded, load failure, or —
   for .gallery-media figure specifically — the visible gap while a lazy
   image further down a carousel/masonry track hasn't loaded yet) reveals
   the page's plain --bg instead: a flat, unrelated color sitting right next
   to a --surface-toned sibling panel in the same section (reported live: a
   grayscale photo next to a stray plain-bg patch that didn't match).
   Same fix as .hero/.page-hero above, generalized to every remaining photo
   frame that lacked it. */
.preview-media,
.module-feature-media,
.pathway-media,
.gallery-media figure {
  background-color: var(--surface);
}
/* .card-image and .pathway-media sit flush against a text block directly
   below with no gap (room/dining card body; pathway title+copy) — rounding
   all 4 corners cut a visible notch into that text area at the bottom
   corners instead of a clean edge. Top corners only keeps the rounded
   language up front while the image still meets the text with a flat seam. */
.card-image,
.pathway-media {
  border-radius: var(--img-radius) var(--img-radius) 0 0;
}
.split-media > picture > img,
.preview-media > picture > img,
.card-image > picture > img,
.module-feature-media > picture > img,
.pathway-media > picture > img,
.hero-media > picture > img,
.gallery-media figure > picture > img {
  border-radius: inherit;
}

/* shape: wide/tall only ever touch the large single "feature" photos — a
   dense grid (.card-image room/dining cards, .pathway-media teaser tiles)
   keeps its context-appropriate ratio regardless of the site's shape
   decoration, so stretching one photo never crushes a whole grid row. */
/* width:100%; height:auto alongside aspect-ratio on these four (NOT
   .gallery-media figure, which gets its size from grid row-stretch, not a
   fixed height) — each already has an explicit `height` (needed because its
   parent grid uses align-items:center, not stretch — see the "height, not
   min-height" comments above). Combining that fixed height with
   aspect-ratio alone lets the ratio compute a PREFERRED WIDTH from the
   height instead of the other way round — confirmed live: a 620px height at
   16/9 computes to ~1102px wide, blowing straight through its own ~594px
   grid column into the copy column next to it. width:100% pins the box to
   its column regardless of ratio; height:auto then lets the ratio compute
   height FROM that width instead of fighting the old fixed value. */
body.shape-wide .split-media,
body.shape-wide .preview-media,
body.shape-wide .module-feature-media,
body.shape-wide .hero-media {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}
body.shape-wide .gallery-media figure {
  aspect-ratio: 16/9;
}
body.shape-tall .split-media,
body.shape-tall .preview-media,
body.shape-tall .module-feature-media,
body.shape-tall .hero-media {
  aspect-ratio: 3/4;
  width: 100%;
  height: auto;
}
body.shape-tall .gallery-media figure {
  aspect-ratio: 3/4;
}

/* frame: outline/shadow are subtle enough to apply everywhere, including
   dense card grids; edge-accent/glow are a bolder flourish reserved for the
   same large "feature" photo set as `shape` above, so they read as a
   deliberate site-wide signature rather than clutter across many small
   thumbnails. */
body.frame-outline .split-media,
body.frame-outline .preview-media,
body.frame-outline .card-image,
body.frame-outline .module-feature-media,
body.frame-outline .pathway-media,
body.frame-outline .hero-media,
body.frame-outline .gallery-media figure {
  box-shadow: 0 0 0 1px var(--line);
}
body.frame-shadow .split-media,
body.frame-shadow .preview-media,
body.frame-shadow .card-image,
body.frame-shadow .module-feature-media,
body.frame-shadow .pathway-media,
body.frame-shadow .hero-media,
body.frame-shadow .gallery-media figure {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}
body.frame-edge-accent .split-media,
body.frame-edge-accent .preview-media,
body.frame-edge-accent .module-feature-media,
body.frame-edge-accent .hero-media,
body.frame-edge-accent .gallery-media figure {
  box-shadow: inset 5px 0 0 var(--accent);
}
body.frame-glow .split-media,
body.frame-glow .preview-media,
body.frame-glow .module-feature-media,
body.frame-glow .hero-media,
body.frame-glow .gallery-media figure {
  box-shadow: 0 0 60px 6px color-mix(in srgb, var(--accent) 45%, transparent);
}

.hero-frame {
  display: none;
}

.hero.layout-centered,
.hero.layout-cinematic {
  align-items: center;
  text-align: center;
}

.hero.layout-centered .hero-copy,
.hero.layout-cinematic .hero-copy {
  margin-inline: auto;
}

.hero.layout-centered .hero-actions,
.hero.layout-cinematic .hero-actions {
  justify-content: center;
}

.hero.layout-centered .lead,
.hero.layout-cinematic .lead {
  margin-inline: auto;
}

.hero.layout-cinematic h1 {
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

/* margin-left duplicates what margin-inline:auto would compute for a
   var(--container)-wide box, rather than using margin-inline:auto directly
   — this card is narrower than --container (see width above) and needs to
   sit flush at the CONTAINER's own left edge (offset-card's whole premise:
   a text card at the site's usual grid line, photo visible to its right),
   not centered in the viewport the way auto/auto margins would place it.
   Was hardcoded to min(1280px, calc(100vw - 72px)) — grand-editorial's own
   --container value, coincidentally, since that's the design this layout
   was first built against — but every design defines its own --container
   (resort-grid: 1320px/72px, nocturne-gallery: 1360px/64px — see each
   theme.css), so a design-specific constant here silently drifts from
   whichever design the site actually rolled. Confirmed live: on
   resort-grid specifically (the one other design allowed to roll this
   layout), the card sat ~20px off from every other page's left edge.
   var(--container) tracks the current design automatically instead.
   No max(24px, ...) floor either — .container's own margin-inline:auto
   has no such floor, so adding one here just reintroduces a smaller
   version of the same drift: confirmed live, at any width where the
   floor and the real calc() value are both small but different (each
   design's own 980px-breakpoint --container tier hits this), the two
   disagreed by a few px even after fixing the constant above. Above the
   640px breakpoint (which replaces this rule entirely with its own
   fixed-percentage version below), the plain calc() is never negative
   or unreasonably small, so the floor was never protecting anything. */
.hero.layout-offset-card .hero-copy {
  width: min(760px, calc(100% - 48px));
  margin-left: calc((100vw - var(--container)) / 2);
  margin-right: auto;
  padding: 48px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}

.hero.layout-split-panel {
  background-image: none;
  background-color: var(--bg);
  align-items: center;
}

.hero.layout-split-panel::before {
  background: linear-gradient(90deg, var(--bg) 0 46%, transparent 67%);
}

.hero.layout-split-panel .hero-frame {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 46%;
  display: block;
  background-position: center;
  background-size: cover;
}

/* Same fix, same reasoning (including dropping the max(24px, ...) floor)
   as .hero.layout-offset-card .hero-copy above — this is resort-grid's
   ONLY design (split-panel isn't in any other design's heroLayouts), so
   the hardcoded grand-editorial constant here was wrong on every single
   site that ever rolled it, not just some. */
.hero.layout-split-panel .hero-copy {
  width: 46%;
  margin-left: calc((100vw - var(--container)) / 2);
  margin-right: auto;
}

.hero.layout-split-panel h1 {
  font-size: clamp(3.3rem, 5.3vw, 6rem);
}

/* Contained (never full-bleed) hero shape — see homeHero()'s 'side-image'
   branch. Cancels the base .hero's background-photo plumbing (min-height/
   flex/background-position/size and the darkening ::before scrim) since it
   never paints a full-bleed photo behind the text — the photo is a normal
   foreground <img> in its own column instead. */
.hero.layout-side-image {
  min-height: 0;
  display: block;
  background-image: none;
  background-color: var(--surface);
  padding: clamp(90px, 12vw, 150px) 0;
}
.hero.layout-side-image::before {
  content: none;
}
.hero-side-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.hero.layout-side-image .hero-copy {
  max-width: none;
}
.hero-media {
  /* height, not min-height: .hero-side-grid uses align-items:center (not
     the grid default stretch), so this box's height is otherwise never
     definite — same reasoning as .preview-media/.module-feature-media
     above. */
  height: 420px;
  overflow: hidden;
}

/* The compact vertical booking form embedded directly in the hero
   (bookingFormCompact(), homeHero()'s 'form-panel' branch) instead of the
   classic full-width .booking-strip below it. Keeps the normal full-bleed
   photo background — falls through to the default background-image/
   ::before handling above, same as any other full-bleed layout — so only
   the form/copy grid itself needs its own rule here.
   No `width` here: the markup puts this class on the SAME element as
   .container (`<div class="container hero-form-grid">`), and .container
   already sets `width: var(--container); margin-inline: auto`. An earlier
   version of this rule had `width: 100%` — same specificity as .container
   (one class each) and declared later in the file, so it silently won and
   stretched the hero content to the full viewport width, losing the site's
   normal side margins (every other hero layout uses plain .container and
   was unaffected — confirmed live: reported as a missing/broken side
   margin specifically on this layout's home hero). display:flex here is
   block-level by default, so it already fills whatever width .container
   gives it without needing to restate one. */
.hero-form-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
}
.hero-form-grid .hero-copy {
  flex: 1 1 380px;
  max-width: 620px;
}

/* The panel itself — a small, self-contained card (not a full-width strip)
   with fields stacked vertically instead of side by side. */
.hero-booking-panel {
  flex: 0 1 320px;
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  text-align: left;
}
.hero-booking-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-booking-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.hero-booking-field label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-booking-field input,
.hero-booking-field select {
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0;
  width: 100%;
}
.hero-booking-field input:focus,
.hero-booking-field select:focus {
  outline: none;
  color: var(--accent);
}
.hero-booking-submit {
  width: 100%;
  justify-content: center;
  /* Same "never sit a rounded button flush against something" rule as
     .booking-submit — here the something is the last field's own
     border-bottom above it. */
  margin-top: 4px;
}

.overview-panorama {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: flex-end;
  background-position: center;
  background-size: cover;
  background-color: var(--surface);
  isolation: isolate;
}

.overview-panorama::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--bg) 94%, transparent),
    color-mix(in srgb, var(--bg) 12%, transparent) 75%
  );
}

.overview-panel {
  width: min(720px, 100%);
  padding: 46px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}

.overview-panel .section-head {
  margin: 0;
}

.gallery-media {
  display: grid;
  gap: 10px;
}

.gallery-media figure {
  margin: 0;
  overflow: hidden;
}

.gallery-masonry {
  grid-template-columns: 1.2fr 0.8fr 1fr;
  grid-template-rows: 260px 210px 250px;
}

.gallery-masonry figure:first-child {
  grid-row: span 2;
}

.gallery-masonry figure:nth-child(4) {
  grid-column: 2/4;
}

.gallery-six-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px 300px;
}

.gallery-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 14px;
}

.gallery-carousel figure {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: min(76vw, 720px);
  height: 480px;
  scroll-snap-align: start;
}

.gallery-carousel figure:first-child {
  margin-left: 0;
}

.layout-image-feature > .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}

.module-feature-media {
  /* height, not min-height — same reason as .preview-media above:
     .layout-image-feature > .container also uses align-items:center. */
  height: 620px;
  overflow: hidden;
}

.module-feature-copy .cards {
  grid-template-columns: 1fr;
}

/* .module-section .module-feature-copy ... (prefixed, not plain
   .module-feature-copy ...): same reason as .module-band's reset above —
   Grand Editorial's theme.css sets its eyebrow/heading grid split on the
   equally-specific ".module-section .section-head" and loads after base.css,
   so a same-specificity reset here loses that cascade tie and never applies.
   Confirmed live: without the prefix, a long heading here (image-feature
   modules routinely pair a photo with a single sentence + eyebrow, so this
   is the common case, not an edge case) rendered squeezed into the narrow
   ~234px second sub-column left over after Grand Editorial's own eyebrow
   column took its share of an already-halved image+text layout, wrapping
   nearly one word per line. */
.module-section .module-feature-copy .section-head {
  display: block;
}

.module-section .module-feature-copy .section-head h2,
.module-section .module-feature-copy .section-head p {
  grid-column: auto;
}

.layout-image-route .pathway {
  padding: 0;
  overflow: hidden;
}

.layout-image-route .pathway-media {
  height: 210px;
  overflow: hidden;
}

.layout-image-route .pathway > .index,
.layout-image-route .pathway > h3,
.layout-image-route .pathway > p {
  display: block;
  margin-inline: 28px;
}

.layout-image-route .pathway > .index {
  margin-top: 24px;
}

.layout-image-route .pathway > h3 {
  margin-top: 24px;
}

.layout-image-route .pathway > p {
  margin-bottom: 30px;
}

/* When the site's decoration is soft/round, the default table-like grid
   (one hairline border around the whole block, verticals between cells —
   fine against sharp-cornered photos) reads as a mismatched hard cage
   around rounded photos. Swap it for a proper gapped card grid instead:
   each pathway becomes its own rounded surface, matching the photo's own
   corners exactly (same --img-radius) rather than fighting them. */
body:not(.radius-sharp) .layout-image-route .pathway-grid {
  border: 0;
  gap: 20px;
}
body:not(.radius-sharp) .layout-image-route .pathway {
  border-right: 0;
  background: var(--surface);
  border-radius: var(--img-radius);
}
body:not(.radius-sharp) .layout-image-route .pathway:hover {
  background: var(--surface);
}

/* Same problem, same fix, for the generic .cards/.card grid used by optional
   modules and Offers (cards(), src/casino-new/renderer.js) — ALL 3 designs
   give it their own flush "mosaic tile" treatment for the default sharp
   look: grand-editorial uses gap:0 with a full grid of border lines,
   nocturne-gallery/resort-grid use gap:1px filled with --line. Every one of
   these reads as an obvious mistake once .card carries a real border-radius
   (confirmed live: two 32px-rounded cards 1px apart look like one shape
   with a stray seam, not two cards) — restore a normal gapped, individually
   bordered card grid instead, matching base.css's own default .card look. */
body:not(.radius-sharp) .cards {
  gap: 20px;
  padding: 0;
  background: none;
  border: 0;
}
body:not(.radius-sharp) .card,
body:not(.radius-sharp) .image-cards .card,
body:not(.radius-sharp) .page-section .cards .card {
  /* Matches grand-editorial's own selector list exactly (.card,
     .image-cards .card, .page-section .cards .card) — its last one is 3
     classes deep and would otherwise out-specificity a plain
     body:not(...) .card override on any page using .page-section. */
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

/* cards() (src/casino-new/renderer.js) sits directly next to a button() with
   no wrapping element in 4 places (Offers section's default variant, and 3
   of the optional-module layout variants) — the two are flush block
   siblings with zero space between them regardless of corner style. Same
   fix as .booking-submit's margin-left earlier: add a real gap unconditionally
   rather than relying on every call site to remember its own spacing. */
.cards + .btn {
  margin-top: 32px;
}

.layout-room-slider .cards,
.layout-dining-slider .cards {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 18px;
}

.layout-room-slider .card,
.layout-dining-slider .card {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: min(76vw, 520px);
  height: auto;
  scroll-snap-align: start;
}

.layout-room-slider .card-image,
.layout-dining-slider .card-image {
  height: 340px;
  aspect-ratio: auto;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
}

/* Shared availability form foundation. Each design adds its own visual voice. */
.booking-strip {
  isolation: isolate;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(190px, 0.9fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius);
}

.booking-field {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition:
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}

.booking-field:focus-within {
  z-index: 1;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 -2px 0 var(--accent);
}

.booking-field label {
  line-height: 1.2;
}

.booking-field input,
.booking-field select {
  min-width: 0;
  min-height: 32px;
  padding: 3px 28px 3px 0;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: color 0.2s ease;
}

.booking-field input[type="text"] {
  cursor: text;
}

.booking-field input:focus,
.booking-field select:focus {
  outline: 0;
  color: var(--accent);
}

.booking-field input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: grayscale(1);
}

.booking-submit {
  position: relative;
  min-width: 0;
  padding-inline: 28px;
  overflow: hidden;
  white-space: normal;
  line-height: 1.25;
  /* A rounded button sitting flush against the sharp-edged field beside it
     (no gap) looks fine at 0 radius but leaves an odd notch at any rounder
     setting, since the button's own corner curve doesn't match the field's
     straight edge right at the seam. A small margin keeps that seam clean
     regardless of which radius the site rolled. */
  margin-left: 12px;
}

.booking-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  transform: translateX(-102%);
  transition: transform 0.28s ease;
}

.booking-submit:hover::before {
  transform: translateX(0);
}

.booking-submit > span {
  position: relative;
  z-index: 1;
}

.booking-submit-icon {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.booking-submit:hover .booking-submit-icon {
  transform: translateX(4px);
}

@media (max-width: 980px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }
  .nav {
    position: fixed;
    inset: 82px 0 auto;
    padding: 28px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: none;
    flex-direction: column;
  }
  .nav.open {
    display: flex;
  }
  .header-actions .btn {
    display: none;
  }
  .menu-button {
    display: block;
  }
  .booking-strip {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }
  .booking-strip .btn {
    grid-column: 1/-1;
    min-height: 58px;
  }
  .pathway-grid,
  .cards.four {
    grid-template-columns: 1fr 1fr;
  }
  .split,
  .split.reverse {
    grid-template-columns: 1fr;
  }
  .split.reverse .split-media {
    order: 0;
  }
  .cards {
    grid-template-columns: 1fr 1fr;
  }
  .cards-1 {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-list {
    grid-template-columns: 1fr 1fr;
  }
  .feature-list-1 {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .footer-col:last-child {
    grid-column: 2/4;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .site-header:not(.nav-mode-drawer) .header-inner {
    grid-template-columns: 1fr auto;
  }
  .site-header:not(.nav-mode-drawer) .brand {
    grid-column: 1;
    grid-row: 1;
  }
  .site-header:not(.nav-mode-drawer) .menu-button {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
  }
  .site-header:not(.nav-mode-drawer) .menu-label {
    display: none;
  }
  .site-header:not(.nav-mode-drawer) .header-actions {
    display: none;
  }
  .nav-mode-drawer .header-actions .btn {
    display: inline-flex;
  }
  .preview-grid {
    grid-template-columns: 1fr;
  }
  .preview-media {
    height: 440px;
  }
  .layout-poster {
    min-height: 620px;
  }
  .layout-alternating-rooms .room-card,
  .layout-alternating-rooms .room-card:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .layout-alternating-rooms .room-card:nth-child(even) .card-image {
    order: 0;
  }
  .hero.layout-split-panel {
    align-items: flex-end;
  }
  .hero.layout-split-panel::before {
    background: linear-gradient(
      0deg,
      color-mix(in srgb, var(--bg) 92%, transparent),
      color-mix(in srgb, var(--bg) 18%, transparent)
    );
  }
  .hero.layout-split-panel .hero-frame {
    display: none;
  }
  /* width:auto on a block element fills 100% of its parent by default, so
     margin-inline:auto had nothing left to center with — confirmed live:
     computed to 0 on both sides, flush against the viewport edge, instead
     of the intended reset away from the desktop 46%-width split. Same
     width:100%+padding-inline fix as .hero > .container/.hero .hero-copy
     use elsewhere at the narrower 640px breakpoint (below) — gives an
     actual, non-zero inset here at this wider one instead of a no-op.
     margin-inline:0 is required, not optional: the desktop rule above sets
     margin-left to a specific calc(), and a narrower breakpoint only
     overrides the properties it actually mentions — padding-inline here is
     a DIFFERENT property from margin-left, so without resetting margin
     explicitly, that desktop value survives untouched and stacks on top of
     this padding, confirmed live (box sat a further 24px past the padding
     inset, not exactly the intended amount).
     padding-inline is the SAME calc() as the desktop margin-left above, not
     a flat 16px: this rule covers the whole range up to 1100px, but
     --container itself has its OWN separate value in the 641-980px slice
     of that range (each theme.css's own @media (max-width: 980px) tier) —
     a flat 16px only ever matched the narrower <=640px convention.
     Confirmed live: at 768px specifically, page-hero's own margin (which
     tracks that 980px tier correctly) sat at 20px while this flat 16px
     didn't. calc() tracks whichever tier is active automatically, exactly
     like the desktop rule above already does. */
  .hero.layout-split-panel .hero-copy {
    width: 100%;
    margin-inline: 0;
    padding-inline: calc((100vw - var(--container)) / 2);
  }
  .hero-side-grid {
    grid-template-columns: 1fr;
  }
  .hero-media {
    height: 320px;
  }
  .hero-form-grid .hero-copy {
    flex-basis: 100%;
  }
  .hero-booking-panel {
    flex-basis: 100%;
    width: 100%;
  }
  .layout-image-feature > .container {
    grid-template-columns: 1fr;
  }
  .module-feature-media {
    height: 480px;
  }
  .gallery-six-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 260px);
  }
  .booking-strip {
    grid-template-columns: 1fr 1fr;
  }
  .booking-strip .booking-submit {
    grid-column: 1/-1;
    min-height: 62px;
    /* Stacked below the fields at this width — swap the side-by-side gap
       above for a vertical one instead of a horizontal one. */
    margin-left: 0;
    margin-top: 12px;
  }
  .booking-field {
    min-height: 76px;
  }
}

@media (max-width: 640px) {
  :root {
    --container: calc(100vw - 32px);
  }
  .section {
    padding: 76px 0;
  }
  .header-inner {
    min-height: 72px;
  }
  .nav {
    inset: 72px 0 auto;
  }
  .brand {
    font-size: 1rem;
  }
  .brand img {
    max-width: 130px;
    max-height: 26px;
    height: auto;
    padding: 8px 0;
  }
  .hero {
    min-height: 78vh;
    padding: 130px 0 70px;
  }
  .hero h1 {
    font-size: clamp(3.2rem, 15vw, 5.2rem);
  }
  .hero-actions {
    display: grid;
  }
  .booking-strip {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .booking-field {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .pathway-grid,
  .cards,
  .cards.four,
  .feature-list,
  .footer-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .pathway {
    min-height: auto;
  }
  .pathway h3 {
    margin-top: 28px;
  }
  .split-media {
    min-height: 340px;
  }
  .split-copy {
    padding: 48px 24px;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 190px 190px;
  }
  .gallery-grid figure:first-child {
    grid-column: 1/3;
    grid-row: auto;
  }
  .gallery-grid figure:last-child {
    grid-column: auto;
  }
  .footer-col:last-child {
    grid-column: auto;
  }
  .footer-bottom {
    flex-direction: column;
  }
  .page-hero {
    min-height: 58vh;
    padding-top: 130px;
  }
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .hero-copy {
    min-width: 0;
    overflow: visible;
  }
  .hero h1,
  .page-hero h1 {
    max-width: 100%;
    font-size: clamp(2.2rem, 10.5vw, 3.4rem);
    overflow-wrap: anywhere;
  }
  .section-head h2,
  .page-section h2,
  .split-copy h2,
  .layout-poster h2,
  .final-cta h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }
  .booking-strip {
    overflow: hidden;
  }
  .booking-field,
  .booking-field input,
  .booking-field select {
    min-width: 0;
    max-width: 100%;
  }
  .nav-mode-drawer .header-inner {
    grid-template-columns: auto 1fr;
  }
  .nav-mode-drawer .brand {
    justify-self: end;
    text-align: right;
  }
  .nav-mode-drawer .header-actions {
    display: none;
  }
  .nav-mode-drawer .menu-label {
    display: none;
  }
  .drawer-nav {
    width: 100%;
    max-width: none;
  }
  .legal-page {
    padding: 120px 0 76px;
  }
  .legal-page th,
  .legal-page td {
    min-width: 150px;
    padding: 11px;
  }
  body {
    padding-bottom: 66px;
  }
  .preview-media {
    height: 330px;
  }
  .layout-poster {
    min-height: 580px;
    padding: 80px 0;
  }
  .layout-poster .container {
    margin-inline: auto;
  }
  .offers-intro {
    display: block;
  }
  .offers-intro .btn {
    margin-top: 22px;
  }
  .layout-stacked-list .feature-list > a {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .layout-featured-room .room-card:first-child,
  .layout-featured-area .card:first-child,
  .layout-featured-dining .card:first-child {
    grid-column: auto;
  }
  .layout-mosaic-dining .cards {
    grid-template-columns: 1fr;
  }
  .layout-mosaic-dining .card:first-child {
    grid-row: auto;
  }
  .layout-mosaic-dining .card:first-child .card-image {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .layout-editorial-areas .card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mobile-booking {
    position: fixed;
    z-index: 70;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    padding: 12px 20px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.24);
  }
  .cookie {
    bottom: 82px;
  }
  /* calc(100% - 32px) + auto margins = 16px each side — matches
     --container's own mobile value at this breakpoint (calc(100vw - 32px),
     i.e. the same 16px every other page's hero/page-hero already gets. Was
     "- 24px" (12px/side) — a smaller, unrelated hardcoded number that just
     drifted from that convention; confirmed live: sat 4px inside the edge
     every internal page's hero already uses. */
  .hero.layout-offset-card .hero-copy {
    width: calc(100% - 32px);
    margin-inline: auto;
    padding: 30px 22px;
  }
  .overview-panorama {
    min-height: 620px;
  }
  .overview-panel {
    padding: 32px 22px;
  }
  .gallery-masonry {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 190px 190px;
  }
  .gallery-masonry figure:first-child {
    grid-column: 1/3;
    grid-row: auto;
  }
  .gallery-masonry figure:nth-child(4) {
    grid-column: auto;
  }
  .gallery-six-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 190px);
  }
  .gallery-carousel figure {
    flex-basis: 88vw;
    height: 360px;
  }
  .module-feature-media {
    height: 360px;
  }
  .layout-room-slider .card,
  .layout-dining-slider .card {
    flex-basis: 88vw;
  }
  .layout-room-slider .card-image,
  .layout-dining-slider .card-image {
    height: 280px;
  }
  .hero > .container,
  .hero .hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* 16px, not the old 12px: this is the same side gutter every other
       page's hero already gets for free from --container's own value at
       this breakpoint (calc(100vw - 32px), i.e. 16px margin each side) —
       .hero overrides width/margin with its own width:100%+padding here
       instead of leaning on --container, so it needs to spell out that
       same 16px explicitly rather than drifting from it. Confirmed live:
       the two didn't line up (12px vs. 16px) — reported as the home hero's
       mobile edge not matching internal pages'. */
    padding-inline: 16px;
  }
  /* .hero-copy is the SAME element as .hero > .container in every plain
     hero layout (one div carries both classes), so the rule above gives it
     exactly one 16px inset — correct. But 'form-panel'/'side-image' nest a
     separate .hero-copy INSIDE that already-padded container
     (.hero-form-grid/.hero-side-grid), so the descendant selector above
     matches it a second time and adds a second, redundant 16px — confirmed
     live: the resulting 32px on .hero-copy's text no longer lined up with
     its own sibling (.hero-booking-panel/.hero-media), which only ever got
     the outer container's single 16px. Cancel the inner duplicate here;
     the outer .hero > .container padding already insets both siblings
     equally. */
  .hero > .container .hero-copy {
    padding-inline: 0;
  }
  .hero .hero-copy h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2rem, 8.4vw, 2.5rem);
    line-height: 0.97;
    letter-spacing: 0;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .nav-mode-drawer .brand {
    max-width: calc(100vw - 96px);
    justify-self: center;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.08;
    letter-spacing: 0.09em;
    white-space: normal;
  }
  .site-header:not(.nav-mode-drawer) .header-inner {
    width: calc(100% - 24px);
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 8px;
  }
  .site-header:not(.nav-mode-drawer) .brand {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .cookie {
    left: 12px;
    bottom: 78px;
    width: calc(100vw - 24px);
    padding: 16px;
  }
  .cookie p {
    margin-bottom: 12px;
    font-size: 0.78rem;
  }
  .cookie-actions {
    gap: 6px;
  }
  .cookie .btn {
    min-height: 38px;
  }
  .booking-strip {
    grid-template-columns: 1fr;
  }
  .booking-field {
    min-height: 68px;
    padding: 14px 20px;
  }
  .booking-strip .booking-submit {
    min-height: 60px;
  }
  .booking-field input,
  .booking-field select {
    min-height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}