/* ============================================================================
   Benise - whitelabel theme (tickets.benise.com)
   Copyright 2005-Present, ITS MY SEAT INC.
   Created 2026-10-21. Matches the client's own site (benise.com): black stage,
   silver Trajan-style capitals (Cinzel stands in for their Typekit Trajan),
   one crimson accent, crown-B crest logo (silver on transparent). Raleway body,
   as on benise.com; Cormorant Garamond italic for the odd flourish.
   Loaded LAST on the event pages (IMSSiteTemplates getSiteThemeHeadHTML hook)
   and by the front page (BeniseSiteTemplates.createClientFrontPageBody).
   RULES: restyle only - never change layout the page scripts depend on
   (ticket tables, seat map).
   ============================================================================ */

:root {
	--bn-black: #070505;
	--bn-ink: #0d0a0a;
	--bn-panel: #171213;
	--bn-panel-2: #201819;
	--bn-line: rgba(255, 255, 255, .13);
	--bn-line-strong: rgba(216, 214, 211, .34);
	--bn-paper: #f4f2ef;
	--bn-muted: #aaa4a0;
	--bn-silver: #d8d6d3;
	--bn-silver-foil: linear-gradient(180deg, #ffffff 0%, #d6d6d6 34%, #8f8f8f 50%, #e9e9e9 68%, #b0b0b0 100%);
	--bn-red: #c8102e;
	--bn-red-deep: #7d0a17;
	--bn-velvet: linear-gradient(180deg, #d9192f 0%, #b3121f 48%, #860b18 100%);
	--bn-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
	--bn-flourish: 'Cormorant Garamond', Georgia, serif;
	--bn-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;

	/* Bootstrap 5 hooks - everything that reads these follows the theme */
	--bs-body-font-family: var(--bn-body);
	--bs-body-bg: var(--bn-ink);
	--bs-body-color: var(--bn-paper);
	--bs-emphasis-color: var(--bn-paper);
	--bs-secondary-color: var(--bn-muted);
	--bs-tertiary-bg: var(--bn-panel);
	--bs-secondary-bg: var(--bn-panel-2);
	--bs-border-color: var(--bn-line);
	--bs-link-color: #ef4a5c;
	--bs-link-color-rgb: 239, 74, 92;
	--bs-link-hover-color: #ff7b88;
	--bs-link-hover-color-rgb: 255, 123, 136;
	--bs-heading-color: var(--bn-paper);
	--bs-primary: var(--bn-red);
	--bs-primary-rgb: 200, 16, 46;
}

/* ============ Base ============ */
html { background: var(--bn-ink); }
body {
	background: var(--bn-ink);
	color: var(--bn-paper);
	font-family: var(--bn-body);
	-webkit-font-smoothing: antialiased;
}
h1, h2, .bn-display {
	font-family: var(--bn-display);
	font-weight: 600;
	letter-spacing: .04em;
}
h3, h4, h5, h6 { font-family: var(--bn-body); font-weight: 700; }
::selection { background: var(--bn-red); color: #fff; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
	outline: 3px solid var(--bn-paper);
	outline-offset: 3px;
	box-shadow: none;
}

/* ============ Buttons ============
   Buy / continue actions are crimson velvet with silver-white type; secondary
   actions are silver-outline pills. */
.bn-btn,
.btn-primary,
.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #fff;
	background-color: #b3121f !important;
	background-image: var(--bn-velvet) !important;
	border: 1px solid #e3404f !important;
	color: #fff !important;
	font-weight: 700;
	border-radius: 3px;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 #ffffff40, inset 0 -2px 0 #3a000866, 0 3px 12px #0006;
	text-shadow: 0 1px 0 #00000055;
	transition: filter .18s, box-shadow .18s;
}
.bn-btn:hover,
.btn-primary:hover,
.btn-success:hover { filter: brightness(1.1); }
.bn-btn:active,
.btn-primary:active,
.btn-success:active { filter: brightness(.94); box-shadow: inset 0 2px 4px #3a000866; }

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark,
.btn-light {
	letter-spacing: .04em;
	--bs-btn-color: var(--bn-paper);
	--bs-btn-border-color: var(--bn-line-strong);
	--bs-btn-hover-color: #111;
	--bs-btn-hover-bg: var(--bn-paper);
	--bs-btn-hover-border-color: var(--bn-paper);
	--bs-btn-active-color: #111;
	--bs-btn-active-bg: var(--bn-paper);
	background-color: transparent;
	color: var(--bn-paper);
	border-color: var(--bn-line-strong);
	border-radius: 3px;
}
.btn-dark {
	--bs-btn-bg: var(--bn-black);
	--bs-btn-border-color: var(--bn-line-strong);
	border-radius: 3px;
}

/* ============ Surfaces ============
   Light utility panels would put white text on white - pull them onto the
   dark ground instead. */
.bg-light, .bg-white, .card, .list-group-item, .dropdown-menu, .modal-content, .popover, .toast {
	background-color: var(--bn-panel) !important;
	color: var(--bn-paper);
	border-color: var(--bn-line) !important;
}
.text-muted, .text-secondary, .form-text, .small.text-muted { color: var(--bn-muted) !important; }
.text-dark, .text-body { color: var(--bn-paper) !important; }
.border, .border-top, .border-bottom { border-color: var(--bn-line) !important; }
hr { border-color: var(--bn-line); opacity: 1; }

.form-control, .form-select {
	background-color: var(--bn-black);
	color: var(--bn-paper);
	border: 1px solid var(--bn-line-strong);
	border-radius: 10px;
}
.form-control::placeholder { color: #8a8a8a; }
.form-control:focus, .form-select:focus {
	background-color: var(--bn-black);
	color: var(--bn-paper);
	border-color: var(--bn-red);
	box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .25);
}
.form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d7ae53' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal-header, .modal-footer { border-color: var(--bn-line); }

/* ============================================================================
   EVENT PAGES - ground. The page's own inline <style> paints the body #f4f5f7
   and the direct-page wrapper white; this file loads after it, so equal
   selectors win here.
   ============================================================================ */
body { background-color: var(--bn-ink); }
.event-direct-wrap {
	background: transparent;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}
.event-direct-header,
.event-direct-description { border-color: var(--bn-line); }
.event-direct-header h3 { color: var(--bn-muted); }

/* ============================================================================
   DIRECT TICKET PAGE (events/<slug>-tickets) - stage-poster banner.
   Markup: the standard IMS banner (.ims-banner-outer, no template override),
   whose colours are INLINE styles - hence the !important overrides below.
   ============================================================================ */

/* Poster panel (the standard banner, re-dressed) */
.ims-banner-outer {
	position: relative;
	background:
		radial-gradient(120% 90% at 85% 0%, rgba(200, 16, 46, .22), transparent 60%),
		linear-gradient(180deg, #0b0b0b, var(--bn-ink)) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--bn-line) !important;
	border-radius: 0 !important;
	margin: 0 -16px 18px !important;
	padding: 26px 16px 22px !important;
}
@media (min-width: 1400px) { .ims-banner-outer { margin-left: -24px !important; margin-right: -24px !important; padding-left: 24px !important; padding-right: 24px !important; } }
.event-direct-header-ims,
.event-direct-header-ims [style*='background-color'] {
	background: transparent !important;
	border-color: var(--bn-line) !important;
}
/* Logo box on the right, like The Alex. The banner sets an inline white/charcoal
   ground there; the crest logo is silver on transparent, so the box is black.
   Desktop = .col-md-3, phone = .col-4. */
.event-direct-header-ims .col-md-3[style*='background-color'],
.event-direct-header-ims .col-4[style*='background-color'],
.event-direct-header-ims .col-md-3,
.event-direct-header-ims .col-4 {
	background: var(--bn-black) !important;
	border-left: 1px solid var(--bn-line) !important;
	border-radius: 6px;
}
.event-direct-header-ims .col-md-9 { padding: 0 !important; }
@media (min-width: 768px) {
	.event-direct-header-ims .col-md-9 > .row > .col-md-4 { flex: 0 0 34%; max-width: 360px; }
	.event-direct-header-ims .col-md-9 > .row > .col-md-8 { flex: 1 1 0; padding-left: 28px; }
}
.event-direct-header-ims img.img-fluid {
	border-radius: 6px !important;
	border: 1px solid rgba(216, 214, 211, .35);
	box-shadow: 0 18px 40px #000a !important;
}
.event-direct-header-ims h1,
.event-direct-header-ims h2 {
	color: var(--bn-paper) !important;
	font-family: var(--bn-display);
	font-weight: 600 !important;
	font-size: clamp(28px, 3.4vw, 50px);
	line-height: 1.08;
	letter-spacing: .03em;
	text-wrap: balance;
	margin-bottom: 12px !important;
}
.event-direct-header-ims h3,
.event-direct-header-ims h5 {
	color: var(--bn-muted) !important;
	font-family: var(--bn-body);
	font-weight: 500;
	font-size: clamp(16px, 1.6vw, 21px);
}
/* Date line in silver small caps, like the tagline under their logo */
.event-direct-header-ims p.fw-bold {
	color: var(--bn-silver) !important;
	font-family: var(--bn-display);
	font-size: clamp(17px, 1.7vw, 22px);
	font-weight: 600 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.event-direct-header-ims p[style*='495057'] { color: #e6e6e6 !important; font-size: 16px; }
.event-direct-header-ims .bi-geo-alt-fill { color: var(--bn-red); }
.event-direct-header-ims .btn-dark {
	background: transparent;
	color: var(--bn-paper);
	border: 1px solid var(--bn-line-strong);
	padding: 8px 18px;
	font-weight: 600;
}
.event-direct-header-ims .btn-dark:hover { background: var(--bn-paper); color: #111; border-color: var(--bn-paper); }
#eventCountdownContainer {
	background: var(--bn-black) !important;
	border: 1px solid rgba(200, 16, 46, .55);
	border-radius: 20px !important;
	color: var(--bn-paper) !important;
	padding: 6px 14px !important;
}
#eventCountdownContainer .bi { color: var(--bn-red); }

/* Action row (Why Attend / Bookmark / Calendar / Share) */
.event-direct-wrap > .d-flex.flex-wrap .btn { font-weight: 600; }

/* Price range + availability line */
#ticketAvailabilityContainer .progress { background: #2a2a2a; }
#availabilityBar { background: var(--bn-velvet) !important; }
#availabilityText { color: var(--bn-silver) !important; }

/* ============ Best Available panel ============ */
#bestAvailablePanel .card.shadow-sm {
	background: #0c0c0c !important;
	border: 1px solid var(--bn-line) !important;
	border-top: 2px solid var(--bn-red) !important;
	border-radius: 10px;
}
#bestAvailablePanel .card-title {
	font-family: var(--bn-display);
	font-weight: 600;
	letter-spacing: .05em;
	font-size: 19px;
}
#bestAvailablePanel .card-title .bi { color: var(--bn-red); }
#bestAvailablePanel .form-label { color: var(--bn-paper); }
.bg-primary-subtle { background-color: var(--bn-black) !important; color: var(--bn-paper) !important; }
.border-primary { border-color: var(--bn-red) !important; }
.form-range::-webkit-slider-thumb { background: var(--bn-red); border: 2px solid #fff; }
.form-range::-moz-range-thumb { background: var(--bn-red); border: 2px solid #fff; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .35); }

/* Result rows: dark ticket rows with a crimson edge, big silver price. */
#baResultsArea .card {
	background: #141414 !important;
	border: 1px solid var(--bn-line) !important;
	border-left: 3px solid var(--bn-red) !important;
	border-radius: 8px;
	transition: border-color .18s, background-color .18s;
}
#baResultsArea .card:hover { background: #191919 !important; border-color: rgba(200, 16, 46, .6) !important; border-left-color: var(--bn-red) !important; }
#baResultsArea .card .fw-bold { font-size: 16px; }
#baResultsArea .bg-warning {
	background: transparent !important;
	color: var(--bn-paper) !important;
	align-items: flex-end !important;
}
#baResultsArea .bg-warning .fs-5 {
	font: 600 22px/1 var(--bn-display) !important;
	letter-spacing: .02em;
}
#baResultsArea .bg-warning .small { color: var(--bn-muted); }
#baResultsArea .btn-success { border-radius: 3px; font-size: 17px !important; white-space: nowrap; }
#baResultsArea .text-success { color: var(--bn-silver) !important; }
/* Section / ticket-type notes ("EARLY BIRD PRICE!! ...") carry an inline near-black
   colour meant for white pages - unreadable on the black cards. */
#baResultsArea [style*='212529'] { color: #e6e6e6 !important; }
#baResultsArea [style*='212529'] .bi { color: var(--bn-red); }

/* Seat map toolbar (inline-styled by the map script) */
#mapControlBar {
	background: #0c0c0c !important;
	border-color: var(--bn-line) !important;
	color: var(--bn-paper);
}
#mapControlBar > div > span,
#mapControlBar [id*='oom'][id*='abel'],
#mapControlBar [id*='oomLevel'] { color: #e6e6e6 !important; }
#mapControlBar button[style*='background: white'],
#mapControlBar button[style*='background: rgb(255'] { background: var(--bn-black) !important; }

/* Footer */
footer[role='contentinfo'] { color: var(--bn-muted); }
footer[role='contentinfo'] a { color: var(--bn-paper) !important; text-underline-offset: 3px; }
footer[role='contentinfo'] a:hover { color: var(--bn-red) !important; }
footer[role='contentinfo'] hr { border-color: var(--bn-line); }

/* ============================================================================
   CLASSIC TICKET TABLE as cards (#tixTable.tix-ga-cards, IMSTemplates.cfc) -
   the "interactive" ticket display: every section listed with a quantity
   stepper and one Find Tickets button. The shared markup is built for white
   pages (white cards, yellow price pill, blue steppers, white sticky totals,
   section names in their map colour inline), so it is re-dressed here to match
   the dark best-available cards. `body` raises specificity over the shared
   rules, which are all !important. (2026-09-25)
   ============================================================================ */
body #tixTable.tix-ga-cards tbody tr {
	background: var(--bn-panel) !important;
	border: 1px solid var(--bn-line) !important;
	border-left: 3px solid var(--bn-red) !important;
	box-shadow: none !important;
	color: var(--bn-paper);
}
body #tixTable.tix-ga-cards td { color: var(--bn-paper); }
/* Section name: its map colour (red/blue on white) is unreadable here */
body #tixTable.tix-ga-cards td:nth-child(2) span,
body #tixTable.tix-ga-cards td:nth-child(2) span[style] {
	color: var(--bn-paper) !important;
	font-family: var(--bn-display);
	font-weight: 600 !important;
	letter-spacing: .04em;
}
/* Price: silver figure, no yellow pill */
body #tixTable.tix-ga-cards td:nth-child(3) input {
	background: transparent !important;
	color: var(--bn-silver) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
}
body #tixTable.tix-ga-cards td:nth-child(4) { color: var(--bn-muted) !important; }
/* Quantity stepper in crimson */
body #tixTable.tix-ga-cards .tix-qty-btn {
	background: transparent !important;
	border-color: var(--bn-red) !important;
	color: var(--bn-red) !important;
}
body #tixTable.tix-ga-cards .tix-qty-btn:hover {
	background: var(--bn-red) !important;
	color: #fff !important;
}
body #tixTable.tix-ga-cards td.tix-qty-cell select,
body #tixTable.tix-ga-cards td.tix-qty-cell input {
	background: var(--bn-black) !important;
	color: var(--bn-paper) !important;
	border-color: var(--bn-red) !important;
}
/* Line total */
body #tixTable.tix-ga-cards td:nth-child(6) input {
	background: var(--bn-black) !important;
	color: var(--bn-paper) !important;
	border: 1px solid var(--bn-line) !important;
}
body #tixTable.tix-ga-cards tbody tr td:nth-child(6)::before { color: var(--bn-muted) !important; }
/* Notes under each card (section notes carry the section colour inline) */
body #tixTable.tix-ga-cards tr.tix-notes-row,
body #tixTable.tix-ga-cards tr.tix-notes-row td {
	background: #151515 !important;
}
body #tixTable.tix-ga-cards tr.tix-notes-row td,
body #tixTable.tix-ga-cards tr.tix-notes-row td div[style] {
	color: #e6e6e6 !important;
	font-weight: 500 !important;
}
/* Sticky Grand Total + Find Tickets bar */
body #tixTable.tix-ga-cards tr.tix-grand-row,
body #tixTable.tix-ga-cards tr.tix-find-row,
body #tixTable.tix-ga-cards tr.tix-grand-row td,
body #tixTable.tix-ga-cards tr.tix-grand-row td[style],
body #tixTable.tix-ga-cards tbody tr.tix-find-row td {
	background: var(--bn-black) !important;
	border-color: var(--bn-line) !important;
	border-left-color: var(--bn-line) !important;
	box-shadow: none !important;
}
body #tixTable.tix-ga-cards tr.tix-grand-row .text-danger,
body #tixTable.tix-ga-cards #totalSelectedValue {
	color: var(--bn-red) !important;
	background: transparent !important;
}
/* Headings above the table ("Tickets for event", "All amounts are in") */
.tix-ga-wrap, .tix-ga-wrap p { color: var(--bn-paper); }
.tix-ga-wrap .text-muted { color: var(--bn-muted) !important; }
/* The GA list's button says "Checkout" on every site now (IMSTemplates, 2026-09-26),
   so it is not swapped here. */


/* ============================================================================
   FRONT PAGE (index.html) - tour dates. Slim logo bar so the first dates sit
   in the first screen (owner, 2026-10-21); every row opens the event's
   tickets-direct page.
   ============================================================================ */
.bn-front {
	margin: 0;
	background:
		radial-gradient(90% 60% at 50% -10%, rgba(200, 16, 46, .18), transparent 70%),
		var(--bn-black);
	background-attachment: fixed;
}
.bn-front *, .bn-front *::before, .bn-front *::after { box-sizing: border-box; }
.bn-page { min-height: 100vh; display: flex; flex-direction: column; }

.bn-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 8px clamp(16px, 4vw, 48px);
	border-bottom: 1px solid var(--bn-line);
	background: rgba(7, 5, 5, .85);
	backdrop-filter: blur(6px);
	position: sticky;
	top: 0;
	z-index: 10;
}
.bn-bar-logo { display: block; line-height: 0; }
.bn-bar-logo img { height: 70px; width: auto; }
.bn-bar-nav { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.bn-bar-nav a {
	font: 600 11px/1 var(--bn-display);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bn-silver);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: border-color .2s, color .2s;
}
.bn-bar-nav a:hover { color: #fff; border-bottom-color: var(--bn-red); }

.bn-main { flex: 1; width: min(1040px, 100%); margin: 0 auto; padding: 22px clamp(16px, 4vw, 32px) 64px; }

.bn-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bn-line-strong);
}
.bn-heading h1 {
	margin: 0;
	font: 600 clamp(26px, 3.4vw, 40px)/1.1 var(--bn-display);
	letter-spacing: .14em;
	text-transform: uppercase;
	background: var(--bn-silver-foil);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.bn-lede {
	margin: 0;
	font: italic 500 19px/1.3 var(--bn-flourish);
	color: var(--bn-muted);
}

.bn-row {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: clamp(16px, 3vw, 36px);
	align-items: center;
	padding: 18px 12px;
	border-bottom: 1px solid var(--bn-line);
	color: var(--bn-paper);
	text-decoration: none;
	opacity: 0;
	animation: bn-rise .55s ease-out forwards;
	transition: background-color .25s;
}
.bn-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 2px;
	background: var(--bn-red);
	transform: scaleY(0);
	transition: transform .25s ease-out;
}
.bn-row:hover { color: var(--bn-paper); background: linear-gradient(90deg, rgba(200, 16, 46, .1), transparent 70%); }
.bn-row:hover::before { transform: scaleY(1); }
.bn-row:hover .bn-row-cta { filter: brightness(1.12); }

.bn-date {
	display: grid;
	justify-items: center;
	text-align: center;
	padding: 8px 0;
	border: 1px solid var(--bn-line-strong);
	border-radius: 2px;
	font-family: var(--bn-display);
	line-height: 1;
}
.bn-date-dow { font-size: 11px; font-weight: 600; letter-spacing: .22em; color: #ef4a5c; padding-left: .22em; }
.bn-date-day {
	font-size: 38px;
	font-weight: 700;
	margin: 4px 0 3px;
	background: var(--bn-silver-foil);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.bn-date-month { font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--bn-muted); padding-left: .16em; }

.bn-row-info { min-width: 0; }
.bn-row-city {
	margin: 0 0 4px;
	font: 600 13px/1.3 var(--bn-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bn-silver);
}
.bn-row-city span { color: var(--bn-muted); font-weight: 500; }
.bn-row-title {
	margin: 0 0 4px;
	font: 600 clamp(19px, 2.2vw, 25px)/1.2 var(--bn-display);
	letter-spacing: .03em;
	color: var(--bn-paper);
}
.bn-row-sub {
	margin: 0 0 2px;
	font: italic 500 17px/1.3 var(--bn-flourish);
	color: var(--bn-muted);
}
.bn-row-venue { margin: 0; font-size: 14px; color: var(--bn-muted); }

.bn-row-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	min-width: 132px;
	padding: 12px 24px;
	font: 700 13px/1 var(--bn-body);
	white-space: nowrap;
}
.bn-row.is-sold .bn-row-cta {
	background: transparent !important;
	background-image: none !important;
	border: 1px solid var(--bn-line-strong) !important;
	color: var(--bn-silver) !important;
	box-shadow: none;
	text-shadow: none;
}
.bn-row.is-sold .bn-date-day { opacity: .55; }

.bn-badge {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 9px 2px;
	border: 1px solid var(--bn-red);
	border-radius: 2px;
	font: 600 10px/1.2 var(--bn-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #ef4a5c;
	vertical-align: middle;
}
.bn-badge-sold { border-color: var(--bn-line-strong); color: var(--bn-muted); }

.bn-empty {
	padding: 48px 0;
	text-align: center;
	font: italic 500 22px/1.4 var(--bn-flourish);
	color: var(--bn-muted);
	border-bottom: 1px solid var(--bn-line);
}

.bn-footer {
	border-top: 1px solid var(--bn-line);
	padding: 24px;
	font-size: 13px;
	color: var(--bn-muted);
	text-align: center;
	background: var(--bn-black);
}
.bn-footer a { color: var(--bn-silver); text-underline-offset: 4px; }
.bn-footer a:hover { color: #fff; }
.bn-footer p { margin: 4px 0; }

@keyframes bn-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
	.bn-bar-logo img { height: 52px; }
	.bn-bar-nav { gap: 14px; }
	.bn-bar-nav a:nth-child(2), .bn-bar-nav a:nth-child(3) { display: none; }
	.bn-main { padding-top: 16px; }
	.bn-row { grid-template-columns: 72px 1fr; gap: 14px 16px; padding: 16px 4px; }
	.bn-date-day { font-size: 30px; }
	.bn-row-cta { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.bn-row { animation: none; opacity: 1; }
	* { transition: none !important; }
}