/* Xeris / STUDIO NO-BOY — visual language based on the GE Demos catalog. */
:root {
	color-scheme: dark;
	--bg: #07100d;
	--panel: rgba(14, 31, 25, .88);
	--panel-2: rgba(19, 43, 34, .92);
	--line: rgba(150, 255, 203, .14);
	--text: #eefbf4;
	--muted: #9eb9aa;
	--accent: #75f0ad;
	--accent-2: #c9ff66;
	--shadow: 0 24px 70px rgba(0, 0, 0, .36);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
	margin: 0;
	min-height: 100vh;
	color: var(--text);
	font: 15px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background:
		radial-gradient(circle at 12% 0%, rgba(55, 211, 125, .15), transparent 34rem),
		radial-gradient(circle at 88% 5%, rgba(194, 255, 92, .10), transparent 28rem),
		linear-gradient(180deg, #08140f 0%, #050a08 100%);
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: rgba(117, 240, 173, .28); color: white; }

.site-shell {
	width: min(1480px, calc(100% - 36px));
	margin-inline: auto;
	padding: 38px 0 72px;
}
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(27px, 4.6vw, 56px);
	border: 1px solid var(--line);
	border-radius: 28px;
	background: linear-gradient(135deg, rgba(20, 50, 38, .96), rgba(8, 20, 15, .92));
	box-shadow: var(--shadow);
}
.hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -170px;
	top: -225px;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(141, 255, 181, .22), transparent 66%);
	pointer-events: none;
}
.eyebrow {
	color: var(--accent);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.hero h1 {
	max-width: 1050px;
	margin: 10px 0 12px;
	font-size: clamp(35px, 5.6vw, 72px);
	font-weight: 850;
	line-height: 1.05;
	letter-spacing: -.05em;
	text-wrap: balance;
}
.hero h1 span { color: var(--accent-2); }
.hero-description {
	margin: 0;
	max-width: 720px;
	color: var(--muted);
	font-size: clamp(15px, 1.6vw, 19px);
}
.hero-tags, .stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.hero-tag, .stat {
	padding: 7px 13px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .035);
	color: #d8f5e3;
	font-size: 12px;
	font-weight: 650;
}

.media-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: start;
	gap: 23px;
	margin-top: 24px;
}

.video-panel {
	position: sticky;
	top: 22px;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	box-shadow: 0 14px 42px rgba(0, 0, 0, .23);
}
.video-panel-top { padding: 22px 22px 18px; }
.video-panel-top h2 {
	margin: 8px 0 4px;
	font-size: clamp(21px, 2.2vw, 28px);
	font-weight: 760;
	line-height: 1.2;
	letter-spacing: -.025em;
}
.video-panel-top p { margin: 0; color: var(--muted); }
.video-frame {
	margin: 0 15px;
	overflow: hidden;
	border: 1px solid rgba(150, 255, 203, .13);
	border-radius: 14px;
	background: #010302;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.video-panel video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #010302;
}
.video-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 16px 22px 20px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .035em;
	text-transform: uppercase;
}
.video-caption::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 13px rgba(117, 240, 173, .48);
}

.teams-panel { min-width: 0; }
.section-heading { margin: 0 0 18px; padding: 1px 2px 0; }
.section-heading h2 {
	margin: 6px 0;
	font-size: clamp(24px, 2.3vw, 33px);
	line-height: 1.16;
	letter-spacing: -.035em;
}
.section-heading p { margin: 7px 0 0; color: var(--muted); }

/* Explicit content layout; CSS columns caused unpredictable card placement.
   The Teams card spans the whole information area for stable 3-column rows. */
.detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.info-card {
    display: block;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 19px 20px 20px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: 0 14px 40px rgba(0, 0, 0, .19);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.info-card:hover { border-color: rgba(117,240,173,.32); box-shadow: 0 20px 48px rgba(0,0,0,.28); }
.info-card--teams { grid-column: 1 / -1; }

/* Correct semantic headings, plus backwards compatibility with the ORIGINAL
   fragments where the first paragraph was (incorrectly) the heading. */
.info-card > .info-card-title,
.teams-panel > p:not(.section-heading p) {
    display: block;
    margin: 0 0 13px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: #e8ffef;
    font-size: 17px;
    font-weight: 790;
    line-height: 1.35;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}
.info-card > .info-card-title::before,
.teams-panel > p:not(.section-heading p)::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: .9em;
    margin-right: 9px;
    border-radius: 4px;
    background: var(--accent);
}

/* Paragraph/list objects use visible containers independently of the parent
   card. Direct children target the new semantic markup AND legacy standalone
   HTML fragments (which do not have .info-card). */
.info-card > p,
.info-card > ul,
.info-card > ol,
.teams-panel > ul,
.teams-panel > ol {
    display: block;
    min-width: 0;
    width: 100%;
    margin: 0;
    border: 1px solid rgba(150,255,203,.33);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(4,15,11,.8), rgba(10,28,21,.86));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    color: #d7ebdf;
}
.info-card > p {
    padding: 13px 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.info-card > p.info-card-intro {
    border-left: 4px solid var(--accent);
    background: linear-gradient(135deg,rgba(117,240,173,.10),rgba(9,32,22,.85));
    color: #e5f4e9;
}
.info-card > p + :is(p, ul, ol) { margin-top: 12px; }

/* Consistent ordinary UL/OL container spacing and individually delineated rows.
   This is intentionally not restricted to .info-card, because earlier versions
   of index.php embedded the same fragments directly into .teams-panel. */
.info-card > :is(ul, ol):not(.fan-clubs),
.teams-panel > :is(ul, ol):not(.fan-clubs) {
    list-style: none;
    padding: 9px;
}
.info-card > :is(ul, ol):not(.fan-clubs) > li,
.teams-panel > :is(ul, ol):not(.fan-clubs) > li {
    display: block;
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 11px 12px 11px 30px;
    border: 1px solid rgba(150,255,203,.20);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: #d7ebdf;
    line-height: 1.52;
    overflow-wrap: anywhere;
}
.info-card > :is(ul, ol):not(.fan-clubs) > li:nth-child(odd),
.teams-panel > :is(ul, ol):not(.fan-clubs) > li:nth-child(odd) {
    background: rgba(117,240,173,.075);
}
.info-card > :is(ul, ol):not(.fan-clubs) > li + li,
.teams-panel > :is(ul, ol):not(.fan-clubs) > li + li { margin-top: 7px; }
.info-card > ul:not(.fan-clubs) > li::before,
.teams-panel > ul:not(.fan-clubs) > li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 1.23em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: var(--accent);
}
/* Normal numbered lists; list-item numbers are generated, not duplicated. */
.info-card > ol:not(.fan-clubs),
.teams-panel > ol:not(.fan-clubs) { counter-reset: xeris-item; }
.info-card > ol:not(.fan-clubs) > li,
.teams-panel > ol:not(.fan-clubs) > li {
    counter-increment: xeris-item;
    padding-left: 47px;
}
.info-card > ol:not(.fan-clubs) > li::before,
.teams-panel > ol:not(.fan-clubs) > li::before {
    content: counter(xeris-item, decimal-leading-zero);
    position: absolute;
    top: 10px;
    left: 9px;
    width: 29px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(117,240,173,.35);
    border-radius: 6px;
    background: rgba(117,240,173,.14);
    color: var(--accent);
    font: 800 11px/1.1 system-ui,sans-serif;
}

/* The Teams list is a TABLE-LIKE, THREE-COLUMN list, not an ordinary OL.
   The header and each row share EXACTLY the same columns and padding. */
.info-card .fan-clubs-columns,
.info-card > ol.fan-clubs > li,
.teams-panel > ol.fan-clubs > li {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) minmax(90px,max-content);
    column-gap: 16px;
    align-items: center;
}
.info-card .fan-clubs-columns {
    margin: 0;
    padding: 11px 23px;
    border: 1px solid rgba(150,255,203,.28);
    border-radius: 10px 10px 0 0;
    background: rgba(117,240,173,.085);
    color: #c2e2d0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.info-card .fan-clubs-columns > :first-child { text-align: right; }
.info-card .fan-clubs-columns > :nth-child(2) { text-align: left; }
.info-card .fan-clubs-columns > :last-child { text-align: right; }
.info-card > ol.fan-clubs,
.teams-panel > ol.fan-clubs {
    display: block;
    list-style: none;
    counter-reset: xeris-team;
    margin: 0;
    padding: 9px;
    border: 1px solid rgba(150,255,203,.33);
    border-radius: 12px;
    background: rgba(3,14,9,.72);
    color: var(--text);
}
.info-card .fan-clubs-columns + ol.fan-clubs {
    border-top: 0;
    border-radius: 0 0 10px 10px;
}
.info-card > ol.fan-clubs > li,
.teams-panel > ol.fan-clubs > li {
    counter-increment: xeris-team;
    min-width: 0;
    margin: 0;
    padding: 12px 13px;
    border: 1px solid rgba(150,255,203,.2);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
}
.info-card > ol.fan-clubs > li:nth-child(odd),
.teams-panel > ol.fan-clubs > li:nth-child(odd) {
    background: rgba(117,240,173,.075);
}
.info-card > ol.fan-clubs > li + li,
.teams-panel > ol.fan-clubs > li + li { margin-top: 7px; }
.info-card > ol.fan-clubs > li::before,
.teams-panel > ol.fan-clubs > li::before {
    content: counter(xeris-team, lower-roman) '.';
    text-align: right;
    color: var(--accent);
    font-weight: 850;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.info-card ol.fan-clubs .artist,
.teams-panel ol.fan-clubs .artist {
    min-width: 0;
    text-align: left;
    font-weight: 750;
    overflow-wrap: anywhere;
}
.info-card ol.fan-clubs .club,
.teams-panel ol.fan-clubs .club {
    text-align: right;
    white-space: nowrap;
    color: #c5e5d2;
    font-weight: 600;
}

/* Optional schedule object support without overriding the list container. */
.info-card > ul.schedule-list > li,
.teams-panel > ul.schedule-list > li {
    display: grid;
    grid-template-columns: minmax(65px,auto) minmax(0,1fr);
    align-items: baseline;
    gap: 10px;
    padding-left: 12px;
}
.info-card > ul.schedule-list > li::before,
.teams-panel > ul.schedule-list > li::before { content: none; }
.info-card ul.schedule-list .item-label,
.teams-panel ul.schedule-list .item-label { color: var(--accent); font-weight: 750; }

/* Original 2026-10-21 markup fallback: body > h1, .media-layout and direct
   .teams-panel children, no .site-shell or .info-card wrapper. */
body > h1 { max-width: 1480px; margin: 28px auto 20px; padding: 0 18px; font-size: clamp(30px, 4vw, 62px); }
.teams-panel > h3 { color: var(--accent-2); font-size: clamp(19px,2vw,28px); }
.teams-panel > :is(p,ul,ol) { margin-bottom: 14px; }
body > .media-layout { width: min(1480px,calc(100% - 36px)); margin-inline: auto; }
.teams-panel > p:not(.section-heading p) { margin-top: 16px; margin-bottom: 9px; }
.teams-panel > ol.fan-clubs { margin-bottom: 18px; }
/* Standalone paragraphs not serving as headings in the semantic site remain
   boxed above; never apply this heading fallback to .info-card > p. */

@media (max-width: 1100px) {
	.media-layout { grid-template-columns: 1fr; }
	.video-panel { position: static; }
	.video-frame { max-width: 760px; }
}
@media (max-width: 700px) {
	.detail-columns { grid-template-columns: 1fr; }
	.site-shell { width: min(100% - 20px, 1480px); padding-top: 14px; }
	.hero { border-radius: 20px; }
	.media-layout { gap: 24px; margin-top: 18px; }
	.video-panel { border-radius: 18px; }
	.section-heading { padding-inline: 3px; }
	.info-card--teams { grid-column: 1; }
	.info-card { border-radius: 16px; padding: 16px; }
	.info-card .fan-clubs-columns, .info-card > ol.fan-clubs > li, .teams-panel > ol.fan-clubs > li { grid-template-columns: 2.2rem minmax(0,1fr) minmax(62px,max-content); column-gap: 7px; }
	.info-card .fan-clubs-columns { font-size: 10px; padding: 10px 17px; }
	.info-card > ol.fan-clubs > li, .teams-panel > ol.fan-clubs > li { padding: 11px 7px; }
	.info-card ol.fan-clubs .club, .teams-panel ol.fan-clubs .club { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.info-card { transition: none; }
}