/* Grand Central — shared visual system.
   Both index.html and rooms.html link this file so they cannot drift apart. */
/* ── Palette drawn from the building itself: brick, plaster, walnut, brass ── */
  :root {
    --ground:      #1E1512;
    --ground-deep: #150E0C;
    --ground-lift: #2A1E19;
    --cream:       #F3EADA;
    --cream-dim:   #C4B09A;
    --brass:       #D9A441;
    --brick:       #C87A57;
    --rule:        rgba(217,164,65,0.28);
    --rule-soft:   rgba(243,234,218,0.13);
    --scrim:       linear-gradient(180deg, rgba(21,14,12,0.30) 0%, rgba(21,14,12,0.62) 55%, rgba(21,14,12,0.93) 100%);
    --cta:         #A45136;
    --cta-hover:   #843C28;
    --cta-ink:     #FFF8F1;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --ground:      #F3EADA;
      --ground-deep: #E8DCC6;
      --ground-lift: #FAF4E9;
      --cream:       #241813;
      --cream-dim:   #5E4A3C;
      --brass:       #7A561A;
      --brick:       #8A4A33;
      --rule:        rgba(122,86,26,0.34);
      --rule-soft:   rgba(36,24,19,0.15);
    }
  }
  :root[data-theme="light"] {
    --ground: #F3EADA; --ground-deep: #E8DCC6; --ground-lift: #FAF4E9;
    --cream: #241813; --cream-dim: #5E4A3C; --brass: #7A561A; --brick: #8A4A33;
    --rule: rgba(122,86,26,0.34); --rule-soft: rgba(36,24,19,0.15);
  }
  :root[data-theme="dark"] {
    --ground: #1E1512; --ground-deep: #150E0C; --ground-lift: #2A1E19;
    --cream: #F3EADA; --cream-dim: #C4B09A; --brass: #D9A441; --brick: #C87A57;
    --rule: rgba(217,164,65,0.28); --rule-soft: rgba(243,234,218,0.13);
  }

  /* Four voices, each with a source in the building:
     carved stone (Cinzel) for identity, book serif for reading,
     condensed signage for wayfinding, mono for data.
     Self-host Cinzel + EB Garamond before launch — see FONTS.md. */
  :root {
    --face-carved: Cinzel, "Trajan Pro", Georgia, serif;
    --face-read:   "EB Garamond", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    --face-sign:   "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --face-data:   ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--ground); color: var(--cream);
    font-family: var(--face-read);
    line-height: 1.62; -webkit-font-smoothing: antialiased;
  }
  .page { max-width: 1140px; margin: 0 auto; padding: 0 30px; }
  h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; letter-spacing: -0.018em; }
  a { color: inherit; text-decoration: none; }
  :where(a, button, input, select):focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .sign { font-family: var(--face-sign); text-transform: uppercase; letter-spacing: 0.13em; font-weight: 600; }
  .data { font-family: var(--face-data); font-variant-numeric: tabular-nums; }
  /* Carved: the facade lettering. Identity only — never body copy. */
  .carved { font-family: var(--face-carved); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 500; }

  /* Photographs. Until the files land, the alt text shows on a warm plate. */
  .shot { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* The mark over photography. A tight dark halo plus a softer lift separates
     the linework from the image without resorting to a plate.
     Pair it with the rules in the identity sheet: over architectural interiors
     use the arch sub-mark, never the full arcade — a line drawing of the
     building laid over a photograph of the building reads as scaffolding. */
  .on-image {
    filter:
      drop-shadow(0 0 2px rgba(21, 14, 12, 0.95))
      drop-shadow(0 1px 6px rgba(21, 14, 12, 0.55));
  }
  .plate {
    background: var(--ground-lift); border: 1px solid var(--rule); overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: var(--brass);
    font-size: 11px; text-align: center; padding: 0;
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--face-sign);
    text-transform: uppercase; letter-spacing: 0.11em; font-weight: 600; font-size: 11.5px;
    padding: 12px 21px; border-radius: 2px; border: 1px solid transparent; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }
  .btn-brass { background: var(--brass); color: var(--ground-deep); }
  .btn-brass:hover { background: var(--cream); }
  .btn-line { border-color: var(--rule); color: var(--cream); background: transparent; }
  .btn-line:hover { border-color: var(--brass); color: var(--brass); }

  /* ── Masthead over the hero ── */
  .hero { position: relative; min-height: 82vh; display: flex; flex-direction: column; }
  .hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--ground-deep); }
  .hero-media picture { display: block; width: 100%; height: 100%; }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
  .hero-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
  .hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; color: #F3EADA; }

  .masthead {
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
    padding: 22px 0 20px; border-bottom: 1px solid rgba(243,234,218,0.22);
  }
  .nameplate { display: flex; align-items: center; gap: 13px; }
  .brand-building {
    display: block; width: 104px; height: 29px; overflow: hidden; flex: 0 0 auto;
  }
  .brand-building img {
    display: block; width: 104px; height: auto;
    opacity: 1;
    filter: brightness(0);
  }
  .hero .brand-building img,
  .story-hero .brand-building img { filter: brightness(0) invert(1); }
  .nameplate-mark { width: 82px; height: 82px; object-fit: contain; flex: 0 0 auto; }
  /* Mastheads that sit over hero photography get the halo; the ones on a solid
     ground do not, since a dark halo on the light theme reads as a smudge. */
  .hero .nameplate-mark,
  .story-hero .nameplate-mark {
    filter:
      drop-shadow(0 0 2px rgba(21, 14, 12, 0.95))
      drop-shadow(0 1px 6px rgba(21, 14, 12, 0.55));
  }
  .nameplate-words { display: grid; gap: 4px; }
  .nameplate strong { font-size: 19px; font-weight: 500; }
  .nameplate-place { font-size: 8px; line-height: 1; color: rgba(243,234,218,.72); letter-spacing: .24em; }
  .wayfind { display: flex; gap: 26px; font-size: 11px; color: rgba(243,234,218,0.82); }
  .wayfind a { padding: 6px 0; }
  .wayfind a:hover { color: #fff; }

  .hero-copy { margin-top: auto; padding: 60px 0 54px; max-width: 46ch; }
  .hero-copy h1 { font-size: 60px; line-height: 1.02; margin-bottom: 20px; max-width: 11em; }
  .hero-copy h1 em { font-style: italic; color: #E8B96A; }
  .hero-copy p { font-size: 17px; color: rgba(243,234,218,0.9); max-width: 46ch; margin: 0 0 30px; }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  /* The hero photograph is dark in both themes, so its controls are pinned to
     the dark palette. Inheriting theme tokens made this invisible in light mode. */
  .hero-actions .btn-brass { background: #D9A441; color: #150E0C; }
  .hero-actions .btn-brass:hover { background: #F3EADA; }
  .hero-actions .btn-line { border-color: rgba(243,234,218,.5); color: #F3EADA; }
  .hero-actions .btn-line:hover { border-color: #D9A441; color: #D9A441; }
  .masthead .btn-brass { background: #D9A441; color: #150E0C; }
  .masthead .btn-brass:hover { background: #F3EADA; }
  .callnow {
    font-family: var(--face-sign); font-size: 12px; font-weight: 400;
    letter-spacing: .055em; color: rgba(243,234,218,.78);
    border-bottom: 1px solid rgba(243,234,218,.24); padding-bottom: 2px;
  }
  .callnow:hover { color: #D9A441; border-bottom-color: #D9A441; }
  a[href^="tel:"]:not(.btn) {
    font-family: var(--face-sign); font-size: 12px; font-weight: 400;
    font-variant-numeric: proportional-nums; letter-spacing: .055em;
    text-transform: none;
  }

  /* ── Ticket window ── */
  .ticket-window {
    background: var(--ground-lift); border: 1px solid var(--rule); border-radius: 3px;
    padding: 21px 25px; margin-top: -34px; position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 20px; align-items: end;
    box-shadow: 0 3px 6px rgba(0,0,0,.2), 0 20px 46px rgba(0,0,0,.28);
  }
  .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  .field label { font-size: 9.5px; font-weight: 500; color: var(--brass); }
  .field input, .field select {
    background: transparent; border: none; border-bottom: 1px solid var(--rule-soft);
    padding: 7px 1px; font-size: 15px; color: var(--cream); border-radius: 0; width: 100%;
    font-family: var(--face-read); font-weight: 400; letter-spacing: 0;
    font-variant-numeric: proportional-nums;
  }
  .field input[type="date"]::-webkit-datetime-edit {
    font-family: var(--face-read); font-weight: 400; letter-spacing: 0;
  }
  .field input:focus, .field select:focus { outline: none; border-bottom-color: var(--brass); }
  .ticket-window .btn { height: 43px; }

  /* ── Departures board ── */
  .board-wrap { padding: 70px 0 4px; }
  .board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
  .board-head h2 { font-size: 32px; }
  .board-head p { margin: 9px 0 0; color: var(--cream-dim); font-size: 14.5px; max-width: 54ch; }
  .board-note { font-size: 10px; color: var(--brass); }

  /* The board is a physical object, not a themed surface. It stays an enamel
     plate in both themes, the way the original stood in the concourse. */
  .board {
    --plate:      #EFE9DC;
    --plate-ink:  #1C1310;
    --plate-dim:  #5E4A3C;
    --plate-brass:#7A561A;
    --plate-brick:#8A4A33;
    --plate-rule: rgba(28,19,16,0.17);
    width: 100%; border-collapse: collapse; margin-top: 24px;
    background: var(--plate); color: var(--plate-ink); border: 1px solid var(--plate-rule);
    box-shadow: 0 2px 5px rgba(21,14,12,.18), 0 16px 40px rgba(21,14,12,.16);
  }
  .board caption {
    text-align: left; padding: 13px 20px; font-size: 10px; color: var(--plate);
    background: var(--plate-ink); border-bottom: 1px solid var(--plate-rule);
  }
  .board th {
    text-align: left; padding: 11px 20px; font-size: 9.5px; color: var(--plate-dim);
    border-bottom: 2px solid var(--plate-ink); font-weight: 600;
    font-family: var(--face-sign);
    text-transform: uppercase; letter-spacing: 0.13em;
  }
  .board th.num, .board td.num { text-align: right; }
  .board td { padding: 15px 20px; border-bottom: 1px solid var(--plate-rule); vertical-align: baseline; }
  .board tr:last-child td { border-bottom: none; }
  .board tbody tr { transition: background-color .18s ease; }
  .board tbody tr:hover { background: rgba(28,19,16,0.05); }
  .room-name { font-size: 18px; }
  .room-desc { display: block; font-size: 13px; color: var(--plate-dim); margin-top: 3px; }
  .rate { font-size: 19px; color: var(--plate-brass); }
  .rate + small { font-size: 10.5px; color: var(--plate-dim); display: block; margin-top: 2px; letter-spacing: .06em; }
  .status { font-size: 10px; }
  .status.on { color: var(--plate-brass); }
  .status.low { color: var(--plate-brick); }
  .board td .btn { padding: 8px 15px; font-size: 10.5px; border-color: var(--plate-rule); color: var(--plate-ink); }
  .board td .btn:hover { border-color: var(--plate-ink); background: var(--plate-ink); color: var(--plate); }
  .board-credit { margin-top: 12px; font-size: 12.5px; color: var(--cream-dim); }

  .board tbody tr .settle { display: inline-block; }
  @media (prefers-reduced-motion: no-preference) {
    .board.is-settled tbody tr .settle { animation: settle .62s cubic-bezier(.16,1,.3,1) both; }
    .board.is-settled tbody tr:nth-child(1) .settle { animation-delay: .04s; }
    .board.is-settled tbody tr:nth-child(2) .settle { animation-delay: .12s; }
    .board.is-settled tbody tr:nth-child(3) .settle { animation-delay: .20s; }
    .board.is-settled tbody tr:nth-child(4) .settle { animation-delay: .28s; }
  }
  @keyframes settle {
    from { transform: translateY(-42%) scaleY(.72); filter: blur(2.5px); opacity: .25; }
    to   { transform: none; filter: none; opacity: 1; }
  }

  /* ── The building ── */
  .building { padding: 78px 0 0; }
  .building-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
  .building-lead h2 { font-size: 33px; margin-bottom: 17px; }
  .building-lead p { color: var(--cream-dim); margin: 0 0 15px; font-size: 15.5px; max-width: 48ch; }
  .building-lead .plate { aspect-ratio: 4/3; }

  /* ── Then and now ── */
  .thennow { padding: 66px 0 0; }
  .thennow h2 { font-size: 30px; margin-bottom: 8px; }
  .thennow > p { color: var(--cream-dim); margin: 0 0 30px; max-width: 58ch; font-size: 15px; }
  .thennow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .thennow .plate { aspect-ratio: 4/3; }
  .archival img { filter: grayscale(1) contrast(1.04); }
  .yearmark {
    display: block; font-size: 10px; color: var(--brass); margin-bottom: 9px;
    font-family: var(--face-sign);
    text-transform: uppercase; letter-spacing: .13em; font-weight: 600;
  }

  /* ── Rooms detail ── */
  .rooms-detail { padding: 74px 0 0; }
  .rooms-detail h2 { font-size: 32px; margin-bottom: 8px; }
  .rooms-detail > p { color: var(--cream-dim); margin: 0 0 30px; max-width: 56ch; font-size: 15px; }
  /* Frames follow the photographs: the room is portrait, the bathroom landscape.
     Unequal heights are intentional — the room reads as the primary image. */
  .rooms-media { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: start; }
  /* Each frame matches its photograph orientation, so nothing is cropped to fit. */
  .rooms-media > figure:nth-child(1) .plate { aspect-ratio: 3/4; }
  .rooms-media > figure:nth-child(2) .plate { aspect-ratio: 3/4; }
  .rooms-media > figure:nth-child(3) .plate { aspect-ratio: 4/3; }
  .caption { font-size: 12.5px; color: var(--cream-dim); margin-top: 10px; }

  /* ── Saffron restaurant ── */
  .platform8 {
    margin-top: 78px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 52px 0;
  }
  .platform8 h2 { font-size: 30px; margin-bottom: 15px; }
  .platform8 p { color: var(--cream-dim); margin: 0 0 22px; max-width: 46ch; font-size: 15px; }

  /* ── Rail line ── */
  .line-section { padding: 70px 0 8px; }
  .line-section h2 { font-size: 30px; margin-bottom: 6px; }
  .line-section > p { color: var(--cream-dim); margin: 0 0 32px; max-width: 56ch; font-size: 15px; }
  .railline { position: relative; padding-left: 34px; }
  .railline::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--brass); opacity: .55; }
  .stop { position: relative; display: flex; align-items: baseline; gap: 18px; padding: 13px 0; }
  .stop::before {
    content: ""; position: absolute; left: -30px; top: 19px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--ground); border: 2px solid var(--brass);
  }
  .stop.here::before { background: var(--brick); border-color: var(--brick); }
  .stop .where { flex: 1; font-size: 16px; }
  .stop .where small { display: block; font-size: 12.5px; color: var(--cream-dim); margin-top: 2px; }
  .stop .mins { font-size: 15px; color: var(--brass); white-space: nowrap; }
  .stop.here .where { color: var(--brass); }

  /* ── Noticeboard ── */
  .notice { padding: 70px 0 8px; }
  .notice h2 { font-size: 30px; margin-bottom: 26px; }
  .notice dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0 30px; border-top: 1px solid var(--rule); }
  .notice dt {
    font-family: var(--face-sign);
    text-transform: uppercase; letter-spacing: .13em; font-weight: 600;
    font-size: 10px; color: var(--brass); padding: 17px 0; border-bottom: 1px solid var(--rule-soft); align-self: start;
  }
  .notice dd { margin: 0; padding: 15px 0 17px; border-bottom: 1px solid var(--rule-soft); font-size: 15.5px; }
  .notice dd em { font-style: normal; color: var(--cream-dim); font-size: 13.5px; display: block; margin-top: 2px; }

  /* ── Concierge ── */
  .concierge {
    margin-top: 72px; background: var(--ground-deep); border: 1px solid var(--rule);
    padding: 34px 38px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  }
  .concierge h2 { font-size: 24px; margin-bottom: 10px; }
  .concierge p { margin: 0; color: var(--cream-dim); font-size: 14.5px; max-width: 58ch; }

  footer { margin-top: 78px; border-top: 1px solid var(--rule); }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding: 46px 0 34px; }
  .foot-grid h3 {
    font-size: 10px; color: var(--brass); margin-bottom: 14px;
    font-family: var(--face-sign);
    text-transform: uppercase; letter-spacing: .13em; font-weight: 600;
  }
  .foot-grid a, .foot-grid p { display: block; font-size: 14px; color: var(--cream-dim); margin: 0 0 9px; }
  .foot-grid a[href^="tel:"] {
    font-family: inherit; font-size: 14px; font-weight: inherit;
    font-variant-numeric: normal; letter-spacing: normal; text-transform: none;
  }
  .foot-grid a:hover { color: var(--cream); }
  .foot-base {
    border-top: 1px solid var(--rule-soft); padding: 17px 0 40px; display: flex;
    justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 11.5px; color: var(--cream-dim);
  }

  @media (max-width: 900px) {
    .page { padding: 0 20px; }
    /* A tall frame crops a landscape photo to a slice. Keep it shallower on phones. */
    .hero { min-height: 62vh; }
    .hero-copy { padding: 44px 0 42px; max-width: none; }
    .hero-copy h1 { font-size: 39px; }
    /* Was display:none with no replacement. Now a scrollable signage rail. */
    .wayfind {
      gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none; max-width: 100%; padding-bottom: 2px;
    }
    .wayfind::-webkit-scrollbar { display: none; }
    .wayfind a { white-space: nowrap; padding: 13px 0; }
    /* Touch targets. Thumbs, one-handed, often outside the arena at 11pm. */
    .field input, .field select { padding: 13px 1px; font-size: 16px; }
    .callnow { padding: 11px 0; }
    .foot-grid a { padding: 7px 0; }
    .board td .btn { padding: 13px 16px; }
    .btn { padding: 14px 21px; }
    .masthead { flex-wrap: wrap; gap: 12px 16px; }
    .masthead .nameplate { flex: 1 1 auto; }
    .wayfind { order: 3; flex-basis: 100%; }
    .ticket-window { grid-template-columns: 1fr 1fr; }
    .ticket-window .btn { grid-column: 1 / -1; }
    .building-lead, .platform8, .rooms-media, .concierge { grid-template-columns: 1fr; gap: 26px; }
    .platform8 { padding: 42px 0; }
    .rooms-media { grid-template-columns: 1fr 1fr; }
    .rooms-media > figure:nth-child(1) { grid-column: 1 / -1; }
    .rooms-media > figure:nth-child(1) .plate { aspect-ratio: 4/5; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .board th:nth-child(2), .board td:nth-child(2) { display: none; }
    .board th, .board td { padding-left: 14px; padding-right: 14px; }
  }
  @media (max-width: 620px) {
    .rooms-media { grid-template-columns: 1fr; }
    .thennow-pair { grid-template-columns: 1fr; }
    .rooms-media > figure:nth-child(1) { grid-column: auto; }
    .rooms-media > figure:nth-child(1) .plate { aspect-ratio: 3/4; }
    .notice dl { grid-template-columns: 1fr; }
    .notice dt { padding-bottom: 0; border-bottom: none; }
    .notice dd { padding-top: 6px; }
  }
  /* Skip link — first stop for keyboard and screen-reader users. */
  .skiplink {
    position: absolute; left: 8px; top: -60px; z-index: 99;
    background: var(--brass); color: var(--ground-deep);
    padding: 11px 18px; border-radius: 2px;
    font-family: var(--face-sign); text-transform: uppercase;
    letter-spacing: .11em; font-weight: 600; font-size: 11.5px;
    transition: top .16s ease;
  }
  .skiplink:focus { top: 8px; }

/* 2026 editorial direction: Aman restraint, Ritz-Carlton spacing, Auckland rail heritage. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --ground: #f1eee7;
  --ground-deep: #24251f;
  --ground-lift: #f8f6f1;
  --cream: #262720;
  --cream-dim: #66665d;
  --brass: #5f625b;
  --brick: #8a5948;
  --rule: rgba(38,39,32,.22);
  --rule-soft: rgba(38,39,32,.11);
  --face-display: Baskerville, "Baskerville Old Face", "Iowan Old Style", Georgia, serif;
  /* The clock in the logo. Warm terracotta on the editorial ground; the mark's
     line work stays currentColor so it inverts with the theme. */
  --logo-accent: #8a5948;
}

/* Mastheads sit over photography with the copy forced light, so the terracotta
   goes muddy against a dark scrim. Brass reads there — and it is the colour the
   station clock actually is. */
.hero, .story-hero { --logo-accent: #d9a441; }

body { background: var(--ground); color: var(--cream); font-size: 17px; }
.page { max-width: 1320px; padding-inline: clamp(22px, 4vw, 64px); }
h1, h2, h3 {
  font-family: var(--face-display);
  font-weight: 400;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero { min-height: 94svh; }
.hero-media::after {
  background: linear-gradient(180deg, rgba(18,20,17,.38), rgba(18,20,17,.10) 44%, rgba(18,20,17,.72));
}
.masthead { padding-block: 28px; }
.nameplate strong {
  font-family: var(--face-display);
  font-size: 20px;
  letter-spacing: .14em;
  font-weight: 400;
}
.wayfind { gap: clamp(18px, 2.6vw, 38px); font-size: 10px; }
.wayfind,
.btn,
.text-link,
.hero-kicker {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: .095em;
}
.hero-kicker { font-weight: 400; letter-spacing: .12em; }
.wayfind { text-transform: none; font-size: 12px; letter-spacing: .045em; }
.wayfind a[aria-current="page"] { color: #fff; border-bottom: 1px solid rgba(255,255,255,.62); }
.pagehead .wayfind a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--cream); }
.pagehead .nameplate-place { color: var(--cream-dim); }
.btn { border-radius: 0; padding: 14px 24px; font-size: 10px; letter-spacing: .10em; }
.hero-copy { max-width: 780px; padding-bottom: clamp(70px, 10vh, 120px); }
.hero-copy h1 { font-size: clamp(58px, 7.5vw, 108px); line-height: .94; max-width: 9.5em; margin-bottom: 30px; }
.hero-copy h1 em { color: #e7dcc9; font-weight: 400; }
.nameplate-place { color: rgba(233,229,220,.72); }
.hero-actions .btn-brass,
.masthead .btn-brass { background: #ece9e1; color: #23251f; }
.hero-actions .btn-brass:hover,
.masthead .btn-brass:hover { background: #ffffff; color: #171914; }
.hero-actions .btn-line:hover { border-color: #ffffff; color: #ffffff; }
.callnow:hover { color: #ffffff; border-bottom-color: #ffffff; }
.hero-copy p { font-size: clamp(17px, 1.5vw, 21px); max-width: 43ch; line-height: 1.55; }

.ticket-window {
  margin-top: 0; padding: 26px 30px; border: 0; box-shadow: none;
  background: #ded9cf; gap: 28px;
}
.field label { color: #5f594d; }
.booking-handoff, .bookstrip > .booking-handoff { max-width: 72ch; margin: 14px 0 0; color: var(--cream-dim); font-size: 14px; line-height: 1.6; }
.board-wrap, .building, .thennow, .rooms-detail, .platform8, .line-section, .notice, .concierge {
  padding-top: clamp(96px, 12vw, 170px);
}
.board-head { align-items: start; }
.board-head h2, .building-lead h2, .thennow h2, .rooms-detail h2,
.platform8 h2, .line-section h2, .notice h2, .concierge h2 {
  font-size: clamp(38px, 4.5vw, 66px); line-height: 1.04;
}
.board-head p, .building-lead p, .thennow > p, .rooms-detail > p {
  font-size: 17px; line-height: 1.72;
}
.board { margin-top: 42px; box-shadow: none; }
.board td { padding-block: 23px; }
.building-lead { grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 8vw, 120px); }
.building-lead .plate { aspect-ratio: 5/4; }
.thennow-pair { gap: clamp(22px, 4vw, 56px); }
.plate { border: 0; background: #ded9cf; }
.caption { padding-top: 12px; font-size: 12px; letter-spacing: .04em; color: var(--cream-dim); }

.rooms-detail > p { max-width: 50ch; }
.rooms-media {
  grid-template-columns: 1.18fr .82fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: start;
}
.rooms-media > figure:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.rooms-media > figure:nth-child(2) { grid-column: 2; }
.rooms-media > figure:nth-child(3) { grid-column: 2; }
.rooms-media > figure:nth-child(1) .plate { aspect-ratio: 4/5; }
.rooms-media > figure:nth-child(2) .plate,
.rooms-media > figure:nth-child(3) .plate { aspect-ratio: 4/3; }
.rooms-media .shot { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.rooms-media figure:hover .shot { transform: scale(1.018); }

.platform8 { gap: clamp(48px, 8vw, 120px); }
.platform8 .plate { aspect-ratio: 4/5 !important; }
footer { margin-top: clamp(100px, 14vw, 190px); }

@media (max-width: 760px) {
  .hero { min-height: 88svh; }
  .masthead .wayfind, .masthead .callnow { display: none; }
  .nameplate-mark { width: 60px; height: 60px; }
  .nameplate strong { font-size: 17px; }
  .hero-copy h1 { font-size: clamp(48px, 15vw, 70px); }
  .ticket-window { grid-template-columns: 1fr; margin-inline: -22px; padding: 28px 22px; }
  .building-lead, .rooms-media { grid-template-columns: 1fr; }
  .rooms-media > figure:nth-child(n) { grid-column: 1; grid-row: auto; }
  .rooms-media > figure:nth-child(n) .plate { aspect-ratio: 4/5; }
}

/* Hotel overview homepage */
[hidden] { display: none !important; }
.hero-kicker, .eyebrow { margin: 0 0 18px; font-size: 10px; letter-spacing: .18em; }
.hero-kicker { color: rgba(255,255,255,.78); }
.eyebrow { color: var(--cream-dim); }
.text-link {
  display: inline-flex; align-items: center; gap: 13px; padding-bottom: 7px;
  border-bottom: 1px solid var(--rule); font-size: 10px; letter-spacing: .09em;
}
.text-link:hover { border-bottom-color: var(--cream); }
.overview-intro, .stay-overview, .hotel-gallery, .heritage-overview,
.dining-overview, .location-overview, .getting-here, .property-details, .faq-section, .direct-booking {
  padding-top: clamp(100px, 12vw, 172px);
}
.overview-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.overview-grid h2, .section-heading h2, .heritage-copy h2, .dining-copy h2, .direct-booking h2 {
  font-size: clamp(42px, 5.2vw, 76px); line-height: 1.02;
}
.overview-grid > div > p { margin: 0 0 28px; font-size: 19px; line-height: 1.72; color: var(--cream-dim); }
.quick-facts {
  margin: clamp(65px, 8vw, 110px) 0 0; display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.quick-facts div { padding: 28px 24px 30px 0; }
.quick-facts div + div { border-left: 1px solid var(--rule); padding-left: 24px; }
.quick-facts dt { font-size: 22px; margin-bottom: 5px; }
.quick-facts dd { margin: 0; color: var(--cream-dim); font-size: 14px; }
.section-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 36px;
  margin-bottom: clamp(42px, 6vw, 76px);
}
.section-heading .eyebrow { margin-bottom: 14px; }
.section-heading > p { margin: 0; color: var(--cream-dim); text-align: right; font-size: 15px; }
.stay-feature { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; background: var(--ground-lift); }
.stay-feature + .stay-feature { margin-top: clamp(40px, 6vw, 82px); }
.stay-feature figure { margin: 0; height: min(74vw, 780px); overflow: hidden; }
.stay-feature figure img { width: 100%; height: 100%; object-fit: cover; }
.stay-copy { padding: clamp(42px, 7vw, 100px); }
.stay-copy h3 { font-size: clamp(31px, 3.3vw, 50px); line-height: 1.08; margin-bottom: 24px; }
.stay-copy > p:not(.eyebrow) { color: var(--cream-dim); margin: 0 0 30px; font-size: 17px; }
.stay-feature-reverse { grid-template-columns: .82fr 1.18fr; }
.stay-feature-reverse figure { grid-column: 2; grid-row: 1; }
.stay-feature-reverse .stay-copy { grid-column: 1; grid-row: 1; }
.hotel-gallery .section-heading { align-items: center; }
.hotel-gallery .section-heading h2 { margin: 0; }
.gallery-feature {
  position: relative; min-width: 0; height: clamp(480px, 65vw, 820px);
  overflow: hidden; background: var(--ground-lift);
}
.gallery-slides {
  display: flex; width: 100%; height: 100%;
  transition: transform 1s cubic-bezier(.65,0,.35,1); will-change: transform;
}
.gallery-slide {
  display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
}
.gallery-next-small {
  position: absolute; right: 18px; bottom: 18px; width: 56px; height: 56px;
  border: 0; background: #151713; color: #f1eee7; font-size: 25px;
  line-height: 1; cursor: pointer; transition: background .2s ease;
}
.gallery-next-small:hover { background: #2b2d27; }
.heritage-overview { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(50px, 9vw, 130px); align-items: center; }
.heritage-image { height: min(72vw, 780px); overflow: hidden; }
.heritage-image img { width: 100%; height: 100%; object-fit: cover; }
.heritage-copy p:not(.eyebrow) { color: var(--cream-dim); font-size: 17px; margin: 25px 0 0; }
.heritage-copy .text-link { margin-top: 31px; }
.dining-overview { display: block; }
.dining-copy {
  display: grid; grid-template-columns: 1fr .82fr; column-gap: clamp(50px, 9vw, 130px); row-gap: 16px;
  align-items: end; margin-bottom: clamp(54px, 8vw, 100px);
}
.dining-copy .eyebrow { grid-column: 1; }
.dining-copy h2 { grid-column: 1; }
.dining-description {
  grid-column: 2; grid-row: 1 / span 2; align-self: end;
  color: var(--cream-dim); font-size: 18px; margin: 0;
}
.dining-description p { margin: 0; }
.dining-description p + p { margin-top: 18px; }
.dining-carousel {
  position: relative; min-width: 0; aspect-ratio: 16 / 9;
  outline: none; overflow: hidden; background: var(--ground-lift);
}
.dining-carousel:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; }
.dining-slides {
  display: flex; width: 100%; height: 100%;
  transition: transform 1s cubic-bezier(.65,0,.35,1); will-change: transform;
}
.dining-slide {
  display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
}
.dining-next-small {
  position: absolute; right: 18px; bottom: 18px; width: 56px; height: 56px;
  border: 0; background: #151713; color: #f1eee7; font-size: 25px;
  line-height: 1; cursor: pointer; transition: background .2s ease;
}
.dining-next-small:hover { background: #2b2d27; }
.location-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--rule); }
.location-grid article { padding: 35px 34px 10px 0; }
.location-grid article + article { border-left: 1px solid var(--rule); padding-left: 34px; }
.location-grid span { color: var(--cream-dim); font-size: 13px; }
.location-grid h3 { margin: 34px 0 12px; font-size: 27px; }
.location-grid p { color: var(--cream-dim); font-size: 15px; margin: 0; }
.location-art { margin: clamp(55px, 8vw, 100px) 0 0; }
.location-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.location-art figcaption { margin-top: 12px; color: var(--cream-dim); font-size: 12px; }
.getting-intro { max-width: 820px; margin: 0 auto clamp(55px, 8vw, 100px); text-align: center; }
.getting-intro .eyebrow { margin-bottom: 16px; }
.getting-intro h2 { font-size: clamp(42px, 5.2vw, 76px); line-height: 1.02; }
.getting-intro > p:last-child {
  max-width: 66ch; margin: 27px auto 0; color: var(--cream-dim);
  font-size: 18px; line-height: 1.7;
}
.getting-guide {
  display: grid; grid-template-columns: .8fr 1.2fr;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.getting-address { padding: clamp(38px, 5vw, 64px) clamp(36px, 6vw, 80px) clamp(42px, 6vw, 72px) 0; }
.getting-address address {
  margin: 22px 0 25px; font-family: var(--face-display); font-style: normal;
  font-size: clamp(27px, 3vw, 40px); line-height: 1.22;
}
.getting-address > p:not(.eyebrow) { margin: 0 0 27px; color: var(--cream-dim); font-size: 15px; line-height: 1.65; }
.arrival-steps { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.arrival-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 24px; padding: 31px 0 31px clamp(34px, 5vw, 68px); }
.arrival-steps li + li { border-top: 1px solid var(--rule-soft); }
.arrival-steps > li > span { padding-top: 5px; color: var(--cream-dim); font-family: var(--face-sign); font-size: 11px; letter-spacing: .1em; }
.arrival-steps h3 { margin: 0 0 9px; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.12; }
.arrival-steps p { max-width: 55ch; margin: 0; color: var(--cream-dim); font-size: 15px; line-height: 1.65; }
.location-map {
  position: relative; height: clamp(430px, 55vw, 680px);
  margin-top: clamp(55px, 8vw, 100px); overflow: hidden; background: var(--ground-lift);
}
.location-map iframe {
  display: block; width: 100%; height: 100%; border: 0;
  filter: grayscale(.28) saturate(.7) contrast(.92); opacity: .88;
}
.map-directions {
  position: absolute; right: 20px; bottom: 20px; padding: 15px 20px;
  background: var(--ground-deep); color: #f1eee7; font-size: 10px; letter-spacing: .09em;
}
.map-directions:hover { background: #11120f; }
.property-heading { align-items: end; }
.property-grid {
  display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.property-grid article { padding: clamp(34px, 5vw, 64px) clamp(30px, 6vw, 84px) clamp(40px, 5vw, 66px) 0; }
.property-grid article + article { border-left: 1px solid var(--rule); padding-left: clamp(30px, 6vw, 84px); }
.property-grid dl { margin: 0; }
.property-grid dl div {
  display: grid; grid-template-columns: minmax(110px, .7fr) 1.3fr; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
}
.property-grid dl div:last-child { border-bottom: 0; }
.property-grid dt { color: var(--cream-dim); font-size: 14px; }
.property-grid dd { margin: 0; font-size: 15px; }
.property-grid dd a[href^="tel:"] {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  font-variant-numeric: normal; letter-spacing: normal;
}
.amenity-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.amenity-list li {
  position: relative; padding: 16px 0 16px 25px;
  border-bottom: 1px solid var(--rule-soft); font-size: 15px;
}
.amenity-list li::before {
  content: "—"; position: absolute; left: 0; top: 16px; color: var(--cream-dim);
}
.faq-heading { margin-bottom: clamp(28px, 4vw, 48px); }
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  list-style: none; position: relative; cursor: pointer; padding: 27px 64px 27px 0;
  font-family: var(--face-display); font-size: clamp(22px, 2.2vw, 31px); line-height: 1.2;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-family: "Segoe UI", Arial, sans-serif; font-size: 25px; font-weight: 300; color: var(--cream-dim);
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 62ch; margin: -3px 0 28px; color: var(--cream-dim); font-size: 16px; line-height: 1.7; }
.faq-list a { border-bottom: 1px solid var(--rule); }
.direct-booking { margin-top: clamp(100px, 12vw, 172px); padding: clamp(70px, 9vw, 120px); background: var(--ground-deep); color: #f1eee7; text-align: center; }
.direct-booking .eyebrow { color: rgba(241,238,231,.68); }
.direct-booking h2 { max-width: 12em; margin-inline: auto; }
.direct-booking > p:not(.eyebrow) { color: rgba(241,238,231,.72); margin: 24px auto 34px; max-width: 46ch; }
.direct-booking > div { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.direct-booking .btn-brass { background: #ece9e1; color: #23251f; }
.direct-booking .text-link { border-color: rgba(241,238,231,.35); }

@media (max-width: 820px) {
  .overview-grid, .heritage-overview { grid-template-columns: 1fr; }
  .dining-copy { grid-template-columns: 1fr; }
  .dining-copy .eyebrow, .dining-copy h2, .dining-description { grid-column: 1; grid-row: auto; }
  .dining-description { margin-top: 22px; }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .quick-facts div:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }
  .quick-facts div:nth-child(4) { border-top: 1px solid var(--rule); }
  .stay-feature, .stay-feature-reverse { grid-template-columns: 1fr; }
  .stay-feature figure, .stay-feature-reverse figure { grid-column: 1; grid-row: 1; height: min(120vw, 680px); }
  .stay-feature .stay-copy, .stay-feature-reverse .stay-copy { grid-column: 1; grid-row: 2; }
  .location-grid { grid-template-columns: 1fr; }
  .location-grid article + article { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .getting-guide { grid-template-columns: 1fr; }
  .getting-address { padding-right: 0; }
  .arrival-steps { border-left: 0; border-top: 1px solid var(--rule); }
  .arrival-steps li { padding-left: 0; }
  .property-grid { grid-template-columns: 1fr; }
  .property-grid article { padding-right: 0; }
  .property-grid article + article { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
}
@media (max-width: 560px) {
  .section-heading { align-items: start; flex-direction: column; margin-bottom: 38px; }
  .section-heading > p { text-align: left; }
  .quick-facts { grid-template-columns: 1fr; }
  .quick-facts div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .hotel-gallery .section-heading { flex-direction: row; align-items: center; }
  .gallery-feature { height: 118vw; max-height: 650px; }
  .gallery-next-small { right: 12px; bottom: 12px; width: 50px; height: 50px; font-size: 22px; }
  .dining-next-small { right: 12px; bottom: 12px; width: 50px; height: 50px; font-size: 22px; }
  .getting-intro { text-align: left; }
  .getting-intro > p:last-child { margin-inline: 0; }
  .arrival-steps li { grid-template-columns: 30px 1fr; gap: 15px; }
  .location-map { height: 440px; }
  .map-directions { right: 12px; bottom: 12px; }
  .direct-booking { margin-inline: -22px; padding-inline: 22px; }
  .amenity-list { grid-template-columns: 1fr; }
  .property-grid dl div { grid-template-columns: 1fr; gap: 5px; }
  .faq-list summary { padding-block: 23px; font-size: 22px; }
}

/* Shared responsive navigation and narrow-viewport resilience. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: 500 11px/1.2 var(--face-sign);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle-icon { position: relative; }
.menu-toggle-icon::before { position: absolute; transform: translateY(-6px); }
.menu-toggle-icon::after { position: absolute; transform: translateY(6px); }
.menu-open .menu-toggle-icon { background: transparent; }
.menu-open .menu-toggle-icon::before { transform: rotate(45deg); }
.menu-open .menu-toggle-icon::after { transform: rotate(-45deg); }
.gallery-controls {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: rgba(20,20,17,.82);
  color: #fff;
}
.gallery-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.45);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.gallery-controls button:hover { background: rgba(255,255,255,.16); }
.gallery-status { min-width: 72px; text-align: center; font-family: var(--face-sign); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 820px) {
  .masthead,
  .pagehead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: center;
    min-width: 0;
  }
  .masthead > *, .pagehead > *,
  .hero-inner, .story-hero-inner,
  .hero-copy, .story-hero-copy, .rooms-hero-copy { min-width: 0; }
  .menu-toggle { display: inline-flex; justify-self: end; }
  .masthead .wayfind,
  .pagehead .wayfind {
    grid-column: 1 / -1;
    grid-row: auto;
    order: initial;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
  }
  .site-nav-ready .masthead .wayfind,
  .site-nav-ready .pagehead .wayfind { display: none; }
  .site-nav-ready .masthead.menu-open .wayfind,
  .site-nav-ready .pagehead.menu-open .wayfind { display: flex; }
  .masthead .wayfind a,
  .pagehead .wayfind a {
    min-height: 44px;
    padding: 13px 0;
    border-top: 1px solid rgba(243,234,218,.2);
    white-space: normal;
  }
  .pagehead .wayfind a { border-top-color: var(--rule-soft); }
  .masthead > .hero-actions,
  .pagehead > .hero-actions,
  .masthead > .btn,
  .pagehead > .btn {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
  }
  .masthead > .hero-actions,
  .pagehead > .hero-actions { justify-content: space-between; }
  .masthead > .btn,
  .pagehead > .btn { justify-self: stretch; text-align: center; }
  .hero-copy h1,
  .story-hero-copy h1,
  .rooms-hero-copy h1 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }
  .venue-detail-gallery-grid { grid-template-columns: 1fr; }
  .venue-detail-gallery-grid figure,
  .venue-detail-gallery-grid figure.wide,
  .venue-detail-gallery-grid figure.tall {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .masthead, .pagehead { padding-block: 16px; }
  .nameplate { min-width: 0; }
  .nameplate-words { min-width: 0; }
  .nameplate strong { font-size: clamp(14px, 4.4vw, 17px); }
  .brand-building { flex: 0 0 auto; }
  .masthead > .hero-actions .btn,
  .pagehead > .hero-actions .btn { min-height: 44px; padding: 11px 14px; }
  .hero-copy h1 { font-size: clamp(42px, 13.5vw, 58px); line-height: .98; }
  .story-hero-copy h1 { font-size: clamp(42px, 13vw, 58px); }
  .hero-copy p,
  .story-hero-copy p,
  .rooms-hero-copy p { max-width: 100%; }
  .gallery-controls { right: 8px; bottom: 8px; left: 8px; justify-content: space-between; }
}

/* Station story — a quiet editorial page within the Grand Central system. */
.story-hero {
  position: relative; min-height: min(88svh, 920px); display: flex;
  background: var(--ground-deep); color: #f3eada;
}
.story-hero-media { position: absolute; inset: 0; overflow: hidden; }
.story-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.story-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,17,14,.5) 0%, rgba(18,17,14,.22) 38%, rgba(18,17,14,.78) 100%);
}
.story-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.story-hero-copy { margin-top: auto; padding: clamp(80px, 12vw, 160px) 0 clamp(58px, 8vw, 96px); max-width: 780px; }
.story-hero-copy .hero-kicker { margin: 0 0 18px; font-size: 10px; color: rgba(243,234,218,.75); }
.story-hero-copy h1 { font-size: clamp(54px, 8vw, 108px); line-height: .96; letter-spacing: -.035em; }
.story-hero-copy > p:last-child,
.story-hero-copy > p:last-of-type,
.story-hero-copy > .story-hero-summary { max-width: 47ch; margin: 27px 0 0; font-size: 18px; line-height: 1.6; color: rgba(243,234,218,.82); }

.story-intro { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); text-align: center; }
.story-intro h2 { max-width: 12em; margin: 17px auto 0; font-size: clamp(48px, 7vw, 92px); line-height: 1; }
.story-intro > p:last-child { max-width: 690px; margin: 35px auto 0; color: var(--cream-dim); font-size: clamp(18px, 2vw, 23px); line-height: 1.65; }

.story-origins { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(55px, 9vw, 130px); padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); }
.story-origins h2 { margin-top: 14px; font-size: clamp(48px, 6vw, 80px); line-height: 1; }
.story-origins > div:last-child p { margin: 0; color: var(--cream-dim); font-size: 18px; line-height: 1.75; }
.story-origins > div:last-child p + p { margin-top: 24px; }
.story-credentials { margin-bottom: clamp(56px, 7vw, 96px); background: var(--ground-deep); color: #f1eee7; }
.story-credential-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.story-credential-grid > div { min-width: 0; padding: 34px clamp(18px, 3vw, 38px); }
.story-credential-grid > div + div { border-left: 1px solid rgba(243,234,218,.13); }
.story-credential-grid span { display: block; color: rgba(243,234,218,.5); font-size: 9px; }
.story-credential-grid strong { display: block; margin-top: 9px; font-size: 19px; font-weight: 400; }

.story-chapters {
  position: relative; display: grid; gap: clamp(64px, 8vw, 110px);
  padding-top: clamp(35px, 5vw, 70px); padding-bottom: clamp(35px, 5vw, 70px);
}
.story-chapters::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--rule); transform: translateX(-.5px);
}
.story-chapter {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(70px, 10vw, 150px);
}
.story-chapter::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ground); border: 1px solid var(--cream-dim);
  transform: translate(-50%, -50%);
}
.story-chapter::after {
  content: ""; position: absolute; left: calc(50% - clamp(35px, 5vw, 75px));
  top: 50%; width: clamp(35px, 5vw, 75px); height: 1px; background: var(--rule);
}
.story-chapter-reverse { grid-template-columns: 1fr 1fr; }
.story-chapter-reverse .story-image { grid-column: 2; grid-row: 1; }
.story-chapter-reverse .story-chapter-copy { grid-column: 1; grid-row: 1; }
.story-chapter-reverse::after { left: 50%; }
.story-image { margin: 0; overflow: hidden; background: var(--ground-lift); }
.story-image img { display: block; width: 100%; height: auto; }
.story-image-tall { max-width: 520px; justify-self: end; }
.story-year { margin: 0 0 23px; color: var(--cream-dim); font-size: 10px; }
.story-chapter-copy h2 { font-size: clamp(40px, 5vw, 68px); line-height: 1.02; }
.story-chapter-copy > p:not(.story-year) { margin: 27px 0 0; color: var(--cream-dim); font-size: 17px; line-height: 1.72; }
.story-casino { position: relative; z-index: 3; width: min(760px, 88%); margin: -35px auto; padding: clamp(40px, 6vw, 68px); background: #ded3c3; color: #241813; border-top: 3px solid #a45136; text-align: center; }
.story-casino .story-year { color: #7a561a; }
.story-casino h2 { max-width: 15em; margin: 0 auto; font-size: clamp(34px, 4.4vw, 53px); line-height: 1.06; }
.story-casino > p:last-child { max-width: 58ch; margin: 25px auto 0; color: #5e4a3c; font-size: 16px; line-height: 1.72; }

.story-screen { margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--rule); }
.story-screen header { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px clamp(45px, 8vw, 110px); align-items: end; }
.story-screen header .eyebrow { grid-column: 1 / -1; }
.story-screen header h2 { font-size: clamp(46px, 6vw, 78px); line-height: 1; }
.story-screen header > p:last-child { margin: 0 0 .4em; color: var(--cream-dim); font-size: 18px; line-height: 1.7; }
.story-screen-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: clamp(48px, 7vw, 82px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.story-screen-grid article { padding: clamp(30px, 4vw, 48px) clamp(22px, 3vw, 38px); }
.story-screen-grid article + article { border-left: 1px solid var(--rule); }
.story-screen-grid span { color: var(--brass); font-size: 9px; }
.story-screen-grid h3 { margin-top: 14px; font-size: clamp(27px, 3vw, 36px); line-height: 1.08; }
.story-screen-grid p { margin: 20px 0 0; color: var(--cream-dim); font-size: 15.5px; line-height: 1.68; }
.story-screen > .text-link { margin-top: 34px; }

.story-chronology { padding-top: clamp(64px, 8vw, 110px); }
.story-chronology header { display: grid; grid-template-columns: .75fr 1.25fr; gap: 30px; align-items: end; margin-bottom: 55px; }
.story-chronology h2 { font-size: clamp(46px, 6vw, 78px); line-height: 1; }
.story-chronology ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.story-chronology li { display: grid; grid-template-columns: minmax(125px, .45fr) 1.55fr; gap: 28px; padding: 25px 0; border-bottom: 1px solid var(--rule-soft); }
.story-chronology time { color: var(--brass); font-family: var(--face-sign); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.story-chronology li p { margin: 0; color: var(--cream-dim); font-size: 17px; }

.story-closing { margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); text-align: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.story-closing h2 { max-width: 12em; margin: 17px auto 0; font-size: clamp(43px, 6vw, 78px); line-height: 1.02; }
.story-closing > p:not(.eyebrow) { max-width: 48ch; margin: 28px auto 35px; color: var(--cream-dim); font-size: 18px; }
.story-closing > div { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }

@media (max-width: 820px) {
  .story-hero { min-height: 760px; }
  .story-hero .masthead { align-items: flex-start; }
  .story-chapters { padding-left: 36px; gap: 64px; }
  .story-chapters::before { left: 12px; }
  .story-chapter, .story-chapter-reverse { grid-template-columns: 1fr; gap: 42px; }
  .story-chapter::before { left: -24px; top: 0; }
  .story-chapter::after, .story-chapter-reverse::after { left: -19px; top: 0; width: 31px; }
  .story-chapter-reverse .story-image, .story-chapter-reverse .story-chapter-copy { grid-column: 1; }
  .story-chapter-reverse .story-image { grid-row: 1; }
  .story-chapter-reverse .story-chapter-copy { grid-row: 2; }
  .story-image-tall { max-width: 100%; justify-self: stretch; }
  .story-origins, .story-screen header { grid-template-columns: 1fr; }
  .story-credential-grid { grid-template-columns: 1fr 1fr; }
  .story-credential-grid > div:nth-child(3) { border-left: 0; }
  .story-credential-grid > div:nth-child(n+3) { border-top: 1px solid rgba(243,234,218,.13); }
  .story-screen-grid { grid-template-columns: 1fr; }
  .story-screen-grid article + article { border-left: 0; border-top: 1px solid var(--rule); }
}

@media (max-width: 560px) {
  .story-hero { min-height: 690px; }
  .story-hero .nameplate-mark { width: 62px; height: 62px; }
  .story-hero-copy { padding-bottom: 50px; }
  .story-hero-copy > p:last-child,
  .story-hero-copy > p:last-of-type,
  .story-hero-copy > .story-hero-summary { font-size: 16px; }
  .story-intro { text-align: left; }
  .story-intro h2, .story-intro > p:last-child { margin-left: 0; margin-right: 0; }
  .story-closing { text-align: left; }
  .story-closing h2, .story-closing > p:not(.eyebrow) { margin-left: 0; margin-right: 0; }
  .story-closing > div { justify-content: flex-start; }
  .story-casino { width: 100%; margin-block: -20px; text-align: left; }
  .story-casino h2, .story-casino > p:last-child { margin-left: 0; margin-right: 0; }
  .story-chronology header { grid-template-columns: 1fr; }
  .story-chronology li { grid-template-columns: 1fr; gap: 8px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .masthead { gap: 16px; }
  .masthead .wayfind { gap: 14px; font-size: 11px; }
}

/* Arts and culture — the editorial home of the art centre. */
.arts-overview {
  padding-top: clamp(100px, 12vw, 172px); display: grid;
  grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 9vw, 130px); align-items: center;
}
.arts-overview-copy h2 { font-size: clamp(42px, 5.2vw, 76px); line-height: 1.02; }
.arts-overview-copy > p:not(.eyebrow) { margin: 26px 0 0; color: var(--cream-dim); font-size: 17px; line-height: 1.72; }
.arts-overview-copy .text-link { margin-top: 31px; }
.arts-overview-image { margin: 0; height: min(78vw, 820px); overflow: hidden; }
.arts-overview-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.arts-hero .story-hero-media img { object-position: 50% 28%; }
.arts-hero .story-hero-media::after {
  background: linear-gradient(90deg, rgba(18,17,14,.68), rgba(18,17,14,.12) 85%),
    linear-gradient(180deg, rgba(18,17,14,.42), rgba(18,17,14,.2) 35%, rgba(18,17,14,.72));
}
.arts-hero-copy { max-width: 900px; }
.arts-hero-copy h1 { max-width: 10em; }
.arts-hero-copy > p:last-of-type { max-width: 42ch; }
.arts-hero-actions { margin-top: 30px; }
.arts-intro { padding-top: clamp(100px, 14vw, 190px); padding-bottom: clamp(100px, 14vw, 180px); }
.arts-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.arts-intro-grid h2 { font-size: clamp(46px, 6vw, 82px); line-height: 1; }
.arts-intro-grid p { margin: 0; color: var(--cream-dim); font-size: 18px; line-height: 1.75; }
.arts-intro-grid p + p { margin-top: 24px; }

.arts-paths {
  position: relative; z-index: 0; padding-top: clamp(85px, 10vw, 130px);
  padding-bottom: clamp(100px, 12vw, 160px);
}
.arts-paths::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%); background: #eae4d9;
}
.arts-paths-heading { margin-bottom: clamp(45px, 7vw, 82px); }
.arts-path-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 42px); align-items: start; }
.arts-path-grid article { min-width: 0; background: #f8f4ed; color: #25261f; }
.arts-path-grid article:nth-child(1) { grid-column: 1 / span 7; }
.arts-path-grid article:nth-child(2) { grid-column: 8 / -1; margin-top: clamp(70px, 8vw, 110px); }
.arts-path-grid article:nth-child(3) { grid-column: 3 / span 8; display: grid; grid-template-columns: 1.05fr .95fr; margin-top: clamp(15px, 3vw, 42px); }
.arts-path-grid figure { margin: 0; aspect-ratio: 16 / 11; overflow: hidden; }
.arts-path-grid article:nth-child(2) figure { aspect-ratio: 4 / 5; }
.arts-path-grid article:nth-child(3) figure { height: 100%; min-height: 440px; aspect-ratio: auto; }
.arts-path-grid img { width: 100%; height: 100%; object-fit: cover; }
.arts-path-grid article:nth-child(1) img { object-position: 50% 24%; }
.arts-path-grid article:nth-child(2) img { object-position: 50% 45%; }
.arts-path-grid article > div { padding: clamp(28px, 3.5vw, 46px); }
.arts-path-grid h3 { margin-top: 13px; font-size: clamp(28px, 3vw, 39px); line-height: 1.08; }
.arts-path-grid article > div > p:not(.eyebrow) { margin: 21px 0 0; color: #625d53; font-size: 16px; line-height: 1.68; }
.arts-path-grid .eyebrow { color: #7d4937; }
.arts-path-grid .text-link { margin-top: 24px; }

.venue-spaces { padding: clamp(90px, 12vw, 165px) 0; background: var(--ground-deep); color: #f1eee7; }
.venue-spaces-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px, 10vw, 145px); align-items: start; }
.venue-spaces-copy .eyebrow { color: rgba(241,238,231,.62); }
.venue-spaces-copy h2 { font-size: clamp(42px, 5.5vw, 74px); line-height: 1; }
.venue-spaces-copy > p:not(.eyebrow) { margin: 27px 0 0; color: rgba(241,238,231,.7); font-size: 17px; line-height: 1.72; }
.venue-spaces-copy .btn { margin-top: 34px; }
.venue-space-list { border-top: 1px solid rgba(241,238,231,.25); }
.venue-space-list article { display: grid; grid-template-columns: 36px 1fr; gap: 28px; padding: 31px 0; border-bottom: 1px solid rgba(241,238,231,.18); }
.venue-space-list article > span { padding-top: 6px; color: rgba(241,238,231,.55); font-size: 9px; }
.venue-space-list h3 { font-size: clamp(25px, 2.8vw, 36px); }
.venue-space-list p { margin: 10px 0 0; color: rgba(241,238,231,.68); font-size: 15px; line-height: 1.65; }

.creative-legacy { padding-top: clamp(100px, 12vw, 155px); }
.creative-legacy-heading { display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px clamp(42px, 6vw, 88px); align-items: end; }
.creative-legacy-heading .eyebrow { grid-column: 1 / -1; }
.creative-legacy-heading h2 { max-width: 11ch; font-size: clamp(48px, 5.6vw, 76px); line-height: .98; }
.creative-legacy-heading > p:last-child { max-width: 38ch; margin: 0 0 .35em; color: var(--cream-dim); font-size: 17px; line-height: 1.72; }
.film-legacy { margin-top: clamp(48px, 6vw, 76px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(45px, 8vw, 120px); align-items: center; background: var(--ground-deep); color: #f1eee7; }
.film-legacy figure { margin: 0; min-height: 560px; overflow: hidden; }
.film-legacy img { width: 100%; height: 100%; object-fit: cover; }
.film-legacy > div { padding: 60px clamp(35px, 6vw, 85px) 60px 0; }
.film-legacy .eyebrow { color: rgba(241,238,231,.62); }
.film-legacy h3 { margin-top: 14px; font-size: clamp(38px, 5vw, 68px); line-height: 1; }
.film-legacy p:last-child { margin: 27px 0 0; color: rgba(241,238,231,.72); font-size: 17px; line-height: 1.72; }
.editorial-story { margin-top: clamp(100px, 13vw, 170px); }
.editorial-story-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 15px clamp(50px, 9vw, 130px); align-items: end; }
.editorial-story-copy .eyebrow { grid-column: 1 / -1; }
.editorial-story-copy h3 { font-size: clamp(42px, 5vw, 70px); line-height: 1.02; }
.editorial-story-copy > p:last-child { margin: 0; color: var(--cream-dim); font-size: 17px; line-height: 1.72; }
.editorial-gallery-feature { margin-top: 55px; background: #211d18; }
.editorial-gallery-feature .gallery-slide { background: #211d18; }
.editorial-slide-button { padding: 0; border: 0; cursor: zoom-in; }
.editorial-slide-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.editorial-lightbox { width: min(92vw, 980px); max-width: none; height: min(92vh, 980px); max-height: none; padding: 42px; border: 0; background: #171512; color: #f1eee7; overflow: hidden; }
.editorial-lightbox::backdrop { background: rgba(12,11,9,.86); backdrop-filter: blur(4px); }
.editorial-lightbox img { display: block; width: 100%; height: 100%; object-fit: contain; }
.editorial-lightbox-close { position: absolute; z-index: 1; top: 12px; right: 14px; padding: 8px 10px; border: 0; background: #f1eee7; color: #171512; font-size: 9px; letter-spacing: .1em; cursor: pointer; }

.station-story-feature {
  position: relative; z-index: 0; margin-top: clamp(105px, 13vw, 175px);
  padding-top: clamp(85px, 10vw, 130px); padding-bottom: clamp(85px, 10vw, 130px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 9vw, 130px); align-items: center;
}
.station-story-feature::before {
  content: ""; position: absolute; z-index: -1; inset-block: 0; left: 50%;
  width: 100vw; transform: translateX(-50%); background: #e5ded2;
}
.station-story-feature figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.station-story-feature img { width: 100%; height: 100%; object-fit: cover; }
.station-story-feature h2 { font-size: clamp(42px, 5.2vw, 72px); line-height: 1.02; }
.station-story-feature > div > p:not(.eyebrow) { margin: 27px 0 0; color: var(--cream-dim); font-size: 17px; line-height: 1.72; }
.station-story-feature .text-link { margin-top: 31px; }

.arts-programme {
  margin-top: 0; padding: clamp(80px, 10vw, 125px) clamp(38px, 7vw, 92px);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(55px, 9vw, 125px);
  align-items: end; background: #d8d0c2; color: #25261f; text-align: left;
}
.arts-programme h2 { max-width: 9em; margin: 15px 0 0; font-size: clamp(43px, 5.4vw, 70px); line-height: 1; }
.arts-programme-action > p { max-width: 54ch; margin: 0 0 34px; color: #625d53; font-size: 18px; line-height: 1.72; }
.arts-programme-action > div { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Quiet editorial rules keep the long-form page visually paced. */
.creative-legacy,
.station-story-feature,
.arts-programme { border-top: 1px solid rgba(122, 86, 26, .22); }

.footer-brand { display: inline-flex !important; align-items: center; gap: 16px; margin-bottom: 20px !important; color: #f3eada !important; }
.footer-brand :is(img, svg) { width: 92px; height: 92px; object-fit: contain; }

/* Weddings — a focused subpage within Arts & Events. */
.wedding-hero .story-hero-media img { object-position: 50% 52%; }
.wedding-hero-copy { max-width: 900px; }
.wedding-hero-copy h1 { max-width: 10em; }
.wedding-intro { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
.wedding-intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.wedding-intro-grid h2 { font-size: clamp(46px, 6vw, 82px); line-height: 1; }
.wedding-intro-grid p { margin: 0; color: var(--cream-dim); font-size: 18px; line-height: 1.75; }
.wedding-intro-grid p + p { margin-top: 24px; }
.wedding-gallery { padding-bottom: clamp(64px, 8vw, 110px); }
.wedding-gallery-more { margin-top: 28px; }
.wedding-gallery-more > summary { width: fit-content; cursor: pointer; font-family: var(--face-sign); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.wedding-gallery-more[open] > summary { margin-bottom: 24px; }
.wedding-gallery-more .wedding-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(240px, 28vw, 400px); }
.wedding-gallery-more .wedding-gallery-wide { grid-column: auto; }
.wedding-gallery-grid { display: grid; grid-template-columns: 1.1fr .9fr; grid-auto-rows: clamp(330px, 38vw, 570px); gap: 22px; }
.wedding-gallery-grid figure { margin: 0; overflow: hidden; }
.wedding-gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
.wedding-gallery-wide { grid-column: 1 / -1; }
.wedding-gallery-tall { grid-row: span 2; }
.wedding-details { padding: clamp(64px, 8vw, 110px) 0; background: var(--ground-deep); color: #f1eee7; }
.wedding-details-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px, 10vw, 145px); align-items: start; }
.wedding-details .eyebrow { color: rgba(241,238,231,.62); }
.wedding-details h2 { font-size: clamp(42px, 5.5vw, 74px); line-height: 1; }
.wedding-details-grid > div:first-child > p:last-child { margin: 27px 0 0; color: rgba(241,238,231,.7); font-size: 17px; line-height: 1.72; }
.wedding-detail-list { border-top: 1px solid rgba(241,238,231,.25); }
.wedding-detail-list article { display: grid; grid-template-columns: 36px 1fr; gap: 28px; padding: 31px 0; border-bottom: 1px solid rgba(241,238,231,.18); }
.wedding-detail-list article > span { padding-top: 6px; color: rgba(241,238,231,.55); font-size: 9px; }
.wedding-detail-list h3 { font-size: clamp(25px, 2.8vw, 36px); }
.wedding-detail-list p { margin: 10px 0 0; color: rgba(241,238,231,.68); font-size: 15px; line-height: 1.65; }
.wedding-enquiry { margin-top: clamp(64px, 8vw, 110px); padding: clamp(75px, 10vw, 125px); background: #ded9cf; text-align: center; }
.wedding-enquiry h2 { max-width: 11em; margin: 15px auto 0; font-size: clamp(43px, 6vw, 78px); line-height: 1; }
.wedding-enquiry > p:not(.eyebrow) { max-width: 58ch; margin: 28px auto 35px; color: var(--cream-dim); font-size: 17px; line-height: 1.72; }
.wedding-enquiry > div { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.wedding-enquiry .btn-brass { background: var(--ground-deep); color: #f1eee7; }

@media (max-width: 820px) {
  .arts-overview, .arts-intro-grid, .venue-spaces-grid, .station-story-feature, .creative-legacy-heading, .film-legacy, .editorial-story-copy, .wedding-intro-grid, .wedding-details-grid { grid-template-columns: 1fr; }
  .arts-overview-image { grid-row: 1; height: min(118vw, 720px); }
  .arts-overview-copy { grid-row: 2; }
  .arts-path-grid { grid-template-columns: 1fr; gap: 35px; }
  .arts-path-grid article { display: grid; grid-template-columns: .9fr 1.1fr; }
  .arts-path-grid figure { aspect-ratio: 1 / 1; }
  .film-legacy figure { min-height: 0; aspect-ratio: 4 / 3; }
  .film-legacy > div { padding: 45px; }
  .wedding-gallery-grid { grid-auto-rows: minmax(280px, 70vw); }
}

@media (max-width: 560px) {
  .arts-path-grid article { grid-template-columns: 1fr; }
  .arts-path-grid figure { aspect-ratio: 4 / 5; }
  .venue-space-list article { grid-template-columns: 28px 1fr; gap: 18px; }
  .arts-programme { margin-inline: 0; padding-inline: 22px; text-align: left; }
  .arts-programme h2, .arts-programme > p:not(.eyebrow) { margin-left: 0; margin-right: 0; }
  .arts-programme > div { justify-content: flex-start; }
  .film-legacy { margin-inline: 0; }
  .film-legacy > div { padding: 38px 22px 46px; }
  .editorial-gallery-feature { margin-right: 0; }
  .editorial-lightbox { width: 94vw; height: 88vh; padding: 34px 12px 12px; }
  .wedding-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .wedding-gallery-grid figure, .wedding-gallery-wide, .wedding-gallery-tall { grid-column: 1; grid-row: auto; aspect-ratio: auto; }
  .wedding-gallery-grid img { height: auto; display: block; }
  .wedding-gallery-more .wedding-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .wedding-enquiry { margin-inline: 0; padding-inline: 22px; text-align: left; }
  .wedding-enquiry h2, .wedding-enquiry > p:not(.eyebrow) { margin-left: 0; margin-right: 0; }
  .wedding-enquiry > div { justify-content: flex-start; }
}

/* Venues — a catalogue of the distinct spaces within Grand Central. */
.venues-hero .story-hero-media img { object-position: 50% 42%; }
.venues-hero-copy { max-width: 900px; }
.venues-hero-copy h1 { max-width: 9.5em; }
.venues-hero-copy .hero-actions { margin-top: 30px; }
.venues-intro { padding-top: clamp(105px, 14vw, 190px); padding-bottom: clamp(105px, 14vw, 180px); }
.venues-intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.venues-intro-grid h2 { font-size: clamp(46px, 6vw, 82px); line-height: 1; }
.venues-intro-grid p { margin: 0; color: var(--cream-dim); font-size: 18px; line-height: 1.75; }
.venues-intro-grid p + p { margin-top: 24px; }
.venue-catalogue { padding-bottom: clamp(110px, 15vw, 200px); }
.venue-catalogue-heading { margin-bottom: clamp(50px, 7vw, 85px); }
.venue-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 58px); }
.venue-card { display: flex; min-width: 0; flex-direction: column; background: var(--ground-lift); }
.venue-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #ded9cf; }
.venue-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.venue-card:nth-child(2) img { object-position: 50% 28%; }
.venue-card:nth-child(3) img { object-position: center; }
.venue-card > div { display: flex; flex: 1; flex-direction: column; padding: clamp(32px, 4vw, 54px); }
.venue-card h3 { margin-top: 13px; font-size: clamp(35px, 4vw, 52px); line-height: 1.02; }
.venue-card > div > p:not(.eyebrow) { margin: 23px 0 0; color: var(--cream-dim); font-size: 16px; line-height: 1.7; }
.venue-card ul { margin: 29px 0 0; padding: 25px 0 0; border-top: 1px solid var(--rule-soft); list-style: none; }
.venue-card li { position: relative; padding-left: 25px; color: var(--cream-dim); font-size: 14px; line-height: 1.6; }
.venue-card li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
.venue-card li + li { margin-top: 8px; }
.venue-card .text-link { margin-top: auto; padding-top: 28px; }
.venue-services { padding: clamp(90px, 12vw, 165px) 0; background: var(--ground-deep); color: #f1eee7; }
.venue-services-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px, 10vw, 145px); align-items: start; }
.venue-services-copy .eyebrow { color: rgba(241,238,231,.62); }
.venue-services-copy h2 { font-size: clamp(42px, 5.5vw, 74px); line-height: 1; }
.venue-services-copy > p:not(.eyebrow) { margin: 27px 0 0; color: rgba(241,238,231,.7); font-size: 17px; line-height: 1.72; }
.venue-service-list { border-top: 1px solid rgba(241,238,231,.25); }
.venue-service-list article { display: grid; grid-template-columns: 36px 1fr; gap: 28px; padding: 31px 0; border-bottom: 1px solid rgba(241,238,231,.18); }
.venue-service-list article > span { padding-top: 6px; color: rgba(241,238,231,.55); font-size: 9px; }
.venue-service-list h3 { font-size: clamp(25px, 2.8vw, 36px); }
.venue-service-list p { margin: 10px 0 0; color: rgba(241,238,231,.68); font-size: 15px; line-height: 1.65; }
.venue-enquiry { margin-top: clamp(100px, 14vw, 190px); padding: clamp(75px, 10vw, 125px); background: #ded9cf; text-align: center; }
.venue-enquiry h2 { max-width: 11em; margin: 15px auto 0; font-size: clamp(43px, 6vw, 78px); line-height: 1; }
.venue-enquiry > p:not(.eyebrow) { max-width: 58ch; margin: 28px auto 35px; color: var(--cream-dim); font-size: 17px; line-height: 1.72; }
.venue-enquiry > div { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.venue-enquiry .btn-brass { background: var(--ground-deep); color: #f1eee7; }

.enquiry-form {
  width: min(100%, 900px); margin: clamp(38px, 6vw, 62px) auto 0;
  padding: clamp(28px, 5vw, 54px); border: 1px solid rgba(122,86,26,.22);
  background: rgba(250,247,241,.72); color: #25261f; text-align: left;
}
.venue-enquiry .enquiry-handler,
.wedding-enquiry .enquiry-handler {
  max-width: 64ch; margin: -18px auto 0; color: #625d53; font-size: 14px; line-height: 1.6;
}
.enquiry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 28px; }
.enquiry-field { min-width: 0; }
.enquiry-field-wide { grid-column: 1 / -1; }
.enquiry-field label,
.enquiry-field legend {
  display: block; margin: 0 0 9px; color: #4d453b;
  font: 600 10px/1.3 var(--face-sign); letter-spacing: .1em; text-transform: uppercase;
}
.enquiry-field input:not([type="checkbox"]),
.enquiry-field select,
.enquiry-field textarea {
  width: 100%; min-height: 48px; padding: 12px 13px; border: 1px solid rgba(69,55,44,.34);
  border-radius: 0; background: #fffdf9; color: #25261f; font: inherit;
}
.enquiry-field textarea { min-height: 132px; resize: vertical; }
.enquiry-field input:focus-visible,
.enquiry-field select:focus-visible,
.enquiry-field textarea:focus-visible,
.enquiry-check input:focus-visible { outline: 3px solid #9b5a3e; outline-offset: 2px; }
.enquiry-check { display: flex; align-items: flex-start; gap: 11px; }
.enquiry-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cta); }
.enquiry-check label { margin: 0; font: 15px/1.55 var(--face-read); letter-spacing: 0; text-transform: none; }
.enquiry-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.enquiry-note { max-width: 52ch; margin: 0; color: #625d53; font-size: 13px; line-height: 1.55; }
.enquiry-status { min-height: 1.5em; margin: 18px 0 0; color: #625d53; font-size: 14px; }

@media (max-width: 820px) {
  .venues-intro-grid, .venue-services-grid { grid-template-columns: 1fr; }
  .venue-card-grid { grid-template-columns: 1fr; }
  .venue-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .venue-card figure { height: 100%; min-height: 410px; aspect-ratio: auto; }
}

@media (max-width: 560px) {
  .enquiry-grid { grid-template-columns: 1fr; }
  .enquiry-field-wide { grid-column: auto; }
  .enquiry-form { padding: 28px 20px; }
  .venue-card { display: flex; }
  .venue-card figure { min-height: 0; aspect-ratio: 4 / 3; }
  .venue-service-list article { grid-template-columns: 28px 1fr; gap: 18px; }
  .venue-enquiry { margin-inline: 0; padding-inline: 22px; text-align: left; }
  .venue-enquiry h2, .venue-enquiry > p:not(.eyebrow) { margin-left: 0; margin-right: 0; }
  .venue-enquiry > div { justify-content: flex-start; }
}

/* Individual venue pages — one calm, consistent planning template. */
.venue-detail-hero .story-hero-media img { object-position: center; }
.venue-detail-hero-copy { max-width: 900px; }
.venue-detail-hero-copy h1 { max-width: 10em; }
.venue-detail-intro { padding-top: clamp(100px, 14vw, 190px); padding-bottom: clamp(100px, 14vw, 180px); display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.venue-detail-intro h2 { margin-top: 14px; font-size: clamp(46px, 6vw, 82px); line-height: 1; }
.venue-detail-intro > div:last-child p { margin: 0; color: var(--cream-dim); font-size: 18px; line-height: 1.75; }
.venue-detail-intro > div:last-child p + p { margin-top: 24px; }
.venue-context-link { margin-top: 30px; }
.wedding-detail-list .text-link { margin-top: 18px; border-color: rgba(241,238,231,.3); }
.venue-detail-use { padding: clamp(90px, 12vw, 155px) 0; background: var(--ground-deep); color: #f1eee7; }
.venue-detail-use-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px, 10vw, 145px); align-items: start; }
.venue-detail-use .eyebrow { color: rgba(241,238,231,.62); }
.venue-detail-use h2 { margin-top: 14px; font-size: clamp(42px, 5.5vw, 72px); line-height: 1; }
.venue-detail-use ul { margin: 0; padding: 0; border-top: 1px solid rgba(241,238,231,.25); list-style: none; }
.venue-detail-use li { padding: 20px 0; border-bottom: 1px solid rgba(241,238,231,.18); color: rgba(241,238,231,.76); font-size: 17px; }
.venue-detail-gallery { padding-top: clamp(110px, 15vw, 195px); }
.venue-detail-gallery header { display: grid; grid-template-columns: .78fr 1.22fr; gap: 18px clamp(50px, 9vw, 130px); align-items: end; }
.venue-detail-gallery header .eyebrow { grid-column: 1 / -1; }
.venue-detail-gallery header h2 { max-width: 12em; font-size: clamp(46px, 6vw, 80px); line-height: 1; }
.venue-detail-gallery-grid { margin-top: clamp(48px, 7vw, 82px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.venue-detail-gallery-grid figure { margin: 0; min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground-lift); }
.venue-detail-gallery-grid figure.wide { aspect-ratio: 16 / 9; }
.venue-detail-gallery-grid figure.tall { aspect-ratio: 3 / 4; }
.venue-detail-gallery-grid figure.wide { grid-column: 1 / -1; }
.venue-detail-gallery-grid figure.tall { grid-row: span 2; }
.venue-detail-gallery-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.venue-gallery-triptych {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 20px; aspect-ratio: 3 / 2;
}
.venue-gallery-triptych > figure,
.venue-gallery-triptych > figure.tall { aspect-ratio: auto; min-height: 0; height: 100%; }
.venue-gallery-triptych > figure:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.venue-gallery-triptych > figure:nth-child(2) { grid-column: 2; grid-row: 1; }
.venue-gallery-triptych > figure:nth-child(3) { grid-column: 2; grid-row: 2; }
.venue-detail-enquiry { margin-top: clamp(100px, 14vw, 190px); padding: clamp(75px, 10vw, 125px); background: #ded9cf; color: #241813; text-align: center; }
.venue-detail-enquiry .eyebrow { color: #7a561a; }
.venue-detail-enquiry h2 { max-width: 12em; margin: 15px auto 0; font-size: clamp(43px, 6vw, 78px); line-height: 1; }
.venue-detail-enquiry > p:not(.eyebrow) { max-width: 58ch; margin: 28px auto 35px; color: #5e4a3c; font-size: 17px; line-height: 1.72; }
.venue-detail-enquiry > div { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
/* The wedding enquiry sets the spacing for all closing enquiry actions. */
.wedding-enquiry > div,
.venue-enquiry > div,
.venue-detail-enquiry > div,
.arts-programme-action > div { margin-top: 24px; gap: 28px; }
.venue-detail-enquiry > p:not(.eyebrow),
.arts-programme-action > p { margin-bottom: 0; }
.venue-detail-enquiry .btn-brass { background: #241813; color: #f3eada; }
.venue-detail-enquiry .text-link { border-color: rgba(36,24,19,.3); }
.venue-detail-footer { margin-top: 80px; padding-top: 36px; padding-bottom: 36px; border-top: 1px solid var(--rule-soft); display: flex; justify-content: space-between; gap: 24px; color: var(--cream-dim); font-family: var(--face-sign); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 820px) {
  .venue-detail-intro, .venue-detail-use-grid, .venue-detail-gallery header { grid-template-columns: 1fr; }
  .venue-detail-gallery-grid figure { min-height: 330px; }
  .venue-gallery-triptych > figure { min-height: 0; }
}
@media (max-width: 560px) {
  .venue-detail-gallery-grid { grid-template-columns: 1fr; gap: 12px; }
  .venue-gallery-triptych { display: contents; }
  .venue-gallery-triptych > figure:nth-child(n) { grid-column: 1; grid-row: auto; height: auto; aspect-ratio: 4 / 3; }
  .venue-detail-gallery-grid figure, .venue-detail-gallery-grid figure.wide, .venue-detail-gallery-grid figure.tall { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .venue-detail-enquiry { margin-inline: 0; padding-inline: 22px; text-align: left; }
  .venue-detail-enquiry h2, .venue-detail-enquiry > p:not(.eyebrow) { margin-left: 0; margin-right: 0; }
  .venue-detail-enquiry > div { justify-content: flex-start; }
  .venue-detail-footer { flex-direction: column; }
}

/* 2026 refinement pass: clearer hierarchy, roomier navigation and one CTA voice. */
.arts-page { overflow-x: clip; }
.btn-brass,
.hero-actions .btn-brass,
.masthead .btn-brass,
.arts-programme .btn-brass,
.wedding-enquiry .btn-brass,
.venue-enquiry .btn-brass,
.venue-detail-enquiry .btn-brass,
.direct-booking .btn-brass {
  background: var(--cta); color: var(--cta-ink); border-color: var(--cta);
  box-shadow: 0 5px 18px rgba(83, 35, 23, .16);
}
.btn-brass:hover,
.hero-actions .btn-brass:hover,
.masthead .btn-brass:hover,
.arts-programme .btn-brass:hover,
.wedding-enquiry .btn-brass:hover,
.venue-enquiry .btn-brass:hover,
.venue-detail-enquiry .btn-brass:hover,
.direct-booking .btn-brass:hover {
  background: var(--cta-hover); color: var(--cta-ink); border-color: var(--cta-hover);
}

.masthead { justify-content: flex-start; gap: clamp(22px, 3vw, 48px); padding-block: 24px; }
.nameplate { flex: 0 0 auto; }
.nameplate-mark { width: 72px; height: 72px; }
.nameplate strong { font-size: 18px; }
.masthead .wayfind { margin-left: auto; gap: clamp(20px, 2.4vw, 34px); font-size: 12px; }
.masthead > .hero-actions { flex: 0 0 auto; flex-wrap: nowrap; }
.masthead .btn { padding: 13px 20px; }

.hero-copy h1 { font-size: clamp(54px, 6.8vw, 92px); max-width: 10.5em; }
.story-hero-copy h1 { font-size: clamp(50px, 6.8vw, 92px); }

@media (max-width: 1320px) {
  .masthead .callnow { display: none; }
}

@media (max-width: 1040px) {
  .masthead { flex-wrap: wrap; row-gap: 16px; }
  .masthead > .hero-actions { margin-left: auto; }
  .masthead .wayfind {
    order: 3; display: flex; width: 100%; margin-left: 0; padding-top: 13px;
    border-top: 1px solid rgba(243,234,218,.16); justify-content: space-between;
  }
}

@media (max-width: 820px) {
  .arts-path-grid { grid-template-columns: 1fr; gap: 38px; }
  .arts-path-grid article:nth-child(1),
  .arts-path-grid article:nth-child(2),
  .arts-path-grid article:nth-child(3) {
    grid-column: 1; margin-top: 0; display: grid; grid-template-columns: .9fr 1.1fr;
  }
  .arts-path-grid article:nth-child(n) figure { min-height: 360px; height: 100%; aspect-ratio: auto; }
  .arts-programme { grid-template-columns: 1fr; gap: 35px; }
  .arts-programme h2 { max-width: 11em; }
}

@media (max-width: 560px) {
  .masthead { padding-block: 18px; }
  .masthead .wayfind { display: none; }
  .masthead > .hero-actions .btn { padding: 11px 13px; font-size: 8px; }
  .story-hero-copy h1 { font-size: clamp(46px, 14vw, 66px); }
  .arts-hero-actions { gap: 9px; }
  .arts-hero-actions .btn { width: 100%; }
  .arts-paths { padding-top: 72px; }
  .arts-path-grid article:nth-child(1),
  .arts-path-grid article:nth-child(2),
  .arts-path-grid article:nth-child(3) { display: block; }
  .arts-path-grid article:nth-child(n) figure { min-height: 0; aspect-ratio: 4 / 3; }
  .arts-programme { margin-inline: 0; padding: 68px 22px; }
  .creative-legacy-heading { gap: 24px; }
  .creative-legacy-heading h2 { max-width: 10ch; }
}

/* One mobile booking action, with space for phone safe areas and the page footer. */
.home-page main > section { padding-top: clamp(52px, 6vw, 88px); }
.home-page .section-heading { margin-bottom: 32px; }
.home-page .quick-facts { margin-top: 32px; }
.home-page .stay-feature figure { height: min(68vw, 520px); }
.home-page .stay-copy { padding: clamp(28px, 4vw, 56px); }
.home-discoveries { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 64px; }
.home-discoveries .heritage-overview, .home-discoveries .arts-overview {
  display: flex; flex-direction: column; padding: 28px; background: var(--ground-lift); min-width: 0;
}
.home-discoveries .heritage-copy, .home-discoveries .arts-overview-copy { display: flex; flex-direction: column; flex: 1; }
.home-discoveries .text-link { align-self: flex-start; margin-top: auto; padding-top: 31px; }
.home-discoveries h2 { font-size: clamp(30px, 3vw, 42px); }
.home-discoveries .arts-overview-copy { padding: 0; }
.home-page .dining-copy, .home-page .getting-intro { margin-bottom: 28px; }
.home-page .location-art { margin-top: 32px; max-width: 820px; margin-inline: auto; }
.home-page .location-grid h3 { margin-top: 16px; }
.home-page footer { margin-top: 64px; }
.arrival-details { border-block: 1px solid var(--rule); }
.arrival-details > summary { cursor: pointer; padding: 20px 0; min-height: 48px; font-size: 19px; }
@media (max-width: 650px) {
  .home-discoveries { grid-template-columns: 1fr; padding-top: 52px; }
  .home-page .quick-facts { grid-template-columns: 1fr 1fr; }
  .home-page .quick-facts div { padding: 18px 12px; }
  .home-page .quick-facts div:nth-child(odd) { border-left: 0; }
}
.mobile-book { display: none; }
.hotel-email { overflow-wrap: anywhere; text-transform: none; letter-spacing: normal; }
.hotel-email span { display: block; }
.hotel-email .email-label { font-weight: 600; }
footer .hotel-email { display: block; padding-block: 8px; font-size: 14px; line-height: 1.6; }
.hotel-contact { display: flex; flex-wrap: wrap; gap: 12px 40px; width: 100%; }
.venue-detail-footer { flex-wrap: wrap; }
@media (max-width: 650px) {
  .foot-grid > div:last-child { grid-column: 1 / -1; }
  .masthead, .pagehead { column-gap: 12px; padding-block: 16px; }
  .masthead .nameplate, .pagehead .nameplate { gap: 8px; min-width: 0; }
  .masthead .nameplate strong, .pagehead .nameplate strong {
    font-size: clamp(14px, 4vw, 17px); line-height: 1.3; letter-spacing: .08em;
  }
  .nameplate .brand-building {
    width: 64px; height: 18px;
  }
  .nameplate .brand-building img { width: 64px; }
  .nameplate-place { font-size: 9px; }
  .menu-toggle { min-width: 80px; min-height: 44px; padding: 10px; }
  .masthead .wayfind { background: rgba(21,14,12,.92); padding: 0 14px; }
  .masthead .wayfind a, .pagehead .wayfind a { min-height: 48px; }
  .masthead > .hero-actions .btn, .pagehead > .hero-actions .btn { font-size: 11px; }
  .btn { min-height: 48px; font-size: 11px; }
  .text-link, footer a, main a[href^="tel:"]:not(.btn) {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px;
  }
  body.has-mobile-booking, body:has(> .mobile-book) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .has-mobile-booking .masthead > .hero-actions,
  .has-mobile-booking .pagehead > .hero-actions,
  .has-mobile-booking .pagehead > .btn,
  .has-mobile-booking .rooms-hero-copy > .btn-brass { display: none; }
  .mobile-book {
    display: flex; position: fixed; z-index: 30; justify-content: center;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    min-height: 48px; text-align: center; box-shadow: 0 5px 24px rgba(0,0,0,.22);
  }
  .mobile-book.is-at-booking { visibility: hidden; }
  body:has(> .mobile-book) .room-detail-book { display: none; }
}

.hero-inner.page { width: 100%; }
/* Shared header geometry across hotel, arts and venue pages. */
.hero-inner .masthead, .story-hero .masthead, header.pagehead { padding-block: 24px; }
.masthead .nameplate, .pagehead .nameplate { gap: 13px; }
.masthead .nameplate strong, .pagehead .nameplate strong {
  font-size: 18px; line-height: 1.3; letter-spacing: .08em;
}
.masthead .wayfind, .pagehead .wayfind { font-size: 12px; gap: 18px; }
.masthead .wayfind a, .pagehead .wayfind a { white-space: nowrap; }
.masthead .btn, .pagehead .btn { padding: 13px 20px; font-size: 11px; }
@media (min-width: 821px) {
  .hero-inner .masthead, .story-hero .masthead, header.pagehead {
    display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; justify-content: normal; width: 100%;
    align-items: center; gap: 20px; flex-wrap: nowrap; min-height: 94px;
  }
  .masthead .wayfind, .pagehead .wayfind {
    order: initial; width: auto; margin: 0; padding: 0; border-top: 0;
    justify-content: flex-start;
  }
  .masthead > .hero-actions, .pagehead > .hero-actions {
    margin: 0; gap: 16px; flex-wrap: nowrap;
  }
}
@media (min-width: 821px) and (max-width: 1280px) {
  .hero-inner .masthead, .story-hero .masthead, header.pagehead { grid-template-columns: minmax(0, 1fr) auto; row-gap: 16px; }
  .masthead .wayfind, .pagehead .wayfind {
    grid-column: 1 / -1; grid-row: 2; justify-content: space-between;
  }
  .masthead > .hero-actions, .pagehead > .hero-actions,
  .masthead > .btn, .pagehead > .btn { grid-column: 2; grid-row: 1; }
  .masthead .callnow, .pagehead .callnow { display: none; }
}
@media (max-width: 820px) {
  .hero-inner .masthead, .story-hero .masthead, header.pagehead { padding-block: 16px; }
  .masthead .nameplate, .pagehead .nameplate { gap: 8px; }
  .masthead .nameplate strong, .pagehead .nameplate strong { font-size: clamp(14px, 4vw, 17px); }
  .masthead .wayfind, .pagehead .wayfind { gap: 0; margin: 0; padding-inline: 14px; }
  .masthead .wayfind a, .pagehead .wayfind a { min-height: 48px; padding-block: 13px; }
}

/* Keep pre-booking guest information visibly linked. */
.booking-handoff a, .direct-booking > p a { text-decoration: none; }

/* Homepage room choices, immediately after the booking window. */
.home-page .hero-copy .hero-kicker { font-size: 12px; line-height: 1.6; }
.home-room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-room-card { display: flex; flex-direction: column; background: var(--ground-lift); min-width: 0; }
.home-room-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.home-room-card picture, .home-room-card img { display: block; width: 100%; height: 100%; }
.home-room-card img { object-fit: cover; }
.home-room-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: clamp(22px, 2.4vw, 34px); }
.home-room-copy .eyebrow { font-size: 11px; line-height: 1.6; letter-spacing: .08em; margin-bottom: 12px; }
.home-room-copy h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; margin: 0 0 24px; }
.home-room-copy .btn { margin-top: auto; }
.home-room-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; width: 100%; }
.home-room-actions .btn { margin-top: 0; }
@media (max-width: 820px) {
  .home-room-grid { grid-template-columns: 1fr; }
  .home-room-copy { padding: 24px; }
}

/* Keep arrival essentials on the homepage; detailed guidance has its own page. */
.home-arrival { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 32px; padding-block: 28px; border-block: 1px solid var(--rule); }
.home-arrival h3 { margin: 0 0 12px; font-size: 28px; }
.home-arrival p { max-width: 65ch; margin: 0; color: var(--cream-dim); font-size: 16px; line-height: 1.7; }
.home-arrival-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.directions-arrow-mobile { display: none; }
@media (max-width: 650px) {
  .directions-arrow-desktop { display: none; }
  .directions-arrow-mobile { display: inline-block; width: 1em; height: 1em; vertical-align: -.1em; }
}
.guest-info-link { margin: 28px 0 0; }
.guest-info-intro { padding-top: clamp(40px, 6vw, 80px); }
.guest-information-page .pagehead { border-bottom: 1px solid var(--rule); }
.guest-information-page .pagehead .wayfind { color: var(--cream-dim); }
.guest-information-page .pagehead .wayfind a:hover { color: var(--cream); }
.guest-information-page .pagehead .callnow { color: var(--cream-dim); border-bottom-color: var(--rule); }
.guest-info-intro h1 { margin: 0 0 24px; font-size: clamp(44px, 6vw, 76px); line-height: 1.08; }
.guest-info-intro > p:not(.eyebrow) { max-width: 65ch; color: var(--cream-dim); font-size: 18px; line-height: 1.7; }
.guest-info-navigation { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.guest-information-page main > section:not(.guest-info-intro) { padding-top: clamp(48px, 6vw, 80px); }
.guest-information-page .section-heading { margin-bottom: 28px; }
.guest-information-page .getting-intro { text-align: left; margin: 0 0 28px; }
.guest-information-page .getting-intro > p:last-child { margin-left: 0; }
.guest-information-page .getting-intro h2, .guest-information-page .section-heading h2 { font-size: clamp(34px, 4vw, 52px); }
.guest-information-page footer { margin-top: 64px; }
@media (max-width: 820px) {
  .home-arrival { grid-template-columns: 1fr; gap: 24px; }
}

/* Practical room benefits and clearly attributed guest-review excerpts. */
.home-room-benefits { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: -8px 0 28px; padding: 0; color: var(--cream-dim); font-size: 15px; }
.home-room-benefits li::before { content: "✓"; margin-right: 9px; color: var(--brass); }
.home-guest-reviews { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px 32px; margin-top: 32px; padding-block: 28px; border-block: 1px solid var(--rule); }
.home-review-heading h3 { font-size: 28px; line-height: 1.15; margin: 0 0 20px; }
.home-review-heading .eyebrow { margin-bottom: 12px; }
.home-review-score { display: flex; align-items: center; gap: 14px; margin: 0; }
.home-review-score strong { font-family: var(--face-display); font-size: 40px; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; }
.home-review-score strong span { font-size: 16px; }
.home-review-score > span { color: var(--cream-dim); font-size: 14px; line-height: 1.6; }
.home-review-quote { margin: 0; padding-left: 28px; border-left: 1px solid var(--rule); }
.home-review-quote blockquote { margin: 0 0 18px; }
.home-review-quote blockquote p { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; }
.home-review-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 16px; color: var(--cream); }
.home-review-rating strong { font-family: var(--face-display); font-size: 22px; font-weight: 400; font-variant-numeric: lining-nums proportional-nums; }
.home-review-rating strong span { font-size: 14px; }
.home-review-rating > span { color: var(--cream-dim); font-size: 14px; font-family: var(--face-read); }
.home-review-quote blockquote .home-review-excerpt { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--cream-dim); }
.home-review-quote figcaption { color: var(--cream-dim); font-size: 14px; line-height: 1.6; }
.home-review-source { grid-column: 1 / -1; margin: 0; color: var(--cream-dim); font-size: 13px; line-height: 1.7; }
.home-review-source a { text-decoration: none; }
@media (max-width: 820px) {
  .home-room-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; font-size: 14px; }
  .home-guest-reviews { grid-template-columns: 1fr; }
  .home-review-quote { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* Shorter mobile heroes bring the next useful section into view sooner. */
@media (max-width: 820px) {
  .hero { min-height: min(70svh, 620px); }
  .story-hero { min-height: min(68svh, 600px); }
  .hero-copy, .story-hero-copy { padding: 48px 0 36px; }
  .hero-copy h1 { font-size: clamp(42px, 12vw, 56px); line-height: 1; margin-bottom: 22px; }
  .story-hero-copy h1 { font-size: clamp(40px, 11vw, 56px); line-height: 1.04; }
  .hero-copy p { margin-bottom: 22px; }
  .story-hero-copy > p:last-child,
  .story-hero-copy > p:last-of-type,
  .story-hero-copy > .story-hero-summary { margin-top: 20px; font-size: 16px; }
  .venues-hero-copy .hero-actions { margin-top: 22px; }
}

/* Readable navigation, action labels and section markers. */
.masthead .wayfind, .pagehead .wayfind { font-size: 13px; letter-spacing: .06em; }
.btn, .masthead .btn, .pagehead .btn,
.masthead > .hero-actions .btn, .pagehead > .hero-actions .btn { font-size: 12px; letter-spacing: .07em; min-height: 48px; }
.ticket-window .btn { height: auto; min-height: 48px; }

/* Readable dates over the native, accessible calendar controls. */
.booking-stay-summary {
  grid-column: 1 / -1;
  margin: 0 0 -12px;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.5;
}
.booking-date-control { position: relative; min-width: 0; }
.booking-date-display,
.ticket-window .field select {
  display: block;
  padding: 7px 28px 7px 1px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--face-read);
  font-size: 20px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.booking-date-display::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 2v6M16 2v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ticket-window .field select { height: 43px; }
.field .booking-date-control input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.booking-date-control:focus-within {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}
@media (max-width: 820px) {
  .booking-date-display { padding-top: 13px; padding-bottom: 13px; }
  .ticket-window .field select { height: 55px; }
}
.text-link { font-size: 12px; letter-spacing: .06em; }
.eyebrow, .story-hero-copy .hero-kicker { font-size: 12px; letter-spacing: .1em; line-height: 1.6; }
.home-room-copy .eyebrow { font-size: 12px; }
.field label { font-size: 12px; letter-spacing: .08em; }
.enquiry-field label, .enquiry-field legend { font-size: 12px; letter-spacing: .08em; }
.caption, .venue-detail-footer { font-size: 13px; }
.menu-toggle { font-size: 12px; letter-spacing: .08em; }
@media (min-width: 1281px) {
  .masthead .wayfind, .pagehead .wayfind { justify-content: center; margin-left: 0; }
}
@media (max-width: 820px) {
  .masthead .wayfind, .pagehead .wayfind { font-size: 14px; }
  .arts-hero .masthead > .hero-actions .btn { display: none; }
}

/* Group arrival information and make practical links easier to identify. */
.guest-information-page .property-grid article:first-child {
  background: var(--ground-lift); padding: 28px;
  border-top: 2px solid var(--cta);
}
.guest-info-navigation { gap: 12px; }
.guest-info-navigation .text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 16px; border: 1px solid var(--rule);
}
.guest-info-navigation .text-link:hover { background: var(--ground-lift); }
.inclusions a { display: inline-block; }
.venue-detail-use li { color: rgba(241,238,231,.9); }

/* Balance individual modern photographs without changing archival images or hero shading. */
main img:is([src$="240903154006.jpg"], [src$="240903155311.jpg"], [src$="20250824railwaystation-0097.jpg"]) {
  filter: brightness(1.12) saturate(.94);
}
main img:is([src$="20250824railwaystation-0011.jpg"], [src$="20250906xiaobaodress-b0137-web.jpg"], [src$="20250906xiaobaodress-c0211-web.jpg"], [src$="20250906xiaobaodress-b0214-web.jpg"]) {
  filter: brightness(1.08) saturate(.94);
}
main img:is([src$="stationstory_4.jpg"], [src$="SGP09029.jpg"]) {
  filter: brightness(.98) saturate(.9) sepia(.04);
}
.editorial-slide-button img, .editorial-lightbox img,
.arts-path-grid img[src*="old_hk_vibe"] {
  filter: brightness(1.06) saturate(.92);
}

/* Keep long-form mobile pages compact while retaining their complete content. */
@media (max-width: 820px) {
  .arts-intro { padding-block: 48px; }
  .arts-intro-grid { gap: 28px; }
  .arts-paths { padding-block: 48px; }
  .arts-paths-heading { margin-bottom: 28px; }
  .arts-path-grid { gap: 28px; }
  .creative-legacy { padding-top: 48px; }
  .creative-legacy-heading h2 { max-width: none; }
  .film-legacy { margin-top: 28px; gap: 0; }
  .film-legacy > div { padding: 28px 22px; }
  .editorial-story { margin-top: 48px; }
  .editorial-story-copy { gap: 24px; }
  .editorial-gallery-feature { margin-top: 28px; height: min(100vw, 520px); }
  .station-story-feature { margin-top: 48px; padding-block: 48px; gap: 28px; }
  .arts-programme { padding-block: 48px; gap: 24px; }
  .story-intro { padding-block: 48px; }
  .story-intro > p:last-child { margin-top: 24px; }
  .story-origins { padding-block: 48px; gap: 28px; }
  .story-credentials { margin-bottom: 40px; }
  .story-credential-grid > div { padding-block: 24px; }
  .story-chapters { gap: 48px; padding-block: 24px; }
  .story-chapter, .story-chapter-reverse { gap: 24px; }
  .story-image-tall { width: 100%; aspect-ratio: 4 / 3; }
  .story-image-tall img { height: 100%; object-fit: cover; object-position: 50% 28%; }
  .story-chapter-copy > p:not(.story-year) { margin-top: 20px; }
  .story-casino { margin-block: 0; padding: 28px; }
  .story-screen { margin-top: 48px; padding-top: 40px; }
  .story-screen-grid { margin-top: 28px; }
  .story-chronology { padding-top: 48px; }
  .story-chronology header { margin-bottom: 28px; }
  .story-closing { margin-top: 48px; padding-block: 48px; }
}

/* Shared navigation and compact, complete footer on every public page. */
.site-footer.page { margin-inline: auto; }
.page > .site-footer.page { padding-inline: 0; width: 100%; }
.site-footer .foot-grid { gap: 28px 36px; }
.site-footer .foot-grid > div { min-width: 0; }
.site-footer .foot-grid > div > a { padding-block: 7px; }
.site-footer .hotel-email { overflow-wrap: anywhere; }
.site-footer .footer-phone { font-family: var(--face-read); font-size: 17px; }
.site-footer .foot-base { margin-top: 28px; }
.venue-planning { display: flex; align-items: center; gap: 24px; padding-block: 28px; border-top: 1px solid var(--rule); }
.venue-planning p { margin: 0; max-width: 72ch; color: var(--cream-dim); }
.venue-planning .text-link { flex: 0 0 auto; }
.venue-shortlist, .faq-jumps { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 28px; }
.venue-shortlist a, .faq-jumps a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--rule); font: 14px/1.4 var(--face-read); }
.venue-shortlist a:hover, .faq-jumps a:hover { background: var(--ground-lift); }
.venue-card[id], .faq-group { scroll-margin-top: 24px; }
.venue-gallery-more { margin-top: 24px; }
.venue-gallery-more > summary, .story-chronology-details > summary { cursor: pointer; width: fit-content; min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.venue-gallery-more .venue-detail-gallery-grid { margin-top: 24px; }
.venue-detail-hero .story-hero-media::after { background: linear-gradient(90deg, rgba(18,17,14,.45), rgba(18,17,14,.08) 85%), linear-gradient(180deg, rgba(18,17,14,.38), transparent 35%, rgba(18,17,14,.72)); }
.wedding-gallery-grid > figure:first-child img { object-position: 50% 64%; }
.faq-groups { display: grid; gap: 32px; }
body.site-typography .faq-group > h3:not(.carved) {
  width: fit-content; max-width: 100%; margin-bottom: 20px;
  padding: 8px 12px; border-left: 3px solid var(--cta);
  background: transparent; color: var(--cta);
  font: 600 14px/1.5 var(--face-sign);
  letter-spacing: .08em; text-transform: uppercase;
}
.walk-time { display: inline-block; margin-bottom: 12px; color: var(--cream-dim); font: 17px/1.4 var(--face-read); }
.enquiry-actions button.text-link { background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; color: inherit; padding: 12px 0; min-height: 44px; }
@media (max-width: 820px) {
  .site-nav-ready :is(.masthead, .pagehead) > .hero-actions,
  .site-nav-ready :is(.masthead, .pagehead) > .btn { display: none; }
  .site-footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer .footer-about, .site-footer .footer-contact { grid-column: 1 / -1; }
  .site-footer .footer-about p { max-width: 48ch; }
  .site-footer .foot-grid > div > a { min-height: 44px; padding-block: 10px; }
  .site-footer .footer-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .site-footer .footer-contact h3, .site-footer .footer-contact .hotel-email { grid-column: 1 / -1; }
  .site-footer .footer-contact p { margin: 0; }
  .venue-planning { flex-direction: column; align-items: flex-start; gap: 16px; }
  .venue-detail-intro { padding-block: 48px; gap: 28px; }
  .venue-detail-use { padding-block: 48px; }
  .venue-detail-use-grid { gap: 28px; }
  .venue-detail-gallery { padding-top: 48px; }
  .venue-detail-gallery-grid { margin-top: 28px; }
  body.site-typography .faq-group > h3:not(.carved) { font-size: 13px; }
}

/* Keep practical photographs clear and extra material available on demand. */
.venue-card img[src*="/meeting-room/"],
.venue-detail-gallery-grid img[src*="/meeting-room/"] {
  filter: brightness(1.18) contrast(.96) saturate(.94);
}
.venue-detail-hero .story-hero-media img[src*="/meeting-room/"] {
  filter: brightness(1.12) contrast(.96) saturate(.94);
}
.venue-detail-hero .story-hero-media::after {
  background: linear-gradient(90deg, rgba(18,17,14,.36), rgba(18,17,14,.06) 85%),
    linear-gradient(180deg, rgba(18,17,14,.38), transparent 35%, rgba(18,17,14,.58));
}
.venue-card-uses { margin-top: 20px; border-top: 1px solid var(--rule); }
.venue-card-uses > summary, .arts-feature-more > summary {
  cursor: pointer; min-height: 44px; padding: 12px 0;
  color: var(--cream-dim); font: 17px/1.5 var(--face-read);
}
.venue-card .venue-card-uses ul { margin-top: 0; padding-top: 4px; border-top: 0; padding-bottom: 12px; }
.arts-feature-more { margin-top: 24px; border-top: 1px solid var(--rule); }
.arts-feature-more > summary { width: fit-content; border-bottom: 1px solid var(--rule); }
.arts-feature-more .film-legacy { margin-top: 28px; }
.venue-gallery-more > summary:focus-visible, .venue-card-uses > summary:focus-visible,
.arts-feature-more > summary:focus-visible { outline: 2px solid var(--cta); outline-offset: 4px; }
@media (max-width: 820px) {
  .venue-catalogue { padding-bottom: 48px; }
  .venue-card-grid { gap: 24px; }
  .venue-card figure { aspect-ratio: 16 / 10; }
  .venue-card > div { padding: 24px; }
  .venue-card > div > p:not(.eyebrow) { margin-top: 16px; }
  .venue-card .text-link { padding-top: 16px; }
  .venue-services { padding-block: 48px; }
  .venue-detail-gallery-grid figure,
  .venue-detail-gallery-grid figure.wide,
  .venue-detail-gallery-grid figure.tall { aspect-ratio: 4 / 3; min-height: 0; }
  .venue-detail-enquiry { margin-top: 48px; padding-block: 48px; }
  .arts-path-grid { gap: 24px; }
  .arts-path-grid article > div { padding: 24px; }
  .arts-path-grid article > div > p:not(.eyebrow) { margin-top: 16px; }
  .creative-legacy { padding-top: 40px; }
  .editorial-story { margin-top: 32px; }
  .station-story-feature { margin-top: 40px; padding-block: 40px; }
}
@media (max-width: 560px) {
  .arts-path-grid article:nth-child(n) figure { height: auto; aspect-ratio: 16 / 10; }
  .wedding-gallery-grid > figure { aspect-ratio: 4 / 3; }
  .wedding-gallery-grid > figure > img { height: 100%; object-fit: cover; }
}

/* Shared arts/event enquiry page. */
.enquiry-page main { padding-top: 48px; padding-bottom: 64px; }
.enquiry-page h1 { font-size: clamp(36px, 5vw, 60px); }
.enquiry-page .enquiry-form { max-width: 850px; }
.enquiry-page .enquiry-error { display: block; color: #9b352c; font: 14px/1.5 var(--face-sign); }
.enquiry-page [aria-invalid="true"] { border: 2px solid #9b352c; }
.enquiry-page button:disabled { opacity: .6; cursor: not-allowed; }
.enquiry-page #enquiry-context { border-left: 3px solid var(--brass); padding: 12px 16px; }
.enquiry-page #enquiry-privacy { max-width: 70ch; font-size: 15px; }
body.enquiry-page.site-typography main p a {
  display: inline; min-height: 0; padding: 0; border: 0;
  font: inherit; letter-spacing: inherit; color: inherit;
  text-transform: none; text-decoration: none;
}
.enquiry-page [hidden] { display: none; }
.enquiry-page .pagehead .wayfind,
.enquiry-page .pagehead .callnow { color: var(--cream-dim); }
.enquiry-page .pagehead .wayfind a:hover,
.enquiry-page .pagehead .callnow:hover { color: var(--cream); }

@media (min-width: 821px) {
  .site-footer .foot-grid { grid-template-columns: 1.35fr .8fr 1fr 1.25fr; }
}
.enquiry-page .enquiry-grid { gap: 24px 28px; align-items: start; }
.enquiry-page .enquiry-field :is(input, select) {
  min-height: 52px; height: 52px; font-size: 17px;
}
.enquiry-page .enquiry-field textarea { min-height: 180px; line-height: 1.6; }
.enquiry-page .enquiry-actions {
  margin-top: 28px; padding-top: 24px; border-top: 0;
}
.enquiry-page .enquiry-status:empty { min-height: 0; margin-top: 0; }
@media (max-width: 560px) {
  .enquiry-page .enquiry-grid { gap: 22px; }
  .enquiry-page .enquiry-actions .btn { width: 100%; }
}

/* A steadier section rhythm, with room for the photographs to lead. */
@media (min-width: 821px) {
  .overview-intro, .stay-overview, .hotel-gallery, .heritage-overview,
  .dining-overview, .location-overview, .getting-here, .property-details,
  .faq-section, .direct-booking { padding-top: clamp(64px, 7vw, 104px); }
  .creative-legacy { padding-top: clamp(64px, 7vw, 104px); }
  .editorial-story { margin-top: clamp(56px, 7vw, 96px); }
  .station-story-feature {
    margin-top: clamp(64px, 7vw, 104px);
    padding-block: clamp(56px, 6vw, 88px);
  }
  .venue-detail-use { padding-block: clamp(64px, 7vw, 104px); }
}
.arts-intro, .venues-intro, .venue-detail-intro {
  padding-block: clamp(56px, 7vw, 104px);
}
.wedding-intro { padding-block: clamp(56px, 6vw, 88px); }
.venue-detail-gallery { padding-top: clamp(56px, 7vw, 104px); }
.venue-detail-gallery-grid { margin-top: clamp(28px, 4vw, 48px); }
.venue-enquiry, .venue-detail-enquiry, .wedding-enquiry {
  margin-top: clamp(48px, 7vw, 96px);
  padding-block: clamp(48px, 6vw, 80px);
}
.enquiry-page main {
  margin-top: clamp(20px, 3vw, 40px);
  padding-top: clamp(32px, 4vw, 48px);
}

/* Landscape frames retain more architecture; portraits keep their height. */
.venue-detail-gallery-grid figure.wide { aspect-ratio: 16 / 10; }
@media (min-width: 821px) {
  .wedding-gallery > .wedding-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto repeat(2, clamp(240px, 27vw, 380px));
    grid-auto-rows: auto;
  }
  .wedding-gallery > .wedding-gallery-grid > .wedding-gallery-wide {
    aspect-ratio: 16 / 10;
  }
  .wedding-gallery-more .wedding-gallery-grid {
    grid-auto-rows: auto;
  }
  .wedding-gallery-more .wedding-gallery-grid > figure { aspect-ratio: 3 / 2; }
}
@media (max-width: 820px) {
  .arts-intro, .venues-intro, .venue-detail-intro, .wedding-intro { padding-block: 48px; }
  .venue-detail-gallery { padding-top: 48px; }
  .venue-detail-gallery-grid { margin-top: 28px; }
  .enquiry-page main { margin-top: 16px; padding-top: 28px; }
}
@media (max-width: 560px) {
  .wedding-gallery-grid > figure,
  .venue-detail-gallery-grid figure,
  .venue-detail-gallery-grid figure.wide { aspect-ratio: 3 / 2; }
  .wedding-gallery-grid > .wedding-gallery-tall { aspect-ratio: 2 / 3; }
  .venue-detail-gallery-grid figure.tall { aspect-ratio: 3 / 4; }
}

/* Keyboard feedback matches the existing button hover colours. */
body.site-typography .btn-brass:not(:disabled):focus-visible {
  background: var(--cta-hover); color: var(--cta-ink); border-color: var(--cta-hover);
}
body.site-typography .btn-line:not(:disabled):focus-visible {
  border-color: var(--brass); color: var(--brass);
}
body.site-typography :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--cta); outline-offset: 4px;
}
body.site-typography :is(.hero, .story-hero, .rooms-hero) :is(a, button):focus-visible {
  outline-color: var(--cta-ink);
}
@media (prefers-reduced-motion: reduce) {
  body.site-typography .btn { transition: none; }
}
@media (max-width: 560px) {
  :is(.venue-enquiry, .venue-detail-enquiry, .wedding-enquiry, .arts-programme-action) > div {
    flex-direction: column; align-items: stretch; gap: 16px;
  }
  :is(.venue-enquiry, .venue-detail-enquiry, .wedding-enquiry, .arts-programme-action) > div > .btn {
    width: 100%;
  }
  :is(.venue-enquiry, .venue-detail-enquiry, .wedding-enquiry, .arts-programme-action) > div > .text-link {
    align-self: flex-start;
  }
  .home-page .hero-copy > .hero-actions {
    align-items: stretch;
  }
  .home-page .hero-copy > .hero-actions > .btn { width: 100%; }
}

/* Bring long-page sections closer while preserving the existing type and layout. */
.direct-booking {
  margin-top: clamp(48px, 6vw, 88px);
  padding-block: clamp(40px, 6vw, 80px);
}
.site-footer { margin-top: clamp(48px, 6vw, 88px); }
@media (min-width: 821px) {
  .overview-intro, .stay-overview, .hotel-gallery, .heritage-overview,
  .dining-overview, .location-overview, .getting-here, .property-details,
  .faq-section, .creative-legacy { padding-top: clamp(56px, 5vw, 80px); }
  .arts-intro, .venues-intro, .venue-detail-intro, .wedding-intro {
    padding-block: clamp(48px, 5vw, 72px);
  }
  .arts-paths, .arts-programme, .venue-services, .wedding-details,
  .venue-detail-use { padding-block: clamp(56px, 6vw, 88px); }
  .arts-paths-heading, .venue-catalogue-heading { margin-bottom: clamp(32px, 4vw, 56px); }
  .venue-catalogue, .wedding-gallery { padding-bottom: clamp(48px, 5vw, 80px); }
  .venue-detail-gallery { padding-top: clamp(48px, 5vw, 80px); }
  .station-story-feature {
    margin-top: clamp(48px, 5vw, 80px);
    padding-block: clamp(48px, 5vw, 72px);
  }
  .venue-enquiry, .venue-detail-enquiry, .wedding-enquiry {
    margin-top: clamp(48px, 5vw, 80px);
    padding-block: clamp(40px, 5vw, 72px);
  }
}

/* Use the same framing and restrained exposure treatment wherever rooms appear. */
.home-room-card figure, .roomcard-media { aspect-ratio: 4 / 3; }
:is(.home-room-card, .roomcard-media) img { object-position: 50% 58%; }
main img[src="images/room-double-editorial.png"] {
  filter: brightness(1.035) contrast(.99) saturate(.94);
}
main img[src="images/deluxe-king-room-141-editorial.png"] {
  filter: brightness(1.02) contrast(.99) saturate(.94);
}
main img[src="images/edited/private-rooms/deluxe-twin/ivy-editorial-v2/weixin-image-20241226155634-editorial-v2.png"] {
  filter: brightness(.98) contrast(.99) saturate(.96);
}

/* Mobile headings and gallery controls keep the photographs clear. */
@media (max-width: 650px) {
  .home-page .hero-copy h1 { font-size: clamp(42px, 13vw, 60px); line-height: 1.04; }
  .home-page .home-hero-line { display: block; }
  .home-page .hero-media::after {
    background: linear-gradient(180deg, rgba(20, 15, 10, .28), rgba(20, 15, 10, .66) 40%, rgba(20, 15, 10, .78));
  }
  .home-page :is([data-hotel-gallery], [data-dining-carousel]) {
    display: grid; grid-template-rows: auto auto; height: auto; aspect-ratio: auto;
  }
  .home-page .gallery-slides { height: auto; aspect-ratio: 4 / 3; min-width: 0; }
  .home-page .dining-slides { height: auto; aspect-ratio: 16 / 9; min-width: 0; }
  .home-page :is([data-hotel-gallery], [data-dining-carousel]) .gallery-controls {
    position: static; justify-content: space-between; padding: 8px 0 0;
    background: var(--ground); color: var(--cream);
  }
  .home-page .gallery-controls button { border-color: var(--rule); }
  .home-page .gallery-controls button:hover { background: var(--ground-lift); }
  .home-page :is([data-gallery-pause], [data-dining-pause]) { display: none; }
  .home-page .gallery-status { font-size: 12px; letter-spacing: .04em; }
}

/* Gym information is confined to the guest facilities section. */
.guest-information-page .gym-facility {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(24px, 5vw, 64px); padding-top: clamp(28px, 4vw, 48px);
}
.guest-information-page .gym-facility figure { margin: 0; }
.guest-information-page .gym-facility img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) {
  .guest-information-page .gym-facility { grid-template-columns: 1fr; }
}

/* Spark Arena link within the existing Location card. */
.location-grid .spark-location-link { display: inline-block; margin-top: 16px; color: var(--brass); font-size: 14px; line-height: 1.6; }
.location-grid .spark-location-link span { color: inherit; }