/* ============================================================
   SkyCity Auckland — Global Stylesheet
   site.css
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
	/* Brand Gold */
	--sc-gold:             #DCB741;   /* was #c7a572 */
	--sc-gold-80:          #E3C567;   /* button hover */
	--sc-gold-60:          #EAD48D;
	--sc-gold-40:          #F1E2B3;   /* button disabled */
	--sc-gold-active:      #B8943E;   /* button pressed */

	/* Brand Plum — dark brand SURFACE (replaces #2a2a2a as a surface).
	   Black #000 is reserved for online-casino UI only — never a brand surface here. */
	--sc-plum:             #440B22;
	--sc-plum-80:          #693C4E;
	--sc-plum-60:          #8F6D7A;
	--sc-plum-40:          #B49DA7;
	--sc-plum-20:          #DACED3;

	/* Brand Red + functional (success/error used for form validation only) */
	--sc-red:              #E0373F;
	--sc-alert:            #C8102E;   /* emergency / warning banner (sc-alert) */
	--sc-success:          #52AE32;
	--sc-error:            #E94F3D;

	/* Text / neutrals — brand Body is #333. --sc-dark (#2a2a2a) retired:
	   former text colour → --sc-text, former dark surfaces → --sc-plum */
	--sc-text:             #333333;
	--sc-white:            #ffffff;
	/* 🔴 ONE CREAM, TWO ROLES — consolidated 2026-08-21 before spec 04's paste.
	   `#F8F4E8` was sampled INDEPENDENTLY from two different agency comps (`example.png` for the
	   FAQ surface, `homepage_hotels_new.png` for the hotel card body) and came back identical.
	   That is one colour appearing twice, not two colours that happen to match — so it gets one
	   definition. ⚠️ The literal was living in TWO places until this edit; correcting the cream
	   against the agency file would have changed one and silently missed the other, which is the
	   same drift that put every estate heading in gold on 2026-08-20.
	   📌 The role token below is KEPT rather than collapsed: a hotel card is not a FAQ surface, and
	   if the two ever need to diverge, `--sc-faq-surface` is where that happens. */
	--sc-cream:            #F8F4E8;
	/* FAQ surface — see `.sc-faq` / `#faq` for why one colour needs two consumers.
	   ⚠️ Opaque — it sits on grey on six templates and white on two, and an alpha would render
	   as two different creams. */
	--sc-faq-surface:      var(--sc-cream);
	--sc-bg:               #ffffff;
	--sc-nav-height:       64px;
	--sc-search-height:    48px;
	--sc-alert-height:     var(--sc-search-height); /* alert band height = search bar; reserved only when an alert is present */
	--sc-breadcrumb-height: 0px;
	--sc-r20-height:       0px;
	--sc-max-width:        1400px;
	--sc-radius-card:      14px;
	--sc-radius-btn:       100px;     /* was 50px — brand full pill */
	--sc-font:             'Montserrat', sans-serif;

	/* Display font — Task E (Specter Black, Adobe Fonts, weight 900).
	   TODO(blocked: adobe-kit) — do NOT apply to h1/hero until the Adobe kit <link> loads. */
	--sc-font-display:     'specter', var(--sc-font);

	/* Plum gradient surface — design refresh 2026-08. ONE definition; consumed by the
	   homepage hotels band, the footer, the casino card block, the Sky Tower school
	   holidays module and the Opening Hours module. Do NOT re-declare a linear-gradient
	   literal in any of those five places — use .sc-surface--grad (below) or
	   background: var(--sc-grad-plum).
	   🔴 OPAQUE STOPS ONLY. A translucent stop is not a colour, it is a colour x a
	   background, and these five surfaces sit on white, on cream and on plum — an
	   rgba() stop would render as three different ramps. (FAQ tint / Free pill /
	   hotel sheets each cost an incident learning this.)
	   ⚠ The STOPS live in their own variable so the ramp is written exactly once. A
	   second angle (see .sc-surface--grad-diag) composes from the same stop list
	   rather than copying the three colours — otherwise a stop correction has to be
	   made twice, which is the fragility the token exists to prevent. */
	--sc-grad-plum-stops:  #52152F 0%, #3A0C1F 45%, #1C0309 100%;
	--sc-grad-plum:        linear-gradient(180deg, var(--sc-grad-plum-stops));
}

/* ── Reset / base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--sc-font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sc-text);
	background: var(--sc-bg);
	padding-top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-breadcrumb-height) + var(--sc-r20-height));
}

/* When a site alert banner is present, the fixed header is one band taller —
   reserve its height so page content isn't hidden underneath. :has() in its own
   block (project rule). Degrades safely: a browser without :has() simply doesn't
   add the extra reserve. */
body:has(.sc-alert) {
	padding-top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-alert-height) + var(--sc-breadcrumb-height) + var(--sc-r20-height));
}

/* The breadcrumb row is rendered by _Nav INSIDE the fixed .sc-nav, so its height
   must be reserved or the first in-flow element slides up behind it. :root ships
   0px because the homepage has no breadcrumb; this sets the real height on any
   page that renders one. Measured 2026-09-01 on internal at 2560px wide: the row
   is 48.19px (.875rem padding x2 + ~19px line + 1px border).
   :has() in its own block (project rule); a browser without :has() simply keeps
   the 0px reserve, which is today's behaviour.
   KNOWN LIMIT: .sc-breadcrumb__list is flex-wrap:wrap, so a crumb trail that
   wraps to two lines is taller than 48px and still under-reserves. Not measured,
   not solved here — unchanged from the previous behaviour.
   NOT scoped away from .sc-hotel-brand. The earlier promo.css stopgap excluded
   branded pages on the belief that their breadcrumb is transparent and their
   brand sheet's 36px renders correctly. The breadcrumb's own background IS
   transparent, but it sits inside .sc-nav (rgba(255,255,255,.97)), so the band
   is opaque regardless — The Grand and Poker were hiding 49.19px of hero behind
   it, Horizon and SkyCity Hotel 12.19px. */
body:has(.sc-breadcrumb) {
	--sc-breadcrumb-height: 48px;
}

img, video, svg { max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

.sc-skip-link {
	position: fixed;
	top: -100%;
	left: 1rem;
	z-index: 9999;
	padding: .5rem 1rem;
	background: var(--sc-plum);
	color: var(--sc-white);
	font-weight: 700;
	font-size: .875rem;
	border-radius: 0 0 var(--sc-radius-card) var(--sc-radius-card);
	text-decoration: none;
	transition: top .2s;
}

.sc-skip-link:focus { top: 0; outline: 2px solid var(--sc-gold); outline-offset: 2px; }

/* ── Buttons ─────────────────────────────────────────────── */
.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .875rem 2.25rem;
	border: 2px solid transparent;
	border-radius: var(--sc-radius-btn);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .107em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s, background .2s, color .2s, border-color .2s;
	white-space: nowrap;
}

.sc-btn:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }

/* PRIMARY — brand spec. Gold fill + WHITE label is a DELIBERATE, brand-mandated
   WCAG exception (white-on-#DCB741 = 1.93:1; hover 1.69:1), signed off by Adam as
   brand owner. Do NOT darken the label or change the gold to "fix" contrast.
   The focus ring (above) uses Plum because gold-on-white was too low for keyboard
   users. See CHANGELOG 2026-06-19. */
.sc-btn--gold    { background: var(--sc-gold); color: var(--sc-white); border-color: var(--sc-gold); }
.sc-btn--gold:hover  { background: var(--sc-gold-80); }
.sc-btn--gold:active { background: var(--sc-gold-active); }
.sc-btn--gold:disabled,
.sc-btn--gold[aria-disabled="true"] { background: var(--sc-gold-40); cursor: not-allowed; }
.sc-btn--outline { background: transparent; color: var(--sc-plum); border-color: var(--sc-plum); }
.sc-btn--outline:hover { background: var(--sc-plum); color: var(--sc-white); }
.sc-btn--dark    { background: var(--sc-plum); color: var(--sc-white); border-color: var(--sc-plum); }
.sc-btn--dark:hover { opacity: .9; }

/* ── .sc-btn--book — the IN-CONTENT booking CTA (design refresh 2026-08, spec 07) ──
   🔴 WAS BLACK 2026-08-20 → 2026-08-21. FLIPPED TO PLUM BY ADAM once he saw the comp; the
   original brief said "black with white text", `restaurant_intro.png` samples the fill at
   rgb(68,11,34) = --sc-plum, and the comp won. **The §2 black exception this block used to
   carry is VOID — black is once again casino UI only.** Recorded rather than deleted because
   the black version shipped to `internal` for about an hour and the CHANGELOG references it.
   ⚠️ THE HOVER HAD TO MOVE TOO, and this is why the flip was not one line: hover was
   `var(--sc-plum)`, which is now the BASE — leaving it would have given the button no hover
   feedback at all, a dead control that looks perfectly fine in a screenshot. It now uses
   `opacity: .9`, matching `.sc-btn--dark`, which is the estate's established treatment for a
   filled-plum button.
   📌 THIS MODIFIER IS NOW COLOUR-IDENTICAL TO `.sc-btn--dark` above. Kept as a separate named
   role rather than collapsed, for the same reason `--sc-faq-surface` points at `--sc-cream`:
   the booking CTA is a distinct job, and if it ever needs to diverge this is where it happens.
   Collapsing it would also mean re-pasting `Restaurant.cshtml` for no visual change.
   ⚠️ This modifier is for ONE render point (.sc-restaurant-overview__ctas). The HEADER
   booking CTA deliberately stays .sc-btn--gold — see the mapping in the spec.
   White on plum is 15.95:1. */
.sc-btn--book {
	--sc-btn-book-bg: var(--sc-plum);
	background: var(--sc-btn-book-bg);
	color: var(--sc-white);
	border-color: var(--sc-btn-book-bg);
}
.sc-btn--book:hover { opacity: .9; }
.sc-btn--book:focus-visible { outline-color: var(--sc-plum); }

/* The booking glyph, on BOTH the header and the in-content CTA. Material Symbols is sized
   with font-size, never width/height (§3). The optical size axis has to come down with it or
   the glyph renders at its 24px stroke weight inside a 14px box. */
.sc-btn__icon {
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
	font-variation-settings: 'opsz' 20;
}

/* ── Layout helpers ──────────────────────────────────────── */
.sc-container { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; }
.sc-section { padding: 4rem 0; }
.sc-section--tight { padding: 2.5rem 0; }
.sc-section--dark { background: var(--sc-plum); color: var(--sc-white); }
.sc-section--gold { background: var(--sc-gold); color: var(--sc-text); }
.sc-section--grey { background: #f5f5f5; }

/* ── Plum gradient surface utility (design refresh 2026-08) ──────────────
   Paints --sc-grad-plum and RE-STATES ITS OWN FOREGROUNDS. It must: this
   surface sits outside the .sc-blk--bg-* / .sc-section--dark systems, so it
   inherits the SHELL's colours and every "on a dark band" rule elsewhere
   silently does not apply to it (CLAUDE.md §7, the anchorId lesson).

   Contrast measured against the LIGHTEST stop (#52152F) — the worst case, and
   the only one worth quoting. All pass AA and AAA:
     white   #FFFFFF on #52152F = 13.93:1
     plum-20 #DACED3 on #52152F =  9.12:1   (muted body copy)
     gold    #DCB741 on #52152F =  7.23:1   (links)
     gold-80 #E3C567 on #52152F =  8.26:1   (link hover)
   Body copy uses the opaque --sc-plum-20 token, NOT rgba(255,255,255,.x): a
   translucent foreground over a gradient is the same trap as a translucent stop.

   ⚠ Angle is a MODIFIER, not a second token — the colour ramp is the shared
   thing. The hotels band reads vertical; the Opening Hours comp reads diagonal. */
.sc-surface--grad {
	background: var(--sc-grad-plum);
	color: var(--sc-plum-20);
}
.sc-surface--grad-diag { background: linear-gradient(135deg, var(--sc-grad-plum-stops)); }

/* TIER 1 — DEFAULTS, not overrides. `p` and `li` are absent on purpose: they carry
   no colour of their own, so they already inherit --sc-plum-20 from the surface.
   Headings and links do need stating (headings must be white while body copy is
   muted; `a { color: inherit }` would otherwise leave links unmarked).
   🔴 :where() holds these at specificity (0,1,0) so a component placed ON the band —
   a white card, a badge, a tile — still wins with its own colours. Without it,
   `.sc-surface--grad h3` (0,1,1) would beat `.sc-hp-card__title` (0,1,0) and recolour
   the text inside every card on the band.
   ⚠ Each :where() rule sits in its OWN block. An engine that cannot parse :where()
   drops the whole comma group, so it must never share one with a plain selector —
   the same rule §7 states for :has(). Degradation is safe: the surface's own
   `color` still applies, giving legible plum-20 (9.12:1) throughout. */
.sc-surface--grad :where(h1, h2, h3, h4, h5, h6) { color: var(--sc-white); }
.sc-surface--grad :where(a) { color: var(--sc-gold); }
.sc-surface--grad :where(a):hover { color: var(--sc-gold-80); }

/* TIER 2 — REAL overrides, and they must win. Each of these sets a dark or plum
   foreground that renders plum-on-plum (i.e. invisible) on this surface, so they are
   deliberately stated at (0,2,0) rather than inside :where().
   ⚠ This list covers the SHARED text primitives only. A consumer spec that puts its
   own component on the band must check that component's own foregrounds — the band
   cannot know about them. */
/* 🔴 .sc-section__eyebrow hard-codes `color: var(--sc-plum)`, which is plum-on-plum —
   i.e. invisible — on this surface. It is a SHARED primitive (every section header on
   the estate uses it), so it belongs in this tier rather than in a consumer's rules.
   Added 2026-08-21 by spec 04 when the hotels band became the first grad band with a
   section eyebrow on it. Gold on the lightest stop #52152F measures 7.23:1. */
.sc-surface--grad .sc-section__eyebrow { color: var(--sc-gold); }
.sc-surface--grad .sc-section-heading__title { color: var(--sc-white); }
.sc-surface--grad .sc-section-heading__eyebrow { color: var(--sc-gold); }
.sc-surface--grad .sc-section-heading__subtitle { color: var(--sc-plum-20); }
.sc-surface--grad .sc-prose a,
.sc-surface--grad .sc-rte a { color: var(--sc-gold); }
.sc-surface--grad .sc-btn--outline { color: var(--sc-white); border-color: var(--sc-white); }
.sc-surface--grad .sc-btn--outline:hover { background: var(--sc-white); color: var(--sc-plum); }
.sc-surface--grad .sc-btn:focus-visible { outline-color: var(--sc-gold); }

/* ── Page background (Page Background composition → _Layout sets bg on <main>) ──
   Base .sc-section is transparent, so the page background shows through ordinary
   content. Cards, .sc-page-header and .sc-section--grey/--dark/--gold keep their
   own backgrounds and layer over it. Hook for any per-page transparency override
   if a template's content sits on its own opaque section. */
.sc-page-bg { width: 100%; }

/* ── Section heading ─────────────────────────────────────── */
.sc-section-heading { text-align: center; margin-bottom: 2.5rem; }
.sc-section-heading__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .5rem; }
.sc-section-heading__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: .75rem; }
.sc-section-heading__subtitle { font-size: 1.0625rem; color: rgba(0,0,0,.6); max-width: 640px; margin: 0 auto; line-height: 1.65; }
.sc-section--dark .sc-section-heading__subtitle { color: rgba(255,255,255,.6); }

/* ── Prose ───────────────────────────────────────────────── */
.sc-prose { max-width: 780px; }
/* 🔴 ZERO CALLERS AS OF 2026-08-21, AND DELIBERATELY KEPT. The declaration is UNCHANGED — only
   this comment is, because the old one ("Use on Casino/full-width pages") was never true: Casino
   and CasinoSection have never carried the class. `SkyTower.cshtml` was the estate's ONLY caller
   and dropped it in spec 06, so the intro takes the 780px default like every other template.
   Adam's ruling: consistency with the estate beats matching the comp to the pixel — 780px is
   NARROWER than the artwork (~74% of the container) and that is intended.
   ⚠ A modifier with no callers is fine; silently deleting one a future full-width page wants is
   not. Leave it defined. */
.sc-prose--wide { max-width: none; }
.sc-prose h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.sc-prose h3 { font-size: 1.1875rem; margin: 1.5rem 0 .5rem; }
.sc-prose p { line-height: 1.75; margin-bottom: 1.1rem; }
.sc-prose a { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-prose ul, .sc-prose ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 1rem; }
.sc-prose li { margin-bottom: .375rem; line-height: 1.65; }
.sc-prose img { border-radius: var(--sc-radius-card); margin: 1.5rem 0; }

/* ── RTE prose styles (sc-rte class applied to rich text output divs) ─── */
.sc-rte h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.sc-rte h3 { font-size: 1.1875rem; margin: 1.5rem 0 .5rem; }
.sc-rte h4 { font-size: 1.0625rem; margin: 1.25rem 0 .375rem; }
.sc-rte p { line-height: 1.75; margin-bottom: 1.1rem; }
.sc-rte a { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-rte ul, .sc-rte ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 1rem; }
.sc-rte li { margin-bottom: .375rem; line-height: 1.65; }

/* RTE inline buttons — `.sc-rte a` at line above sets gold + underline at
   specificity 0,1,1 which overrides .sc-btn--gold's color (0,1,0), making the
   primary gold-fill button render gold-on-gold and disappear. These rules
   target `.sc-rte a.sc-btn` (0,2,1) so they win against the base, restoring
   legible primary/secondary/dark buttons authored inside RTE bodyContent. */
.sc-rte a.sc-btn { text-decoration: none; }
.sc-rte a.sc-btn--gold { color: var(--sc-white); }
.sc-rte a.sc-btn--gold:hover { color: var(--sc-white); }
.sc-rte a.sc-btn--outline { color: var(--sc-plum); }
.sc-rte a.sc-btn--outline:hover { color: var(--sc-white); }
.sc-rte a.sc-btn--dark { color: var(--sc-white); }
.sc-rte a.sc-btn--dark:hover { color: var(--sc-white); }

/* ── RTE button style ─────────────────────────────────────── */
.btn a,
a .btn,
a.btn,
.sc-prose .btn a,
.sc-prose a .btn,
.sc-container .btn a,
.sc-container a .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.75rem;
	background: var(--sc-gold);
	color: var(--sc-text) !important;
	border: 2px solid var(--sc-gold);
	border-radius: var(--sc-radius-btn);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity .2s;
	white-space: nowrap;
	margin: .25rem 0;
}
.btn a:hover, a .btn:hover, a.btn:hover,
.sc-prose .btn a:hover, .sc-prose a .btn:hover,
.sc-container .btn a:hover, .sc-container a .btn:hover { opacity: .88; }

.btn-outline a,
a .btn-outline,
a.btn-outline,
.sc-prose .btn-outline a,
.sc-prose a .btn-outline,
.sc-container .btn-outline a,
.sc-container a .btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.75rem;
	background: transparent;
	color: var(--sc-plum) !important;
	border: 2px solid var(--sc-gold);
	border-radius: var(--sc-radius-btn);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .2s, color .2s;
	white-space: nowrap;
	margin: .25rem 0;
}
.btn-outline a:hover, a .btn-outline:hover, a.btn-outline:hover,
.sc-prose .btn-outline a:hover, .sc-prose a .btn-outline:hover,
.sc-container .btn-outline a:hover, .sc-container a .btn-outline:hover {
	background: var(--sc-gold);
	color: var(--sc-text) !important;
}

/* ── RTE display classes — .lead / .small / .callout / .regulatory ───────────
   🔴 THIS FILE IS THE OWNER. `rte-styles.css` carries a deliberate MIRROR of these
      four rules so they also preview inside the Tiptap editor canvas, which does not
      load site.css. CHANGE ONE, CHANGE THE OTHER — a value that drifts shows the
      editor one thing and the visitor another, which is the exact defect that
      created this block (the four were in rte-styles.css ONLY, so they styled in
      the editor and rendered as plain text on the page).
   ⚠️ The mirror cannot use var() — the editor iframe has no :root tokens at all,
      so rte-styles.css keeps the literals. See docs/REFERENCE.md §24.

   🔴 SCOPED TO .sc-rte ON PURPOSE. `.lead`, `.small` and `.callout` are generic
      names; unscoped they would eventually collide with something on the estate —
      the same failure the `table:not([class])` rule exists to prevent (CLAUDE.md §7).
   📌 .sc-rte deliberately does NOT match the footer's responsible-gaming message,
      which uses `sc-rte-footer` (_Footer.cshtml:174). That is not an oversight:
      the RG copy's own data type ("Site Root - Footer Compliance Message",
      687ed62a) has NO stylesheet attached and NO style menu in its toolbar, so
      these classes are unreachable there by design. Compliance copy stays plain.

   .btn / .btn-outline are ABOVE and are NOT part of this block — they were already
   duplicated and working. Do not fold them in, and do not "align" the RTE .btn's
   dark-on-gold label with .sc-btn--gold's white-on-gold (§2 — that difference is
   deliberate and signed off). */
.sc-rte .lead {
	font-size: 1.125rem;
	line-height: 1.75;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.7);
}

.sc-rte .small {
	font-size: .8125rem;
	color: rgba(0, 0, 0, 0.55);
	line-height: 1.6;
}

/* The background is the brand gold at 10% — TRANSLUCENT, so it is not the same
   colour as var(--sc-gold) and must stay an rgba (REFERENCE §24). The solid
   border is the token. */
.sc-rte .callout {
	background: rgba(220, 183, 65, 0.1);
	border-left: 3px solid var(--sc-gold);
	padding: 1rem 1.25rem;
	border-radius: 0 8px 8px 0;
	margin: 1rem 0;
}

.sc-rte .regulatory {
	font-size: .8125rem;
	color: rgba(0, 0, 0, 0.45);
	font-style: italic;
	line-height: 1.6;
}

/* ── Map ─────────────────────────────────────────────────── */
.sc-map-block { border-radius: var(--sc-radius-card); overflow: hidden; }
.sc-map { width: 100%; height: 400px; display: block; }

/* ============================================================
   R20 BAR
   ============================================================ */

.sc-r20 {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1001;
	height: 36px;
	background: #111;
	border-bottom: 1px solid rgba(220,183,65,.25);
	display: flex;
	align-items: center;
}

.sc-r20__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 40px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sc-r20__left { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.sc-r20__icon { flex-shrink: 0; color: var(--sc-gold); }
.sc-r20__message { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-gold); white-space: nowrap; }
.sc-r20__detail { font-size: .6875rem; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-r20__detail a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .15s; }
.sc-r20__detail a:hover, .sc-r20__detail a:focus-visible { color: var(--sc-gold); outline: none; }
.sc-r20__right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.sc-r20__age { font-size: .6875rem; font-weight: 600; color: rgba(255,255,255,.4); letter-spacing: .04em; white-space: nowrap; }
.sc-r20__dismiss { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: none; border: none; color: rgba(255,255,255,.35); cursor: pointer; padding: 0; border-radius: 50%; transition: color .15s, background .15s; flex-shrink: 0; }
.sc-r20__dismiss:hover, .sc-r20__dismiss:focus-visible { color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); outline: none; }

/* ============================================================
   NAV
   ============================================================ */

.sc-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(220,183,65,.18);
	display: flex;
	flex-direction: column;
}

.sc-nav__inner {
	display: flex;
	align-items: center;
	height: var(--sc-nav-height);
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
	gap: 2rem;
}

.sc-nav__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; }
.sc-nav__logo img { height: 36px; width: auto; display: block; }

.sc-nav__links {
	display: flex;
	align-items: center;
	gap: 40px;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
}

.sc-nav__link {
	display: flex;
	align-items: center;
	height: var(--sc-nav-height);
	color: #666;
	text-decoration: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .3s, border-color .3s;
}

.sc-nav__link:hover,
.sc-nav__link:focus-visible { color: var(--sc-plum); border-bottom-color: var(--sc-gold); outline: none; }
.sc-nav__link.is-active     { color: var(--sc-plum); border-bottom-color: var(--sc-gold); }

.sc-nav__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.sc-nav__login-btn {
	font-size: .75rem;
	padding: .45rem 1.1rem;
	letter-spacing: .06em;
	color: var(--sc-text);
	border-color: rgba(68,11,34,.25);
}
.sc-nav__login-btn:hover { background: var(--sc-plum); color: var(--sc-white); border-color: var(--sc-plum); }

/* SHOW by SkyCity logo login (desktop nav) — borderless image link */
.sc-nav__login-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: none;
	background: none;
	border-radius: 4px;
	text-decoration: none;
	transition: opacity .2s;
}
.sc-nav__login-logo:hover { opacity: .75; }
.sc-nav__login-logo:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; opacity: 1; }
.sc-nav__login-logo-img { height: 30px; width: auto; display: block; }
.sc-nav__login-logo-img--light { display: none; }

.sc-nav__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 2.25rem; height: 2.25rem; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; flex-shrink: 0; }
.sc-nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--sc-text); border-radius: 2px; transition: transform .25s, opacity .25s; }
.sc-nav__hamburger:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }

.sc-nav__search-bar {
	height: var(--sc-search-height);
	background: #f4f4f4;
	border-top: 1px solid rgba(0,0,0,.06);
	display: flex;
	align-items: center;
}

.sc-nav__search-form {
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
}

.sc-nav__search-icon { color: #999; flex-shrink: 0; }

.sc-nav__search-input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--sc-font);
	font-size: .875rem;
	color: var(--sc-text);
	outline: none;
	min-width: 0;
}

.sc-nav__search-input::placeholder { color: #aaa; }

/* ── Search clear button (2026-08-04) ────────────────────────────────────────
   Suppress the browser's NATIVE type="search" cancel control. It is replaced by a
   real <button id="sc-search-clear"> in _Nav.cshtml, because the native one is not
   keyboard-focusable and Firefox does not render it at all. Suppressing it here is
   what stops the two ever appearing side by side in WebKit/Blink. */
.sc-nav__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.sc-nav__search-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #999;
	cursor: pointer;
	line-height: 0;
	transition: color .2s, background .2s;
}

.sc-nav__search-clear .material-symbols-outlined { font-size: 18px; }
.sc-nav__search-clear:hover { color: var(--sc-plum); background: rgba(0,0,0,.06); }
.sc-nav__search-clear:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 2px; }

/* 🔴 MUST come AFTER the display rule above. The `hidden` attribute is only
   `display:none` at UA-stylesheet strength — an author `display:inline-flex` beats it,
   and the button would sit there permanently visible with nothing to clear. */
.sc-nav__search-clear[hidden] { display: none; }

.sc-nav__search-submit {
	font-size: .75rem;
	padding: .4rem 1.1rem;
	letter-spacing: .06em;
	flex-shrink: 0;
}

.sc-nav__item { list-style: none; }
.sc-nav__item--dropdown { position: relative; }

.sc-nav__dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	height: var(--sc-nav-height);
	color: #666;
	background: none;
	border: none;
	font-family: var(--sc-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .3s, border-color .3s;
	cursor: pointer;
	padding: 0;
}

.sc-nav__dropdown-toggle:hover,
.sc-nav__dropdown-toggle:focus-visible { color: var(--sc-plum); border-bottom-color: var(--sc-gold); outline: none; }
.sc-nav__dropdown-toggle.is-active     { color: var(--sc-plum); border-bottom-color: var(--sc-gold); }

.sc-nav__chevron { margin-top: 1px; flex-shrink: 0; transition: transform .25s; }
.sc-nav__dropdown-toggle[aria-expanded="true"] .sc-nav__chevron { transform: rotate(180deg); }

.sc-nav__dropdown {
	position: absolute;
	top: calc(var(--sc-nav-height) - 2px);
	right: -1rem;
	width: 420px;
	z-index: 999;
	background: var(--sc-white);
	border: 1px solid rgba(220,183,65,.2);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,.12);
	animation: sc-dropdown-in .2s ease;
}

.sc-nav__dropdown[hidden] { display: none; }

@keyframes sc-dropdown-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sc-nav__dropdown-inner { padding: 1.25rem 1.25rem 1rem; }
.sc-nav__dropdown-eyebrow { font-size: .625rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--sc-plum); margin: 0 0 1rem; }
.sc-nav__dropdown-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-bottom: 1.125rem; }

.sc-nav__dropdown-card {
	display: block;
	padding: 1.125rem 1.25rem;
	background: #f9f6f1;
	border: 1px solid rgba(220,183,65,.15);
	border-radius: 8px;
	text-decoration: none;
	color: var(--sc-text);
	transition: border-color .2s, background .2s;
}

.sc-nav__dropdown-card:hover { background: #f5ede0; border-color: rgba(220,183,65,.4); }
.sc-nav__dropdown-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-nav__dropdown-card-icon { font-size: 1.25rem; line-height: 1; display: block; margin-bottom: .625rem; }
.sc-nav__dropdown-card-title { display: block; font-size: .75rem; font-weight: 700; color: var(--sc-text); margin: 0 0 .3rem; }
.sc-nav__dropdown-card-desc { font-size: .6875rem; color: #6b5f50; line-height: 1.55; margin: 0; }
.sc-nav__dropdown-card-cta { display: block; font-size: .625rem; font-weight: 600; color: var(--sc-plum); margin-top: .5rem; }

.sc-nav__dropdown-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid rgba(220,183,65,.15); flex-wrap: wrap; }
.sc-nav__dropdown-tcs { font-size: .6875rem; color: #a09080; margin: 0; }
.sc-nav__dropdown-full-guide { font-size: .6875rem; font-weight: 700; color: var(--sc-plum); text-decoration: none; white-space: nowrap; transition: opacity .2s; }
.sc-nav__dropdown-full-guide:hover { opacity: .75; }

/* Plan Your Visit hub dropdown shell */
.sc-nav__dropdown--hub { width: 420px; }

/* Visit Quick Links — single-column accordion (page + nav-dropdown contexts) */
.sc-visit-hub__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.sc-visit-hub__item {
	border: 1px solid rgba(220,183,65,.22);
	border-radius: 10px;
	overflow: hidden;
	background: var(--sc-white);
	transition: border-color .2s, background .2s;
}
.sc-visit-hub__item:has(.sc-visit-hub__question[aria-expanded="true"]) {
	border-color: var(--sc-gold);
	background: #fbf8f2;
}
.sc-visit-hub__question {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.125rem;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--sc-font);
	font-size: 1rem;
	font-weight: 600;
	color: var(--sc-text);
	cursor: pointer;
	transition: color .2s, background .2s;
}
.sc-visit-hub__question:hover { color: var(--sc-plum); background: rgba(220,183,65,.06); }
.sc-visit-hub__question:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: -2px; }
.sc-visit-hub__question[aria-expanded="true"] { color: var(--sc-plum); }
.sc-visit-hub__icon { font-size: 1.5rem; line-height: 1; color: var(--sc-gold); flex-shrink: 0; }
.sc-visit-hub__question-text { flex: 1; line-height: 1.35; }
.sc-visit-hub__chevron { font-size: 1.25rem; line-height: 1; color: var(--sc-gold); flex-shrink: 0; transition: transform .25s; }
.sc-visit-hub__question[aria-expanded="true"] .sc-visit-hub__chevron { transform: rotate(180deg); }
.sc-visit-hub__answer {
	padding: 0 1.125rem 1.125rem;
	font-size: .9375rem;
	line-height: 1.7;
	color: rgba(0,0,0,.72);
}
.sc-visit-hub__answer[hidden] { display: none; }
.sc-visit-hub__answer-body p { margin: 0 0 .5rem; }
.sc-visit-hub__answer-body p:last-child { margin-bottom: 0; }
.sc-visit-hub__answer-body a { color: var(--sc-plum); text-decoration: underline; }
/* RTE answer lists — restore markers stripped by the global reset (not .sc-rte). */
.sc-visit-hub__answer-body ul, .sc-visit-hub__answer-body ol { list-style: revert; padding-left: 1.25rem; margin: 0 0 .5rem; }
.sc-visit-hub__answer-body li { margin-bottom: .25rem; }
.sc-visit-hub__answer-body ul:last-child, .sc-visit-hub__answer-body ol:last-child { margin-bottom: 0; }
.sc-visit-hub__cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .75rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-plum);
	text-decoration: none;
	transition: opacity .2s;
}
.sc-visit-hub__cta:hover { opacity: .75; }
.sc-visit-hub__cta-arrow { font-size: 1.125rem; line-height: 1; transition: transform .2s; }
.sc-visit-hub__cta:hover .sc-visit-hub__cta-arrow { transform: translateX(2px); }

/* Compact modifier — used inside the nav dropdown */
.sc-visit-hub__list--compact { gap: .375rem; margin-bottom: .25rem; }
.sc-visit-hub__list--compact .sc-visit-hub__item { border-radius: 8px; border-color: rgba(220,183,65,.18); }
.sc-visit-hub__list--compact .sc-visit-hub__question { gap: .75rem; padding: .75rem .875rem; font-size: .8125rem; }
.sc-visit-hub__list--compact .sc-visit-hub__icon { font-size: 1.25rem; }
.sc-visit-hub__list--compact .sc-visit-hub__chevron { font-size: 1.125rem; }
.sc-visit-hub__list--compact .sc-visit-hub__answer { padding: 0 .875rem .875rem; font-size: .75rem; line-height: 1.6; }
.sc-visit-hub__list--compact .sc-visit-hub__cta { margin-top: .65rem; font-size: .6875rem; }
.sc-visit-hub__list--compact .sc-visit-hub__cta-arrow { font-size: 1rem; }

/* More dropdown — simple vertical link list (reuses .sc-nav__dropdown shell) */
.sc-nav__dropdown--more { width: 240px; }
.sc-nav__more-list { list-style: none; margin: 0; padding: .5rem 0; }
.sc-nav__more-list li { margin: 0; }
.sc-nav__more-link {
	display: block;
	padding: .65rem 1.25rem;
	color: var(--sc-text);
	text-decoration: none;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background .2s, color .2s;
}
.sc-nav__more-link:hover,
.sc-nav__more-link:focus-visible {
	background: #f9f6f1;
	color: var(--sc-plum);
	outline: none;
}
.sc-nav__more-link.is-active { color: var(--sc-plum); }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */

.sc-drawer {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	background: var(--sc-plum);
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
	visibility: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 🔴 `visibility 0s` HERE IS LOAD-BEARING — IT IS AN ACCESSIBILITY FIX, NOT A TIDY-UP.
   A transition takes its timing from the AFTER-CHANGE style, so a transition declared on the OPEN
   state governs OPENING ONLY and the base rule still governs CLOSING. That asymmetry is the whole
   point:
     • OPEN  → visibility flips to `visible` INSTANTLY, so _MobileDrawer.cshtml's openDrawer() can
               focus the close button in the same tick. With the base `visibility .3s` the drawer is
               still computed `hidden` at that instant, a hidden element cannot take focus, and
               `.focus()` is a SILENT no-op — focus stayed on the burger, behind a full-screen
               aria-modal overlay, and the drawer's Tab trap never engaged (measured 2026-09-11:
               computed `hidden`, focus landed false, activeElement `.sc-nav__hamburger`).
     • CLOSE → the base rule's `visibility .3s` still applies, which is what keeps the drawer
               visible while it slides out. Do NOT move this onto `.sc-drawer` and do NOT delete it
               as duplication: either one re-breaks focus or kills the closing animation.
   No `prefers-reduced-motion` rule touches `.sc-drawer` (swept 2026-09-11), so there is no
   reduced-motion path that needs the same treatment.
   📖 tasks/_done/bug-mobile-drawer-open-focus-lost.md */
.sc-drawer[aria-hidden="false"] { transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s; transform: translateX(0); visibility: visible; }
/* Header mirrors the nav bar's <=1024px grid — the same 2.25rem 1fr 2.25rem tracks and 0 1rem
   padding as .sc-nav__inner in RESPONSIVE — NAV BREAKPOINT (<=1024px) — so the burger reads as
   turning into the close button in place. Both children are placed EXPLICITLY by grid-column, so
   the layout is correct whatever the DOM order: this static sheet and _MobileDrawer.cshtml reach a
   host by different routes (static paste vs compiled deploy, CLAUDE.md §8) and the header must not
   render wrong in between. The close button is 2.5rem against the burger's 2.25rem — justify-self:
   center on the 2.25rem track puts the two centres on the same x without resizing either hit area,
   which is the acceptance test. Column 3 is deliberately empty, mirroring .sc-nav__actions. */
.sc-drawer__header { display: grid; grid-template-columns: 2.25rem 1fr 2.25rem; align-items: center; gap: 0; flex-shrink: 0; height: var(--sc-nav-height); padding: 0 1rem; border-bottom: 1px solid rgba(220,183,65,.2); }
.sc-drawer__logo { grid-column: 2; justify-self: center; display: flex; align-items: center; text-decoration: none; }
.sc-drawer__logo img { height: 32px; width: auto; }
.sc-drawer__close { grid-column: 1; justify-self: center; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: none; border: none; color: rgba(255,255,255,.85); cursor: pointer; border-radius: 50%; transition: color .2s, background .2s; padding: 0; }
.sc-drawer__close:hover, .sc-drawer__close:focus-visible { color: var(--sc-gold); background: rgba(220,183,65,.1); outline: none; }
.sc-drawer__nav { flex: 1; padding: .5rem 0; }
.sc-drawer__links { list-style: none; margin: 0; padding: 0; }

.sc-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .03em;
	border-bottom: 1px solid rgba(255,255,255,.06);
	transition: color .2s, background .2s;
}

.sc-drawer__link:hover, .sc-drawer__link:focus-visible { color: var(--sc-gold); background: rgba(220,183,65,.06); outline: none; }
.sc-drawer__link.is-active { color: var(--sc-gold); border-left: 3px solid var(--sc-gold); padding-left: calc(1.5rem - 3px); }
.sc-drawer__link svg { flex-shrink: 0; opacity: .4; transition: opacity .2s, transform .2s; }
.sc-drawer__link:hover svg, .sc-drawer__link.is-active svg { opacity: 1; transform: translateX(3px); }
.sc-drawer__footer { flex-shrink: 0; padding: 1.25rem 1.5rem; border-top: 1px solid rgba(220,183,65,.2); display: flex; flex-direction: column; gap: .75rem; }
.sc-drawer__show-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; text-align: center; }

/* Drawer "More" submenu (accordion) */
.sc-drawer__item--has-submenu { list-style: none; }
.sc-drawer__submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.5rem;
	background: none;
	border: none;
	color: rgba(255,255,255,.85);
	font-family: var(--sc-font);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-align: left;
	border-bottom: 1px solid rgba(255,255,255,.06);
	cursor: pointer;
	transition: color .2s, background .2s;
}
.sc-drawer__submenu-toggle:hover,
.sc-drawer__submenu-toggle:focus-visible {
	color: var(--sc-gold);
	background: rgba(220,183,65,.06);
	outline: none;
}
.sc-drawer__submenu-chevron {
	flex-shrink: 0;
	opacity: .4;
	transition: transform .25s, opacity .2s;
}
.sc-drawer__submenu-toggle:hover .sc-drawer__submenu-chevron,
.sc-drawer__submenu-toggle[aria-expanded="true"] .sc-drawer__submenu-chevron { opacity: 1; }
.sc-drawer__submenu-toggle[aria-expanded="true"] .sc-drawer__submenu-chevron { transform: rotate(180deg); }
.sc-drawer__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	background: rgba(0,0,0,.2);
	transition: max-height .3s ease;
}
.sc-drawer__submenu.is-open { max-height: 800px; }
.sc-drawer__sublink {
	display: block;
	padding: .85rem 1.5rem .85rem 2.5rem;
	color: rgba(255,255,255,.75);
	text-decoration: none;
	font-size: .9375rem;
	font-weight: 500;
	border-bottom: 1px solid rgba(255,255,255,.04);
	transition: color .2s, background .2s;
}
.sc-drawer__sublink:hover,
.sc-drawer__sublink:focus-visible {
	color: var(--sc-gold);
	background: rgba(220,183,65,.06);
	outline: none;
}
.sc-drawer__sublink.is-active { color: var(--sc-gold); }
.sc-drawer__search-form { display: flex; gap: .5rem; }
.sc-drawer__search-input { flex: 1; height: 2.75rem; padding: 0 1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(220,183,65,.4); border-radius: var(--sc-radius-btn); color: var(--sc-white); font-family: var(--sc-font); font-size: .9375rem; }
.sc-drawer__search-input::placeholder { color: rgba(255,255,255,.45); }
.sc-drawer__search-input:focus { outline: none; border-color: var(--sc-gold); background: rgba(255,255,255,.1); }
.sc-drawer__search-submit { height: 2.75rem; padding: 0 1.1rem; background: rgba(255,255,255,.1); color: var(--sc-white); border: 1px solid rgba(255,255,255,.2); border-radius: var(--sc-radius-btn); font-family: var(--sc-font); font-weight: 600; font-size: .875rem; cursor: pointer; transition: background .2s; }
.sc-drawer__search-submit:hover { background: rgba(255,255,255,.16); }

/* ============================================================
   FOOTER
   ============================================================ */

/* ── FOOTER — plum gradient surface (design refresh 2026-08, spec 02) ─────────
   Was `background: #1a1a1a` — a flat near-black that had never been migrated to the
   brand Plum, so §2's "Black is casino UI only, never a brand surface" applied to it
   the whole time. It now takes the shared token; there is no second literal.

   🔴 EVERY FOREGROUND HERE IS OPAQUE, AND THAT IS THE POINT. The old values were
   rgba(255,255,255,.4–.75) over ONE flat colour, where an alpha is just a shade. Over
   a gradient it is not: the same declaration renders lighter at the top and darker at
   the foot. Measured on the old flat #1a1a1a vs the new ramp, worst case at the
   LIGHTER top (#52152F) — which is the new worst case, not the bottom:
     body/tagline .75 white   10.19 → 8.33
     links        .72 white    9.46 → 7.79
     copyright/legal .4 white  3.83 → 3.38   ← already failed AA before this change
   The first two are comfortable either way and were converted for consistency of
   mechanism; the third was a live AA failure that the gradient made worse, so it is
   now --sc-plum-40 (5.52 top / 7.80 foot). Gold headings measure 7.23 at the top. */
.sc-footer { background: var(--sc-grad-plum); color: var(--sc-plum-20); font-size: .875rem; margin-top: auto; }

.sc-footer__main {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 3.5rem 1.5rem 2.5rem;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2.5rem 3rem;
}

.sc-footer__heading { color: var(--sc-gold); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; }
.sc-footer__logo { display: inline-block; margin-bottom: 1rem; }
.sc-footer__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.sc-footer__tagline { margin: 0 0 1.25rem; line-height: 1.6; max-width: 260px; color: var(--sc-plum-20); }
.sc-footer__social { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.sc-footer__social-link { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7); text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.sc-footer__social-link:hover, .sc-footer__social-link:focus-visible { border-color: var(--sc-gold); color: var(--sc-gold); background: rgba(220,183,65,.08); outline: none; }
.sc-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.sc-footer__link { color: var(--sc-plum-20); text-decoration: none; line-height: 1.4; transition: color .2s; }
.sc-footer__link:hover, .sc-footer__link:focus-visible { color: var(--sc-gold); outline: none; }
.sc-footer__address { font-style: normal; line-height: 1.7; margin-top: .25rem; }
.sc-footer__address a { color: var(--sc-plum-20); text-decoration: none; transition: color .2s; }
.sc-footer__address a:hover { color: var(--sc-gold); }
/* 🔴 THE TWO FOOT BANDS ARE SEPARATED BY HAIRLINES, NOT BY FILL — measured, not assumed.
   Both carried `background: #111`, which against the gradient's dark end (#1C0309)
   measures **1.04:1**. That is not "subtle", it is invisible: the compliance bar and the
   copyright strip would have merged into the gradient and into each other. Per the spec
   the fix is a separator, never a lighter compliance bar — the R20 strip is compliance
   copy and its prominence may not be reduced. So both bands go transparent (letting the
   ramp run through, which is what makes the foot naturally darkest) and are delimited by
   an opaque --sc-plum-80 hairline that stays visible on near-black. */
.sc-footer__divider { border: none; border-top: 1px solid var(--sc-plum-80); margin: 0; }
.sc-footer__rg { background: transparent; padding: .875rem 1.5rem; }
.sc-footer__rg-inner { max-width: var(--sc-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sc-footer__rg-msg {
	margin: 0;
	text-align: center;
	font-size: .75rem;
	line-height: 1.5;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
}
.sc-footer__rg-msg p { margin: 0; }
.sc-footer__rg-msg p + p { margin-top: .25rem; }
.sc-footer__rg-msg a { color: var(--sc-white); font-weight: 600; text-decoration: none; }
.sc-footer__rg-msg a:hover { text-decoration: underline; }
.sc-footer__rg-detail { font-size: .75rem; color: var(--sc-plum-40); }
.sc-footer__rg-detail a { color: rgba(255,255,255,.65); text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.sc-footer__rg-detail a:hover { color: var(--sc-gold); }
.sc-footer__bottom { background: transparent; border-top: 1px solid var(--sc-plum-80); padding: 1rem 1.5rem; }
.sc-footer__bottom-inner { max-width: var(--sc-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sc-footer__copyright { font-size: .75rem; color: var(--sc-plum-40); margin: 0; }
.sc-footer__legal-links { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.sc-footer__legal-link { font-size: .75rem; color: var(--sc-plum-40); text-decoration: none; transition: color .2s; }
.sc-footer__legal-link:hover, .sc-footer__legal-link:focus-visible { color: var(--sc-white); outline: none; }

/* ============================================================
   BREADCRUMB
   position: relative establishes a stacking context so brand
   stylesheet pseudo-elements (e.g. Horizon wave ::after) can
   never overlap the breadcrumb regardless of their z-index.
   ============================================================ */

.sc-breadcrumb {
	position: relative;
	z-index: 1;
	padding: .875rem 0;
	border-bottom: 1px solid rgba(0,0,0,.07);
}
.sc-breadcrumb__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 40px; }
.sc-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.sc-breadcrumb__item { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: rgba(0,0,0,.45); }
.sc-breadcrumb__link { color: rgba(0,0,0,.5); text-decoration: none; font-weight: 500; transition: color .15s; }
.sc-breadcrumb__link:hover, .sc-breadcrumb__link:focus-visible { color: var(--sc-plum); outline: none; }
.sc-breadcrumb__item--current { color: var(--sc-text); font-weight: 600; }
.sc-breadcrumb__sep { color: rgba(0,0,0,.25); flex-shrink: 0; }

/* ============================================================
   PAGE HEADER (non-hero pages)
   ============================================================ */

.sc-page-header { padding: 3rem 0 2.5rem; background: #f5f5f5; border-bottom: 1px solid rgba(0,0,0,.08); }
.sc-page-header__title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; color: var(--sc-text); margin: 0 0 .5rem; }
.sc-page-header__meta { font-size: .875rem; color: rgba(0,0,0,.5); margin: 0; }

/* ============================================================
   HERO (single fullscreen — inner pages)
   ============================================================ */

.sc-hero { position: relative; width: 100%; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; background: var(--sc-plum); }
.sc-hero--tall { min-height: 680px; }
.sc-hero--standard { min-height: 320px; }
@media (max-width: 600px) { .sc-hero--standard { min-height: 240px; } }
/* Solid-colour header (functional contentPage — "Use Solid Colour Header").
   No <img>/overlay; the template sets background-color + heading colour inline.
   Height comes from .sc-hero--standard; this var only shows if the inline
   colour is ever absent. Plain @media in this static file (never @@media). */
.sc-hero--solid { background-color: var(--sc-plum); }

/* Detail heroes share the hotel height */
.sc-hero--restaurant,
.sc-hero--skytower { min-height: 600px; }
.sc-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.03); transition: transform 6s ease-out; }
.sc-hero.is-visible .sc-hero__bg { transform: scale(1); }
.sc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sc-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(68,11,34,.82) 0%, rgba(68,11,34,.38) 50%, rgba(68,11,34,.12) 100%); }
.sc-hero__overlay--light { background: linear-gradient(to top, rgba(68,11,34,.58) 0%, rgba(68,11,34,.18) 60%, transparent 100%); }
.sc-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--sc-max-width); margin: 0 auto; padding: 3rem 40px 3.5rem; color: var(--sc-white); }
.sc-hero__eyebrow { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-gold); margin-bottom: .875rem; }
.sc-hero__heading { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; text-shadow: 0 2px 16px rgba(0,0,0,.4); max-width: 780px; margin-bottom: 1rem; }
.sc-hero__subheading { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 400; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 560px; margin-bottom: 1.75rem; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.sc-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Detail heroes (Restaurant/Hotel) place the CTA row inside .sc-hero__inner, whose
   580px text measure was also trapping the buttons — so 3–5 CTAs wrapped into a
   cramped 2-per-row stack even on wide screens. From 768px up, let the CTA row
   size to its content and use the available hero width so the buttons sit on one
   line, wrapping only when they genuinely run out of room (capped so it never runs
   the full content width). Scoped to .sc-hero__inner so the generic _Hero (CTAs
   directly in .sc-hero__content) and the mobile column-stack rules are untouched. */
@media (min-width: 768px) {
	.sc-hero__inner .sc-hero__ctas { width: max-content; max-width: min(1180px, calc(100vw - 80px)); }
}
.sc-hero--home { height: 100svh; min-height: 540px; max-height: 900px; align-items: center; }
.sc-hero__media { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
/* Video Header — full-bleed cover video/iframe background (decorative). The
   .sc-hero plum surface + .sc-hero__overlay scrim are the still fallback shown
   before/without the media and under prefers-reduced-motion. Rendered by the
   _VideoHero partial; the base .sc-hero__video (absolute cover) is defined above,
   and DOM order keeps the overlay + content painting over it. */
.sc-hero--video { background: var(--sc-plum); }
.sc-hero__video--embed { overflow: hidden; }
.sc-hero__video-frame { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	/* No autoplay for reduced-motion visitors: the iframe is never activated
	   (site.js skips it); hide its box so only the plum surface + scrim show.
	   The <video> is paused by site.js (its still first frame is motionless). */
	.sc-hero__video--embed { display: none; }
}
.sc-hero__inner { max-width: 580px; }
.sc-hero__title { font-size: clamp(2rem, 5.5vw, 3.75rem); font-weight: 900; line-height: 1.05; color: var(--sc-white); margin: 0 0 1rem; }
.sc-hero__subtitle { font-size: clamp(.9375rem, 1.6vw, 1.125rem); font-weight: 400; color: rgba(255,255,255,.82); line-height: 1.6; margin: 0 0 2rem; }
.sc-hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .375rem; color: rgba(255,255,255,.5); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; animation: sc-bounce 2s infinite; }

@keyframes sc-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   HOMEPAGE — SHARED SECTION LAYOUT
   ============================================================ */

.sc-hp-inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
}

.sc-hp-section-hdr {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.sc-hp-section-title {
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
	position: relative;
}

.sc-hp-section-title::after {
	content: '';
	display: block;
	width: 36px;
	height: 3px;
	background: var(--sc-gold);
	margin-top: 8px;
	border-radius: 2px;
}

.sc-viewall-btn {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-plum);
	/* Design refresh 2026-08 (Part A, button normalisation): was
	   `border-radius: 4px` + `1px solid rgba(220,183,65,.3)`. Now a full pill with a
	   visible plum hairline — a small-scale .sc-btn--outline, which is what makes it
	   read as one family with .sc-btn. Hover follows .sc-btn--outline for the same
	   reason (the old gold tint under a plum hairline is incoherent).
	   ⚠ Size and letter-spacing are deliberately UNCHANGED — this control sits inline
	   in section headers and scaling it up would shift every header's vertical rhythm.
	   Do NOT merge it into .sc-btn. */
	border: 1px solid var(--sc-plum);
	padding: 8px 20px;
	border-radius: var(--sc-radius-btn);
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
	white-space: nowrap;
	flex-shrink: 0;
}

.sc-viewall-btn:hover {
	background: var(--sc-plum);
	color: var(--sc-white);
	border-color: var(--sc-plum);
}

.sc-hp-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.sc-hp-grid4--3col {
	grid-template-columns: repeat(3, 1fr);
}

/* Sky Tower Experiences — image-top cards (reuse .sc-hp-card) in a 3-up grid
   that collapses straight to one stacked column, so an odd third tile
   (SkyWalk / SkyJump / SkyRide) never orphans into a 2 + 1 layout. */
.sc-hp-grid-exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .sc-hp-grid-exp { grid-template-columns: 1fr; } }

/* ============================================================
   HOMEPAGE CARD  (sc-hp-card)
   ============================================================ */

.sc-hp-card {
	display: flex;
	flex-direction: column;
	background: #f8f8f8;
	border: 1px solid rgba(68,11,34,.08);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--sc-text);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.sc-hp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0,0,0,.14);
	border-color: rgba(220,183,65,.25);
}

.sc-hp-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-hp-card__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/10;
	background: #e8e8e8;
	flex-shrink: 0;
}

.sc-hp-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}


.sc-hp-card__cat {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-text);
	background: var(--sc-gold);
	padding: 4px 10px;
	border-radius: 3px;
}

.sc-hp-card__body {
	padding: 18px 22px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sc-hp-card__title {
	/* 🔴 `color: inherit` is LOAD-BEARING and is not decoration. This rule carried no
	   colour at all until 2026-08-21, so the h3 inherited --sc-text from .sc-hp-card —
	   which works right up until the card is placed on a coloured surface. A direct rule
	   beats inheritance, so `.sc-surface--grad :where(h3)` (0,1,0) would have painted
	   every hotel card title WHITE on a cream card the moment the band went on. This is
	   the same failure Opening Hours hit on 2026-08-20.
	   It is a provable NO-OP off the band: it inherits from .sc-hp-card__body, which
	   inherits the same --sc-text the h3 was already getting. Do not "tidy" it away. */
	color: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sc-hp-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: #999;
	margin-top: auto;
}

.sc-hp-meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #bbb;
	display: inline-block;
	flex-shrink: 0;
}

.sc-hp-card__excerpt {
	font-size: 13px;
	color: #666;
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================
   HOMEPAGE BAND — a homepage section on the plum gradient
   (design refresh 2026-08, spec 04 Part B)
   ============================================================
   The band is applied by putting `sc-surface--grad` on the <section> itself, so it runs
   edge to edge while .sc-hp-inner keeps the content in the 1400px column. The gradient
   is CONSUMED from --sc-grad-plum — no second gradient literal is declared here, and the
   count of them in this file must not go up.
   ⚠ Count the DECLARATIONS, not the word: `/usr/bin/grep -oE 'linear-gradient\(' … | wc -l`.
   A bare `grep -o 'linear-gradient'` also matches the prose in this comment and in the one
   at the top of the file, so it over-reports by two and a correct build looks like a
   regression (CLAUDE.md §9 — a recorded test must not be able to match its own commentary).

   🔴 Everything below is a CONSUMER override, which is exactly what the surface utility's
   own comment says the consumer owes it: "the band cannot know about them". Every rule is
   scoped to `.sc-surface--grad …` and NEVER written against bare `.sc-hp-card` —
   SkyTower.cshtml uses the same card class off the band and must not change.

   ⚠ Colours are SAMPLED from homepage_hotels_new.png, not chosen, and every one of them
   maps onto an existing token:
     card surface  --sc-cream (#F8F4E8)   warm cream — the comp is NOT pure white
     card title    #440B22 = --sc-plum       14.50:1 on the cream
     card copy     #693C4E = --sc-plum-80     8.10:1 on the cream
     eyebrow       #DCB741 = --sc-gold        7.23:1  (rule lives with the utility, Tier 2)
     heading       #EDDBA0 -> --sc-gold-40   10.80:1
   Contrast is measured against the gradient's LIGHTEST stop #52152F, which is the worst
   case. The comp's own band top (#5F2F42) is lighter than ours, so the token is the safer
   of the two.

   📌 .sc-hp-band replaces .sc-section--tight on the band (it does not sit alongside it) —
   there is deliberately no specificity tie to reason about, and if this rule were ever
   removed the section falls back to .sc-section's own 4rem, which is a sane default. */
.sc-hp-band { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }

/* The homepage heading has no colour of its own, so on the band it would take white from
   the utility's :where(h2) default. The comp wants the pale gold. */
.sc-surface--grad .sc-hp-section-title { color: var(--sc-gold-40); }

.sc-surface--grad .sc-hp-card {
	background: var(--sc-cream);
	border-color: rgba(68,11,34,.12);
	color: var(--sc-plum);
}

/* Restated at (0,2,0) so it beats the `color: inherit` hardening on .sc-hp-card__title. */
.sc-surface--grad .sc-hp-card__title { color: var(--sc-plum); }
.sc-surface--grad .sc-hp-card__excerpt { color: var(--sc-plum-80); }
.sc-surface--grad .sc-hp-card:hover { border-color: rgba(220,183,65,.45); }
.sc-surface--grad .sc-hp-card:focus-visible { outline-color: var(--sc-gold); }

/* ============================================================
   HOMEPAGE EVENT CAROUSEL  (sc-evc)
   ============================================================ */

.sc-hp-carousel-wrap { position: relative; }

.sc-hp-carousel {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 8px;
}

.sc-hp-carousel::-webkit-scrollbar { display: none; }

.sc-evc {
	min-width: 300px;
	max-width: 300px;
	background: #f8f8f8;
	border: 1px solid rgba(68,11,34,.08);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--sc-text);
	flex-shrink: 0;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.sc-evc:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0,0,0,.14);
	border-color: rgba(220,183,65,.25);
}

.sc-evc:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-evc__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/9;
	background: #e8e8e8;
}

.sc-evc__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}


.sc-evc__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(220,183,65,.3);
	border-radius: 6px;
	padding: 7px 13px;
	text-align: center;
	line-height: 1.1;
}

.sc-evc__badge-month {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-plum);
}

.sc-evc__badge-day {
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: var(--sc-text);
	margin-top: 2px;
}

.sc-evc__body { padding: 18px 20px 20px; }

.sc-evc__cat {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-plum);
	margin-bottom: 8px;
}

.sc-evc__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

.sc-evc__time {
	display: block;
	font-size: 12px;
	color: #999;
}

/* ── Carousel arrows (design refresh 2026-08, spec 04 Part C) ────────────
   The comp moves these OUT of the rail. They used to be absolutely positioned over
   the first and last cards (`--l { left: 4px }` / `--r { right: 4px }`); they now sit
   in a right-aligned flow row BELOW the track, which is why .sc-hp-arrows exists and
   why the two modifier classes carry no positioning any more. The modifiers are kept
   on the markup — they are the only thing distinguishing the two buttons visually if
   a direction-specific state is ever added.

   🔴 A real defect went out with the absolute positioning, recorded because the wrong
   form reads as correct: the old rule said `transform: translateY(-calc(50% + 4px))`.
   `-calc(…)` is not valid CSS — you cannot negate a calc() with a leading minus — so
   the WHOLE transform declaration was dropped by the parser and the arrows were never
   vertically centred at all. The valid form is `calc(-50% - 4px)`.

   ⚠ Colours are measured off `homepage_events_new.png`: enabled border + icon are
   `#440B22` = --sc-plum. The comp also shows the LEFT arrow greyed at rest (the rail
   starts at 0) in `#A1858F` ≈ --sc-plum-40 — deliberately NOT built, because a
   disabled state that does not update on scroll is worse than none and the estate's
   home for that behaviour is site.js, which spec 04 does not own. The `[disabled]`
   rules below ARE present and correct, but nothing sets the attribute — they are a
   dormant hook, so the follow-up is a scroll listener and not a restyle. */
.sc-hp-arrows {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 20px;
}

.sc-hp-arr {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--sc-plum);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
	color: var(--sc-plum);
	padding: 0;
	flex-shrink: 0;
}

.sc-hp-arr:hover { background: var(--sc-plum); border-color: var(--sc-plum); color: var(--sc-white); }
.sc-hp-arr:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }
.sc-hp-arr[disabled] { border-color: var(--sc-plum-40); color: var(--sc-plum-40); cursor: default; }
.sc-hp-arr[disabled]:hover { background: transparent; color: var(--sc-plum-40); }

/* ============================================================
   HOMEPAGE FEATURED HERO BANNER  (sc-hp-feat)
   ============================================================ */

.sc-hp-feat { padding-top: 2.5rem; }

.sc-hp-feat__inner {
	display: block;
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	/* Design refresh 2026-08 (spec 04, Part A): was 400px. The comp's hero box measures
	   1348 x 330 = 4.085:1; at the real layout width (.sc-hp-inner 1400 max, minus 2 x 40px
	   padding = 1320px) that ratio gives 323px, so 330px with a little headroom.
	   🔴 min-height is the safe lever HERE ONLY BECAUSE no aspect-ratio is active on this
	   component. The `aspect-ratio: 16/7` further down belongs to .sc-feature-panel__media,
	   which is a different thing. With a ratio active, a height clamp preserves the ratio by
	   collapsing the WIDTH instead (CLAUDE.md §7). Re-check before changing this again.
	   ⚠ The image is object-fit: cover, so the height IS the crop — a shorter box keeps less
	   of the picture. It was looked at, not just calculated. */
	min-height: 330px;
	text-decoration: none;
	background: var(--sc-plum);
}

.sc-hp-feat__inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform .6s ease;
}


.sc-hp-feat__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 50%, transparent 100%);
	z-index: 1;
}

.sc-hp-feat__content {
	position: relative;
	z-index: 2;
	/* Was `display: block`. Centred 2026-08-21 (spec 04, Part A) because LOOKING at the
	   shortened hero — which the spec insisted on — showed the problem the number could not:
	   the content is top-aligned, so taking 70px out of the box left the copy hanging in the
	   top two-thirds with dead space under the CTA. The comp fills the box, but it does so
	   with an eyebrow this build deliberately does not have, so matching it by height alone
	   was never going to work.
	   ⚠ Safe with .sc-hp-feat__content-inner: in a column flex container the child's CROSS
	   size is its width, and `align-items: stretch` caps at its own max-width (520px) and
	   sits at cross-start — i.e. left, exactly where block layout put it. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 56px;
	/* Kept in step with .sc-hp-feat__inner above — the two together are the hero's height. */
	min-height: 330px;
}

.sc-hp-feat__content-inner { max-width: 520px; }

.sc-hp-feat__label {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--sc-text);
	background: var(--sc-gold);
	padding: 6px 16px;
	border-radius: 3px;
	margin-bottom: 18px;
}

.sc-hp-feat__title {
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--sc-white);
	margin: 0 0 14px;
	max-width: 520px;
}

.sc-hp-feat__excerpt {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255,255,255,.72);
	margin: 0 0 24px;
	max-width: 480px;
}

.sc-hp-feat__cta {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-gold);
	border: 1px solid rgba(220,183,65,.5);
	padding: 12px 28px;
	/* Design refresh 2026-08 (Part A): was 4px. Radius ONLY — this CTA sits on a dark
	   featured banner, where gold is the correct accent per §2. Colours untouched. */
	border-radius: var(--sc-radius-btn);
	transition: background .2s, border-color .2s;
}

.sc-hp-feat__inner:hover .sc-hp-feat__cta { background: rgba(220,183,65,.15); border-color: var(--sc-gold); }

/* ── Top row: mosaic (left ~2/3) + SHOW Feature Panel rail (right ~1/3) ── */
.sc-hp-toprow {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 16px 40px 0;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
	align-items: stretch;
}

/* Nested mosaic drops its own container styling — the toprow owns width + gutter */
.sc-hp-toprow .sc-mosaic {
	max-width: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

/* Inside the toprow the inner grid fills the stretched cell, so the mosaic
   grows to match the taller panel (no fixed numbers, no gap below the tiles) */
.sc-hp-toprow .sc-mosaic__grid {
	height: 100%;
}

/* Panel-only state (no mosaic) — keep it inside the content width + gutter
   instead of bleeding edge-to-edge */
.sc-hp-panel-solo {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 16px 40px 0;
}

/* ============================================================
   HOMEPAGE FEATURED PANEL  (sc-feature-panel) — SHOW by SkyCity widget
   ============================================================ */

.sc-feature-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--sc-plum);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	color: var(--sc-white);
}

.sc-feature-panel__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	background: #1c1c1c;
	overflow: hidden;
}

.sc-feature-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sc-feature-panel__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 28px 30px 30px;
}

.sc-feature-panel__summary {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,.72);
	margin: 0 0 20px;
}

.sc-feature-panel__links {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.sc-feature-panel__link-item + .sc-feature-panel__link-item { border-top: 1px solid rgba(255,255,255,.1); }

.sc-feature-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	text-decoration: none;
	color: var(--sc-white);
	font-size: 14px;
	font-weight: 600;
	transition: color .2s ease, padding-left .2s ease;
}

.sc-feature-panel__link:hover,
.sc-feature-panel__link:focus-visible {
	color: var(--sc-gold);
	padding-left: 6px;
}

.sc-feature-panel__link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-feature-panel__link-icon {
	font-size: 20px;
	color: var(--sc-gold);
	flex-shrink: 0;
	transition: transform .2s ease;
}

.sc-feature-panel__link:hover .sc-feature-panel__link-icon { transform: translateX(4px); }

.sc-feature-panel__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 28px;
	border-radius: var(--sc-radius-btn);
	transition: background .2s ease, transform .2s ease;
}

.sc-feature-panel__cta:hover { background: #d9bd8d; transform: translateY(-2px); }
.sc-feature-panel__cta:focus-visible { outline: 2px solid var(--sc-white); outline-offset: 3px; }

/* Stack the top row on narrower viewports; the panel drops to image + CTA only */
@media (max-width: 900px) {
	.sc-hp-toprow {
		grid-template-columns: 1fr;
		padding: 16px 24px 0;
	}
	.sc-hp-panel-solo { padding: 16px 24px 0; }
	.sc-feature-panel__summary,
	.sc-feature-panel__links { display: none; }
	.sc-feature-panel__body { padding: 22px 24px 24px; }
}

@media (max-width: 640px) {
	.sc-hp-toprow,
	.sc-hp-panel-solo { padding: 12px 16px 0; }
}

/* ============================================================
   HOMEPAGE DUO CARDS  (sc-hp-duo)
   ============================================================ */

.sc-hp-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.sc-hp-duo {
	display: grid;
	grid-template-columns: 180px 1fr;
	background: var(--sc-white);
	border: 1px solid rgba(68,11,34,.08);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--sc-text);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	max-height: 140px;
}

.sc-hp-duo:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 180px 1fr; }

.sc-hp-duo:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.12); border-color: rgba(220,183,65,.25); }
.sc-hp-duo:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-hp-duo__img { position: relative; overflow: hidden; background: #e8e8e8; }
.sc-hp-duo__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }

.sc-hp-duo__body { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.sc-hp-duo__title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.sc-hp-duo__excerpt { font-size: 13px; line-height: 1.55; color: var(--sc-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Homepage responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
	.sc-hp-grid4 { grid-template-columns: repeat(2, 1fr); }
	.sc-hp-grid4--3col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.sc-hp-inner { padding: 0 24px; }
	.sc-hp-feat { padding-top: 2rem; }
}

@media (max-width: 860px) {
	.sc-hp-grid4--3col { grid-template-columns: repeat(2, 1fr); }
	.sc-hp-duo-grid { grid-template-columns: 1fr; }
	.sc-hp-duo, .sc-hp-duo:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: 140px 1fr; max-height: 120px; }
}

@media (max-width: 768px) {
	.sc-hp-grid4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.sc-hp-grid4--3col { grid-template-columns: repeat(2, 1fr); }
	/* 🔴 .sc-hp-feat__inner MUST be restated here. Until 2026-08-21 it was not, so the base
	   value (then 400px) governed tablet on its own and the 320px below was dead code — the
	   exact "shorter on desktop, still tall on tablet" split spec 04 was told to avoid.
	   The two now move together; change them together. */
	.sc-hp-feat__inner { min-height: 300px; }
	.sc-hp-feat__content { padding: 32px 32px; min-height: 300px; }
	.sc-hp-feat__title { font-size: clamp(20px, 5vw, 28px); }
	.sc-hp-feat__excerpt { display: none; }
}

@media (max-width: 640px) {
	.sc-hp-inner { padding: 0 16px; }
	.sc-hp-grid4, .sc-hp-grid4--3col { grid-template-columns: 1fr; gap: 14px; }
	.sc-hp-duo-grid { grid-template-columns: 1fr; }
	.sc-hp-duo, .sc-hp-duo:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: 110px 1fr; max-height: 110px; }
	.sc-hp-feat { padding-top: 1.5rem; }
	.sc-hp-feat__inner { min-height: 280px; }
	.sc-hp-feat__content { padding: 24px 24px; min-height: 280px; }
	.sc-evc { min-width: 260px; max-width: 260px; }
}

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */

.sc-section__inner { max-width: var(--sc-max-width); margin: 0 auto; }
.sc-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.sc-section__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .375rem; }
/* 🔴 SPLIT FROM `.sc-oh__title` 2026-08-20 — DO NOT RE-GROUP THEM.
   These two shared ONE comma-separated declaration from at least 2026-06-09 until spec 02a,
   which restyled Opening Hours by editing that shared block in place. `.sc-section__title`
   came along silently and every "What's On at …", "Location & Contact", "Our Rooms & Suites"
   and "Menus" heading on the estate rendered in 3.5rem gold Specter — 7 render points across
   all four sites. Values below are restored verbatim from
   `_backups/css-2026-06-09/site.css:1418`.
   ⚠️ A comma group is a SHARED declaration. Restyling one member restyles every member, and
   the other members are invisible at the point of edit. */
.sc-section__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.15; margin: 0; }

/* 🔴 GOLD, DISPLAY FACE, LARGE — the comps put "Opening Hours" in the Specter display face at
   roughly 3.5rem in brand gold, not white body-weight text. Gold is legible here precisely
   because the surface is plum (CLAUDE.md §2); #EAD48D measures 9.49:1 on the band's lightest
   stop. ⚠️ This is an <h2>, so it does NOT collide with site.css's bare-`h1 !important` font
   rule — no !important needed, and none should be added. */
.sc-oh__title { font-family: var(--sc-font-display); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.01em; color: var(--sc-gold-60); margin: 0; }
.sc-oh__title { margin-bottom: 1.5rem; }
.sc-section--dark .sc-section__title { color: var(--sc-white); }
.sc-section__view-all { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-plum); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: .3rem; transition: gap .2s; }
.sc-section__view-all:hover { gap: .6rem; }

.sc-hotels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sc-hotel-card__name { font-size: 1.125rem; font-weight: 800; color: var(--sc-white); margin: 0 0 .375rem; line-height: 1.2; }
.sc-hotel-card__tagline { font-size: .8125rem; color: rgba(255,255,255,.75); margin: 0 0 .875rem; }

.sc-hotel-cards { display: grid; gap: 1.5rem; }
.sc-hotel-cards--4 { grid-template-columns: repeat(4, 1fr); }
.sc-hotel-cards--3 { grid-template-columns: repeat(3, 1fr); }
.sc-hotel-cards--2 { grid-template-columns: repeat(2, 1fr); }
.sc-hotel-cards--1 { grid-template-columns: 1fr; max-width: 480px; }

@media (max-width: 1024px) {
	.sc-hotel-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.sc-hotel-cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sc-hotel-cards--4,
	.sc-hotel-cards--3,
	.sc-hotel-cards--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   CARD GRID
   ============================================================ */

.sc-card-grid-section { padding: 4rem 0; }
.sc-card-grid-section--dark { background: var(--sc-plum); color: var(--sc-white); }
.sc-card-grid { display: grid; gap: 1.5rem; }
.sc-card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sc-card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sc-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.sc-card-grid-footer { text-align: center; margin-top: 2.5rem; }

/* ============================================================
   EVENT CARD
   ============================================================ */

.sc-event-card { display: flex; flex-direction: column; border-radius: var(--sc-radius-card); overflow: hidden; background: var(--sc-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); text-decoration: none; color: var(--sc-text); transition: transform .22s, box-shadow .22s; }
.sc-event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sc-event-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-event-card__img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #e8e8e8; flex-shrink: 0; }
.sc-event-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sc-event-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .625rem; background: var(--sc-gold); color: var(--sc-text); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; }
.sc-event-card__category { position: absolute; top: .75rem; right: .75rem; padding: .25rem .625rem; background: rgba(0,0,0,.55); color: var(--sc-white); font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 50px; backdrop-filter: blur(4px); }
.sc-event-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.125rem 1.25rem 1.25rem; gap: .375rem; }
.sc-event-card__date { font-size: .75rem; font-weight: 600; color: var(--sc-plum); letter-spacing: .04em; }
.sc-event-card__title { font-size: 1rem; font-weight: 700; line-height: 1.3; margin: .125rem 0 .375rem; }
.sc-event-card__summary { font-size: .875rem; color: rgba(0,0,0,.6); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-event-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid rgba(0,0,0,.07); }
.sc-event-card__price { font-size: .8125rem; font-weight: 700; color: var(--sc-text); }
.sc-event-card__arrow { width: 1.75rem; height: 1.75rem; background: var(--sc-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s; }
.sc-event-card:hover .sc-event-card__arrow { transform: translateX(3px); }

/* ============================================================
   RESTAURANT CARD
   ============================================================ */

.sc-restaurant-card { display: flex; flex-direction: column; border-radius: var(--sc-radius-card); overflow: hidden; background: var(--sc-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); text-decoration: none; color: var(--sc-text); transition: transform .22s, box-shadow .22s; height: 100%; }
.sc-restaurant-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sc-restaurant-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-restaurant-card__img-wrap { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #e8e8e8; flex-shrink: 0; }
.sc-restaurant-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sc-restaurant-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .625rem; background: var(--sc-gold); color: var(--sc-text); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; }
.sc-restaurant-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.125rem 1.25rem 1.25rem; }
.sc-restaurant-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.sc-restaurant-card__category { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-plum); }
.sc-restaurant-card__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.25); flex-shrink: 0; }
.sc-restaurant-card__price { font-size: .6875rem; font-weight: 600; color: rgba(0,0,0,.45); letter-spacing: .04em; }
.sc-restaurant-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin-bottom: .5rem; }
.sc-restaurant-card__summary { font-size: .875rem; color: rgba(0,0,0,.6); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-restaurant-card__footer { display: flex; align-items: center; gap: .625rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.07); }
.sc-restaurant-card__ctas { display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-restaurant-card__view { display: inline-flex; align-items: center; padding: .45rem 1rem; border: 2px solid rgba(0,0,0,.15); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--sc-text); transition: border-color .2s, background .2s; }
.sc-restaurant-card__view:hover { border-color: var(--sc-gold); background: rgba(220,183,65,.06); }
.sc-restaurant-card__book { display: inline-flex; align-items: center; padding: .45rem 1rem; background: var(--sc-gold); color: var(--sc-text); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; }
.sc-restaurant-card__book:hover { opacity: .88; }

/* ============================================================
   HOTEL CARD
   ============================================================ */

.sc-hotel-card { display: flex; flex-direction: column; border-radius: var(--sc-radius-card); overflow: hidden; background: var(--sc-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); color: var(--sc-text); transition: transform .22s, box-shadow .22s; height: 100%; }
.sc-hotel-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sc-hotel-card__img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e8e8e8; flex-shrink: 0; }
.sc-hotel-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.sc-hotel-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .625rem; background: var(--sc-gold); color: var(--sc-text); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; }
.sc-hotel-card__img-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--sc-gold); opacity: 0; transition: opacity .25s; }
.sc-hotel-card:hover .sc-hotel-card__img-wrap::after { opacity: 1; }
.sc-hotel-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.sc-hotel-card__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .375rem; }
.sc-hotel-card__title { font-size: 1.125rem; font-weight: 800; line-height: 1.25; margin-bottom: .625rem; text-decoration: none; color: inherit; }
.sc-hotel-card__title a { text-decoration: none; color: inherit; }
.sc-hotel-card__summary { font-size: .875rem; color: rgba(0,0,0,.6); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-hotel-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid rgba(0,0,0,.07); flex-wrap: wrap; }
.sc-hotel-card__price { font-size: .8125rem; color: rgba(0,0,0,.5); }
.sc-hotel-card__price strong { font-size: 1rem; font-weight: 800; color: var(--sc-text); }
.sc-hotel-card__ctas { display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-hotel-card__view { display: inline-flex; align-items: center; padding: .45rem 1rem; border: 2px solid rgba(0,0,0,.15); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--sc-text); transition: border-color .2s, background .2s; }
.sc-hotel-card__view:hover { border-color: var(--sc-gold); background: rgba(220,183,65,.06); }
.sc-hotel-card__book { display: inline-flex; align-items: center; padding: .45rem 1rem; background: var(--sc-gold); color: var(--sc-text); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; }
.sc-hotel-card__book:hover { opacity: .88; }

/* ============================================================
   BLOG CARD
   ============================================================ */

.sc-blog-card { display: flex; flex-direction: column; border-radius: var(--sc-radius-card); overflow: hidden; background: var(--sc-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); text-decoration: none; color: var(--sc-text); transition: transform .22s, box-shadow .22s; height: 100%; }
.sc-blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sc-blog-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-blog-card__img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #e8e8e8; flex-shrink: 0; }
.sc-blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.sc-blog-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .625rem; background: var(--sc-gold); color: var(--sc-text); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; }
.sc-blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.125rem 1.25rem 1.25rem; }
.sc-blog-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.sc-blog-card__category { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-plum); }
.sc-blog-card__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.25); flex-shrink: 0; }
.sc-blog-card__date { font-size: .6875rem; color: rgba(0,0,0,.45); font-weight: 500; }
.sc-blog-card__read-time { font-size: .6875rem; color: rgba(0,0,0,.35); }
.sc-blog-card__title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin-bottom: .5rem; }
.sc-blog-card__summary { font-size: .875rem; color: rgba(0,0,0,.6); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-blog-card__footer { display: flex; align-items: center; justify-content: flex-end; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid rgba(0,0,0,.07); }
.sc-blog-card__read-more { font-size: .8125rem; font-weight: 700; color: var(--sc-plum); text-decoration: none; display: flex; align-items: center; gap: .3rem; transition: gap .2s; }
.sc-blog-card:hover .sc-blog-card__read-more { gap: .55rem; }

/* ============================================================
   FAQ BLOCK
   ============================================================ */

/* ============================================================
   FAQ — rebuilt against faq_new.png (2026-08-20, spec 02a)
   Adam's note on the 02 build was "it doesn't look like the example". What the comp
   shows that a row-by-row diff missed: the number sits ALONE in a wide left column,
   at display size and full strength, so the block reads as a numbered index rather
   than a list with a small prefix — and an open item is ONE flat wheat block spanning
   the number column, the question AND the answer.
   ============================================================ */

/* 🔴 ONE SOURCE FOR THE COLUMN WIDTH. The button's grid, the answer's indent and the
   mobile override all derive from these two properties. They were three hardcoded
   copies of the same number in the 02 build, which is exactly how the answer drifts
   out of alignment with the question the next time the column moves. Change here only. */
.sc-faq {
	--faq-col: 44%;      /* number column — the comp puts the question ~44% across */
	--faq-pad: 2.5rem;   /* row horizontal padding — the comp's rows are generously inset */
	--faq-gap: 1rem;
	padding: 4rem 0;
	background: var(--sc-faq-surface);
}

/* 🔴 THE FAQ SURFACE IS ONE COLOUR, EDGE TO EDGE — AND IT TAKES TWO RULES TO BE ONE COLOUR.
   `.sc-faq` sits inside `<div class="sc-container">`, which caps its width, so painting only
   `.sc-faq` produces an INSET panel on a grey or white page — two surfaces, a visible seam, and
   the defect Adam reported 2026-08-21. The outer `<section id="faq">` is the full-bleed element,
   so it has to carry the same colour.
   `--sc-faq-surface` (#F8F4E8) is SAMPLED from the agency comp (`example.png`), where it covers
   67.4% of the image at a single flat value — corners and row gutters all read identically, which
   is what proves the comp intends ONE surface rather than two close ones. Not eyeballed.
   ⚠️ Six of the EIGHT callers wrap the partial in `.sc-section--grey` (#f5f5f5) and two in a plain
   white `.sc-section`; `#faq` (specificity 100) beats both, so this is CSS-only and no template
   needs re-pasting. Every caller carries `id="faq"` — AttractionItem, Casino, CasinoSection,
   ExplorePage, HeroPage, Hotel, Restaurant, SkyTower (re-counted 2026-08-21).
   🔴 **A new caller that omits the id gets the two-tone bug back**, so keep the id when adding one.
   ⚠️ This list read SIX until 2026-08-21 and was short by TWO, not one: `Casino` became a caller
   via `bug-casino-faq-duplicate`, but `CasinoSection` had been missing before that and nobody had
   counted. Re-derive it, do not increment it:
       /usr/bin/grep -rn 'id="faq"' Views/ | /usr/bin/grep -v _retired
   (that also matches two prose lines inside Casino/CasinoSection that say KEEP id="faq" — count
   distinct FILES with a `<section … id="faq">`, which is why this is a look, not a `wc -l`).
   📌 `.sc-faq__item`'s 12px radius is now invisible against a matching surround. Left in place —
   it still shapes the open item's gold panel, which is the only place it was ever visible. */
#faq { background: var(--sc-faq-surface); }
/* Panel fills its container (2026-08-17). _ArticleFaqs shares this rule as of 2026-08-24 — it was
   repointed onto .sc-faq__* and its own container rule in news.css was deleted. ⚠️ A 1000px cap was
   tried and REVERTED the same day: it fixed the measure but lost the full-width block. */
.sc-faq__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; }
.sc-faq__heading-block { text-align: left; margin-bottom: 2.5rem; }
.sc-faq__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .5rem; }
.sc-faq__heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--sc-plum); }

.sc-faq__list { display: block; counter-reset: sc-faq; }

/* Divider BETWEEN rows only. border-top on every row, removed on the first, gives
   "no divider after the last row" without a :last-child rule. The comp's rule is a
   warm hairline, not a neutral grey one — it sits on cream, not on white. */
/* 🔴 THE HORIZONTAL PADDING LIVES ON THE ITEM, NOT ON THE BUTTON, AND THAT IS LOAD-BEARING.
   --faq-col is a PERCENTAGE, and a percentage resolves against the containing block. With the
   padding on the button, the grid track would be 44% of (item − 2×pad) while the answer's
   indent would be 44% of the full item — a ~35px misalignment at this padding, i.e. the answer
   visibly out of step with the question it belongs to. Putting the padding here gives the button
   and the answer the SAME containing block, so both 44%s are the same 44%. */
.sc-faq__item { counter-increment: sc-faq; padding: 0 var(--faq-pad); border-top: 1px solid rgba(122,91,46,.18); border-radius: 12px; transition: background .2s; }
.sc-faq__item:first-child { border-top: 0; }

/* OPEN ROW — ONE FLAT COLOUR ACROSS THE WHOLE ITEM (Adam's ruling, spec 02a Part B).
   The fill is on .sc-faq__item, which contains BOTH the button and the answer, so the
   number column, the question and the answer are one block — which is what the comp
   shows and what the 02 build got wrong by ALSO painting the button on hover.
   🔴 There is no hover colour on the question any more. See the hover rule below.
   ⚠️ Each :has() rule sits in its OWN block — never group a :has() selector with a plain
   one, or an engine that cannot parse :has() drops the whole comma group (CLAUDE.md §7). */
.sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) { background: #EFD9A0; }
.sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) { border-top-color: transparent; }
.sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) + .sc-faq__item { border-top-color: transparent; }

/* Hover lives on the ITEM, not the button — a button-level hover paints only the top
   half of an open row, which is the two-tone defect Part B was raised for.
   🔴 Own block, and suppressed entirely while open: an open row must not change colour
   under the cursor. */
.sc-faq__item:hover { background: rgba(122,91,46,.05); }
.sc-faq__item:has(.sc-faq__question[aria-expanded="true"]):hover { background: #EFD9A0; }

/* THREE-COLUMN GRID: number | question | control.
   `align-items: start` (not center) so a two-line question keeps the number and the
   chevron on the first line, as the comp shows. */
.sc-faq__question { width: 100%; display: grid; grid-template-columns: var(--faq-col) 1fr auto; align-items: start; gap: var(--faq-gap); padding: 1.5rem 0; background: none; border: none; text-align: left; font-family: var(--sc-font); font-size: 1.0625rem; font-weight: 700; color: var(--sc-plum); cursor: pointer; }
.sc-faq__question:hover { background: none; }
.sc-faq__question:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: -2px; }

/* 01. 02. 03. — CSS COUNTERS, NOT MARKUP, and deliberately so: the numbers are decoration,
   so they belong out of the accessibility tree AND out of the FAQPage JSON-LD, both of
   which they would pollute if the partial emitted them. `decimal-leading-zero` gives the
   comp's two-digit form for free.
   🔴 DISPLAY SIZE AND FULL STRENGTH. The 02 build set .8125rem at opacity .55, which is
   what made this read as a small prefix instead of an index. No opacity — a faded number
   is a different colour on every surface it lands on.
   🔴 currentColor, NEVER a hardcoded colour — this is what lets the brand sheets recolour
   the number by setting .sc-faq__question's colour alone (grand.css puts light text on a
   dark card; a hardcoded plum would be invisible there). */
.sc-faq__question::before { content: counter(sc-faq, decimal-leading-zero) "."; font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: .01em; color: currentColor; font-variant-numeric: tabular-nums; }

/* CIRCULAR CHEVRON CONTROL — a PALE FILLED DISC, no ring (the comp).
   🔴 The BOX is sized with width/height; the GLYPH with font-size. Both are correct and
   not in conflict — CLAUDE.md §3's warning is that width/height do nothing to a *glyph*.
   ⚠️ `overflow: hidden` is a FONT-FAILURE GUARD: until Material Symbols loads, the element's
   text is the literal ligature name, ~14x the width of the disc, and it shoves the question
   out of its grid column. Observed directly, 2026-08-20.
   ⚠️ The disc colour is a translucent warm tint ON PURPOSE here — it must read on the cream
   section AND on the wheat open fill, and a single opaque value cannot do both. This is the
   documented exception to the opaque rule, not an oversight. */
.sc-faq__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(122,91,46,.12); font-size: 1.125rem; line-height: 1; color: var(--sc-plum); transition: transform .25s, color .2s, background .2s; }
.sc-faq__question[aria-expanded="true"] .sc-faq__icon { transform: rotate(180deg); background: rgba(255,255,255,.75); color: var(--sc-plum); }

/* 🔴 THE ANSWER IS INDENTED TO THE QUESTION COLUMN, derived from --faq-col so it cannot
   drift. The comp runs the answer directly under the question, inside the same wheat block.
   ⚠️ 100ch cap retained from 2026-08-17: uncapped at 1400px an answer runs ~160 characters
   per line and the return sweep fails. 108 chars is DELIBERATELY beyond the 45–75 band —
   set by Adam after 68ch and 80ch both read too narrow. Do not "correct" it downward.
   🔴 THE CAP AND THE FONT SIZE ARE A PAIR — `ch` scales with font-size. Change one,
   re-measure the other.
   ⚠️ Colour is a BRAND DARK, not neutral #333 — the comp's answer copy is warm. */
/* 🔴 `box-sizing: content-box` IS THE LOAD-BEARING DECLARATION HERE, not a tidy-up. The global
   reset sets border-box, under which `max-width: 100ch` caps the WHOLE box — indent included —
   so the 576px indent was being subtracted from the 993px cap and the answer wrapped at 417px
   instead of filling its ~696px column. Measured, not guessed: question column 648px vs answer
   417px on the same row. content-box makes the cap apply to the TEXT, which is what it was
   always for. ⚠️ Do not "normalise" this back to border-box.
   📌 Consequence worth knowing: in the new wide-column layout the column is always narrower than
   100ch, so the cap no longer binds and the measure lands ~72 characters — inside the readable
   band rather than Adam's deliberate 108. The 2026-08-17 ruling is not contradicted, it is
   simply no longer the constraint; the cap stays as a guard for very wide viewports. */
.sc-faq__answer { box-sizing: content-box; padding: 0 0 1.5rem calc(var(--faq-col) + var(--faq-gap)); max-width: 100ch; font-size: .9375rem; line-height: 1.7; color: #5C3A45; }
.sc-faq__answer p:last-child { margin-bottom: 0; }
.sc-faq__answer a { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
/* RTE answer lists — the global ul/ol reset strips markers and this wrapper isn't
   .sc-rte, so restore disc/decimal markers (they sit in the 1.25rem indent). */
.sc-faq__answer ul, .sc-faq__answer ol { list-style: revert; padding-left: 1.25rem; margin: 0 0 1rem; }
.sc-faq__answer li { margin-bottom: .375rem; }
.sc-faq__answer ul:last-child, .sc-faq__answer ol:last-child { margin-bottom: 0; }

/* ── {{form:GUID}} trigger — the button an editor's form token becomes ──────────
   Emitted by _FaqBlock.cshtml AND _ArticleFaqs.cshtml. The DIALOG it opens needs nothing
   here: .sc-form-dialog / __scroll / __close are already defined in forms.css, which
   _Layout.cshtml:120 loads on every page, and site.js's generic [data-dialog-target]
   handler already does open / close / backdrop / Esc. This rule is only the affordance.
   ⚠️ The button carries .sc-btn .sc-btn--gold as well, so it inherits the brand pill —
   including the DOCUMENTED white-on-gold WCAG exception (CLAUDE.md §2). Do not "fix" the
   contrast here; it is brand-mandated and signed off. */
.sc-faq__form-trigger {
	/* .sc-btn is white-space:nowrap, which overflows the answer column on a phone once a
	   label is more than two or three words. Editors write sentences, so let it wrap. */
	white-space: normal;
	max-width: 100%;
	margin: 1rem 0 .25rem;
	text-align: center;
}
/* The answer sets color:#5C3A45; .sc-btn--gold declares its own colour at (0,1,0) later in
   the file, so it already wins (CLAUDE.md §7 — the component that breaks is the one with NO
   colour). Stated here only so the next reader does not go looking. */

/* Between the phone breakpoint and the desktop comp, 44% is too much column for the
   available line length — step it down rather than jumping straight to the mobile value.
   ⚠️ Plain @media: site.css is a STATIC file and never passes through Razor (CLAUDE.md §7). */
@media (max-width: 1100px) {
	.sc-faq { --faq-col: 30%; --faq-pad: 1.75rem; }
}

/* ============================================================
   MAP SECTION
   ============================================================ */

/* ============================================================
   LOCATION & CONTACT  (.sc-loc) — design refresh 2026-08-21, spec 03
   Rendered by Views/Partials/_LocationContact.cshtml on ~10 templates across all
   four sites (AttractionItem, Casino, ContentPage, ExplorePage, HeroPage, Hotel,
   Restaurant, RestaurantsLanding, SkyTower).

   🔴 REPLACES `.sc-map-section*`, which is DEAD — the OpenStreetMap iframe it dressed
   was removed in this spec and no template emits any `.sc-map-section` class any more
   (verified by grep across Views/, excluding _retired/). The scattered remnants further
   down this file are tombstoned where they sit.
   ============================================================ */

.sc-loc__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
/* 🔴 TWO COLUMNS ONLY WHEN THE MAP IS ACTUALLY THERE. `.sc-loc--ready` is added by the
   partial's script after WebGL AND MapLibre both check out. Default is a single column,
   so no-JS, no-WebGL and a failed CDN all leave the intro running full width with no
   empty half — the same graceful degradation as the partial's no-coordinates early
   return (CLAUDE.md §4). Never style the map column as present-by-default. */
.sc-loc--ready .sc-loc__grid { grid-template-columns: 1fr 1.9fr; gap: 48px; }
.sc-loc__mapcol { display: none; min-width: 0; }
.sc-loc--ready .sc-loc__mapcol { display: block; }

/* ⚠️ #8A6A38, NOT --sc-gold. The comp draws this eyebrow in brand gold, but --sc-gold
   (#DCB741) measures **1.77:1** on the light page surface — nowhere near the 4.5:1 floor
   for 11px text. This is CLAUDE.md §2's standing rule (gold is legible on plum, not on
   light) and the same failure Horizon's orange hit on 2026-08-20. #8A6A38 is the same
   gold family deepened to 4.59:1 and is already in use elsewhere in this file. */
.sc-loc__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A6A38; margin-bottom: .625rem; }
.sc-loc__intro .sc-section__title { margin-bottom: 1.25rem; }
.sc-loc__address { font-style: normal; font-size: 1rem; line-height: 1.65; color: var(--sc-text); margin: 0 0 .5rem; max-width: 34ch; }
.sc-loc__precinct { font-size: .9375rem; color: rgba(0,0,0,.6); margin: 0 0 .5rem; }
.sc-loc__contact { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.sc-loc__contact a { color: var(--sc-text); text-decoration: none; font-size: .9375rem; transition: color .2s; }
.sc-loc__contact a:hover { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }

.sc-loc__social { display: flex; align-items: center; gap: .625rem; margin: 0 0 1.75rem; }
.sc-loc__social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; border: 1px solid rgba(68,11,34,.28); background: none; color: var(--sc-plum); cursor: pointer; padding: 0; transition: background .2s, color .2s, border-color .2s; }
.sc-loc__social-link:hover { background: var(--sc-plum); color: var(--sc-white); border-color: var(--sc-plum); }
.sc-loc__social-link:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }
.sc-loc__cta { align-self: flex-start; }
.sc-loc__cta .material-symbols-outlined { font-size: 1.125rem; }

.sc-loc__map { width: 100%; height: clamp(380px, 44vw, 600px); border-radius: var(--sc-radius-card); overflow: hidden; background: #3E1226; }

/* Gold teardrop marker. `anchor: bottom` in the JS puts the SVG's point on the
   coordinate, which is what keeps it on the building through pan and zoom — MapLibre
   reprojects it every frame. */
.sc-loc__pin { cursor: pointer; line-height: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.sc-loc__pin:focus-visible { outline: 2px solid var(--sc-white); outline-offset: 3px; border-radius: 4px; }

/* MapLibre chrome, restyled to the house. These class names are the library's, not
   ours — they are stable API surface for theming, but they are third-party: check them
   if MapLibre is ever bumped. */

/* 🔴 Typography reset for the whole map widget. maplibre-gl.css sets
     .maplibregl-map { font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif }
   — a SHORTHAND, so it resets font-family and every descendant inherits Arial: the popup
   card, the DIRECTIONS link, the zoom buttons and the attribution line. Measured
   2026-09-02 on internal: .sc-loc__card-name computed as Helvetica Neue/Arial while body
   was Montserrat.

   ⚠️ SPECIFICITY IS LOAD-BEARING HERE. maplibre-gl.css is a CDN <link> injected into
   <body>, AFTER all 16 of our <head> sheets, so it wins every same-specificity tie. A
   plain `.maplibregl-map { font-family: ... }` (0,1,0) SILENTLY DOES NOTHING — verified
   by injecting exactly that and watching the computed value not move. The `.sc-loc`
   ancestor takes this to 0,2,0, which wins on specificity regardless of order.

   ⚠️ `button` is listed separately and is NOT redundant: form controls do not inherit
   font-family from an ancestor by default, so the zoom +/- buttons keep the UA's Arial
   without it.

   📌 font-family ONLY — never re-declare the `font` shorthand here. maplibre's 12px/20px
   sizing is doing real work in the controls; resetting it would resize them.

   📌 This CANNOT touch the street labels on the tiles. Those are WebGL glyph atlases
   fetched from tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf and painted into a
   <canvas>; CSS does not reach inside. Montserrat on the map labels needs the
   self-hosted glyph work — see backlog/feat-map-montserrat-glyphs.md (ICT/Joseph).

   ✅ Verified after: popup name, DIRECTIONS link, attribution and both zoom buttons all
   compute Montserrat. The only non-Montserrat family left inside the map is
   "Material Symbols Outlined" on .material-symbols-outlined — that is the ICON font and
   MUST stay; do not widen this rule to catch it. */
.sc-loc .maplibregl-map,
.sc-loc .maplibregl-map button { font-family: var(--sc-font); }

.sc-loc__popup .maplibregl-popup-content { padding: 18px 20px 16px; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.28); background: var(--sc-white); }
.sc-loc__popup .maplibregl-popup-tip { border-top-color: var(--sc-white); }
.sc-loc__popup .maplibregl-popup-close-button { width: 28px; height: 28px; top: 12px; right: 12px; border-radius: 6px; font-size: 1.125rem; line-height: 1; color: var(--sc-plum); background: #F1EDEE; }
.sc-loc__popup .maplibregl-popup-close-button:hover { background: #E4DCDF; }
.sc-loc__card-name { font-size: 1.0625rem; font-weight: 700; color: var(--sc-plum); margin: 0 2rem .625rem 0; }
.sc-loc__card-row { display: flex; align-items: center; gap: .5rem; margin: 0 0 .375rem; font-size: .9375rem; }
.sc-loc__card-row .material-symbols-outlined { font-size: 1.125rem; color: #8A6A38; flex-shrink: 0; }
.sc-loc__card-row a { color: var(--sc-text); text-decoration: none; }
.sc-loc__card-row a:hover { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-loc__card-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-plum); text-decoration: none; }
.sc-loc__card-link .material-symbols-outlined { font-size: 1rem; }
.sc-loc__card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 🔴 MOBILE — STACK: intro on top, map underneath. Fixes a defect reported 2026-08-24.
   `.sc-loc__grid`'s BASE is already `1fr` (stacked), but `.sc-loc--ready .sc-loc__grid` above
   overrides it to `1fr 1.9fr` with NO media query — and `--ready` is added by the map's own JS
   the moment MapLibre initialises. So the two-column layout applied at EVERY width, and the
   defect only appeared once the map worked: with no map there is no `--ready`, and the base
   stacked rule was correct all along.
   ⚠️ At 900px the 1.9fr map column leaves the intro under ~300px — the address wraps to four
   lines and the GET DIRECTIONS pill starts to crowd the socials. 900px is also the estate's
   most-used layout breakpoint (9 uses), so this matches the file rather than inventing one.
   📌 Kept as a max-width OVERRIDE rather than rewriting the rule above as min-width: site.css is
   desktop-first throughout, and flipping one rule's direction is how a file stops being readable. */
@media (max-width: 900px) {
	.sc-loc--ready .sc-loc__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* 🔴 ZOOM CONTROLS — a CAPSULE GROUP OF CIRCULAR BUTTONS. Ruled by Adam 2026-08-21 to
   settle a genuine conflict, not a preference:
     • spec 01 ruled that round icon-only controls — **naming map controls explicitly** —
       take `border-radius: 50%` (`tasks/_done/feat-design-refresh-01-foundations.md:83`);
     • the agency comp draws a SQUARE stacked group.
   The first build shipped `8px`, which honoured neither. Adam's call is the capsule: the
   group reads as one control at 100px (the house `--sc-radius-btn`), and each button inside
   it is a circle, so spec 01's rule holds for the things that are actually icon-only
   controls. **Do not "restore" 4px/8px from the comp — the conflict is resolved, not open.**

   ⚠️ Every declaration below overrides a specific MapLibre 5.6.1 rule, read off the shipped
   stylesheet rather than guessed:
     .maplibregl-ctrl-group          { border-radius: 4px }
     .maplibregl-ctrl-group button   { width/height: 29px }
     button + button                 { border-top: 1px solid #ddd }   ← a divider line drawn
                                        across circular buttons, so it goes
     button:focus:first/last-child   { border-radius: 4px 4px 0 0 / 0 0 4px 4px } ← would
                                        square the corners back off on keyboard focus only,
                                        which is exactly the kind of bug nobody clicks into. */
.sc-loc .maplibregl-ctrl-group { border-radius: var(--sc-radius-btn); padding: 3px; background: var(--sc-white); box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.sc-loc .maplibregl-ctrl-group button { width: 32px; height: 32px; border-radius: 50%; }
.sc-loc .maplibregl-ctrl-group button + button { border-top: 0; margin-top: 3px; }
.sc-loc .maplibregl-ctrl-group button:focus:first-child,
.sc-loc .maplibregl-ctrl-group button:focus:last-child,
.sc-loc .maplibregl-ctrl-group button:focus:only-child { border-radius: 50%; }
.sc-loc .maplibregl-ctrl-group button:hover { background: #F1EDEE; }
/* Attribution is REQUIRED by OpenFreeMap and is supplied by the TileJSON, so it must
   stay legible — tone it down, never hide it. */
.sc-loc .maplibregl-ctrl-attrib { font-size: 10px; background: rgba(255,255,255,.82); }
.sc-loc .maplibregl-ctrl-attrib a { color: #3A3A3A; }

/* ============================================================
   MENUS SECTION
   ============================================================ */

.sc-menus { padding: 3rem 0 4rem; }
.sc-menus__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; }
.sc-menus__section { margin-bottom: 3.5rem; }
.sc-menus__section:last-child { margin-bottom: 0; }
.sc-menus__section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(220,183,65,.3); }
.sc-menus__section-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 800; color: var(--sc-text); }
.sc-menus__pdf-link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.125rem; border: 2px solid var(--sc-gold); border-radius: var(--sc-radius-btn); color: var(--sc-plum); font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; flex-shrink: 0; }
.sc-menus__pdf-link:hover { background: var(--sc-gold); color: var(--sc-text); }
.sc-menus__pdf-link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-menus__content { font-size: .9375rem; line-height: 1.75; color: rgba(0,0,0,.75); }
.sc-menus__content h3 { font-size: 1.0625rem; font-weight: 700; color: var(--sc-text); margin: 1.5rem 0 .375rem; }
.sc-menus__content h3:first-child { margin-top: 0; }
.sc-menus__content p { margin-bottom: .625rem; }
.sc-menus__content ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.sc-menus__content li { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .375rem 0; border-bottom: 1px dotted rgba(0,0,0,.12); }
.sc-menus__content li:last-child { border-bottom: none; }

/* ============================================================
   SECTION NAV
   ============================================================ */

.sc-section-nav { position: sticky; top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-breadcrumb-height)); z-index: 500; background: var(--sc-white); border-bottom: 1px solid rgba(0,0,0,.1); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.sc-section-nav__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sc-section-nav__inner::-webkit-scrollbar { display: none; }
.sc-section-nav__link { display: flex; align-items: center; padding: 0 1.125rem; height: 52px; font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(0,0,0,.5); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--sc-font); transition: color .2s, border-color .2s; flex-shrink: 0; }
.sc-section-nav__link:hover { color: var(--sc-text); border-bottom-color: rgba(220,183,65,.4); }
.sc-section-nav__link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: -2px; }
.sc-section-nav__link.is-active, .sc-section-nav__link[aria-selected="true"] { color: var(--sc-text); border-bottom-color: var(--sc-gold); }
.sc-section-nav__link--cta { margin-left: auto; background: var(--sc-gold); color: var(--sc-text); border-radius: var(--sc-radius-btn); border-bottom: none; padding: 0 1.25rem; margin-top: .625rem; margin-bottom: .625rem; height: 40px; transition: opacity .2s; }
.sc-section-nav__link--cta:hover { opacity: .88; }
.sc-section-nav__link--cta.is-active, .sc-section-nav__link--cta[aria-selected="true"] { border-bottom-color: transparent; }

/* ============================================================
   CASINO — the three info boxes  (design refresh 2026-08, spec 05 Part A)
   ============================================================
   Colours SAMPLED from `casino_stats.png`: the box surface reads #D0C2C7, which sits between
   --sc-plum-40 and --sc-plum-20 and is nearest the latter. **--sc-plum-20 is used** rather than
   a fourth mauve literal, and it is the SAFER of the two: plum on the token measures 10.44:1
   against 9.28:1 on the comp's own value. Icon, heading and body are all --sc-plum.

   🔴 THE ICON FIELD IS A FREE-TEXT TEXTSTRING, AND ITS FAILURE MODE IS INVISIBLE TO CSS.
   Material Symbols renders an unknown ligature as its LITERAL TEXT — no error, no fallback box.
   Measured at 24px: a valid ligature is 24px wide; `casino_chip` is 144px of raw text,
   `slot_machine` 288px, `gaming_machine` 336px. Worse, the font ligates GREEDILY, so
   `casino_chip` paints the real dice glyph plus the letters `_chip` — a wrong icon that still
   looks like an icon.
   ⚠️ There is nothing to defend against HERE, and nothing CSS could do anyway: a literal-text
   icon and a real glyph are indistinguishable to a stylesheet. **Do not add a width clamp or an
   overflow guard to "catch" it — that would only disguise a wrong value as a clipped one.**
   The trap is accepted deliberately (Adam, 2026-08-23: box content changes and some boxes need
   no icon, so a fixed option list serves neither). It is documented on the property itself and
   in `Casino.cshtml`; the only real check is looking at the published box. */

.sc-infoboxes { padding-top: 0; }
.sc-infoboxes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }

.sc-infobox {
	background: var(--sc-plum-20);
	border-radius: 10px;
	padding: 1.75rem 1.5rem;
}

/* §3: sized with font-size, NEVER width/height — and the optical-size axis comes down with it,
   or a 28px icon carries the stroke weight drawn for 48px and reads heavier than the heading. */
.sc-infobox__icon {
	font-size: 1.75rem;
	line-height: 1;
	color: var(--sc-plum);
	font-variation-settings: 'opsz' 24;
	display: block;
	margin-bottom: 1.25rem;
}

.sc-infobox__heading { font-size: 1.0625rem; font-weight: 700; color: var(--sc-plum); margin: 0 0 .625rem; }
.sc-infobox__body { font-size: .9375rem; line-height: 1.55; color: var(--sc-plum); }
.sc-infobox__body p { margin: 0; }
.sc-infobox__body p + p { margin-top: .5rem; }
/* The third box's compliance sentence carries inline <strong>; keep it visibly bolder than the
   surrounding copy, which is the whole reason infoBody is an RTE and not a Textarea. */
.sc-infobox__body strong { font-weight: 700; }

@media (max-width: 900px) { .sc-infoboxes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sc-infoboxes__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CASINO — the "Don't have a card?" panel  (design refresh 2026-08, spec 05)
   ============================================================
   Colours SAMPLED from `casino_stats.png`, never chosen. Every one maps onto an existing token:
     panel ramp     #59283C -> #210511  = --sc-grad-plum, CONSUMED (the comp's sweep is flat
                    horizontally and darkens downward, i.e. the default 180deg — no angle
                    modifier, unlike the Sky Tower panel which needed 90deg)
     heading        #EDDBA0 -> --sc-gold-40   10.80:1 on the ramp's lightest stop
     body           #F8F4E8  = --sc-cream     12.67:1
     CTA fill       #EDDBA0 -> --sc-gold-40 ; label #1D020D -> --sc-plum   12.36:1
     ID panel       a TRANSLUCENT white over the ramp — see the measurement block below

   🔴 THE ID PANEL IS TRANSLUCENT, AND A TRANSLUCENT COLOUR IS NOT A COLOUR — it is a colour
   times whatever is behind it. Measuring its text against a flat token would be meaningless,
   so it is measured against the RAMP AT THE PANEL'S OWN POSITION, top to bottom:

     composite of rgba(255,255,255,.56) over…    plum text     gold link
       #52152F (ramp top)      -> #B398A3          6.03:1        1.37:1
       #3A0C1F (ramp 45%)      -> #A8949C          5.61:1        1.48:1
       #1C0309 (ramp bottom)   -> #9B9093          5.17:1        1.60:1

   🔴 SO THE TRAILING LINK IS **NOT GOLD**, THOUGH THE COMP DRAWS IT GOLD. Gold on this panel is
   1.37:1 at its BEST and 1.60:1 at its worst — invisible either way, and it is the one piece of
   text on the page a visitor actually has to act on. It renders in plum with an underline
   (5.17:1 worst case). **This is a deliberate, measured deviation from the artwork; do not
   "restore" the gold.** ⚠ The worst case is at the BOTTOM of the panel, which is precisely why
   the ramp had to be sampled at three points rather than once. */

.sc-cardblk { padding: 0 0 3rem; }

.sc-cardblk__panel {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: var(--sc-grad-plum);
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem);
}

/* 🔴 THE NO-IMAGE STATE IS THE SHIPPING STATE — Adam has not supplied the card artwork, so this
   is the layout the panel lives in, not a fallback nobody sees. With no image the template omits
   the middle column entirely and the modifier below drops the track, so the two remaining columns
   simply close up: **no gap, no empty frame, no reserved space.**
   ⚠ The image column is sized with `min-height`, NEVER `aspect-ratio` + `max-height` — a height
   clamp on a ratio-locked box preserves the ratio by collapsing the WIDTH, which is how gaps
   appear (CLAUDE.md §7). */
.sc-cardblk__grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr 1.25fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}
.sc-cardblk__grid--noimg { grid-template-columns: 1fr 1.25fr; }

.sc-cardblk__heading {
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4.6vw, 3.25rem);
	line-height: 1.05;
	color: var(--sc-gold-40);
	margin: 0;
}
.sc-cardblk__body { color: var(--sc-cream); font-size: 1rem; line-height: 1.6; margin: 1rem 0 0; }

/* ⚠ NOT `.sc-btn--gold`. The comp's button is a PALE fill with a PLUM label (12.36:1); the brand
   primary is saturated gold with a WHITE label, which is the documented 1.93:1 §2 exception.
   Reusing it here would import that exception onto a dark panel where it is not wanted. The same
   call was made for the Sky Tower panel's button, and for the same reason. */
.sc-cardblk__cta {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1.75rem;
	padding: .8rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--sc-radius-btn);
	background: var(--sc-gold-40);
	color: var(--sc-plum);
	font-family: var(--sc-font);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .107em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s;
}
.sc-cardblk__cta:hover { background: var(--sc-gold-60); }
.sc-cardblk__cta:focus-visible { outline: 2px solid var(--sc-cream); outline-offset: 3px; }
.sc-cardblk__cta .material-symbols-outlined { font-size: 1.125rem; font-variation-settings: 'opsz' 20; }

/* The tilted card. `min-height` keeps the column from collapsing on a slow image load.
   🔴 EVERY NUMBER HERE IS MEASURED OFF `casino_stats.png`, NOT CHOSEN — re-measure before changing one.
     rotation  +28deg   the comp's card sits at +28.05deg CLOCKWISE (least-squares fit of its long
                        edge, R2=0.9997; the perpendicular short edge agrees to 0.36deg)
     width     78%      puts the card at 21.7-21.9% of the PANEL width at 1024/1200/1400 — the comp
                        is 21.9%. That match is why 78% and not a rounder number.
     margin    0 -10% 0 10%   shifts it right by 10% of the column so the overhang points AT the ID
                        panel, as the comp composes it. It still overhangs its column — the overflow
                        is preserved, just aimed correctly.
   ⚠ THE ROTATION DEPENDS ON THE ASSET BEING FLAT. `show_by_skycity_ruby_card.png` (500x315, 99.8%
   opaque) is straight-on, so the CSS supplies the whole tilt. The asset it replaced on 2026-08-23
   (`show_card_hero_casino.png`, 724x630, 53.8% opaque) had +28.06deg ALREADY BAKED IN — measured,
   the same angle to 0.05deg. Against that one the correct value here was 0deg, and the -13deg this
   replaced was subtracting from a correct rotation, landing the card at +15deg. **If the picked
   image is ever swapped back to a pre-rotated export, this must go back to 0deg.** Check the
   asset's opacity before trusting the number.
   ⚠ Collision-tested at 320/375/480/600/768/900/901/940/980/1010/1024/1100/1200/1300/1400/1600 by
   transforming the image's four corners through its own matrix and running SAT against the heading,
   body, CTA and ID panel. Tightest clearance 12.9px (ID panel, at 901px). Nothing collides and
   nothing escapes the panel. 🔴 The compliance copy was NOT reflowed to make room — the image moved.
   📌 No third breakpoint was needed. The 901-1023 "gap" was caused by the SIZE (118% + -9% margins,
   tuned for an asset that was only 54% opaque), not by a missing rule; percentage sizing scales
   continuously and the two rules meet cleanly across 900/901. */
.sc-cardblk__media { min-height: 200px; display: flex; align-items: center; justify-content: center; }
.sc-cardblk__media img {
	width: 78%;
	max-width: none;
	margin: 0 -10% 0 10%;
	transform: rotate(28deg);
	filter: drop-shadow(0 18px 34px rgba(0,0,0,.45));
}

/* The translucent ID panel — see the measured composite table at the top of this block. */
.sc-cardblk__ids {
	background: rgba(255,255,255,.56);
	border-radius: 12px;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.sc-cardblk__ids-heading { font-size: 1rem; font-weight: 700; color: var(--sc-plum); margin: 0 0 1rem; }
.sc-cardblk__ids ul { list-style: none; margin: 0; padding: 0; }
.sc-cardblk__ids li { position: relative; padding-left: 2.5rem; margin-bottom: .875rem; color: var(--sc-plum); font-size: .9375rem; line-height: 1.45; }
.sc-cardblk__ids li:last-child { margin-bottom: 0; }
.sc-cardblk__ids li p { margin: 0; }

/* The tick. ⚠ A CODEPOINT, not the `check` ligature: generated content carries no `aria-hidden`,
   and some screen readers announce a ligature's text. A PUA codepoint announces nothing, and the
   list item's own text carries the meaning. */
.sc-cardblk__ids li::before {
	content: "\e5ca";
	font-family: 'Material Symbols Outlined';
	font-size: 1rem;
	line-height: 1;
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	color: var(--sc-plum);
}
/* 🔴 PLUM + UNDERLINE, NOT GOLD — 5.17:1 at the panel's worst point against gold's 1.37:1.
   Measured, not preferred. See the table at the top of this block. */
.sc-cardblk__ids a { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.sc-cardblk__ids a:hover { color: var(--sc-plum-80); }

@media (max-width: 900px) {
	.sc-cardblk__grid,
	.sc-cardblk__grid--noimg { grid-template-columns: 1fr; }
	.sc-cardblk__media { order: -1; min-height: 0; }
	/* ⚠ Stacked, the card sits ABOVE the heading, so the rotation overflows DOWNWARD into it —
	   transforms do not affect layout, so the row reserves nothing for the tilt. The vertical
	   margin buys that space back, and it is a PERCENTAGE on purpose: percentage margins resolve
	   against the column's inline size, so the reserved space tracks the card as it scales instead
	   of being right at one width. Measured clearance to the heading: 24.6-28.9px across 320-900. */
	.sc-cardblk__media img { width: 62%; margin: 12.5% 0; }
}

/* ============================================================
   RESTAURANT DETAIL PAGE
   ============================================================ */

/* ── Intro (design refresh 2026-08, spec 07 Part B) ──────────────────────────────
   Colours SAMPLED from `restaurant_intro.png`, not chosen:
     heading / lead   #440B22 = --sc-plum        15.95:1 on white
     body copy        #262626 -> --sc-text        12.63:1 on white
     quote rule       #DCB741 = --sc-gold        (a rule, not text)
     card surface     #FFFFFF
     chef name        #440B22 = --sc-plum
     chef role        #6B7280 -> --sc-plum-80      8.91:1 on white
   ⚠ The comp's role grey (#6B7280) and card border (#E5E7EB) are COOL neutrals from the
   agency's own framework palette and match no token here. The warm equivalents are used
   instead, and the role gains contrast doing it (8.91:1 against the comp's 4.83:1). */
.sc-restaurant-overview { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
.sc-restaurant-overview__lead { font-size: 1.125rem; line-height: 1.6; color: var(--sc-plum); margin-bottom: 1.25rem; font-weight: 700; }
.sc-restaurant-overview__body { margin-bottom: 1.5rem; color: var(--sc-text); }

/* 🔴 THE DISPLAY HEADING AND THE QUOTE ARE AUTHORED IN THE RTE, NOT PROPERTIES — and as of
   2026-08-21 NO restaurant on the estate has either, so both rules below ship INERT.
   Metita's `fullDescription` is seven bare <p> elements: the line the comp draws as a heading
   is `<p>Pacific cuisine, reimagined.</p>` and the line it draws as a quote is
   `<p><em>"Metita is a coming together…"</em></p>`. Read from the live DOM, not assumed.
   **An editor has to promote those two paragraphs (Heading 2, and Quote) for the page to match
   the comp.** The CSS being right and the feature being visible are different claims (§9).
   ⚠ DO NOT "fix" this by targeting `> p:first-child` or `p:has(> em:only-child)`. That would
   restyle the opening paragraph of all 34 venues and break the day someone adds a real
   heading. Style the semantic element; the content gap is a content job. */
.sc-restaurant-overview__body h2,
.sc-restaurant-overview__body h3 {
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	color: var(--sc-plum);
	margin: 0 0 1rem;
}

/* 🔴 SCOPED ON PURPOSE — `.sc-restaurant-overview__body` is the restaurant intro's RTE wrapper
   and nothing else. A bare `blockquote` rule would reach every rich-text field on the estate:
   news articles, content pages, FAQ answers, T&Cs. `site.css` already learned this with content
   tables, which are scoped `table:not([class])` for exactly this reason (§7 — scope the source,
   do not patch the victim). */
.sc-restaurant-overview__body blockquote {
	margin: 1.5rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--sc-gold);
	font-style: italic;
	font-weight: 600;
	color: var(--sc-plum);
	line-height: 1.6;
}
.sc-restaurant-overview__body blockquote p { margin: 0; }
.sc-restaurant-overview__body blockquote p + p { margin-top: .75rem; }
.sc-restaurant-overview__features { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-restaurant-overview__features li { font-size: .8125rem; font-weight: 600; padding: .35rem .9rem !important; background: rgba(220,183,65,.1) !important; border: 1px solid rgba(220,183,65,.25) !important; border-radius: 50px !important; color: var(--sc-text) !important; }
.sc-restaurant-overview__dresscode { font-size: .9375rem; color: rgba(0,0,0,.6); margin-bottom: 1.25rem; }
.sc-restaurant-overview__ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
/* ── The chef card ───────────────────────────────────────────────────────────────
   ⚠ Every child is optional and the card must survive ALL SIXTEEN combinations of
   image / name / role / bio without an empty circle, an orphan border or a gap. The
   template gates each element individually and the whole <aside> on "any of the four";
   the spacing here is therefore driven by `+` selectors, so an absent element leaves no
   margin behind it. Do not convert these to plain `margin-bottom`. */
.sc-restaurant-overview__chef { background: var(--sc-white); border: 1px solid rgba(68,11,34,.12); border-radius: 12px; padding: 2rem 1.75rem; }
.sc-restaurant-overview__chef-photo { width: 118px; height: 118px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.25rem; background: #ece7e8; box-shadow: 0 0 0 1px rgba(68,11,34,.14); }
.sc-restaurant-overview__chef-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-restaurant-overview__chef-name { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.625rem; line-height: 1.15; color: var(--sc-plum); text-align: center; margin: 0; }
.sc-restaurant-overview__chef-role { font-size: .8125rem; font-weight: 700; color: var(--sc-plum-80); text-align: center; margin: .375rem 0 0; }
.sc-restaurant-overview__chef-bio { font-size: .9375rem; color: var(--sc-text); line-height: 1.65; margin: 0; }
.sc-restaurant-overview__chef-name + .sc-restaurant-overview__chef-bio,
.sc-restaurant-overview__chef-role + .sc-restaurant-overview__chef-bio { margin-top: 1.25rem; }

.sc-restaurant-awards__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.sc-restaurant-awards__item { display: flex; align-items: center; text-decoration: none; }
/* Award logos are ALWAYS full colour (Adam, 2026-08-07). The rest state used to be
   `filter: grayscale(20%)` with `.sc-restaurant-awards__item:hover img { filter: none }`
   restoring colour on hover — both were removed together. Removing only the hover rule
   would have left the logos permanently desaturated, which is why this was reported for a
   decision rather than swept up with the other image-hover deletions. No filter, no
   transition, no hover treatment. 📖 docs/LESSONS.md §L7. */
.sc-restaurant-awards__item img { max-height: 80px; width: auto; object-fit: contain; }

.sc-gallery--lightbox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sc-gallery__item { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e8e8e8; display: block; text-decoration: none; cursor: pointer; }
.sc-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.sc-gallery__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); color: var(--sc-white); opacity: 0; transition: opacity .25s; }
.sc-gallery__item:hover .sc-gallery__zoom { opacity: 1; }
.sc-gallery__item:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: -3px; }

/* ── LIGHTBOX ─────────────────────────────────────────────────────────────
   Markup is emitted by the ONE lightbox module in site.js — no template
   creates a lightbox. Column layout: stage (image + arrows) over a bar
   (caption · counter · thumbnail strip). Overlay is rgba(0,0,0,.95), so
   gold-as-text is the sanctioned dark-surface case (CLAUDE.md §2).
   🔴 Icons are Material Symbols GLYPHS — size them with font-size, never
   width/height; the 3rem button box is separate from the glyph (§3). */
.sc-lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 4.5rem 1rem 1rem; opacity: 0; pointer-events: none; transition: opacity .25s; }
.sc-lightbox.is-open { opacity: 1; pointer-events: all; }
/* The stage takes the leftover column height; img-wrap must carry an explicit
   height:100% (with min-height:0 above it) or the image's max-height:100% has
   no definite parent to resolve against and the strip gets pushed off-screen.
   overflow:hidden is the belt-and-braces: clip the photo, never the controls. */
.sc-lightbox__stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sc-lightbox__img-wrap { width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sc-lightbox__img { max-width: min(90vw, 100%); max-height: 100%; object-fit: contain; border-radius: 4px; }

.sc-lightbox__close { position: absolute; top: 1rem; right: 1rem; background: var(--sc-gold); border: none; color: var(--sc-plum); width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; z-index: 2; }
.sc-lightbox__close .material-symbols-outlined { font-size: 1.875rem; font-variation-settings: 'wght' 500; }
.sc-lightbox__close:hover { background: var(--sc-gold-80); transform: scale(1.06); }
.sc-lightbox__close:focus-visible { outline: 2px solid var(--sc-white); outline-offset: 3px; }

.sc-lightbox__prev, .sc-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); border: 1px solid rgba(220,183,65,.55); color: var(--sc-gold); width: 3.25rem; height: 3.25rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s; z-index: 2; }
.sc-lightbox__prev .material-symbols-outlined, .sc-lightbox__next .material-symbols-outlined { font-size: 2.25rem; font-variation-settings: 'wght' 500; }
.sc-lightbox__prev { left: 1rem; }
.sc-lightbox__next { right: 1rem; }
.sc-lightbox__prev:hover, .sc-lightbox__next:hover { background: var(--sc-gold); border-color: var(--sc-gold); color: var(--sc-plum); }
.sc-lightbox__prev:focus-visible, .sc-lightbox__next:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
/* The module hides the arrows on a single-image gallery by setting [hidden];
   the display:flex above would otherwise defeat the UA hidden rule. */
.sc-lightbox__prev[hidden], .sc-lightbox__next[hidden] { display: none; }

.sc-lightbox__bar { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.sc-lightbox__caption { max-width: min(90vw, 720px); margin: 0; padding: 0 1rem; text-align: center; color: rgba(255,255,255,.92); font-size: .9375rem; line-height: 1.5; }
.sc-lightbox__caption:empty { display: none; }
.sc-lightbox__counter { margin: 0; color: var(--sc-gold); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; }

/* Thumbnail strip — scrolls horizontally; never wraps or squashes (24 images
   from a block gallery, 20 from Sky Tower school holidays). The max-content
   track centres while it fits and starts flush-left once it overflows. */
.sc-lightbox__thumbs { width: 100%; max-width: min(100%, var(--sc-max-width)); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(220,183,65,.5) transparent; }
.sc-lightbox__thumbs-track { display: flex; gap: .5rem; width: max-content; margin: 0 auto; padding: 3px; }
.sc-lightbox__thumb { flex: 0 0 auto; width: 76px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s; }
.sc-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-lightbox__thumb:hover { opacity: 1; }
.sc-lightbox__thumb:focus-visible { opacity: 1; outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-lightbox__thumb.is-active { opacity: 1; border-color: var(--sc-gold); }

.sc-restaurant-menus__note { font-size: .8125rem; color: rgba(0,0,0,.4); margin: -.5rem 0 1.5rem; font-style: italic; }
/* ── Menu blocks (design refresh 2026-08, spec 07 Part D) ────────────────────────
   Sampled from `menus_new.png`: block surface #F8F4E8 (= --sc-cream, CONSUMED not
   re-declared — the literal was consolidated into one :root definition earlier today,
   and writing a second copy here is the drift that consolidation removed), row rule
   #DCB741 = --sc-gold at full strength (the comp's "more vivid gold"; it was a 30%
   tint), title --sc-plum 14.50:1 on the cream, subtitle --sc-plum-80 8.10:1.

   🔴 MULTI-COLUMN, NOT GRID (2026-09-02). This was `display: grid; repeat(auto-fit,
   minmax(260px, 1fr)); align-items: start`. The comp lets blocks differ in height (Metita
   has 3, 3 and 1 rows; MASU 1, 3, 3, 3), and a grid cannot pack unequal heights: a grid ROW
   is as tall as its tallest cell, so a 1-row block beside a 3-row one left a 2-row hole,
   and 4 blocks into 3 columns orphaned the fourth on its own row. `columns` packs by
   height instead — blocks flow down each column, so the short one stacks under a tall
   one. Column count is still driven by the same 260px minimum; a `column-count` cap is
   deliberately NOT set so a 1400px container still gets four across, as the grid did.
   ⚠️ Visual reading order is column-major (down, then across). DOM order — and so tab and
   screen-reader order — is unchanged. Accepted by Adam 2026-09-02 over a flat single panel.
   ⚠️ Spacing is margin-bottom on each block (multicol has no row-gap), with the wrapper
   pulling the trailing margin back so the section's bottom edge sits where the grid's did.
   Do NOT switch to margin-top: a block at the head of the second column would keep it and
   the column tops would no longer align. `break-inside: avoid` keeps a block whole. */
.sc-restaurant-menus { columns: 260px; column-gap: 2rem; margin-bottom: -2rem; }
.sc-restaurant-menus__category { background: var(--sc-cream); border-radius: 12px; padding: 1.5rem 1.5rem 1.25rem; break-inside: avoid; margin: 0 0 2rem; }
.sc-restaurant-menus__cat-title { font-size: 1.125rem; font-weight: 700; color: var(--sc-plum); margin: 0 0 .25rem; }
.sc-restaurant-menus__cat-subtitle { font-size: .8125rem; font-weight: 600; color: var(--sc-plum-80); margin: 0 0 .875rem; }
.sc-restaurant-menus__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
/* ⚠ The rule stays on EVERY row including the last — the comp draws one under its single
   Bar row too, so the old `:last-child { border-bottom: none }` is deliberately dropped
   rather than kept. Checked against the comp, not assumed from the usual convention. */
.sc-restaurant-menus__item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-bottom: 2px solid var(--sc-gold); }
.sc-restaurant-menus__link { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--sc-text); text-decoration: none; flex: 1; transition: color .2s; }
.sc-restaurant-menus__link:hover { color: var(--sc-plum); }
.sc-restaurant-menus__icon { flex-shrink: 0; color: var(--sc-plum); }
/* ✅ Already a pill from spec 01 — VERIFIED, not re-fixed. What changes here is weight, not
   shape: the comp wants this to read as a quiet secondary control, so the gold tint fill
   becomes a hairline plum outline on the cream. */
.sc-restaurant-menus__badge { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .75rem; background: transparent; color: var(--sc-plum); border: 1px solid var(--sc-plum); border-radius: 50px; white-space: nowrap; flex-shrink: 0; transition: background .2s, color .2s; }

.sc-hours__note { font-size: .875rem; color: rgba(0,0,0,.5); margin-top: 1rem; font-style: italic; }

@media (max-width: 900px) {
	.sc-restaurant-overview { grid-template-columns: 1fr; }
	.sc-restaurant-overview__chef { order: -1; }
	.sc-gallery--lightbox { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.sc-gallery--lightbox { grid-template-columns: repeat(2, 1fr); }
	.sc-restaurant-menus { columns: 1; }
	.sc-lightbox { padding: 3.75rem .5rem .75rem; gap: .5rem; }
	.sc-lightbox__prev { left: .375rem; }
	.sc-lightbox__next { right: .375rem; }
	.sc-lightbox__prev, .sc-lightbox__next { width: 2.75rem; height: 2.75rem; }
	.sc-lightbox__prev .material-symbols-outlined, .sc-lightbox__next .material-symbols-outlined { font-size: 1.875rem; }
	.sc-lightbox__thumb { width: 58px; height: 40px; }
}

@media (max-width: 480px) {
	.sc-gallery--lightbox { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE MOSAIC
   ============================================================ */

.sc-mosaic {
	padding: 16px 40px 0;
	max-width: var(--sc-max-width);
	margin: 0 auto;
}

.sc-mosaic__grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 12px;
	min-height: 560px;
	align-items: stretch;
}

.sc-mosaic__item {
	position: relative;
	display: block;
	text-decoration: none;
	color: var(--sc-white);
	background-color: var(--sc-plum);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	border-radius: 12px;
	transition: transform .5s ease;
}

.sc-mosaic__stack { display: flex; flex-direction: column; gap: 12px; }
.sc-mosaic__item--small { flex: 1 1 0; min-height: 0; }

.sc-mosaic__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(68,11,34,.84) 0%, rgba(68,11,34,.30) 50%, rgba(68,11,34,0) 100%);
	transition: background .3s ease;
	border-radius: 12px;
}

.sc-mosaic__item:hover .sc-mosaic__overlay {
	background: linear-gradient(to top, rgba(68,11,34,.92) 0%, rgba(68,11,34,.42) 55%, rgba(68,11,34,.10) 100%);
}

.sc-mosaic__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32px 28px 26px;
	z-index: 2;
}

.sc-mosaic__badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--sc-text);
	padding: 5px 12px;
	background: var(--sc-gold);
	border-radius: 3px;
	margin-bottom: 12px;
}

.sc-mosaic__title { color: var(--sc-white) !important; margin: 0 !important; line-height: 1.2 !important; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.sc-mosaic__title--hero { font-size: clamp(22px, 2.8vw, 38px) !important; font-weight: 800 !important; }
.sc-mosaic__title--small { font-size: clamp(14px, 1.5vw, 20px) !important; font-weight: 700 !important; }
.sc-mosaic__summary { color: rgba(255,255,255,.82) !important; font-size: 14px !important; margin: 10px 0 0 !important; line-height: 1.55 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1024px) {
	.sc-mosaic { padding: 12px 24px 0; }
	.sc-mosaic__grid { gap: 10px; min-height: 480px; }
}

@media (max-width: 768px) {
	.sc-mosaic { padding: 12px 16px 0; }
	.sc-mosaic__grid { grid-template-columns: 1fr; height: auto; }
	.sc-mosaic__item--hero { height: 300px; }
	.sc-mosaic__stack { flex-direction: column; height: auto; gap: 8px; }
	.sc-mosaic__item--small { height: 160px; flex: none; }
}

@media (max-width: 480px) {
	.sc-mosaic__item--hero { height: 240px; }
	.sc-mosaic__item--small { height: 130px; }
}

/* ============================================================
   TICKER
   ============================================================ */

/* Plum band, gold label. The former #f4f4f4 band was a 4% step off white and read
   as whitespace on the live homepage — see CHANGELOG 2026-08-18. Every surface here
   is a pinned solid: no rgba, so nothing composites differently per page. */
.sc-ticker {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	margin: 2rem auto 0;
	max-width: calc(var(--sc-max-width) - 80px);
	background: var(--sc-plum);
	color: var(--sc-white);
}

/* Editor-controlled label (siteRoot.tickerHeader). Gold is a SURFACE here, so its
   text is Plum — white-on-gold is the .sc-btn--gold brand exception only (§2). */
.sc-ticker__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: .75rem 1.25rem;
	background: var(--sc-gold);
	color: var(--sc-plum);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* min-width:0 is load-bearing: a flex child will not shrink below its content width
   without it, and the marquee would push the label clean off the band. */
.sc-ticker__inner { flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* Duration is set by site.js from the measured track width (~70px/s, matching the
   .sc-alert marquee). The fallback here only applies before script runs. */
.sc-ticker__track {
	display: flex;
	width: max-content;
	animation: sc-ticker-scroll var(--sc-ticker-duration, 26s) linear infinite;
	will-change: transform;
}

.sc-ticker__set { display: flex; }

.sc-ticker:hover .sc-ticker__track { animation-play-state: paused; }

.sc-ticker__item {
	flex-shrink: 0;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: .75rem 1.75rem;
	color: var(--sc-white);
	white-space: nowrap;
}

.sc-ticker__sep { flex-shrink: 0; color: var(--sc-gold); font-size: .625rem; line-height: 1; align-self: center; }

@media (max-width: 1024px) { .sc-ticker { max-width: calc(100% - 48px); } }

@media (max-width: 640px) {
	.sc-ticker { max-width: calc(100% - 32px); }
	.sc-ticker__header { padding: .75rem .85rem; letter-spacing: .1em; }
	.sc-ticker__item { padding: .75rem 1.25rem; }
}

/* Reduced motion — collapse to ONE set and stop. Pure CSS, so it holds with no JS.
   Each repetition is wrapped in its own .sc-ticker__set purely so this rule can
   exist. */
@media (prefers-reduced-motion: reduce) {
	.sc-ticker__track { animation: none; }
	.sc-ticker__set + .sc-ticker__set { display: none; }
	.sc-ticker__set .sc-ticker__sep:last-child { display: none; }
	.sc-ticker__inner { overflow-x: auto; }
}

@keyframes sc-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-33.333%); }
}

/* ============================================================
   SITE ALERT BANNER  (sc-alert)
   Full-bleed emergency / warning bar inside the fixed header, directly below
   the search bar (above the breadcrumb on inner pages, above the homepage
   tiles). Red background, white text. The red spans the full viewport; the
   message is constrained to the content width so it lines up with the tiles.
   The message NEVER wraps — site.js adds .is-scrolling (marquee) only when it
   overflows the inner, so short messages sit still. Content comes from the
   dedicated "Site Alert" node (doc type siteAlert). Self-suppresses when empty.
   ============================================================ */

.sc-alert {
	background: var(--sc-alert);
	color: var(--sc-white);
	min-height: var(--sc-alert-height);
	border-bottom: 1px solid rgba(0,0,0,.14);
	display: flex;
	align-items: center;
}

.sc-alert__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: .75rem;
	min-width: 0;
}

.sc-alert__icon {
	flex-shrink: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--sc-white);
}

.sc-alert__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.sc-alert__track {
	display: inline-flex;
	width: max-content;
	white-space: nowrap;
	will-change: transform;
}

.sc-alert.is-scrolling .sc-alert__track {
	animation: sc-alert-marquee var(--sc-alert-duration, 20s) linear infinite;
}

.sc-alert:hover .sc-alert__track,
.sc-alert:focus-within .sc-alert__track {
	animation-play-state: paused;
}

.sc-alert__msg {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--sc-white);
}

/* Both the original and the JS-added clone carry the trailing gap while
   scrolling, so the two-copy track loops seamlessly at translateX(-50%). */
.sc-alert.is-scrolling .sc-alert__msg { padding-right: 4rem; }

@keyframes sc-alert-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
	.sc-alert__inner { padding: 0 24px; }
}
@media (max-width: 640px) {
	.sc-alert__inner { padding: 0 16px; }
}

/* Reduced motion — don't animate; make any overflow reachable by horizontal
   scroll so the full message stays accessible. (:has-free; own block.) */
@media (prefers-reduced-motion: reduce) {
	.sc-alert.is-scrolling .sc-alert__track { animation: none; }
	.sc-alert.is-scrolling .sc-alert__viewport { overflow-x: auto; }
}

.sc-section--flush { padding: 0; }

/* ============================================================
   HOTEL OVERVIEW
   ============================================================ */

.sc-hotel__short-desc { font-size: 1.0625rem; line-height: 1.75; color: rgba(0,0,0,.7); margin-bottom: 1.5rem; }
.sc-hotel__quick-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.sc-hotel__quick-facts li { font-size: .9375rem; color: rgba(0,0,0,.65); }
.sc-hotel__quick-facts strong { color: var(--sc-text); }
.sc-hotel__amenities { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-hotel__amenities li { font-size: .8125rem; font-weight: 600; padding: .35rem .9rem; background: rgba(220,183,65,.1); border: 1px solid rgba(220,183,65,.25); border-radius: 50px; color: var(--sc-text); }
.sc-hotel__price { font-size: 1rem; color: rgba(0,0,0,.55); margin-bottom: 1.5rem; }
.sc-hotel__price-amount { font-size: 1.375rem; font-weight: 800; color: var(--sc-text); }

.sc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sc-gallery__item { aspect-ratio: 4/3; overflow: hidden; background: #e8e8e8; }
.sc-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }

/* ============================================================
   OPENING HOURS  (design refresh 2026-08, spec 02)
   Rendered by Views/Partials/_OpeningHours.cshtml; reused by Restaurant, Hotel,
   Casino, SkyTower, HeroPage, AttractionItem.

   Two columns: a gradient aside (heading + live status + note) and a stack of cards,
   ONE PER GROUP. Previously a single .sc-oh__card wrapped everything and the groups
   were headings inside it. Hours stay right-aligned so short restaurant strings sit
   neat and Sky Tower's longer ranges wrap on the right.
   ============================================================ */
/* 🔴 THE BAND IS FULL-BLEED AND THE GRADIENT IS ON THE <section> (spec 02a Part C).
   The 02 build put .sc-surface--grad on .sc-oh__aside — a rounded, padded, sticky card — so
   the page rendered a small plum tile instead of the comp's band. The aside is now a bare
   column and the cards float on the band.
   ⚠️ Column ratio taken from the two comps: the Sky Tower comp reads ~1:1.5 and the restaurant
   comp ~1:1, because the card stack's height differs. 1:1.2 sits between them. */
.sc-oh__layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
/* 🔴 The aside carries .sc-surface--grad, which is a SURFACE UTILITY — it sets the
   background and the generic foregrounds, but it cannot know about this module's own
   components. Everything below restates a colour that would otherwise render
   plum-on-plum (CLAUDE.md §7, the anchorId lesson). */
/* No radius, no card padding-box, no background — the aside's content sits DIRECTLY on the
   band. Sticky is kept: Sky Tower's card stack is tall and the heading should not scroll away. */
.sc-oh__aside { position: sticky; top: calc(var(--sc-nav-height) + 24px); }
.sc-oh__cards { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* 🔴 .sc-oh__card RESTATES ITS OWN `color`, AND THAT IS NOT OPTIONAL. .sc-surface--grad sets
   `color: var(--sc-plum-20)` on the section, and every descendant inherits it — including
   everything inside these cards. Without this line, any card text that does not set its own
   colour renders pale-plum on near-white. This is CLAUDE.md §7's anchorId lesson arriving from
   the opposite direction: there a surface failed to state its foregrounds, here a surface states
   them too widely.
   Warm off-white, not pure white, and no border — both from the comps. */
.sc-oh__card { background: #F2F0EA; border: 0; border-radius: var(--sc-radius-card); padding: 22px 26px; color: var(--sc-text); }
.sc-oh__card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sc-oh__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.sc-oh__row:last-child { border-bottom: none; }
.sc-oh__left { flex: 0 1 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Outlined pill (the comp) — was a filled gold tint. Opaque border + transparent fill,
   so it reads the same on the white card and on the active card's cream fill; a
   translucent tint would shift between the two. */
/* Outlined pill, UPPERCASE + tracked — the comps show "MON - THU" / "TUESDAY TO SATURDAY",
   not the sentence-case the data stores. Transparent fill so it reads identically on the plain
   card and on the active card's warmer fill; a translucent tint would shift between the two.
   #7A5B2E on #F2F0EA measures 5.48:1. */
.sc-oh__pill { display: inline-block; background: transparent; border: 1px solid #C9AE72; color: #7A5B2E; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 6px 15px; border-radius: var(--sc-radius-btn); line-height: 1.3; white-space: nowrap; font-family: var(--sc-font); }
.sc-oh__days { font-size: .875rem; font-weight: 600; color: var(--sc-text); }
/* Plum and MEDIUM weight — the comps' hours read lighter than the 700 the 02 build used. */
.sc-oh__hours { flex: 1; text-align: right; padding-left: 16px; font-size: .875rem; font-weight: 500; color: var(--sc-plum); line-height: 1.55; }
/* ⚠️ #a0a0a0 measured 2.29:1 on the card — a real AA failure, and PRE-EXISTING (2.42:1 on the
   old white card, so it was already failing before this spec touched it). Surfaced by Part C's
   "closed states measured, not eyeballed". #6E6A62 = 4.72:1 and still reads as the muted state. */
.sc-oh__hours--closed { font-weight: 600; color: #6E6A62; text-transform: uppercase; letter-spacing: .05em; font-size: .8125rem; }
/* The note moved into the gradient aside, so it is light-on-dark now, not grey-on-white. */
/* On the band now, not in a tile: white, upright, and at reading size — the comps show plain
   white body copy, not the small italic caption the 02 build had. 13.93:1 on the light stop. */
.sc-oh__note { font-size: .9375rem; font-style: normal; color: var(--sc-white); line-height: 1.6; margin: 18px 0 0; max-width: 46ch; }

/* ACTIVE SEASON CARD (Sky Tower). site.js adds .is-active to whichever element carries
   [data-season-months] and matches today's month — that attribute now sits on the CARD,
   so the class lands here and the whole card can take the fill.
   ⚠️ SUBTLE BY INSTRUCTION (Adam): a fill change ONLY — no border, no shadow, no scale. */
.sc-oh__card--season.is-active { background: #F7F1E0; }
/* NOW chip — in the markup for every activatable season card, revealed only when active.
   Rendering it always and hiding it with CSS keeps the highlight a pure JS class toggle. */
.sc-oh__now { display: none; flex-shrink: 0; background: #2A0512; color: var(--sc-white); font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--sc-radius-btn); }
.sc-oh__card--season.is-active .sc-oh__now { display: inline-block; }

/* Below 900px the two columns stack and the aside stops sticking — a sticky panel in a
   single-column flow pins itself over the content it is meant to introduce.
   ⚠️ Plain @media: site.css is a STATIC file and never passes through Razor. @@media
   would emit a literal "@@media", which browsers drop silently (CLAUDE.md §4/§7). */
@media (max-width: 900px) {
	.sc-oh__layout { grid-template-columns: 1fr; gap: 28px; }
	.sc-oh__aside { position: static; }
}
@media (max-width: 600px) {
	.sc-oh__card { padding: 16px 18px; }
	.sc-oh__row { align-items: flex-start; flex-direction: column; gap: 6px; }
	.sc-oh__hours { text-align: left; padding-left: 0; }
}

.sc-hero--hotel { min-height: 600px; }
.sc-hero__eyebrow { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-gold); margin-bottom: .875rem; }
.sc-hero__stars { font-size: 1.25rem; color: var(--sc-gold); margin: 0 0 .75rem; letter-spacing: 2px; }
.sc-hero__tagline { font-size: 1.125rem; font-weight: 400; color: rgba(255,255,255,.82); margin: 0 0 1.75rem; line-height: 1.5; }

@media (max-width: 900px) { .sc-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.sc-gallery { grid-template-columns: repeat(2, 1fr); }
	.sc-hero--hotel { min-height: 480px; }
}

/* ============================================================
   RESPONSIVE — NAV BREAKPOINT (<=1024px)
   ============================================================ */

@media (max-width: 1024px) {
	.sc-nav__links    { display: none; }
	.sc-nav__login-btn { display: none; }
	.sc-nav__login-logo { display: none; }
	.sc-nav__hamburger { display: flex; }

	.sc-nav__inner {
		display: grid;
		grid-template-columns: 2.25rem 1fr 2.25rem;
		align-items: center;
		gap: 0;
		padding: 0 1rem;
	}

	.sc-nav__hamburger { grid-column: 1; justify-self: start; }
	.sc-nav__logo { grid-column: 2; justify-self: center; }
	.sc-nav__actions { grid-column: 3; justify-self: end; }

	.sc-nav__search-form { padding: 0 1rem; }

	.sc-card-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.sc-hotels-grid { grid-template-columns: repeat(2, 1fr); }
	.sc-promos__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tight nav band — prevents SHOW logo clipping with the added More dropdown */
@media (min-width: 1025px) and (max-width: 1280px) {
	.sc-nav__inner { gap: 1.25rem; padding: 0 24px; }
	.sc-nav__links { gap: 22px; }
	.sc-nav__link,
	.sc-nav__dropdown-toggle { font-size: 10px; letter-spacing: 1.5px; }
	.sc-nav__actions { gap: 8px; }
}

@media (min-width: 1025px) {
	.sc-drawer { display: none; }
}

@media (max-width: 900px) {
	.sc-card-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.sc-section { padding: 2.5rem 0; }
	.sc-container { padding: 0 1rem; }
	.sc-map { height: 280px; }
	.sc-footer__main { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
	.sc-section-nav__inner { padding: 0 1rem; }
	.sc-section-nav__link { padding: 0 .875rem; font-size: .75rem; }
	.sc-breadcrumb__inner { padding: 0 1rem; }
}

@media (max-width: 640px) {
	:root { --sc-search-height: 44px; }
	.sc-r20__detail { display: none; }
	.sc-r20__age { display: none; }
	.sc-card-grid--cols-2, .sc-card-grid--cols-3, .sc-card-grid--cols-4 { grid-template-columns: 1fr; }
	.sc-card-grid-section { padding: 2.5rem 0; }
	.sc-hotels-grid { grid-template-columns: 1fr; }
	.sc-promos__grid { grid-template-columns: 1fr; }
	/* 🔴 THE BREAKPOINT RETUNES THE THREE CUSTOM PROPERTIES AND NOTHING ELSE. A 44% column
	   holding two characters is absurd on a phone, but the answer indent and the grid both
	   derive from --faq-col, so re-stating the column here is the whole fix — there is no
	   second copy of the number to keep in step. That duplication is what the 02 build had. */
	.sc-faq {
		--faq-col: 2.25rem;
		--faq-pad: 1rem;
		--faq-gap: .75rem;
		padding: 2.5rem 0;
	}
	.sc-faq__inner { padding: 0 1rem; }
	.sc-faq__question { font-size: .9375rem; padding: 1.125rem 0; }
	.sc-faq__question::before { font-size: 1.125rem; }
	.sc-footer__rg-inner { flex-direction: column; align-items: flex-start; gap: .375rem; }
	.sc-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
	.sc-footer__legal-links { flex-wrap: wrap; gap: .75rem 1rem; }
	.sc-hero--home .sc-hero__ctas { flex-direction: column; }
	/* .sc-map-section__footer — REMOVED 2026-08-21 (spec 03): no emitter. */
	.sc-menus__inner { padding: 0 1rem; }
	.sc-menus { padding: 2rem 0 3rem; }
	.sc-menus__section-header { flex-direction: column; align-items: flex-start; }
	.sc-nav__search-form { padding: 0 1rem; }
	.sc-footer__main { grid-template-columns: 1fr; padding: 2rem 1rem 1.5rem; gap: 1.5rem; }
	.sc-r20__inner { padding: 0 1rem; }
}

@media (max-width: 600px) {
	.sc-hero { min-height: 420px; }
	.sc-hero--tall { min-height: 520px; }
	.sc-hero__content { padding: 2rem 1rem 2.5rem; }
	.sc-hero__ctas { flex-direction: column; }
	.sc-hero__ctas .sc-btn { width: 100%; justify-content: center; }
}

/* ==========================================================
   UNIVERSAL FLEX GRID
   ========================================================== */

:root {
	--g-gap: 1.5rem;
	--g-gap-sm: 1.25rem;
}

.sc-flex-grid { display: flex; flex-wrap: wrap; gap: var(--g-gap); margin-top: 1.5rem; }

.sc-flex-card {
	flex: 0 0 calc(25% - 1.125rem);
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--sc-white);
	border: 1px solid rgba(0,0,0,.08);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: var(--sc-text);
	transition: box-shadow .25s, transform .25s;
}

@media (min-width: 1101px) {
	/* Base is 4-up (25%, from .sc-flex-card default).
	   To avoid a final row of 1 or 2, rebalance the TAIL into rows of three.
	   `:nth-child(4n+1)` = a row-start tile. Pairing it with `:nth-last-child(K)`
	   matches the start of the rebalanced tail only at the matching total%4:
	     K=3 → total%4==3 (tail of 3)   K=6 → total%4==2 (tail of 6 = 3+3)
	     K=9 → total%4==1 (tail of 9 = 3+3+3)
	   The matched tile + its `~` siblings are set to 33%, so they wrap as 3s. */

	/* total % 4 == 3  →  …+3 */
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(3),
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(3) ~ .sc-flex-card {
		flex: 0 0 calc(33.333% - 1rem);
	}

	/* total % 4 == 2  →  …+3+3 */
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(6),
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(6) ~ .sc-flex-card {
		flex: 0 0 calc(33.333% - 1rem);
	}

	/* total % 4 == 1  →  …+3+3+3 */
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(9),
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(9) ~ .sc-flex-card {
		flex: 0 0 calc(33.333% - 1rem);
	}

	/* n=2 single row → 2-up (nothing above to balance against) */
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(2),
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(2) ~ .sc-flex-card {
		flex: 0 0 calc(50% - .75rem);
	}

	/* n=5 → 3+2 (only irreducible case; trailing pair sits at 50%) */
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(5),
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(5) ~ .sc-flex-card:nth-child(-n+3) {
		flex: 0 0 calc(33.333% - 1rem);
	}
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(5) ~ .sc-flex-card:nth-child(n+4) {
		flex: 0 0 calc(50% - .75rem);
	}
}

.sc-subpage-grid { display: flex; flex-wrap: wrap; gap: var(--g-gap-sm); margin-top: 2rem; }

.sc-subpage-card {
	flex: 0 0 calc(25% - 0.9375rem);
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--sc-white);
	border-radius: var(--sc-radius-card);
	padding: 2rem 1.75rem 1.75rem;
	text-decoration: none;
	color: var(--sc-text);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

@media (min-width: 1101px) {
	/* Base is 4-up (25%). Same universal distribution as .sc-flex-grid — max 4
	   per row, larger rows first, no orphan/oversized tail. Rebalance the TAIL
	   into rows of three so tiles never exceed ~33%. */
	/* total % 4 == 3  →  …+3 */
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(3),
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(3) ~ .sc-subpage-card {
		flex: 0 0 calc(33.333% - 0.84rem);
	}
	/* total % 4 == 2  →  …+3+3 */
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(6),
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(6) ~ .sc-subpage-card {
		flex: 0 0 calc(33.333% - 0.84rem);
	}
	/* total % 4 == 1  →  …+3+3+3 */
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(9),
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(9) ~ .sc-subpage-card {
		flex: 0 0 calc(33.333% - 0.84rem);
	}
	/* n=2 single row (irreducible) */
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(2),
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(2) ~ .sc-subpage-card {
		flex: 0 0 calc(50% - 0.625rem);
	}
	/* n=5 → 3+2 (irreducible) */
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(5),
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(5) ~ .sc-subpage-card:nth-child(-n+3) {
		flex: 0 0 calc(33.333% - 0.84rem);
	}
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(5) ~ .sc-subpage-card:nth-child(n+4) {
		flex: 0 0 calc(50% - 0.625rem);
	}
}

@media (min-width: 641px) and (max-width: 1100px) {
	.sc-subpage-card { flex: 0 0 calc(50% - 0.625rem); }
}

@media (max-width: 640px) {
	.sc-subpage-card { flex: 0 0 100%; }
}

.sc-flex-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); transform: translateY(-2px); }
.sc-flex-card__img-wrap { aspect-ratio: 16 / 10; overflow: hidden; flex-shrink: 0; }
.sc-flex-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.sc-flex-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; gap: .5rem; }
.sc-flex-card__title { font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--sc-text); text-decoration: none; }
.sc-flex-card__desc { font-size: .875rem; line-height: 1.6; color: rgba(0,0,0,.6); margin: 0; text-decoration: none; }
.sc-flex-card__facts { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin-bottom: .25rem; }
.sc-flex-card__fact { display: flex; align-items: center; gap: .3rem; font-size: .8125rem; color: var(--sc-plum); text-decoration: none; }
.sc-flex-card__fact .material-symbols-outlined { font-size: 16px; color: var(--sc-gold); }
.sc-flex-card__price { font-size: .875rem; color: rgba(0,0,0,.55); margin: 0; text-decoration: none; }
.sc-flex-card__price strong { color: var(--sc-text); font-weight: 700; }
.sc-flex-card__cta { margin-top: auto; font-size: .8125rem; padding: .5rem 1.25rem; align-self: flex-start; text-decoration: none; }

.sc-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.sc-section-header__link { font-size: .875rem; font-weight: 600; color: var(--sc-plum); text-decoration: none; white-space: nowrap; transition: opacity .2s; }
.sc-section-header__link:hover { opacity: .75; }

.sc-hotel-brand--grand .sc-flex-card { background: var(--hotel-card-bg); border-color: var(--hotel-card-border); }
.sc-hotel-brand--grand .sc-flex-card__title { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-flex-card__desc { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-flex-card__fact { color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-flex-card__fact .material-symbols-outlined { color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-flex-card__price { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-flex-card__price strong { color: var(--hotel-text); }

@media (max-width: 1100px) {
	.sc-flex-card,
	.sc-flex-grid .sc-flex-card:first-child:nth-last-child(n),
	.sc-flex-grid .sc-flex-card:first-child:nth-last-child(n) ~ .sc-flex-card {
		flex: 0 0 calc(50% - .75rem);
	}
}

/* 2-up regime (641–1100px): a lone trailing tile fills the row. */
@media (min-width: 641px) and (max-width: 1100px) {
	.sc-flex-grid > .sc-flex-card:nth-child(2n+1):nth-last-child(1) {
		flex: 0 0 100%;
	}
}

@media (max-width: 640px) {
	.sc-flex-card,
	.sc-flex-grid .sc-flex-card:first-child:nth-last-child(n),
	.sc-flex-grid .sc-flex-card:first-child:nth-last-child(n) ~ .sc-flex-card {
		flex: 0 0 100%;
	}
}

@media (max-width: 480px) {
	.sc-nav__inner { padding: 0 1rem; }
	.sc-footer__main { grid-template-columns: 1fr; padding: 2.5rem 1rem 2rem; }
}

/* ============================================================
   CONTENT PAGE WITH SIDE NAVIGATION
   ============================================================ */

/* Two-column layout: side nav left, main content right */
.sc-content-with-sidenav {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 3rem;
	align-items: start;
	padding-top: 3rem;
	padding-bottom: 4rem;
}

.sc-sidenav-col {
	position: sticky;
	top: calc(var(--sc-nav-height) + var(--sc-search-height) + 1.5rem);
	max-height: calc(100vh - var(--sc-nav-height) - var(--sc-search-height) - 3rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(220,183,65,.3) transparent;
}

.sc-sidenav-col::-webkit-scrollbar { width: 4px; }
.sc-sidenav-col::-webkit-scrollbar-track { background: transparent; }
.sc-sidenav-col::-webkit-scrollbar-thumb { background: rgba(220,183,65,.3); border-radius: 2px; }

.sc-main-col {
	min-width: 0;
}

/* Side nav component */
.sc-sidenav {
	font-family: var(--sc-font);
}

/* Section heading — links back to the landing page */
.sc-sidenav__heading {
	display: block;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sc-text);
	text-decoration: none;
	margin-bottom: 1.25rem;
	padding-bottom: .875rem;
	border-bottom: 2px solid rgba(220,183,65,.25);
	transition: color .15s;
}

.sc-sidenav__heading:hover { color: var(--sc-plum); }
.sc-sidenav__heading.is-active { color: var(--sc-plum); }

/* Top-level list */
.sc-sidenav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sc-sidenav__item {
	border-bottom: 1px solid rgba(0,0,0,.06);
}

.sc-sidenav__item:last-child {
	border-bottom: none;
}

/* Top-level link */
.sc-sidenav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .625rem 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(0,0,0,.55);
	text-decoration: none;
	transition: color .15s;
	width: 100%;
}

.sc-sidenav__link:hover { color: var(--sc-text); }
.sc-sidenav__link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; border-radius: 2px; }

.sc-sidenav__link.is-active {
	color: var(--sc-plum);
	font-weight: 700;
}

/* The + / - indicator for items that have children */
.sc-sidenav__indicator {
	flex-shrink: 0;
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1;
	color: rgba(0,0,0,.3);
	min-width: 1rem;
	text-align: right;
	transition: color .15s;
}

.sc-sidenav__link:hover .sc-sidenav__indicator,
.sc-sidenav__link.is-active .sc-sidenav__indicator {
	color: var(--sc-gold);
}

/* Sub-list (grandchildren — shown when parent is active) */
.sc-sidenav__sub {
	list-style: none;
	margin: 0 0 .5rem;
	padding: 0 0 0 .875rem;
	border-left: 2px solid rgba(220,183,65,.25);
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sc-sidenav__sub-item {
	border-bottom: none;
}

/* Sub-level link */
.sc-sidenav__sub-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .5rem 0;
	font-size: .8125rem;
	font-weight: 500;
	color: rgba(0,0,0,.5);
	text-decoration: none;
	transition: color .15s;
}

.sc-sidenav__sub-link:hover { color: rgba(0,0,0,.8); }
.sc-sidenav__sub-link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; border-radius: 2px; }

.sc-sidenav__sub-link.is-active {
	color: var(--sc-plum);
	font-weight: 700;
}

/* Deep sub-list (great-grandchildren) */
.sc-sidenav__sub--deep {
	padding-left: .75rem;
	border-left: 2px solid rgba(220,183,65,.12);
	margin-top: .125rem;
}

.sc-sidenav__sub--deep .sc-sidenav__sub-link {
	font-size: .75rem;
	font-weight: 400;
	padding: .375rem 0;
}

/* Mobile: stack to single column, side nav above content */
@media (max-width: 900px) {
	.sc-content-with-sidenav {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding-top: 2rem;
	}

	.sc-sidenav-col {
		position: static;
		max-height: none;
		overflow-y: visible;
		border-bottom: 2px solid rgba(0,0,0,.08);
		padding-bottom: 1.5rem;
	}
}

/* ── Side nav — mobile collapse toggle (≤900px) ─────────────────────────────
   Desktop (≥901px): toggle hidden, panel always shown → unchanged left rail.
   Mobile (≤900px): a single bar shows the current page; the panel collapses
   and opens via .is-open (toggled in site.js). */

/* Base: toggle never shows on desktop. Visual props live here so the mobile
   query only flips display. Layout: menu icon | current page (flex) | chevron. */
.sc-sidenav__toggle {
	display: none;
	width: 100%;
	align-items: center;
	gap: .75rem;
	padding: .875rem 1rem;
	background: #faf7f1;
	border: 1px solid rgba(220,183,65,.3);
	border-radius: 10px;
	font-family: var(--sc-font);
	text-align: left;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.sc-sidenav__toggle:hover { background: #f5efe2; }
.sc-sidenav__toggle:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-sidenav__toggle[aria-expanded="true"] { background: #f5efe2; border-color: var(--sc-gold); }

.sc-sidenav__toggle-icon {
	font-size: 1.375rem;
	line-height: 1;
	color: var(--sc-gold);
	flex-shrink: 0;
}
.sc-sidenav__toggle-current {
	flex: 1;
	min-width: 0;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sc-plum);
}
.sc-sidenav__toggle-chevron {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--sc-plum);
	flex-shrink: 0;
	transition: transform .25s;
}
.sc-sidenav__toggle[aria-expanded="true"] .sc-sidenav__toggle-chevron { transform: rotate(180deg); }

@media (max-width: 900px) {
	.sc-sidenav__toggle { display: flex; }

	/* The toggle bar is the divider now — drop the col's border/padding. */
	.sc-sidenav-col { border-bottom: none; padding-bottom: 0; }

	/* Panel collapsed by default; opens with .is-open on the nav. */
	.sc-sidenav__panel { display: none; padding-top: 1.25rem; }
	.sc-sidenav.is-open .sc-sidenav__panel { display: block; }
}

/* ============================================================
   FLEX CARD EXTENSIONS (restaurant / dining landing)
   ============================================================ */

.sc-flex-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.sc-flex-card__category { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-plum); }
.sc-flex-card__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.25); flex-shrink: 0; }
.sc-flex-card__price-range { font-size: .6875rem; font-weight: 600; color: rgba(0,0,0,.45); letter-spacing: .04em; }
.sc-flex-card__footer { display: flex; align-items: center; gap: .625rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.07); }
.sc-flex-card__ctas { display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-flex-card__view { display: inline-flex; align-items: center; padding: .45rem 1rem; border: 2px solid rgba(0,0,0,.15); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--sc-text); transition: border-color .2s, background .2s; cursor: pointer; }
.sc-flex-card__view:hover { border-color: var(--sc-gold); background: rgba(220,183,65,.06); }
.sc-flex-card__book { display: inline-flex; align-items: center; padding: .45rem 1rem; background: var(--sc-gold); color: var(--sc-text); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; cursor: pointer; }
.sc-flex-card__book:hover { opacity: .88; }

/* Stretched-link card interaction (RestaurantsLanding) — the card face is a
   stretched "View" link, with Book a Table / Order Online layered above it so
   each control keeps its own click (a SevenRooms trigger can't be nested inside
   a navigating <a>). Moved here from the RestaurantsLanding inline <style>. */
.sc-flex-card { position: relative; }
.sc-flex-card__stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sc-flex-card__stretch:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-flex-card__book,
.sc-flex-card__order { position: relative; z-index: 2; }
.sc-flex-card__book:focus-visible,
.sc-flex-card__order:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-flex-card__order {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem 1rem;
	background: transparent;
	color: var(--sc-plum);
	border: 2px solid var(--sc-gold);
	border-radius: var(--sc-radius-btn);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, color .2s;
	cursor: pointer;
}
.sc-flex-card__order:hover { background: var(--sc-gold); color: var(--sc-text); }
.sc-flex-card__order .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   MAP SECTION — CONTACT DETAILS
   ============================================================ */

/* .sc-map-section__info / __meta / __social — REMOVED 2026-08-21 (spec 03).
   The OSM iframe and its footer strip are gone; the contact rows and social icons moved
   into `.sc-loc__contact` / `.sc-loc__social` in the left column, and the phone/email
   also into the floating card. Verified zero emitters in Views/ before deleting. */

/* ── CONTENT-PAGE EMBED — blob-hosted HTML5 widget (Tumult Hype) ────────────
   The SHOWBenefits scene has two responsive layouts:
     narrow  414×736  (cards stacked)  — iframe < 950px wide
     wide    950×500  (cards in a row) — iframe ≥ 950px wide
   Matching the iframe aspect-ratio to the active layout (switched on the
   iframe's OWN width via a container query) makes height track width exactly,
   so the widget fills its box with no white space or scrollbar. */

.sc-embed {
	width: 100%;
	margin: 2rem 0;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	container-type: inline-size;
}
.sc-embed__frame {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	aspect-ratio: 414 / 736;
}
@container (min-width: 950px) {
	.sc-embed__frame { aspect-ratio: 950 / 500; }
}
/* Two-column content layout (interim — superseded by Content Sections blocks) */
.sc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sc-two-col > * { min-width: 0; }
@media (max-width: 768px) { .sc-two-col { grid-template-columns: 1fr; gap: 24px; } }

/* ─────────────────────────────────────────────────────────────
   Master-brand display type — Specter Black on H1 / hero only.
   Adobe Fonts kit bsg2bme ships Specter at weight 800.
   H2 and below stay Montserrat per brand spec.
   ───────────────────────────────────────────────────────────── */
h1,
.sc-hero__heading,
.sc-mosaic__title--hero {
	font-family: "specter", var(--sc-font) !important;
	font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────
   Hero CTA + height consolidation (2026-06-22)
   ───────────────────────────────────────────────────────────── */
/* Secondary (outline) CTAs sit on dark hero imagery — plum-on-plum is invisible, so on
   heroes they go white (border + label); hover fills white with plum text. Outline buttons
   elsewhere (cards, restaurant overview on light bg) stay plum — unchanged. */
.sc-hero .sc-btn--outline { color: var(--sc-white); border-color: var(--sc-white); }
.sc-hero .sc-btn--outline:hover { background: var(--sc-white); color: var(--sc-plum); }

/* Mobile: shorten heroes ~1/3 (to a 280px floor), EXCEPT those with stacked CTA buttons,
   which need the room. High-specificity :not(:has()) wins over the per-variant heights.
   (:has in its own block per project rule.) */
@media (max-width: 600px) {
	.sc-hero:not(:has(.sc-hero__ctas .sc-btn)) { min-height: 280px; }
}

/* ─────────────────────────────────────────────────────────────
   Nav 'More' dropdown — gold underline sweeps in on hover (a bit of life)
   ───────────────────────────────────────────────────────────── */
.sc-nav__more-link { position: relative; }
.sc-nav__more-link::after { content: ""; position: absolute; left: 1.25rem; bottom: .4rem; height: 2px; width: 0; background: var(--sc-gold); transition: width .2s ease; }
.sc-nav__more-link:hover::after,
.sc-nav__more-link:focus-visible::after { width: 1.5rem; }

/* ─────────────────────────────────────────────────────────────
   Content-body headings — short gold underline accent (content-heavy pages).
   h2 only; h3 stays clean to preserve hierarchy.
   ───────────────────────────────────────────────────────────── */
.sc-rte h2::after,
.sc-prose h2::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: .6rem; background: var(--sc-gold); border-radius: 2px; }

/* ─────────────────────────────────────────────────────────────
   Restaurant menus — whole row clickable. The "View" badge is a non-link span,
   so a stretched-link overlay on the title link covers the row (incl. the badge),
   making the entire item open the menu. Badge fills gold on row hover for affordance.
   ───────────────────────────────────────────────────────────── */
.sc-restaurant-menus__item { position: relative; }
.sc-restaurant-menus__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Design refresh 2026-08 (spec 07): hover fills PLUM to match the new outline resting state.
   It was gold-on-gold-tint, which no longer exists. */
.sc-restaurant-menus__item:hover .sc-restaurant-menus__badge { background: var(--sc-plum); color: var(--sc-white); }

/* ─────────────────────────────────────────────────────────────
   404 page (NotFound.cshtml) — centred copy + key-section card grid.
   Reuses .sc-card-grid--cols-3 (already 3-up desktop / 2-up tablet / 1-up
   mobile via the existing responsive rules), tokens, and .sc-btn classes.
   ───────────────────────────────────────────────────────────── */
.sc-404 { text-align: center; }
.sc-404__intro { max-width: 660px; margin: 0 auto; padding-top: 1.5rem; }
.sc-404__code { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .75rem; }
.sc-404__title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; color: var(--sc-text); margin: 0 0 1rem; }
.sc-404__lead { font-size: 1.0625rem; line-height: 1.7; color: rgba(0, 0, 0, .6); margin: 0 0 1.75rem; }
.sc-404__cta { justify-content: center; }
.sc-404__sections-title { font-size: 1.25rem; font-weight: 700; color: var(--sc-text); margin: 3rem 0 1.5rem; }
.sc-404__grid { text-align: left; }

/* Card — links to a key section. Two variants: media (bg image + overlay) and
   text (clean tile with a leading icon when no image exists). */
.sc-404-card { position: relative; display: flex; align-items: flex-end; min-height: 150px; border-radius: var(--sc-radius-card); overflow: hidden; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); transition: transform .2s, box-shadow .2s; }
.sc-404-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); }
.sc-404-card:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }
.sc-404-card--media { background: var(--sc-plum); color: var(--sc-white); }
.sc-404-card--text { background: #f5f5f5; color: var(--sc-text); border: 1px solid rgba(0, 0, 0, .08); align-items: center; }
.sc-404-card__media { position: absolute; inset: 0; z-index: 0; }
.sc-404-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sc-404-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(68, 11, 34, .85), rgba(68, 11, 34, .15)); }
.sc-404-card__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: .625rem; width: 100%; padding: 1.25rem 1.4rem; }
.sc-404-card__icon { font-size: 1.5rem; color: var(--sc-plum); flex-shrink: 0; }
.sc-404-card__label { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.sc-404-card__arrow { margin-left: auto; font-size: 1.25rem; flex-shrink: 0; opacity: .85; transition: transform .2s; }
.sc-404-card:hover .sc-404-card__arrow { transform: translateX(3px); }

@media (max-width: 600px) {
	.sc-404__sections-title { margin-top: 2rem; }
}

/* ============================================================
   CAROUSEL  (Content Builder block: blockCarousel)
   Infinite auto-scrolling marquee of square image/logo/text
   tiles. Hover pauses, drag scrubs, click/tap flips a tile
   from its logo to its description. JS: initCarousels in site.js
   ============================================================ */
.sc-carousel { position: relative; width: 100%; }
.sc-carousel__viewport {
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
.sc-carousel__viewport.is-dragging { cursor: grabbing; }
.sc-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	will-change: transform;
}

/* Tile — square (600x600 source), scales down */
.sc-carousel__tile {
	position: relative;
	flex: 0 0 auto;
	width: 80vw;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	border-radius: var(--sc-radius-card, 14px);
	overflow: hidden;
	background: var(--sc-dark, #2a2a2a);
}
.sc-carousel__tile:has(.sc-carousel__face--back) { cursor: pointer; }
.sc-carousel__tile:focus-visible { outline: 3px solid var(--sc-gold, #c7a572); outline-offset: 2px; }

.sc-carousel__media {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
}
.sc-carousel__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.68) 100%);
}

/* Faces — logo (front) flips to text (back) */
.sc-carousel__face {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	padding: 1.5rem;
	text-align: center;
	transition: opacity .35s ease, visibility .35s ease;
}
.sc-carousel__face--front { opacity: 1; visibility: visible; padding: 0; }
.sc-carousel__face--back  { opacity: 0; visibility: hidden; }
.sc-carousel__tile.is-flipped .sc-carousel__face--front { opacity: 0; visibility: hidden; }
.sc-carousel__tile.is-flipped .sc-carousel__face--back  { opacity: 1; visibility: visible; }

.sc-carousel__logo {
	width: 100%; height: 100%;
	object-fit: contain;
	pointer-events: none;
}
.sc-carousel__text {
	margin: 0;
	color: var(--sc-white, #fff);
	font-family: var(--sc-font, 'Montserrat', sans-serif);
	font-size: clamp(.82rem, 1.5vw, 1rem);
	font-weight: 500;
	line-height: 1.45;
	max-height: 100%;
	overflow: auto;
}
a.sc-carousel__text--link { text-decoration: none; }
a.sc-carousel__text--link:hover { text-decoration: underline; }
a.sc-carousel__text--link:focus-visible { text-decoration: underline; }

/* Responsive tile counts: ~1.2 mobile up to ~4 desktop */
@media (min-width: 768px) {
	.sc-carousel__tile { width: 42vw; }
}
@media (min-width: 1024px) {
	.sc-carousel__tile { width: 30vw; }
}
@media (min-width: 1280px) {
	.sc-carousel__tile { width: 23vw; max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-carousel__face { transition: none; }
}

/* ============================================================
   IMAGE-LINK HOVER — CARD LIFT SUPPRESSION (global, 2026-07-03)
   Removes the hover drop-shadow and box lift on every image-link card
   site-wide. Appended last so these win over the per-component :hover
   rules above (equal specificity, later wins). Resting card shadows are
   preserved — only the ON-HOVER growth is neutralised. Companion blocks
   live at the foot of whatson.css, news.css, room.css and explore.css.

   🔴 THE IMAGE HALF OF THIS BLOCK IS GONE — DELETED 2026-08-07 (Adam).
   It used to neutralise the image zoom with `transform: none !important`
   and substitute an `opacity: .85` fade. That MASKED the zoom instead of
   removing it: every `transform: scale(...)` hover rule stayed live
   underneath, so deleting an override block would have silently brought
   the zoom back — and the substituted fade became the complaint itself.
   Both are now deleted AT SOURCE, here and in whatson/news/room/hero.css.
   Images have NO hover treatment. Do not add one back; if a hover cue is
   ever wanted, add it deliberately rather than by removing an override.
   📖 docs/LESSONS.md §L7 — an override block masks a rule, it does not
   remove it. When the intent is removal, delete the rule.
   ============================================================ */

/* Containers with no resting shadow — no lift, no shadow on hover. */
.sc-hp-card:hover,
.sc-evc:hover,
.sc-hp-duo:hover,
.sc-flex-card:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* Containers with a subtle RESTING shadow — hold it steady on hover
   (don't let it grow into a drop shadow). */
.sc-event-card:hover,
.sc-restaurant-card:hover,
.sc-hotel-card:hover {
	transform: none !important;
	box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
}

.sc-404-card:hover {
	transform: none !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}

/* Mosaic tiles, card images and gallery thumbnails: no hover rules at all.
   The zoom rules and the opacity overrides that masked them were deleted
   2026-08-07 — see the block header above. The mosaic's overlay gradient
   and the gallery's magnify overlay remain as their hover cues. */

/* LOCATION & CONTACT — POP-UP-FORM ICON BUTTON — REMOVED 2026-08-21 (spec 03).
   This block existed because the old component styled `.sc-map-section__social a` only,
   leaving the Restaurant pop-up-form <button> unstyled beside the social <a>s. The new
   `.sc-loc__social-link` class is applied to the <a>s AND the <button> alike, so the
   asymmetry that made this necessary no longer exists. Verified zero emitters in Views/
   before deleting. */

/* .sc-oh__group — REMOVED 2026-08-20 (design refresh spec 02).
   A block with a label but no hours (The District: Sports Bar / Brew Bar / Kitchen)
   used to render as an in-card sub-heading with this class. It now STARTS ITS OWN CARD
   and its label renders as `.sc-oh__season-head` inside `.sc-oh__card-head`, the same
   element a Sky Tower season uses — one heading treatment instead of two.
   Verified unreachable before deleting: zero `sc-oh__group` occurrences in Views/
   (excluding _retired/). Do not re-add without a matching emitter. */

/* ============================================================
   TABLES — RTE / content tables (front-end)   (2026-07-08)
   Simple bordered style. Front-end counterpart of the same rules
   in rte-styles.css (which is EDITOR-ONLY — not linked in _Layout).
   Keep the two in sync — EXCEPT the `table:not([class])` scope, which
   is front-end-only (see below).

   SCOPED to `table:not([class])` on 2026-07-16. Originally these were
   bare `table`/`th`/`td` selectors and leaked into every TEMPLATE-built
   table on the site — they broke the Sky Tower price cards (.sc-pt-table)
   on 13 Jul, patched then by an insulation block at the foot of
   skytower.css. Tiptap emits a bare `<table style="min-width:100px">`
   with NO class; template tables always carry one. Do NOT remove the
   scope, and do NOT add an unscoped table rule — CLAUDE.md §7.
   Appended to stay reversible.
   ============================================================ */
table:not([class]) {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--sc-text);
	background: var(--sc-white);
}
table:not([class]) th,
table:not([class]) td {
	padding: .7rem .95rem;
	border: 1px solid #e6e2da;
	text-align: left;
	vertical-align: top;
}
/* Tidy paragraph spacing inside cells (RTE wraps cell text in <p>) */
table:not([class]) th > p,
table:not([class]) td > p { margin: 0 0 .4rem; }
table:not([class]) th > p:last-child,
table:not([class]) td > p:last-child { margin-bottom: 0; }
/* Header — semantic <thead> */
table:not([class]) > thead > tr > th,
table:not([class]) > thead > tr > td {
	background: #f7f5f2;
	color: var(--sc-plum);
	font-weight: 700;
	border-bottom: 2px solid var(--sc-gold);
}
/* Header — RTE tables with no <thead>: whole first row when it reads as a
   header (contains a bold cell). :has() isolated in its own block. */
table:not([class]) > tbody > tr:first-child:has(> td > p > strong) > td {
	background: #f7f5f2;
	color: var(--sc-plum);
	font-weight: 700;
	border-bottom: 2px solid var(--sc-gold);
}
/* Zebra striping (body rows) */
table:not([class]) > tbody > tr:nth-child(even) > td { background: #faf8f5; }
/* Row hover — pointer devices only */
@media (hover: hover) {
	table:not([class]) > tbody > tr:hover > td { background: #f3efe8; }
}
/* Small screens — condense padding + let wide tables scroll */
@media (max-width: 600px) {
	table:not([class]) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: .875rem;
	}
	table:not([class]) th,
	table:not([class]) td { padding: .55rem .7rem; }
}

/* ============================================================
   FOOTER — SHIELDED WIDGET  (2026-07-09)
   Women's Refuge "Shielded Site" safe-exit badge, shown to the RIGHT of the
   social icons in the footer brand column. Gated per site root by the
   `showShielded` toggle in _Footer.cshtml (NZ sites only). The social <ul> and
   the badge share a flex row so the shield sits inline after the last social
   icon; a hairline divider sets the partner badge apart from the channel icons.
   Logo is served from shielded.co.nz (not self-hosted). Appended to stay reversible.
   ============================================================ */
.sc-footer__social-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .9rem;
}
.sc-footer__shielded {
	display: inline-flex;
	align-items: center;
	padding-left: .9rem;
	border-left: 1px solid rgba(255,255,255,.14);
}
.sc-footer__shielded-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	border-radius: 8px;
	transition: opacity .2s;
}
.sc-footer__shielded-link:hover { opacity: .8; }
.sc-footer__shielded-link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; opacity: 1; }
.sc-footer__shielded-link img { height: 2.25rem; width: 2.25rem; display: block; }

/* ============================================================
   OPENING HOURS — LIVE OPEN/CLOSED STATUS BADGE (2026-07-09)
   Subtle dot + text (not a loud fill). One JS module (initOpeningStatus)
   fills every [data-oh-status] slot from a [data-oh] blob and sets
   data-state=open|soon|closed. Three placements share the state colours:
     .sc-oh__status  — section header (Opening Hours block, light bg)
     .sc-tile-status — restaurant landing card, dot-led line (light bg)
     .sc-oh__chip    — hero chip (dark bg: white text, coloured dot only)
   Slots ship hidden; the :not([hidden]) rule reveals them only once JS runs,
   so no-JS / no-data → no badge, no gap. Wrappers use display:contents so an
   unfilled slot never adds a flex gap. Plain @media (static file).
   ============================================================ */
.sc-oh__status,
.sc-tile-status,
.sc-oh__chip {
	align-items: center;
	gap: .4rem;
	font-family: var(--sc-font);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.sc-oh__status:not([hidden]),
.sc-tile-status:not([hidden]),
.sc-oh__chip:not([hidden]) {
	display: inline-flex;
}
.sc-oh__status::before,
.sc-tile-status::before,
.sc-oh__chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #a09b90;
}
/* Dot colour by state — all three placements */
.sc-oh__status[data-state="open"]::before,
.sc-tile-status[data-state="open"]::before,
.sc-oh__chip[data-state="open"]::before { background: #52AE32; }
.sc-oh__status[data-state="soon"]::before,
.sc-tile-status[data-state="soon"]::before,
.sc-oh__chip[data-state="soon"]::before { background: #EF9F27; }
.sc-oh__status[data-state="closed"]::before,
.sc-tile-status[data-state="closed"]::before,
.sc-oh__chip[data-state="closed"]::before { background: #a09b90; }
/* Text colour by state — light-background placements only */
.sc-oh__status[data-state="open"],
.sc-tile-status[data-state="open"] { color: #3B6D11; }
.sc-oh__status[data-state="soon"],
.sc-tile-status[data-state="soon"] { color: #854F0B; }
.sc-oh__status[data-state="closed"],
.sc-tile-status[data-state="closed"] { color: #6b6b63; }
/* 🔴 ON THE BAND THE STATUS IS A FILLED PALE-GOLD PILL, not a bare dot + text — that is what
   both comps show, and it is also what makes it legible: the three global state colours above
   are dark-on-light by design (#3B6D11 / #854F0B / #6b6b63) and would render dark-on-dark here.
   Giving it a light pill restores a light ground for those dark labels instead of fighting them,
   so the state colour still carries meaning rather than being flattened to white.
   Plum on #EFE3B8 measures 12.42:1.
   ⚠️ Scoped to .sc-oh__aside deliberately, NOT applied to .sc-oh__status globally — the class
   has one emitter today (_OpeningHours) but scoping means a future light-background placement
   is not silently broken by this rule. */
.sc-oh__aside .sc-oh__status:not([hidden]) {
	margin-top: 22px;
	background: #EFE3B8;
	padding: .4rem .85rem;
	border-radius: var(--sc-radius-btn);
	font-size: .8125rem;
}
.sc-oh__aside .sc-oh__status[data-state="open"] { color: #2F5A0E; }
.sc-oh__aside .sc-oh__status[data-state="soon"] { color: #6E3F08; }
.sc-oh__aside .sc-oh__status[data-state="closed"] { color: #4A463F; }
/* Hero chip — dark translucent pill, always white text, coloured dot only */
.sc-oh__chip {
	background: rgba(255, 255, 255, .14);
	color: var(--sc-white);
	padding: .32rem .72rem;
	border-radius: 100px;
}
.sc-hero .sc-oh__chip { margin-bottom: 1.25rem; }
/* Section header row (title + live status side by side) */
/* Header block inside the gradient aside: title over the live status pill.
   Was a side-by-side flex row when it sat above a full-width card. */
.sc-oh__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.sc-oh__head .sc-oh__title { margin-bottom: 0; }
/* The title inherits the aside's white from .sc-surface--grad's :where() heading rule,
   which is a DEFAULT at (0,1,0) — .sc-oh__title (0,1,0) would beat it on source order if
   it declared a colour. It does not, so it inherits correctly; stated here so a future
   colour added to .sc-oh__title is understood to break the aside. */
/* Wrappers that carry the [data-oh] blob — no box of their own, so an unfilled
   (hidden) badge never contributes a flex gap in the card body / hero column. */
.sc-tile-status-line,
.sc-oh__chip-slot { display: contents; }
/* Card heading — the season name (Sky Tower) or the group name (The District's
   Sports Bar / Brew Bar / Kitchen). One rule now serves both: since 2026-08-20 every
   group is its OWN card, so the old distinction between .sc-oh__season-head (seasonal)
   and .sc-oh__group (grouped) as competing in-card sub-headings no longer exists.
   ⚠️ The old `.sc-oh__season-head.is-active` gold-tint rule is GONE, not moved: the
   highlight is now the card's fill (.sc-oh__card--season.is-active above), because
   [data-season-months] moved from this heading onto the card. */
.sc-oh__season-head {
	font-family: var(--sc-font);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sc-plum);
}
.sc-oh__service {
	margin: .6rem 0 .1rem;
	font-family: var(--sc-font);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a6a38;
}
/* ============================================================
   TABLES — TIPTAP HEADER-ROW FIX + SCOPING  (2026-07-16)
   Two problems, one block.

   1. The TABLES block above was written against hand-authored <thead>
      markup. Tiptap does NOT emit <thead> — it renders the header row
      as <tbody><tr><th> — so `thead th` never matched on any table
      built or pasted through the RTE, and the plum/gold header
      treatment had never fired there. Confirmed from the live DOM
      (Fortuna pricing, 16 Jul).

   2. EVERY rule here is scoped to `table:not([class])`. The 8 Jul block
      targeted bare `table`/`th`/`td` and leaked into TEMPLATE-built
      tables — it broke the Sky Tower price cards on 13 Jul (patched by
      an insulation block at the foot of skytower.css) and this block's
      higher-specificity rules punched straight back through that patch
      on 16 Jul. Tiptap emits a bare `<table style="min-width:100px">`
      with NO class; every template table carries one (.sc-pt-table).
      `:not([class])` separates the two with no per-template exclusion
      list — so the next template table can't be broken by this block.
      SEE THE SCOPING RULE IN CLAUDE.md §7 BEFORE ADDING ANY TABLE RULE.

   Keep in sync with the matching block at the tail of rte-styles.css —
   EXCEPT the scope: that file is editor-only, where every table IS RTE
   content, so it stays unscoped deliberately.
   Appended to stay reversible.
   ============================================================ */

/* Header row — <thead> (hand-authored) OR the first tbody row of <th> (Tiptap).
   All selectors are plain, so they are safe to group. */
table:not([class]) > thead > tr > th,
table:not([class]) > thead > tr > td,
table:not([class]) > tbody > tr:first-child > th {
	background: #f7f5f2;
	color: var(--sc-plum);
	font-weight: 700;
	border-bottom: 2px solid var(--sc-gold);
}

/* Header sub-line — 2nd and later paragraphs in a header cell render as lighter
   sub-text (e.g. a day/time qualifier under a column name). Tiptap strips <small>,
   so a second paragraph (Enter inside the cell, not Shift+Enter) is the only
   durable way to de-emphasise inside a cell. */
table:not([class]) th > p ~ p {
	font-weight: 500;
	font-size: .8125rem;
	letter-spacing: 0;
	opacity: .75;
}

/* Zebra parity — with the header row inside <tbody> it occupies row 1 and pushes
   the first stripe onto the FIRST data row, so the header tint and the first
   stripe sit adjacent. Shift the parity back. Isolated :has() blocks — an engine
   that cannot parse :has() keeps the default striping (offset, not broken). */
table:not([class]):has(> tbody > tr:first-child > th) > tbody > tr:nth-child(even) > td {
	background: var(--sc-white);
}
table:not([class]):has(> tbody > tr:first-child > th) > tbody > tr:nth-child(odd) > td {
	background: #faf8f5;
}

/* Row hover — !important so it always beats the :has() parity rules above, which
   carry higher specificity. Safe now only because the selector is scoped: an
   unscoped !important here defeated skytower.css's insulation block (16 Jul). */
@media (hover: hover) {
	table:not([class]) > tbody > tr:hover > td { background: #f3efe8 !important; }
}

/* ============================================================
   TABLES — NEUTRALISE TIPTAP'S COLUMN-RESIZER WIDTHS  (2026-07-16)
   Tiptap ships a column resizer that writes INLINE widths onto the table
   and its <colgroup>: `<table style="min-width:100px">`, `<col style=
   "min-width:25px">` by default, plus a hard `width:` on any column an
   editor drags. Inline declarations outrank every selector, so a dragged
   column would be un-overridable from CSS — the table could not be made
   to respond to the layout or breakpoint rules above.

   Author `!important` is the ONE thing that beats an inline declaration
   (author-important sits above the style attribute in the cascade), so
   these two rules keep layout authoritative in CSS and the table auto-laid
   out and responsive.

   Deliberately NOT mirrored in rte-styles.css: neutralising these in the
   editor would leave the resize handles visibly doing nothing, which reads
   as broken. CONSEQUENCE: dragging a column edge in Tiptap changes the
   editor preview but has NO effect on the live page. If column control is
   ever genuinely wanted, that's a deliberate decision — drop these rules.
   Appended to stay reversible.
   ============================================================ */
table:not([class]) { min-width: 0 !important; }
table:not([class]) > colgroup > col {
	width: auto !important;
	min-width: 0 !important;
}

/* ============================================================
   SEARCH PANEL  (2026-08-05)

   Moved here out of an inline <style> in Views/Partials/_SearchPanel.cshtml
   (tasks/_done/feat-search-panel-merge.md). The partial now carries NO styles
   at all — an inline <style> sits after every <head> link and wins at equal
   specificity, so a re-added one would silently out-rank this block.

   Merged from two sources and retokenised against the master brand:
     • the repo copy (gold 2px top border, 40px gutter matching .sc-nav__inner)
     • Joseph's local build (AI summary card, results count, no-results state)
   Joseph's build predates the 19 Jun 2026 brand alignment, so its retired gold
   (#c7a572), its #1a1a1a/#4a4a4a text and its three CSS-var fallbacks
   (80px/60px/1200px — all WRONG against the real 64px/48px/1400px) were
   dropped rather than carried across.

   Plain @media throughout — this is a static file, never processed by Razor.
   ============================================================ */
.sc-search-panel {
	position: absolute;
	top: calc(var(--sc-nav-height) + var(--sc-search-height));
	left: 0;
	right: 0;
	z-index: 998;
	background: var(--sc-white);
	border-top: 2px solid var(--sc-gold);
	box-shadow: 0 8px 32px rgba(0,0,0,.12);
	max-height: 70vh;
	overflow-y: auto;
}
.sc-search-panel[hidden] { display: none; }

.sc-search-panel__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 1.5rem 40px 2rem;
}

/* --- Loading ------------------------------------------------ */
.sc-search-panel__loading {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: rgba(0,0,0,.5);
	font-size: .9375rem;
}
.sc-search-panel__spinner {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid rgba(220,183,65,.3);
	border-top-color: var(--sc-gold);
	border-radius: 50%;
	animation: sc-spin .7s linear infinite;
	flex-shrink: 0;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* 🔴 MUST stay AFTER the .sc-search-panel__loading display:flex rule above.
   `display: flex` is an author declaration and beats the user-agent's
   `[hidden] { display: none }`, so without this the "Searching…" row NEVER
   hides — it stays on screen underneath the answer. Live defect found by
   Joseph. Moving this block earlier in the file reinstates the bug. */
.sc-search-panel__loading[hidden],
.sc-search-panel__answer[hidden],
.sc-search-panel__error[hidden] { display: none; }

/* --- Answer body -------------------------------------------- */
.sc-search-panel__answer { font-size: .9375rem; line-height: 1.7; color: var(--sc-text); }
.sc-search-panel__answer p { margin: 0 0 .75rem; }
.sc-search-panel__answer p:last-child { margin-bottom: 0; }

/* --- AI summary ----------------------------------------------- */
/* A plain section, not a tinted card (Adam, 2026-09-02: no coloured panels and
   no thick left border anywhere in search). The gold rule under the search bar
   already frames the panel; the summary needs only its eyebrow. `__summary` is
   the same block on the server-rendered /search page (Views/Search.cshtml). */
.sc-search-panel__summary-card,
.sc-search-panel__summary {
	padding: 0 0 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #ececec;
	width: 100%;
}
/* Rate-limited / unavailable: same section, plum eyebrow, no tint. */
.sc-search-panel__summary-card--unavailable,
.sc-search-panel__summary--unavailable { border-bottom-color: var(--sc-plum-20); }
/* Header TEXT is Plum, not gold: gold text is only legible on plum/dark
   surfaces (CLAUDE.md §2). Gold survives here only as the decorative icon. */
.sc-search-panel__summary-header {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-plum);
	margin-bottom: .75rem;
}
/* Material Symbols are FONT glyphs — sized with font-size, not width/height.
   Joseph's width/height:2.5rem on the old inline SVG would have done nothing. */
.sc-search-panel__summary-icon {
	font-size: 1rem;
	line-height: 1;
	color: var(--sc-gold);
}
.sc-search-panel__summary-text { font-size: .9375rem; line-height: 1.6; color: var(--sc-text); }
.sc-search-panel__summary-text p { margin: 0 0 .5rem; }
.sc-search-panel__summary-text p:last-child { margin-bottom: 0; }

/* Contact links inside the AI summary — the tel:/mailto: anchors that linkify()
   builds out of phone numbers and email addresses in the answer prose (2026-09-03,
   tasks/_done/feat-search-answer-linkify.md). Deliberately the SAME plum + underline
   as `.sc-search-panel__facts-chip a` further down: same kind of link, same panel.
   A CLASS, not `.sc-search-panel__summary-text a` — these are the only anchors that
   may appear in a summary (SiteSearchService.StripLinks() removes every http(s) URL
   from the answer), and a descendant selector would silently adopt whatever a later
   change put there. Beats the global `a { color: inherit }` at (0,0,1).
   overflow-wrap matches the chips': a long address must break, not widen the panel. */
.sc-search-panel__answer-link { color: var(--sc-plum); text-decoration: underline; overflow-wrap: anywhere; }
.sc-search-panel__answer-link:hover { text-decoration: none; }

/* --- Hits: top card, compact rows, footer (2026-09-02) ------- */
/* Panel shape (Adam, 2026-09-02): AI summary → the TOP hit as a full white card
   with its facts → up to two compact one-line rows → "See all N results" linking
   to the site root's /search/ page, which renders EVERY hit as a card. The same
   .sc-search-panel__hit / __facts classes serve both surfaces; the page adds
   .sc-search-page__* for its own chrome (further down).
   Cards are white with a hairline border and the card radius — the restaurant
   listing card shape — never a tinted panel and never a left border. */
.sc-search-panel__results-count {
	font-size: .875rem;
	color: rgba(0,0,0,.5);
	font-weight: 400;
}

.sc-search-panel__hits { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.sc-search-panel__hit {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	padding: 1.125rem 1.25rem;
	background-color: var(--sc-white);
	border: 1px solid #e2e2e2;
	border-radius: var(--sc-radius-card);
	min-width: 0;
}
.sc-search-panel__hit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sc-search-panel__hit-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #111;
	text-decoration: none;
}
.sc-search-panel__hit-title:hover { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-search-panel__hit-summary { margin: 0; font-size: .875rem; color: #6b6b6b; line-height: 1.5; }

/* Compact rows — bordered rows, not cards (a dense list). */
.sc-search-panel__rows { display: flex; flex-direction: column; }
.sc-search-panel__row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem .25rem;
	border-bottom: 1px solid #e6e6e6;
	color: var(--sc-text);
	text-decoration: none;
	min-width: 0;
}
.sc-search-panel__row:first-child { border-top: 1px solid #e6e6e6; }
.sc-search-panel__row:hover .sc-search-panel__row-title { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-search-panel__row-body { display: flex; flex-direction: column; gap: .125rem; flex: 1 1 auto; min-width: 0; }
.sc-search-panel__row-title { font-size: .9375rem; font-weight: 700; color: #111; }
.sc-search-panel__row-meta {
	font-size: .8125rem;
	color: #6b6b6b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sc-search-panel__row-icon { flex-shrink: 0; color: var(--sc-plum); font-size: 1.25rem; font-variation-settings: 'opsz' 20; }

.sc-search-panel__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}
.sc-search-panel__all { margin-left: auto; }

/* Action row (2026-09-03): gold BOOK NOW (a real .sc-btn, sized down to sit
   beside the outline VIEW PAGE action) + outline VIEW PAGE. Lives outside
   .sc-search-panel__facts now so a factless hit still gets its button. */
.sc-search-panel__hit > .sc-search-panel__facts-actions { margin-top: .25rem; }
.sc-search-panel__facts-actions .sc-btn.sc-search-panel__facts-action--primary {
	padding: .5rem 1.25rem;
	font-size: .8125rem;
	letter-spacing: .06em;
	gap: .375rem;
}
.sc-search-panel__facts-actions .sc-btn.sc-search-panel__facts-action--primary .material-symbols-outlined { font-size: 1.125rem; }
/* The "See all N results" link is the site's gold button (.sc-btn.sc-btn--gold); this
   only spaces its arrow. Adam, 2026-09-03. */
.sc-search-panel__all .material-symbols-outlined { font-size: 1.125rem; margin-left: .375rem; }

/* --- Structured facts card (2026-09-02) ---------------------- */
/* Rendered from SearchController's per-hit `facts` dictionary (hours, phone,
   email, address, cuisine, price, dress code, menus, notice, booking/private-
   dining URLs) by _SearchPanel.cshtml (browser) and Views/Search.cshtml (server)
   — same markup, same order; change one, change the other.

   The facts block has NO surface of its own — the surrounding .sc-search-panel__hit
   card is the surface. Fact sets vary sharply by content type — a whatsOnItem
   carries bookingUrl and nothing else, a casino carries address and nothing else.
   A ONE-FACT CARD IS THE COMMON CASE; every row below must look deliberate alone. */
.sc-search-panel__facts {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: .625rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--sc-text);
}
/* Material Symbols are FONT glyphs — sized with font-size, not width/height.
   opsz comes down with the size or the stroke drawn for 24px reads heavier than
   the text beside it (CLAUDE.md §3). */
.sc-search-panel__facts-icon {
	font-size: 1.125rem;
	line-height: 1.4;
	flex-shrink: 0;
	color: var(--sc-plum);
	font-variation-settings: 'opsz' 20;
}

/* Notice first and unmissable. An ad-hoc closure outranks the published hours:
   a venue shut today for a private event still has "open Wed 5pm" on file, so
   hours shown without the notice are actively misleading. Live proof — Metita
   returns both. NEVER reorder these two rows. */
.sc-search-panel__facts-notice {
	display: flex;
	gap: .5rem;
	padding: .625rem .75rem;
	background-color: var(--sc-white);
	border: 1px solid var(--sc-plum-40);
	border-radius: 4px;
	font-weight: 600;
	color: var(--sc-plum);
}
.sc-search-panel__facts-notice .sc-search-panel__facts-icon { color: var(--sc-red); }

.sc-search-panel__facts-hours { display: flex; gap: .5rem; }
.sc-search-panel__facts-hours-line { display: block; }

.sc-search-panel__facts-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem 1.25rem;
}
/* overflow-wrap so a long address or a comma-joined menu list breaks inside the
   panel instead of pushing it wide. */
.sc-search-panel__facts-chip {
	display: inline-flex;
	align-items: flex-start;
	gap: .375rem;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}
.sc-search-panel__facts-chip a { color: var(--sc-plum); text-decoration: underline; }
.sc-search-panel__facts-chip a:hover { text-decoration: none; }

.sc-search-panel__facts-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-search-panel__facts-action {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .375rem .875rem;
	border: 1px solid var(--sc-plum);
	border-radius: var(--sc-radius-btn);
	background-color: transparent;
	color: var(--sc-plum);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.sc-search-panel__facts-action .sc-search-panel__facts-icon { font-size: 1rem; color: inherit; }
.sc-search-panel__facts-action:hover { background-color: var(--sc-plum); color: var(--sc-white); }

/* Chips go one-per-line on a narrow screen — side by side they fragment into
   two-word columns. Plain @media: site.css is static and never sees Razor. */
@media (max-width: 640px) {
	.sc-search-panel__hit { padding: 1rem; }
	.sc-search-panel__facts-chips { flex-direction: column; gap: .375rem; }
	.sc-search-panel__all { margin-left: 0; }
}

/* --- /search results page (Views/Search.cshtml, 2026-09-02) --- */
/* Plum solid hero (.sc-hero--solid) with the search form inside it; the body
   reuses the panel's summary, hit and facts classes above. */
.sc-search-page__form {
	display: flex;
	gap: .75rem;
	align-items: center;
	max-width: 640px;
	margin-top: 1.25rem;
}
.sc-search-page__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 3rem;
	padding: 0 1.25rem;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: var(--sc-radius-btn);
	background-color: var(--sc-white);
	color: var(--sc-text);
	font-family: var(--sc-font);
	font-size: 1rem;
}
.sc-search-page__input:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-search-page__submit { flex-shrink: 0; }

.sc-search-page { padding-top: 2.5rem; padding-bottom: 4rem; }
/* Full-width container like every other page (Adam removed the 960px cap and
   centring, 2026-09-03). The blocks themselves cap at 960px and sit on the LEFT
   gutter — the same shape as .sc-prose (780px) on a content page. Delete the
   next rule if the cards should run the full 1400px. */
.sc-search-page > * { max-width: 960px; }
.sc-search-page__prompt { font-size: 1.0625rem; color: #6b6b6b; margin: 0; }
.sc-search-page__results-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .625rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--sc-gold);
}
.sc-search-page__results-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: #111; }
.sc-search-page__results-meta { font-size: .8125rem; color: #6b6b6b; }
.sc-search-page__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }

@media (max-width: 640px) {
	.sc-search-page__form { flex-direction: column; align-items: stretch; }
	.sc-search-page { padding-top: 1.75rem; }
}

/* --- No results --------------------------------------------- */
.sc-search-panel__no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	color: rgba(0,0,0,.5);
}
.sc-search-panel__no-results-icon {
	font-size: 2.5rem;
	line-height: 1;
	color: var(--sc-gold);
	margin-bottom: 1rem;
}
.sc-search-panel__no-results-text {
	font-size: 1rem;
	font-weight: 600;
	color: var(--sc-text);
	margin: 0 0 .5rem;
}
/* Sub-line is editor-controlled per site root (siteRoot.searchNoResultsHint),
   delivered to the JS via data-noresults-hint on the panel. Blank falls back to
   the hardcoded default in the partial. */
.sc-search-panel__no-results-hint {
	font-size: .875rem;
	color: rgba(0,0,0,.5);
	margin: 0;
}

/* --- Error -------------------------------------------------- */
.sc-search-panel__error { color: #c0392b; font-size: .9375rem; }

@media (max-width: 1024px) { .sc-search-panel__inner { padding: 1.25rem 24px 1.75rem; } }
@media (max-width: 640px)  { .sc-search-panel__inner { padding: 1rem 1rem 1.5rem; } }

/* ============================================================
   HOMEPAGE 4-UP GRIDS - 2 ITEMS ON MOBILE (2026-08-07)

   Brief (Adam): the What's On block and the Latest News block show 4 items
   on desktop and 2 on mobile.

   This HAS to be CSS. The server cannot know the viewport, so a Razor-side
   .Take(2) would cut desktop as well. Both blocks render all 4 items into the
   DOM and the last two are hidden at the single-column breakpoint.

   640px is the grid's OWN single-column hinge (the .sc-hp-grid4 rule in the
   "Homepage responsive" block above) - read from the file, not assumed. Keep
   the two in step: if .sc-hp-grid4 ever collapses at a different width, this
   query must move with it or the block shows 4 stacked cards again.

   Scoped to the --whatson and --news modifiers, NEVER to bare .sc-hp-grid4.
   The Hotels grid is .sc-hp-grid4.sc-hp-grid4--3col and shares the base class;
   an unscoped rule would silently hide the third hotel on every phone.

   The Upcoming Events carousel is deliberately NOT here. It is a horizontal
   scroller (.sc-hp-carousel, display:flex + overflow-x:auto), not a grid - it
   has no single-column state and no 2-item concept. Hiding cards in it would
   only shorten the scroll. Do not "fix" that.

   Plain @media - site.css is a STATIC file, never processed by Razor.
   ============================================================ */
@media (max-width: 640px) {
	.sc-hp-grid4--whatson > *:nth-child(n+3),
	.sc-hp-grid4--news > *:nth-child(n+3) {
		display: none;
	}
}

/* ── RTE document downloads (.sc-dl) ────────────────────────────────
   Built at runtime by site.js from plain rich-text links to document files —
   no template change and no content edit. See the module header in site.js.

   🔴 SPECIFICITY: `.sc-rte a` (0,1,1) sets plum + underline and beats a bare
   `.sc-dl` (0,1,0), so every rule that fights it is written `.sc-rte a.sc-dl…`
   (0,2,1). This is the same treatment `.sc-rte a.sc-btn` needed above — see the
   RTE inline buttons block. Do not "simplify" these selectors.

   Colour: surfaces are SOLID, never rgba over an unpinned background. Gold is
   used only as a glyph and a hover border (§2 — gold text on light is banned).
   ─────────────────────────────────────────────────────────────────── */

.sc-rte a.sc-dl { text-decoration: none; color: var(--sc-plum); }
.sc-rte a.sc-dl:hover { text-decoration: none; }
.sc-rte a.sc-dl:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 2px; }

/* Icon class and .material-symbols-outlined have equal specificity (§3) — this
   sheet loads later than the Google font link, so this font-size wins. */
.sc-dl__icon { color: var(--sc-gold); font-size: 28px; line-height: 1; flex-shrink: 0; }
.sc-dl__text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.sc-dl__label { font-weight: 600; }
.sc-dl__meta { font-size: .8125rem; color: #6b6b6b; letter-spacing: .02em; }

/* ROW — the link is the whole block it sits in. */
.sc-rte a.sc-dl--row {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: 1rem 1.25rem;
	background: #f4f4f4;
	border: 1px solid #e5e5e5;
	border-radius: var(--sc-radius-card);
}
.sc-rte a.sc-dl--row:hover { background: #ececec; border-color: var(--sc-gold); }
.sc-dl-host { margin-bottom: .5rem; }

/* Consecutive rows join into one panel. */
.sc-rte ul.sc-dl-list { list-style: none; padding-left: 0; margin-bottom: 1.1rem; }
.sc-dl-list .sc-dl-host { margin-bottom: 0; }
.sc-dl-list .sc-dl-host a.sc-dl--row { border-radius: 0; }
/* Rows OVERLAP by 1px instead of the lower row dropping its top border. The old
   `border-top: 0` collapsed the shared edge cheaply, but it left a mid-list row
   with no top edge to recolour, so the gold hover border was open at the top
   while the FIRST row (which keeps its border-top) looked correct. The hovered
   or focused row lifts above its neighbours so all four gold sides paint. */
.sc-dl-list .sc-dl-host + .sc-dl-host { margin-top: -1px; }
.sc-rte .sc-dl-list a.sc-dl--row { position: relative; }
.sc-rte .sc-dl-list a.sc-dl--row:hover,
.sc-rte .sc-dl-list a.sc-dl--row:focus-visible { z-index: 1; }
.sc-dl-list .sc-dl-host:first-child a.sc-dl--row { border-radius: var(--sc-radius-card) var(--sc-radius-card) 0 0; }
.sc-dl-list .sc-dl-host:last-child a.sc-dl--row { border-radius: 0 0 var(--sc-radius-card) var(--sc-radius-card); }
.sc-dl-list .sc-dl-host:only-child a.sc-dl--row { border-radius: var(--sc-radius-card); }

/* Tiptap wraps each list item's content in a <p>. Zero its margin inside a row,
   or every row gains 1.1rem of dead space. (0,2,1) beats `.sc-rte p` (0,1,1). */
.sc-rte .sc-dl-host p { margin: 0; }

/* INLINE — the link sits among other text, so it must NOT be a button. The label
   keeps the house link treatment (bold, plum, underlined) and the glyph + type +
   size move into a trailing tag.
   🔴 `display: inline`, NOT inline-flex — an inline-flex anchor cannot break across
   a line, so a long label overflows instead of wrapping. Only the tag is a flex box.
   📌 The tag being `inline-flex` is also what stops the anchor's underline being
   drawn through it: text-decoration propagates to in-flow descendants and CANNOT be
   cancelled with `text-decoration: none` on the child, but it is never drawn across
   an atomic inline. Do not "simplify" the tag to `display: inline`. */
.sc-rte a.sc-dl--pill {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: 700;
	color: var(--sc-plum);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sc-rte a.sc-dl--pill:hover {
	background: none;
	color: var(--sc-plum);
	text-decoration-thickness: 2px;
}
.sc-dl__chip {
	display: inline-flex;
	align-items: center;
	gap: .28rem;
	margin-left: .35rem;
	padding: .1rem .4rem .12rem;
	background: #f0f0f0;
	border-radius: 5px;
	vertical-align: baseline;
	white-space: nowrap;
	font-weight: 600;
}
.sc-dl__chip .sc-dl__icon { font-size: 15px; color: var(--sc-gold); }
/* #5f5f5f on #f0f0f0 = 5.6:1 — passes AA at this size. */
.sc-dl__chip .sc-dl__meta {
	font-size: .6875rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #5f5f5f;
}
.sc-rte a.sc-dl--pill:hover .sc-dl__chip { background: #e2e2e2; }

@media (max-width: 600px) {
	.sc-rte a.sc-dl--row { padding: .875rem 1rem; gap: .75rem; }
	.sc-dl__icon { font-size: 24px; }
}

/* ── EXTERNAL LINK INDICATOR (.sc-ext) ───────────────────
   Built at runtime by site.js from rich-text links whose hostname differs from
   the page's — no template change and no content edit. Detection, the icon
   choice and the ordering constraint against `.sc-dl` are all documented in the
   module header in site.js; read that before changing anything here.

   🔴 SELECTOR IS ROOT-AGNOSTIC ON PURPOSE. `a.sc-ext .sc-ext__icon` is (0,2,1),
   which beats `.sc-rte a` (0,1,1) without naming a root — so it works in every
   editor-prose wrapper the JS scans (`.sc-prose`, `.sc-tcs__body`,
   `.sc-article-body__inner`, `.sc-faq__answer`, `.sc-visit-hub__answer-body`),
   not just `.sc-rte`. **Do not "scope" it back to `.sc-rte`** — that is the bug
   that left the Terms & Conditions icon unstyled on 2026-08-19.
   ⚠️ Contrast `.sc-rte a.sc-dl` above, which IS root-scoped and must stay so.

   🔴 `display: inline-block` IS LOAD-BEARING, NOT COSMETIC. A descendant
   `text-decoration: none` does NOT remove a parent anchor's underline — the
   anchor draws it across its whole inline box. An inline-block child is excluded
   from that box, which is the only reliable way to keep the rule off the glyph.

   Colour is the link's own plum, never gold — §2 bans gold text on a light
   surface, and this glyph is text, not a border or a decorative icon.
   ──────────────────────────────────────────────────── */
a.sc-ext .sc-ext__icon {
	display: inline-block;
	font-size: .78em;
	line-height: 1;
	vertical-align: -.08em;
	color: inherit;
	text-decoration: none;
	font-variation-settings: 'wght' 400, 'opsz' 20;
}

/* ── RTE ICON HEADINGS — the Table Games icon rows ────────────────────────
   AKL / HAM / QTN Table Games author their icon rows as an <img> INSIDE the
   heading, carrying NO class:

       <h3><img src="…icon-max-players.png" alt="Max Players" width="60"> Max Players</h3>
       <p>Some of our games are limited to …</p>

   🔴 SELECTOR-DETECTED, NOT CLASS-DRIVEN — the same principle as `.sc-dl` above:
   nothing is asked of the editor, and a Tiptap re-save cannot strip a class that
   was never applied. An <img> inside an <h3> was verified 2026-08-18 to survive a
   backoffice Save-and-publish byte-identical, twice, on both AKL and HAM.

   📌 SAFE UNSCOPED — MEASURED, NOT ASSUMED. All 415 URLs in the five internal
   sitemaps were swept 2026-08-18: `<h(1-6)…><img` occurs on EXACTLY three pages
   — AKL 8, HAM 6, QTN 5 — the three Table Games bodies and nothing else in the
   estate. **Re-run that sweep before assuming it still holds**, because the day
   a fourth page adopts the shape it silently inherits this layout.

   ⚠️ The authored `width` attribute is the ONLY thing sizing these icons (60 on
   the heading rows, 75 on SkyCare). ImageSharp resizing is off estate-wide, so
   do NOT swap it for a `?width=` querystring — it would serve the full original.

   ⚠️ NO left indent on the following copy, deliberately. Hanging the paragraph
   under the heading TEXT (the U7 two-column read) is one line —
   `.sc-rte h3:has(> img) + p { margin-left: calc(60px + .875rem); }` — but only
   the FIRST sibling paragraph can be selected, so in *Our Games* the description
   would indent while "Play Guides" and its download panel stayed at the container
   edge. Consistency across all eight rows beats matching U7 on three of them.

   🔴 SPECIFICITY: `:has()` takes the specificity of its most specific argument,
   so `.sc-rte h3:has(> img)` is (0,1,2) and beats `.sc-rte h3` (0,1,1), which
   sets the margin these rules override. Same reason the SkyCare rule below is
   written with `:only-child` — (0,2,2) against `.sc-rte p` (0,1,1).           */
.sc-rte h3:has(> img) {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin: 2.25rem 0 .625rem;
}
.sc-rte h3 > img {
	flex: 0 0 auto;
	height: auto;
}

/* SkyCare's icon is its own paragraph (`<p><img width="75"></p>`) rather than a
   heading child, so it needs the gap under it closed — not the alignment fix.
   Without this it floats mid-way between the heading above and the copy below. */
.sc-rte p:has(> img:only-child) {
	margin-bottom: .5rem;
}

@media (max-width: 600px) {
	.sc-rte h3:has(> img) { gap: .625rem; margin-top: 1.75rem; }
}

/* ============================================================
   BACK TO TOP  (.sc-totop)
   Floating up-arrow, injected by site.js's initBackToTop and shown once the
   visitor is past ~1.5 viewport heights. Read that module's header before
   changing anything here — the show/hide state, the threshold and the focus
   move all live in the JS; this file owns only the appearance.

   🔴 z-index 900 is DERIVED, not picked. The stack (docs/reference/CSS-ARCHITECTURE.md
   §5, top → bottom) is .sc-skip-link 9999 · .sc-lightbox 9000 · .sc-drawer 1100 ·
   .sc-r20 1001 · .sc-nav 1000 · .sc-section-nav 500. 900 sits ABOVE page content and
   BELOW every one of those — so the control can never cover the open mobile drawer,
   the lightbox, the nav or the R20 bar. Do not raise it.

   🔴 The hidden state is opacity + translate, NEVER display:none — a display change
   gives the transition nothing to animate. pointer-events:none is what actually makes
   it unclickable while hidden.

   ⚠️ Plain @media, never @@media — this is a STATIC file, served directly and never
   processed by Razor. @@media here produces invalid CSS that browsers silently ignore
   (CLAUDE.md §4/§7).
   ============================================================ */
.sc-totop {
	position: fixed;
	right: 1rem;
	/* Clears the iOS home indicator without floating the control up on every
	   other device — env() resolves to 0px where there is no inset. */
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px is the minimum comfortable touch target; this is the mobile control. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sc-plum);
	color: var(--sc-white);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,.28);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

.sc-totop.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.sc-totop:hover { background: var(--sc-plum-80); }

/* Matches the .sc-btn convention (site.css:179) — gold-on-white was too low. */
.sc-totop:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }

/* 🔴 Material Symbols is a VARIABLE font and its optical-size axis does NOT follow
   font-size (CLAUDE.md §3). A glyph shrunk to fit a button still carries the stroke
   weight drawn for 24px and reads heavier than everything around it — bring opsz
   down with it, exactly as .sc-btn__icon does. */
.sc-totop__icon {
	font-size: 1.5rem;
	line-height: 1;
	font-variation-settings: 'opsz' 20;
}

@media (min-width: 768px) {
	.sc-totop {
		right: 1.5rem;
		bottom: max(1.5rem, env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-totop { transition: none; }
}