/* ============================================================
   e-wrestling.org Museum — Design System
   Functional brutalism with tasteful editorial decoration.
   All theming via CSS variables; per-fed overrides in themes.css.
   ============================================================ */

/* --- Reset & box model --------------------------------------- */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	/* Offset in-page anchor jumps by the sticky header height so the
	   target heading lands just below it. */
	scroll-padding-top: var(--header-height);
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--color-bg);
	background-image: var(--bg-texture);
	color: var(--color-text);
	font: var(--fs-base)/var(--lh-body) var(--font-body);
	font-feature-settings: "kern", "liga", "calt";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, picture {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

input, select, textarea {
	font: inherit;
	color: inherit;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
	color: var(--color-link-hover);
	text-decoration-color: var(--color-link-hover);
}

/* Results pages mark each match and segment with <a name="id"> so other pages can
   link straight to it. Those anchors have no href and go nowhere, so they must not
   read as links. */

a:not([href]) {
	color: inherit;
	text-decoration: none;
	cursor: auto;
}

a:not([href]):hover {
	color: inherit;
}

a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--sp-5) 0;
}

/* --- Design tokens (neutral defaults) ------------------------ */

:root {
	/* Color — neutral / museum hub defaults.
	   Overridden per fed in themes.css. */
	--color-bg:            #f6f4ee;
	--color-bg-alt:        #ecead9;
	--color-bg-elevated:   #ffffff;
	--color-text:          #14110e;
	--color-text-muted:    #6a6258;
	--color-border:        #d6cfbd;
	--color-border-strong: #14110e;
	--color-accent:        #6b3d24;
	--color-accent-text:   #ffffff;
	--color-link:          var(--color-accent);
	--color-link-hover:    var(--color-text);
	--color-shadow:        rgba(20, 17, 14, 0.08);

	/* Chrome and headings. Default to the base palette, so a theme.css that sets only the
	   colours above looks as before; a fed can give its headings, header and footer their own
	   colours to echo its original site (GCW: navy headings and footer bar). */
	--color-heading:       var(--color-text);
	--color-header-bg:     var(--color-bg);
	--color-header-text:   var(--color-text);
	--color-header-border: var(--color-border);
	--color-header-accent: var(--color-accent);          /* nav hover / current page, brand hover */
	--color-header-mark-bg:   var(--color-accent);
	--color-header-mark-text: var(--color-accent-text);
	--color-header-control:   var(--color-text);         /* Menu button */
	--color-header-control-border: var(--color-border-strong);
	--color-footer-bg:     var(--color-bg-alt);
	--color-footer-text:   var(--color-text-muted);
	--color-footer-link:   var(--color-text);
	--color-footer-border: var(--color-border);

	/* Subtle paper texture — low-opacity noise via SVG data URL.
	   Per-fed themes can override this to "none" if undesired. */
	--bg-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

	/* Typography — system stack with editorial serif for display.
	   Distinctive without web-font loading. */
	--font-display: "Iowan Old Style", "Charter", "Source Serif Pro", Georgia, serif;
	--font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono:    ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

	--fs-xs:    12px;
	--fs-sm:    14px;
	--fs-base:  16px;
	--fs-lg:    18px;
	--fs-h4:    20px;
	--fs-h3:    24px;
	--fs-h2:    32px;
	--fs-h1:    44px;

	--lh-tight: 1.2;
	--lh-body:  1.55;
	--lh-prose: 1.7;

	--fw-regular: 400;
	--fw-medium:  500;
	--fw-bold:    700;

	/* Spacing scale (4px base) */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	/* Layout */
	--width-page:    1180px;
	--width-content: 720px;
	--width-narrow:  560px;
	--width-sidebar: 300px;
	--header-height: 64px;
	--gutter:        var(--sp-5);

	/* Borders & radius */
	--bw-thin:   1px;
	--bw-thick:  3px;
	--radius:    2px;

	/* Motion */
	--ease:        cubic-bezier(0.2, 0.0, 0.0, 1.0);
	--dur-fast:    120ms;
	--dur-normal:  200ms;
	--dur-slow:    320ms;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Typography ---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-4);
	color: var(--color-heading);
}

h1 {
	font-size: var(--fs-h1);
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--fs-h2);
	letter-spacing: -0.015em;
}

h3 {
	font-size: var(--fs-h3);
	letter-spacing: -0.01em;
}

h4 {
	font-size: var(--fs-h4);
}

h5, h6 {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

p {
	margin: 0 0 var(--sp-4);
}

.text-meta {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.text-mono {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.text-eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-2);
}

/* --- Layout primitives --------------------------------------- */

.container {
	width: 100%;
	max-width: var(--width-page);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

@media (min-width: 720px) {
	.container {
		padding-inline: var(--sp-6);
	}
}

.stack > * + * {
	margin-top: var(--sp-4);
}

.stack-tight > * + * {
	margin-top: var(--sp-2);
}

.stack-loose > * + * {
	margin-top: var(--sp-6);
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
}

.grid {
	display: grid;
	gap: var(--sp-5);
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 720px) {
	.grid-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

@media (min-width: 960px) {
	.split {
		grid-template-columns: minmax(0, 1fr) var(--width-sidebar);
	}
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Header & navigation ------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-header-bg);
	border-bottom: var(--bw-thin) solid var(--color-header-border);
	transition: box-shadow var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
}

.site-header[data-scrolled="true"] {
	box-shadow: 0 1px 0 var(--color-border), 0 8px 16px -8px var(--color-shadow);
	border-bottom-color: transparent;
}

.site-header-inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	height: var(--header-height);
	max-width: var(--width-page);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

@media (min-width: 720px) {
	.site-header-inner {
		padding-inline: var(--sp-6);
	}
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	text-decoration: none;
	color: var(--color-header-text);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	letter-spacing: -0.01em;
	flex: 0 1 auto;
	min-width: 0;
	line-height: 1.15;
}

/* Phones: a long fed name wraps to two lines instead of pushing the menu button off-screen */
.site-brand-mark {
	flex: 0 0 auto;
}

@media (min-width: 720px) {
	.site-brand {
		flex: 0 0 auto;
	}
}

.site-brand:hover {
	color: var(--color-header-accent);
}

.site-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--color-header-mark-bg);
	color: var(--color-header-mark-text);
	font-weight: var(--fw-bold);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: 0.05em;
}

.site-nav {
	margin-left: auto;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	background: transparent;
	border: var(--bw-thin) solid var(--color-header-control-border);
	color: var(--color-header-control);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.nav-toggle:hover {
	background: var(--color-header-control);
	color: var(--color-header-bg);
}

.nav-toggle-icon {
	display: inline-block;
	width: 18px;
	height: 12px;
	position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after,
.nav-toggle-icon span {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
}

.nav-toggle-icon::before { top: 0; }
.nav-toggle-icon::after  { bottom: 0; }
.nav-toggle-icon span    { top: 50%; transform: translateY(-50%); }

.nav-list {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--sp-1);
}

.nav-list a {
	display: inline-block;
	padding: var(--sp-2) var(--sp-3);
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	border-bottom: 2px solid transparent;
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.site-header .nav-list a {
	color: var(--color-header-text);
}

.site-header .nav-list a:hover,
.site-header .nav-list a[aria-current="page"] {
	color: var(--color-header-accent);
	border-bottom-color: var(--color-header-accent);
}

.nav-list a:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

.nav-list a[aria-current="page"] {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

@media (min-width: 880px) {
	.nav-toggle { display: none; }
	.nav-list {
		display: flex;
	}
}

/* Mobile drawer (toggled by museum.js via aria-expanded) */

.nav-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(320px, 88vw);
	background: var(--color-bg-elevated);
	border-left: var(--bw-thin) solid var(--color-border);
	padding: var(--sp-6) var(--sp-5);
	transform: translateX(100%);
	transition: transform var(--dur-normal) var(--ease);
	z-index: 100;
	overflow-y: auto;
}

.nav-drawer[data-open="true"] {
	transform: translateX(0);
}

.nav-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-normal) var(--ease);
	z-index: 90;
}

.nav-drawer-backdrop[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}

.nav-drawer-close {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	background: transparent;
	border: 0;
	width: 32px;
	height: 32px;
	font-size: 24px;
	line-height: 1;
	color: var(--color-text);
}

.nav-drawer .nav-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: var(--sp-6);
	gap: 0;
}

.nav-drawer .nav-list a {
	display: block;
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-lg);
}

.nav-drawer .nav-list a:hover {
	border-bottom-color: var(--color-accent);
}

/* --- Theme switcher (mockup-only utility) -------------------- */

.theme-switcher {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-left: var(--sp-3);
}

.theme-switcher label {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
}

.theme-switcher select {
	padding: 4px 6px;
	border: var(--bw-thin) solid var(--color-border-strong);
	background: var(--color-bg-elevated);
	font-size: var(--fs-xs);
	color: var(--color-text);
}

/* --- Hero / page intro --------------------------------------- */

.page-intro {
	padding-block: var(--sp-7) var(--sp-6);
	border-bottom: var(--bw-thin) solid var(--color-border);
	margin-bottom: var(--sp-6);
}

.page-intro h1 {
	margin: 0;
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-4);
}

.page-intro .text-eyebrow {
	margin-bottom: var(--sp-3);
}

.page-intro p {
	margin-top: var(--sp-3);
	max-width: var(--width-content);
	color: var(--color-text-muted);
	font-size: var(--fs-lg);
}

/* --- Section blocks ------------------------------------------ */

.section {
	padding-block: var(--sp-6);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--sp-5);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.section-head h2 {
	margin: 0;
	font-size: var(--fs-h3);
}

.section-head a {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --- Sub-nav strip (roster styles, bio tabs, etc.) ----------- */

.subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 var(--sp-5);
	padding: 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
	overflow-x: auto;
	scrollbar-width: thin;
}

.subnav li {
	flex: 0 0 auto;
}

.subnav a {
	display: inline-block;
	padding: var(--sp-3) var(--sp-4);
	text-decoration: none;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.subnav a:hover {
	color: var(--color-text);
}

.subnav a[aria-current="page"],
.subnav a.is-active {
	color: var(--color-text);
	border-bottom-color: var(--color-accent);
}

/* --- Character cards (roster) -------------------------------- */

.roster-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.roster-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.roster-grid { grid-template-columns: repeat(3, 1fr); }
}

.roster-card {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--sp-3);
	padding: var(--sp-3);
	background: var(--color-bg-elevated);
	border: var(--bw-thin) solid var(--color-border);
	transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.roster-card:hover {
	border-color: var(--color-border-strong);
}

.roster-card-image {
	width: 100px;
	aspect-ratio: 5 / 6;
	background: var(--color-bg-alt);
	overflow: hidden;
}

.roster-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roster-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	min-width: 0;
}

.roster-card-name {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	margin: 0;
}

.roster-card-name a {
	color: var(--color-text);
	text-decoration: none;
}

.roster-card-name a:hover {
	color: var(--color-accent);
}

.roster-card-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: 2px 6px;
	background: var(--color-accent);
	color: var(--color-accent-text);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--fw-medium);
	align-self: flex-start;
}

.roster-card-meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: 1.4;
}

.roster-card-meta a {
	color: var(--color-text-muted);
}

/* --- Tables --------------------------------------------------- */

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.data-table caption {
	caption-side: top;
	text-align: left;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	padding-bottom: var(--sp-3);
}

.data-table thead th {
	text-align: left;
	padding: var(--sp-3) var(--sp-3);
	border-bottom: var(--bw-thick) solid var(--color-border-strong);
	background: transparent;
	font-weight: var(--fw-bold);
	font-family: var(--font-body);
	text-transform: uppercase;
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

.data-table tbody td {
	padding: var(--sp-3) var(--sp-3);
	border-bottom: var(--bw-thin) solid var(--color-border);
	vertical-align: top;
}

.data-table tbody tr:hover {
	background: var(--color-bg-alt);
}

.data-table .num,
.data-table .date {
	font-variant-numeric: tabular-nums;
	font-family: var(--font-mono);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.table-wrap {
	overflow-x: auto;
	margin-inline: calc(var(--sp-4) * -1);
	padding-inline: var(--sp-4);
}

@media (min-width: 720px) {
	.table-wrap {
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* --- News list ----------------------------------------------- */

.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.news-item {
	padding: var(--sp-5) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.news-item:first-child { padding-top: 0; }
.news-item:last-child  { border-bottom: 0; }

.news-item-eyebrow {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-2);
}

.news-item-fed {
	display: inline-block;
	padding: 1px 6px;
	background: var(--color-accent);
	color: var(--color-accent-text);
	font-weight: var(--fw-bold);
}

.news-item-title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h3);
	font-family: var(--font-display);
	line-height: 1.25;
}

.news-item-title a {
	color: var(--color-text);
	text-decoration: none;
}

.news-item-title a:hover {
	color: var(--color-accent);
}

.news-item-teaser {
	margin: 0;
	color: var(--color-text);
	max-width: var(--width-content);
}

.news-item-byline {
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* --- Sidebar cards ------------------------------------------- */

.sidebar-block {
	padding: 0;
	margin: 0 0 var(--sp-6);
}

.sidebar-block-head {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: var(--fw-bold);
	color: var(--color-text);
	padding-bottom: var(--sp-2);
	margin-bottom: var(--sp-3);
	border-bottom: var(--bw-thick) solid var(--color-border-strong);
}

.sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.sidebar-list li {
	font-size: var(--fs-sm);
	line-height: 1.45;
}

.sidebar-list .date {
	display: block;
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	margin-top: 2px;
}

/* --- Champion card (used on champions page & sidebar) -------- */

.champ-card {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.champ-card:last-child { border-bottom: 0; }

.champ-card-image {
	width: 80px;
	aspect-ratio: 5 / 6;
	background: var(--color-bg-alt);
	overflow: hidden;
}

.champ-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.champ-card-title {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0 0 2px;
	font-weight: var(--fw-medium);
}

.champ-card-name {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--sp-1);
}

.champ-card-name a {
	color: var(--color-text);
	text-decoration: none;
}

.champ-card-name a:hover {
	color: var(--color-accent);
}

.champ-card-meta {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

/* --- Title block (champions page, larger) -------------------- */

.title-block {
	display: grid;
	gap: var(--sp-5);
	padding: var(--sp-6) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.title-block {
		grid-template-columns: 200px 150px 1fr;
		align-items: start;
	}
}

.title-block:last-child { border-bottom: 0; }

.title-block-belt {
	background: var(--color-bg-alt);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: var(--bw-thin) solid var(--color-border);
}

.title-block-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	grid-column: 1 / -1;
	margin-bottom: var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.title-block-name {
	margin: 0;
	font-size: var(--fs-h2);
}

.title-block-history-link {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.title-block-champion-headshot {
	width: 150px;
	aspect-ratio: 5 / 6;
	background: var(--color-bg-alt);
	overflow: hidden;
}

.title-block-champion-headshot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.title-block-details .text-eyebrow {
	margin-bottom: var(--sp-1);
}

.title-block-champion-name {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--sp-4);
}

.title-block-champion-name a {
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 2px;
}

.title-block-contenders-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.title-block-contenders-list li {
	font-size: var(--fs-sm);
}

.title-block-contenders-list .num {
	display: inline-block;
	width: 1.5em;
	color: var(--color-text-muted);
	font-family: var(--font-mono);
}

/* --- Federation card (hub) ----------------------------------- */

.fed-card {
	display: block;
	padding: var(--sp-5);
	background: var(--color-bg-elevated);
	border: var(--bw-thin) solid var(--color-border);
	border-left: var(--bw-thick) solid var(--color-accent);
	text-decoration: none;
	color: var(--color-text);
	transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.fed-card:hover {
	transform: translateX(2px);
	border-color: var(--color-border-strong);
	border-left-color: var(--color-accent);
	color: var(--color-text);
}

.fed-card-name {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--sp-1);
	letter-spacing: -0.015em;
}

.fed-card-tagline {
	font-style: italic;
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-3);
}

.fed-card-meta {
	display: flex;
	gap: var(--sp-4);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-family: var(--font-mono);
}

/* --- Bio tabs ------------------------------------------------- */

.bio-header {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
	margin-bottom: var(--sp-5);
}

@media (min-width: 720px) {
	.bio-header {
		grid-template-columns: 200px 1fr;
	}
}

.bio-header-image {
	width: 200px;
	aspect-ratio: 5 / 6;
	background: var(--color-bg-alt);
	overflow: hidden;
}

.bio-header-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bio-header-name {
	margin: 0 0 var(--sp-2);
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-3);
}

.bio-header-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-3);
}

.bio-header-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.bio-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: var(--bw-thin) solid var(--color-border);
}

.bio-fields > div {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-1);
	padding: var(--sp-3) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

@media (min-width: 560px) {
	.bio-fields > div {
		grid-template-columns: 160px 1fr;
		gap: var(--sp-4);
		align-items: baseline;
	}
}

.bio-fields dt {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
	margin: 0;
}

.bio-fields dd {
	margin: 0;
	font-size: var(--fs-base);
}

/* Prose blocks (career highlights, biography text) */

.prose {
	max-width: var(--width-content);
	font-size: var(--fs-lg);
	line-height: var(--lh-prose);
}

.prose p {
	margin: 0 0 var(--sp-4);
}

.prose p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 3.5em;
	font-weight: var(--fw-bold);
	line-height: 0.85;
	float: left;
	margin: 0.1em var(--sp-2) 0 0;
	color: var(--color-accent);
}

.prose blockquote {
	margin: var(--sp-5) 0;
	padding: var(--sp-2) var(--sp-5);
	border-left: var(--bw-thick) solid var(--color-accent);
	font-style: italic;
	color: var(--color-text-muted);
}

/* --- Results page (match listings) --------------------------- */

.results-header {
	padding-block: var(--sp-7) var(--sp-6);
	border-bottom: var(--bw-thin) solid var(--color-border);
	margin-bottom: var(--sp-6);
}

.results-header h1 {
	margin: 0 0 var(--sp-3);
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-4);
}

.results-header-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	padding-left: calc(var(--sp-4) + 3px);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.results-header-meta time {
	font-family: var(--font-mono);
}

.match {
	padding-block: var(--sp-6);
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.match:last-child { border-bottom: 0; }

.match-eyebrow {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	font-weight: var(--fw-bold);
	margin-bottom: var(--sp-2);
}

.match-title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-h2);
	font-family: var(--font-display);
}

.match-heads {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 var(--sp-5);
}

.match-heads img {
	width: 100px;
	height: 120px;
	object-fit: cover;
	background: var(--color-bg-alt);
}

.match-body {
	max-width: var(--width-content);
	margin: 0 auto;
	font-size: var(--fs-lg);
	line-height: var(--lh-prose);
}

.match-body p { margin: 0 0 var(--sp-4); }

.match-toc {
	position: sticky;
	top: calc(var(--header-height) + var(--sp-4));
	max-height: calc(100vh - var(--header-height) - var(--sp-7));
	overflow-y: auto;
	padding: var(--sp-3);
	background: var(--color-bg-alt);
	border-left: var(--bw-thick) solid var(--color-accent);
	font-size: var(--fs-sm);
}

.match-toc h3 {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.match-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: matchcount;
}

.match-toc li {
	padding: var(--sp-1) 0;
	border-bottom: 1px dotted var(--color-border);
}

.match-toc li:last-child { border-bottom: 0; }

.match-toc a {
	text-decoration: none;
	color: var(--color-text);
}

.match-toc a:hover { color: var(--color-accent); }

/* Matches: numbered counter prefix in mono */
.match-toc li.is-match {
	counter-increment: matchcount;
}

.match-toc li.is-match a::before {
	content: counter(matchcount, decimal-leading-zero);
	color: var(--color-text-muted);
	margin-right: var(--sp-2);
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* Segments: italic, muted, prefixed with § instead of a number */
.match-toc li.is-segment {
	margin-left: var(--sp-4);
}

.match-toc li.is-segment a {
	font-style: italic;
	color: var(--color-text-muted);
	font-size: 0.92em;
}

.match-toc li.is-segment a::before {
	content: "\00A7";
	color: var(--color-accent);
	margin-right: var(--sp-2);
	font-family: var(--font-mono);
	font-style: normal;
}

/* --- Filter bar (RP board, archives) ------------------------- */

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-3);
	background: var(--color-bg-alt);
	margin-bottom: var(--sp-5);
}

.filter-bar label {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
}

.filter-bar input[type="text"],
.filter-bar select {
	padding: var(--sp-2) var(--sp-3);
	border: var(--bw-thin) solid var(--color-border-strong);
	background: var(--color-bg-elevated);
	min-width: 200px;
}

.filter-bar button {
	padding: var(--sp-2) var(--sp-4);
	background: var(--color-text);
	color: var(--color-bg);
	border: var(--bw-thin) solid var(--color-text);
	font-weight: var(--fw-medium);
	font-size: var(--fs-sm);
}

.filter-bar button:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-text);
}

/* --- Pagination ---------------------------------------------- */

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	justify-content: center;
	align-items: center;
	margin: var(--sp-6) 0;
	font-size: var(--fs-sm);
	font-family: var(--font-mono);
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--sp-2);
	text-decoration: none;
	color: var(--color-text);
	border: var(--bw-thin) solid var(--color-border);
	background: var(--color-bg-elevated);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pagination a:hover {
	border-color: var(--color-border-strong);
	color: var(--color-accent);
}

.pagination .is-current {
	background: var(--color-text);
	color: var(--color-bg);
	border-color: var(--color-text);
	font-weight: var(--fw-bold);
}

.pagination .is-ellipsis {
	border: 0;
	background: transparent;
	color: var(--color-text-muted);
}

.pagination .pagination-step {
	padding: 0 var(--sp-3);
	font-family: var(--font-body);
	text-transform: uppercase;
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
}

/* --- Promo row (roleplay board) ------------------------------ */

.promo-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.promo-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.promo-row:last-child { border-bottom: 0; }

.promo-row-image {
	width: 100px;
	aspect-ratio: 5 / 6;
	background: var(--color-bg-alt);
	overflow: hidden;
}

.promo-row-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.promo-row-body {
	min-width: 0;
}

.promo-row-title {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--sp-1);
	line-height: 1.25;
}

.promo-row-title a {
	color: var(--color-text);
	text-decoration: none;
}

.promo-row-title a:hover {
	color: var(--color-accent);
}

.promo-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.promo-row-meta .date,
.promo-row-meta .location {
	font-family: var(--font-mono);
}

/* --- Reign card (title history) ------------------------------ */

.reign {
	margin: 0 0 var(--sp-5);
	border: var(--bw-thin) solid var(--color-border);
	background: var(--color-bg-elevated);
}

.reign-head {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: var(--color-accent);
	color: var(--color-accent-text);
	align-items: center;
}

.reign-head-image {
	width: 60px;
	aspect-ratio: 5 / 6;
	background: rgba(255, 255, 255, 0.15);
	overflow: hidden;
}

.reign-head-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reign-head-info {
	min-width: 0;
}

.reign-head-num {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.reign-head-champ {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	margin: 0;
	line-height: 1.2;
}

.reign-head-champ a {
	color: inherit;
	text-decoration: none;
}

.reign-head-champ a:hover {
	text-decoration: underline;
}

.reign-head-meta {
	font-size: var(--fs-sm);
	margin-top: 2px;
}

.reign-head-days {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-align: right;
	white-space: nowrap;
}

.reign-body {
	padding: var(--sp-4);
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.reign-body-event {
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.reign-body-match {
	color: var(--color-text-muted);
}

.reign-body-summary {
	margin: var(--sp-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-style: italic;
}

.reign-defenses {
	background: var(--color-bg-alt);
}

.reign-defense {
	display: grid;
	grid-template-columns: 16px 1fr auto;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-sm);
	border-bottom: 1px dotted var(--color-border);
}

.reign-defense:last-child { border-bottom: 0; }

.reign-defense-marker {
	color: var(--color-accent);
	font-family: var(--font-mono);
	font-weight: var(--fw-bold);
}

.reign-defense-content {
	min-width: 0;
}

.reign-defense-match a {
	color: var(--color-text);
	text-decoration: none;
}

.reign-defense-match a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.reign-defense-event {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

.reign-defense-date {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.reign-no-defenses {
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	font-style: italic;
	background: var(--color-bg-alt);
}

/* --- Article (single news / single RP) ----------------------- */

.article-header {
	padding-block: var(--sp-7) var(--sp-5);
	margin-bottom: var(--sp-5);
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.article-header .text-eyebrow {
	margin-bottom: var(--sp-3);
}

.article-header h1 {
	margin: 0 0 var(--sp-4);
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-4);
	max-width: 20ch;
}

.article-byline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	padding-left: calc(var(--sp-4) + 3px);
}

.article-byline strong {
	color: var(--color-text);
}

.article-byline time {
	font-family: var(--font-mono);
}

.article-headshot {
	float: right;
	width: 150px;
	margin: 0 0 var(--sp-4) var(--sp-5);
	background: var(--color-bg-alt);
	aspect-ratio: 5 / 6;
}

@media (max-width: 600px) {
	.article-headshot {
		float: none;
		width: 120px;
		margin: 0 0 var(--sp-4);
	}
}

/* --- Gallery grid (fed gallery, bio gallery) ----------------- */

.gallery-grid {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 560px) {
	.gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 880px) {
	.gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

.gallery-item {
	display: block;
	background: var(--color-bg-alt);
	border: var(--bw-thin) solid var(--color-border);
	overflow: hidden;
	color: var(--color-text);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.gallery-item:hover {
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.gallery-item-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	overflow: hidden;
}

.gallery-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-item-caption {
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-sm);
	border-top: var(--bw-thin) solid var(--color-border);
}

.gallery-item-caption .date {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-top: 2px;
}

/* Tall portrait variant for bio image series */

.gallery-grid.is-portrait .gallery-item-image {
	aspect-ratio: 5 / 7;
}

/* --- Vertical timeline (chronology) -------------------------- */

.timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--sp-5);
	border-left: var(--bw-thin) solid var(--color-border);
}

.timeline-entry {
	position: relative;
	padding-bottom: var(--sp-6);
}

.timeline-entry:last-child { padding-bottom: 0; }

.timeline-entry::before {
	content: "";
	position: absolute;
	left: calc(var(--sp-5) * -1 - 5px);
	top: var(--sp-1);
	width: 10px;
	height: 10px;
	background: var(--color-accent);
	border: 2px solid var(--color-bg);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--color-accent);
}

.timeline-entry.is-major::before {
	width: 14px;
	height: 14px;
	top: 0;
	left: calc(var(--sp-5) * -1 - 7px);
}

.timeline-date {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-1);
}

.timeline-title {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: 1.3;
}

.timeline-entry.is-major .timeline-title {
	font-size: var(--fs-h3);
}

.timeline-body {
	margin: 0;
	max-width: 65ch;
	color: var(--color-text);
	font-size: var(--fs-base);
}

.timeline-body a { color: var(--color-link); }

/* Year markers */

.timeline-year {
	position: relative;
	margin: var(--sp-7) 0 var(--sp-4);
	padding-left: var(--sp-5);
	margin-left: calc(var(--sp-5) * -1);
}

.timeline-year:first-child { margin-top: 0; }

.timeline-year::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 50%;
	width: var(--sp-6);
	height: 2px;
	background: var(--color-border-strong);
	transform: translateY(-50%);
}

.timeline-year-label {
	display: inline-block;
	background: var(--color-bg);
	padding: 0 var(--sp-3) 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	letter-spacing: -0.02em;
	position: relative;
	margin-left: var(--sp-5);
}

/* --- Footer -------------------------------------------------- */

.site-footer {
	margin-top: var(--sp-9);
	padding-block: var(--sp-6);
	border-top: var(--bw-thin) solid var(--color-footer-border);
	background: var(--color-footer-bg);
}

.site-footer-inner {
	max-width: var(--width-page);
	margin-inline: auto;
	padding-inline: var(--sp-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-sm);
	color: var(--color-footer-text);
}

@media (min-width: 720px) {
	.site-footer-inner {
		padding-inline: var(--sp-6);
	}
}

.site-footer a {
	color: var(--color-footer-link);
}

/* ============================================================
   Legacy content-function output styling
   ============================================================
   Content functions in functions_custom.php emit BS2-era markup
   with their own class names (#champions, .title, .contender,
   #archive, .archiverow1/2, etc.). The rules below give that
   output a coherent look inside the museum chrome without
   touching the PHP. As we refactor functions to emit semantic
   markup, these rules can shrink.
   ============================================================ */

/* Container resets — the function output drops these IDs as the
   outermost wrapper. Give them sensible page-level styling. */

#rosterlist,
#champions,
#archive,
#archives,
#roleplays,
#news,
#titlehistory,
#winlossrecords,
#cardpreview,
#artgallery,
#bio {
	max-width: var(--width-page);
	margin: 0 auto;
	padding-block: var(--sp-5);
}

/* Roster list — table-based output from rosterlist() */

#rosterlist h1.backstage {
	font-size: var(--fs-h2);
	margin: 0 0 var(--sp-3);
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-4);
}

#rosterlist > p {
	margin: 0 0 var(--sp-5);
	padding-bottom: var(--sp-3);
	border-bottom: var(--bw-thin) solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

#rosterlist > p a {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--fw-medium);
	margin-right: var(--sp-2);
}

#rosterlist > table {
	width: 100%;
	border-collapse: collapse;
}

#rosterlist > table > tbody > tr,
#rosterlist > table > tr {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
	padding: var(--sp-3);
	background: var(--color-bg-elevated);
	border: var(--bw-thin) solid var(--color-border);
	margin-bottom: var(--sp-3);
}

@media (min-width: 560px) {
	#rosterlist > table > tbody > tr,
	#rosterlist > table > tr {
		grid-template-columns: 125px 1fr;
	}
}

#rosterlist td {
	padding: 0;
	vertical-align: top;
}

#rosterlist td img {
	width: 125px;
	height: auto;
	display: block;
	background: var(--color-bg-alt);
}

#rosterlist .name {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	margin-bottom: var(--sp-1);
	color: var(--color-text);
}

#rosterlist .titlename {
	display: inline-block;
	padding: 2px 6px;
	background: var(--color-accent);
	color: var(--color-accent-text);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--fw-medium);
	margin: 0 0 var(--sp-1);
}

#rosterlist .rpname {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

#rosterlist h2.backstage {
	font-size: var(--fs-h3);
	margin: var(--sp-5) 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thin) solid var(--color-border);
}

/* Archives — show filter from museumshowfiltercards(): All / each weekly show / Specials /
   PPV, linked through /archives/<filter>. Same buttons as SCCW's era switch. */

/* Grouped in a panel like the results page's Card list (.match-toc) */
.show-filter {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-3);
	background: var(--color-bg-alt);
	border-left: var(--bw-thick) solid var(--color-accent);
}

.show-filter h3 {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thin) solid var(--color-border);
}

/* Phones: an even grid rather than ragged rows */
.show-filter-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: var(--sp-2);
}

@media (min-width: 720px) {
	.show-filter-buttons {
		display: flex;
		flex-wrap: wrap;
	}
}

.show-filter a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--color-bg);
	padding: var(--sp-2) var(--sp-4);
	border: var(--bw-thin) solid var(--color-border);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.show-filter a:hover {
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.show-filter a.is-active {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}

/* Archives — table.archive output from archives() */

/* PRIME: a show's archive note, printed under its main event */
table.archive .archive-note {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: 1.5;
}

#archive h1,
#archives h1 {
	font-size: var(--fs-h2);
	margin: 0 0 var(--sp-3);
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-4);
}

table.archive {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-5);
}

table.archive tr.archiveheading td {
	padding: var(--sp-3) var(--sp-2);
	border-bottom: var(--bw-thick) solid var(--color-border-strong);
	font-weight: var(--fw-bold);
	font-family: var(--font-body);
	text-transform: uppercase;
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	text-align: left;
}

table.archive tr.archiverow1 td,
table.archive tr.archiverow2 td {
	padding: var(--sp-3) var(--sp-2);
	border-bottom: var(--bw-thin) solid var(--color-border);
	vertical-align: top;
}

table.archive tr.archiverow2 td {
	background: var(--color-bg-alt);
}

table.archive tr:hover td {
	background: var(--color-bg-alt);
}

/* Column two is the date in the show archive. archives() sets width=80 (PCW) or
   width=100 (PRIME) inline, which is too narrow for "17 Apr 2004" and wraps it onto
   two lines. Sizing to content keeps it on one line and hands the slack to the event
   name, which is what people scan for.

   Scoped to the results table - a direct child of #archive - because the news archive
   prints its year and category filters in a table.archive of their own, inside a form,
   and these widths turn that filter row into a squashed mess. */

#archive > table.archive td:nth-child(2) {
	white-space: nowrap;
	width: 1%;
}

#archive > table.archive td:first-child {
	width: auto;
	min-width: 14em;
}

@media (max-width: 719px) {
	#archive > table.archive td:first-child {
		min-width: 0;
	}
}

/* News archive: Title | Poster | Date, sized through the col elements that
   content.php emits. The date column holds "17 Apr 2004" and should not wrap;
   the title takes whatever is left. */

#archive > table.archive col.archivecol1 { width: auto; }
#archive > table.archive col.archivecol2 { width: 18%; }
#archive > table.archive col.archivecol3 { width: 8em; }

/* Only the news archive (the table with col.archivecol3). The results archive's third
   column is PRIME's main event and note, or PCW/SCCW's location, which must wrap. */
#archive > table.archive:has(col.archivecol3) thead th:nth-child(3),
#archive > table.archive:has(col.archivecol3) tbody td:nth-child(3) {
	white-space: nowrap;
}

/* The filter row: label, control, label, control. Left to itself the table gives
   the labels as much room as the dropdowns, which reads as four columns of nothing
   in particular. */

#archive form table.archive {
	width: auto;
	margin: var(--sp-4) 0 var(--sp-5);
	border-collapse: separate;
	border-spacing: var(--sp-2) 0;
}

#archive form table.archive td {
	padding: var(--sp-2) 0;
	border: 0;
	vertical-align: middle;
	white-space: nowrap;
	width: auto;
	min-width: 0;
}

#archive form table.archive td:nth-child(odd) {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	padding-right: var(--sp-1);
}

#archive form table.archive tr:hover td {
	background: none;
}

@media (max-width: 719px) {
	#archive form table.archive,
	#archive form table.archive tbody,
	#archive form table.archive tr,
	#archive form table.archive td {
		display: block;
		width: 100%;
	}

	#archive form table.archive td:nth-child(even) {
		margin-bottom: var(--sp-3);
	}

	#archive form table.archive .dropdown {
		width: 100%;
	}
}

/* News archive uses thead+tbody with classes */

#archive table.archive thead th {
	padding: var(--sp-3) var(--sp-2);
	border-bottom: var(--bw-thick) solid var(--color-border-strong);
	font-weight: var(--fw-bold);
	font-family: var(--font-body);
	text-transform: uppercase;
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	text-align: left;
}

/* Year/category filter form on news archive */

#archive form table {
	margin: var(--sp-3) 0;
}

#archive .dropdown {
	padding: var(--sp-2) var(--sp-3);
	border: var(--bw-thin) solid var(--color-border-strong);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
}

/* Champions */

#champions h2.title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	margin: var(--sp-6) 0 var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thick) solid var(--color-border-strong);
	letter-spacing: -0.015em;
}

#champions h2.title:first-of-type { margin-top: 0; }

#champions h2.title a {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent) !important;
	float: right;
	margin-top: var(--sp-2);
}

#champions h4.contender {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
	margin: var(--sp-4) 0 var(--sp-2);
}

#champions img.champion {
	background: var(--color-bg-alt);
	padding: 0;
	margin: 0 var(--sp-5) var(--sp-3) 0;
	border: var(--bw-thin) solid var(--color-border);
}

#champions a {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
}

/* Roleplay board */

#roleplays > table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sp-5);
}

#roleplays > table > tbody > tr,
#roleplays > table > tr {
	display: grid;
	grid-template-columns: 125px 1fr;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

#roleplays td {
	padding: 0;
	vertical-align: top;
}

#roleplays td img {
	background: var(--color-bg-alt);
	width: 125px;
	height: auto;
	display: block;
}

#roleplays b {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
}

/* Pagination buttons inside #roleplays */

#roleplays .pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	justify-content: center;
	margin: var(--sp-6) 0;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
}

#roleplays .pagination a,
#roleplays .pagination strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--sp-2);
	text-decoration: none;
	border: var(--bw-thin) solid var(--color-border);
	background: var(--color-bg-elevated);
}

#roleplays .pagination strong {
	background: var(--color-text);
	color: var(--color-bg);
	border-color: var(--color-text);
}

#roleplays .pagination a:hover {
	border-color: var(--color-border-strong);
}

/* Search / filter form inside #roleplays + #archive */

.rpsearchbar,
#archive form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-3);
	background: var(--color-bg-alt);
	margin-bottom: var(--sp-5);
}

.fieldtext200 {
	padding: var(--sp-2) var(--sp-3);
	border: var(--bw-thin) solid var(--color-border-strong);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	min-width: 200px;
	font-size: var(--fs-sm);
}

.button {
	padding: var(--sp-2) var(--sp-4);
	background: var(--color-text);
	color: var(--color-bg);
	border: var(--bw-thin) solid var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	cursor: pointer;
}

.button:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-text);
}

/* News list / single article */

#news h2.title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	margin: 0 0 var(--sp-3);
	letter-spacing: -0.015em;
}

#news hr {
	border: 0;
	border-top: var(--bw-thin) solid var(--color-border);
	margin: var(--sp-3) 0 var(--sp-4);
}

/* Single results page */

#results {
	max-width: var(--width-page);
	margin: 0 auto;
	padding-block: var(--sp-5);
}

#results h1 {
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-4);
	margin: 0 0 var(--sp-3);
}

#results h6 {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
	text-align: left;
	padding-left: calc(var(--sp-4) + 3px);
	margin: 0 0 var(--sp-6);
}

#results h2.results {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	margin: var(--sp-7) 0 var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thick) solid var(--color-border-strong);
	letter-spacing: -0.015em;
}

#results h3.results {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: var(--sp-4) 0 var(--sp-2);
}

#results .resultsdiv,
#results .midline {
	margin-bottom: var(--sp-4);
}

#results .midline {
	border-top: var(--bw-thin) solid var(--color-border);
	height: 0;
}

/* Headshots row above each match. PRIME's results function emits them as
   <div class=resultsdiv><div style="text-align:center;"><a><img class=resultsheads>...</a>...</div>
   Force flex on the first <div> child of .resultsdiv so headshots sit
   side by side regardless of the global img { display: block } reset. */
#results .resultsdiv > div:first-child {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}

#results .resultsdiv > div:first-child > a {
	display: inline-block;
	line-height: 0;
	flex: 0 0 auto;
}

#results img.resultsheads {
	display: block !important;
	background: var(--color-bg-alt);
	border: var(--bw-thin) solid var(--color-border);
	margin: 0;
}

/* Bio pages — biography.php switch output */

#bio {
	max-width: var(--width-page);
	margin: 0 auto;
	padding-block: var(--sp-5);
}

#bio h1 {
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-4);
	margin: 0 0 var(--sp-5);
}

#bio h2.bioh2 {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	margin: var(--sp-6) 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thick) solid var(--color-border-strong);
}

/* Content functions emit bare h3 subheadings between <br>-separated lines
   (prestige, history, appearances). The global heading reset leaves space
   below a heading and none above, so each one collides with the list that
   precedes it. */

#bio h3,
#bio h4 {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	margin: var(--sp-5) 0 var(--sp-2);
}

/* A subheading opening a section sits under the section rule already. */

#bio h2.bioh2 + h3,
#bio h2.bioh2 + h4 {
	margin-top: var(--sp-2);
}

#bio > :first-child {
	margin-top: 0;
}

#bio .biotoptable {
	margin-bottom: var(--sp-5);
}

#bio .biotable {
	width: 100%;
}

#bio .biotablerow {
	display: grid;
	grid-template-columns: 1fr;
	padding: var(--sp-2) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

@media (min-width: 560px) {
	#bio .biotablerow {
		grid-template-columns: 160px 1fr;
		gap: var(--sp-4);
	}
}

#bio .biofieldheading {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
}

#bio img.biobioimage {
	float: right;
	margin: 0 0 var(--sp-4) var(--sp-5);
	background: var(--color-bg-alt);
	border: var(--bw-thin) solid var(--color-border);
}

#bio table {
	width: 100%;
	border-collapse: collapse;
}

#bio table td {
	padding: var(--sp-2) 0;
	vertical-align: top;
}

/* Title history — function titlehistorydisplay() emits reign-card markup
   with #titlehistory-scoped class names: .reign-card / .reign-header /
   .reign-info / .reign-champ / .reign-meta / .reign-days / .reign-detail /
   .reign-event / .reign-match / .reign-summary / .reign-defenses /
   .defense-row / .defense-marker / .defense-date / .defense-summary /
   .reign-no-defenses. Theme-aware via museum CSS variables. */

#titlehistory h1 {
	border-left: var(--bw-thick) solid var(--color-accent);
	padding-left: var(--sp-4);
	margin: 0 0 var(--sp-5);
}

#titlehistory .reign-card {
	margin: 0 0 var(--sp-5);
	border: var(--bw-thin) solid var(--color-border);
	background: var(--color-bg-elevated);
}

#titlehistory .reign-header {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: var(--color-bg-alt);
	color: var(--color-text);
	border-left: var(--bw-thick) solid var(--color-accent);
	border-bottom: var(--bw-thin) solid var(--color-border);
	align-items: center;
}

#titlehistory .reign-headshot img {
	width: 60px;
	height: auto;
	display: block;
	background: var(--color-border);
}

#titlehistory .reign-info { min-width: 0; }

#titlehistory .reign-champ {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	display: block;
}

#titlehistory .reign-champ a { color: inherit; text-decoration: none; }
#titlehistory .reign-champ a:hover { text-decoration: underline; }

#titlehistory .reign-meta {
	font-size: var(--fs-sm);
	margin-top: 2px;
}

#titlehistory .reign-days {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-align: right;
	white-space: nowrap;
	color: var(--color-text-muted);
}

#titlehistory .reign-detail {
	padding: var(--sp-4);
	border-bottom: var(--bw-thin) solid var(--color-border);
	color: var(--color-text);
}

#titlehistory .reign-event {
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

#titlehistory .reign-match a {
	color: var(--color-link);
	text-decoration: none;
}

#titlehistory .reign-match a:hover { text-decoration: underline; }

#titlehistory .reign-summary {
	margin: var(--sp-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-style: italic;
}

#titlehistory .reign-defenses {
	background: var(--color-bg-alt);
}

#titlehistory .defense-row {
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	border-bottom: 1px dotted var(--color-border);
}

#titlehistory .defense-row:last-child { border-bottom: 0; }

#titlehistory .defense-marker {
	color: var(--color-accent);
	font-family: var(--font-mono);
	font-weight: var(--fw-bold);
	margin-right: var(--sp-2);
}

#titlehistory .defense-row a {
	color: var(--color-text);
	text-decoration: none;
}

#titlehistory .defense-row a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

#titlehistory .defense-date {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-left: var(--sp-2);
}

#titlehistory .defense-summary {
	display: block;
	margin-top: 2px;
	margin-left: var(--sp-5);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

#titlehistory .reign-no-defenses {
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	font-style: italic;
	background: var(--color-bg-alt);
}

/* Card preview */

#cardpreview h6 {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	text-transform: none;
	letter-spacing: -0.015em;
	color: var(--color-text);
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4);
	background: var(--color-bg-alt);
	border-left: var(--bw-thick) solid var(--color-accent);
	background-image: none !important;
}

#cardpreview h2.cardpreview {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	font-weight: var(--fw-bold);
	margin: var(--sp-5) 0 var(--sp-1);
}

#cardpreview h3.cardpreview {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	margin: 0 0 var(--sp-3);
}

#cardpreview h4.cardpreview {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	color: var(--color-text);
	margin: 0 0 var(--sp-4);
}

/* --- Utility classes ----------------------------------------- */

.u-mt-0  { margin-top: 0 !important; }
.u-mt-5  { margin-top: var(--sp-5) !important; }
.u-mb-0  { margin-bottom: 0 !important; }
.u-text-center { text-align: center; }
.u-no-shrink   { flex-shrink: 0; }