/* ==========================================================================
   Hotel ETT — site stylesheet
   Plain CSS. No build step, no preprocessor, no framework.

   Two rules that are load-bearing; break either and the site degrades badly:

   1. NO PHOTOGRAPH IS EVER DISPLAYED WIDER THAN 1024 CSS px.
      The largest source image is 1536px. 1536/1024 = 1.5x, which is the
      sharpness floor. Several crops are ~500px and are capped at 340px.
      Widening a photo container past 1024 makes every image soft, and it
      cannot be fixed later without re-shooting.

   2. GOLD IS A DARK-SURFACE COLOUR.
      --gold on --sand is 2.83:1 and fails WCAG AA (and even the 3:1 UI
      threshold). On light surfaces use --gold-deep (4.81:1). Measured, not
      estimated.

   Written with CSS logical properties throughout so an Arabic/RTL stylesheet
   is a swap rather than a rewrite.
   ========================================================================== */

/* --- Fonts ------------------------------------------------------------- */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var.woff2") format("woff2-variations");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
/* Metric-matched fallbacks so font swap costs no layout shift. */
@font-face {
  font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman");
  size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Fallback"; src: local("Helvetica Neue"), local("Arial");
  size-adjust: 97%; ascent-override: 95%; descent-override: 24%; line-gap-override: 0%;
}

/* --- Tokens ------------------------------------------------------------ */
:root {
  --ink:        #14110E;   /* deep warm black                              */
  --ink-80:     #3A342D;
  --ink-60:     #5C554D;   /* secondary text on sand — 6.57:1              */
  --sand:       #F6F2EA;   /* warm off-white page field                    */
  --sand-2:     #EFE9DE;   /* subtle banded sections                       */
  --stone:      #8A8178;   /* hairlines and disabled ONLY — 3.42:1, never text */
  --hairline:   #DAD2C4;
  --gold:       #B8892B;   /* on --ink only — 5.96:1                       */
  --gold-bright:#D4A548;   /* on --ink only — 8.31:1                       */
  --gold-deep:  #846414;   /* the ONLY gold for light surfaces. 4.93:1 on --sand, */
                           /* 4.56:1 on --sand-2. #8A6414 fails on the tint (4.44). */

  --container: 1240px;
  --media-max: 1120px;     /* image containers never exceed this           */
  --photo-cap: 1024px;     /* HARD CAP: no photo wider than this           */
  --photo-cap-sm: 340px;   /* the ~500px crops                            */
  --header-h: 72px;

  --fs-hero:  clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --fs-h1:    clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h2:    clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
  --fs-h3:    1.375rem;
  --fs-card:  1.125rem;
  --fs-lead:  1.1875rem;
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;
  --fs-ui:    1rem;        /* hard floor: <16px makes iOS zoom on focus    */

  --measure: 66ch;
  --measure-narrow: 46ch;

  --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --ease: cubic-bezier(.2,.6,.2,1);
}
@media (min-width: 768px) { :root { --fs-h3: 1.5rem; } }
@media (min-width: 1024px){ :root { --fs-lead: 1.3125rem; } }

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: "Figtree", "Figtree Fallback", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: "Newsreader", "Newsreader Fallback", Georgia, serif;
  font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.012em;
}
h1 { font-size: var(--fs-h1); line-height: 1.10; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; }
p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.15em; }
a { color: var(--gold-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 1px;
}
.on-ink :focus-visible { outline-color: var(--gold-bright); }
::selection { background: var(--gold-bright); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 2rem 0; }

.skip-link {
  position: absolute; inset-inline-start: 0; inset-block-start: -100%;
  background: var(--ink); color: var(--sand); padding: .75rem 1.25rem;
  z-index: 200; text-decoration: none;
}
.skip-link:focus { inset-block-start: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.wrap--media { max-width: var(--media-max); }
.wrap--prose { max-width: 78ch; }
.section { padding-block: var(--space-section); }
.section--tint { background: var(--sand-2); }
.section--ink { background: var(--ink); color: var(--sand); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--sand); }
.section--ink a { color: var(--gold-bright); }
.section--ink a:hover { color: #fff; }

.section-head { max-width: var(--measure); margin-block-end: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--ink-60); font-size: var(--fs-lead); }
.section--ink .section-head p { color: #C9C0B2; }

.eyebrow {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 .75rem; display: block;
}
.section--ink .eyebrow { color: var(--gold-bright); }
.lead { font-size: var(--fs-lead); color: var(--ink-60); max-width: var(--measure-narrow); }
.prose { max-width: var(--measure); }
.prose h2 { margin-block: 2.5rem 1rem; }
.prose h3 { margin-block: 2rem .5rem; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.6rem;
  font-family: inherit; font-size: var(--fs-ui); font-weight: 600;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 2px;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--primary { background: var(--gold); color: var(--ink); }        /* ink label: white on gold is 3.16:1 */
.btn--primary:hover { background: var(--gold-bright); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--sand); }
.section--ink .btn--ghost { color: var(--sand); border-color: rgba(246,242,234,.45); }
.section--ink .btn--ghost:hover { background: var(--sand); color: var(--ink); }
.btn--block { width: 100%; }

.link-more {
  font-weight: 600; font-size: var(--fs-small); text-decoration: none;
  border-block-end: 1px solid var(--gold-deep); padding-block-end: 2px;
}
.link-more:hover { border-color: var(--ink); }

/* --- Header ------------------------------------------------------------ */
.header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: var(--sand); border-block-end: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.header[data-scrolled] { border-block-end-color: var(--hairline); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__mark {
  /* The mark is portrait (987x1096). Height-constrain it so the header bar
     height stays predictable, and let width follow. */
  height: 44px; width: auto; display: block;
}
.footer__brand .brand__mark { height: 76px; }
@media (min-width: 700px) { .brand__mark { height: 50px; } }

.nav { display: none; }
.nav__list { display: flex; gap: clamp(1rem, 2vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-size: var(--fs-small); font-weight: 500; text-decoration: none; color: var(--ink);
  padding-block: .35rem; border-block-end: 1px solid transparent; white-space: nowrap;
}
.nav__link:hover { border-block-end-color: var(--gold-deep); }
.nav__link[aria-current="page"] { border-block-end-color: var(--gold-deep); font-weight: 600; }
.header__actions { display: flex; align-items: center; gap: .75rem; }
.header__tel { display: none; font-size: var(--fs-small); font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.header__tel:hover { color: var(--gold-deep); }
.header .btn { min-height: 42px; padding: .5rem 1.1rem; font-size: var(--fs-small); }
/* Below 560px the sticky action bar carries the CTA; a second one here just
   squeezes the wordmark. */
@media (max-width: 559px) { .header .btn--primary { display: none; } }

/* Mobile drawer — <details> so it works with JavaScript disabled. */
.navdrawer { position: relative; }
.navdrawer__toggle {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; cursor: pointer; list-style: none;
  border: 1px solid var(--hairline); border-radius: 2px; background: transparent;
}
.navdrawer__toggle::-webkit-details-marker { display: none; }
.navdrawer__toggle svg { width: 20px; height: 20px; }
.navdrawer[open] .navdrawer__toggle { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.navdrawer__icon-close { display: none; }
.navdrawer[open] .navdrawer__icon-open { display: none; }
.navdrawer[open] .navdrawer__icon-close { display: block; }
.navdrawer__panel {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 12px);
  min-width: min(78vw, 300px);
  background: var(--sand); border: 1px solid var(--hairline);
  box-shadow: 0 18px 44px rgba(20,17,14,.16);
  padding: 1rem 1.25rem 1.25rem;
}
.navdrawer__panel ul { list-style: none; margin: 0; padding: 0; }
.navdrawer__panel li + li { border-block-start: 1px solid var(--hairline); }
.navdrawer__panel a {
  display: block; padding: .8rem 0; text-decoration: none; color: var(--ink);
  font-weight: 500; font-size: 1.0625rem;
}
.navdrawer__panel a[aria-current="page"] { color: var(--gold-deep); font-weight: 600; }
.navdrawer__sep { margin-block: .75rem .25rem; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-60); }

@media (min-width: 1100px) {
  .nav { display: block; }
  .navdrawer { display: none; }
  .header__tel { display: inline-block; }
}

/* --- Breadcrumbs --------------------------------------------------------- */
.crumbs { padding-block-start: 1.25rem; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-small); color: var(--ink-60);
}
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-inline-end: 1px solid var(--stone); border-block-start: 1px solid var(--stone);
  transform: rotate(45deg);
}
.crumbs a { color: var(--ink-60); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- Hero -------------------------------------------------------------- */
.hero { background: var(--sand); padding-block-start: clamp(1.5rem, 3vw, 3rem); }
.hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.hero__title { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.02em; }
.hero__sub { font-size: var(--fs-lead); color: var(--ink-60); max-width: 44ch; margin-block-start: 1.1rem; }
.hero__media { position: relative; }
.hero__media img { width: 100%; }

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0,1fr) minmax(0, 640px); gap: clamp(2.5rem, 4vw, 4rem); }
  .hero__media img { max-width: 640px; margin-inline-start: auto; }
}

/* Page banner for interior pages: letterbox strip, never taller than needed. */
.pagehead { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.pagehead__title { max-width: var(--measure); }
.pagehead__intro { font-size: var(--fs-lead); color: var(--ink-60); max-width: var(--measure-narrow); margin-block-start: 1rem; }
.banner { margin-block-start: clamp(2rem, 4vw, 3rem); }
.banner img {
  width: 100%; max-width: var(--photo-cap); margin-inline: auto;
  aspect-ratio: 21 / 9; object-fit: cover;
}

/* --- Figures ----------------------------------------------------------- */
.figure { margin: 0; background: var(--sand-2); }
.figure img { width: 100%; }
.figure--cap { max-width: var(--photo-cap); margin-inline: auto; }
.figure--sm { max-width: var(--photo-cap-sm); }
.figure figcaption { font-size: var(--fs-small); color: var(--ink-60); padding-block-start: .6rem; }

/* Media + text split. Image side never exceeds the photo cap. */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  /* The media column hugs its image (capped at 512px) instead of taking a full
     half and leaving a dead gutter beside it. */
  .split { grid-template-columns: minmax(0, 512px) 1fr; }
  /* Two TEXT columns (contact page). Not for image + text: the media rule
     below would force a 1024px track and crush the other side. */
  .split--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse .split__media { order: 2; }
  .split__media img { max-width: 512px; }
  .split--wide .split__media img { max-width: 100%; }
}
.split__body { max-width: var(--measure); }

/* --- Cards ------------------------------------------------------------- */
.grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 768px)  { .grid { gap: 1.5rem; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }

.card {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto;
  background: transparent;
}
.card__media { background: var(--sand-2); margin-block-end: 1rem; }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__title { font-size: var(--fs-card); font-family: "Figtree","Figtree Fallback",sans-serif; font-weight: 600; margin-block-end: .4rem; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:hover { color: var(--gold-deep); }
.card__body { color: var(--ink-60); font-size: var(--fs-small); margin-block-end: .9rem; }
.card__foot { font-size: var(--fs-small); font-weight: 600; color: var(--gold-deep); }
.card:hover .card__media img { filter: brightness(1.03); }

/* Typographic room cards — no photography. See PRE-LAUNCH.md item 1. */
.roomcard {
  display: grid; grid-template-rows: auto auto 1fr auto;
  border: 1px solid var(--hairline); padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--sand);
}
.roomcard__name { font-family: "Newsreader","Newsreader Fallback",Georgia,serif; font-size: var(--fs-h3); font-weight: 500; }
.roomcard__for { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--gold-deep); font-weight: 600; margin-block: .5rem .75rem; }
.roomcard__body { color: var(--ink-60); font-size: var(--fs-small); }
.roomcard__specs { list-style: none; margin: 1rem 0 0; padding: 0; font-size: var(--fs-small); }
.roomcard__specs li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; border-block-start: 1px solid var(--hairline); }
.roomcard__specs dt, .roomcard__specs .k { color: var(--ink-60); }
.roomcard__specs .v { font-weight: 600; text-align: end; }
.roomcard__foot { margin-block-start: 1.25rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.roomcard__rate { font-size: var(--fs-small); color: var(--ink-60); }

/* --- Room card media --------------------------------------------------- */
.roomcard { padding: 0; overflow: hidden; }
.roomcard__media { background: var(--sand-2); margin-block-end: 1.25rem; }
.roomcard__media img { width: 100%; }
.roomcard > :not(.roomcard__media):not(.reserve) { padding-inline: clamp(1.25rem, 3vw, 1.75rem); }
.roomcard > .roomcard__name { padding-block-start: 0; }
.roomcard:not(:has(.roomcard__media)) > .roomcard__name { padding-block-start: clamp(1.25rem, 3vw, 1.75rem); }
.roomcard__foot { padding-block-end: clamp(1.25rem, 3vw, 1.75rem); }
.roomcard__specs { margin-block-start: 1rem; }

/* --- Stay summary ------------------------------------------------------ */
.stay {
  border: 1px solid var(--hairline); background: var(--sand-2);
  padding: clamp(1rem, 2.5vw, 1.35rem); display: flex; flex-wrap: wrap;
  gap: 1rem 2rem; align-items: center; justify-content: space-between;
}
.stay__row { display: flex; flex-wrap: wrap; gap: .9rem 2.25rem; }
.stay__item { display: flex; flex-direction: column; gap: .1rem; }
.stay__k {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-60);
}
.stay__v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Reserve (progressive: <details>, works with JS off) ---------------- */
.reserve { border-block-start: 1px solid var(--hairline); }
.reserve__toggle {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; cursor: pointer; list-style: none;
  font-family: inherit; font-size: var(--fs-ui); font-weight: 600;
  background: var(--gold); color: var(--ink);
  transition: background-color .18s var(--ease);
}
.reserve__toggle::-webkit-details-marker { display: none; }
.reserve__toggle:hover { background: var(--gold-bright); }
.reserve__toggle::after {
  content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.reserve[open] .reserve__toggle::after { transform: translateY(2px) rotate(-135deg); }
.reserve[open] .reserve__toggle { background: var(--ink); color: var(--sand); }
.reserve__form {
  display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 1.6rem);
  background: var(--sand-2); border-block-start: 1px solid var(--hairline);
}
.reserve__intro { font-size: var(--fs-small); color: var(--ink-60); margin: 0; }
.reserve__stay {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem;
  padding: .9rem; background: var(--sand); border: 1px solid var(--hairline);
}
.reserve__stay .field label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-60); }
.reserve__form .bookbar__error { display: none; font-size: var(--fs-small); color: #8E2F20; margin: 0; }
.reserve__form .bookbar__error[data-shown] { display: block; }
/* Date inputs carry a wide intrinsic minimum; below ~400px two of them cannot
   sit side by side without forcing the card past the viewport. */
@media (max-width: 25rem) { .reserve__stay { grid-template-columns: minmax(0, 1fr); } }
.reserve__small { font-size: var(--fs-micro); color: var(--ink-60); margin: 0; line-height: 1.5; }

/* --- Rate ---------------------------------------------------------------- */
.ratebox { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  margin-block: 1.5rem .35rem; }
.ratebox__amount {
  font-family: "Newsreader", "Newsreader Fallback", Georgia, serif;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ratebox__unit { font-size: var(--fs-small); color: var(--ink-60); }
.ratebox__note { font-size: var(--fs-micro); color: var(--ink-60); max-width: 42ch;
  line-height: 1.5; margin-block-end: 1.5rem; }
.roomcard__rate b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- Amenity groups ------------------------------------------------------- */
.amengrid { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .amengrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .amengrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.amengroup h3 {
  font-family: "Figtree", "Figtree Fallback", sans-serif;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep);
  padding-block-end: .6rem; margin-block-end: .9rem;
  border-block-end: 1px solid var(--hairline);
}

/* --- Other rooms ---------------------------------------------------------- */
.otherrooms { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .otherrooms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.otherrooms li { border-block-end: 1px solid var(--hairline); }
.otherrooms a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: .95rem; text-decoration: none; color: var(--ink); font-weight: 500;
}
.otherrooms a:hover { color: var(--gold-deep); }
.othrate { font-variant-numeric: tabular-nums; font-size: var(--fs-small);
  font-weight: 600; color: var(--ink-60); white-space: nowrap; }
.otherrooms a:hover .othrate { color: var(--gold-deep); }

/* --- Offer rows ---------------------------------------------------------
   The offer artwork is a poster with its own headline and fine print, so it is
   displayed large rather than shrunk into a card, and it opens full size in the
   lightbox. The text beside it repeats the substance as real HTML, because none
   of the text inside the image is reachable by assistive technology. */
.offers { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.offerrow { display: grid; gap: 1.25rem 2.5rem; align-items: center; }
.offerrow__media { display: block; background: var(--sand-2); }
.offerrow__media img { width: 100%; height: auto; }
.offerrow__body h3 {
  font-family: "Newsreader", "Newsreader Fallback", Georgia, serif;
  font-size: var(--fs-h2); font-weight: 500; margin-block-end: .6rem;
}
.offerrow__body p { color: var(--ink-60); }
.offerrow__note { font-size: var(--fs-micro); line-height: 1.5; }
@media (min-width: 900px) {
  .offerrow { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
  .offerrow--reverse .offerrow__media { order: 2; }
}

/* --- Managed by ---------------------------------------------------------- */
.managed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--sand); border: 1px solid var(--hairline);
}
/* The partner mark is dark green: 5.81:1 on --sand, 2.90:1 on --ink. It only
   ever goes on a light surface - the footer carries a text credit instead. */
.managed__logo { width: 248px; max-width: 100%; height: auto; }
.managed__body { flex: 1 1 16rem; }
.managed__line { font-size: var(--fs-lead); margin-block-end: .6rem; }
.managed__links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0;
  font-size: var(--fs-small); font-weight: 600; }

/* --- Offices ------------------------------------------------------------- */
.offices { align-items: start; }
.office { border-block-start: 2px solid var(--gold-deep); padding-block-start: 1rem; }
.office__role {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .35rem;
}
.office__city { font-size: var(--fs-h3); margin-block-end: .2rem; }
.office__entity { font-weight: 600; font-size: var(--fs-small); margin-block-end: .75rem; }
.office__addr { font-style: normal; font-size: var(--fs-small); color: var(--ink-60);
  line-height: 1.7; }
.office__mail { font-size: var(--fs-small); margin-block-start: .75rem; line-height: 1.9;
  overflow-wrap: anywhere; }

/* --- Trust strip ------------------------------------------------------- */
.trust { background: var(--ink); color: var(--sand); }
.trust ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }
.trust li { font-size: var(--fs-small); line-height: 1.45; }
.trust strong { display: block; font-size: var(--fs-ui); color: var(--gold-bright); font-weight: 600; margin-block-end: .15rem; }
.trust .trust__inner { padding-block: clamp(1.75rem, 3vw, 2.25rem); }

/* --- Booking / availability form --------------------------------------- */
.bookbar { border: 1px solid var(--hairline); background: var(--sand); padding: clamp(1rem, 2.5vw, 1.4rem); }
.section--ink .bookbar { background: rgba(246,242,234,.06); border-color: rgba(246,242,234,.22); }
.bookbar__grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bookbar__field { display: flex; flex-direction: column; gap: .3rem; }
.bookbar__field--full, .bookbar__field--cta { grid-column: 1 / -1; }
.bookbar label { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-60); }
.section--ink .bookbar label { color: #C9C0B2; }
.bookbar input, .bookbar select {
  width: 100%; min-width: 0;
  font-family: inherit; font-size: var(--fs-ui); /* 16px floor: stops iOS zooming on focus */
  min-height: 48px; padding: .55rem .7rem; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: 2px;
}
/* :user-invalid, not :invalid — an empty required field is :invalid on first
   paint, which painted both date boxes red before the guest touched anything. */
.bookbar input:user-invalid, .field input:user-invalid,
.field textarea:user-invalid { border-color: #8E2F20; }
@supports not selector(:user-invalid) {
  .bookbar input[aria-invalid="true"] { border-color: #8E2F20; }
}
.bookbar__note { font-size: var(--fs-small); color: var(--ink-60); margin-block-start: .75rem; }
.section--ink .bookbar__note { color: #C9C0B2; }
.bookbar__error { display: none; font-size: var(--fs-small); color: #8E2F20; margin-block-start: .5rem; }
.bookbar__error[data-shown] { display: block; }
@media (min-width: 640px) { .bookbar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bookbar__field--full { grid-column: auto; } .bookbar__field--cta { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .bookbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bookbar__field--cta { grid-column: 1 / -1; } }

/* --- Forms ------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; max-width: 42rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field .hint { font-size: var(--fs-small); color: var(--ink-60); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;   /* without this the intrinsic width wins */
  font-family: inherit; font-size: var(--fs-ui); min-height: 48px;
  padding: .6rem .75rem; color: var(--ink); background: #fff;
  border: 1px solid var(--hairline); border-radius: 2px;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.req { color: var(--gold-deep); }

/* --- FAQ (native details/summary — works with JS off) ------------------ */
.faq { max-width: var(--measure); }
.faq details { border-block-end: 1px solid var(--hairline); }
.faq details:first-of-type { border-block-start: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; padding-block: 1.15rem; padding-inline-end: 2.5rem;
  position: relative; font-weight: 600; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; inset-inline-end: .5rem; inset-block-start: 1.55rem;
  width: 10px; height: 10px; border-inline-end: 2px solid var(--gold-deep);
  border-block-end: 2px solid var(--gold-deep); transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); inset-block-start: 1.75rem; }
.faq .faq__a { padding-block-end: 1.25rem; color: var(--ink-60); max-width: var(--measure); }

/* --- Offers / feature list --------------------------------------------- */
.offer { border: 1px solid var(--hairline); padding: clamp(1.25rem,3vw,1.75rem); display: grid; grid-template-rows: auto auto 1fr auto; background: var(--sand); }
.offer__name { font-family:"Newsreader","Newsreader Fallback",Georgia,serif; font-size: var(--fs-h3); }
.offer__body { color: var(--ink-60); font-size: var(--fs-small); margin-block-start: .6rem; }
.offer__foot { margin-block-start: 1.25rem; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ticks li { padding-inline-start: 1.4rem; position: relative; font-size: var(--fs-small); }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  width: 8px; height: 1px; background: var(--gold-deep);
}
.section--ink .ticks li::before { background: var(--gold-bright); }
/* A tick list introduced by a paragraph needs air between the two. */
.prose + .ticks { margin-block-start: 1.25rem; }
.ticks--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ticks--2 { grid-template-columns: 1fr 1fr; gap: .55rem 2rem; } }

/* --- Table (legal / capacity) ------------------------------------------ */
.tablewrap { overflow-x: auto; margin-block: 1.5rem; }
table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: var(--fs-small); }
th, td { text-align: start; padding: .7rem .9rem; border-block-end: 1px solid var(--hairline); vertical-align: top; }
th { font-weight: 600; background: var(--sand-2); }

/* --- Notice ------------------------------------------------------------ */
.notice {
  border-inline-start: 3px solid var(--gold-deep); background: var(--sand-2);
  padding: 1rem 1.25rem; font-size: var(--fs-small); margin-block: 1.5rem;
}
.notice strong { display: block; margin-block-end: .25rem; }

/* --- Footer ------------------------------------------------------------ */
.footer { background: var(--ink); color: #C9C0B2; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer a { color: #C9C0B2; text-decoration: none; }
.footer a:hover { color: var(--gold-bright); }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem; } }
.footer h2 { font-family: "Figtree","Figtree Fallback",sans-serif; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--sand); font-weight: 600; margin-block-end: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: var(--fs-small); }
.footer__tagline { font-size: var(--fs-small); margin-block-start: 1rem; max-width: 30ch; }
.footer__addr { font-style: normal; font-size: var(--fs-small); display: grid; gap: .5rem; }
.footer__bottom {
  border-block-start: 1px solid rgba(246,242,234,.14); margin-block-start: 3rem; padding-block-start: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: var(--fs-micro);
}

/* --- Sticky mobile action bar ------------------------------------------ */
.actionbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  display: flex; gap: 1px; background: var(--hairline);
  transform: translateY(101%); transition: transform .25s var(--ease);
  box-shadow: 0 -6px 24px rgba(20,17,14,.12);
}
.actionbar[data-shown] { transform: translateY(0); }
.actionbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 58px; text-decoration: none; font-size: var(--fs-small); font-weight: 600;
  background: var(--sand); color: var(--ink);
}
.actionbar a.is-primary { background: var(--gold); color: var(--ink); }
.actionbar svg { width: 17px; height: 17px; flex: none; }
@media (min-width: 1100px) { .actionbar { display: none; } }

/* --- Lightbox (a real <dialog>; the <a href> works without JS) ----------- */
dialog.lightbox {
  border: 0; padding: clamp(1rem, 4vw, 3rem); margin: auto;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  /* The element carries the ground itself. Relying on ::backdrop alone left the
     page legible through the overlay. */
  background: rgba(12,10,8,.97); color: var(--sand); overflow: hidden;
}
dialog.lightbox::backdrop { background: rgba(12,10,8,.97); }
dialog.lightbox[open] { display: flex; align-items: center; justify-content: center; }
dialog.lightbox img {
  max-width: min(100%, var(--photo-cap)); max-height: 84vh;
  width: auto; height: auto; object-fit: contain;
}
.lightbox__close, .lightbox__nav {
  position: fixed; background: rgba(20,17,14,.55);
  border: 1px solid rgba(246,242,234,.45);
  color: var(--sand); width: 48px; height: 48px; cursor: pointer; border-radius: 2px;
  font-size: 1.35rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--ink); }
.lightbox__close { inset-block-start: 1rem; inset-inline-end: 1rem; }
.lightbox__nav--prev { inset-inline-start: 1rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__nav--next { inset-inline-end: 1rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__cap {
  position: fixed; inset-block-end: 1rem; inset-inline: 4.5rem; text-align: center;
  color: #C9C0B2; font-size: var(--fs-small); margin: 0;
}
.gallery a { display: block; background: var(--sand-2); }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* --- Toast -------------------------------------------------------------
   Confirmation for the reservation form. Sits above the sticky action bar and
   below the lightbox. Never used for anything the guest must read to proceed:
   the page state changes too, so a missed toast loses nothing. */
.toast {
  position: fixed; z-index: 150;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline: 1rem;
  margin-inline: auto; width: fit-content; max-width: min(30rem, calc(100vw - 2rem));
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem; border-radius: 3px;
  background: var(--ink); color: var(--sand);
  box-shadow: 0 10px 34px -10px rgba(20,17,14,.55);
  font-size: var(--fs-small); line-height: 1.5;
}
.toast[hidden] { display: none; }
.toast__icon {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  background: var(--gold-bright); color: var(--ink); margin-block-start: 1px;
}
.toast--error .toast__icon { background: #C8705F; color: #2A0F0A; }
.toast__msg { margin: 0; }
.toast__close {
  flex: none; background: transparent; border: 0; color: #C9C0B2; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: .15rem .2rem; margin-inline-start: .25rem;
}
.toast__close:hover { color: var(--sand); }
@media (min-width: 1100px) { .toast { inset-inline: auto 1.5rem; margin-inline: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .28s var(--ease) both; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
}
/* Clear the sticky mobile action bar when it is showing. */
body:has(.actionbar[data-shown]) .toast {
  inset-block-end: calc(58px + max(1rem, env(safe-area-inset-bottom)));
}

/* --- Reveal on scroll (opt-in, bounded, reduced-motion safe) ------------ */
[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  html.js [data-reveal][data-seen] { opacity: 1; transform: none; }
}

/* --- Print ------------------------------------------------------------- */
@media print {
  .header, .footer, .actionbar, .bookbar, .lightbox, .navdrawer { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding-block: 1rem; }
  img { max-width: 400px; }
}