/* ============================================================
   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; }
}

/* ==========================================================================
   whatson.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   WHAT'S ON — LANDING & DETAIL PAGES

   ⚠ STATIC FILE — served directly, never processed by Razor.
   Always plain @media / @keyframes. @@media produces literal "@@media"
   in the browser: invalid CSS, every breakpoint fails silently. (CLAUDE §7)
   ============================================================ */

/* ── DELETED 2026-07-29 — the old `.sc-wo-filter*` dropdown filter bar ──
   18 selectors removed after the Phase 0b grep proved no caller: the only
   repo reference left is id="sc-wo-filters" on the new <details> rail, and
   an *id* never matches the `.sc-wo-filters` *class* selector. site.js has
   zero `sc-wo` references. Superseded by the left rail (.sc-wo-rail) below.
   Old copy preserved at _backups/css-2026-06-09/whatson.css.
   ────────────────────────────────────────────────────────────────────── */

/* ============================================================
   LISTING LAYOUT — left filter rail + results column (2026-07-29)
   ============================================================ */

.sc-wo-listing { padding-top: 32px; }

.sc-wo-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* ── Left rail ───────────────────────────────────────────── */
.sc-wo-rail { position: sticky; top: calc(var(--sc-nav-height) + 24px); }

/* The rail ships as an OPEN <details> so a no-JS visitor still gets working
   filters; site JS closes it on small screens only. Desktop hides the summary
   entirely, so <details> behaves as a plain container. */
.sc-wo-rail__panel { border: 0; }
.sc-wo-rail__summary { display: none; }
.sc-wo-rail__title {
	font: 800 13px/1.2 var(--sc-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sc-text);
	margin: 0 0 22px;
}

.sc-wo-group { margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid #e8e8e8; }
.sc-wo-group:last-of-type { border-bottom: 0; }
.sc-wo-group__label {
	font: 700 11px/1 var(--sc-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin: 0 0 12px;
}

.sc-wo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sc-wo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sc-white);
	border: 1px solid #d8d8d8;
	border-radius: var(--sc-radius-btn);
	padding: 7px 14px;
	font: 700 11px/1 var(--sc-font);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sc-plum);
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}
.sc-wo-chip:hover { border-color: var(--sc-plum); }
.sc-wo-chip:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 2px; }
.sc-wo-chip.is-active {
	background: var(--sc-plum);
	border-color: var(--sc-plum);
	color: var(--sc-white);
}
.sc-wo-chip__icon { font-size: 15px; line-height: 1; }
.sc-wo-chip__label { line-height: 1; }

.sc-wo-rail__clear {
	display: inline-block;
	margin-top: 4px;
	font: 700 12px/1 var(--sc-font);
	letter-spacing: .06em;
	color: var(--sc-plum);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sc-wo-rail__clear:hover { color: var(--sc-text); }

/* ── Results column ──────────────────────────────────────── */
.sc-wo-count {
	font: 700 12px/1 var(--sc-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6a6a6a;
	margin: 0 0 18px;
}

/* ── Tile grid — CSS Grid (equal height rows) ─────────────── */
.sc-wo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* ── Featured panel — full-width child of the tile grid ──── */
.sc-wo-feature {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	background: var(--sc-plum);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	margin: 8px 0;
}
.sc-wo-feature--nomedia { grid-template-columns: minmax(0, 1fr); }
.sc-wo-feature__media { position: relative; min-height: 260px; }
.sc-wo-feature__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sc-wo-feature__body {
	padding: 40px clamp(24px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.sc-wo-feature__eyebrow {
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sc-gold);
	margin: 0 0 12px;
}
.sc-wo-feature__heading {
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	line-height: 1.15;
	color: var(--sc-white);
	margin: 0 0 12px;
}
.sc-wo-feature__text {
	font: 400 15px/1.7 var(--sc-font);
	color: rgba(255,255,255,.82);
	margin: 0 0 24px;
	max-width: 46ch;
}
/* The CTA is a global `.sc-btn`, which is `white-space: nowrap`. Inside a
   SINGLE-COLUMN panel a long label ("Join now — it's free") is wider than the
   body, and `.sc-wo-feature`'s `overflow: hidden` (there for the image's rounded
   corner) CLIPS it rather than letting it overflow visibly — so it reads as a
   half-drawn button, not as a layout error. Allow wrapping and cap the width. */
.sc-wo-feature__cta { margin-top: 0; max-width: 100%; white-space: normal; }

/* Filling a row alongside tiles — drop the band's vertical margin so its top and
   bottom edges line up with the tiles beside it. (Spans are per-breakpoint and
   live in the Responsive section; margin is not, so it belongs here.) */
.sc-wo-feature--fill3-1,
.sc-wo-feature--fill3-2,
.sc-wo-feature--fill2-1 { margin: 0; }

/* ── Tile — flex column so body stretches to fill height ─── */
.sc-wo-tile {
	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 .2s, box-shadow .2s;
	height: 100%;
}
.sc-wo-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.sc-wo-tile__img-wrap { position: relative; overflow: hidden; flex-shrink: 0; }
.sc-wo-tile__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s; }
.sc-wo-tile__badge {
	position: absolute; top: 12px; left: 12px;
	background: var(--sc-gold); color: var(--sc-text);
	font: 700 10px/1 var(--sc-font); letter-spacing: .08em;
	padding: 4px 10px; border-radius: 50px; text-transform: uppercase;
}
/* ── BADGE COLOUR MAP — design refresh 2026-08 ───────────────────────────────
   Four variants, colour-coded by kind. All four share the base rule above for
   geometry (position, 50px pill, 10px/700 uppercase) and set fill + label only.

   🔴 THE BASE RULE'S COLOUR IS DELIBERATELY UNCHANGED, and --featured is applied
   ALONGSIDE it, never instead of it. As of 2026-08-20 all four "Featured" render
   points (WhatsOnLanding:861 and :961, _WhatsOnWidget:188, _WhatsOnTile:165) emit
   `class="sc-wo-tile__badge sc-wo-tile__badge--featured"`.
   ⚠️ ANY NEW RENDER POINT MUST EMIT BOTH CLASSES. A bare .sc-wo-tile__badge lands
   on gold — which is --offer's fill — so a Featured badge that forgets the modifier
   reads as an Offer. That is precisely the collision this modifier exists to end
   (it recurred on 2026-08-20 when --offer was repointed to gold ahead of this
   markup, putting 11 of 15 live badges on the wrong fill). Do NOT "fix" a future
   collision by repointing the base rule.

   🔴 #C4232B IS A DELIBERATE LOCAL HEX — not --sc-red, and deliberately not a
   :root token. --sc-red #E0373F is the brand red and is UNCHANGED; it simply
   cannot carry 10px text at AA — white on --sc-red is 4.39:1, and --sc-red on
   white is also 4.39:1, so red on ANY white-based tint is structurally
   unreachable, not a tint-choice problem. #C4232B is a legibility darkening of it
   used in TWO roles here: --featured's FILL and --category's LABEL. One value,
   two uses, one file — so it stays a literal. Promote it to a token in site.css
   only if a third consumer appears.
   ⚠️ This is a legibility fix, not a repalette. Do not chase --sc-red elsewhere,
   and do NOT touch .sc-btn--gold — its 1.93:1 is a brand-signed exception
   (CLAUDE.md §2).

   Contrast, RE-MEASURED from the values actually shipped below, 2026-08-20 (badge
   text is 10px/700 = SMALL text, so the AA floor is 4.5:1 — the 3:1 large-text
   floor does not apply):
     --featured           white   #FFFFFF on #C4232B                   = 5.80:1  ✅
     --offer              plum    #440B22 on --sc-gold #DCB741         = 8.27:1  ✅
     --category           red     #C4232B on rose      #FBE7E8         = 4.89:1  ✅
     --category-onimage   white   #FFFFFF on --sc-plum #440B22         = 15.95:1 ✅
     (base, unchanged)    #333333 on --sc-gold #DCB741                 = 6.55:1  ✅
   ⚠ The two AA misses this replaces — --featured 4.39:1 and --category 3.70:1 —
   were the agency comp's colours, shipped as specified earlier on 2026-08-20 and
   corrected the same day with Adam's approval. docs/CHANGELOG.md 2026-08-20.
   ⚠ The rose tint is OPAQUE (#FBE7E8 = --sc-red at 12% flattened onto white), not
   rgba(224,55,63,.12): the tile is white today but a card surface may not stay white.

   ⚠ FREE is deliberately absent — the comp shows one, but it is not an option in
   our data (Adam, 2026-08-20). Do not add it.
   ────────────────────────────────────────────────────────────────────────────── */
.sc-wo-tile__badge--featured        { background: #C4232B;        color: var(--sc-white); }
.sc-wo-tile__badge--offer           { background: var(--sc-gold); color: var(--sc-plum); }
.sc-wo-tile__badge--category        { background: #FBE7E8;        color: #C4232B; }
.sc-wo-tile__badge--category-onimage { background: var(--sc-plum); color: var(--sc-white); }
/* COMING SOON (2026-09-24) — native tiles whose eventDateStart is a future date.
   Plum fill + gold label: gold text is only legible on plum (CLAUDE.md §2).
   #DCB741 on #440B22 = 8.27:1 ✅ (same pair as --offer, inverted). The 1px gold
   ring keeps the pill's edge on dark hero crops, where a plum fill would vanish. */
.sc-wo-tile__badge--coming-soon     { background: var(--sc-plum); color: var(--sc-gold); box-shadow: 0 0 0 1px var(--sc-gold); }
/* Homepage What's On cards (HomePage.cshtml §3) — same colours on the homepage's own pill
   shape. Base .sc-hp-card__cat is in site.css; whatson.css loads after it (_Layout), so this
   equal-specificity modifier wins on order. */
.sc-hp-card__cat--coming-soon       { background: var(--sc-plum); color: var(--sc-gold); box-shadow: 0 0 0 1px var(--sc-gold); }
/* .sc-wo-tile__r20 (age badge on the tile image) REMOVED 2026-08-10 — the badge was
   retired from the markup on 2026-07-30, leaving the rule unreachable. Verified before
   deleting by dumping five live What's On / attractions pages across AKL, HAM and ADL:
   zero occurrences of the class in any served HTML, so no editor-authored raw HTML was
   relying on it either. Do not re-add: RG/age copy lives in the footer bar and in each
   event's own body text. ⚠️ .sc-wo-r20-block below is a DIFFERENT class — left in place. */

/* Body grows to fill remaining card height */
.sc-wo-tile__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sc-wo-tile__title { font: 700 15px/1.3 var(--sc-font); margin: 0 0 6px; color: var(--sc-text); }
.sc-wo-tile__date { font: 500 12px/1.4 var(--sc-font); color: var(--sc-plum); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }

/* Summary grows to push CTA to bottom */
.sc-wo-tile__summary { font: 400 13px/1.5 var(--sc-font); color: #555; margin: 0 0 12px; flex: 1; }
.sc-wo-tile__cta { display: flex; align-items: center; gap: 4px; font: 700 12px/1 var(--sc-font); color: var(--sc-plum); letter-spacing: .04em; margin-top: auto; }

/* ── Empty / error states ────────────────────────────────── */
.sc-wo-error,
.sc-wo-empty { font: 400 15px/1.6 var(--sc-font); color: #666; text-align: center; padding: 40px 0; }

/* ── Detail page ─────────────────────────────────────────── */
.sc-wo-rich-content { width: 100%; max-width: 100%; overflow-x: hidden; padding: 0 40px !important; box-sizing: border-box !important; }
.sc-wo-detail { max-width: 800px; }
.sc-wo-detail__date { font: 700 13px/1.4 var(--sc-font); color: var(--sc-plum); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.sc-wo-detail__time { font: 500 14px/1.4 var(--sc-font); color: #555; margin: 0 0 16px; }
.sc-wo-detail__locations { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; }
.sc-wo-detail__location-link { font: 600 13px/1 var(--sc-font); color: var(--sc-plum); text-decoration: none; }
.sc-wo-detail__location-link:hover { text-decoration: underline; }

/* ── Detail page: When (date + time) — sits above Location ───
   Date (calendar) + time (clock), each its own icon, no separator.
   Either part renders on its own; nothing renders when no date/time. */
.sc-wo-when { display: block; margin: 0 0 18px; }
.sc-wo-when__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-when__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-when__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sc-wo-when__pair { display: inline-flex; align-items: center; gap: 8px; }
.sc-wo-when__icon { font-size: 22px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-when__v { font: 700 20px/1.25 var(--sc-font); color: var(--sc-text); }

/* ── Detail page: Location(s) — editorial eyebrow ────────────
   Sits directly under the When block, above the body copy.
   Single venue: large standfirst. 2+ venues (.sc-wo-loc--multi):
   stepped-down, gold middot-separated, wrapping list. */
.sc-wo-loc { display: block; text-decoration: none; margin: 0 0 28px; }
.sc-wo-loc__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-loc__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-loc__row { display: flex; align-items: flex-start; gap: 10px; }
.sc-wo-loc__pin { font-size: 26px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-loc__venues { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.sc-wo-loc__venue {
	font: 700 24px/1.25 var(--sc-font);
	letter-spacing: -.01em;
	color: var(--sc-text);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .18s;
}
.sc-wo-loc__venue:hover { border-bottom-color: var(--sc-gold); }
.sc-wo-loc__sep { color: var(--sc-gold); font: 600 20px/1 var(--sc-font); padding: 0 2px; user-select: none; }

/* multi-venue: tidier, stepped-down list */
.sc-wo-loc--multi .sc-wo-loc__pin { font-size: 22px; transform: translateY(2px); }
.sc-wo-loc--multi .sc-wo-loc__venue { font-size: 19px; }
.sc-wo-loc--multi .sc-wo-loc__sep { font-size: 16px; }

/* ── Detail page: Price + Booking (paired) — sits under Location ───
   Price reuses the When/Location eyebrow + gold-icon language; the booking
   button rides the same row (price left, CTA right) and wraps under on narrow
   screens. Booking-only (no price) renders the button alone, no eyebrow.
   Each part self-suppresses when absent (graceful degradation). */
.sc-wo-pricing { display: block; margin: 0 0 28px; }
.sc-wo-pricing__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-pricing__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-pricing__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 24px;
}
.sc-wo-price { display: inline-flex; align-items: center; gap: 10px; }
.sc-wo-price__icon { font-size: 24px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-price__v { font: 700 22px/1.25 var(--sc-font); color: var(--sc-text); }
.sc-wo-pricing__cta { flex: none; }

/* ── Detail page: Tags — eyebrow + plum-tint pills (brand on-light accent) ── */
.sc-wo-tagblock { display: block; margin: 0 0 28px; }
.sc-wo-tagblock__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-tagblock__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sc-wo-tag {
	display: inline-block;
	background: rgba(68, 11, 34, .07);
	color: var(--sc-plum);
	font: 700 10px/1 var(--sc-font);
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 50px;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.sc-wo-tag:hover { background: var(--sc-plum); color: var(--sc-white); }

/* raw-HTML embed block (3rd-party iframes / widgets pasted into Body HTML raw) */
.sc-wo-embed { margin: 0 0 32px; }
.sc-wo-embed iframe { max-width: 100%; }

.sc-wo-detail__body { margin-bottom: 32px; }
.sc-wo-r20-block { border-top: 1px solid #e8e8e8; padding-top: 16px; margin-top: 24px; font: 400 12px/1.6 var(--sc-font); color: var(--sc-text); }
.sc-wo-r20-block p { margin: 0 0 4px; }
.sc-wo-detail__terms { margin-top: 32px; border-top: 1px solid #e8e8e8; padding-top: 16px; }
.sc-wo-detail__terms-toggle { font: 700 13px/1.4 var(--sc-font); cursor: pointer; color: var(--sc-text); letter-spacing: .03em; list-style: none; }
.sc-wo-detail__terms-toggle::-webkit-details-marker { display: none; }
.sc-wo-detail__terms-body { margin-top: 16px; font: 400 13px/1.6 var(--sc-font); color: #555; }

/* ── Responsive ──────────────────────────────────────────── */

/* Narrower rail before the grid gives up a column */
@media (max-width: 1180px) {
	.sc-wo-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 1024px) { .sc-wo-rich-content { padding: 0 24px !important; } }

/* Three columns beside the rail runs out of room LONG before the rail stacks:
   at ~950px a tile computes to roughly 190px, too narrow for a 4:3 image plus
   title, date, summary and CTA. Drop to 2 columns at 1100px — while the rail is
   still alongside — rather than holding 3 all the way down to 900px.

   ⚠️ THE --fill3-* / --fill2-* SPAN RANGES AT THE FOOT OF THIS FILE ARE SCOPED TO
   NON-OVERLAPPING WIDTHS AND MUST MOVE WITH THIS BREAKPOINT. Change one without
   the other and a panel tries to span 2 of 3 columns inside a 2-column grid. */
@media (max-width: 1100px) {
	.sc-wo-grid { grid-template-columns: repeat(2, 1fr); }
	.sc-wo-feature { grid-template-columns: minmax(0, 1fr); }
	.sc-wo-feature__media { min-height: 200px; }
	.sc-wo-feature__body { padding: 28px 24px 32px; }
}

/* Rail stacks above the grid and becomes a collapsible disclosure */
@media (max-width: 900px) {
	.sc-wo-layout { grid-template-columns: 1fr; gap: 24px; }
	.sc-wo-rail { position: static; }
	.sc-wo-rail__panel {
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		background: var(--sc-white);
	}
	.sc-wo-rail__summary {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 18px;
		cursor: pointer;
		list-style: none;
		font: 700 12px/1 var(--sc-font);
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--sc-plum);
	}
	.sc-wo-rail__summary::-webkit-details-marker { display: none; }
	.sc-wo-rail__summary .material-symbols-outlined { font-size: 20px; }
	.sc-wo-rail__chevron { margin-left: auto; transition: transform .2s; }
	.sc-wo-rail__panel[open] .sc-wo-rail__chevron { transform: rotate(180deg); }
	.sc-wo-rail__inner { padding: 0 18px 18px; }
	.sc-wo-rail__title { display: none; }
}

@media (max-width: 600px) {
	.sc-wo-when__v { font-size: 18px; }
	.sc-wo-loc__venue { font-size: 20px; }
	.sc-wo-loc--multi .sc-wo-loc__venue { font-size: 17px; }
	.sc-wo-price__v { font-size: 18px; }
}

@media (max-width: 560px) {
	.sc-wo-grid { grid-template-columns: 1fr; }
	.sc-wo-rich-content { padding: 0 16px !important; }
	.sc-wo-feature__cta { width: 100%; text-align: center; }
}

/* ── Featured panel: fill the tail of the last row, never orphan below it ─────
   Default is a full-width band (grid-column: 1 / -1), which is right when the
   panel sits MID-grid after tile 6 with tiles still to follow. When it lands
   after the FINAL tile, WhatsOnLanding emits --fill3-N / --fill2-N telling us
   how many columns are free, so 4 results render as
   [tile][tile][tile] / [tile][ panel spanning 2 ] instead of a lone tile beside
   a gap with the panel stranded underneath.

   Deliberately scoped to NON-OVERLAPPING width ranges rather than layering
   max-width overrides: the two classes can BOTH be present (5 results ⇒ 1 free
   column at 3-col AND at 2-col), so each range must apply only its own and
   ignore the other outright. Overriding instead of scoping would mean every new
   breakpoint had to remember to neutralise the previous one's span.
   ≤1100px is now the 2-column range and ≤560px needs no rule at all — at one
   column every child is already full width. */
@media (min-width: 1101px) {
	.sc-wo-feature--fill3-2 { grid-column: span 2; }
	/* A single column is too narrow for the side-by-side image/body split: stack
	   it and give the media a tile's 4:3 ratio so the row height stays even. */
	.sc-wo-feature--fill3-1 {
		grid-column: span 1;
		grid-template-columns: minmax(0, 1fr);
	}
	.sc-wo-feature--fill3-1 .sc-wo-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
	.sc-wo-feature--fill3-1 .sc-wo-feature__body { padding: 24px 22px 26px; }
	/* Tile-width panel — same treatment the ≤560px rule gives the full-width one. */
	.sc-wo-feature--fill3-1 .sc-wo-feature__cta { width: 100%; text-align: center; }
}

@media (min-width: 561px) and (max-width: 1100px) {
	/* 2-col grid: already stacked by the max-width:1100px block above. */
	.sc-wo-feature--fill2-1 { grid-column: span 1; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__body { padding: 24px 22px 26px; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__cta { width: 100%; text-align: center; }
}

/* ============================================================
   IMAGE-LINK HOVER — CARD LIFT SUPPRESSION (What's On tiles, 2026-07-03)
   Matches site.css: no lift, no growing shadow. The resting shadow is
   preserved. Appended last so it wins.
   🔴 The image half was DELETED 2026-08-07 (Adam) — both the zoom above
   and the `opacity: .85` fade that had merely MASKED it. Tile images now
   have no hover treatment at all. 📖 docs/LESSONS.md §L7.
   ============================================================ */
.sc-wo-tile:hover {
	transform: none;
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ============================================================
   DETAIL BODY — RTE CTA BUTTON SPACING (2026-07-08)
   ContentAPI What's On detail bodies (PrivateEventPage.cshtml) embed a
   "Book Now" .btn inline in the migrated RTE copy, which renders squished
   against the paragraphs above/below. Give it vertical breathing room.
   Scoped to the detail body so it can't affect buttons elsewhere.
   ============================================================ */
.sc-wo-detail__body .btn,
.sc-wo-detail__body .sc-btn {
	display: inline-block;
	margin: 24px 0 8px;
}

/* ==========================================================================
   APPENDED 2026-08-04 — _WhatsOnWidget row balancing

   House rule (Adam): never more than 4 across, rows balanced rather than left
   with an orphan. The partial computes rows = ceil(n/4), cols = ceil(n/rows)
   and emits .sc-wo-grid--cols-{1..4}. Uniform grid + CSS auto-flow then gives:
     1-4 = one row · 5 = 3+2 · 6 = 3+3 · 7 = 4+3 · 8 = 4+4 · 9 = 3+3+3
     11 = 4+4+3 · 12 = 4+4+4     (n = 10 renders 4+4+2 — documented deviation)

   SCOPED TO THE WIDGET ONLY. Bare .sc-wo-grid is shared with WhatsOnLanding,
   where a FIXED 3-up is correct — that page lists dozens of items and consistent
   columns are the point. These modifiers are only ever emitted by the widget, so
   the landing is untouched. Do not move them onto .sc-wo-grid itself.

   Plain @media, never @@media — this is a STATIC file, not Razor.
   ========================================================================== */

/* 🔴 SUPERSEDED 2026-08-20 (Adam) — ALL FOUR NOW MAP TO FOUR TRACKS.
   Tiles are capped at 1/4 of the container; short rows fill from the left and leave
   the remainder empty: 1 = 1/4 · 2 = 2×1/4 · 3 = 3×1/4 · 5 = 4+1 · 8 = 4+4.
   ⚠️ n = 5 renders 4+1, an ORPHAN, and the row-balancing described above no longer
   happens. Accepted deliberately: option (a), natural wrap, chosen over reinstating
   balancing because it is a one-line reversal and the call needed a real render to settle.
   ⛔ THE 2026-08-04 HALF-WIDTH n = 1 RULE IS DEAD — do not reinstate it. Its instinct
   (a lone tile must not stretch) is preserved and tightened: one of FOUR, not one of
   two. The image-left/text-right variant rejected on 2026-08-04 stays rejected.
   🔴 The Razor's cols calculation is now inert. Left in place deliberately — changing it
   means re-pasting a partial six templates render, for no visual gain. Tidy it in spec
   06/07 when that file is open anyway. */
.sc-wo-grid--cols-1,
.sc-wo-grid--cols-2,
.sc-wo-grid--cols-3,
.sc-wo-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── n = 1 — ONE tile, at QUARTER width ───────
   ⚠️ This block described the HALF-width rule until 2026-08-20. That rule is dead
   (see the superseded banner above); the reasoning is kept because it still holds —
   only the fraction changed.

   A single tile at FULL width stretches its image across the whole 1400px content
   column and reads as a poster, not a listing (Adam, 2026-08-04). A horizontal
   image-left/text-right variant was tried and rejected the same day — it invented a
   second tile treatment for one edge case.

   The rule is simply: render it as ONE of the four tiles the n = 4 case would give.
   The grid is 4 columns and the single tile takes the first, so it has identical
   width and identical treatment to every other tile; the rest of the row stays empty.
   No tile-level overrides at all — that is the point.

   Scoped to the `--cols-*` modifiers, which only `_WhatsOnWidget` ever emits, so the
   landing is unaffected even when a filter narrows it to a single result (it uses the
   bare
   `.sc-wo-grid`, which stays 3-up). ────────────────────────────────── */
/* Tablet — 4-up is too tight below ~1100px; drop to 2 and let rows re-flow.
   3-up stays 3 down to the mobile breakpoint. */
@media (max-width: 1100px) {
	.sc-wo-grid--cols-1,
	.sc-wo-grid--cols-2,
	.sc-wo-grid--cols-3,
	.sc-wo-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	/* 🔴 REDUNDANT since 2026-08-20 — the 1100px rule above already puts every variant on
	   two tracks. Left as a no-op rather than deleted so the breakpoint's intent survives;
	   safe to remove on a cleanup pass. */
	.sc-wo-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — single column for every variant, n = 1 included (a quarter-width tile
   on a phone is unreadable). */
@media (max-width: 600px) {
	.sc-wo-grid--cols-1,
	.sc-wo-grid--cols-2,
	.sc-wo-grid--cols-3,
	.sc-wo-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   news.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   SkyCity — News Section Styles
   news.css (static file — plain @media, never @@media)
   ============================================================ */

/* ── Tag chip shared component ──────────────────────────────── */

.sc-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 50px;
	background: rgba(220,183,65, 0.15);
	color: var(--sc-plum);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sc-tag--sm {
	padding: 2px 8px;
	font-size: 0.68rem;
}

.sc-tag--light {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

a.sc-tag {
	text-decoration: none;
	transition: background 0.2s;
}

a.sc-tag:hover,
a.sc-tag:focus-visible {
	background: rgba(220,183,65, 0.3);
}

a.sc-tag--light:hover,
a.sc-tag--light:focus-visible {
	background: rgba(255, 255, 255, 0.35);
}


/* ── Blog hero ──────────────────────────────────────────────── */

.sc-blog-hero {
	position: relative;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--sc-plum);
	padding-top: var(--sc-nav-height);
}

.sc-blog-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.03);
}

.sc-blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(68,11,34,0.25) 0%, rgba(68,11,34,0.65) 100%);
}

.sc-blog-hero__overlay--solid {
	background: linear-gradient(135deg, #1a1a1a 0%, var(--sc-plum) 100%);
}

.sc-blog-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 2rem 1.5rem 2.5rem;
}

.sc-blog-hero__heading {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.15;
}

@media (min-width: 768px) {
	.sc-blog-hero {
		min-height: 320px;
	}

	.sc-blog-hero__content {
		padding: 3rem 2rem 3.5rem;
	}
}

@media (min-width: 1200px) {
	.sc-blog-hero__content {
		padding: 3rem 3rem 4rem;
	}
}


/* ── Blog intro text ────────────────────────────────────────── */

.sc-blog-intro {
	background: #fff;
	border-bottom: 1px solid #eee;
}

.sc-blog-intro__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

.sc-blog-intro__text {
	font-size: 1.1rem;
	color: #555;
	max-width: 900px;
	line-height: 1.7;
}

.sc-blog-intro__text > :first-child { margin-top: 0; }
.sc-blog-intro__text > :last-child  { margin-bottom: 0; }
.sc-blog-intro__text p              { margin: 0 0 1rem; }
.sc-blog-intro__text p:last-child   { margin-bottom: 0; }
.sc-blog-intro__text a              { color: var(--sc-plum); text-decoration: underline; }
.sc-blog-intro__text a:hover        { text-decoration: none; }

@media (min-width: 768px) {
	.sc-blog-intro__container {
		padding: 2.5rem 2rem;
	}
}


/* ── Tag filter ─────────────────────────────────────────────── */

.sc-tag-filter {
	background: #fff;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: var(--sc-nav-height);
	z-index: 10;
}

.sc-tag-filter__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.sc-tag-filter__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: 50px;
	border: 1.5px solid #ddd;
	background: transparent;
	color: #666;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	white-space: nowrap;
}

.sc-tag-filter__chip:hover,
.sc-tag-filter__chip:focus-visible {
	border-color: var(--sc-gold);
	color: var(--sc-plum);
}

.sc-tag-filter__chip.is-active {
	border-color: var(--sc-gold);
	background: var(--sc-gold);
	color: var(--sc-text);
}

@media (min-width: 768px) {
	.sc-tag-filter__inner {
		padding: 0.75rem 2rem;
	}
}


/* ── Featured article card ──────────────────────────────────── */

.sc-blog-featured {
	background: var(--sc-plum);
	padding: 2rem 0;
}

.sc-blog-featured__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sc-blog-featured__card {
	display: block;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: #1e1e1e;
	text-decoration: none;
	transition: transform 0.25s;
}

.sc-blog-featured__card:hover,
.sc-blog-featured__card:focus-visible {
	transform: translateY(-2px);
}

.sc-blog-featured__img-wrap {
	position: relative;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: #333;
}

.sc-blog-featured__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}

.sc-blog-featured__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--sc-plum), #3a3a3a);
}

.sc-blog-featured__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 50px;
}

.sc-blog-featured__body {
	padding: 1.5rem;
}

.sc-blog-featured__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}

/* 🔴 DESCENDANT OVERRIDE — the featured panel is the ONE dark surface .sc-tag lands on.
   The base .sc-tag (gold tint + plum text) is the LIGHT-surface treatment and is shared with
   _BlogCard.cshtml:79 and AttractionItem.cshtml:231, both on white. **Never fix this on the base
   rule** — it would invert those two.
   🔴 MEASURE AGAINST THE CARD, NOT THE SECTION. `.sc-blog-featured` is `var(--sc-plum)`, but the
   pills sit inside `.sc-blog-featured__card`, which is **#1e1e1e**. Measured 2026-08-24 on the real
   surface: plum text on the composited pill (rgba(220,183,65,.15) over #1e1e1e = rgb(58,53,35)) is
   **1.30:1** — the reported illegibility. Gold text on that same pill is **6.36:1**, passing AA at
   this 0.72rem size.
   📌 Gold-on-dark is the sanctioned direction (CLAUDE.md §2: gold text is legible only on
   plum/dark surfaces), so this keeps the gold pill identity rather than turning it into a neutral
   chip — white would score 12.26:1 but reads as a different component. */
.sc-blog-featured__tags .sc-tag {
	color: var(--sc-gold);
}

.sc-blog-featured__title {
	font-size: clamp(1.3rem, 3vw, 2rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.75rem;
	line-height: 1.25;
}

.sc-blog-featured__summary {
	color: #aaa;
	margin: 0 0 1rem;
	line-height: 1.6;
	font-size: 0.95rem;
}

.sc-blog-featured__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

/* 🔴 SAME DEFECT AS THE TAGS ABOVE, found while measuring them. `var(--sc-text)` is #333 —
   the BODY-TEXT token, i.e. a foreground for light surfaces — and it was sitting on the #1e1e1e
   card at **1.32:1**, no more legible than the pills. Matched to `.sc-blog-featured__summary`'s
   #aaa (**7.18:1**) so the panel's three secondary foregrounds agree.
   ⚠️ Both selectors here are `.sc-blog-featured__*`, i.e. this comma group has no member outside
   the featured panel — editing it in place cannot leak (CLAUDE.md §7). */
.sc-blog-featured__date,
.sc-blog-featured__author {
	font-size: 0.82rem;
	color: #aaa;
}

.sc-blog-featured__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #666;
}

@media (min-width: 768px) {
	.sc-blog-featured {
		padding: 2.5rem 0;
	}

	.sc-blog-featured__container {
		padding: 0 2rem;
	}

	.sc-blog-featured__card {
		display: grid;
		grid-template-columns: 1fr 420px;
	}

	.sc-blog-featured__img-wrap {
		aspect-ratio: auto;
		height: 100%;
		min-height: 320px;
	}

	.sc-blog-featured__body {
		padding: 2.5rem 2rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media (min-width: 1200px) {
	.sc-blog-featured__container {
		padding: 0 3rem;
	}

	.sc-blog-featured__card {
		grid-template-columns: 1fr 500px;
	}

	.sc-blog-featured__body {
		padding: 3rem 2.5rem;
	}
}


/* ── Blog card grid ─────────────────────────────────────────── */

.sc-blog-grid {
	background: var(--sc-bg);
	padding: 2.5rem 0;
}

.sc-blog-grid__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sc-blog-grid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.sc-blog-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.sc-blog-grid__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.sc-blog-grid__container {
		padding: 0 2rem;
	}
}

@media (min-width: 1200px) {
	.sc-blog-grid__container {
		padding: 0 3rem;
	}
}


/* ── Blog card ──────────────────────────────────────────────── */

.sc-blog-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	transition: transform 0.25s, box-shadow 0.25s;
	height: 100%;
}

.sc-blog-card:hover,
.sc-blog-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.sc-blog-card__img-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f0f0f0;
	flex-shrink: 0;
}

.sc-blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}

.sc-blog-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e8e8e8, #d8d8d8);
}

.sc-blog-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 50px;
}

.sc-blog-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sc-blog-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
}

.sc-blog-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0 0 0.5rem;
	line-height: 1.35;
}

.sc-blog-card__summary {
	font-size: 0.85rem;
	color: #666;
	margin: 0 0 0.75rem;
	line-height: 1.55;
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.sc-blog-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

.sc-blog-card__date,
.sc-blog-card__author {
	font-size: 0.78rem;
	color: var(--sc-text);
}

.sc-blog-card__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #bbb;
	flex-shrink: 0;
}

.sc-blog-card__footer {
	padding-top: 0.75rem;
	margin-top: 0.5rem;
	border-top: 1px solid #f0f0f0;
}

.sc-blog-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--sc-plum);
	letter-spacing: 0.02em;
}

.sc-blog-card__read-more .material-symbols-outlined {
	font-size: 0.9rem;
	transition: transform 0.2s;
}

.sc-blog-card:hover .sc-blog-card__read-more .material-symbols-outlined {
	transform: translateX(3px);
}


/* ── Empty / no results state ───────────────────────────────── */

.sc-blog-empty {
	padding: 4rem 0;
	text-align: center;
}

.sc-blog-empty__container {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.sc-blog-empty__text {
	color: #777;
	font-size: 1rem;
	margin: 0;
}


/* ── Pagination ─────────────────────────────────────────────── */

.sc-pagination {
	padding: 2rem 0 3rem;
	background: var(--sc-bg);
}

.sc-pagination__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.sc-pagination__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 8px 20px;
	border-radius: var(--sc-radius-btn);
	border: 1.5px solid var(--sc-gold);
	background: transparent;
	color: var(--sc-plum);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	cursor: pointer;
}

.sc-pagination__btn:hover:not(.is-disabled),
.sc-pagination__btn:focus-visible:not(.is-disabled) {
	background: var(--sc-gold);
	color: var(--sc-text);
}

.sc-pagination__btn.is-disabled {
	border-color: #ddd;
	color: #ccc;
	cursor: default;
	pointer-events: none;
}

.sc-pagination__info {
	font-size: 0.85rem;
	color: var(--sc-text);
	min-width: 100px;
	text-align: center;
}


/* ── Article page — hero ────────────────────────────────────── */

.sc-article {
	background: var(--sc-bg);
}

.sc-article-hero {
	position: relative;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--sc-plum);
	padding-top: var(--sc-nav-height);
}

.sc-article-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.sc-article-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(68,11,34,0.2) 0%, rgba(68,11,34,0.75) 100%);
}

.sc-article-hero__overlay--solid {
	background: linear-gradient(135deg, #1a1a1a 0%, var(--sc-plum) 100%);
}

.sc-article-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 2rem 1.5rem 2.5rem;
}

.sc-article-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.sc-article-hero__heading {
	font-size: clamp(1.8rem, 4.5vw, 3rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.75rem;
	line-height: 1.2;
}

.sc-article-hero__subheading {
	font-size: 1.05rem;
	color: var(--sc-gold);
	margin: 0;
	font-weight: 500;
}

@media (min-width: 768px) {
	.sc-article-hero {
		min-height: 320px;
	}

	.sc-article-hero__content {
		padding: 3rem 1.5rem 3.5rem;
	}
}

@media (min-width: 1024px) {
	.sc-article-hero__content {
		padding-left: 40px;
		padding-right: 40px;
	}
}


/* ── Article meta row ───────────────────────────────────────── */

.sc-article-meta {
	background: #fff;
	border-bottom: 1px solid #eee;
}

.sc-article-meta__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0.85rem 1.5rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sc-article-meta__back {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--sc-plum);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.sc-article-meta__back .material-symbols-outlined {
	font-size: 1rem;
}

.sc-article-meta__back:hover {
	text-decoration: underline;
}

.sc-article-meta__sep {
	width: 1px;
	height: 14px;
	background: #ddd;
}

.sc-article-meta__date,
.sc-article-meta__author,
.sc-article-meta__read-time {
	font-size: 0.82rem;
	color: var(--sc-text);
}

.sc-article-meta__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #ccc;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.sc-article-meta__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}


/* ── Share buttons ──────────────────────────────────────────── */

.sc-share {
	background: #fafafa;
	border-bottom: 1px solid #eee;
}

.sc-share__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sc-share__label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #999;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-right: 0.25rem;
}

.sc-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 6px 14px;
	border-radius: 50px;
	border: 1.5px solid #e0e0e0;
	background: #fff;
	color: #555;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	font-family: var(--sc-font);
}

.sc-share__btn:hover,
.sc-share__btn:focus-visible {
	border-color: var(--sc-gold);
	color: var(--sc-text);
	background: rgba(220,183,65,0.1);
}

.sc-share__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.sc-share__icon.material-symbols-outlined {
	font-size: 1rem;
}

.sc-share__btn-label {
	display: none;
}

@media (min-width: 480px) {
	.sc-share__btn-label {
		display: inline;
	}
}

@media (min-width: 1024px) {
	.sc-share__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}


/* ── Article body typography ────────────────────────────────── */

.sc-article-body {
	padding: 2.5rem 0;
}

.sc-article-body__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #333;
}

.sc-article-body__inner h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 2rem 0 0.75rem;
}

.sc-article-body__inner h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 1.5rem 0 0.5rem;
}

.sc-article-body__inner p {
	margin: 0 0 1.25rem;
}

.sc-article-body__inner ul,
.sc-article-body__inner ol {
	list-style: revert;
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}

.sc-article-body__inner li {
	margin-bottom: 0.4rem;
}

.sc-article-body__inner a {
	color: var(--sc-plum);
	text-decoration: underline;
}

.sc-article-body__inner a:hover {
	color: var(--sc-text);
}

.sc-article-body__inner img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sc-radius-card);
	margin: 1rem 0;
}

.sc-article-body__inner blockquote {
	border-left: 3px solid var(--sc-gold);
	margin: 1.5rem 0;
	padding: 0.5rem 1.25rem;
	color: #555;
	font-style: italic;
}

.sc-article-body__inner figure {
	margin: 1.5rem 0;
}

.sc-article-body__inner figcaption {
	font-size: 0.82rem;
	color: var(--sc-text);
	margin-top: 0.4rem;
}

@media (min-width: 768px) {
	.sc-article-body {
		padding: 3rem 0;
	}

	.sc-article-body__inner {
		font-size: 1.1rem;
	}
}

@media (min-width: 1024px) {
	.sc-article-body__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}


/* ── Article CTAs ────────────────────────────────────────────
   Buttons at the foot of the article body, from the `articleCtas`
   Multi URL Picker. First link = filled, rest = outline; the two
   .sc-btn modifiers come from site.css — no radius is hand-rolled
   here (CLAUDE.md §2 owns the pill).
   The container mirrors .sc-article-body__inner EXACTLY (max-width,
   auto margin, 1.5rem gutter stepping to 40px at 1024) so the buttons
   line up with the body copy above them — CLAUDE.md §7's article-page
   container rule.
   ⚠️ Plain @media — news.css is a static file, never parsed by Razor. */
.sc-article-ctas {
	padding: 0 0 2.5rem;
}

.sc-article-ctas__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (min-width: 1024px) {
	.sc-article-ctas__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}


/* ── Article FAQ accordion — RULE SET DELETED 2026-08-24 ─────
   _ArticleFaqs.cshtml was repointed onto the shared FAQ classes, which are styled in
   site.css. This file deliberately carries NO article-FAQ rules any more: a second rule
   set for one component is how the two accordions drifted apart in the first place.
   🔴 If the news FAQ needs to differ from the sitewide FAQ, change it in site.css or say
   why here — do NOT start a parallel prefix in this file.
   ⚠️ The old prefix is deliberately not spelled out above, so that grepping this file for
   it returns a clean zero rather than matching this notice. */


/* ── Related venues ─────────────────────────────────────────── */

.sc-article-venues {
	background: #f4f4f4;
	padding: 2.5rem 0;
	border-top: 1px solid #e8e8e8;
}

.sc-article-venues__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sc-article-venues__heading {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0 0 1.25rem;
}

.sc-article-venues__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.sc-article-venue-card {
	display: flex;
	gap: 1rem;
	align-items: center;
	background: #fff;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

.sc-article-venue-card:hover,
.sc-article-venue-card:focus-visible {
	box-shadow: 0 4px 18px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.sc-article-venue-card__img-wrap {
	width: 100px;
	height: 80px;
	flex-shrink: 0;
	overflow: hidden;
	background: #eee;
}

.sc-article-venue-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sc-article-venue-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ddd, #ccc);
}

.sc-article-venue-card__body {
	padding: 0.75rem 1rem 0.75rem 0;
	flex: 1;
}

.sc-article-venue-card__name {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0 0 0.25rem;
}

.sc-article-venue-card__summary {
	font-size: 0.8rem;
	color: var(--sc-text);
	margin: 0 0 0.35rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.sc-article-venue-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sc-plum);
}

.sc-article-venue-card__link .material-symbols-outlined {
	font-size: 0.85rem;
}

@media (min-width: 480px) {
	.sc-article-venues__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.sc-article-venue-card__img-wrap {
		width: 120px;
		height: 90px;
	}
}

@media (min-width: 1024px) {
	.sc-article-venues__container {
		padding-left: 40px;
		padding-right: 40px;
	}
}


/* ── More news ──────────────────────────────────────────────── */

.sc-more-news {
	background: var(--sc-bg);
	padding: 3rem 0 4rem;
	border-top: 1px solid #eee;
}

.sc-more-news__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sc-more-news__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	gap: 1rem;
}

.sc-more-news__heading {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0;
}

.sc-more-news__all {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--sc-plum);
	text-decoration: none;
	white-space: nowrap;
}

.sc-more-news__all .material-symbols-outlined {
	font-size: 1rem;
	transition: transform 0.2s;
}

.sc-more-news__all:hover .material-symbols-outlined {
	transform: translateX(3px);
}

.sc-more-news__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.sc-more-news__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.sc-more-news__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.sc-more-news__container {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* ============================================================
   IMAGE-LINK HOVER — CARD LIFT SUPPRESSION (News section, 2026-07-03)
   Matches site.css: no lift, no growing shadow. Resting shadows
   preserved. Appended last so it wins (also overrides the site.css
   .sc-blog-card, which news.css already supersedes globally).
   These cards previously relied on the now-removed lift/shadow for
   their keyboard-focus cue, so an explicit focus outline is added.
   🔴 The image half was DELETED 2026-08-07 (Adam) — both the zoom rules
   above and the `opacity: .85` fade that had merely MASKED them. Article
   and venue-card images now have no hover treatment. 📖 LESSONS §L7.
   ============================================================ */
.sc-blog-card:hover,
.sc-blog-card:focus-visible,
.sc-blog-featured__card:hover,
.sc-blog-featured__card:focus-visible,
.sc-article-venue-card:hover,
.sc-article-venue-card:focus-visible {
	transform: none;
}
.sc-blog-card:hover,
.sc-blog-card:focus-visible {
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.sc-blog-featured__card:hover,
.sc-blog-featured__card:focus-visible,
.sc-article-venue-card:hover,
.sc-article-venue-card:focus-visible {
	box-shadow: none;
}

/* Keyboard focus cue (replaces the removed lift/shadow) */
.sc-blog-card:focus-visible,
.sc-blog-featured__card:focus-visible,
.sc-article-venue-card:focus-visible {
	outline: 2px solid var(--sc-gold);
	outline-offset: 3px;
}

/* ==========================================================================
   explore.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   Explore SkyCity — explore.css
   Loaded globally via _Layout.cshtml (after news.css).
   Static file: plain @media only (never @@media).
   Scoped to .sc-explore-* / .sc-skybridge-* — reuses global
   .sc-section, .sc-container, .sc-hp-inner, .sc-prose,
   .sc-hero* and .sc-explorer-accordion* from site.css.
   ============================================================ */

/* ── Opening blurb ───────────────────────────────────────── */
.sc-explore-intro {
	max-width: 880px;
}
.sc-explore-intro p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* ── Blended mosaic ──────────────────────────────────────── */
.sc-explore-mosaic {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sc-explore-mosaic__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--sc-radius-card);
	background-color: var(--sc-plum);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: var(--sc-white);
	isolation: isolate;
	transition: transform .35s ease;
}
.sc-explore-mosaic__item:hover {
	transform: translateY(-3px);
}
.sc-explore-mosaic__item:focus-visible {
	outline: 3px solid var(--sc-gold);
	outline-offset: 3px;
}

.sc-explore-mosaic__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(68,11,34,.78) 0%, rgba(68,11,34,.30) 45%, rgba(68,11,34,0) 75%);
	transition: background .3s ease;
}
.sc-explore-mosaic__item:hover .sc-explore-mosaic__overlay {
	background: linear-gradient(to top, rgba(68,11,34,.85) 0%, rgba(68,11,34,.45) 55%, rgba(68,11,34,.08) 100%);
}

.sc-explore-mosaic__body {
	position: relative;
	z-index: 2;
	height: 100%;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .5rem;
}

.sc-explore-mosaic__badge {
	align-self: flex-start;
	display: inline-block;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 4px;
}

.sc-explore-mosaic__title {
	margin: 0;
	font-weight: 800;
	line-height: 1.15;
	font-size: 1.25rem;
}
.sc-explore-mosaic__title--hero {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}
.sc-explore-mosaic__title--sm {
	font-size: 1.0625rem;
}

.sc-explore-mosaic__summary {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(255,255,255,.9);
	max-width: 60ch;
}
.sc-explore-mosaic__summary--sm {
	font-size: .875rem;
}

/* Hero (row 1) */
.sc-explore-mosaic__hero {
	min-height: clamp(340px, 46vw, 560px);
}

/* Duo (row 2) */
.sc-explore-mosaic__duo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.sc-explore-mosaic__duo-item {
	min-height: 300px;
}

/* ── Row-balanced grid (rows 3+) — ONE GRID PER ROW ──────────────────────────
   House rule (Adam, 2026-08-04): never more than 4 across, rows balanced rather
   than left with an orphan. ExplorePage chunks the tiles remaining AFTER the hero
   and duo into rows — rows = ceil(n/4), base = n/rows, rem = n%rows, the first
   `rem` rows taking base+1 — and emits ONE .sc-explore-mosaic__grid per row,
   carrying .sc-explore-mosaic__grid--cols-{1..4} for that row's own count:
     1-4 = one row · 5 = 3+2 · 6 = 3+3 · 7 = 4+3 · 8 = 4+4 · 9 = 3+3+3
     10 = 4+3+3 · 11 = 4+4+3 · 12 = 4+4+4

   🔴 PER-ROW, NOT ONE UNIFORM GRID — changed 2026-08-13. A single grid can only have
   ONE column count, so a short last row left its remaining cells EMPTY: a visible gap
   at the right, against a left-aligned block. Sizing each row to its own contents
   removes the gap, and retires the old n = 10 deviation with it — that was never a
   design choice, only a constraint of uniform auto-flow. n = 10 now renders as the
   house rule above states.

   🔴 DELIBERATELY DIVERGES FROM _WhatsOnWidget (whatson.css:517-570), which keeps the
   uniform grid AND the n = 10 deviation. It is a CARD grid, where equal tile size is
   the point; this is a MOSAIC, where it is not (Adam: "they should be treated
   differently"). Do NOT port this back, and do not raise the divergence as a defect.

   📌 WHY THE BREAKPOINT HANDLING BELOW IS COMPLETE, not merely tested: row sizes can
   only ever be 1, 2, 3 or 4. base = 4 requires n = 4·rows exactly, which forces
   rem = 0, so a row of 5 is unreachable. Every possible row is therefore covered by
   the four --cols-N modifiers.

   The hero stays FULL-WIDTH and the duo row stays at 2 — only rows 3+ balance.
   Plain @media, never @@media — this is a STATIC file, not Razor. */
.sc-explore-mosaic__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

/* --cols-1 spreads FULL width (changed 2026-08-13). It previously rendered at half
   width, ported from _WhatsOnWidget on the grounds that a lone tile at full width
   reads as a second hero. That holds for the widget, which has no hero above it —
   here the tile sits below a full-width hero AND a half-width duo, so a half-width
   third row reads as an orphaned duo tile instead. "Short rows spread full width" now
   holds for every row, with no exception. Its 4.4:1 ratio below is what keeps it a
   banner rather than a slab. */
.sc-explore-mosaic__grid--cols-1 { grid-template-columns: 1fr; }
.sc-explore-mosaic__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sc-explore-mosaic__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sc-explore-mosaic__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Tile shape: A RATIO PER COLUMN COUNT — and NO height property at all ──────
   🔴 NEVER ADD min-height OR max-height TO A GRID TILE **WHILE A RATIO IS ACTIVE** —
   i.e. anywhere the rules below apply. The qualifier is load-bearing, not hedging: the
   ≤730px block deliberately sets `aspect-ratio: auto` AND a `min-height`, which is safe
   for the precise reason spelled out there. **The ban is on height properties while a
   ratio is active, not on height properties as such.**
   Both are the same bug in opposite directions, and both were shipped and measured on
   this page on 2026-08-13:

   `aspect-ratio` + `max-height` COLLAPSES THE WIDTH. Height is derived from width, the
   clamp cuts the height, and the browser preserves the ratio by SHRINKING THE WIDTH —
   so the tile renders narrower than its grid cell, left-aligned, with a hole beside it.
   Measured: a --cols-2 tile came out 435 x 300 inside a 692px cell (435/300 = 1.45,
   the ratio held exactly while the width collapsed). --cols-1 was worse: 1320 wide
   wanted 910 tall, clamped to 300, leaving a 435px box in a 1320px cell. **That
   reintroduced the very gap this file exists to remove, from a different cause.**
   A `min-height` does the mirror image: the floor transfers back into width and pushes
   tiles to OVERFLOW their cells at narrow widths.

   ✅ The fix is to state the SHAPE per column count and let width stay authoritative.
   Safe now in a way it was not before: each row is its own grid, so --cols-N scopes to
   the row rather than to the whole mosaic. At the 1400px max width:
     --cols-4  318 x 219   ·  --cols-3  429 x 260  (reproduces the pre-2026-08-13 look)
     --cols-2  652 x 290   ·  --cols-1  1320 x 300 (a banner)
   🔴 Every one lands at or under 300px, so "nothing inside the grid is taller than the
   duo row above it" is satisfied BY THE RATIOS THEMSELVES — which is why there is no
   clamp. Keep that property if you ever retune a ratio.

   📌 No default rule on .sc-explore-mosaic__grid-item is needed, and that is deliberate:
   the template always emits --cols-N with N = the row's own tile count, and row sizes
   can only ever be 1, 2, 3 or 4 (base = 4 forces rem = 0, so a row of 5 is
   unreachable). The four rules below are therefore exhaustive. */
.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item { aspect-ratio: 1.45 / 1; }
.sc-explore-mosaic__grid--cols-3 .sc-explore-mosaic__grid-item { aspect-ratio: 1.65 / 1; }
.sc-explore-mosaic__grid--cols-2 .sc-explore-mosaic__grid-item { aspect-ratio: 2.25 / 1; }
.sc-explore-mosaic__grid--cols-1 .sc-explore-mosaic__grid-item { aspect-ratio: 4.4 / 1; }

/* 🔴 Tablet: ONLY --cols-4 halves. --cols-3 / --cols-2 / --cols-1 keep their own
   count, and that is the whole point — an earlier version sent --cols-3 to 2 columns
   as well, which re-created the gap this file exists to remove (a 3-tile row becomes
   2+1). 4 → 2 is always gap-free; 3, 2 and 1 are gap-free by definition. Combined with
   the row-size proof above, EVERY row shape is gap-free at tablet for every n.
   The narrow 3-across tiles this leaves are handled by the RATIO, not by columns. */
@media (max-width: 1023px) {
	.sc-explore-mosaic {
		padding: 0 1.5rem;
	}
	.sc-explore-mosaic__grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	/* 🔴 --cols-4 renders 2-ACROSS in this band, so its 4-across ratio no longer describes
	   it: at 1023px the cell is 480px and 1.45 gives 331px — 31px TALLER than the duo row,
	   breaking the one invariant the ratios exist to hold. 1.6 keeps it at or under 300
	   right across the band: 1023 → 300, 1000 → 293, 912 → 265, 768 → 220.
	   ⚠️ The class name says 4 and the render is 2 — that mismatch is why this override is
	   needed at all. Any future breakpoint that changes a column count must re-check the
	   ratio for the same reason. */
	.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item {
		aspect-ratio: 1.6 / 1;
	}
}

/* ── Single column for every grid row below 730px ────────────────────────────
   🔴 MEASURED, not guessed: at ratio 1.65 a --cols-3 tile is 207 × 125 at 700px and
   174 × 105 at 601px, against ~87px of badge+title chrome — i.e. it CLIPPED between
   601px and ~730px. Below 730 every grid row therefore becomes ONE full-width tile.

   Of the two levers available, this is the one that does not undo the task: sending
   --cols-3 to 2 columns would make a 3-tile row render 2+1, re-creating the very gap
   this file exists to remove. One column is gap-free by definition.

   🔴 NO RATIO APPLIES IN THIS BAND — `aspect-ratio: auto` plus a flat `min-height`.
   A ratio cannot serve a ~316px-wide span of single-column widths: measured live, 1.45/1
   gave 662 x 457 at 725px, TALLER than the duo row's 300px, inverting the mosaic's
   hero 560 → duo 300 → grid-smaller scale — the same defect that was removed at desktop,
   reappearing at tablet-portrait. And no single flatter ratio fixes it either: 2.25/1
   suits 662px but collapses to 163px at 414px, against ~87px of badge+title chrome.

   ⚠️⚠️ THIS DOES NOT CONTRADICT THE "NEVER ADD min-height OR max-height" RULE ABOVE, AND
   THE DISTINCTION IS EXACT — get it wrong in either direction and something breaks:
     • The ban applies **while a ratio is ACTIVE**. `aspect-ratio` derives height FROM
       width, so constraining the height makes the browser preserve the ratio by
       COLLAPSING THE WIDTH — the tile then sits narrower than its cell, which is the
       measured 435-in-a-692px-cell defect.
     • Here `aspect-ratio: auto` switches the derivation OFF. Height is no longer a
       function of width, so nothing can be transferred back into width, and a plain
       `min-height` is not merely safe but the correct tool.
   🔴 So: **height properties are banned while a ratio is active — NOT banned as such.**
   Do not reinstate a clamp above where a ratio IS active, and do not strip this one
   because a rule elsewhere says "no height properties".
   Expected: 730px → 662 x 260 · 414px → 366 x 260.

   ⚠️ MUST stay AFTER the ≤1023px block — same specificity, so source order decides.
   ⚠️ The HERO and DUO rows are deliberately NOT touched here; they keep their own
   ≤600px behaviour (scope boundary: only rows 3+ change). */
@media (max-width: 730px) {
	.sc-explore-mosaic__grid--cols-1,
	.sc-explore-mosaic__grid--cols-2,
	.sc-explore-mosaic__grid--cols-3,
	.sc-explore-mosaic__grid--cols-4 {
		grid-template-columns: 1fr;
	}
	.sc-explore-mosaic__grid--cols-1 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-2 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-3 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item {
		aspect-ratio: auto;
		min-height: 260px;
	}
}
/* ≤600px — HERO and DUO only. The grid rows are already single-column from 730px up,
   so their rules live in that block, not here. Keeping the duo's collapse at 600 rather
   than 730 is deliberate: the scope boundary protects the hero and duo rows. */
@media (max-width: 600px) {
	.sc-explore-mosaic__duo {
		grid-template-columns: 1fr;
	}
	.sc-explore-mosaic__hero {
		min-height: 320px;
	}
	/* 🔴 --grid-item is NOT in this min-height rule, and must never be added back — a
	   height floor on a ratio'd tile transfers into WIDTH and overflows the cell. The duo
	   carries no aspect-ratio, so a floor is correct for it. */
	.sc-explore-mosaic__duo-item {
		min-height: 240px;
	}
	.sc-explore-mosaic__body {
		padding: 1.25rem;
	}
}

/* ── Map accordions (reuse .sc-explorer-accordion shell) ─── */
.sc-explore-map {
	margin-bottom: 1rem;
}
.sc-explore-map .sc-explorer-accordion__body {
	padding: 0;
}
.sc-explore-map__frame {
	position: relative; /* establishes containing block for MappedIn's absolutely-positioned #mappedin-map */
	width: 100%;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
	background: #ffffff;
}
@media (max-width: 600px) {
	.sc-explore-map__frame {
		height: 60vh;
		min-height: 420px;
	}
}

/* ── Sky Bridge ──────────────────────────────────────────── */
.sc-skybridge {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 2.5rem;
	align-items: center;
}
.sc-skybridge--full {
	grid-template-columns: 1fr;
}
.sc-skybridge__body {
	margin-bottom: 1.5rem;
	max-width: none;
}
.sc-skybridge__walks {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .25rem 2rem;
}
.sc-skybridge__walk {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.sc-skybridge__walk-dest {
	font-weight: 600;
}
.sc-skybridge__walk-time {
	color: var(--sc-gold);
	font-weight: 700;
	white-space: nowrap;
}
.sc-skybridge__note {
	font-size: .8125rem;
	color: rgba(0,0,0,.55);
	margin: .5rem 0 0;
}
.sc-skybridge__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sc-radius-card);
}

@media (max-width: 768px) {
	.sc-skybridge {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.sc-skybridge__walks {
		grid-template-columns: 1fr;
	}
	.sc-skybridge__media {
		order: -1;
	}
}

/* ============================================================
   IMAGE-LINK HOVER — SIMPLIFIED (Explore mosaic, 2026-07-03)
   Matches the global simplification in site.css: drop the box lift on
   hover. The overlay-gradient shift stays as the tile's hover cue
   (background-image tiles — no <img> to fade). Appended last so it wins.
   ============================================================ */
.sc-explore-mosaic__item:hover { transform: none; }

/* ==========================================================================
   skytower.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   SkyCity — Sky Tower page styles (skytower.css)
   Loaded globally via _Layout.cshtml, AFTER site.css.

   Page/feature-scoped block extracted from site.css so site.css
   holds only global foundations + shared primitives. These rules
   are inert on pages that don't render the Sky Tower markup.

   Contains: the Sky Tower split-hero (.sc-skytower*), the ticket /
   annual-pass price tables (.sc-pt-*), and the Explorer-app
   accordion (.sc-explorer-accordion*). Equal specificity to the
   original site.css rules but loaded later, so the small-screen
   overrides at the foot win exactly as before.

   Static file: plain @media only (never @@media).
   ============================================================ */

/* ── Split hero ──────────────────────────────────────────── */
.sc-skytower { position: relative; overflow: hidden; min-height: 480px; display: flex; align-items: center; }
.sc-skytower__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.sc-skytower__overlay { position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.08) 100%); }
.sc-skytower__content { position: relative; max-width: var(--sc-max-width); margin: 0 auto; padding: 4rem 1.5rem; width: 100%; display: flex; justify-content: flex-end; }
.sc-skytower__inner { max-width: 480px; text-align: right; }
.sc-skytower__activities { display: flex; gap: .625rem; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 1.5rem; }
.sc-skytower__tag { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.9); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 50px; padding: .3rem .8rem; }

/* ============================================================
   SKY TOWER PRICE TABLES (.sc-pt-*)
   ============================================================ */

/* minmax raised 280px → 360px (2026-08-17) so the two cards stack at ~780px rather than ~630px.
   Derived, not guessed: at 280px they stacked at a measured ~630px viewport, so two columns
   plus the 24px gap were consuming (630 − ~46px container padding) = ~584px. To push the stack
   point to ~780px the pair must exceed (780 − 46) = 734px, i.e. min > 355. 🔴 The stack point is
   a function of THIS value, the gap AND the container padding — change any one and re-measure
   rather than assuming this number still holds. */
.sc-pt-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; margin: 2rem 0; }
.sc-pt-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--sc-radius-card); padding: 22px 24px; display: flex; flex-direction: column; }

/* Primary (standard tickets) — solid gold. Plum is the ONLY text colour that
   survives here; see CLAUDE.md §2. Every child that was tuned for white needs
   an override below, including hairlines. */
.sc-pt-card--primary { background: var(--sc-gold); border-color: transparent; }
.sc-pt-card--primary .sc-pt-eyebrow { color: var(--sc-plum); opacity: .75; }
.sc-pt-card--primary .sc-pt-title { color: var(--sc-plum); }
.sc-pt-card--primary .sc-pt-rule { background: var(--sc-plum); }
.sc-pt-card--primary .sc-pt-table th { color: var(--sc-plum); border-bottom-color: rgba(68,11,34,.22); }
.sc-pt-card--primary .sc-pt-table td { color: var(--sc-plum); border-bottom-color: rgba(68,11,34,.22); }
.sc-pt-card--primary .sc-pt-note { color: rgba(68,11,34,.7); }

/* Secondary (annual pass) — stays white. Declared explicitly rather than left
   to the base rule so the pair reads as a deliberate contrast. */
.sc-pt-card--secondary { background: #fff; }

.sc-pt-cta { margin-top: auto; padding-top: 18px; }
.sc-pt-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); font-weight: 600; margin: 0 0 4px; }
.sc-pt-title { font-size: 1.125rem; font-weight: 700; color: var(--sc-text); margin: 0 0 4px; font-family: var(--sc-font); }
.sc-pt-rule { width: 42px; height: 3px; background: var(--sc-gold); border-radius: 2px; margin: 0 0 14px; }
.sc-pt-table { width: 100%; border-collapse: collapse; }
.sc-pt-table th { text-align: left; font-weight: 500; color: var(--sc-text); font-size: .9375rem; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.07); vertical-align: top; }
.sc-pt-table td { text-align: right; font-weight: 700; color: var(--sc-plum); font-size: 1rem; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.07); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-pt-table tr:last-child th,
.sc-pt-table tr:last-child td { border-bottom: none; }
.sc-pt-note { display: block; font-size: .75rem; font-weight: 400; color: #6b6b6b; margin-top: 2px; }

/* Free pill — OUTLINED, and deliberately UNCONDITIONAL.
   It was rgba(220,183,65,.16) on #8a6a38: a translucent gold over an unknown
   surface, so it composited gold-on-gold and vanished the moment a card went
   gold. An opaque border + opaque text does not composite at all, so ONE rule
   is correct on white and on gold. Do not reintroduce a per-surface variant. */
.sc-pt-free { display: inline-block; background: transparent; border: 1px solid var(--sc-plum); color: var(--sc-plum); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 50px; }

/* ============================================================
   EXPLORER ACCORDION
   ============================================================ */

.sc-explorer-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; user-select: none; border: 1px solid rgba(0,0,0,.12); border-radius: var(--sc-radius-card); transition: background .15s; }
.sc-explorer-accordion__summary::-webkit-details-marker { display: none; }
.sc-explorer-accordion__summary:hover { background: #f9f6f1; }
.sc-explorer-accordion__title { font-family: var(--sc-font); font-size: 1.15rem; font-weight: 600; color: var(--sc-text); }
.sc-explorer-accordion__icon { font-size: 1.5rem; color: var(--sc-gold); transition: transform .25s ease; flex-shrink: 0; }
.sc-explorer-accordion[open] .sc-explorer-accordion__icon { transform: rotate(180deg); }
.sc-explorer-accordion__body { padding: .75rem 0 0; }
@media (max-width: 600px) { .sc-explorer-accordion__body { padding: .5rem 0 0; } }

/* ── Small screens (was the .sc-skytower part of site.css's
   shared max-width:640px block) ──────────────────────────── */
@media (max-width: 640px) {
	.sc-skytower__inner { max-width: 100%; text-align: left; }
	.sc-skytower__activities { justify-content: flex-start; }
	.sc-skytower__overlay { background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 100%); }
}

/* ============================================================
   PRICE TABLES — INSULATION BLOCK REMOVED (2026-07-16)
   A `PRICE TABLES — INSULATE FROM GLOBAL CONTENT-TABLE STYLES`
   block lived here from 13 Jul. It re-asserted `.sc-pt-table`'s own
   look (margin, cell borders, padding, no zebra, no hover fill,
   `display:table` under 600px) purely to fight the global content-
   table rules in site.css, which at the time targeted bare
   `table`/`th`/`td` and leaked into these cards.

   Those site.css rules are now scoped to `table:not([class])`
   (2026-07-16) and cannot see `.sc-pt-table` at all — the class sits
   on the <table> element itself — so every declaration here became a
   no-op duplicating the real `.sc-pt-*` rules above (same 11px 0
   padding, same rgba(0,0,0,.07) bottom border, same last-row reset).
   Removed rather than left as dead code.

   DO NOT re-add it. If the price cards ever pick up borders, striping
   or a hover fill again, the cause is an UNSCOPED table rule in
   site.css — fix it there, not here. Patching this file was the wrong
   lever on 13 Jul and is why the leak recurred on 16 Jul. See
   CLAUDE.md §7, "Content-table rules MUST be scoped to
   `table:not([class])`".
   ============================================================ */

/* ============================================================
   SKY TOWER — School Holidays panel · cream intro · stat boxes
   (design refresh 2026-08, spec 06)
   ============================================================
   📌 RELOCATED FROM `site.css` ON 2026-08-21 (`tasks/chore-skytower-css-relocate.md`) — a pure
   cut-and-paste, 191 lines, byte-identical, verified as a no-op by computed styles before and
   after on `/sky-tower/`, the homepage and a restaurant. It lived in `site.css` only because
   spec 06 did not own this file. **This note used to say "recommend moving it"; it has moved.**
   🔴 THE MOVE WAS NOT RISK-FREE AND THE REASON IS WORTH KEEPING: `skytower.css` loads AFTER
   `site.css`, `whatson.css`, `news.css` and `explore.css`, so relocating a rule here RAISES its
   precedence at equal specificity. It was safe only because none of these class tokens exists in
   any of those four sheets, nor anywhere else in `site.css` — checked by extracting class TOKENS
   from both files rather than by substring, which is what distinguishes `.sc-skytower-intro`
   (site) from `.sc-skytower` (here): a shared prefix, not a collision.
   ⚠ If you ever move a block the other way, re-run that check first.

   Colours SAMPLED from `tower_schoolholidays.png` and `skytower_stats.png`, never chosen:
     panel ramp     #5A283C → #1E030E  ≈ --sc-grad-plum-stops, rotated to 90deg
     heading        #EDDBA0 -> --sc-gold-40   10.80:1 on the ramp's lightest stop
     subtitle       #F8F4E8  = --sc-cream      12.67:1
     button fill    #EDDBA0 -> --sc-gold-40
     button label   #1E020D -> --sc-plum       12.36:1 on the fill
     stat box fill  #ECDBA4 -> --sc-gold-40
     stat value     #440B22  = --sc-plum       12.36:1
     stat label     #693C4E  = --sc-plum-80     6.90:1
     intro surface  #F8F4E8  = --sc-cream
   Every one maps onto an existing token. Nothing new was added to :root. */

/* ── Part B: the intro sits on cream ─────────────────────────────────────────── */
.sc-skytower-intro { background: var(--sc-cream); }

/* 🔴 `.sc-pt-card` IS `background: #fff`, AND WHITE ON CREAM IS 1.10:1 — the card's EDGE
   disappears the moment the section behind it stops being white. Its 1px rgba(0,0,0,.08)
   border is not enough to hold it. The text inside is unaffected (12.63:1) which is exactly
   why an audit that only measures text would pass this and ship an invisible card.
   ⚠ The fix is specificity, NOT file order: `skytower.css` loads AFTER `site.css`, so a
   (0,1,0) rule here would lose. `.sc-skytower-intro .sc-pt-card` is (0,2,0) and wins from
   either file — which also means moving this block to `skytower.css` later changes nothing.
   ⚠ `--primary` is EXCLUDED: it is a gold card with `border-color: transparent` on purpose,
   and giving it a plum hairline would be a visible regression on a card that was already fine. */
.sc-skytower-intro .sc-pt-card:not(.sc-pt-card--primary) { border-color: rgba(68,11,34,.16); }

/* ── Part A: the School Holidays panel ───────────────────────────────────────── */
.sc-sh { padding: 3rem 0; }

/* The ramp is CONSUMED and only the ANGLE is new — which is the sanctioned pattern, stated at
   the token itself and already precedented by `.sc-surface--grad-diag` (135deg). The comp's
   panel is flat vertically and sweeps left→right, so 90deg. **No stop list is re-declared:
   #52152F / #3A0C1F / #1C0309 each appear exactly once in this file, in :root.** */
.sc-sh__panel {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(90deg, var(--sc-grad-plum-stops));
	isolation: isolate;
}

/* 🔴 A MASK ON THE IMAGE ALONE WAS NOT ENOUGH, AND THE FIRST BUILD SHIPPED THE BUG THE SPEC
   WARNED ABOUT. Masking only the photo fades it toward the LEFT — but the heading is CENTRED on
   the panel, so its right-hand tail reached into the zone where the photo was still fully opaque.
   Rendered against a deliberately hostile test image (near-white sky at the right edge), the word
   "Programmes" became gold-40 on near-white and was unreadable. **Caught by looking at it; the
   computed styles were all correct.**
   The fix is BOTH layers, which is what the comp actually does:
     .sc-sh__bg      — the photo, masked so it fades out toward the LEFT
     .sc-sh__panel::after — the plum ramp AGAIN, over the photo, masked so it fades out toward the
                       RIGHT. Fully opaque across the left 66%, gone by 96%.
   So text always sits on plum, whatever photo an editor picks, and the photo still reads in the
   right quarter exactly as the comp shows.
   ⚠ THE SCRIM CONSUMES `var(--sc-grad-plum-stops)` — it is the same ramp painted twice, NOT a
   second stop list. #52152F / #3A0C1F / #1C0309 still appear exactly once each in this file.
   ⚠ `mask-image` carries the -webkit- prefix for older Safari. With neither supported the scrim
   would be fully opaque and the photo simply would not show — degrading to the no-image panel,
   which is the safe direction. */
.sc-sh__bg {
	position: absolute;
	inset: 0 0 0 auto;
	width: 58%;
	z-index: 0;
	-webkit-mask-image: linear-gradient(270deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(270deg, #000 55%, transparent 100%);
}
.sc-sh__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-sh__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, var(--sc-grad-plum-stops));
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 96%);
	mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 96%);
}

.sc-sh__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
	max-width: 54rem;
	margin: 0 auto;
}

.sc-sh__heading {
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 4.2vw, 3rem);
	line-height: 1.1;
	color: var(--sc-gold-40);
	margin: 0;
}
.sc-sh__lead { color: var(--sc-cream); font-size: 1rem; line-height: 1.6; margin: .875rem auto 0; max-width: 46rem; }

/* ⚠ NOT `.sc-btn--gold`. The comp's button is a PALE fill with a PLUM label (12.36:1); the brand
   primary is a saturated gold fill with a WHITE label, which is the documented 1.93:1 §2
   exception. Reusing `.sc-btn--gold` here would have imported that exception onto a dark panel
   where it is not required and not wanted. The §2 exception is untouched — this is a sibling. */
.sc-sh__cta {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	margin-top: 1.75rem;
	padding: .75rem .875rem .75rem 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: .875rem;
	font-weight: 700;
	letter-spacing: .107em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.sc-sh__cta:hover { background: var(--sc-gold-60); }
.sc-sh__cta:focus-visible { outline: 2px solid var(--sc-cream); outline-offset: 3px; }

/* The stack comes from the FIRST FOUR of `schoolHolidaysGallery` — no property was added for it.
   Negative margin overlaps them; the ring is the button's own fill so they read as cut-outs. */
.sc-sh__stack { display: inline-flex; flex-shrink: 0; }
.sc-sh__stack img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	box-shadow: 0 0 0 2px var(--sc-gold-40);
}
.sc-sh__stack img + img { margin-left: -12px; }

@media (max-width: 640px) {
	.sc-sh__cta { padding-left: 1.25rem; letter-spacing: .06em; }
	.sc-sh__stack img { width: 28px; height: 28px; }
	.sc-sh__stack img + img { margin-left: -10px; }
	.sc-sh__bg { width: 100%; opacity: .45; }
}

/* ── Part C: the stat boxes ──────────────────────────────────────────────────── */
.sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.sc-stat {
	background: var(--sc-gold-40);
	border-radius: 10px;
	padding: 1.75rem 1.25rem;
	text-align: center;
}
/* ⚠ The suffix is a SUPERSCRIPT, and `vertical-align: super` alone would push the line box open
   and make the boxes different heights. `font-size` + a negative `top` on a relative inline box
   raises it without touching line height — the same reason `<sup>` is avoided here. */
.sc-stat__value {
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 1;
	color: var(--sc-plum);
	display: block;
}
.sc-stat__suffix {
	font-size: .45em;
	font-weight: 800;
	position: relative;
	top: -.72em;
	letter-spacing: .02em;
}
.sc-stat__label {
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--sc-plum-80);
	margin: .75rem 0 0;
}

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

/* ==========================================================================
   room.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   SkyCity — Hotel rooms styles (room.css)
   Loaded globally via _Layout.cshtml, AFTER site.css.

   Page/feature-scoped block extracted from site.css. Covers the
   Hotel Rooms landing header (.sc-rooms-landing*) and the Hotel
   Room detail page (.sc-room-*), including the Grand brand
   overrides (which resolve --hotel-* tokens from the brand
   stylesheet loaded later) and the responsive collapse blocks.

   Static file: plain @media only (never @@media).
   ============================================================ */

/* ── Rooms landing header ────────────────────────────────── */
.sc-rooms-landing-header { padding-bottom: 2rem; }
.sc-rooms-landing__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; margin-bottom: 1rem; }
.sc-rooms-landing__intro { font-size: 1.0625rem; line-height: 1.75; color: rgba(0,0,0,.65); max-width: 900px; margin-bottom: 1.5rem; }
.sc-hotel-brand--grand .sc-rooms-landing__title { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-rooms-landing__intro { color: var(--hotel-text-muted); }

/* ==========================================================
   HOTEL ROOM PAGE
   ========================================================== */

.sc-room-gallery {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3px;
	height: 480px;
	overflow: hidden;
}

.sc-room-gallery__hero { grid-row: 1 / 3; overflow: hidden; }
.sc-room-gallery__hero-img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.4s ease; }

.sc-room-gallery__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 3px;
}

.sc-room-gallery__thumb { overflow: hidden; position: relative; cursor: pointer; }
.sc-room-gallery__thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sc-room-gallery__more { position: absolute; inset: 0; background: rgba(0,0,0,.52); color: #fff; font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; letter-spacing: .03em; }
.sc-room-gallery__hero, .sc-room-gallery__thumb { display: block; text-decoration: none; color: inherit; }
.sc-room-gallery__hero:focus-visible, .sc-room-gallery__thumb:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: -3px; }

.sc-room-overview { padding: 3rem 0; }
.sc-room-overview__inner { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
.sc-room-overview__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: 1rem; color: var(--sc-text); }
.sc-room-overview__desc { font-size: 1.0625rem; line-height: 1.7; color: rgba(0,0,0,.65); margin-bottom: 1.5rem; }

.sc-room-amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,.1); }
.sc-room-amenities__item { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; color: var(--sc-text); }
.sc-room-amenities__icon { font-size: 20px; color: var(--sc-gold); flex-shrink: 0; }

.sc-room-sidebar { background: #f8f8f6; border: 1px solid rgba(0,0,0,.08); border-radius: var(--sc-radius-card); padding: 1.75rem; position: sticky; top: calc(var(--sc-nav-height) + 48px + 1rem); }
.sc-room-sidebar__price { display: flex; align-items: baseline; gap: .375rem; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.sc-room-sidebar__price-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(0,0,0,.45); }
.sc-room-sidebar__price-amount { font-size: 1.75rem; font-weight: 800; color: var(--sc-text); }
.sc-room-sidebar__price-night { font-size: .8125rem; color: rgba(0,0,0,.45); }
.sc-room-sidebar__facts { margin: 1.25rem 0; border-top: 1px solid rgba(0,0,0,.08); padding-top: 1.25rem; }
.sc-room-sidebar__fact { display: flex; justify-content: space-between; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: .9375rem; }
.sc-room-sidebar__fact dt { color: rgba(0,0,0,.5); font-weight: 500; }
.sc-room-sidebar__fact dd { color: var(--sc-text); font-weight: 600; text-align: right; }
.sc-room-sidebar__book-btn { width: 100%; text-align: center; margin-top: 1.25rem; display: block; }

.sc-room-hotel-section .sc-section__title { font-size: 1.25rem; margin-bottom: 1.5rem; }
.sc-room-hotel-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: .875rem 2rem; }
.sc-room-hotel-item { display: flex; align-items: flex-start; gap: .625rem; }
.sc-room-hotel-item__icon { font-size: 20px; color: var(--sc-gold); flex-shrink: 0; margin-top: 1px; }
.sc-room-hotel-item__text { display: flex; flex-direction: column; gap: .125rem; }
.sc-room-hotel-item__title { font-size: .9375rem; font-weight: 600; color: var(--sc-text); }
.sc-room-hotel-item__desc { font-size: .875rem; color: rgba(0,0,0,.55); }

.sc-room-back { padding: 1.5rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.sc-room-back__link { display: inline-flex; align-items: center; gap: .375rem; color: var(--sc-text); font-weight: 600; font-size: .9375rem; text-decoration: none; transition: color .2s; }
.sc-room-back__link:hover { color: var(--sc-gold); }
.sc-room-back .material-symbols-outlined { font-size: 18px; }

.sc-hotel-brand--grand .sc-room-overview__title { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-overview__desc { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-amenities__label { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-sidebar { background: var(--hotel-card-bg); border-color: var(--hotel-card-border); }
.sc-hotel-brand--grand .sc-room-sidebar__price-amount { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-sidebar__price-night { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-sidebar__fact dt { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-sidebar__fact dd { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-sidebar__fact { border-bottom-color: var(--hotel-divider); }
.sc-hotel-brand--grand .sc-room-sidebar__facts { border-top-color: var(--hotel-divider); }
.sc-hotel-brand--grand .sc-room-hotel-item__title { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-hotel-item__desc { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-back__link { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-back__link:hover { color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-room-back { border-top-color: var(--hotel-divider); }
.sc-hotel-brand--grand .sc-room-amenities { border-top-color: var(--hotel-divider); }

@media (max-width: 1024px) {
	.sc-room-overview__inner { grid-template-columns: 1fr; }
	.sc-room-sidebar { position: static; }
	.sc-room-gallery { height: 360px; }
}

@media (max-width: 768px) {
	.sc-room-gallery { grid-template-columns: 1fr; height: auto; }
	.sc-room-gallery__hero { grid-row: auto; height: 280px; }
	.sc-room-gallery__grid { display: none; }
	.sc-room-amenities { grid-template-columns: 1fr; }
	.sc-room-hotel-items { grid-template-columns: 1fr; }
}

/* ============================================================
   IMAGE-LINK HOVER — REMOVED (Hotel room gallery, 2026-07-03 / 2026-08-07)
   🔴 The room gallery images have NO hover treatment. The 2026-07-03 pass
   replaced the zoom with an `opacity: .85` fade, which MASKED the zoom
   rather than removing it — both were DELETED at source 2026-08-07 (Adam).
   Focus outlines on the gallery link wrappers are unchanged and remain the
   keyboard cue. Nothing replaces the hover effect; do not add one back.
   📖 docs/LESSONS.md §L7 — an override masks a rule, it does not remove it.
   ============================================================ */

/* ==========================================================================
   tcs.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   SkyCity — Terms & Conditions block (tcs.css)
   Loaded globally via _Layout.cshtml, AFTER site.css.

   Rendered by Views/Partials/_TermsAndConditions.cshtml at the very
   bottom of a page. Smaller + lighter than the standard `.sc-rte`
   body, with a top border separating it from the content above. The
   partial self-suppresses on empty/<p></p>-only RTE values, so this
   block never renders on its own.

   Static file: plain @media only (never @@media).
   ============================================================ */

.sc-tcs { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,.1); }
.sc-tcs__heading { font-size: 1.0625rem; font-weight: 700; color: var(--sc-text); margin: 0 0 .75rem; }
.sc-tcs__body { font-size: .8125rem; line-height: 1.65; color: rgba(0,0,0,.55); }
.sc-tcs__body p { margin: 0 0 .6rem; }
.sc-tcs__body p:last-child { margin-bottom: 0; }
.sc-tcs__body a { color: var(--sc-gold); text-decoration: underline; text-underline-offset: 2px; }
.sc-tcs__body ul, .sc-tcs__body ol { list-style: revert; padding-left: 1.25rem; margin: 0 0 .6rem; }
.sc-tcs__body li { margin-bottom: .25rem; }

/* ==========================================================================
   forms.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   SkyCity — Umbraco Forms styling (forms.css)
   Loaded globally via _Layout.cshtml, AFTER site.css.

   Styles the DEFAULT Umbraco Forms theme markup (theme="default")
   rendered by Views/Partials/_PageForm.cshtml. The form only ships
   when a page picks one, so these rules are inert elsewhere.

   Two layers, base FIRST then layout (so layout wins on the few
   properties it sets — exactly as when base lived in site.css and
   this file loaded after it):
     1. BASE  — fields, labels, gold focus glow, mandatory asterisks,
                validation, success message, gold submit button.
     2. LAYOUT — contains the form as a left-aligned card, lets inputs
                fill the card, two-up field grid on wider screens.

   Static file: plain @media only (never @@media).
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   LAYER 1 — BASE (was the UMBRACO FORMS block in site.css)
   ════════════════════════════════════════════════════════════ */

.sc-form {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 3rem 40px;
	width: 100%;
	font-family: var(--sc-font);
	color: var(--sc-text);
}

.sc-form__heading {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--sc-text);
	margin: 0 0 1.75rem;
}

/* ── Form shell ── */
.sc-form .umbraco-forms-form { margin: 0; }
.sc-form .umbraco-forms-page { margin: 0; }

.sc-form fieldset,
.sc-form .umbraco-forms-fieldset {
	border: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	min-width: 0;
}

.sc-form legend,
.sc-form .umbraco-forms-caption {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0 0 1rem;
	padding: 0;
}

.sc-form .umbraco-forms-container { display: block; }

/* ── Individual fields ── */
.sc-form .umbraco-forms-field { margin: 0 0 1.25rem; }

.sc-form .umbraco-forms-label,
.sc-form label {
	display: block;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--sc-text);
	margin: 0 0 .4rem;
}

/* Mandatory indicator (default theme adds .mandatory / a *) */
.sc-form .umbraco-forms-field.mandatory .umbraco-forms-label::after,
.sc-form .field-required::after {
	content: " *";
	color: var(--sc-gold);
	font-weight: 700;
}

/* Suppress the default theme's OWN indicator span. The theme renders
   <span class="umbraco-forms-indicator">*</span> inside the label, which
   inherits --sc-dark and shows as a second, BLACK asterisk next to our gold
   ::after above. The gold one (scoped to .mandatory) is the single source of
   truth, so hide the theme's span. They're separate elements (span vs label
   ::after) — hiding the span leaves the gold asterisk untouched. */
.sc-form .umbraco-forms-indicator { display: none; }

.sc-form .umbraco-forms-field-wrapper { display: block; }

/* ── Text inputs / textarea / select ── */
.sc-form input[type="text"],
.sc-form input[type="email"],
.sc-form input[type="tel"],
.sc-form input[type="url"],
.sc-form input[type="number"],
.sc-form input[type="date"],
.sc-form input[type="password"],
.sc-form input.text,
.sc-form textarea,
.sc-form select {
	width: 100%;
	max-width: 540px;
	font-family: var(--sc-font);
	font-size: 1rem;
	color: var(--sc-text);
	background: var(--sc-white);
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 8px;
	padding: .75rem .9rem;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
}

.sc-form textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

.sc-form input:focus,
.sc-form textarea:focus,
.sc-form select:focus {
	outline: none;
	border-color: var(--sc-gold);
	box-shadow: 0 0 0 3px rgba(220,183,65,.25);
}

.sc-form input::placeholder,
.sc-form textarea::placeholder { color: rgba(0,0,0,.4); }

/* ── Radio / checkbox lists ──────────────────────────────────
   Actual markup on this build (confirmed from the DOM):
     <div class="checkboxlist">          (or .radiobuttonlist)
       <div><input type=...><label>…</label></div>   ← one wrapper div per option
       <div><input type=...><label>…</label></div>
     </div>
   Each OPTION is its own wrapper <div>, input-first, with the label
   after it. So we don't touch the input/label order at all — we just
   stack the option wrappers and flex each one: box on the left, label
   on the right, vertically centred. Works identically for both lists. */
.sc-form .checkboxlist,
.sc-form .radiobuttonlist {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* Each option row: [box] [label] */
.sc-form .checkboxlist > div,
.sc-form .radiobuttonlist > div {
	display: flex;
	align-items: center;
	gap: .55rem;
}

.sc-form .checkboxlist label,
.sc-form .radiobuttonlist label {
	display: inline;
	font-weight: 500;
	margin: 0;
	cursor: pointer;
}

/* Box sizing (also covers any standalone checkbox, e.g. Data Consent).
   flex-shrink:0 stops a long label squashing the box. */
.sc-form input[type="radio"],
.sc-form input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	accent-color: var(--sc-gold);
	margin: 0;
}

/* Field help text */
.sc-form .umbraco-forms-tooltip,
.sc-form .help-text,
.sc-form small {
	display: block;
	font-size: .8125rem;
	color: rgba(0,0,0,.55);
	margin-top: .35rem;
}

/* ── Validation ── */
.sc-form .field-validation-error,
.sc-form .validation-summary-errors {
	color: #b3261e;
	font-size: .8125rem;
	font-weight: 600;
	margin-top: .35rem;
}
.sc-form .validation-summary-errors {
	background: rgba(179,38,30,.08);
	border: 1px solid rgba(179,38,30,.3);
	border-radius: 8px;
	padding: .85rem 1rem;
	margin: 0 0 1.5rem;
}
.sc-form .validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }
.sc-form input.input-validation-error,
.sc-form textarea.input-validation-error,
.sc-form select.input-validation-error {
	border-color: #b3261e;
}

/* ── Success message ──
   The default theme renders this as an inline <span> (confirmed from the live
   DOM). Box styles — border/background/radius/padding — on an inline element
   wrap per line-box, so a multi-line message draws a staggered double border
   with the text spilling out. display:block makes it a single clean card. */
.sc-form .umbraco-forms-submitmessage {
	display: block;
	background: rgba(220,183,65,.12);
	border: 1px solid var(--sc-gold);
	border-radius: var(--sc-radius-card);
	padding: 1.5rem 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sc-text);
}

/* ── Submit button — mirror .sc-btn / .sc-btn--gold ── */
.sc-form .umbraco-forms-navigation { margin-top: 1.75rem; }

.sc-form button[type="submit"],
.sc-form input[type="submit"],
.sc-form .umbraco-forms-navigation .btn,
.sc-form .umbraco-forms-navigation input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.75rem;
	border: 2px solid var(--sc-gold);
	border-radius: var(--sc-radius-btn);
	background: var(--sc-gold);
	color: var(--sc-text);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s, background .2s, color .2s, border-color .2s;
	white-space: nowrap;
}

.sc-form button[type="submit"]:hover,
.sc-form input[type="submit"]:hover,
.sc-form .umbraco-forms-navigation .btn:hover {
	opacity: .88;
}

.sc-form button[type="submit"]:focus-visible,
.sc-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--sc-gold);
	outline-offset: 3px;
}

@media (max-width: 1024px) {
	.sc-form { padding: 2.5rem 1.5rem; }
}

@media (max-width: 600px) {
	.sc-form { padding: 2rem 1.5rem; }
	.sc-form__heading { font-size: 1.4rem; }
	.sc-form input[type="text"],
	.sc-form input[type="email"],
	.sc-form input[type="tel"],
	.sc-form input[type="url"],
	.sc-form input[type="number"],
	.sc-form input[type="date"],
	.sc-form input.text,
	.sc-form textarea,
	.sc-form select { max-width: 100%; }
	.sc-form button[type="submit"],
	.sc-form input[type="submit"],
	.sc-form .umbraco-forms-navigation .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   LAYER 2 — LAYOUT (card containment, two-up grid)
   ════════════════════════════════════════════════════════════ */

/* ── Contain the form as a card, left-aligned to the body copy ── */
.sc-form {
	max-width: 820px;
	margin-left: 0;          /* override site.css `margin: 0 auto` so the */
	margin-right: auto;      /* card hugs the left edge of the content column */
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--sc-white);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--sc-radius-card);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}

/* ── Heading with a short gold rule beneath ──────────────── */
.sc-form__heading {
	position: relative;
	padding-bottom: .9rem;
	margin-bottom: 1.9rem;
}
.sc-form__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--sc-gold);
	border-radius: 2px;
}

/* ── Inputs fill their cell (override site.css 540px cap) ──── */
.sc-form input[type="text"],
.sc-form input[type="email"],
.sc-form input[type="tel"],
.sc-form input[type="url"],
.sc-form input[type="number"],
.sc-form input[type="date"],
.sc-form input[type="password"],
.sc-form input.text,
.sc-form textarea,
.sc-form select {
	max-width: 100%;
}

/* ── Two-column field layout on wider screens ────────────────
   The default theme holds all fields as children of
   .umbraco-forms-container. Grid that container so fields pair
   up in source order. Row spacing comes from each field's own
   bottom margin (site.css), so row-gap stays 0.
   NOTE: if the theme nests fields under an extra row/col wrapper
   on this install, move `display:grid` to that wrapper instead. */
@media (min-width: 768px) {
	.sc-form .umbraco-forms-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
		row-gap: 0;
		/* Bottom-align cells so the INPUTS line up across a row even when one
		   field carries a help line (e.g. "Date and time" has a hint, its
		   neighbour doesn't) — without this the commented field pushes its
		   input lower than the field beside it. */
		align-items: end;
	}

	/* Textareas (the default theme's `.longanswer` field) always span the full
	   width of the grid. A textarea is the natural "last item" on most enquiry
	   forms and looks wrong boxed into a half-width cell. */
	.sc-form .umbraco-forms-field.longanswer {
		grid-column: 1 / -1;
	}

	/* No lone half-width field floating in the two-column grid. The very last
	   field, when it lands in an odd (left-column) position — i.e. an odd field
	   count — spans the full width. No `:has()` here, so this rule stands on its
	   own even on an engine that can't parse `:has()`. */
	.sc-form .umbraco-forms-field:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* A short field sitting immediately before a full-width textarea, when it
	   lands in an odd (left-column) position, would otherwise be stranded beside
	   the textarea's new full-width row — so span it full width too. Kept in its
	   OWN rule (NOT grouped with the plain selector above): an engine that can't
	   parse `:has()` drops the whole comma group it appears in, so isolating it
	   stops it taking the orphan rule down with it. Single, non-nested `:has()` —
	   the earlier breakage was a NESTED `:has(... :has(...))`. */
	.sc-form .umbraco-forms-field:nth-child(odd):has(+ .umbraco-forms-field.longanswer) {
		grid-column: 1 / -1;
	}

	/* Radio / checkbox lists read better full width too. The semantic
	   default theme wraps each list in a <fieldset>, so also span any
	   fieldset that is a direct child of the container — this stops the
	   checkbox group being squeezed into a half-width cell (which is what
	   made it look cramped/staggered while the radios rendered cleanly). */
	.sc-form .umbraco-forms-container > fieldset,
	.sc-form .umbraco-forms-field.checkboxlist,
	.sc-form .umbraco-forms-field.radiobuttonlist,
	.sc-form .umbraco-forms-field:has(.checkboxlist),
	.sc-form .umbraco-forms-field:has(.radiobuttonlist) {
		grid-column: 1 / -1;
	}

	/* Standalone SINGLE checkbox fields (Data Consent, single Checkbox) — full width.
	   These render as one <input type=checkbox> in the wrapper, NOT inside a
	   .checkboxlist group, so none of the group rules above catch them and they get
	   squeezed into a half-width cell — e.g. the "I am over 18 and would like to hear
	   from SkyCity Auckland" consent line wrapping into a narrow column. Class-based
	   rule first (works on any engine), then an isolated structural :has() fallback
	   for whatever field-type class the install actually emits. Kept in SEPARATE
	   blocks — never group :has() with a plain selector (§7): an engine that can't
	   parse :has() drops the entire comma group it sits in. */
	.sc-form .umbraco-forms-field.dataconsent,
	.sc-form .umbraco-forms-field.checkbox {
		grid-column: 1 / -1;
	}
	.sc-form .umbraco-forms-field:has(> .umbraco-forms-field-wrapper input[type="checkbox"]):not(:has(.checkboxlist)):not(:has(.radiobuttonlist)) {
		grid-column: 1 / -1;
	}
}

/* ── Submit sits clear of the last field ─────────────────── */
.sc-form .umbraco-forms-navigation {
	margin-top: 2rem;
}

/* ── Mobile: card goes edge-to-edge so it never feels cramped ── */
@media (max-width: 600px) {
	.sc-form {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		box-shadow: none;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* ── Pop-up enquiry form (native <dialog>) ───────────────────── */
.sc-form-dialog {
	width: min(640px, calc(100vw - 2rem));
	max-height: 90vh;
	padding: 0;                  /* padding lives on the inner scroll wrapper now */
	border: 0;
	border-radius: var(--sc-radius-card);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	position: relative;
	overflow: hidden;            /* clip the inner scrollbar so the rounded corners stay clean */
}
/* A native <dialog> is display:none until opened (showModal() sets [open]). That
   hide comes from the UA stylesheet, and ANY author `display` on the element beats
   it regardless of specificity — so putting `display:flex` on the base rule above
   made the CLOSED dialog render in normal flow: the form appeared stranded at the
   foot of the page even with the pop-up toggle on. Scope the flex layout to the
   open state and keep the closed state hidden, so the form shows only once the
   hero CTA calls showModal(). */
.sc-form-dialog:not([open]) { display: none; }
.sc-form-dialog[open] { display: flex; flex-direction: column; }
.sc-form-dialog::backdrop { background: rgba(0, 0, 0, .6); }

/* Inner scroll region — THIS scrolls, not the <dialog>. Keeping scroll off the
   dialog means: (a) the dialog's overflow:hidden + border-radius clip the
   scrollbar to the rounded corners (no squared-off edge beside the scrollbar),
   and (b) the absolutely-positioned close button is pinned to the dialog and
   never scrolls away. min-height:0 lets the flex child shrink so overflow kicks
   in; scrollbar-gutter reserves the lane so content doesn't jump when it appears. */
.sc-form-dialog__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 2.75rem 1.75rem 2rem;
	scrollbar-gutter: stable;
}

.sc-form-dialog__close {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 3;                  /* above the scroll region and its scrollbar */
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--sc-white);  /* solid chip so it reads as intentional over content/scrollbar */
	color: var(--sc-text);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
	cursor: pointer;
}
.sc-form-dialog__close:hover { background: #f4f4f4; }

/* ==========================================================================
   promo.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   SkyCity — Promo Tools (promo.css)
   Loaded globally via _Layout.cshtml, AFTER forms.css.

   Per-page pop-up dialog (.sc-promo-popup) + countdown bar
   (.sc-countdown). Pop-up reuses the generic <dialog> handler
   in site.js; cookie-gating + auto-open + analytics live in the
   two promo IIFEs appended to site.js.

   Static file: plain @media only (never @@media).
   ============================================================ */

/* ── Pop-up dialog ───────────────────────────────────────── */
.sc-promo-popup {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(90vw, 760px);
	width: 100%;
	overflow: visible;
}
.sc-promo-popup::backdrop { background: rgba(0,0,0,.72); }

.sc-promo-popup__media {
	display: block;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.45);
	line-height: 0;
}
a.sc-promo-popup__media { cursor: pointer; }

.sc-promo-popup__media img,
.sc-promo-popup__media video {
	display: block;
	width: 100%;
	height: auto;
}

.sc-promo-popup__close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--sc-gold);
	color: var(--sc-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.35);
	transition: background .2s ease;
	z-index: 1;
}
.sc-promo-popup__close:hover { background: #b58b2f; }
.sc-promo-popup__close .material-symbols-outlined { font-size: 24px; }

/* ── Breadcrumb offset ────────────────────────────────
   MOVED to site.css 2026-09-01, beside the body padding-top rules that
   consume it. The rule that stood here excluded .sc-hotel-brand, which
   left The Grand and Poker (neither brand sheet sets the variable)
   reserving nothing and hiding 49.19px of hero behind the nav band.
   Do not reintroduce a copy here — site.css owns this variable. */

/* ── Countdown bar ───────────────────────────────────────── */
.sc-countdown {
	background: var(--sc-plum);
	color: var(--sc-white);
	/* Establish a stacking context above brand decorations (e.g. the fixed
	   hotel arc at z-index:99) and any hero that bleeds up over it (casino,
	   restaurant). Kept below the nav (1000) so it still tucks away on scroll. */
	position: relative;
	z-index: 990;
}
.sc-countdown__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 8px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	flex-wrap: wrap;
	font-size: .9375rem;
}
.sc-countdown__label {
	font-weight: 600;
	letter-spacing: .02em;
}
.sc-countdown__time {
	font-weight: 700;
	color: var(--sc-gold);
	font-variant-numeric: tabular-nums;
}
.sc-countdown__expired {
	font-weight: 600;
	color: var(--sc-gold);
}

/* ── Countdown bar — hotel pin ───────────────────────────────
   On hotel pages and hotel sub-pages the countdown bar must not scroll away
   behind the fixed nav (the brand layout/arc made the half-scrolled tuck look
   broken). Pin it to the bottom of the nav stack with sticky so it stays put
   while the page scrolls under it. Sticky keeps it in flow, so no spacer or
   padding compensation is needed; `top` mirrors the body padding-top so it
   locks flush beneath the (transparent) breadcrumb row. Scoped via
   body.sc-brand--hotels (set in _Layout from brandSheetDir) so it covers all
   current + future hotels and their room pages, but not branded venues.
   html/body don't clip overflow, so sticky is safe here. Drop the scope to
   apply site-wide. */
body.sc-brand--hotels .sc-countdown {
	position: sticky;
	top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-breadcrumb-height) + var(--sc-r20-height));
}

@media (max-width: 600px) {
	.sc-promo-popup { max-width: 94vw; }
	.sc-promo-popup__close { width: 38px; height: 38px; top: -14px; right: -14px; }
	.sc-promo-popup__close .material-symbols-outlined { font-size: 20px; }
	.sc-countdown__inner { padding: 7px 16px; font-size: .875rem; }
}

/* ============================================================
   VENUE NOTICE BAR (.sc-venue-notice) — added 2026-07-16

   Rendered by _VenueNotice.cshtml from _Layout, immediately
   above _PromoTools and below the breadcrumb. Operational
   notices only: "closed this evening for a private function",
   "kitchen closed, bar open", "closed for maintenance".

   Lives here rather than in its own stylesheet because it is
   structurally a sibling of the countdown bar (same in-flow
   slot, same stacking problem, same breadcrumb offset fix
   above) and promo.css already loads globally — a new sheet
   would mean another _Layout <link>. NOTE the naming mismatch:
   a venue notice is not a promo.

   Deliberately NOT sticky, unlike the hotel countdown pin: a
   closure notice is read once at load, and two sticky bars at
   the same `top` would overlap.

   Distinct from the RED Site Alert (_SiteAlert, inside the
   fixed header) by surface AND position — plum in page flow vs
   red in the header. Do not restyle toward red; the two must
   stay visually separable when both fire at once.

   Static file: plain @media only (never @@media).
   ============================================================ */
.sc-venue-notice {
	background: var(--sc-plum);
	color: var(--sc-white);
	/* Gold hairline gives a deliberate seam against the breadcrumb
	   above, so the bar doesn't read as a second alert. */
	border-top: 2px solid var(--sc-gold);
	/* Match .sc-countdown: above brand decorations (the fixed hotel
	   arc sits at z-index 99) and heroes that bleed up over it, but
	   below the nav (1000) so it still scrolls away. */
	position: relative;
	z-index: 990;
}
.sc-venue-notice__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 10px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
}
.sc-venue-notice__icon {
	font-size: 20px;
	/* Gold on plum is legible; gold is confined to the icon + top
	   border, message text stays white per the master-brand rule. */
	color: var(--sc-gold);
	flex-shrink: 0;
}
.sc-venue-notice__text {
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .01em;
}

@media (max-width: 600px) {
	/* Long notices wrap on mobile — centring an icon against a
	   ragged multi-line block looks broken, so left-align and pin
	   the icon to the first line. */
	.sc-venue-notice__inner {
		padding: 9px 16px;
		justify-content: flex-start;
		align-items: flex-start;
		gap: .5rem;
	}
	.sc-venue-notice__icon { font-size: 18px; }
	.sc-venue-notice__text { font-size: .875rem; }
}

/* ==========================================================================
   sitemap.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   SkyCity Auckland — Sitemap page
   sitemap.css
   Branch-line tree styling for the human-readable /sitemap page
   (doc type: sitemapPage). Extracted from the SitemapPage.cshtml
   inline <style> block.
   ============================================================ */

.sc-sitemap-page {
	padding: calc(var(--sc-nav-height) + 56px) 0 96px;
	min-height: 60vh;
	background: var(--sc-bg);
}

.sc-sitemap-inner {
	max-width: 800px;
}

.sc-sitemap-header {
	margin-bottom: 48px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--sc-gold);
}

.sc-sitemap-title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	color: var(--sc-text);
	margin: 0 0 10px;
	letter-spacing: -0.02em;
}

.sc-sitemap-intro {
	font-size: 1rem;
	color: #666;
	margin: 0;
}

.sc-sitemap-tree {
	position: relative;
}

.sc-sitemap-root {
	margin-bottom: 4px;
}

.sc-sitemap-root-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--sc-text);
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.2s;
}

.sc-sitemap-root-link:hover { color: var(--sc-gold); }

.sc-sitemap-root-link .material-symbols-outlined {
	font-size: 20px;
	color: var(--sc-gold);
}

.sc-sitemap-branch {
	position: relative;
	padding-left: 24px;
}

.sc-sitemap-branch::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #d8d0c4;
}

.sc-sitemap-branch--last::before {
	bottom: auto;
	height: 20px;
}

.sc-sitemap-branch::after {
	content: '';
	position: absolute;
	left: 0;
	top: 20px;
	width: 18px;
	height: 1px;
	background: #d8d0c4;
}

.sc-sitemap-node--section {
	padding: 6px 0 6px 8px;
}

.sc-sitemap-link--section {
	font-size: 1rem;
	font-weight: 700;
	color: var(--sc-text);
}

.sc-sitemap-children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-sitemap-child {
	position: relative;
}

.sc-sitemap-child--d1 { padding-left: 20px; }
.sc-sitemap-child--d2 { padding-left: 40px; }
.sc-sitemap-child--d3 { padding-left: 60px; }
.sc-sitemap-child--d4 { padding-left: 80px; }

.sc-sitemap-child::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e0d8d0;
}

.sc-sitemap-child--d1::before { left: 0; }
.sc-sitemap-child--d2::before { left: 20px; }
.sc-sitemap-child--d3::before { left: 40px; }
.sc-sitemap-child--d4::before { left: 60px; }

.sc-sitemap-child--last::before {
	bottom: auto;
	height: 16px;
}

.sc-sitemap-child::after {
	content: '';
	position: absolute;
	top: 16px;
	width: 14px;
	height: 1px;
	background: #e0d8d0;
}

.sc-sitemap-child--d1::after { left: 0; }
.sc-sitemap-child--d2::after { left: 20px; }
.sc-sitemap-child--d3::after { left: 40px; }
.sc-sitemap-child--d4::after { left: 60px; }

.sc-sitemap-link {
	display: inline-block;
	padding: 5px 4px;
	font-size: 0.9375rem;
	color: var(--sc-text);
	text-decoration: none;
	transition: color 0.15s;
}

.sc-sitemap-link:hover {
	color: var(--sc-gold);
}

.sc-sitemap-link--no-url {
	color: #999;
	cursor: default;
}

.sc-sitemap-link--no-url:hover {
	color: #999;
}

.sc-sitemap-child--d1 .sc-sitemap-link { font-size: 0.9375rem; }
.sc-sitemap-child--d2 .sc-sitemap-link { font-size: 0.875rem;  color: #444; }
.sc-sitemap-child--d3 .sc-sitemap-link { font-size: 0.8125rem; color: #666; }
.sc-sitemap-child--d4 .sc-sitemap-link { font-size: 0.8125rem; color: var(--sc-text); }

.sc-sitemap-child--d2 .sc-sitemap-link:hover,
.sc-sitemap-child--d3 .sc-sitemap-link:hover,
.sc-sitemap-child--d4 .sc-sitemap-link:hover { color: var(--sc-gold); }

@media (max-width: 600px) {
	.sc-sitemap-page { padding-top: calc(var(--sc-nav-height) + 32px); }
	.sc-sitemap-child--d2 { padding-left: 32px; }
	.sc-sitemap-child--d3 { padding-left: 48px; }
	.sc-sitemap-child--d4 { padding-left: 64px; }
	.sc-sitemap-child--d2::before { left: 16px; }
	.sc-sitemap-child--d3::before { left: 32px; }
	.sc-sitemap-child--d4::before { left: 48px; }
	.sc-sitemap-child--d2::after { left: 16px; }
	.sc-sitemap-child--d3::after { left: 32px; }
	.sc-sitemap-child--d4::after { left: 48px; }
}

/* ==========================================================================
   hero.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================
   SkyCity Auckland — Hero Page
   hero.css
   Block Grid content builder, contextual nav, age gate, hero tier.
   STATIC FILE — plain @media only (never @@media). Loads AFTER site.css.
   Reuses site.css components (.sc-rte / .sc-btn / .sc-gallery /
   .sc-flex-grid / .sc-menus / .sc-faq / .sc-section / .sc-container).
   ============================================================ */

/* ── Hero detail tier (600px) — neutral class, not coupled to Sky Tower ── */
.sc-hero--hero { min-height: 600px; }
@media (max-width: 600px) { .sc-hero--hero { min-height: 460px; } }

/* ── Intro blurb ───────────────────────────────────────────── */
.sc-hero-intro { max-width: 80ch; }

/* ============================================================
   BLOCK GRID — wrapper, bands, padding
   ============================================================ */
.sc-blk { padding-block: 1.5rem; }

/* Optional per-block vertical padding (blockSettings.paddingY) */
.sc-blk--pad-s { padding-block: 0.5rem; }
.sc-blk--pad-m { padding-block: 3rem; }
.sc-blk--pad-l { padding-block: 6rem; }

/* Optional background bands (blockSettings.background) */
.sc-blk--bg-grey { background: #f4f4f4; }
.sc-blk--bg-dark { background: var(--sc-plum); color: var(--sc-white); }
.sc-blk--bg-gold { background: var(--sc-gold); color: var(--sc-text); }

/* Readability on dark/gold bands — force colours, never assume inheritance.
   (Same lesson as the What's On R20 dark block.) */
.sc-blk--bg-dark .sc-rte,
.sc-blk--bg-dark .sc-rte p,
.sc-blk--bg-dark .sc-rte li,
.sc-blk--bg-dark .sc-rte h2,
.sc-blk--bg-dark .sc-rte h3,
.sc-blk--bg-dark .sc-rte h4,
.sc-blk--bg-dark .sc-blk-heading__title,
.sc-blk--bg-dark .sc-blk-heading__sub,
.sc-blk--bg-dark .sc-blk-image__caption,
.sc-blk--bg-dark .sc-blk-gallery__caption,
.sc-blk--bg-dark .sc-blk-video__caption { color: var(--sc-white); }
.sc-blk--bg-dark .sc-rte a:not(.sc-btn) { color: var(--sc-gold); }

/* Dark-band menus (The District's MENUS band depends on this) */
.sc-blk--bg-dark .sc-menus,
.sc-blk--bg-dark .sc-menus__heading,
.sc-blk--bg-dark .sc-menus__note,
.sc-blk--bg-dark .sc-menus__category-title,
.sc-blk--bg-dark .sc-menus__category-subtitle { color: var(--sc-white); }
.sc-blk--bg-dark .sc-menus__link { color: var(--sc-white); }
.sc-blk--bg-dark .sc-menus__link:hover { color: var(--sc-gold); }

/* Gold band */
.sc-blk--bg-gold .sc-rte,
.sc-blk--bg-gold .sc-rte p,
.sc-blk--bg-gold .sc-rte li,
.sc-blk--bg-gold .sc-blk-heading__title,
.sc-blk--bg-gold .sc-blk-heading__sub { color: var(--sc-text); }
.sc-blk--bg-gold .sc-blk-heading__eyebrow { color: var(--sc-text); }
.sc-blk--bg-gold .sc-rte a:not(.sc-btn) { color: var(--sc-text); text-decoration: underline; }

/* ── Alignment helpers (rich text / heading / buttons) ───────── */
.sc-blk--align-center { text-align: center; }
.sc-blk--align-right { text-align: right; }
.sc-blk--align-center .sc-blk-heading__sub { margin-left: auto; margin-right: auto; }

/* ============================================================
   ROW / COLUMNS (blockRow)
   ============================================================ */
.sc-blk-row {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
@media (min-width: 1024px) { .sc-blk-row { padding: 0 40px; } }

@media (min-width: 768px) {
	.sc-blk-row--50-50 { grid-template-columns: 1fr 1fr; }
	.sc-blk-row--60-40 { grid-template-columns: 3fr 2fr; }
	.sc-blk-row--40-60 { grid-template-columns: 2fr 3fr; }
	.sc-blk-row--70-30 { grid-template-columns: 7fr 3fr; }
	.sc-blk-row--30-70 { grid-template-columns: 3fr 7fr; }
	.sc-blk-row--33-33-33 { grid-template-columns: 1fr 1fr 1fr; }
	.sc-blk-row--3col { grid-template-columns: repeat(3, 1fr); }
	/* 4-col: 2-up on tablet (avoids cramped columns); full 4-up at desktop (below) */
	.sc-blk-row--4col { grid-template-columns: repeat(2, 1fr); }
}

/* 4-column rows reach full 4-up only at desktop width */
@media (min-width: 1024px) {
	.sc-blk-row--4col { grid-template-columns: repeat(4, 1fr); }
}

/* Inside a column, neutralise nested container gutters / max-width so blocks
   fill the column cleanly (no double gutters from recursion). */
.sc-blk-col .sc-container { max-width: none; padding-left: 0; padding-right: 0; }
.sc-blk-col .sc-blk-row { max-width: none; padding-left: 0; padding-right: 0; }
.sc-blk-col .sc-blk { padding-block: 0.75rem; }
.sc-blk-col > .sc-blk:first-child { padding-top: 0; }

/* ============================================================
   RICH TEXT (blockRichText)
   ============================================================ */
.sc-blk-rte { max-width: 80ch; }
.sc-blk-rte.sc-blk--align-center { margin-left: auto; margin-right: auto; }

/* ============================================================
   HEADING (blockHeading)
   ============================================================ */
.sc-blk-heading__eyebrow {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sc-plum);
	margin-bottom: .5rem;
}
.sc-blk-heading__title { font-size: 1.75rem; font-weight: 800; margin: 0 0 .5rem; line-height: 1.2; }
.sc-blk-heading__sub { font-size: 1.05rem; color: rgba(0,0,0,.6); margin: 0; max-width: 60ch; }

/* ============================================================
   IMAGE (blockImage)
   ============================================================ */
.sc-blk-image-wrap--full { width: 100%; }
.sc-blk-image { margin: 0; }
.sc-blk-image__img { display: block; width: 100%; height: auto; border-radius: var(--sc-radius-card); }
.sc-blk-image-wrap--full .sc-blk-image__img { border-radius: 0; }
.sc-blk-image__caption { margin: .6rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); text-align: center; }

/* Uniform card images — equal-height rows in card grids.
   Scoped to row columns (.sc-blk-col) so standalone images (the car-park map,
   full-bleed blocks) keep their natural ratio. object-fit:cover centre-crops
   each photo into a common 4:3 frame; reserving caption height keeps the card
   bottoms aligned when a label wraps to two lines. */
.sc-blk-row .sc-blk-col .sc-blk-image__img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}
.sc-blk-row .sc-blk-col .sc-blk-image__caption { min-height: 2.6em; }

/* ============================================================
   GALLERY (blockGallery) — grid reuses .sc-gallery from site.css
   ============================================================ */
.sc-blk-gallery__caption { margin: .75rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); }

/* ============================================================
   VIDEO (blockVideo) — responsive 16:9 facade iframe
   ============================================================ */
.sc-blk-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: #000;
}
.sc-blk-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sc-blk-video__caption { margin: .6rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); text-align: center; }

/* ============================================================
   BUTTONS (blockButtons)
   ============================================================ */
.sc-blk-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.sc-blk-buttons.sc-blk--align-center { justify-content: center; }
.sc-blk-buttons.sc-blk--align-right { justify-content: flex-end; }

/* ============================================================
   CARD GRID (blockCards) — reuses _PageTiles / .sc-flex-grid
   columns is a soft hint; cols-2 narrows the band so 2-up sits centred.
   ============================================================ */
.sc-blk-cards__heading { font-size: 1.5rem; font-weight: 800; margin: 0; }
.sc-blk-cards--cols-2 { max-width: 920px; margin-inline: auto; }

/* ============================================================
   EMBED (blockEmbed) — URL mode (raw code mode sizes itself)
   ============================================================ */
.sc-blk-embed {
	position: relative;
	width: 100%;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: #000;
}
.sc-blk-embed--16-9 { aspect-ratio: 16 / 9; }
.sc-blk-embed--4-3 { aspect-ratio: 4 / 3; }
.sc-blk-embed--1-1 { aspect-ratio: 1 / 1; }
.sc-blk-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sc-blk-embed-raw { width: 100%; }

/* ============================================================
   SPACER / DIVIDER (blockSpacer)
   ============================================================ */
.sc-blk-spacer { display: flex; align-items: center; }
.sc-blk-spacer--s { height: 1rem; }
.sc-blk-spacer--m { height: 2.5rem; }
.sc-blk-spacer--l { height: 5rem; }
.sc-blk-spacer__rule { width: 100%; border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 0; }
.sc-blk--bg-dark .sc-blk-spacer__rule { border-top-color: rgba(255,255,255,.18); }

/* ============================================================
   CONTEXTUAL NAV (_ContextualNav)
   ============================================================ */
.sc-ctxnav { background: var(--sc-white); border-bottom: 1px solid rgba(0,0,0,.1); }
.sc-ctxnav--sticky { position: sticky; top: var(--sc-nav-height); z-index: 500; }
.sc-ctxnav__inner {
	display: flex;
	gap: .25rem;
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.sc-ctxnav__inner::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .sc-ctxnav__inner { padding: 0 40px; } }
.sc-ctxnav__link {
	display: inline-block;
	white-space: nowrap;
	padding: 1rem .9rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-text);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .2s, border-color .2s;
}
.sc-ctxnav__link:hover { color: var(--sc-plum); }
.sc-ctxnav__link.is-active { color: var(--sc-plum); border-bottom-color: var(--sc-gold); }

/* ============================================================
   AGE GATE (_AgeGate) — blocking dialog, SkyCity palette (gold confirm)
   ============================================================ */
.sc-agegate {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	color: var(--sc-white);
}
.sc-agegate::backdrop { background: rgba(10,10,10,.78); backdrop-filter: blur(6px); }
.sc-agegate__panel {
	background: var(--sc-plum);
	color: var(--sc-white);
	border: 1px solid var(--sc-gold);
	border-radius: var(--sc-radius-card);
	padding: 2.5rem 2rem;
	width: min(440px, calc(100vw - 2rem));
	text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.sc-agegate__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; color: var(--sc-white); }
.sc-agegate__body { color: rgba(255,255,255,.85); margin-bottom: 1.75rem; }
.sc-agegate__body p { margin: 0 0 .75rem; }
.sc-agegate__body p:last-child { margin-bottom: 0; }
.sc-agegate__actions { display: flex; flex-direction: column; gap: .75rem; }
.sc-agegate__actions .sc-btn { width: 100%; justify-content: center; }

.sc-agegate[open] { animation: scAgeGateIn .25s ease; }
@keyframes scAgeGateIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sc-agegate[open] { animation: none; }
}

/* ============================================================
   FEATURE CARD (featureCard) — Content Builder promo card
   White surface so text stays legible on any .sc-blk band.
   --top mirrors the homepage "Luxury Hotels" cards; --left the
   "Dining & Experiences" media object. Whole face is a stretched
   link when a link is set (CLAUDE §4); plain card when not.
   ============================================================ */
.sc-feature-card {
	position: relative;                 /* containing block for the stretch overlay */
	display: flex;
	flex-direction: column;
	height: 100%;                       /* fill a stretched row column so a row is equal-height */
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	color: var(--sc-text);
	transition: box-shadow .25s, transform .25s;
}
/* Hover lift only when the card actually links somewhere */
.sc-feature-card--link:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); transform: translateY(-2px); }

.sc-feature-card__figure { margin: 0; overflow: hidden; background: #f4f4f4; }
.sc-feature-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }

.sc-feature-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: .5rem; padding: 1.25rem; }
.sc-feature-card__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-plum); }
.sc-feature-card__heading { font-family: var(--sc-font); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; margin: 0; color: var(--sc-text); }
.sc-feature-card__summary { font-size: .9rem; line-height: 1.6; color: rgba(51,51,51,.9); margin: 0; }

/* Decorative gold pill — the stretch link owns the click, so it must never intercept */
.sc-feature-card__cta {
	align-self: flex-start;
	margin-top: .35rem;
	pointer-events: none;
	display: inline-block;
	padding: .5rem 1.25rem;
	background: var(--sc-gold);
	color: var(--sc-white);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--sc-radius-btn);
}
.sc-feature-card--link:hover .sc-feature-card__cta { background: var(--sc-gold-80); }

/* Stretched link — the <a> itself is taken OUT OF FLOW. Left in flow it became a
   grid item in --left and displaced the image into the right-hand column. */
.sc-feature-card__stretch { position: absolute; inset: 0; z-index: 1; }
.sc-feature-card__stretch:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: -2px; }

/* --top: vertical — image (~3/2) then body */
.sc-feature-card--top .sc-feature-card__figure { aspect-ratio: 3 / 2; }

/* --left: image left / text right (~40/60) at ≥768px; stacks image-top below */
.sc-feature-card--left .sc-feature-card__figure { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
	.sc-feature-card--left { display: grid; grid-template-columns: 2fr 3fr; align-items: stretch; }
	.sc-feature-card--left .sc-feature-card__figure { aspect-ratio: auto; height: 100%; }
	.sc-feature-card--left .sc-feature-card__body { justify-content: center; padding: 1.75rem; }
}

/* Equal-height: a row of feature cards fills to the tallest column. The block row
   is a grid with align-items:start, so opt just the card columns into stretch and
   pass height down through the block wrappers. Each :has() stays in its own rule. */
.sc-blk-row .sc-blk-col:has(.sc-feature-card) { align-self: stretch; }
.sc-blk-col:has(.sc-feature-card) > .sc-blk { height: 100%; }
.sc-blk-col:has(.sc-feature-card) > .sc-blk > .sc-container { height: 100%; }

/* ============================================================
   IMAGE-LINK HOVER — CARD LIFT SUPPRESSION (Content Builder feature cards,
   2026-07-03) Matches site.css: no lift, no drop shadow on hover. The
   feature card has no resting shadow (border only), so the hover shadow is
   removed outright. The stretch-link keeps its own focus outline (a11y).
   🔴 The image half was DELETED 2026-08-07 (Adam) — both the zoom above and
   the `opacity: .85` fade that had merely MASKED it. Feature-card images now
   have no hover treatment. 📖 docs/LESSONS.md §L7.
   ============================================================ */
.sc-feature-card--link:hover {
	transform: none;
	box-shadow: none;
}


/* ============================================================
   TRUSTEE PROFILE CARDS (Community Trust — AKL / HAM / QTN, 2026-08-12)
   ------------------------------------------------------------
   One blockRow per trustee: portrait in col1, name + bio in col2.
   Scoped ENTIRELY under [id^="trustee-"], which comes from the block's
   own blockSettings.anchorId — so nothing here can reach another
   Content Builder row on any other page.

   🔴 SPECIFICITY, DELIBERATE: the portrait rule below repeats
   `.sc-blk-row .sc-blk-col` purely to beat the 4:3 card rule at line ~143
   (0,3,1). A shorter `[id^="trustee-"] .sc-blk-image__img` is (0,2,1) and
   LOSES — the portraits would silently render 4:3 landscape and look like
   a design choice. No !important is needed: (0,4,1) wins on merit.

   🔴 The image block emits NO object-position — verified on rendered pages
   2026-08-12 (30 blockImages across two live pages, none carrying a style
   attribute). Media focal points therefore do NOT reach this crop, so the
   framing below is set here or it is dead centre. See docs/REFERENCE.md.
   ============================================================ */

/* Card box. Sits on .sc-blk-row because that element already carries the
   row's horizontal padding, so the border lands outside a sensible inset.
   padding-block is stated at (0,2,1) so it survives the `padding: 0 40px`
   shorthand at line 82, which would otherwise reset it to 0 at >=1024px. */
[id^="trustee-"] .sc-blk-row {
	padding-block: 1.5rem;
	border: 1px solid var(--sc-plum-20);
	border-radius: var(--sc-radius-card);
	align-items: start;
}

/* Portrait-left proportions. Plain @media — hero.css is a static file. */
@media (min-width: 768px) {
	[id^="trustee-"] .sc-blk-row--50-50 {
		grid-template-columns: minmax(0, 220px) 1fr;
	}
}

/* Lone column — _ContentBlocks skips an empty area, so a row with the photo
   removed emits a single .sc-blk-col that would otherwise sit in the 220px
   portrait track. In its OWN rule: an engine that cannot parse :has() must
   drop only this, never a neighbour. */
[id^="trustee-"] .sc-blk-row:has(> .sc-blk-col:only-child) {
	grid-template-columns: 1fr;
}

/* The portrait itself. 4/5 is the forgiving portrait ratio. 220px cap also
   governs <768px, where the row collapses to one column and the image would
   otherwise go full width.

   🔴 object-position is CENTRE, and that was MEASURED, not defaulted — do not
   re-introduce an upward bias. All 19 trustee sources were measured 2026-08-12:
   18 are portrait (almost all exactly 2:3, 0.667) and ONE is landscape
   (Michelle Baillie, 400x276). Rendering every source into this 220x275 box at
   both 30% and 50% showed centre better composed on every portrait — an upward
   bias just opens dead headroom and eats the torso, because these are already
   professionally framed headshots.

   ⚠️ And the premise for a bias was wrong anyway: with object-fit:cover, a
   source WIDER than the box is cropped on the SIDES, so the vertical component
   does nothing at all to it. Michelle Baillie renders pixel-identical at 30%
   and 50%. Vertical position only ever affects sources TALLER than 4:5 — and
   for those, centre is right. */
[id^="trustee-"] .sc-blk-row .sc-blk-col .sc-blk-image__img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 50%;
}
[id^="trustee-"] .sc-blk-col .sc-blk-image {
	max-width: 220px;
}

/* <768px the row collapses to one column, so the 220px-capped FIGURE sits flush
   left in a full-width column and leaves dead space beside it. Centre it.

   🔴 The element is the FIGURE, and that was measured, not assumed — the two
   obvious candidates are both wrong:
     · `.sc-blk-image__img` is `width:100%` of the figure, so it ALREADY fills its
       220px parent exactly. max-width/margin-inline on it is a no-op — the dead
       space is outside the img, in the figure.
     · `.sc-blk-col` is the grid item and already spans the row symmetrically.
   Measured in-page at a simulated 390px phone: col 260px (41px each side, even),
   figure 220px at 41px left / 81px right — a 60px right-hand gap. Only the figure
   is the off-centre box.

   Beats `.sc-blk-image { margin: 0 }` (0,1,0) on specificity at (0,2,1); no
   !important. Crop is untouched — object-position stays 50% 50%. */
@media (max-width: 767px) {
	[id^="trustee-"] .sc-blk-col .sc-blk-image {
		margin-inline: auto;
	}
}

/* Captions are deliberately blank on these cards (blank caption => alt="",
   the correct WCAG treatment when adjacent text names the person), so the
   reserved caption height from line ~148 must not open a gap. */
[id^="trustee-"] .sc-blk-row .sc-blk-col .sc-blk-image__caption {
	min-height: 0;
}

/* Name + affiliation. The name is an <h3> inside blockRichText. */
[id^="trustee-"] .sc-blk-rte h3 {
	margin: 0 0 .35rem;
	font-size: 1.25rem;
	line-height: 1.25;
}

/* Affiliation line — a paragraph that is nothing but an <em> (iwi, pepeha).
   Own rule, :has() again. */
[id^="trustee-"] .sc-blk-rte p:has(> em:only-child) {
	margin: 0 0 .75rem;
	color: var(--sc-plum);
	font-size: .9375rem;
}

/* ==========================================================================
   corporate.css — merged into site.css 2026-09-25 (was a separate <link>; same order,
   same cascade). Hotel brand sheets and venues/poker.css stay separate.
   ========================================================================== */

/* ============================================================================
   corporate.css — SkyCity group landing site (skycity.co.nz)
   Minimal-chrome pages only: logo-only header + full-viewport property tiles.
   STATIC FILE — plain @media only (never @@media). Uses design tokens from
   site.css :root; no hardcoded brand hexes.
   Scoped entirely to .sc-body--minimal / .sc-minhead / .sc-ptiles, so loading
   this sheet on standard pages is inert.
   ============================================================================ */

/* --- Body: kill the fixed-nav padding-top (the minimal header is static) ---- */
.sc-body--minimal { padding-top: 0 !important; }

/* --- Logo-only header ------------------------------------------------------- */
.sc-minhead {
	background: var(--sc-white);
	padding: 1.5rem 1.25rem;
	border: 0;
}

.sc-minhead__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sc-minhead__logo {
	display: inline-flex;
	line-height: 0;
}

.sc-minhead__logo img {
	display: block;
	width: auto;
	height: 42px;
	max-width: 100%;
}

/* --- Property tiles: 4-up, fills the viewport below the header -------------- */
.sc-ptiles {
	background: var(--sc-plum);
}

.sc-ptiles__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	min-height: calc(100vh - 92px);
	gap: 0;
}

.sc-ptiles__tile {
	position: relative;
	overflow: hidden;
	min-height: 62vh;
	background: var(--sc-plum);
}

.sc-ptiles__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 2.5rem 2rem 3rem;
	overflow: hidden;
	color: var(--sc-white);
	text-decoration: none;
}

/* Image layer — separate element so it can scale on hover without moving text */
.sc-ptiles__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--tile-img);
	background-size: cover;
	background-position: var(--tile-pos, 50% 50%);
	background-repeat: no-repeat;
	transition: transform .6s ease, filter .6s ease;
}

/* Dark scrim over the image for label legibility (bottom-weighted) */
.sc-ptiles__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .72) 0%,
		rgba(0, 0, 0, .38) 34%,
		rgba(0, 0, 0, .05) 62%,
		rgba(0, 0, 0, 0) 100%
	);
}

.sc-ptiles__body {
	position: relative;
	z-index: 2;
	display: block;
}

.sc-ptiles__label {
	margin: 0 0 .6rem;
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
	line-height: 1.1;
	color: var(--sc-white);
	text-wrap: balance;
}

.sc-ptiles__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--sc-font);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-gold);
}

.sc-ptiles__more .material-symbols-outlined {
	font-size: 1.25rem;
	transition: transform .3s ease;
}

/* Hover — arrow nudge only.
   🔴 The tile-image `transform: scale(1.05)` + `filter: brightness(1.08)`
   were DELETED 2026-08-07 (Adam): image hover effects are removed site-wide,
   and these two were survivors only because no override block ever reached
   corporate.css. The arrow nudge is not an image effect and stays. */
.sc-ptiles__link:hover .sc-ptiles__more .material-symbols-outlined,
.sc-ptiles__link:focus-visible .sc-ptiles__more .material-symbols-outlined {
	transform: translateX(4px);
}

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

/* --- Responsive: 2-up on tablet, stacked on mobile ------------------------- */
@media (max-width: 960px) {
	.sc-ptiles__grid {
		grid-template-columns: repeat(2, 1fr);
		min-height: 0;
	}
	.sc-ptiles__tile { min-height: 50vh; }
}

@media (max-width: 560px) {
	.sc-ptiles__grid { grid-template-columns: 1fr; }
	.sc-ptiles__tile { min-height: 56vw; }
	.sc-ptiles__link { padding: 2rem 1.5rem 2.25rem; }
}

/* --- Reduced motion: no scale/brightness/nudge transitions ------------------ */
@media (prefers-reduced-motion: reduce) {
	.sc-ptiles__link::before,
	.sc-ptiles__more .material-symbols-outlined {
		transition: none;
	}
	/* The ::before hover overrides that used to sit here were deleted with the
	   effect itself 2026-08-07 — left in place they would have ADDED a
	   brightness hover for reduced-motion users only. */
	.sc-ptiles__link:hover .sc-ptiles__more .material-symbols-outlined,
	.sc-ptiles__link:focus-visible .sc-ptiles__more .material-symbols-outlined {
		transform: none;
	}
}