/* ==========================================================================
   WINNERA — BASE
   Reset, typography, layout primitives, ornaments, accessibility.
   ========================================================================== */

/* ---- Self-hosted display face -------------------------------------------
   Martel ships with this repository (SIL Open Font License) and is reused
   here rather than pulling a webfont from a third-party CDN. It is a heavy
   bookish serif, which is the right voice for a monumental fantasy world.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Winnera Display";
	src: url("../fonts/winnera-display.ttf") format("truetype");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets must clear the fixed header */
	scroll-padding-top: calc(var(--wn-header-h) + var(--wn-space-5));
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--wn-bg);
	color: var(--wn-text);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-body);
	line-height: var(--wn-leading-body);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Persistent film grain over the whole world. Pointer-transparent. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--wn-noise);
	opacity: var(--wn-grain-opacity);
	pointer-events: none;
	z-index: var(--wn-z-tooltip);
	mix-blend-mode: overlay;
}

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

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--wn-space-4);
	font-family: var(--wn-font-display);
	font-weight: 700;
	line-height: var(--wn-leading-snug);
	letter-spacing: var(--wn-track-title);
	color: var(--wn-text);
	text-wrap: balance;
}

h1 { font-size: var(--wn-text-h1); line-height: var(--wn-leading-tight); }
h2 { font-size: var(--wn-text-h2); }
h3 { font-size: var(--wn-text-h3); }
h4 { font-size: var(--wn-text-h4); }

p { margin: 0 0 var(--wn-space-4); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--wn-text-gold);
	text-decoration: none;
	transition: color var(--wn-dur) var(--wn-ease);
}

a:hover { color: var(--wn-bone); }

strong, b { font-weight: 700; color: var(--wn-bone); }

small { font-size: var(--wn-text-small); }

hr {
	height: 1px;
	margin: var(--wn-space-6) 0;
	border: 0;
	background-image: var(--wn-rule-gold);
}

::selection {
	background: rgba(200, 163, 90, 0.28);
	color: var(--wn-bone);
}

/* ---- Focus: always visible, never removed -------------------------------- */

:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--wn-gold);
	outline-offset: 3px;
	border-radius: var(--wn-radius-sm);
}

.wn-skip-link {
	position: absolute;
	left: var(--wn-space-4);
	top: -100%;
	z-index: calc(var(--wn-z-modal) + 1);
	padding: var(--wn-space-3) var(--wn-space-5);
	background: var(--wn-gold);
	color: var(--wn-text-inverse);
	font-weight: 700;
	letter-spacing: var(--wn-track-title);
	border-radius: var(--wn-radius);
	transition: top var(--wn-dur) var(--wn-ease);
}

.wn-skip-link:focus {
	top: var(--wn-space-4);
	color: var(--wn-text-inverse);
}

.wn-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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

.wn-container {
	width: 100%;
	max-width: var(--wn-container);
	margin-inline: auto;
	padding-inline: var(--wn-gutter);
}

.wn-container--wide { max-width: var(--wn-container-wide); }
.wn-container--text { max-width: var(--wn-container-text); }

.wn-section {
	position: relative;
	padding-block: var(--wn-section-y);
}

.wn-section--tight { padding-block: var(--wn-section-y-tight); }

/* Alternating ground so the page reads as strata of rock, not a card list */
.wn-section--sunken {
	background:
		linear-gradient(180deg, var(--wn-bg-deep), var(--wn-surface-sunken) 50%, var(--wn-bg-deep));
}

.wn-section--stone {
	background: var(--wn-stone);
	box-shadow: var(--wn-inset-top);
}

/* Full-bleed atmospheric ground */
.wn-section--mist::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--wn-mist);
	pointer-events: none;
}

.wn-section > .wn-container { position: relative; z-index: var(--wn-z-base); }

/* ---- Section headers ------------------------------------------------------ */

.wn-section-head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.wn-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.wn-section-head--wide { max-width: none; }

.wn-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wn-space-3);
	margin-bottom: var(--wn-space-4);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-gold);
}

.wn-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wn-gold));
	flex: none;
}

.wn-section-head--center .wn-eyebrow::after {
	content: "";
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, var(--wn-gold), transparent);
	flex: none;
}

.wn-section-title {
	margin: 0 0 var(--wn-space-4);
	font-size: var(--wn-text-h2);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wn-section-lead {
	max-width: 58ch;
	font-size: var(--wn-text-lead);
	color: var(--wn-text-secondary);
}

.wn-section-head--center .wn-section-lead { margin-inline: auto; }

/* ---- Ornaments ------------------------------------------------------------ */

.wn-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background-image: var(--wn-rule-gold);
}

/* Diamond-and-rule divider used between major movements of the page */
.wn-divider {
	display: flex;
	align-items: center;
	gap: var(--wn-space-4);
	color: var(--wn-gold);
}

.wn-divider::before,
.wn-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background-image: var(--wn-rule-gold);
}

.wn-divider__mark {
	width: 9px;
	height: 9px;
	flex: none;
	transform: rotate(45deg);
	border: 1px solid var(--wn-gold);
	background: rgba(200, 163, 90, 0.16);
}

/* Corner brackets — the portal's "forged frame" motif */
.wn-framed {
	position: relative;
}

.wn-framed::before,
.wn-framed::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid var(--wn-border-strong);
	pointer-events: none;
}

.wn-framed::before {
	top: -1px; left: -1px;
	border-right: 0;
	border-bottom: 0;
}

.wn-framed::after {
	bottom: -1px; right: -1px;
	border-left: 0;
	border-top: 0;
}

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

.wn-numeral {
	font-family: var(--wn-font-display);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.02em;
}

.wn-tabular { font-variant-numeric: tabular-nums; }

.wn-label {
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

.wn-muted { color: var(--wn-text-muted); }
.wn-secondary { color: var(--wn-text-secondary); }
.wn-gold { color: var(--wn-text-gold); }

.wn-stack > * + * { margin-top: var(--wn-space-4); }
.wn-stack-sm > * + * { margin-top: var(--wn-space-2); }
.wn-stack-lg > * + * { margin-top: var(--wn-space-6); }

.wn-flow { display: flex; flex-wrap: wrap; gap: var(--wn-space-3); }
.wn-flow--center { justify-content: center; }

@media print {
	body::after { display: none; }
	.wn-header, .wn-worldbar, .wn-footer { display: none !important; }
}