/**
 * Coherence Foundry Venue Platform — front-end styling.
 *
 * Antique-restraint default preset: deep navy fields, gold (#C39A36) only as
 * hairline + text + accent — NEVER as fill, shadow, glow, or gradient (flat,
 * non-negotiable). Serif display (Georgia) for names/headlines; sans for body.
 * Every surface is a self-contained dark section that reads as intentional on
 * any host theme, at any width. Mobile-first; widescreen centered. All selectors
 * cfvp- scoped. Tokens below are fallbacks — Frontend\Assets overrides per venue.
 */

:root {
	--cfvp-bg:         #0D1520;
	--cfvp-bg-deep:    #080E16;
	--cfvp-raised:     #111D2E;
	--cfvp-slate:      #4E6472;
	--cfvp-bone:       #DDD8CC;
	--cfvp-white:      #FFFFFF;
	--cfvp-accent:     #C9A24B;
	--cfvp-accent-rgb: 201, 162, 75;
	--cfvp-live:       #34D27D;
	--cfvp-live-rgb:   52, 210, 125;
	--cfvp-cta-bg:     #16243A;
	--cfvp-cta-fg:     #EAD9A4;
	--cfvp-cta-fg-soft: rgba(234, 217, 164, 0.68);
	--cfvp-cta-border: rgba(201, 162, 75, 0.55);
	--cfvp-hairline:   rgba(195, 154, 54, 0.24);
	--cfvp-line-soft:  rgba(221, 216, 204, 0.10);
	--cfvp-rule:       rgba(221, 216, 204, 0.08);
	--cfvp-font-display: Georgia, 'Times New Roman', serif;
	--cfvp-radius:     6px;
	--cfvp-radius-lg:  14px;
}

[class^="cfvp-"], [class*=" cfvp-"] { box-sizing: border-box; }

/* ── Self-contained dark sections (the responsive shell) ─────────────────── */
.cfvp-calendar-section, .cfvp-roster, .cfvp-space, .cfvp-hero {
	width: 100%;
	margin: 0 auto;
	color: var(--cfvp-bone);
	background: var(--cfvp-bg);
	border: 1px solid var(--cfvp-line-soft);
	border-radius: var(--cfvp-radius);
	font-family: var(--cfvp-font-body, inherit);
	overflow: hidden;
}
.cfvp-calendar-section, .cfvp-roster, .cfvp-space { max-width: 1080px; }
.cfvp-hero { max-width: 1080px; }

/* Full-width page wrapper (cfvp-fullwidth template): no theme clamp; sections self-center. */
.cfvp-main.cfvp-fullpage { width: 100%; max-width: none; margin: 0; padding: 40px 16px 64px; }

/* shared inner padding for body zones */
.cfvp-pad { padding: clamp(22px, 4vw, 44px) clamp(18px, 3.5vw, 40px); }

.cfvp-eyebrow {
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--cfvp-accent); font-weight: 700; margin: 0 0 10px;
}
.cfvp-section-label {
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--cfvp-slate); margin: 26px 0 12px; font-weight: 700;
}

/* ── TONIGHT ─────────────────────────────────────────────────────────────── */
.cfvp-tonight__hero {
	position: relative;
	min-height: 300px;
	display: flex; align-items: flex-end;
	background-image: var(--cfvp-hero-tall, var(--cfvp-hero)); background-size: cover; background-position: center;
	isolation: isolate; /* contain the scrim blend to the hero */
}
.cfvp-tonight--dark .cfvp-tonight__hero, .cfvp-tonight--ended .cfvp-tonight__hero { min-height: 210px; }
.cfvp-tonight__hero.is-empty {
	background:
		radial-gradient(120% 90% at 75% 18%, rgba(40,150,170,0.34), transparent 60%),
		radial-gradient(90% 70% at 20% 30%, rgba(150,70,62,0.26), transparent 55%),
		linear-gradient(180deg, #16273a 0%, var(--cfvp-bg) 88%);
}
.cfvp-tonight__hero::after {
	content: ""; position: absolute; inset: 0;
	/* Multiply scrim: dark enough for text, but the photo's lighter tones blend through (no flat wash). */
	background: linear-gradient(180deg, rgba(22,39,58,0) 40%, #16273a 100%);
	mix-blend-mode: multiply;
}
.cfvp-tonight__heroinner { position: relative; z-index: 2; width: 100%; padding: 0 clamp(18px,3.5vw,40px) clamp(16px,2.5vw,22px); }
.cfvp-badge {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(8,14,22,0.6); border: 1px solid var(--cfvp-hairline);
	padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cfvp-bone);
}
.cfvp-badge--live { color: var(--cfvp-live); border-color: rgba(var(--cfvp-live-rgb),0.5); }
.cfvp-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cfvp-badge--live .cfvp-badge__dot { animation: cfvp-pulse 1.5s ease-out infinite; }
.cfvp-badge--next .cfvp-badge__dot { background: var(--cfvp-accent); }
@keyframes cfvp-pulse { 0%{box-shadow:0 0 0 0 rgba(var(--cfvp-live-rgb),0.8)} 70%{box-shadow:0 0 0 13px rgba(var(--cfvp-live-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--cfvp-live-rgb),0)} }
.cfvp-tonight__kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cfvp-accent); margin: 0 0 6px; }
.cfvp-tonight__name {
	font-family: var(--cfvp-font-display); font-weight: 400;
	font-size: clamp(28px, 6vw, 38px); line-height: 1.04; color: var(--cfvp-white); margin: 0;
}
.cfvp-tonight__sub { margin: 8px 0 0; font-size: 14px; color: var(--cfvp-bone); }
.cfvp-tonight__sub b { color: var(--cfvp-white); font-weight: 600; }
.cfvp-headcount { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px 10px; padding: 7px 14px; border-radius: 999px; background: rgba(8,14,22,0.6); border: 1px solid rgba(var(--cfvp-accent-rgb),0.5); color: var(--cfvp-white); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.cfvp-headcount.is-empty { display: none; }
.cfvp-headcount__n { color: var(--cfvp-accent); font-weight: 700; font-style: normal; }

/* ── Live indicator (shared: tonight · artist · homepage) ──────────── */
.cfvp-live { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: rgba(8,14,22,0.6); border: 1px solid rgba(var(--cfvp-live-rgb),0.5); color: var(--cfvp-live); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.cfvp-live__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: cfvp-pulse 1.5s ease-out infinite; }

/* ── SUPPORT MODULE (tip · share · follow · check-in) ────────────────────── */
.cfvp-support { display: block; }
.cfvp-tip { background: var(--cfvp-raised); border: 1px solid var(--cfvp-hairline); border-radius: var(--cfvp-radius-lg); padding: 16px; }
.cfvp-tip__heading { font-size: 15px; font-weight: 600; color: var(--cfvp-white); margin: 0 0 3px; }
.cfvp-tip__note { font-size: 12.5px; color: var(--cfvp-slate); margin: 0 0 14px; }
.cfvp-tip__amounts { display: flex; gap: 9px; margin-bottom: 12px; }
.cfvp-tip__amount {
	flex: 1; padding: 13px 0; border-radius: 11px; font-size: 17px; font-weight: 600;
	background: rgba(195,154,54,0.06); border: 1px solid var(--cfvp-hairline); color: var(--cfvp-white);
	cursor: pointer; transition: border-color .12s, color .12s;
}
.cfvp-tip__amount.is-selected, .cfvp-tip__amount:hover { border-color: var(--cfvp-accent); color: var(--cfvp-accent); }
.cfvp-tip__providers { display: flex; gap: 8px; }
.cfvp-tip__provider {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 11px 0; border-radius: 10px; border: 1px solid var(--cfvp-line-soft);
	background: rgba(255,255,255,0.02); color: var(--cfvp-bone); font-size: 12.5px; font-weight: 500;
	text-decoration: none; transition: border-color .12s;
}
.cfvp-tip__provider:hover { border-color: var(--cfvp-hairline); }
.cfvp-tip__ico { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.cfvp-tip__ico--venmo { background: #3D95CE; } .cfvp-tip__ico--cashapp { background: #00D632; } .cfvp-tip__ico--paypal { background: #003087; }

.cfvp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cfvp-actionbtn {
	display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
	padding: 14px 16px; border-radius: 13px; border: 1px solid var(--cfvp-line-soft);
	background: var(--cfvp-raised); color: var(--cfvp-bone); cursor: pointer; text-decoration: none;
	transition: border-color .12s;
}
.cfvp-actionbtn:hover { border-color: var(--cfvp-hairline); }
.cfvp-actionbtn__ico { width: 30px; height: 30px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(195,154,54,0.12); color: var(--cfvp-accent); }
.cfvp-actionbtn__text { display: flex; flex-direction: column; }
.cfvp-actionbtn__main { font-size: 14.5px; color: var(--cfvp-white); font-weight: 600; }
.cfvp-actionbtn__sub { font-size: 11.5px; color: var(--cfvp-slate); margin-top: 1px; }
.cfvp-actionbtn__count { margin-left: auto; font-size: 13px; color: var(--cfvp-accent); font-weight: 600; white-space: nowrap; }
.cfvp-actionbtn--primary { background: var(--cfvp-cta-bg); border-color: var(--cfvp-cta-border); }
.cfvp-actionbtn--primary .cfvp-actionbtn__ico { background: rgba(234,217,164,0.14); color: var(--cfvp-cta-fg); }
.cfvp-actionbtn--primary .cfvp-actionbtn__main { color: var(--cfvp-cta-fg); }
.cfvp-actionbtn--primary .cfvp-actionbtn__sub { color: var(--cfvp-cta-fg-soft); }
.cfvp-actionbtn.is-done { border-color: var(--cfvp-accent); }
.cfvp-actionbtn.is-done .cfvp-actionbtn__main { color: var(--cfvp-accent); }

/* Secondary action variant: lower-emphasis row item (Add to calendar etc). */
.cfvp-actionbtn--secondary { background: rgba(255,255,255,0.02); }
.cfvp-actionbtn--secondary .cfvp-actionbtn__ico { background: rgba(195,154,54,0.10); color: var(--cfvp-accent); }
.cfvp-actionbtn--secondary .cfvp-actionbtn__main { color: var(--cfvp-bone); }
.cfvp-actionbtn--secondary:hover { border-color: var(--cfvp-accent); }
.cfvp-actionbtn--secondary:hover .cfvp-actionbtn__main { color: var(--cfvp-accent); }

/* Secondary share row — IG file-share + Copy link. Sits tight under the
   primary Share button; reads as a finer-grained alternate path. */
.cfvp-subactions { display: flex; gap: 10px; margin-top: -2px; }
.cfvp-subaction {
	flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 12px; border-radius: 10px; border: 1px solid var(--cfvp-line-soft);
	background: rgba(255,255,255,0.02); color: var(--cfvp-bone);
	font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
	transition: border-color .12s, color .12s;
}
.cfvp-subaction:hover, .cfvp-subaction:focus-visible { border-color: var(--cfvp-accent); color: var(--cfvp-accent); }
.cfvp-subaction__ico { display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.cfvp-subaction__label { line-height: 1; }

.cfvp-checkin-share { width: 100%; margin: -2px 0 0; padding: 4px 6px; background: none; border: 0; cursor: pointer; text-align: center; color: var(--cfvp-accent); font-size: 12.5px; letter-spacing: 0.03em; }
.cfvp-checkin-share:hover { text-decoration: underline; }
.cfvp-checkin-share.is-hidden { display: none; }
/* Desktop share fallback menu (no native share sheet) */
.cfvp-sharemenu { display: none; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 12px; background: var(--cfvp-raised); border: 1px solid var(--cfvp-line-soft); border-radius: var(--cfvp-radius-lg); }
.cfvp-sharemenu.is-open { display: flex; }
.cfvp-sharemenu a, .cfvp-sharemenu button { display: block; width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--cfvp-line-soft); background: rgba(255,255,255,0.02); color: var(--cfvp-bone); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .12s; }
.cfvp-sharemenu a:hover, .cfvp-sharemenu button:hover { border-color: var(--cfvp-accent); color: var(--cfvp-accent); }
.cfvp-cardpreview { width: 100%; margin: 2px 0 0; padding: 4px 6px; background: none; border: 0; cursor: pointer; text-align: center; color: var(--cfvp-slate); font-size: 12px; letter-spacing: 0.03em; }
.cfvp-cardpreview:hover { color: var(--cfvp-accent); }

/* ── Week list (tonight dark/ended state) ────────────────────────────────── */

/* ── Footer (within tonight) ─────────────────────────────────────────────── */
.cfvp-vfoot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--cfvp-line-soft); text-align: center; }
.cfvp-vfoot__addr { font-size: 12.5px; color: var(--cfvp-slate); line-height: 1.6; }
.cfvp-vfoot a { color: var(--cfvp-accent); text-decoration: none; font-size: 13px; display: inline-block; margin-top: 10px; }

/* ── CALENDAR (date-grouped cards, responsive grid) ──────────────────────── */
.cfvp-calendar { display: flex; flex-direction: column; gap: 16px; max-width: 680px; margin: 0 auto; }
/* Calendar surface: no outer frame. The event cards carry the structure; a framed
   1080px section just wastes horizontal room on mobile. Keep the dark field, drop
   the border + radius, and zero the section side padding so cards sit at the page gutter. */
.cfvp-calendar-section, .cfvp-roster { border: 0; border-radius: 0; }
.cfvp-calendar-section > .cfvp-pad, .cfvp-roster > .cfvp-pad { padding: clamp(18px, 4vw, 40px) 0; }
/* Cohesive card base — calendar events + roster cards share chrome; each layout adds its own inner detail + hover. */
.cfvp-event, .cfvp-roster__card { background: var(--cfvp-raised); border: 1px solid var(--cfvp-line-soft); border-top: 2px solid var(--cfvp-hairline); border-radius: var(--cfvp-radius); padding: 20px; }
.cfvp-event--today { border-top-color: var(--cfvp-accent); }
.cfvp-event__date { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.cfvp-event__day { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cfvp-accent); font-weight: 700; }
.cfvp-event__when { font-size: 12.5px; color: var(--cfvp-slate); }
.cfvp-event__act { display: flex; gap: 16px; align-items: center; }
.cfvp-event__act + .cfvp-event__act { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cfvp-rule); }
.cfvp-event__thumblink { flex: none; line-height: 0; }
.cfvp-event__thumblink:hover .cfvp-event__thumb { border-color: var(--cfvp-accent); }
.cfvp-event__thumb { display: block; width: clamp(84px, 20vw, 104px); height: clamp(84px, 20vw, 104px); flex: none; border-radius: var(--cfvp-radius); background-color: var(--cfvp-bg); background-size: cover; background-position: center; border: 1px solid var(--cfvp-line-soft); transition: border-color .12s; }
.cfvp-event__thumb.is-empty { background: linear-gradient(160deg, #16273a, var(--cfvp-bg)); }
.cfvp-event__meta { flex: 1; min-width: 0; }
.cfvp-event__kind { margin: 0 0 3px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cfvp-slate); }
.cfvp-event__title { margin: 0; font-family: var(--cfvp-font-display); font-weight: 400; font-size: clamp(21px, 4.5vw, 25px); line-height: 1.1; color: var(--cfvp-white); }
.cfvp-event__title a { color: inherit; text-decoration: none; }
.cfvp-event__title a:hover { color: var(--cfvp-accent); text-decoration: none; }
.cfvp-event__genre { margin: 5px 0 0; color: var(--cfvp-slate); font-size: 13px; }
.cfvp-event__featuring { margin: 4px 0 0; color: var(--cfvp-accent); font-size: 12.5px; font-style: italic; letter-spacing: 0.01em; }
/* Calendar-card bio: a one-liner that gives the reader something to grab onto.
   Clamped to 2 lines so cards stay roughly even-height regardless of how long
   the bio runs on each artist. Bone color + slightly smaller than the name. */
.cfvp-event__bio {
	margin: 8px 0 0;
	color: var(--cfvp-bone);
	font-size: 13px;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cfvp-event__details { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.cfvp-event__time { color: var(--cfvp-accent); font-size: 13.5px; font-style: italic; }
.cfvp-event__cover { color: var(--cfvp-accent); font-size: 12.5px; letter-spacing: 0.04em; white-space: nowrap; }
.cfvp-calendar__empty { text-align: center; color: var(--cfvp-slate); }

/* ── ROSTER (performer cards) ────────────────────────────────────────────── */
.cfvp-page-header { padding: 32px 16px 8px; }
.cfvp-page-title { margin: 0; font-family: var(--cfvp-font-display); font-weight: 400; font-size: clamp(32px, 7vw, 44px); line-height: 1.05; color: var(--cfvp-white); letter-spacing: -0.005em; }
.cfvp-roster__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.cfvp-roster__card { display: flex; gap: 16px; text-decoration: none; color: var(--cfvp-bone); transition: border-color .12s; }
.cfvp-roster__card:hover { border-color: var(--cfvp-accent); border-top-color: var(--cfvp-accent); text-decoration: none; }
.cfvp-roster__card:hover .cfvp-roster__photo { border-color: var(--cfvp-accent); }
.cfvp-roster__photo { width: clamp(84px, 20vw, 104px); height: clamp(84px, 20vw, 104px); flex: none; border-radius: var(--cfvp-radius); background-size: cover; background-position: center; border: 1px solid var(--cfvp-line-soft); transition: border-color .12s; }
.cfvp-roster__photo.is-empty { background: linear-gradient(160deg, #16273a, var(--cfvp-bg)); }
.cfvp-roster__info { min-width: 0; }
.cfvp-roster__name { margin: 0; font-family: var(--cfvp-font-display); font-weight: 400; font-size: clamp(21px, 4.5vw, 25px); line-height: 1.1; color: var(--cfvp-white); display: block; }
.cfvp-roster__genre { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cfvp-accent); }
.cfvp-roster__bio { display: block; margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--cfvp-slate); }

/* ── ARTIST PAGE ─────────────────────────────────────────────────────────── */
.cfvp-artist__hero { position: relative; height: clamp(400px, 125vw, 720px); background-image: var(--cfvp-hero-tall, var(--cfvp-hero)); background-size: cover; background-position: var(--cfvp-pos-mobile, center); isolation: isolate; }
.cfvp-artist__hero.is-empty { background: linear-gradient(160deg, #16273a, var(--cfvp-bg)); }
.cfvp-artist__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,39,58,0) 48%, #16273a 100%); mix-blend-mode: multiply; }
.cfvp-artist__live { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(8,14,22,0.6); color: var(--cfvp-live); border: 1px solid rgba(var(--cfvp-live-rgb),0.45); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.cfvp-artist__liveline { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; align-items: center; gap: 10px; }
.cfvp-artist__liveline .cfvp-live, .cfvp-artist__liveline .cfvp-headcount { margin: 0; }

/* Edge chevrons — prev/next swipe hint for touch devices. Hidden by default;
 * shown only on devices whose primary pointer is coarse (i.e. touch). Pill
 * sits on the vertical center of the hero photo, fades darker on press. */
.cfvp-artist__edge { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; line-height: 1; align-items: center; justify-content: center; font-size: 24px; color: var(--cfvp-bone); background: rgba(8, 14, 22, 0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; }
.cfvp-artist__edge--prev { left: 12px; }
.cfvp-artist__edge--next { right: 12px; }
.cfvp-artist__edge:active, .cfvp-artist__edge:focus { background-color: rgba(8, 14, 22, 0.78); color: var(--cfvp-accent); outline: none; }
@media (hover: none) and (pointer: coarse) {
	.cfvp-artist__edge { display: flex; }
}
.cfvp-artist__head { margin: 0 0 18px; }
.cfvp-artist__genre { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cfvp-accent); }
.cfvp-artist__name { margin: 0; font-family: var(--cfvp-font-display); font-weight: 400; font-size: clamp(30px, 6vw, 40px); line-height: 1.04; color: var(--cfvp-white); }
.cfvp-artist__bio { color: var(--cfvp-bone); line-height: 1.7; font-size: 15px; }
.cfvp-artist__bio p { margin: 0 0 1em; }

/* Social follow icons — horizontal row, one per populated platform */
.cfvp-socials { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; padding: 0; list-style: none; }
.cfvp-socials__link {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px 8px 10px;
	border: 1px solid var(--cfvp-hairline, rgba(245, 232, 199, 0.18));
	border-radius: 999px;
	background: rgba(245, 232, 199, 0.04);
	color: var(--cfvp-bone);
	text-decoration: none;
	font-size: 13px;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.cfvp-socials__link:hover, .cfvp-socials__link:focus-visible {
	background: var(--cfvp-gold, #d4a85a);
	border-color: var(--cfvp-gold, #d4a85a);
	color: #1a1a1a;
	transform: translateY(-1px);
}
.cfvp-socials__ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; }
.cfvp-socials__ico svg { display: block; }
.cfvp-socials__handle { font-weight: 500; letter-spacing: 0.01em; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfvp-artist__schedule { text-align: center; margin: 22px 0 0; }
.cfvp-artist__schedule a { color: var(--cfvp-accent); text-decoration: none; border-bottom: 1px solid var(--cfvp-hairline); padding-bottom: 2px; }

/* Prev/next artist navigation (alphabetical, wraps). Sits below the
 * .cfvp-artist grid so it spans the full content column on every breakpoint.
 * On touch devices the swipe gesture in frontend.js mirrors these links. */
.cfvp-artist-nav { display: flex; align-items: stretch; gap: 0; border-top: 1px solid var(--cfvp-hairline); margin: 0; }
.cfvp-artist-nav__link { flex: 1 1 0; display: flex; align-items: center; gap: 12px; padding: 22px 22px; color: var(--cfvp-bone); text-decoration: none; transition: background-color 150ms ease, color 150ms ease; }
.cfvp-artist-nav__link--prev { justify-content: flex-start; text-align: left; }
.cfvp-artist-nav__link--next { justify-content: flex-end; text-align: right; }
.cfvp-artist-nav__link--next .cfvp-artist-nav__text { align-items: flex-end; }
.cfvp-artist-nav__link + .cfvp-artist-nav__link { border-left: 1px solid var(--cfvp-hairline); }
.cfvp-artist-nav__link:hover, .cfvp-artist-nav__link:focus { background-color: rgba(255,255,255,0.025); color: var(--cfvp-white); outline: none; }
.cfvp-artist-nav__link:hover .cfvp-artist-nav__arrow, .cfvp-artist-nav__link:focus .cfvp-artist-nav__arrow { color: var(--cfvp-accent); }
.cfvp-artist-nav__link--prev:hover .cfvp-artist-nav__arrow, .cfvp-artist-nav__link--prev:focus .cfvp-artist-nav__arrow { transform: translateX(-2px); }
.cfvp-artist-nav__link--next:hover .cfvp-artist-nav__arrow, .cfvp-artist-nav__link--next:focus .cfvp-artist-nav__arrow { transform: translateX(2px); }
.cfvp-artist-nav__link--empty { pointer-events: none; }
.cfvp-artist-nav__arrow { font-size: 22px; line-height: 1; color: var(--cfvp-bone); transition: transform 150ms ease, color 150ms ease; }
.cfvp-artist-nav__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfvp-artist-nav__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cfvp-accent); }
.cfvp-artist-nav__name { font-family: var(--cfvp-font-display); font-weight: 400; font-size: clamp(15px, 2.4vw, 18px); color: inherit; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── HOMEPAGE HERO ───────────────────────────────────────────────────────── */
.cfvp-hero { position: relative; text-align: center; background-size: cover; background-position: center; }
.cfvp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,21,32,0.5), rgba(8,14,22,0.92)); }
.cfvp-hero__inner { position: relative; z-index: 2; padding: clamp(48px,9vw,96px) clamp(20px,4vw,48px); }
.cfvp-hero__kicker { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cfvp-accent); font-weight: 700; }
.cfvp-hero__headline { margin: 0 0 14px; font-family: var(--cfvp-font-display); font-weight: 400; font-size: clamp(34px, 8vw, 64px); line-height: 1.02; color: var(--cfvp-white); }
.cfvp-hero__sub { margin: 0 auto 22px; max-width: 46ch; color: var(--cfvp-bone); }

/* ── PRIMARY BUTTON (shared) ─────────────────────────────────────────────── */
.cfvp-btn { display: inline-block; padding: 13px 26px; border-radius: 4px; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid var(--cfvp-cta-border); background: var(--cfvp-cta-bg); color: var(--cfvp-cta-fg); transition: border-color .12s; }
.cfvp-btn:hover { border-color: var(--cfvp-accent); }

/* ── This-week preview (compact list) ────────────────────────────────────── */

/* ── EVENT SPACE + INQUIRY ───────────────────────────────────────────────── */
.cfvp-space__name { font-family: var(--cfvp-font-display); font-weight: 400; font-size: clamp(24px,4vw,32px); color: var(--cfvp-white); margin: 0 0 4px; }
.cfvp-space__cap { color: var(--cfvp-accent); margin: 0 0 14px; font-size: 13px; letter-spacing: 0.04em; }
.cfvp-space__desc { color: var(--cfvp-bone); line-height: 1.65; }
.cfvp-space__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.cfvp-space__shot { aspect-ratio: 4 / 3; background-size: cover; background-position: center; border-radius: var(--cfvp-radius); border: 1px solid var(--cfvp-line-soft); }
.cfvp-space__pricing { color: var(--cfvp-slate); }
.cfvp-inquiry { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 20px; background: var(--cfvp-raised); border: 1px solid var(--cfvp-hairline); border-radius: var(--cfvp-radius-lg); }
.cfvp-inquiry__title { margin: 0 0 4px; font-weight: 600; color: var(--cfvp-white); }
.cfvp-inquiry__field { padding: 12px 13px; border-radius: 9px; border: 1px solid var(--cfvp-hairline); background: var(--cfvp-bg); color: var(--cfvp-bone); font: inherit; }
.cfvp-inquiry__field::placeholder { color: var(--cfvp-slate); }
.cfvp-inquiry__field:focus { outline: none; border-color: var(--cfvp-accent); }
.cfvp-inquiry__status { margin: 0; min-height: 1em; color: var(--cfvp-accent); font-size: 13px; }

/* ── HOURS · LOCATION · SOCIAL ───────────────────────────────────────────── */
.cfvp-hours { list-style: none; margin: 0; padding: 0; }
.cfvp-hours__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--cfvp-rule); color: var(--cfvp-bone); }
.cfvp-hours__day { color: var(--cfvp-slate); }
.cfvp-location__addr { color: var(--cfvp-bone); margin: 0 0 6px; }
.cfvp-location__map { color: var(--cfvp-accent); text-decoration: none; border-bottom: 1px solid var(--cfvp-hairline); }
.cfvp-social { display: flex; gap: 16px; flex-wrap: wrap; }
.cfvp-social__link { color: var(--cfvp-accent); text-decoration: none; border-bottom: 1px solid var(--cfvp-hairline); }

/* ── Proof strip ─────────────────────────────────────────────────────────── */
.cfvp-proof { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.cfvp-proof__item { text-align: center; }
.cfvp-proof__rating { display: block; font-family: var(--cfvp-font-display); font-size: 26px; color: var(--cfvp-accent); }
.cfvp-proof__source { color: var(--cfvp-bone); }
.cfvp-proof__count { display: block; color: var(--cfvp-slate); font-size: 12px; }

/* ── BREAKPOINTS ─────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
	.cfvp-roster__grid { grid-template-columns: repeat(2, 1fr); }
	.cfvp-space__gallery { grid-template-columns: repeat(3, 1fr); }
}
/* Tonight (live/upcoming): split to photo-left / support-right on wide viewports */
@media (min-width: 860px) {
	/* Tonight (live/upcoming/grace): photo-left / support-right split. */
	.cfvp-tonight.cfvp-tonight--live,
	.cfvp-tonight.cfvp-tonight--upcoming,
	.cfvp-tonight.cfvp-tonight--grace { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
	.cfvp-tonight--live > .cfvp-tonight__hero,
	.cfvp-tonight--upcoming > .cfvp-tonight__hero,
	.cfvp-tonight--grace > .cfvp-tonight__hero { min-height: 440px; background-image: var(--cfvp-hero, var(--cfvp-hero-tall)); }
	.cfvp-tonight--live > .cfvp-tonight__body,
	.cfvp-tonight--upcoming > .cfvp-tonight__body,
	.cfvp-tonight--grace > .cfvp-tonight__body { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--cfvp-line-soft); }
	.cfvp-tonight--live > .cfvp-tonight__body > .cfvp-section-label:first-child,
	.cfvp-tonight--upcoming > .cfvp-tonight__body > .cfvp-section-label:first-child,
	.cfvp-tonight--grace > .cfvp-tonight__body > .cfvp-section-label:first-child { margin-top: 0; }

	/* Artist page: photo-left / content-right split (mobile stays stacked).
	 * Desktop uses the portrait (profile_photo) as the hero source — same
	 * image source as mobile — so the artist page is image-consistent across
	 * breakpoints. The wide hero_image is reserved for the homepage banner.
	 * align-items: stretch lets the photo grow with a richly populated pad
	 * (tip handles + follow); min-height keeps lean profiles substantial. */
	.cfvp-artist { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
	.cfvp-artist > .cfvp-artist__hero { aspect-ratio: auto; min-height: clamp(540px, 64vh, 720px); background-image: var(--cfvp-hero-tall, var(--cfvp-hero)); background-position: var(--cfvp-pos-mobile, center); }
	.cfvp-artist > .cfvp-pad { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--cfvp-line-soft); }
}

/* ── FROM THE BAR (homepage featured cocktails) ──────────────────────────
 * Count-aware section. Same eyebrow + heading across all variants; the
 * cocktail card layout adapts via .cfvp-bar--solo / --pair / --trio.
 *   solo (1)  → editorial hero (.cfvp-bar__solo, image left + text col)
 *   pair (2)  → paired cards with tasting note (.cfvp-bar__grid + __card, internal split)
 *   trio (3)  → compact grid (.cfvp-bar__grid + __card, photo above name)
 */
.cfvp-bar { background: rgba(17,29,46,0.55); border-top: 1px solid rgba(var(--cfvp-accent-rgb), 0.12); border-bottom: 1px solid rgba(var(--cfvp-accent-rgb), 0.12); padding: 56px 0; color: var(--cfvp-bone); }
.cfvp-bar .cfvp-pad { display: block; }
.cfvp-bar__head { max-width: 56ch; margin-bottom: 36px; }
.cfvp-bar__eyebrow { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cfvp-accent); margin: 0 0 10px; }
.cfvp-bar__heading { font-family: var(--cfvp-font-display, Georgia, serif); font-size: clamp(26px, 3.4vw, 38px); color: var(--cfvp-white); margin: 0; font-weight: 400; line-height: 1.15; }

.cfvp-bar__photo { background: var(--cfvp-bg-deep); border-radius: 2px; background-size: cover; background-position: center; border: 1px solid rgba(var(--cfvp-accent-rgb), 0.12); }
.cfvp-bar__photo.is-empty { background: linear-gradient(160deg, #16273a, var(--cfvp-bg)); }

.cfvp-bar__nameprice { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.cfvp-bar__name { font-family: var(--cfvp-font-display, Georgia, serif); color: var(--cfvp-white); line-height: 1.18; font-weight: 400; }
.cfvp-bar__price { font-family: -apple-system, BlinkMacSystemFont, sans-serif; color: var(--cfvp-accent); font-weight: 500; letter-spacing: 0.02em; }
.cfvp-bar__ingredients { color: rgba(221, 216, 204, 0.78); font-style: italic; line-height: 1.55; margin: 8px 0 0; }
.cfvp-bar__tasting { color: rgba(221, 216, 204, 0.86); line-height: 1.7; margin: 14px 0 0; }

.cfvp-bar__foot { margin-top: 36px; text-align: right; }
.cfvp-bar__more { color: var(--cfvp-accent); border-bottom: 1px solid rgba(var(--cfvp-accent-rgb), 0.45); padding-bottom: 2px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.cfvp-bar__more:hover { color: var(--cfvp-white); border-bottom-color: var(--cfvp-accent); }

/* Mobile-first: stack everything to a single column. */
.cfvp-bar__solo { display: grid; grid-template-columns: 1fr; gap: 24px; }
.cfvp-bar__solo .cfvp-bar__photo { aspect-ratio: 4 / 5; }
.cfvp-bar__solo .cfvp-bar__name { font-size: clamp(28px, 6vw, 42px); margin-bottom: 4px; }
.cfvp-bar__solo .cfvp-bar__price { font-size: 16px; }
.cfvp-bar__solo .cfvp-bar__ingredients { font-size: 15px; }
.cfvp-bar__solo .cfvp-bar__tasting { font-size: 15px; max-width: 50ch; }

.cfvp-bar__grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.cfvp-bar__card { display: grid; grid-template-columns: 1fr; gap: 18px; }
.cfvp-bar--trio .cfvp-bar__card .cfvp-bar__photo { aspect-ratio: 3 / 4; }
.cfvp-bar--pair .cfvp-bar__card .cfvp-bar__photo { aspect-ratio: 4 / 5; }
.cfvp-bar__cardtext .cfvp-bar__name { font-size: 22px; }
.cfvp-bar__cardtext .cfvp-bar__price { font-size: 14px; }
.cfvp-bar__cardtext .cfvp-bar__ingredients { font-size: 14px; }
.cfvp-bar__cardtext .cfvp-bar__tasting { font-size: 14px; }

/* Desktop: per-variant layouts kick in at ≥860px. */
@media (min-width: 860px) {
	.cfvp-bar { padding: 80px 0; }

	/* Solo (1 cocktail): asymmetric two-column editorial hero */
	.cfvp-bar--solo .cfvp-bar__solo { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }

	/* Pair (2 cocktails): two cards, each with internal image-left / text-right split */
	.cfvp-bar--pair .cfvp-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 44px; }
	.cfvp-bar--pair .cfvp-bar__card { grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: start; }
	.cfvp-bar--pair .cfvp-bar__cardtext .cfvp-bar__name { font-size: 26px; margin-bottom: 4px; }

	/* Trio (3 cocktails): compact 3-column grid, photo above text in each card */
	.cfvp-bar--trio .cfvp-bar__grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
	.cfvp-bar--trio .cfvp-bar__card { grid-template-columns: 1fr; gap: 22px; }
}

/* ── Artist intake form ─────────────────────────────────────────────────────
 * Self-serve submission form rendered by [cfvp_artist_intake_form]. Uses the
 * plugin's bone/midnight/gold tokens so it picks up venue branding without
 * extra config. Form is wide-comfortable on desktop, single-column always.
 */
.cfvp-intake, .cfvp-intake-thanks { max-width: 640px; margin: 0 auto; padding: 24px; color: var(--cfvp-bone); font-family: var(--cfvp-font-body); }
.cfvp-intake-thanks { text-align: center; padding: 64px 24px; }
.cfvp-intake-thanks h2 { font-family: var(--cfvp-font-display); color: var(--cfvp-accent); margin: 0 0 12px; }
.cfvp-intake-thanks p { color: var(--cfvp-bone); margin: 0 0 8px; }
.cfvp-intake-thanks__note { font-size: 12px; color: var(--cfvp-bone-dim, #a8a59a); margin-top: 24px; }

.cfvp-intake__honeypot { position: absolute !important; left: -9999px !important; height: 0 !important; width: 0 !important; opacity: 0 !important; pointer-events: none; }
.cfvp-intake__lede { font-size: 14px; color: var(--cfvp-bone); margin: 0 0 24px; line-height: 1.5; }
.cfvp-intake__error { padding: 12px 14px; background: rgba(220, 60, 60, 0.12); border: 1px solid rgba(220, 60, 60, 0.4); border-radius: 6px; color: #ffb4b4; font-size: 13px; margin: 0 0 20px; }
.cfvp-intake__group { border: 1px solid var(--cfvp-hairline); border-radius: 8px; padding: 18px 18px 14px; margin: 0 0 18px; background: rgba(255,255,255,0.02); }
.cfvp-intake__group > legend { font-family: var(--cfvp-font-display); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cfvp-accent); padding: 0 8px; }
.cfvp-intake__field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.cfvp-intake__field:last-child { margin-bottom: 0; }
.cfvp-intake__label { font-size: 13px; font-weight: 600; color: var(--cfvp-bone); display: flex; flex-direction: column; gap: 2px; }
.cfvp-intake__hint { font-weight: 400; font-size: 11px; color: var(--cfvp-bone-dim, #a8a59a); letter-spacing: 0.02em; }
.cfvp-intake__opt { font-weight: 400; font-size: 11px; color: var(--cfvp-bone-dim, #a8a59a); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.cfvp-intake input[type=text], .cfvp-intake input[type=email], .cfvp-intake input[type=tel], .cfvp-intake input[type=url], .cfvp-intake textarea { width: 100%; padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--cfvp-hairline); border-radius: 6px; color: var(--cfvp-bone); font-family: inherit; font-size: 14px; transition: border-color 150ms ease; }
.cfvp-intake input:focus, .cfvp-intake textarea:focus { outline: none; border-color: var(--cfvp-accent); }
.cfvp-intake textarea { resize: vertical; min-height: 60px; line-height: 1.4; }
.cfvp-intake__actions { display: flex; justify-content: flex-end; margin-top: 24px; }
.cfvp-intake__submit { padding: 12px 28px; font-family: var(--cfvp-font-display); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--cfvp-accent); color: var(--cfvp-bg); border: none; border-radius: 6px; cursor: pointer; transition: transform 120ms ease, opacity 120ms ease; }
.cfvp-intake__submit:hover { transform: translateY(-1px); opacity: 0.92; }
.cfvp-intake__submit:active { transform: translateY(0); }

/* ── Artist update form (public, [cfvp_artist_update_form]) ─────────────
   Same visual language as the intake form (cfvp-intake) — single column,
   bone-on-deep-navy, antique-gold accents. Multi-step state machine:
   lookup → confirm (or pick → confirm) → edit → thanks.
*/
.cfvp-update { max-width: 720px; margin: 0 auto; padding: 24px; color: var(--cfvp-bone); font-family: var(--cfvp-font-body); }
.cfvp-update__h { font-family: var(--cfvp-font-display); color: var(--cfvp-accent); margin: 0 0 16px; font-size: 28px; line-height: 1.2; }
.cfvp-update__lede { margin: 0 0 24px; line-height: 1.55; opacity: 0.92; }
.cfvp-update__error { background: rgba(179,45,46,0.15); border: 1px solid rgba(179,45,46,0.4); color: #f7c8c9; padding: 10px 14px; border-radius: 4px; margin: 0 0 18px; }
.cfvp-update__field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.cfvp-update__label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.cfvp-update__hint { display: block; font-weight: 400; font-size: 11px; opacity: 0.7; margin-top: 2px; letter-spacing: 0; }
.cfvp-update__opt { font-weight: 400; opacity: 0.6; font-size: 11px; margin-left: 6px; }
.cfvp-update__field-static { margin: 0 0 16px; line-height: 1.5; }
.cfvp-update__field input[type=text], .cfvp-update__field input[type=email], .cfvp-update__field input[type=url], .cfvp-update__field input[type=tel], .cfvp-update__field textarea, .cfvp-update__lookup input[type=text] {
	width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(var(--cfvp-accent-rgb), 0.25); border-radius: 4px; color: var(--cfvp-bone); font-family: inherit; font-size: 15px; line-height: 1.4;
}
.cfvp-update__field input:focus, .cfvp-update__field textarea:focus, .cfvp-update__lookup input:focus {
	outline: none; border-color: var(--cfvp-accent); background: rgba(255,255,255,0.07);
}
.cfvp-update__field textarea { resize: vertical; min-height: 80px; }
.cfvp-update__group { border: 1px solid rgba(var(--cfvp-accent-rgb), 0.15); border-radius: 6px; padding: 18px 18px 4px; margin: 0 0 18px; }
.cfvp-update__group legend { font-family: var(--cfvp-font-display); color: var(--cfvp-accent); font-size: 14px; letter-spacing: 0.06em; padding: 0 8px; text-transform: uppercase; }
.cfvp-update__actions { display: flex; gap: 16px; align-items: center; margin-top: 24px; }
.cfvp-update__actions--row { flex-direction: row; flex-wrap: wrap; }
.cfvp-update__submit {
	display: inline-block; padding: 12px 24px; background: var(--cfvp-cta-bg, #16243A); color: var(--cfvp-cta-fg, #EAD9A4);
	border: 1px solid var(--cfvp-cta-border, rgba(201,162,75,0.55)); border-radius: 4px; font-family: var(--cfvp-font-body);
	font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .15s;
}
.cfvp-update__submit:hover { background: rgba(201,162,75,0.15); }
.cfvp-update__link { color: var(--cfvp-bone); opacity: 0.7; font-size: 13px; text-decoration: underline; }
.cfvp-update__link:hover { opacity: 1; color: var(--cfvp-accent); }
.cfvp-update__back { margin-top: 24px; font-size: 13px; }
.cfvp-update__back a { color: var(--cfvp-bone); opacity: 0.7; text-decoration: underline; }
.cfvp-update__honeypot { position: absolute; left: -9999px; }

/* Artist preview card (confirm + pick states) */
.cfvp-update__cards { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.cfvp-update__card { display: block; background: rgba(255,255,255,0.04); border: 1px solid rgba(var(--cfvp-accent-rgb), 0.2); border-radius: 6px; padding: 16px; }
.cfvp-update__card--link { text-decoration: none; color: inherit; transition: border-color .15s; cursor: pointer; }
.cfvp-update__card--link:hover { border-color: var(--cfvp-accent); }
.cfvp-update__cardbody { display: flex; gap: 16px; align-items: flex-start; }
.cfvp-update__cardphoto { width: 80px; height: 100px; flex-shrink: 0; background-size: cover; background-position: center; border-radius: 4px; border: 1px solid rgba(var(--cfvp-accent-rgb), 0.15); }
.cfvp-update__cardphoto--empty { background: linear-gradient(160deg, #16273a, var(--cfvp-bg)); }
.cfvp-update__cardtext { flex: 1; min-width: 0; }
.cfvp-update__cardname { font-family: var(--cfvp-font-display); font-size: 22px; color: var(--cfvp-bone); line-height: 1.2; }
.cfvp-update__cardgenre { font-size: 12px; opacity: 0.7; margin-top: 4px; letter-spacing: 0.04em; }
.cfvp-update__cardbio { font-size: 13px; opacity: 0.85; margin-top: 8px; line-height: 1.5; }
.cfvp-update__cardpick { display: inline-block; margin-top: 12px; color: var(--cfvp-accent); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Artist page: website link (separate from Follow row) ───────────────
   Treated as a text-link with leading globe icon and a trailing arrow.
   Lower visual weight than the Follow buttons so it reads as a tertiary
   path ("here's where else they live online"), not as another follow CTA.
*/
.cfvp-website-link {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 4px 0 6px;
	padding: 2px 0;
	color: var(--cfvp-bone);
	text-decoration: none;
	font-size: 13.5px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	transition: color 0.15s ease;
}
.cfvp-website-link:hover, .cfvp-website-link:focus-visible {
	color: var(--cfvp-accent);
}
.cfvp-website-link__ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; flex: 0 0 auto;
	color: var(--cfvp-accent);
	opacity: 0.85;
}
.cfvp-website-link__ico svg { display: block; }
.cfvp-website-link__label { font-weight: 500; }
.cfvp-website-link__arrow {
	display: inline-block;
	font-size: 11px;
	color: var(--cfvp-slate);
	margin-left: 2px;
	transition: color 0.15s ease, transform 0.15s ease;
}
.cfvp-website-link:hover .cfvp-website-link__arrow,
.cfvp-website-link:focus-visible .cfvp-website-link__arrow {
	color: var(--cfvp-accent);
	transform: translate(1px, -1px);
}

/* Quieter variant of the section label — used for "Visit website" so it
   doesn't compete visually with "Follow this artist" / "Support the artist"
   which are the primary outbound surfaces. */
.cfvp-section-label--quiet {
	font-size: 11px;
	opacity: 0.65;
	margin-top: 14px;
	margin-bottom: 2px;
}

/* ── /tonight/ wrap + dark surfaces ───────────────────────────────────────
   The QR-scan landing reads as the artist's page during live/upcoming (full
   Render::artist() with countdown), and as a venue-led text surface during
   wrap (grace/ended) and dark. Wrap/dark do NOT mimic the artist page — no
   fake hero, no parallel chrome. Just typography, optional next-up card,
   week list, footer.
*/
.cfvp-tonight-wrap, .cfvp-tonight-dark { background: var(--cfvp-bg); }

/* Head block (kicker / headline / sub) — sits at the top of wrap+dark. A
   thin gold rule above keeps brand identity without inventing a hero. */
.cfvp-tonight-wrap__head { padding-top: clamp(28px, 6vw, 56px); padding-bottom: clamp(8px, 2vw, 12px); position: relative; }
.cfvp-tonight-wrap__head::before {
	content: ""; display: block; width: 48px; height: 2px;
	background: var(--cfvp-accent); margin: 0 0 18px;
}
.cfvp-tonight-wrap__kicker {
	margin: 0 0 8px; font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--cfvp-accent); font-weight: 700;
}
.cfvp-tonight-wrap__headline {
	margin: 0; font-family: var(--cfvp-font-display); font-weight: 400;
	font-size: clamp(30px, 7vw, 48px); line-height: 1.06; color: var(--cfvp-white);
}
.cfvp-tonight-wrap__sub {
	margin: 14px 0 0; color: var(--cfvp-bone); font-size: 15px; line-height: 1.55;
	max-width: 50ch;
}

/* Tonight lineup — chronological stack of mini-cards covering the whole
   night. Each card has a status variant (played / just-finished / upcoming)
   that styles the status label and the card border so guests can read the
   timeline at a glance. The upcoming variant ticks a live countdown via the
   same data-cfvp-countdown contract the homepage hero uses. */
.cfvp-tonight__lineup {
	display: flex; flex-direction: column;
	gap: 10px;
	margin-top: clamp(8px, 2vw, 14px);
}
.cfvp-tonight__lineup-card {
	display: flex; gap: 16px; align-items: center;
	padding: 14px; 
	background: var(--cfvp-raised);
	border: 1px solid var(--cfvp-line-soft);
	border-left: 2px solid var(--cfvp-line-soft);
	border-radius: var(--cfvp-radius);
	color: var(--cfvp-bone); text-decoration: none;
	transition: border-color .12s, background-color .12s;
}
.cfvp-tonight__lineup-card:hover, .cfvp-tonight__lineup-card:focus-visible {
	border-color: var(--cfvp-accent); border-left-color: var(--cfvp-accent);
	text-decoration: none;
}

.cfvp-tonight__lineup-photo {
	width: clamp(72px, 18vw, 96px); height: clamp(90px, 22vw, 120px);
	flex: none; border-radius: var(--cfvp-radius);
	background-size: cover; background-position: center;
	border: 1px solid var(--cfvp-line-soft);
	transition: border-color .12s;
}
.cfvp-tonight__lineup-photo.is-empty {
	background: linear-gradient(160deg, #16273a, var(--cfvp-bg));
}
.cfvp-tonight__lineup-card:hover .cfvp-tonight__lineup-photo { border-color: var(--cfvp-accent); }

.cfvp-tonight__lineup-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cfvp-tonight__lineup-status {
	font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--cfvp-slate); font-weight: 700; margin-bottom: 4px;
}
.cfvp-tonight__lineup-name {
	font-family: var(--cfvp-font-display); font-weight: 400;
	font-size: clamp(19px, 4.2vw, 22px); line-height: 1.15;
	color: var(--cfvp-white);
}
.cfvp-tonight__lineup-genre { font-size: 12px; color: var(--cfvp-slate); margin-top: 3px; }
.cfvp-tonight__lineup-time { font-size: 13px; color: var(--cfvp-bone); font-style: italic; margin-top: 6px; }
.cfvp-tonight__lineup-countdown {
	display: inline-block; margin-top: 4px;
	font-size: 12.5px; letter-spacing: 0.04em;
	color: var(--cfvp-accent); font-weight: 600;
}

/* Status variants — just-finished and upcoming get the gold rail (these are
   the cards a QR-scanning guest is most likely looking for). Played is
   muted so the past timeline reads as background context. */
.cfvp-tonight__lineup-card--just-finished {
	border-left-color: var(--cfvp-accent);
}
.cfvp-tonight__lineup-card--just-finished .cfvp-tonight__lineup-status {
	color: var(--cfvp-accent);
}
.cfvp-tonight__lineup-card--upcoming {
	border-left-color: var(--cfvp-accent);
}
.cfvp-tonight__lineup-card--upcoming .cfvp-tonight__lineup-status {
	color: var(--cfvp-accent);
}
.cfvp-tonight__lineup-card--live {
	border-left-color: var(--cfvp-live);
}
.cfvp-tonight__lineup-card--live .cfvp-tonight__lineup-status {
	color: var(--cfvp-live);
}
.cfvp-tonight__lineup-card--played .cfvp-tonight__lineup-name {
	color: var(--cfvp-bone);
}

/* Artist page: upcoming-state context block.
   When /artist/{slug}/ or /tonight/ renders an artist whose show hasn't
   started yet, two elements appear:
     .cfvp-artist__when      - "Tonight at {venue} . Starts 9:00 PM" eyebrow
                               above genre/name. Tells the guest what they're
                               counting down to.
     .cfvp-artist__countdown - live ticker below the name. Mirrors the
                               homepage hero's .b-hero__countdown progression:
                               quiet by default, expands + monospace + gold
                               when within 1h (.is-live), uppercase gold at
                               zero (.is-now). JS adds the classes. */
.cfvp-artist__when {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cfvp-accent);
	font-weight: 700;
	line-height: 1.4;
}
.cfvp-artist__when-sep { opacity: 0.6; }

.cfvp-artist__countdown {
	margin: 14px 0 0;
	font-size: clamp(15px, 2vw, 17px);
	color: var(--cfvp-bone);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}
.cfvp-artist__countdown.is-live {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: clamp(22px, 4.5vw, 30px);
	color: var(--cfvp-accent);
	letter-spacing: 0;
	font-weight: 600;
}
.cfvp-artist__countdown.is-now {
	color: var(--cfvp-accent);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
}

/* Lineup-card countdown: same progression scaled to fit inside a mini-card.
   Subtle by default; attention-grabbing when close to start. */
.cfvp-tonight__lineup-countdown.is-live {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: clamp(15px, 3vw, 18px);
	letter-spacing: 0;
	font-weight: 600;
}
.cfvp-tonight__lineup-countdown.is-now {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
}