/* =========================================================
   layout.css - Grid + section layouts
   Bellrock-inspired - dramatic dark hero, slanted slab, 2-col
   feature spreads, photo collages, simple stat row, dark
   testimonial on background photo, dark footer.
   ========================================================= */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Section base ---------- */
.section {
  padding-block: var(--section-py);
  position: relative;
}
.section--cream { background: var(--cream); }
.section--dark-story {
  background: var(--night);
  color: var(--night-text);
  position: relative;
  overflow: hidden;
  padding-block: 0;
}

/* =========================================================
   NAV - sticky white bar
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-3);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
}
.nav__brand:hover { text-decoration: none; }
.nav__mark {
  width: 30px;
  height: 30px;
  color: var(--accent);
  flex-shrink: 0;
}
.nav__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: inherit;
}
.nav__wordmark-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  line-height: 1;
}
.nav__wordmark-sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  line-height: 1;
  margin-top: 4px;
  color: var(--ink-mute);
}
.footer__logo .nav__mark { color: var(--gold-bright); }
.footer__logo .nav__wordmark-sub { color: var(--night-mute); }
/* ---------- Nav panel + menu (desktop: inline row with dropdowns) ---------- */
.nav__panel {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item { position: relative; }
.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover,
.nav__trigger:hover,
.nav__item.is-open > .nav__trigger { color: var(--gold-ink); }
.nav__caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.nav__item.is-open > .nav__trigger .nav__caret { transform: rotate(-135deg) translateY(-2px); }

/* ---------- Dropdown submenu ---------- */
.nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: translateY(6px);
  min-width: 232px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 16px 38px rgba(22, 16, 16, 0.15);
  padding: var(--s-2) 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: 120;
}
/* right-aligned variant for menus near the bar's right edge */
.nav__sub--end { left: auto; right: 0; }
.nav__item.is-open > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) and (min-width: 1025px) {
  .nav__item:hover > .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__item:hover > .nav__trigger .nav__caret { transform: rotate(-135deg) translateY(-2px); }
}
.nav__sub-label {
  display: block;
  padding: var(--s-2) var(--s-4) var(--s-2);
  margin-bottom: 2px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nav__sub a,
.nav__sub button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px var(--s-4) 9px calc(var(--s-4) - 2px);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__sub a:hover,
.nav__sub button:hover,
.nav__sub a:focus-visible,
.nav__sub button:focus-visible {
  background: var(--paper);
  border-left-color: var(--gold);
  color: var(--ink);
}

/* ---------- Hamburger toggle + backdrop (hidden on desktop) ---------- */
.nav__toggle,
.nav__backdrop { display: none; }
/* Drawer header (brand + close) only exists in the mobile drawer */
.nav__drawer-head { display: none; }
.nav__cta {
  padding: 11px 20px;
  background: transparent;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav__cta:hover {
  background: var(--grad-accent);
  border-color: var(--gold);
  color: #fff !important;
  transform: translateY(-1px);
}

/* =========================================================
   HERO - dark dramatic photo, 2-col body
   Bellrock pattern: label up top, script + serif title left,
   lede + CTAs right.
   ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-block: var(--s-7) var(--s-8);
  overflow: hidden;
  background: var(--night);
  color: var(--night-text);
}
/* Ticket perforation - a dashed line along the flat bottom edge,
   so the slab below reads as the tear-off stub. */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-top: 2px dashed rgba(245, 240, 229, 0.35);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* 130% height with 15% overhang top and bottom - the parallax
   sweep (-9% to +9%) can never expose the night background. */
.hero__img {
  position: absolute;
  inset: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,16,16,0.45) 0%, rgba(22,16,16,0.20) 40%, rgba(22,16,16,0.45) 72%, rgba(22,16,16,0.92) 100%);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}
/* =========================================================
   CONCIERGE BAR - floating reservation desk straddling the
   hero/slab junction. Segmented mono facts with hairline
   dividers, red-gradient call to action. Marriott's booking
   widget, in the station's voice.
   ========================================================= */
.concierge {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--content-max) - 2 * var(--gutter)));
  margin: -26px auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(22, 16, 16, 0.16);
}
.concierge__facts {
  display: flex;
  flex: 1;
  align-items: stretch;
  min-width: 0;
}
.concierge__fact {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--s-3) var(--s-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.concierge__fact b { color: var(--ink); font-weight: var(--w-semi); }
.concierge__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-5);
  background: var(--grad-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.concierge__cta:hover { background: var(--grad-accent-hover); color: #fff; }
.hero__top {
  margin-bottom: var(--s-7);
  display: flex;
  justify-content: center;
}
.hero__top .label {
  color: var(--night-text);
  text-shadow: 0 1px 4px rgba(14, 14, 14, 0.6);
}
.hero__body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  align-items: end;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--w-display);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--night-text);
  margin: 0;
  text-shadow: 0 2px 12px rgba(14, 14, 14, 0.55);
}
.hero__title .script {
  display: block;
  margin-bottom: var(--s-2);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(14, 14, 14, 0.5);
}
.hero__line { display: block; }
.hero__line--accent,
.hero__line--accent div {
  font-style: italic;
  color: var(--gold-bright);
  background: var(--grad-gold-night);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* paint box extended past italic overhangs - see .script */
  padding: 0.08em 0.1em 0.22em 0.06em;
  margin: 0 -0.1em 0 -0.06em;
}
.hero__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-bottom: var(--s-3);
}
.hero__lede {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(245, 240, 229, 0.92);
  max-width: 48ch;
  margin: 0;
  font-weight: var(--w-regular);
  text-shadow: 0 1px 3px rgba(14, 14, 14, 0.4);
}
.hero__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* =========================================================
   DIAGONAL SLAB - "Let's Open" band. Footer palette: black
   field, champagne curves + ghost, cream type. The top edge
   is flat (clean shelf under the concierge bar); the bottom
   edge carries the -2.2deg angle, echoed by the footer top.
   ========================================================= */
.diagonal {
  position: relative;
  background: var(--night);
  color: var(--night-text);
  padding: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-h)), 0 100%);
}
/* Double gold rule hugging the angled bottom edge - two
   skewed hairlines sitting just inside the clip diagonal,
   parallel to it, like an engraved double border. */
.diagonal::before,
.diagonal::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  z-index: 1;
  border-top: 1px solid var(--gold-bright);
  transform: skewY(-2.2deg);
  transform-origin: left bottom;
  pointer-events: none;
}
.diagonal::before { bottom: 16px; opacity: 0.85; }
.diagonal::after { bottom: 23px; opacity: 0.4; }
/* Ghosted outline date behind the headline - station-ticket
   overprint. Sits above the slab, below the content.
   PT Serif italic: Playfair's italic Q reads as a 2 in outline. */
.diagonal__ghost {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: var(--w-bold);
  font-size: clamp(90px, 13vw, 190px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(201, 169, 107, 0.10);
  pointer-events: none;
  user-select: none;
}
@supports (-webkit-text-stroke: 1px #000) {
  .diagonal__ghost {
    color: transparent;
    -webkit-text-stroke: 1px rgba(201, 169, 107, 0.4);
  }
}
.diagonal__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(72px, 9vw, 128px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
  flex-wrap: wrap;
}
.diagonal__text {
  max-width: 720px;
}
.diagonal__title {
  font-family: var(--font-display);
  font-size: clamp(29px, 3.7vw, 54px);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
/* red primary button reads clean on the black band */
.diagonal__text .btn { margin-top: var(--s-6); }

/* =========================================================
   FEATURE - 2-col photo + body
   Used for "The Stay" (white) and "Heritage" (dark reverse)
   ========================================================= */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
/* Reverse = body left, media right by DOM order. Media stays
   inside the container column like every other element. */
.feature__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--paper-soft);
}
.feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Caption chip - eyebrow + line, bottom-left of the photo.
   Turns stock photography into documented exhibits. */
.photo-chip {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(22, 16, 16, 0.12);
}
.photo-chip__eyebrow {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.photo-chip__line {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: var(--w-semi);
  color: var(--ink);
}
.feature__body { max-width: 56ch; }
.feature__body h2 {
  font-family: var(--font-display);
  font-size: clamp(31px, 3.6vw, 50px);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-4);
}
.feature__script {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-style: italic;
  color: var(--accent-ink);
  display: inline;
  line-height: 1;
  font-size: 1.05em;
  margin-right: 0.05em;
}
.feature__lede {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  margin-bottom: var(--s-4);
  font-weight: var(--w-medium);
  color: var(--ink);
}
.feature__body p { margin-bottom: var(--s-4); }
.feature__body .btn { margin-top: var(--s-3); }

/* =========================================================
   EXPERIENCE - 2-col with photo collage + accordions
   ========================================================= */
.experience {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.experience__media {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s-3);
  aspect-ratio: 1/1;
}
.experience__main {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.experience__inset {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
/* Caption card - fills the collage's top-right cell so the
   broken grid reads as intent. Museum-label styling. */
.experience__caption {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-mute);
}
.experience__caption::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  flex-shrink: 0;
}
.experience__body h2 {
  font-family: var(--font-display);
  font-size: clamp(31px, 3.6vw, 50px);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-5);
}

/* =========================================================
   NUMBERS ROW - 5 cells in a single row (not bento)
   ========================================================= */
/* =========================================================
   FIGURES - editorial stat spread
   One dominant hero figure, a secondary valuation anchor,
   and the amenity specs as a hotel fact-sheet list.
   ========================================================= */
.figures {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-areas:
    "hero anchor"
    "hero specs";
  gap: var(--s-6) var(--s-8);
  align-items: start;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

.figures__hero {
  grid-area: hero;
  align-self: center;
}
.figures__hero-num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(96px, 16vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.figures__hero-sep {
  color: var(--gold-ink);
  margin: 0 0.02em;
}
.figures__hero-unit {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1;
  color: var(--ink-soft);
  margin-top: var(--s-2);
  letter-spacing: -0.01em;
}
.figures__hero-note {
  max-width: 34ch;
  margin-top: var(--s-5);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
}

.figures__anchor {
  grid-area: anchor;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.figures__anchor-num {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.figures__anchor-unit {
  font-size: 0.5em;
  font-weight: var(--w-bold);
  color: var(--gold-ink);
  margin-left: 0.02em;
}
.figures__anchor-label {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

.figures__specs {
  grid-area: specs;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.figures__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.figures__spec:first-child { padding-top: 0; }
.figures__spec:last-child { border-bottom: 0; }
.figures__spec dt {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.figures__spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--w-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.figures__spec-unit {
  font-size: 0.8em;
  color: var(--ink-mute);
  margin-left: 2px;
}

/* =========================================================
   INVEST - 2-col with intro + sticky ledger card
   ========================================================= */
.invest {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.invest__intro h2 {
  font-family: var(--font-display);
  font-size: clamp(31px, 3.6vw, 50px);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-4);
}
.invest__lede {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  margin-bottom: var(--s-4);
  color: var(--ink);
  font-weight: var(--w-medium);
}
.invest__intro p { margin-bottom: var(--s-3); }
.invest__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}
.invest__card { position: sticky; top: 100px; }

.card--ledger {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-radius: var(--radius);
}
/* Ticket-stub details: serial number top-right, perforation
   under the head, quiet barcode strip at the bottom. */
.card__serial {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.card__head {
  padding-bottom: var(--s-3);
  border-bottom: 2px dashed var(--rule);
  margin-bottom: var(--s-3);
}
.card__barcode {
  height: 28px;
  margin-top: var(--s-4);
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 6px, transparent 6px 9px,
    var(--ink) 9px 12px, transparent 12px 14px);
  opacity: 0.16;
}
.card__head h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--w-display);
  margin: 4px 0 0;
}
.card__note {
  margin-top: var(--s-3);
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
  line-height: 1.5;
  max-width: none;
  font-family: var(--font-body);
}

/* =========================================================
   STORY - testimonial on dark background photo
   ========================================================= */
.section--dark-story { position: relative; }
.story-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* 120% height with 10% overhang top and bottom - the parallax
   sweep (-6% to +6%) can never expose the section background. */
.story-photo__img {
  position: relative;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
}
.story-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22,16,16,0.72) 0%, rgba(22,16,16,0.45) 60%, rgba(22,16,16,0.28) 100%);
  z-index: 1;
}
.story__container {
  position: relative;
  z-index: 2;
  padding-block: clamp(96px, 12vw, 180px);
}
.story {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 820px;
}
.story__quote-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.story__quote-wrap .route { align-self: stretch; }
/* Ghosted oversized quote mark behind the blockquote - same
   outline treatment as the slab's Q4 2026. */
.story__quote-wrap::before {
  content: '"';
  position: absolute;
  top: calc(-1 * var(--s-6));
  left: calc(-1 * var(--s-3));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-bold);
  font-size: clamp(120px, 16vw, 240px);
  line-height: 1;
  color: rgba(245, 240, 229, 0.08);
  pointer-events: none;
  user-select: none;
}
@supports (-webkit-text-stroke: 1px #000) {
  .story__quote-wrap::before {
    color: transparent;
    -webkit-text-stroke: 1px rgba(245, 240, 229, 0.3);
  }
}
.story__quote {
  font-family: var(--font-quote);
  font-size: clamp(24px, 3.1vw, 40px);
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--night-text);
  margin: 0;
  max-width: 22ch;
}
.story__quote .script {
  display: inline;
  color: var(--accent);
  font-size: 1.05em;
}
.story__script { color: var(--accent); }
.story__cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--night-mute);
}

/* =========================================================
   CREED - mission + vision as one engraved band on the dark
   palette. Asymmetric: a narrow label rail, a vertical gold
   rule, then the two statements in the display face with a
   gold accent phrase each. DOM is interleaved (label, stmt,
   label, stmt, rule) so it stacks sensibly on mobile.
   ========================================================= */
.creed {
  background: var(--night);
  color: var(--night-text);
  position: relative;
  overflow: hidden;
}
.creed__ghost {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-medium);
  font-size: clamp(80px, 12vw, 180px);
  line-height: 1;
  color: rgba(201, 169, 107, 0.06);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.creed__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(96px, 124px) 1px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-6);
  row-gap: var(--s-6);
  align-items: start;
}
.creed__grid > :nth-child(1) { grid-column: 1; grid-row: 1; }
.creed__grid > :nth-child(2) { grid-column: 3; grid-row: 1; }
.creed__grid > :nth-child(3) { grid-column: 1; grid-row: 2; }
.creed__grid > :nth-child(4) { grid-column: 3; grid-row: 2; }
.creed__rule {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 169, 107, 0.55), rgba(201, 169, 107, 0.08));
}
.creed__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-top: 0.55em;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
}
.creed__label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.creed__statement {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--night-text);
  max-width: 26ch;
  margin: 0;
}

/* =========================================================
   ROUTE - the founder's journey as a railway strip.
   Origin to terminus, same mono language as the board.
   ========================================================= */
.route { margin-top: var(--s-6); }
.route__stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}
/* the rail */
.route__stops::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 5px;
  height: 1px;
  background: var(--rule-night);
}
.route__stops li {
  position: relative;
  flex: 1;
  padding-top: var(--s-4);
}
/* station dots */
.route__stops li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--night-text);
}
.route__stops li:nth-child(2),
.route__stops li:nth-child(3) { text-align: center; }
.route__stops li:nth-child(2)::before,
.route__stops li:nth-child(3)::before { left: 50%; transform: translateX(-50%); }
.route__stops li:last-child { text-align: right; }
.route__stops li:last-child::before { left: auto; right: 0; }
/* terminus marker - champagne with a ring, like the end of the line */
.route__term::before {
  top: -1px;
  width: 13px;
  height: 13px;
  background: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--night), 0 0 0 4px rgba(201, 169, 107, 0.6);
}
.route__name {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--night-text);
}
.route__note {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--night-mute);
}
.route__term .route__name { color: var(--gold-bright); }

/* Light variant - used inside the story dialog (paper background) */
.route--light .route__stops::before { background: var(--rule); }
.route--light .route__stops li::before { background: var(--ink); }
.route--light .route__term::before {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(138, 109, 54, 0.5);
}
.route--light .route__name { color: var(--ink); }
.route--light .route__note { color: var(--ink-mute); }
.route--light .route__term .route__name { color: var(--gold-ink); }
.dialog__body .route { margin-bottom: var(--s-5); }

/* =========================================================
   DEPARTURE BOARD - project timeline as station signage.
   Night panel on the white section, mono rows, status chips.
   ========================================================= */
.board {
  background: var(--night);
  color: var(--night-text);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-5) var(--s-4);
  font-family: var(--font-mono);
}
.board__head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-night);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--night-mute);
}
.board__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.board__row {
  display: grid;
  grid-template-columns: 9ch 1fr auto;
  align-items: baseline;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--rule-night);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.board__row:last-child { border-bottom: 0; }
.board__date { color: var(--gold-bright); font-weight: var(--w-bold); }
.board__label { color: var(--night-text); }
.board__status {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--night-mute);
  white-space: nowrap;
}
.board__status--next {
  background: var(--gold-bright);
  color: var(--night);
  padding: 2px 8px;
  border-radius: 3px;
}
.board__status--scheduled {
  border: 1px solid var(--rule-night);
  padding: 2px 8px;
  border-radius: 3px;
}

/* =========================================================
   TICKETS - Get Involved as three tear-off stubs.
   Employee Pass (paper), Vendor Permit (parchment),
   First Class (night). Side notches are punched with circles
   in the section background, so the silhouette reads as a
   real ticket. Wraps carry the counter-scatter rotation and
   hover lift (GSAP animates the buttons inside).
   ========================================================= */
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-block: var(--s-3);
}
.ticket-wrap { transition: transform var(--dur) var(--ease); }
.ticket-wrap:nth-child(1) { transform: rotate(-0.5deg); }
.ticket-wrap:nth-child(2) { transform: rotate(0.35deg); }
.ticket-wrap:nth-child(3) { transform: rotate(-0.3deg); }
.ticket-wrap:hover { transform: rotate(0deg) translateY(-4px); }

.ticket {
  --stub-w: 132px;
  --ticket-bg: var(--paper);
  --ticket-stub-bg: var(--paper-soft);
  --ticket-ink: var(--ink);
  --ticket-mute: var(--ink-mute);
  --ticket-rule: var(--rule);
  --ticket-accent: var(--accent-ink);   /* CTA arrow - red, the action */
  --ticket-serial: var(--gold-ink);     /* serial number - gold, decorative */
  position: relative;
  display: grid;
  grid-template-columns: var(--stub-w) 1fr;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--ticket-ink);
  background: var(--ticket-bg);
  border: 1px solid var(--ticket-rule);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.05), 0 10px 24px rgba(18, 18, 18, 0.07);
  transition: box-shadow var(--dur) var(--ease);
}
.ticket-wrap:hover .ticket {
  box-shadow: 0 2px 4px rgba(18, 18, 18, 0.08), 0 18px 44px rgba(18, 18, 18, 0.13);
}
/* punch notches, top and bottom of the tear line */
.ticket::before,
.ticket::after {
  content: '';
  position: absolute;
  left: calc(var(--stub-w) - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--ticket-rule);
  z-index: 2;
}
.ticket::before { top: -9px; }
.ticket::after { bottom: -9px; }

/* ---- Stub (the part you tear off) ---- */
.ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--s-4) var(--s-2);
  background: var(--ticket-stub-bg);
  border-right: 2px dashed var(--ticket-rule);
  border-radius: 5px 0 0 5px;
}
.ticket__type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.55;
}
.ticket__serial {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ticket-serial);
}
.ticket__barcode {
  width: 60px;
  height: 18px;
  color: var(--ticket-ink);
  opacity: 0.55;
  background: repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 4px,
    currentColor 4px 5px, transparent 5px 9px,
    currentColor 9px 11px, transparent 11px 13px);
}

/* ---- Body ---- */
.ticket__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px var(--s-5);
  padding: var(--s-4) var(--s-5);
}
.ticket__venue {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ticket-mute);
}
.ticket__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: var(--w-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ticket__desc {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--ticket-mute);
  max-width: 62ch;
}
.ticket__cta {
  grid-column: 2;
  grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ticket-accent);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease);
}
.ticket:hover .ticket__cta { transform: translateX(4px); }

/* ---- Vendor Permit: parchment ---- */
.ticket--vendor {
  --ticket-bg: #F0E9D8;
  --ticket-stub-bg: #E8DFC9;
  --ticket-rule: #DDD2B8;
}
/* ---- First Class: night with champagne foil ---- */
.ticket--first {
  --ticket-bg: var(--night);
  --ticket-stub-bg: var(--night-elev);
  --ticket-ink: var(--night-text);
  --ticket-mute: var(--night-mute);
  --ticket-rule: var(--rule-night);
  --ticket-accent: var(--gold-bright);
  --ticket-serial: var(--gold-bright);
  border-color: var(--night);
}

/* =========================================================
   FOOTER - dark, 4-col
   ========================================================= */
.footer {
  position: relative;
  z-index: 2; /* paints above the involved section; the clipped wedge
     reveals the cream section continuing beneath */
  background: var(--night);
  color: var(--night-text);
  /* Pulled up by the slant height so the cream section above continues
     into the clipped wedge - no page-white gap. Padding restores the
     content position. */
  margin-top: calc(-1 * var(--slant-h));
  padding-block: calc(var(--s-8) + var(--slant-h)) var(--s-5);
  /* Top edge rises to the right, echoing the slab's angle. */
  clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule-night);
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--night-text);
  margin-bottom: var(--s-3);
}
.footer__logo:hover { text-decoration: none; }
.footer__tag {
  color: var(--night-mute);
  font-size: 14px;
  line-height: 1.55;
  max-width: 36ch;
  margin: 0;
}
.footer__col .label {
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-night);
  display: block;
  color: var(--night-text);
}
.footer__col address {
  font-style: normal;
  color: var(--night-mute);
  line-height: 1.6;
  margin-bottom: var(--s-3);
  font-size: 14px;
}
.footer__col a {
  color: var(--night-mute);
  text-decoration: none;
  display: block;
  padding: 4px 0;
  font-size: 14px;
  transition: color var(--dur-fast) var(--ease);
}
.footer__col a:hover { color: var(--night-text); }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li::before { content: ''; display: none; }
.footer__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  font-size: 12px;
  color: var(--night-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer__meta a { color: var(--night-mute); text-decoration: none; }
.footer__meta a:hover { color: var(--night-text); }
.footer__top { text-decoration: underline; }

/* =========================================================
   SECTION HEAD
   ========================================================= */
.section-head {
  margin-bottom: var(--s-7);
}
/* Gold diamond under each section head - hotel stationery */
.section-head::after {
  content: '\25C6';
  display: block;
  margin-top: var(--s-4);
  font-size: 11px;
  color: var(--gold);
}
.section-head--center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 46px);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--s-3) 0 0;
  max-width: 22ch;
}
.section-head--center .section-head__title { margin-inline: auto; }
.section-head__lede {
  margin-top: var(--s-3);
  font-size: var(--fs-body);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
  margin-inline: auto;
}
.section-head .script {
  display: block;
  margin-bottom: var(--s-2);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}