/* Congress Plaza Hotel — site styles
   Colors and type follow the Brand Guidelines (brand/brand-guidelines.html).
   Cream & Mahogany lead, Champagne Gold accents; Royal Burgundy, Midnight, Malachite, Slate and Sand support.
   Three typefaces: Cinzel (caps, tracked) for headings and short labels (buttons, small labels, facts),
   Lato for everything guests read and for the navigation (Lato Bold), and MonteCarlo script as an accent. */

:root {
  --cream: #FDFCF3;
  --sand: #ECE0CC; /* the alternate band color: a deeper, warm sand */
  --cream-deep: var(--sand);
  --cream-line: #E2D4BE;
  --mahogany: #2D1B11;
  --mahogany-2: #3B2619;
  --ink: var(--mahogany);
  --gold: #D4C18A; /* champagne, matched to the logo */
  --antique: var(--gold); /* one gold everywhere; kept as a name so existing rules still read clearly */
  --burgundy: #570D13; /* Royal Burgundy */
  --burgundy-2: #6C1219;
  /* buttons are Malachite, a shade lighter on hover */
  --button: var(--malachite); --button-2: #1F4D3A;
  --midnight: #061737;
  --malachite: #14382A;
  --slate: #4E5459; /* secondary text on Cream: captions, labels, small print */

  --serif: "Cinzel", Georgia, "Times New Roman", serif;
  --sans: "Lato", Helvetica, Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --radius: 0; /* buttons have square corners */
  --header-h: 54px; /* the menu row at the top of the page (the top line adds 30 px above it) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-soft: 0 18px 50px -24px rgba(45, 27, 17, .45);
  --shadow-card: 0 1px 0 rgba(45, 27, 17, .04), 0 12px 32px -18px rgba(45, 27, 17, .35);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
figure { margin: 0; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--mahogany); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--mahogany); color: var(--cream); padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--antique); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- type */
.h1, .h2, .h3, .eyebrow, h1, h2, h3 {
  font-family: var(--serif);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  line-height: 1.12;
}
h1, .h1 { font-weight: 700; letter-spacing: .06em; font-size: clamp(38px, 6.4vw, 92px); }
h2, .h2 { letter-spacing: .08em; font-size: clamp(28px, 3.6vw, 50px); }
h3, .h3 { font-weight: 500; letter-spacing: .14em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.3; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 600; letter-spacing: .3em; color: var(--antique);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .8; }
.eyebrow--center::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .8; }
/* On light backgrounds champagne text is too faint, so the small gold labels get a champagne background behind the
   words with dark brown letters, like highlighted text. On dark backgrounds they stay plain champagne text. */
.eyebrow, .offer__tag, .chapter--split .chapter__num {
  width: fit-content; background: var(--gold); color: var(--mahogany);
  padding: .34em .6em .3em .9em; line-height: 1.35; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.eyebrow::before, .eyebrow--center::after { display: none; }
:is(.section--dark, .section--midnight, .section--malachite, .page-hero, .duo__body, .explore-teaser__copy, .contact-card, .cta-band, .explorer__cover, .chapter--full, .on-dark, .site-footer) .eyebrow {
  background: none; padding: 0; color: var(--gold);
}
:is(.section--dark, .section--midnight, .section--malachite, .page-hero, .duo__body, .explore-teaser__copy, .contact-card, .cta-band, .explorer__cover, .chapter--full, .on-dark, .site-footer) .eyebrow::before,
:is(.section--dark, .section--midnight, .section--malachite, .page-hero, .duo__body, .explore-teaser__copy, .contact-card, .cta-band, .explorer__cover, .chapter--full, .on-dark, .site-footer) .eyebrow--center::after { display: block; }
.section-head.center .eyebrow { justify-self: center; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--mahogany); max-width: 42em; }
.small { font-size: 14px; color: var(--slate); }
.caps-label {
  font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
}
/* The small practical text is set in Cinzel too, so the site keeps to three typefaces. */
.link-arrow, .play-btn, .field label, .field .field__label, .offer__ribbon, .stat span,
.chapter__facts li, .chapter__thumbs figcaption, .explore-teaser__badge, .pin span, .card__meta, .venue__specs span,
.place__meta li, .hours dt, .form label, .contact-card dt, .chips li, .filter button, .explorer__controls button,
.explorer-label span, .tag-list li, .venue-jump span, .venue__caps dt, .cap-table thead th, .cap-table__floor th {
  font-family: var(--serif);
}
.gold-rule { width: 64px; height: 2px; background: var(--antique); border: 0; margin: 28px 0; }
.gold-rule--center { margin-inline: auto; }

/* ---------------------------------------------------------------- layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.section { padding-block: clamp(72px, 10vw, 150px); }
.section--tight { padding-block: clamp(48px, 6vw, 90px); }
.section--deep { background: var(--cream-deep); }
.section--dark { background: var(--mahogany); color: var(--cream); }
.section--dark .lede, .section--dark p { color: rgba(253, 252, 243, .82); }
.section--dark .eyebrow { color: var(--gold); }
.section--midnight { background: var(--midnight); color: var(--cream); }
/* Malachite: the deep green for park and garden-side content (Grant Park, the Gazebo) */
.section--malachite { background: var(--malachite); color: var(--cream); }
.section--malachite .eyebrow { color: var(--gold); }
.section--malachite .lede, .section--malachite p { color: rgba(253, 252, 243, .84); }
.section--midnight .eyebrow { color: var(--gold); }
.section--midnight p { color: rgba(253, 252, 243, .82); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.stack > * + * { margin-top: 22px; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head--split { grid-template-columns: 1fr auto; align-items: end; gap: 24px 48px; }
@media (max-width: 760px) { .section-head--split { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- buttons & links */
.btn {
  --bg: var(--button); --fg: var(--cream); --bd: var(--button);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 30px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: var(--radius);
  font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover { --bg: var(--button-2); box-shadow: 0 10px 26px -14px rgba(20, 56, 42, .7); transform: translateY(-1px); }
.btn--gold { --bg: var(--gold); --fg: var(--mahogany); --bd: var(--gold); }
.btn--gold:hover { --bg: #E2D3A5; box-shadow: 0 10px 26px -14px rgba(212, 193, 138, .8); }
.btn--ghost { --bg: transparent; --fg: var(--cream); --bd: rgba(253, 252, 243, .6); }
.btn--ghost:hover { --bg: rgba(253, 252, 243, .12); --bd: var(--cream); box-shadow: none; }
.btn--ghost-dark { --bg: transparent; --fg: var(--mahogany); --bd: rgba(45, 27, 17, .35); }
.btn--ghost-dark:hover { --bg: var(--mahogany); --fg: var(--cream); --bd: var(--mahogany); }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--burgundy); padding-block: 6px; border-bottom: 1px solid transparent;
  transition: gap .35s var(--ease), border-color .35s var(--ease);
}
.link-arrow::after { content: "\2192"; font-size: 17px; letter-spacing: 0; transition: transform .35s var(--ease); }
.link-arrow:hover { gap: 18px; border-bottom-color: currentColor; }
.section--dark .link-arrow, .section--midnight .link-arrow, .section--malachite .link-arrow, .on-dark .link-arrow { color: var(--gold); }

/* ---------------------------------------------------------------- header */
/* At the top of the page: a thin brown band behind the menu, and the full gold logo in its framed square (Mahogany
   with a champagne keyline, per the Brand Guidelines) hanging from the top edge over the hero. No shading around it.
   Once the page scrolls: a solid Mahogany bar with the crest alone. Three menu items sit either side of the logo and
   the Reserve button sits at the right. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  color: var(--gold); isolation: isolate;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.site-header::before {
  /* the Mahogany bar at the top of the page: near-solid behind the menu, then feathering to transparent into the hero */
  content: ""; position: absolute; inset: 0 0 -46px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(45, 27, 17, .96) 0%, rgba(45, 27, 17, .9) 58%,
    rgba(45, 27, 17, .55) 76%, rgba(45, 27, 17, .2) 89%, rgba(45, 27, 17, 0) 100%);
  transition: opacity .45s var(--ease);
}
.utility {
  position: relative; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  height: 30px; font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .05em; color: rgba(253, 252, 243, .8);
  border-bottom: 1px solid rgba(212, 193, 138, .22);
  transition: height .45s var(--ease), opacity .3s var(--ease), border-color .45s var(--ease);
}
.utility a { text-decoration: none; }
.utility a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.utility__group { display: flex; gap: 22px; align-items: center; }
.utility__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--antique); }
.masthead { position: relative; display: flex; align-items: center; height: var(--header-h); transition: height .45s var(--ease); }
.nav { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(22px, 2.6vw, 44px); }
.nav__list { display: flex; gap: clamp(18px, 2.2vw, 36px); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__list--left { justify-content: flex-end; }
.nav__list--right { justify-content: flex-start; padding-right: 190px; }
.brand { display: block; line-height: 0; position: relative; }
.brand img { width: auto; height: 100%; }
/* the full logo at the top of the page; the crest alone once the header shrinks on scroll (or the phone menu opens) */
.brand__crest { display: none; }
.site-header.is-solid .brand__full, .site-header.is-open .brand__full { display: none; }
.site-header.is-solid .brand__crest, .site-header.is-open .brand__crest { display: block; }
/* The framed logo: a Mahogany square with a champagne keyline set in from its edges. At the top of the page it hangs
   from the top of the screen, through the bar, over the hero, 8 px below the top edge (130 px tall; the logo itself 104 px, about 128 px wide).
   The negative margins keep the menu row its own height. */
.brand--frame { background: var(--mahogany); }
.brand--frame::after { content: ""; position: absolute; inset: 5px; border: 2px solid var(--gold); pointer-events: none; transition: opacity .3s var(--ease); }
.brand--center { height: 130px; padding: 12px 16px 14px; align-self: start; margin: -22px 0 -54px; transition: height .45s var(--ease), margin .45s var(--ease), padding .45s var(--ease); }
.brand--mobile { display: none; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0;
  font-family: var(--sans); font-weight: 700; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  background: none; border: 0; cursor: pointer; color: var(--gold);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--cream); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item--open > .nav__link::after { transform: scaleX(1); }
.nav__caret { width: 10px; height: 10px; transition: transform .3s var(--ease); }
.nav__item { position: relative; }
.nav__item--open .nav__caret { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; min-width: 300px; padding: 10px;
  background: var(--cream); color: var(--ink); box-shadow: var(--shadow-soft); border-top: 2px solid var(--antique);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__item--open .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown a { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 10px; text-decoration: none; }
.dropdown a:hover { background: var(--cream-deep); }
.dropdown img { width: 64px; height: 48px; object-fit: cover; }
.dropdown strong { display: block; font-family: var(--sans); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; }
.dropdown span { font-size: 14px; color: var(--slate); line-height: 1.4; display: block; }
.header-cta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
/* Reserve buttons: metallic gold (the logo's gold) with Mahogany letters, inside a 2 px frame of deeper bronze-gold so
   the frame shows around the fill; every other button is Malachite */
.btn--gilt {
  --fg: var(--mahogany); border: 2px solid transparent;
  background: linear-gradient(110deg, #B39656 0%, #F2E3A7 20%, #C7AE76 40%, #FBF5C0 60%, #CDB37A 80%, #B39656 100%) padding-box,
    linear-gradient(110deg, #6E5326 0%, #A9894E 28%, #7D6233 52%, #B8995A 74%, #6E5326 100%) border-box;
}
.btn--gilt:hover {
  background: linear-gradient(110deg, #C2A566 0%, #F8ECBA 20%, #D6BE86 40%, #FFF9D2 60%, #DBC28A 80%, #C2A566 100%) padding-box,
    linear-gradient(110deg, #7A5E2E 0%, #B9995C 28%, #8A6D3B 52%, #C9AC6E 74%, #7A5E2E 100%) border-box;
  box-shadow: 0 10px 26px -14px rgba(120, 90, 40, .75);
}
.site-header.is-solid .masthead { position: static; }
/* desktop, scrolled: Reserve Now fills the bar's height, set in a few px from its edges so the gold border has room */
.site-header.is-solid .header-cta { top: 6px; bottom: 6px; right: 6px; transform: none; }
.site-header.is-solid .header-cta .btn { height: 100%; min-height: 0; border-radius: 0; padding: 0 clamp(36px, 3.6vw, 64px); }
.menu-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; margin-left: -10px; color: var(--gold);
}
.menu-toggle span { display: block; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .35s var(--ease), opacity .2s; }

.site-header.is-solid .utility { height: 0; opacity: 0; overflow: hidden; border-color: transparent; border-bottom-width: 0; }
/* the scrolled bar: the crest and the Reserve button fitted inside with a few px around them */
.site-header.is-solid { --header-h: 48px; }
/* scrolled (and with the phone menu open): the bar turns solid Mahogany, the crest alone on it */
.site-header.is-solid, .site-header.is-open { background: var(--mahogany); box-shadow: 0 10px 30px -18px rgba(20, 12, 4, .7); }
.site-header.is-solid::before, .site-header.is-open::before { opacity: 0; }
.site-header.is-solid .brand--center { height: 36px; padding: 0; margin: 6px 0; background: none; }
.site-header.is-solid .brand--frame::after, .site-header.is-open .brand--frame::after { opacity: 0; }
.site-header.is-hidden { transform: translateY(-100%); }

@media (max-width: 1360px) {
  .nav__list { gap: 20px; }
  .nav__link { font-size: 12.5px; letter-spacing: .14em; }
  .nav__list--right { padding-right: 170px; }
}
@media (max-width: 1180px) {
  :root { --header-h: 56px; }
  .site-header.is-solid { --header-h: 46px; }
  .utility { display: none; }
  /* the menu icon sits at the right edge on phones and tablets */
  .menu-toggle { display: block; margin: 0 -10px 0 auto; }
  .brand--center { display: none; }
  /* menu button, logo, Reserve Now in one row: the framed logo is centered in the space between the two buttons,
     hanging below the bar (118 px frame, the logo itself 94 px tall and about 115 px wide) */
  .brand--mobile { display: block; height: 118px; padding: 11px 13px 13px; align-self: start; margin: 6px auto -38px; transition: height .45s var(--ease), margin .45s var(--ease), padding .45s var(--ease); }
  .brand--mobile.brand--frame::after { inset: 4px; border-width: 2px; }
  /* first screen on a phone: no Reserve button (it appears once the page scrolls or the menu opens), and the framed
     logo centered on the screen */
  /* phones: no Reserve button in the header at all; it's in the booking box, the sticky bar, and the menu panel */
  .header-cta { display: none; }
  .brand--mobile { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
  .site-header:not(.is-solid):not(.is-open) .brand--mobile { margin: 6px 0 0; }
  /* once the page scrolls (or the menu opens), the crest stays centered on the screen */
  .site-header.is-solid .brand--mobile, .site-header.is-open .brand--mobile { top: 50%; transform: translate(-50%, -50%); margin: 0; }
  .site-header.is-solid .brand--mobile, .site-header.is-open .brand--mobile { height: 46px; padding: 3px 0; align-self: center; background: none; }
  .site-header.is-solid .brand--mobile { height: 34px; padding: 0; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; display: block; background: var(--cream); color: var(--ink);
    overflow-y: auto; padding: 18px var(--gutter) 120px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .site-header.is-open .nav { opacity: 1; visibility: visible; transform: none; }
  .site-header.is-open .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav__list, .nav__list--right { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .nav__list > li { border-bottom: 1px solid var(--cream-line); }
  .nav__link { width: 100%; justify-content: space-between; padding: 18px 0; font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: .12em; color: var(--mahogany); }
  .nav__link:hover { color: var(--cream); }
  .nav__link::after { display: none; }
  .dropdown { position: static; transform: none; box-shadow: none; border: 0; min-width: 0; padding: 0 0 12px; display: none; opacity: 1; visibility: visible; background: none; }
  .nav__item--open .dropdown { display: block; transform: none; }
  .nav__mobile-extra { display: grid !important; }
}
@media (max-width: 420px) { .brand--mobile { height: 112px; } }
.nav__mobile-extra { display: none; gap: 10px; padding-top: 26px; font-size: 16px; }
.nav__mobile-extra a { text-decoration: none; }

/* ---------------------------------------------------------------- hero (video) */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end;
  color: var(--cream); overflow: hidden; background: var(--mahogany);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media img { position: absolute; inset: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* no text sits on the video, so only a soft shade at the bottom to seat the booking bar */
  background: linear-gradient(to top, rgba(30, 20, 9, .5), rgba(30, 20, 9, 0) 28%);
}
/* home: the tagline, its script second line, and the first buttons, on cream just below the booking bar */
.home-intro { text-align: center; padding: clamp(56px, 7vw, 104px) 0 clamp(24px, 3vw, 40px); }
.home-intro h1 { font-size: inherit; }
/* the tagline: "Stay in the Heart of Chicago" large in MonteCarlo, "Think Chicago, think Congress." smaller in serif caps beneath */
.home-intro__script {
  display: block; font-family: "MonteCarlo", var(--serif); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.1;
  font-size: clamp(56px, 8.4vw, 124px); color: var(--antique);
}
.home-intro__caps { display: block; margin-top: clamp(22px, 2.4vw, 34px); font-size: clamp(20px, 2.5vw, 36px); letter-spacing: .12em; color: var(--mahogany); }
.home-intro__sub { margin: 22px auto 0; max-width: 40em; font-size: clamp(17px, 1.45vw, 21px); color: var(--mahogany); letter-spacing: .02em; }
.home-intro__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.play-btn.play-btn--dark { color: var(--mahogany); }
.play-btn.play-btn--dark .play-btn__ring { border-color: rgba(45, 27, 17, .5); }
.play-btn.play-btn--dark:hover .play-btn__ring { background: rgba(45, 27, 17, .06); border-color: var(--mahogany); }
/* the video sits over the still (shown until it plays); both frame the hotel's Michigan Avenue front */
.hero__media video { position: absolute; inset: 0; z-index: 1; }
.hero__media img, .hero__media video { object-position: 50% 55%; }
.play-btn { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--cream); cursor: pointer; padding: 0 16px; min-height: 52px; font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
.play-btn__ring { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(253, 252, 243, .7); display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s var(--ease); }
.play-btn:hover .play-btn__ring { background: rgba(253, 252, 243, .14); border-color: var(--cream); }
.play-btn svg { width: 14px; height: 14px; margin-left: 2px; }
.video-toggle {
  position: absolute; right: var(--gutter); bottom: clamp(118px, 15vh, 150px); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 13, 5, .35); border: 1px solid rgba(253, 252, 243, .45); color: var(--cream); cursor: pointer;
  backdrop-filter: blur(6px);
}
.video-toggle svg { width: 14px; height: 14px; }
.video-toggle .i-play { display: none; }
.video-toggle[aria-pressed="true"] .i-play { display: block; }
.video-toggle[aria-pressed="true"] .i-pause { display: none; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%); width: 1px; height: 44px; overflow: hidden; background: rgba(253, 252, 243, .25);
  display: none;
}
.scroll-cue::after { content: ""; position: absolute; left: 0; top: -44px; width: 1px; height: 44px; background: var(--gold); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { to { top: 44px; } }

/* page heroes (photo) */
.page-hero {
  position: relative; min-height: min(86vh, 860px); min-height: min(86svh, 860px);
  display: grid; align-items: end; color: var(--cream); overflow: hidden; background: var(--mahogany); isolation: isolate;
}
.page-hero__img { position: absolute; inset: 0; z-index: -2; }
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: settle 2.8s var(--ease) forwards; }
@keyframes settle { to { transform: scale(1); } }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(28, 18, 8, .74) 0%, rgba(28, 18, 8, .18) 48%, rgba(28, 18, 8, .38) 100%);
}
.page-hero__inner { position: relative; z-index: 1; padding-bottom: clamp(110px, 14vh, 160px); padding-top: 200px; }
/* room space under the headline for the booking box that overlaps the photo */
.page-hero--booking .page-hero__inner { padding-bottom: clamp(140px, 17vh, 190px); }
.page-hero .eyebrow { color: var(--gold); margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(36px, 5.6vw, 80px); max-width: 16ch; }
.page-hero__sub { margin-top: 18px; max-width: 36em; font-size: clamp(17px, 1.4vw, 20px); color: rgba(253, 252, 243, .9); }

/* the bottom of the top photo or video fades into the section below it (Cream, or Mahogany when a dark section
   follows), so there's no hard edge */
.hero-fade {
  --fade: 253, 252, 243;
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; height: clamp(80px, 11vh, 130px); pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--fade), 0) 0%, rgba(var(--fade), .55) 55%, rgba(var(--fade), .9) 82%, rgb(var(--fade)) 100%);
}
.page-hero:has(+ .section--dark, + .explorer) .hero-fade { --fade: 45, 27, 17; }

/* phones and tablets: the first section fills the screen. Pages without a booking box get a full-screen photo with
   the headline at its foot; with a box, the photo plus the box that overlaps it end at the screen's bottom edge.
   The fade at the photo's foot is just a thin softening of the edge. */
@media (max-width: 1180px) {
  .page-hero { min-height: 100vh; min-height: 100svh; }
  .hero-fade { height: 40px; background: linear-gradient(to bottom, rgba(var(--fade), 0), rgb(var(--fade))); }
  /* event spaces: the photo plus the arrows bar under it fill the screen */
  .page-hero:has(+ .space-nav) { min-height: calc(100vh - 94px); min-height: calc(100svh - 94px); }
}
@media (max-width: 640px) {
  .page-hero:has(+ .space-nav) { min-height: calc(100vh - 78px); min-height: calc(100svh - 78px); }
}
@media (max-width: 1080px) {
  /* the stacked booking box is 276 px tall here and overlaps the photo by 86 px (212 px on the home video) */
  .hero { min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
  .page-hero + .booking { margin-top: -86px; }
  .page-hero--booking { min-height: calc(100vh - 202px); min-height: calc(100svh - 202px); }
  .page-hero--booking .page-hero__inner { padding-bottom: 116px; }
}
@media (max-width: 760px) {
  /* clear of the framed logo, which reaches 138 px down */
  .page-hero__inner { padding-top: 160px; padding-bottom: 48px; }
  /* room for the crest above the headline on spaces without photos */
  .page-hero--crest .page-hero__inner { padding-top: 298px; }
  .page-hero--booking .page-hero__inner { padding-bottom: 96px; }
}
@media (max-width: 560px) {
  /* phones: the booking box is 224 px tall (its intro row hides) */
  .page-hero--booking { min-height: calc(100vh - 150px); min-height: calc(100svh - 150px); }
}

/* ---------------------------------------------------------------- booking bar */
.booking {
  position: relative; z-index: 5; margin-top: calc(-1 * clamp(86px, 9vw, 104px));
}
.booking__panel {
  display: grid; grid-template-columns: minmax(210px, auto) 1fr 1fr .7fr .7fr auto; align-items: stretch;
  background: var(--cream); color: var(--ink); box-shadow: var(--shadow-soft); border-top: 2px solid var(--antique);
}
.booking__intro {
  display: flex; flex-direction: column; justify-content: center; padding: 16px 24px; background: var(--cream-deep); color: var(--ink);
  border-right: 1px solid var(--cream-line);
}
.booking__intro strong { font-family: var(--serif); font-weight: 700; letter-spacing: .14em; font-size: 15px; text-transform: uppercase; color: var(--burgundy); }
.booking__intro span { font-size: 13px; color: var(--mahogany); }
.field { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 14px 22px; border-left: 1px solid var(--cream-line); min-width: 0; }
.field:first-of-type { border-left: 0; }
.field label, .field .field__label { font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); }
.field input, .field select {
  width: 100%; border: 0; background: transparent; padding: 4px 0 0; font-size: 17px; color: var(--ink); outline: none; min-height: 32px; cursor: pointer;
}
.field input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.field input::placeholder { color: var(--slate); opacity: .7; }
.field:focus-within { background: #FFFDF0; box-shadow: inset 0 -2px 0 var(--antique); }
.booking__submit { display: flex; }
/* the gold-framed Reserve button, set in from the panel's edges so its border has room */
.booking__submit { padding: 6px; }
.booking__submit .btn { height: 100%; min-height: 64px; border-radius: 0; padding-inline: 32px; font-size: 15px; }
@media (max-width: 1080px) {
  .booking__panel { grid-template-columns: 1fr 1fr; }
  .booking__intro { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 20px; gap: 12px; }
  .field { border-left: 0; border-top: 1px solid var(--cream-line); padding: 12px 18px; }
  .field:nth-of-type(even) { border-left: 1px solid var(--cream-line); }
  .booking__submit { grid-column: 1 / -1; }
  .booking__submit .btn { width: 100%; min-height: 54px; }
  /* home page: on tablets and phones the booking box rises further onto the video, so the dates and guests show on
     the first screen (the Reserve button sits just below) */
  .hero + .booking { margin-top: -212px; }
  .hero .video-toggle { bottom: 226px; }
}
@media (max-width: 560px) {
  /* the video stops 64 px short of the screen's bottom so the whole 224 px booking box shows, ending 16 px above it */
  .hero { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
  .hero + .booking { margin-top: -176px; }
  .hero .video-toggle { bottom: 190px; }
}

/* docked booking bar */
.dock {
  position: fixed; left: 50%; bottom: 18px; z-index: 80; width: min(100% - 24px, 940px);
  transform: translate(-50%, 140%); transition: transform .55s var(--ease), opacity .4s; opacity: 0;
}
.dock.is-visible { transform: translate(-50%, 0); opacity: 1; }
.dock__bar {
  display: grid; grid-template-columns: auto 1fr 1fr .7fr auto; align-items: stretch;
  background: rgba(253, 252, 243, .97); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(45, 27, 17, .55);
  border: 1px solid var(--cream-line); border-top: 2px solid var(--antique); backdrop-filter: blur(10px);
}
.dock__crest { display: grid; place-items: center; padding: 0 18px; border-right: 1px solid rgba(212, 193, 138, .35); background: var(--mahogany); }
.dock__crest img { width: 64px; }
.dock .field { border-left: 1px solid var(--cream-line); padding: 10px 18px; }
.dock .field:first-of-type { border-left: 0; }
.dock .field label { color: var(--slate); font-size: 11px; }
.dock .field input, .dock .field select { color: var(--ink); font-size: 16px; min-height: 28px; }
.dock .field:focus-within { background: #FFFDF0; box-shadow: inset 0 -2px 0 var(--antique); }
/* the gold-framed Reserve button, set in from the bar's edges so its border has room */
.dock__bar .btn { margin: 6px; border-radius: 0; min-height: 50px; }
.dock__mobile { display: none; }
@media (max-width: 760px) {
  .dock { bottom: 0; width: 100%; }
  .dock__bar { display: none; }
  .dock__mobile {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--cream); color: var(--ink);
    border-top: 2px solid var(--antique); box-shadow: 0 -10px 30px -18px rgba(45, 27, 17, .5);
  }
  .dock__mobile-name { font-size: 14px; line-height: 1.3; color: var(--mahogany); text-decoration: none; }
  .dock__mobile strong { display: block; font-family: var(--serif); letter-spacing: .12em; font-weight: 700; color: var(--burgundy); font-size: 14px; }
  .dock__mobile .btn { min-height: 46px; padding: 0 18px; }
}

/* ---------------------------------------------------------------- media helpers & reveals */
.frame { position: relative; overflow: hidden; background: var(--cream-deep); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
a:hover > .frame img, .frame:hover img, .card:hover .frame img { transform: scale(1.035); }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1 { aspect-ratio: 1; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- offers */
.offers { padding-top: clamp(64px, 8vw, 120px); }
.offers__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.offer { display: flex; flex-direction: column; background: #FFFEF6; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.offer:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(45, 27, 17, .55); }
.offer .frame { aspect-ratio: 4 / 3; }
.offer--lead .frame { aspect-ratio: 16 / 11; }
.offer__body { padding: clamp(20px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.offer__tag { font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mahogany); }
.offer h3 { font-size: clamp(19px, 1.7vw, 24px); letter-spacing: .1em; font-weight: 600; }
.offer p { color: var(--mahogany); margin: 0; font-size: 16px; }
.offer__price { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.offer__price strong { font-family: var(--serif); font-weight: 700; font-size: 34px; letter-spacing: .04em; color: var(--burgundy); }
.offer__price span { font-size: 14px; color: var(--slate); }
.offer .link-arrow { margin-top: auto; padding-top: 10px; }
.offer__ribbon { position: absolute; left: 18px; top: 18px; background: var(--burgundy); color: var(--cream); padding: 8px 14px; font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 980px) {
  .offers__grid { grid-template-columns: 1fr 1fr; }
  .offer--lead { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .offers__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 22px; scrollbar-width: none; }
  .offers__grid::-webkit-scrollbar { display: none; }
  .offer { flex: 0 0 84%; scroll-snap-align: center; }
}

/* ---------------------------------------------------------------- story / plan */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 110px); align-items: center; }
.story__media { position: relative; }
.story__media .frame { aspect-ratio: 4 / 5; }
.story__inset { position: absolute; right: -8%; bottom: -10%; width: 46%; border: 10px solid var(--cream); box-shadow: var(--shadow-soft); }
.story__inset .frame { aspect-ratio: 1; }
.story__stat { display: flex; gap: clamp(24px, 4vw, 56px); margin-top: 36px; flex-wrap: wrap; }
.stat strong { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: .04em; color: var(--burgundy); line-height: 1; }
.stat span { display: block; margin-top: 8px; font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story__inset { right: 4%; bottom: -8%; width: 40%; }
  .story__media { margin-bottom: 40px; }
}

.plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); counter-reset: step; }
.plan__step { position: relative; padding-top: 30px; border-top: 1px solid rgba(212, 193, 138, .5); }
.plan__icon { display: block; width: 84px; height: 84px; margin: 0 0 18px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.plan__step h3 { margin: 18px 0 12px; color: var(--cream); letter-spacing: .12em; }
.plan__step > h3:first-child { margin-top: 0; }
.plan__step p { margin: 0; }
.section--cream .plan__step { border-color: var(--cream-line); }
@media (max-width: 800px) { .plan { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- chapters */
.chapter { position: relative; }
.chapter--full { min-height: min(92vh, 940px); display: grid; align-items: end; color: var(--cream); isolation: isolate; overflow: hidden; }
.chapter--full .chapter__img { position: absolute; inset: -6% 0; z-index: -2; }
.chapter--full .chapter__img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.chapter--full::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28, 18, 8, .72) 0%, rgba(28, 18, 8, .2) 55%, rgba(28, 18, 8, 0) 80%), linear-gradient(to top, rgba(28, 18, 8, .5), transparent 45%); }
.chapter--full.chapter--right::after { background: linear-gradient(270deg, rgba(28, 18, 8, .82) 0%, rgba(28, 18, 8, .45) 45%, rgba(28, 18, 8, 0) 80%), linear-gradient(to top, rgba(28, 18, 8, .5), transparent 45%); }
/* a deeper shade behind the copy for bright photos */
.chapter--full.chapter--bright::after { background: linear-gradient(90deg, rgba(28, 18, 8, .84) 0%, rgba(28, 18, 8, .5) 45%, rgba(28, 18, 8, 0) 80%), linear-gradient(to top, rgba(28, 18, 8, .55), transparent 45%); }
.chapter--bright .chapter__copy { text-shadow: 0 1px 2px rgba(20, 12, 4, .5), 0 2px 18px rgba(20, 12, 4, .45); }
.chapter__copy { max-width: 560px; padding-block: clamp(72px, 10vw, 140px); }
.chapter--right .chapter__copy { margin-left: auto; }
.chapter__num { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: .34em; color: var(--gold); margin-bottom: 18px; display: block; }
.chapter--full h2 { font-size: clamp(34px, 4.6vw, 66px); }
.chapter__copy p { font-size: clamp(17px, 1.35vw, 20px); color: rgba(253, 252, 243, .9); margin-top: 20px; }
.chapter__copy .link-arrow { margin-top: 12px; color: var(--gold); }
.chapter__facts { display: flex; gap: 10px 26px; flex-wrap: wrap; margin: 22px 0 8px; padding: 0; list-style: none; }
.chapter__facts li { font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.chapter__facts li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }

.chapter--split { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 0; background: var(--cream); }
.chapter--split.chapter--flip { grid-template-columns: 1fr 1.25fr; }
.chapter--split.chapter--flip .chapter__media { order: 2; }
.chapter--split .chapter__media { position: relative; height: 100%; min-height: 560px; }
.chapter--split .chapter__media .frame { position: absolute; inset: 0; }
.chapter--split .chapter__copy { padding: clamp(56px, 7vw, 120px) clamp(28px, 6vw, 110px); max-width: 640px; }
.chapter--split h2 { font-size: clamp(30px, 3.6vw, 52px); }
.chapter--split .chapter__num { color: var(--mahogany); }
.chapter--split .chapter__copy p { color: var(--mahogany); }
.chapter--split .chapter__copy .link-arrow { color: var(--burgundy); }
.chapter__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 34px; }
.chapter__thumbs .frame { aspect-ratio: 1; }
.chapter__thumbs figcaption { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-top: 8px; color: var(--slate); }
@media (max-width: 900px) {
  .chapter--split, .chapter--split.chapter--flip { grid-template-columns: 1fr; }
  .chapter--split .chapter__media { min-height: 0; aspect-ratio: 4 / 3; order: 0 !important; }
  .chapter--full::after, .chapter--full.chapter--right::after { background: linear-gradient(to top, rgba(28, 18, 8, .82) 0%, rgba(28, 18, 8, .35) 60%, rgba(28, 18, 8, .1) 100%); }
  .chapter--full.chapter--bright::after { background: linear-gradient(to top, rgba(28, 18, 8, .9) 0%, rgba(28, 18, 8, .62) 60%, rgba(28, 18, 8, .25) 100%); }
  .chapter--full { min-height: 88vh; }
}

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.duo__card { position: relative; display: block; color: var(--cream); text-decoration: none; overflow: hidden; isolation: isolate; min-height: 520px; }
.duo__card .frame { position: absolute; inset: 0; z-index: -2; }
.duo__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(28, 18, 8, .92) 0%, rgba(28, 18, 8, .72) 38%, rgba(28, 18, 8, .1) 78%); transition: opacity .6s var(--ease); }
.duo__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 44px); }
.duo__body .eyebrow { color: var(--gold); }
.duo__body h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: .08em; margin: 14px 0 10px; }
.duo__body p { color: rgba(253, 252, 243, .88); max-width: 30em; margin-bottom: 14px; }
.duo__body .link-arrow { color: var(--gold); }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } .duo__card { min-height: 440px; } }

/* ---------------------------------------------------------------- 3D teaser */
.explore-teaser { position: relative; display: grid; grid-template-columns: 1fr 1.35fr; min-height: 620px; background: var(--midnight); color: var(--cream); overflow: hidden; }
.explore-teaser__copy { padding: clamp(56px, 7vw, 110px) clamp(28px, 5vw, 90px); display: flex; flex-direction: column; justify-content: center; gap: 18px; position: relative; z-index: 1; }
.explore-teaser__copy .eyebrow { color: var(--gold); }
.explore-teaser__copy p { color: rgba(253, 252, 243, .84); }
.explore-teaser__media { position: relative; display: block; overflow: hidden; }
.explore-teaser__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.explore-teaser__media:hover img { transform: scale(1.04); }
.explore-teaser__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--midnight) 0%, rgba(6, 23, 55, 0) 30%); z-index: 1; }
.explore-teaser__badge {
  position: absolute; z-index: 2; right: 28px; bottom: 28px; display: inline-flex; align-items: center; gap: 12px;
  background: rgba(253, 252, 243, .95); color: var(--mahogany); padding: 14px 20px; font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
}
.explore-teaser__badge svg { width: 20px; height: 20px; }
.pin { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.pin span { background: rgba(253, 252, 243, .95); color: var(--mahogany); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; white-space: nowrap; }
.pin i { width: 1px; height: 28px; background: rgba(253, 252, 243, .9); }
.pin b { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(212, 193, 138, .3); }
@media (max-width: 900px) {
  .explore-teaser { grid-template-columns: 1fr; }
  .explore-teaser__media { aspect-ratio: 16 / 11; order: -1; }
  .explore-teaser__media::before { background: linear-gradient(0deg, var(--midnight) 0%, rgba(6, 23, 55, 0) 35%); }
}

/* ---------------------------------------------------------------- history band */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--antique) transparent; padding-bottom: 18px; }
.timeline__item { scroll-snap-align: start; padding: 0 28px 0 0; }
.timeline__item .frame { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.timeline__year { font-family: var(--serif); font-weight: 700; font-size: 40px; color: var(--gold); letter-spacing: .04em; line-height: 1; display: flex; align-items: center; gap: 16px; }
.timeline__year::after { content: ""; flex: 1; height: 1px; background: rgba(212, 193, 138, .35); }
.timeline__item h3 { margin: 14px 0 8px; font-size: 16px; }
.timeline__item p { font-size: 16px; }

/* ---------------------------------------------------------------- cards / grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; background: #FFFEF6; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
.card .frame { aspect-ratio: 3 / 2; }
.card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__meta { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.card h3 { font-size: 19px; letter-spacing: .1em; font-weight: 600; }
.card p { color: var(--mahogany); font-size: 16px; margin: 0; }
.card .link-arrow { margin-top: auto; padding-top: 8px; }
.card--flat { background: none; box-shadow: none; }
.card--flat .card__body { padding: 20px 0 0; }

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--cream-line); border: 1px solid var(--cream-line); }
.feature { background: var(--cream); padding: 34px 28px; }
.feature svg { width: 34px; height: 34px; color: var(--antique); margin-bottom: 18px; }
.feature h3 { font-size: 15px; letter-spacing: .14em; margin-bottom: 10px; }
.feature p { font-size: 15.5px; color: var(--mahogany); margin: 0; }
@media (max-width: 980px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .features { grid-template-columns: 1fr; } }

/* venue rows */
.venue { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.venue + .venue { margin-top: clamp(80px, 10vw, 150px); }
.venue--flip .venue__media { order: 2; }
.venue__media { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 5 / 4; }
.venue__media .frame:first-child { grid-row: 1 / -1; }
.venue__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--cream-line); border: 1px solid var(--cream-line); margin: 28px 0; }
.venue__specs div { background: var(--cream); padding: 16px 18px; }
.venue__specs strong { display: block; font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--burgundy); letter-spacing: .03em; line-height: 1.1; }
.venue__specs span { font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
@media (max-width: 900px) { .venue { grid-template-columns: 1fr; } .venue--flip .venue__media { order: 0; } }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 10px; }
.gallery > * { grid-column: span 4; grid-row: span 3; }
.gallery > .g-wide { grid-column: span 8; grid-row: span 4; }
.gallery > .g-tall { grid-column: span 4; grid-row: span 4; }
.gallery > .g-sq { grid-column: span 4; grid-row: span 3; }
.gallery button { padding: 0; border: 0; cursor: zoom-in; background: none; width: 100%; height: 100%; }
.gallery .frame { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 90px; }
  .gallery > *, .gallery > .g-sq { grid-column: span 3; grid-row: span 2; }
  .gallery > .g-wide { grid-column: span 6; grid-row: span 3; }
  .gallery > .g-tall { grid-column: span 3; grid-row: span 3; }
}

/* quote */
.quote { font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.35; max-width: 26ch; margin: 0 auto; }
.quote-mark { width: 70px; margin: 0 auto 26px; opacity: .9; }

/* place list (Chicago pages) */
.places { display: grid; gap: clamp(60px, 8vw, 110px); }
.place { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.place:nth-child(even) .place__media { order: 2; }
.place__media .frame { aspect-ratio: 4 / 3; }
.place__meta { display: flex; gap: 10px 24px; flex-wrap: wrap; margin: 18px 0 20px; padding: 0; list-style: none; }
.place__meta li { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--burgundy); display: flex; gap: 8px; align-items: center; }
.place__meta svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .place { grid-template-columns: 1fr; } .place:nth-child(even) .place__media { order: 0; } }

/* dining rows */
.dine { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.dine + .dine { margin-top: clamp(80px, 10vw, 140px); }
.dine--flip .dine__media { order: 2; }
.dine__media { position: relative; }
.dine__media .frame { aspect-ratio: 5 / 4; }
.dine__media .dine__inset { position: absolute; width: 42%; bottom: -8%; right: -6%; border: 8px solid var(--cream); box-shadow: var(--shadow-soft); }
.dine--flip .dine__media .dine__inset { right: auto; left: -6%; }
.dine__inset .frame { aspect-ratio: 1; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; margin: 22px 0; padding: 18px 0; border-block: 1px solid var(--cream-line); font-size: 15.5px; }
.hours dt { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; color: var(--slate); padding-top: 3px; }
.hours dd { margin: 0; }
@media (max-width: 900px) { .dine { grid-template-columns: 1fr; } .dine--flip .dine__media { order: 0; } .dine__media { margin-bottom: 30px; } .dine__media .dine__inset { right: 4%; } .dine--flip .dine__media .dine__inset { left: 4%; } }

/* history page */
.era { display: grid; grid-template-columns: 180px 1fr; gap: clamp(20px, 4vw, 60px); padding-block: clamp(40px, 5vw, 70px); border-top: 1px solid var(--cream-line); }
.era__year { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 3.6vw, 52px); color: var(--antique); letter-spacing: .04em; line-height: 1; position: sticky; top: calc(var(--header-h) + 30px); align-self: start; }
.era__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.era__body .frame { aspect-ratio: 4 / 3; }
.era__body figcaption { font-size: 13px; color: var(--slate); margin-top: 10px; font-style: italic; }
.era h3 { margin-bottom: 14px; }
@media (max-width: 860px) { .era { grid-template-columns: 1fr; } .era__year { position: static; } .era__body { grid-template-columns: 1fr; } }
/* Home of Presidents: six sepia portraits in gold-ruled frames, then Roosevelt photographed at the hotel */
.presidents { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); list-style: none; padding: 0; margin: clamp(36px, 4vw, 56px) 0 0; text-align: center; }
.president .frame { aspect-ratio: 4 / 5; outline: 1px solid rgba(212, 193, 138, .55); outline-offset: 6px; margin: 7px; }
.president h3 { margin-top: 22px; font-size: clamp(14px, 1.1vw, 16px); letter-spacing: .12em; line-height: 1.35; color: var(--gold); }
.president p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: rgba(253, 252, 243, .75); }
.president-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin: clamp(56px, 6vw, 88px) auto 0; max-width: 980px; }
.president-feature .frame { aspect-ratio: 4 / 5; outline: 1px solid rgba(212, 193, 138, .55); outline-offset: 8px; margin: 9px; }
.president-feature h3 { margin-top: 14px; font-size: clamp(22px, 2.2vw, 30px); color: var(--cream); }
.president-feature figcaption > p:not(.eyebrow) { margin: 14px 0 20px; color: rgba(253, 252, 243, .85); }
.president-feature .link-arrow { color: var(--gold); }
.presidents__credits { margin: clamp(40px, 4vw, 56px) auto 0; max-width: 60em; text-align: center; font-size: 12px; line-height: 1.7; color: rgba(253, 252, 243, .6); }
.presidents__credits a { color: inherit; }
@media (max-width: 1000px) { .presidents { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .presidents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .president-feature { grid-template-columns: 1fr; }
  .president-feature .frame { max-width: 420px; }
}

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 14px; background: #FFFEF6; border: 1px solid var(--cream-line); border-bottom: 1px solid var(--antique);
  border-radius: 0; font-size: 16px; color: var(--ink);
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--antique); box-shadow: 0 0 0 3px rgba(212, 193, 138, .2); }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }
.contact-card { background: var(--mahogany); color: var(--cream); padding: clamp(28px, 4vw, 52px); }
.contact-card .eyebrow { color: var(--gold); }
.contact-card a { color: var(--gold); }
.contact-card dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 24px 0 0; }
.contact-card dt { font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.contact-card dd { margin: 2px 0 0; font-size: 18px; overflow-wrap: anywhere; }

/* specials page */
.special { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; background: #FFFEF6; box-shadow: var(--shadow-card); }
.special + .special { margin-top: 40px; }
.special .frame { min-height: 100%; aspect-ratio: auto; }
.special__body { padding: clamp(28px, 4vw, 60px); }
.special__list { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; }
.special__list li { display: flex; gap: 12px; align-items: baseline; }
.special__list li::before { content: ""; flex: none; width: 7px; height: 7px; transform: rotate(45deg) translateY(-2px); background: var(--antique); }
.special__fine { font-size: 14px; color: var(--slate); }
@media (max-width: 860px) { .special { grid-template-columns: minmax(0, 1fr); } .special .frame { aspect-ratio: 3 / 2; } }

/* room type cards */
.rooms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
@media (max-width: 1000px) { .rooms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rooms-grid { grid-template-columns: minmax(0, 1fr); } }
.room-card .frame { aspect-ratio: 4 / 3; }
.room-card .card__body { gap: 12px; }
.room-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cream-line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; background: var(--cream-deep); color: var(--mahogany); }
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filter button { background: none; border: 1px solid var(--cream-line); padding: 10px 18px; cursor: pointer; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mahogany); transition: all .3s var(--ease); }
.filter button[aria-pressed="true"], .filter button:hover { background: var(--mahogany); color: var(--cream); border-color: var(--mahogany); }

/* big CTA band */
.cta-band { position: relative; color: var(--cream); text-align: center; overflow: hidden; isolation: isolate; padding-block: clamp(100px, 13vw, 190px); }
.cta-band__img { position: absolute; inset: 0; z-index: -2; }
.cta-band__img img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(33, 22, 10, .62); }
.cta-band h2 { font-size: clamp(32px, 4.4vw, 62px); }
.cta-band p { max-width: 36em; margin: 20px auto 34px; color: rgba(253, 252, 243, .9); font-size: clamp(17px, 1.4vw, 20px); }
.cta-band .eyebrow { color: var(--gold); }
/* MonteCarlo script for the short phrase above the headline in page headers and closing bands, echoing the home
   tagline (script over serif caps). Kept to large sizes on dark and photo backgrounds, where it reads well. */
.page-hero .eyebrow, .cta-band .eyebrow {
  font-family: "MonteCarlo", var(--serif); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.1;
  font-size: clamp(32px, 3.4vw, 50px); color: var(--gold);
}
.page-hero .eyebrow::before, .page-hero .eyebrow::after, .cta-band .eyebrow::before, .cta-band .eyebrow::after { display: none !important; }
.page-hero .eyebrow { margin-bottom: 6px; }
.cta-band .eyebrow + h2 { margin-top: 6px; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--mahogany); color: rgba(253, 252, 243, .84); padding: clamp(70px, 8vw, 110px) 0 calc(40px + 70px); font-size: 15.5px; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(212, 193, 138, .22); }
.footer-brand img { width: 150px; }
/* the logo's frame: Mahogany with a champagne keyline set in from the edges (Brand Guidelines) */
.logo-frame { position: relative; display: inline-block; background: var(--mahogany); padding: 18px 22px 20px; margin-bottom: 26px; line-height: 0; }
.logo-frame::after { content: ""; position: absolute; inset: 5px; border: 2px solid var(--gold); pointer-events: none; }
.footer-brand address { font-style: normal; line-height: 1.8; }
.footer-brand a { color: var(--gold); text-decoration: none; }
.site-footer h4 { font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; font-size: 13.5px; letter-spacing: .04em; opacity: .75; }
.social { display: flex; gap: 12px; margin-top: 22px; }
.social a { width: 40px; height: 40px; border: 1px solid rgba(212, 193, 138, .4); display: grid; place-items: center; border-radius: 50%; color: var(--gold); }
.social a:hover { background: var(--gold); color: var(--mahogany); }
.social svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- modal (film, lightbox) */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(18, 12, 5, .92); padding: 4vw; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.modal__inner { position: relative; width: min(100%, 1280px); }
.modal video, .modal img { width: 100%; max-height: 84vh; object-fit: contain; background: #000; }
.modal__close { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(253, 252, 243, .5); background: none; color: var(--cream); cursor: pointer; display: grid; place-items: center; }
.modal__close svg { width: 16px; height: 16px; }
.modal__caption { color: rgba(253, 252, 243, .8); text-align: center; margin-top: 14px; font-size: 15px; }
.modal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(253, 252, 243, .45); background: rgba(18, 12, 5, .4); color: var(--cream); cursor: pointer; }
.modal__nav--prev { left: -64px; } .modal__nav--next { right: -64px; }
@media (max-width: 900px) { .modal__nav--prev { left: 8px; } .modal__nav--next { right: 8px; } }

/* ---------------------------------------------------------------- 3D explorer */
.explorer { position: relative; height: min(88vh, 900px); min-height: 560px; background: var(--mahogany); color: var(--cream); overflow: hidden; }
.explorer canvas { width: 100% !important; height: 100% !important; display: block; outline: none; touch-action: none; }
.explorer__loading { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(ellipse at 50% 60%, #3A2916, #2D1F10); z-index: 3; transition: opacity .8s var(--ease), visibility .8s; }
.explorer__loading.is-done { opacity: 0; visibility: hidden; }
.explorer__loading img { width: 110px; margin: 0 auto 20px; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
.explorer__bar { width: 200px; height: 2px; background: rgba(212, 193, 138, .2); margin: 18px auto 0; overflow: hidden; }
.explorer__bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }
.explorer__ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.explorer__panel {
  pointer-events: auto; position: absolute; left: clamp(12px, 2.4vw, 32px); top: clamp(12px, 2.4vw, 32px); width: min(360px, calc(100% - 24px));
  background: rgba(253, 252, 243, .96); color: var(--ink); box-shadow: var(--shadow-soft); border-top: 2px solid var(--antique);
  /* the panel stays inside the map, scrolling within itself when a stop's details run below the map's edge */
  max-height: calc(100% - 2 * clamp(12px, 2.4vw, 32px)); overflow-y: auto; overscroll-behavior: contain;
}
.explorer__panel-head { padding: 18px 20px 12px; }
.explorer__panel-head .eyebrow { font-size: 12px; }
.explorer__panel-head h2 { font-size: 20px; letter-spacing: .12em; margin-top: 8px; }
.explorer__stops { list-style: none; margin: 0; padding: 0 8px 8px; max-height: 52vh; overflow: auto; }
.explorer__stops button { padding-block: 8px !important; }
.explorer__stops button {
  width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; text-align: left;
  background: none; border: 0; padding: 10px 12px; cursor: pointer; border-radius: 0; color: inherit;
}
.explorer__stops button:hover, .explorer__stops button[aria-current="true"] { background: var(--cream-deep); }
.explorer__stops .n { font-family: var(--serif); font-weight: 700; color: var(--antique); font-size: 15px; }
.explorer__stops strong { display: block; font-family: var(--serif); font-weight: 600; letter-spacing: .1em; font-size: 14px; text-transform: uppercase; }
.explorer__stops small { display: block; font-size: 13px; color: var(--slate); }
.explorer__stops .d { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--burgundy); white-space: nowrap; }
.explorer__detail { padding: 16px 20px 20px; border-top: 1px solid var(--cream-line); font-size: 15px; display: none; }
.explorer__detail.is-on { display: block; }
.explorer__detail p { margin: 8px 0 12px; color: var(--mahogany); }
.explorer__detail h3 { margin-top: 8px; font-size: 17px; }
.explorer__more { display: none; }
.explorer__controls { pointer-events: auto; position: absolute; right: clamp(12px, 2.4vw, 32px); bottom: clamp(12px, 2.4vw, 32px); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.explorer__controls button {
  background: rgba(45, 27, 17, .82); color: var(--cream); border: 1px solid rgba(212, 193, 138, .45); padding: 10px 14px; cursor: pointer;
  font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.explorer__controls button[aria-pressed="true"] { background: var(--gold); color: var(--mahogany); border-color: var(--gold); }
.explorer__hint { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font-size: 13px; letter-spacing: .08em; color: rgba(253, 252, 243, .8); background: rgba(6, 23, 55, .5); padding: 8px 14px; pointer-events: none; transition: opacity 1s; white-space: nowrap; }
.explorer__labels { position: absolute; inset: 0; pointer-events: none; }
.explorer-label {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: none;
  display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); color: var(--mahogany);
  transition: opacity .3s;
}
.explorer-label span { background: rgba(253, 252, 243, .95); padding: 6px 10px; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); transition: background .25s, color .25s; }
.explorer-label i { width: 1px; height: 22px; background: rgba(253, 252, 243, .9); }
.explorer-label b { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(212, 193, 138, .35); }
.explorer-label--hotel span { background: var(--burgundy); color: var(--cream); font-family: var(--serif); font-size: 12.5px; letter-spacing: .14em; padding: 8px 12px; }
.explorer-label:hover span, .explorer-label.is-active span { background: var(--gold); color: var(--mahogany); }
.explorer-label.is-hidden { opacity: 0 !important; pointer-events: none; }   /* beats the inline fade the map script sets */
.explorer__reserve { pointer-events: auto; position: absolute; right: clamp(12px, 2.4vw, 32px); top: clamp(12px, 2.4vw, 32px); }
.explorer__fallback { padding: 40px; text-align: center; }
/* phones and tablets: a slim bar of stops along the bottom, with the details folded down to the stop's name
   (the map script uses the same query to keep the view centered above the bar and to frame each walk) */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  .explorer { height: 86vh; height: 86svh; }
  .explorer__panel { top: auto; bottom: 62px; left: 10px; right: 10px; width: auto; max-width: 620px; max-height: calc(100% - 72px); background: rgba(253, 252, 243, .94); }
  .explorer__stops { display: flex; overflow-x: auto; max-height: none; gap: 4px; padding: 6px 6px; scrollbar-width: none; }
  .explorer__stops::-webkit-scrollbar { display: none; }
  .explorer__stops li { flex: 0 0 auto; }
  .explorer__stops button { grid-template-columns: 18px auto; gap: 8px; padding: 6px 10px !important; }
  .explorer__stops strong { font-size: 13px; }
  .explorer__stops small, .explorer__stops .d { display: none; }
  .explorer__panel-head { display: none; }
  .explorer__detail { padding: 10px 14px 12px; font-size: 14px; }
  .explorer__detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .explorer__detail-head .eyebrow { font-size: 11px; padding: 3px 8px; }
  .explorer__detail h3 { margin-top: 6px; font-size: 15px; }
  .explorer__more {
    display: inline-block; flex: none; background: none; border: 1px solid var(--antique); color: var(--mahogany); cursor: pointer;
    padding: 8px 12px; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  }
  .explorer__detail-body { display: none; }
  .explorer__detail.is-open .explorer__detail-body { display: block; }
  .explorer__detail p { margin: 8px 0 8px; }
  .explorer__controls { bottom: 10px; right: 10px; left: 10px; justify-content: center; }
  .explorer__hint { display: none; }
}
@media (max-width: 760px) {
  .explorer__reserve { display: none; }
}

/* misc */
.divider-crest { display: flex; align-items: center; gap: 24px; justify-content: center; margin: 0 auto; }
.divider-crest::before, .divider-crest::after { content: ""; width: min(18vw, 180px); height: 1px; background: var(--antique); opacity: .6; }
.divider-crest img { width: 64px; }
.note { font-size: 14px; color: var(--slate); }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 20px 0; }
.tag-list li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.tag-list li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--antique); }
.on-dark .tag-list li::before { background: var(--gold); }
.mt-0 { margin-top: 0 !important; } .mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) {
  .home-intro__script { font-size: 54px; }
  .home-intro__caps { font-size: 20px; letter-spacing: .1em; }
  .booking__intro { display: none; }
}
/* legibility over bright photos */
.page-hero::after {
  background:
    linear-gradient(90deg, rgba(28, 18, 8, .55) 0%, rgba(28, 18, 8, .15) 55%, rgba(28, 18, 8, 0) 80%),
    linear-gradient(to top, rgba(28, 18, 8, .74) 0%, rgba(28, 18, 8, .18) 48%, rgba(28, 18, 8, .38) 100%);
}
.page-hero h1, .page-hero .eyebrow, .page-hero__sub { text-shadow: 0 1px 2px rgba(20, 12, 4, .5), 0 2px 24px rgba(20, 12, 4, .55); }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  .explorer__controls { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .explorer__controls::-webkit-scrollbar { display: none; }
  .explorer__controls button { flex: none; }
}

/* ---------------------------------------------------------------- 3D map: click-to-load cover and loading state */
.explorer__cover {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; width: 100%; padding: 0; border: 0;
  background: var(--mahogany); color: var(--cream); cursor: pointer; overflow: hidden; text-align: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.explorer__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease), filter .6s var(--ease); }
.explorer__cover::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 52%, rgba(45, 27, 17, .8) 0%, rgba(45, 27, 17, .45) 65%, rgba(45, 27, 17, .6) 100%);
  transition: background .6s var(--ease);
}
.explorer__cover:hover > img, .explorer__cover:focus-visible > img { transform: scale(1.06); }
.explorer__cover:hover::after { background: radial-gradient(60% 55% at 50% 52%, rgba(45, 27, 17, .7) 0%, rgba(45, 27, 17, .35) 65%, rgba(45, 27, 17, .55) 100%); }
.explorer__cover:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; }
.explorer__cover.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.explorer__cover-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; max-width: 640px; }
.explorer__cover-crest { width: 84px; height: auto; margin-bottom: 4px; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)); }
.explorer__cover .eyebrow { color: var(--gold); }
.explorer__cover-title { font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: clamp(28px, 4.2vw, 56px); line-height: 1.1; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.explorer__cover-text { font-size: clamp(16px, 1.4vw, 19px); color: rgba(253, 252, 243, .9); max-width: 32em; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.explorer__cover-btn { margin-top: 12px; min-height: 58px; padding: 0 34px; font-size: 15px; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7); }
.explorer__cover:hover .explorer__cover-btn { --bg: #E2D3A5; transform: translateY(-2px); }
.explorer__cover-btn svg { width: 20px; height: 20px; }
.explorer__cover-note { font-size: 13px; letter-spacing: .08em; color: rgba(253, 252, 243, .72); }
.explorer__loading[hidden] { display: none; }
.explorer__loading-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.explorer__loading-inner img { width: 96px; margin: 0 auto 14px; animation: breathe 2.4s ease-in-out infinite; }
.explorer__stage { color: var(--gold); min-height: 1.4em; }
.explorer__loading .explorer__bar { width: 240px; margin: 12px auto 0; }
.explorer__pct { font-size: 13px; letter-spacing: .1em; color: rgba(253, 252, 243, .6); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.explorer canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* ---------------------------------------------------------------- things that look clickable are clickable */
.stretch-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.room-card { position: relative; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.room-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(45, 27, 17, .55); }
.room-card:hover .frame img { transform: scale(1.035); }
.room-card:focus-within { outline: 2px solid var(--antique); outline-offset: 3px; }
.room-card:focus-within .stretch-link:focus-visible { outline: none; }
.chapter--full .stretch-link:hover { border-bottom-color: currentColor; }
a.stat { display: block; color: inherit; text-decoration: none; }
a.stat strong { transition: color .3s var(--ease); }
a.stat span { border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
a.stat:hover strong { color: var(--antique); }
a.stat:hover span { border-bottom-color: currentColor; }
a.plan__step { display: block; color: inherit; text-decoration: none; transition: border-color .4s var(--ease), transform .4s var(--ease); }
a.plan__step:hover { border-top-color: var(--gold); transform: translateY(-3px); }
a.plan__step:hover h3 { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
a.timeline__item { display: block; color: inherit; text-decoration: none; }
a.timeline__item h3 { transition: color .3s var(--ease); }
a.timeline__item:hover h3 { color: var(--gold); }
a.timeline__item:hover .frame img { transform: scale(1.04); }
a.chapter__media { display: block; }
.chapter__thumbs a { display: block; color: inherit; text-decoration: none; }
.chapter__thumbs a:hover figcaption { color: var(--burgundy); }
a.story__inset { display: block; }
a.special__media { display: block; min-height: 100%; }
a.special__media .frame { height: 100%; }
.special__media:hover .frame img { transform: scale(1.035); }
a.card--flat { color: inherit; text-decoration: none; }
a.card--flat .link-arrow { margin-top: 6px; }
.place .actions, .place__actions { gap: 10px 28px; }
.footer-brand address a:first-child { color: inherit; }
.footer-brand address a:first-child:hover { color: var(--cream); }
.frame.is-zoomable { cursor: zoom-in; }
.frame.is-zoomable:focus-visible { outline: 2px solid var(--antique); outline-offset: 3px; }

.explorer__keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin: 10px 0 0; font-size: 12px; color: var(--slate); line-height: 1.6; }
.explorer__keys kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin-left: 2px;
  font-family: var(--serif); font-size: 11px; font-weight: 700; color: var(--mahogany);
  background: #FFFEF6; border: 1px solid var(--cream-line); border-bottom-width: 2px; border-radius: 4px;
}
@media (hover: none), (max-width: 760px) { .explorer__keys { display: none; } }

.filter__status { margin: -14px 0 26px; font-size: 14px; color: var(--slate); }

/* ---------------------------------------------------------------- 3D map fullscreen */
.explorer__fs { display: inline-flex; align-items: center; gap: 8px; }
.explorer__fs svg { width: 14px; height: 14px; }
.explorer:fullscreen { height: 100vh !important; min-height: 0; }
.explorer:-webkit-full-screen { height: 100vh !important; min-height: 0; }
.explorer.is-pseudo-fullscreen { position: fixed !important; inset: 0; z-index: 200; height: 100vh !important; height: 100dvh !important; min-height: 0; }
body.explorer-open { overflow: hidden; }

/* ---------------------------------------------------------------- room pages */
.gallery > .g-half { grid-column: span 6; grid-row: span 3; }

/* questions and answers (dining venue pages) */
.faq { max-width: 880px; border-bottom: 1px solid var(--cream-line); }
.faq details { border-top: 1px solid var(--cream-line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: .06em; }
.faq summary::after { content: "+"; flex: none; font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--antique); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover h3 { color: var(--burgundy); }
.faq details p { margin: 0 0 24px; max-width: 46em; color: var(--mahogany); }

.room-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.room-facts { background: var(--cream-deep); border-top: 3px solid var(--antique); padding: clamp(22px, 3vw, 36px); }
.room-facts .hours { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.amenities li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.amenities svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--antique); }
.room-card__foot .room-card__rates { position: relative; z-index: 2; }
@media (max-width: 900px) { .room-intro { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .gallery > .g-half { grid-column: span 3; grid-row: span 2; }
  .room-gallery .gallery > .g-tall { grid-row: span 2; }
  .room-gallery .gallery > :last-child:nth-child(even) { grid-column: span 6; grid-row: span 3; }
}
@media (max-width: 520px) { .amenities { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- meetings: venues and capacity chart */
.venue-jump { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 36px; padding: 22px 0; border-block: 1px solid var(--cream-line); }
.venue-jump span { display: block; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.venue-jump .chips a { color: inherit; text-decoration: none; }
.venue-jump .chips li { padding: 0; }
.venue-jump .chips li a { display: block; padding: 7px 11px; transition: background .25s, color .25s; }
.venue-jump .chips li a:hover, .venue-jump .chips li a:focus-visible { background: var(--mahogany); color: var(--cream); }
.venue-floor { padding-block: clamp(48px, 7vw, 96px); }
.venue-floor + .venue-floor { border-top: 1px solid var(--cream-line); }
.venue-floor__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.venue-floor__head .eyebrow { font-size: 15px; }
.venue-floor__note { margin: 0; color: var(--mahogany); font-style: italic; }
.venue__specs:has(+ .venue__caps) { margin-bottom: 0; }
.venue__caps { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--cream-line); margin: 0 0 26px; }
.venue__caps div { padding: 10px 14px; border-right: 1px solid var(--cream-line); border-bottom: 1px solid var(--cream-line); }
.venue__caps dt { font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.venue__caps dd { margin: 2px 0 0; font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--mahogany); }
.venue .actions { gap: 14px 28px; }
.cap-table__wrap { overflow-x: auto; border: 1px solid var(--cream-line); background: var(--cream); }
.cap-table__wrap:focus-visible { outline: 2px solid var(--antique); outline-offset: 3px; }
.cap-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 820px; }
.cap-table th, .cap-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--cream-line); white-space: nowrap; }
.cap-table th:first-child { text-align: left; }
.cap-table thead th { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); background: var(--cream-deep); }
.cap-table tbody th[scope="row"] { font-family: var(--serif); font-weight: 600; color: var(--mahogany); }
.cap-table tbody th a { color: var(--burgundy); }
.cap-table__floor th { text-align: left !important; background: var(--mahogany); color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.cap-table tbody tr:not(.cap-table__floor):hover { background: var(--cream-deep); }
@media (max-width: 900px) { .venue-jump { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .venue__caps { grid-template-columns: 1fr 1fr; } }
.amenities.mt-m { margin-top: 26px; }
.room-card h3 a { color: inherit; text-decoration: none; }
.room-card h3 a:hover { color: var(--burgundy); }

/* the narrowest phones: long buttons wrap onto two lines instead of running off the screen */
@media (max-width: 360px) { .btn { white-space: normal; text-align: center; padding-inline: 20px; } }

/* ---------------------------------------------------------------- Google map test page (chicago-google-map.html) */
.gmap__canvas { position: absolute; inset: 0; z-index: 1; background: var(--mahogany); }
.gmap .explorer__ui { z-index: 2; }
.gmap__status {
  position: absolute; left: 50%; bottom: clamp(70px, 9vh, 96px); transform: translateX(-50%); z-index: 5; width: min(560px, calc(100% - 32px));
  background: rgba(253, 252, 243, .97); color: var(--ink); padding: 16px 20px; box-shadow: var(--shadow-soft); border-top: 2px solid var(--antique); font-size: 15px; line-height: 1.5;
}
.gmap__status code { font-size: 13px; background: var(--cream-deep); padding: 1px 5px; }
.gmap.is-full { position: fixed; inset: 0; z-index: 200; height: 100%; min-height: 0; }
.gmap:fullscreen { height: 100%; }
@media (max-width: 760px) {
  /* phones: the map on top, the list of stops underneath it */
  .gmap { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .gmap__canvas { position: relative; inset: auto; height: 62vh; min-height: 380px; }
  .gmap .explorer__ui { position: relative; inset: auto; pointer-events: auto; }
  .gmap { background: var(--cream); }
  .gmap .explorer__panel { position: static; width: 100%; max-height: none; overflow: visible; box-shadow: none; }
  .gmap .explorer__panel-head { display: block; }
  .gmap .explorer__stops { display: block; max-height: none; overflow: visible; }
  .gmap .explorer__stops button { grid-template-columns: 28px 1fr auto; }
  .gmap .explorer__stops small, .gmap .explorer__stops .d { display: block; }
  .gmap .explorer__controls { padding-bottom: 20px; }
  .gmap .explorer__controls { position: static; justify-content: flex-start; padding: 12px var(--gutter) 0; }
  .gmap .explorer__cover { height: 62vh; min-height: 380px; bottom: auto; }
}


/* ---------------------------------------------------------------- event-space pages */
/* a space without photographs: the crest on Mahogany, set to the right of the headline (above it on phones) */
.page-hero--crest .page-hero__img { background: radial-gradient(ellipse at 72% 45%, var(--mahogany-2) 0%, var(--mahogany) 62%); display: flex; align-items: center; justify-content: flex-end; padding-right: max(var(--gutter), calc((100vw - 1320px) / 2 + 40px)); }
.page-hero--crest .page-hero__img img.page-hero__crest { width: clamp(180px, 22vw, 300px); height: auto; object-fit: contain; transform: none; animation: none; opacity: .95; }
.page-hero--crest::after { background: linear-gradient(to top, rgba(28, 18, 8, .45), transparent 50%); }
@media (max-width: 760px) {
  .page-hero--crest .page-hero__img { justify-content: center; align-items: flex-start; padding: 160px 0 0; }
  .page-hero--crest .page-hero__img img.page-hero__crest { width: 150px; }
}

/* previous / next through the spaces, largest to smallest */
.space-nav { background: var(--cream); border-block: 1px solid var(--cream-line); }
.space-nav--bottom { border-color: rgba(45, 27, 17, .1); }
.space-nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; min-height: 92px; }
.space-nav__link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--mahogany); font-family: var(--serif); font-weight: 600; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.space-nav__link > span { min-width: 0; }
.space-nav__link small { display: block; font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: .18em; color: var(--slate); margin-bottom: 4px; }
.space-nav__link svg { flex: none; width: 46px; height: 46px; padding: 12px; border: 1px solid rgba(45, 27, 17, .3); border-radius: 50%; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.space-nav__link--prev svg { transform: rotate(180deg); }
.space-nav__link--next { justify-content: flex-end; text-align: right; }
.space-nav__link--next svg { order: 2; }
a.space-nav__link:hover { color: var(--burgundy); }
a.space-nav__link:hover svg { background: var(--button); border-color: var(--button); color: var(--cream); }
a.space-nav__link--next:hover svg { transform: translateX(3px); }
a.space-nav__link--prev:hover svg { transform: rotate(180deg) translateX(3px); }
.space-nav__pos { margin: 0; text-align: center; }
.space-nav__pos strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--burgundy); }
.space-nav__pos span { font-weight: 700; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); }
@media (max-width: 640px) {
  .space-nav__inner { gap: 10px; min-height: 76px; }
  .space-nav__link { font-size: 13px; letter-spacing: .06em; gap: 10px; }
  .space-nav__link > span { min-width: 0; }
.space-nav__link small { display: none; }
  .space-nav__link svg { width: 38px; height: 38px; padding: 10px; }
  .space-nav__pos span { display: none; }
}
/* the narrowest phones: just the arrows and the position (the room names stay readable to screen readers) */
@media (max-width: 380px) {
  .space-nav__link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.space-facts .venue__specs { margin: 18px 0 0; }
.space-facts__none { color: var(--slate); font-size: 14px; }
@media (max-width: 760px) { .space-gallery .gallery > :last-child:nth-child(odd) { grid-column: span 6; grid-row: span 3; } }

/* ---------------------------------------------------------------- blog (the Wix Blog app's feed and post pages) */
/* pages without a photo at the top start below the solid header */
body.no-hero main { padding-top: var(--header-h); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.post-card { position: relative; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(45, 27, 17, .55); }
.post-card:focus-within { outline: 2px solid var(--antique); outline-offset: 3px; }
.post-card:focus-within .stretch-link:focus-visible { outline: none; }
.post-card .card__meta { gap: 6px 14px; }
.post-card__title { font-size: 19px; letter-spacing: .08em; line-height: 1.35; }
.post-card__title a { color: inherit; text-decoration: none; }
/* the newest post: a wide card across the grid, photo beside the words */
.post-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; }
.post-card--feature .frame { aspect-ratio: auto; height: 100%; min-height: 340px; }
.post-card--feature .card__body { padding: clamp(28px, 3.4vw, 52px); justify-content: center; }
.post-card--feature .post-card__title { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .06em; }
.post-card--feature p { font-size: 17px; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-card--feature { grid-template-columns: 1fr; } .post-card--feature .frame { aspect-ratio: 3 / 2; min-height: 0; } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

/* a post */
.post { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); }
.post__head { text-align: center; }
.post__head .eyebrow { text-decoration: none; }
.post__head h1 { margin: 18px 0 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.15; letter-spacing: .05em; color: var(--mahogany); }
.post__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.post__head .lede { margin: 22px auto 0; max-width: 36em; }
.post__cover { margin-top: clamp(28px, 4vw, 48px); }
.post__cover .frame { aspect-ratio: 16 / 9; }
.post__body { max-width: 720px; margin-top: clamp(32px, 4vw, 52px); font-size: 18px; line-height: 1.75; }
.post__body h2 { margin: 1.9em 0 .55em; font-size: clamp(21px, 2.2vw, 26px); letter-spacing: .07em; color: var(--mahogany); }
.post__body p, .post__body ul { margin: 0 0 1.15em; }
.post__body ul { padding-left: 1.2em; }
.post__body li { margin-bottom: .45em; }
.post__body li::marker { color: var(--gold); }
.post__body a:not(.btn) { color: var(--burgundy); }
.post__body figure { margin: 2em 0; }
.post__body figure .frame { aspect-ratio: 3 / 2; }
.post__body figcaption { margin-top: 10px; font-size: 14px; color: var(--slate); }
.post__body blockquote { margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--gold); font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.5; letter-spacing: .02em; color: var(--mahogany); }
.post__cta { margin: 2.2em 0 0; padding: 26px 28px; background: var(--sand); border-top: 3px solid var(--gold); display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.post__cta p { margin: 0; flex: 1 1 260px; font-size: 17px; }
.post__foot { max-width: 720px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cream-line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.post__foot .tag-list { margin: 0; }

/* a year or short label above a step's title (History: how the hotel got its name) */
.plan__year { display: block; margin-bottom: 14px; font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* History: Famous Faces, three portrait cards */
.famous .frame { aspect-ratio: 4 / 5; }
.famous__credits { margin: 36px auto 0; max-width: 60em; text-align: center; font-size: 12px; line-height: 1.7; color: var(--slate); }
.famous__credits a { color: inherit; }