/* ----------------------------------------------------------------------
   components.css — buttons (corner-mark primary, ghost secondary, tertiary),
   pull-quote, drop-cap, paired hair-rule, pip-glyph ornament,
   Roman numeral headers, marginal mono notes, colophon, badges
---------------------------------------------------------------------- */

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	white-space: nowrap;
}

/* --- Primary: corner-mark plate --- */
.btn-primary {
	background: var(--c-accent);
	color: var(--c-white);
	border: none;
	padding: var(--s-12) var(--s-28);
	border-radius: var(--r-sm);
	box-shadow: none;
}
.btn-primary:hover { background: var(--c-accent-hover); color: var(--c-white); text-decoration: none; }
.btn-primary .btn-primary__label { position: relative; z-index: 1; }
.btn-primary__corner {
	position: absolute;
	width: 6px;
	height: 6px;
	pointer-events: none;
}
.btn-primary__corner--tl { top: 3px;    left: 3px;  border-top:    2px solid var(--c-white); border-left:  2px solid var(--c-white); }
.btn-primary__corner--tr { top: 3px;    right: 3px; border-top:    2px solid var(--c-white); border-right: 2px solid var(--c-white); }
.btn-primary__corner--bl { bottom: 3px; left: 3px;  border-bottom: 2px solid var(--c-white); border-left:  2px solid var(--c-white); }
.btn-primary__corner--br { bottom: 3px; right: 3px; border-bottom: 2px solid var(--c-white); border-right: 2px solid var(--c-white); }

/* Oat variant — used on dark-violet special bg */
.btn-primary--oat { background: var(--c-accent-sec); color: var(--c-bg); }
.btn-primary--oat:hover { background: #E8CFA7; color: var(--c-bg); }
.btn-primary--oat .btn-primary__corner--tl,
.btn-primary--oat .btn-primary__corner--tr,
.btn-primary--oat .btn-primary__corner--bl,
.btn-primary--oat .btn-primary__corner--br {
	border-color: var(--c-bg);
}

/* Size variants */
.btn-primary--sm { padding: var(--s-8) var(--s-24); font-size: 0.6875rem; }
.btn-primary--lg { padding: var(--s-16) var(--s-40); font-size: 0.875rem; }

/* --- Secondary: ghost rule --- */
.btn-secondary {
	background: transparent;
	color: var(--c-accent);
	border: 1px solid var(--c-accent);
	padding: calc(var(--s-12) - 1px) calc(var(--s-28) - 1px);
	border-radius: var(--r-sm);
}
.btn-secondary:hover {
	background: rgba(141, 105, 145, 0.08);
	border-width: 2px;
	padding: calc(var(--s-12) - 2px) calc(var(--s-28) - 2px);
	color: var(--c-accent-hover);
	text-decoration: none;
}
.btn-secondary--light {
	color: var(--c-white);
	border-color: var(--c-white);
}
.btn-secondary--light:hover {
	background: rgba(244, 235, 214, 0.06);
	color: var(--c-white);
	border-color: var(--c-white);
}

/* --- Tertiary: text link --- */
.btn-tertiary,
.text-link {
	color: var(--c-accent);
	background: none;
	border: none;
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.2px;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness var(--dur) var(--ease), color var(--dur) var(--ease);
	padding: 0;
}
.btn-tertiary:hover,
.text-link:hover { text-decoration-thickness: 2px; color: var(--c-accent-hover); }

.text-link--oat { color: var(--c-accent-sec); }
.text-link--oat:hover { color: var(--c-white); }

/* ---------- Paired hair-rule (signature) ---------- */
.rule-paired {
	height: 8px;
	background:
		linear-gradient(to bottom,
			var(--c-accent) 0 3px,
			transparent 3px 7px,
			var(--c-white) 7px 8px);
	margin: var(--s-64) 0;
}
.rule-paired--tight  { margin: var(--s-32) 0; }
.rule-paired--hero   { margin: 0; }

/* ---------- Pip-glyph ornament ---------- */
.ornament {
	display: flex;
	align-items: center;
	gap: var(--s-16);
	justify-content: center;
	margin: var(--s-64) auto;
	max-width: 420px;
	color: var(--c-border);
}
.ornament::before,
.ornament::after {
	content: '';
	flex: 1 1 0;
	height: 1px;
	background: var(--c-border);
}
.ornament__glyph {
	width: 14px;
	height: 14px;
	color: var(--c-accent);
	flex: 0 0 auto;
}

/* Ornament with editorial flourish text */
.ornament--text {
	font-family: var(--f-heading);
	font-style: italic;
	font-weight: 500;
	color: var(--c-accent-sec);
	font-size: 0.9375rem;
	letter-spacing: 0.3px;
}
.ornament--text::before,
.ornament--text::after { flex: 0 0 60px; }

/* ---------- Roman numeral header ---------- */
.roman-header {
	font-family: var(--f-heading);
	font-weight: 400;
	font-style: italic;
	font-size: 0.875rem;
	color: var(--c-accent-sec);
	display: inline-block;
	width: 48px;
}

/* ---------- Pull quote ---------- */
.pull-quote {
	font-family: var(--f-heading);
	font-style: italic;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--c-white);
	border-left: 3px solid var(--c-accent);
	padding: var(--s-16) 0 var(--s-16) var(--s-24);
	margin: var(--s-40) 0;
}
.pull-quote cite {
	display: block;
	font-family: var(--f-mono);
	font-size: 0.75rem;
	font-style: normal;
	color: var(--c-accent-sec);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-top: var(--s-12);
}

/* ---------- Drop cap ---------- */
.drop-cap::first-letter {
	font-family: var(--f-heading);
	font-weight: 400;
	font-size: 4rem;
	float: left;
	line-height: 0.9;
	padding-right: var(--s-8);
	padding-top: var(--s-4);
	color: var(--c-accent);
}

/* ---------- Marginal mono note ---------- */
.margin-note {
	font-family: var(--f-mono);
	font-size: 0.75rem;
	color: var(--c-accent-sec);
	letter-spacing: 0.5px;
	font-style: italic;
	margin: var(--s-16) 0;
	display: block;
}
@media (min-width: 1024px) {
	.margin-note-wrap { position: relative; }
	.margin-note-wrap .margin-note {
		position: absolute;
		left: calc(-1 * var(--s-160));
		top: 0;
		width: 140px;
		font-style: normal;
	}
}

/* ---------- Mono labels ---------- */
.mono-label {
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--c-accent);
	display: inline-block;
}
.mono-meta {
	font-family: var(--f-mono);
	font-size: 0.75rem;
	color: var(--c-accent-sec);
	letter-spacing: 0.5px;
}

/* ---------- 18+ badge (square with 18+ numeral) ---------- */
.badge-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--c-accent);
	color: var(--c-white);
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.5px;
	border-radius: var(--r-sm);
	flex: 0 0 36px;
}

/* Badge pill (tournament format, sport category) */
.badge {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--c-accent-sec);
}
.badge--accent {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* ---------- Ledger row (plain mono row for lists inside sections) ---------- */
.ledger-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-24);
	padding: var(--s-12) 0;
	border-bottom: 1px solid var(--c-border);
	font-family: var(--f-body);
	align-items: baseline;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row__label {
	font-family: var(--f-body);
	color: var(--c-text);
	font-size: 1rem;
}
.ledger-row__label small {
	display: block;
	font-family: var(--f-body);
	color: var(--c-text-dim);
	font-size: 0.875rem;
	margin-top: var(--s-4);
}
.ledger-row__value {
	font-family: var(--f-mono);
	color: var(--c-accent-sec);
	font-size: 0.9375rem;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

/* ---------- Colophon ---------- */
.colophon {
	font-family: var(--f-mono);
	font-size: 0.75rem;
	color: var(--c-text-dim);
	letter-spacing: 0.5px;
	text-align: center;
	line-height: 1.6;
}

/* ---------- Table (mono ledger) ---------- */
.mono-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--f-mono);
	font-size: 0.875rem;
}
.mono-table th,
.mono-table td {
	padding: var(--s-12) var(--s-16);
	text-align: left;
	border-bottom: 1px solid var(--c-border);
	color: var(--c-text);
}
.mono-table th {
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 0.6875rem;
	color: var(--c-accent);
}
.mono-table tr:last-child td { border-bottom: none; }
.mono-table td.value-col {
	color: var(--c-accent-sec);
	white-space: nowrap;
	text-align: right;
}

/* Note box (oat text on dark) */
.note-oat {
	font-family: var(--f-mono);
	font-size: 0.8125rem;
	color: var(--c-accent-sec);
	border-top: 1px solid var(--c-border);
	padding-top: var(--s-16);
	margin-top: var(--s-24);
	letter-spacing: 0.3px;
}

/* Small print */
.small-print {
	font-size: 0.8125rem;
	color: var(--c-text-dim);
	line-height: 1.6;
}

/* reCAPTCHA attribution */
.recaptcha-attribution {
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	color: var(--c-text-dim);
	letter-spacing: 0.3px;
	margin-top: var(--s-16);
	line-height: 1.6;
}
.recaptcha-attribution a { color: var(--c-accent-sec); }

/* ---------- Map embed (Google Maps iframe) ---------- */
.map-embed {
	margin: 0;
	padding: 2px;
	background: var(--c-accent);
	border-radius: var(--r-sm);
	display: block;
}
.map-embed__inner {
	padding: 8px;
	background: var(--c-white);
	border-radius: calc(var(--r-sm) - 1px);
}
.map-embed__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--c-surface);
	overflow: hidden;
	border-radius: 0;
}
.map-embed__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* Remove colour from dark theme — map stays Google default */
	filter: grayscale(12%) contrast(96%);
}
.map-embed__caption {
	font-family: var(--f-mono);
	font-size: 0.75rem;
	letter-spacing: 1px;
	color: var(--c-accent-sec);
	margin-top: var(--s-16);
	text-align: center;
}
.map-embed__link {
	display: inline-block;
	margin-top: var(--s-8);
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--c-accent-sec);
}
.map-embed__link:hover { color: var(--c-white); }

/* ---------- Plate framing (image figures) ---------- */
.plate {
	margin: 0;
	padding: 2px;
	background: var(--c-accent);
	border-radius: var(--r-sm);
	display: block;
}
.plate__inner {
	padding: 8px;
	background: var(--c-white);
	border-radius: calc(var(--r-sm) - 1px);
}
.plate__inner img,
.plate__inner picture {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}
.plate__caption {
	font-family: var(--f-mono);
	font-size: 0.75rem;
	letter-spacing: 1px;
	color: var(--c-accent-sec);
	margin-top: var(--s-16);
	text-align: center;
}

/* ---------- Intros (drop-cap first paragraph) ---------- */
.intro { font-size: 1.125rem; line-height: 1.7; }