/* ==========================================================================
   WINNERA — HOMEPAGE CENTRE MODULES
   --------------------------------------------------------------------------
   REVISION (visual direction): Stage 1's full-bleed sections became compact
   portal modules inside the centre zone. The composition rule is unchanged and
   still binding — the page must never read as a repeating grid of identical
   rectangles. Every module below uses a distinct internal structure: a
   cinematic banner, a dial-and-ledger split, a chronicle rail, a measuring
   rod, a staggered slab, an asymmetric mosaic, a chapter ledger.

   Loaded on the homepage only. The portal shell and both rails live in
   08-portal.css and load everywhere.
   ========================================================================== */

/* ==========================================================================
   1. WORLD BANNER
   The world layer itself is in 08-portal.css; this is the content plate that
   sits over it. Roughly half the height of the Stage 1 hero.
   ========================================================================== */

/* The hero is NOT a panel: no background, no border, no radius. The world
   layer behind the portal shows through it directly. */
.wn-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 40vw, 560px);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.wn-banner::before,
.wn-banner::after { display: none; }

/* An atmospheric scrim rather than a plate — dense under the type, fully
   transparent at the top so the environment stays visible. */
.wn-banner__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1rem, 0.5rem + 1.5vw, 2rem)
	         clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: linear-gradient(0deg,
		rgba(6, 7, 9, 0.90) 0%,
		rgba(6, 7, 9, 0.66) 38%,
		rgba(6, 7, 9, 0.24) 68%,
		transparent 100%);
	/* Fade the scrim's own edges so it never reads as a rectangle */
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.wn-banner__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wn-space-3);
	margin: 0 0 var(--wn-space-2);
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wn-gold);
}

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

/* Sits directly on the world, so it carries its own shadow plate */
.wn-banner__title {
	position: relative;
	margin: 0;
	font-family: var(--wn-font-display);
	font-size: clamp(2.75rem, 1rem + 6vw, 6rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: var(--wn-track-hero);
	text-transform: uppercase;
	background: linear-gradient(180deg, #FFFBF2 10%, #E4D7BB 48%, #A08D68 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wn-bone);
	filter: drop-shadow(0 3px 26px rgba(0, 0, 0, 0.9))
	        drop-shadow(0 0 42px rgba(200, 163, 90, 0.22));
}

.wn-banner__promise {
	max-width: 34ch;
	margin: var(--wn-space-3) 0 0;
	font-family: var(--wn-font-display);
	font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
	line-height: 1.3;
	color: var(--wn-text);
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}

.wn-banner__eyebrow { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }

.wn-banner__promise em { font-style: normal; color: var(--wn-gold-bright); }

/* Season identity — engraved on a rule, not enclosed in a box */
.wn-banner__season {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wn-space-3);
	margin-top: var(--wn-space-5);
	padding-top: var(--wn-space-4);
	border-top: 1px solid rgba(200, 163, 90, 0.28);
}

.wn-banner__season-mark {
	width: 8px; height: 8px;
	flex: none;
	transform: rotate(45deg) translateY(-2px);
	border: 1px solid var(--wn-gold);
	background: rgba(200, 163, 90, 0.28);
}

.wn-banner__season-id {
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-label);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-gold);
}

/* Current chapter — utility information, so the body face */
.wn-banner__chapter {
	padding: 2px 8px;
	border: 1px solid var(--wn-border);
	border-radius: var(--wn-radius-sm);
	background: rgba(200, 163, 90, 0.08);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wn-gold-bright);
	white-space: nowrap;
}

/* An important world name — decorative face is correct here */
.wn-banner__season-name {
	font-family: var(--wn-font-display);
	font-size: clamp(1.125rem, 1rem + 0.7vw, 1.6rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wn-bone);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

/* Headline readouts — body face, because these are statistics */
.wn-banner__readout {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 0.75rem + 2vw, 3rem);
	margin-top: var(--wn-space-5);
}

.wn-banner__stat { display: flex; flex-direction: column; gap: 3px; }

.wn-banner__stat-value {
	font-family: var(--wn-font-numeric);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wn-bone);
	font-variant-numeric: tabular-nums lining-nums;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.wn-banner__stat-value--gold { color: var(--wn-gold-bright); }
.wn-banner__stat-value--offline { color: var(--wn-text-muted); }

.wn-banner__stat-of {
	font-size: 0.55em;
	font-weight: 600;
	color: var(--wn-text-muted);
}

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

.wn-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wn-space-2);
	margin-top: var(--wn-space-6);
}

@media (max-width: 460px) {
	.wn-banner__actions { display: grid; grid-template-columns: 1fr; }
	.wn-banner__actions .wn-btn { width: 100%; }
}

/* ==========================================================================
   2. CURRENT SEASON — dial and ledger side by side
   ========================================================================== */

.wn-season2 {
	display: grid;
	gap: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
	align-items: start;
}

@media (min-width: 720px) {
	.wn-season2 { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.wn-season2__dial { text-align: center; }

/* Positioning context for the face plaque, which must overlay the ring
   rather than stack below it as a separate block. */
.wn-dial--compact { position: relative; width: min(250px, 66vw); margin-inline: auto; }

/* Engraved stone core, lit from above. Replaces the transparent face that
   made the dial read as an empty black circle. Centered and layered over
   the SVG ring so the dial reads as one object, not two stacked shapes. */
.wn-dial--compact .wn-dial__face {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 74%;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	gap: 0;
	background:
		radial-gradient(circle at 50% 32%, rgba(200, 163, 90, 0.16), transparent 64%),
		linear-gradient(180deg, #1C1E24 0%, #121419 52%, #0B0D11 100%);
	border: 1px solid rgba(200, 163, 90, 0.20);
	box-shadow:
		inset 0 2px 20px rgba(0, 0, 0, 0.85),
		inset 0 0 0 1px rgba(255, 255, 255, 0.03),
		0 10px 30px rgba(0, 0, 0, 0.6);
}

.wn-dial__inner-ring {
	fill: none;
	stroke: rgba(200, 163, 90, 0.22);
	stroke-width: 1;
}

.wn-dial__inner-ring--faint { stroke: rgba(200, 163, 90, 0.10); }

.wn-dial__tick--major { stroke: rgba(200, 163, 90, 0.55); stroke-width: 1.6; }

/* The track and progress arcs are strokes, not filled discs. Without
   `fill: none` SVG paints each circle's default black fill on top of the
   engraved core and rings beneath it, which is what made the dial read as
   a solid black circle. A heavier stroke keeps season progress legible. */
.wn-dial--compact .wn-dial__progress {
	fill: none;
	stroke: url(#wnDialGradient);
	stroke-linecap: round;
	stroke-width: 6;
}
.wn-dial--compact .wn-dial__track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.07);
	stroke-width: 6;
}

.wn-dial__label {
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-micro);
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wn-gold);
}

.wn-dial--compact .wn-dial__numeral {
	font-family: var(--wn-font-display);
	font-size: clamp(2.25rem, 1rem + 3.6vw, 3rem);
	line-height: 0.95;
	color: var(--wn-gold-bright);
	text-shadow: 0 0 26px rgba(200, 163, 90, 0.35);
}

/* Progress percentage — statistic, so body face */
.wn-dial__percent {
	margin-top: 2px;
	font-family: var(--wn-font-numeric);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wn-bone);
	font-variant-numeric: tabular-nums;
}

.wn-dial--compact .wn-dial__day {
	margin-top: var(--wn-space-2);
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wn-text-secondary);
}

.wn-season2__name {
	margin: var(--wn-space-4) 0 var(--wn-space-1);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-h4);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wn-bone);
}

.wn-season2__tagline {
	margin: 0;
	font-size: var(--wn-text-tiny);
	font-style: italic;
	color: var(--wn-text-muted);
}

.wn-season2__dates {
	display: flex;
	justify-content: space-between;
	margin-top: var(--wn-space-2);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- Metric ledger ------------------------------------------------------
   A dotted-leader definition list: term, engraved leader, value. Deliberately
   not a grid of stat boxes — it reads as a record, and it stays dense. */

.wn-ledger { border-top: 1px solid var(--wn-border); }

.wn-ledger__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wn-space-4);
	padding: var(--wn-space-4) 0;
	border-bottom: 1px solid var(--wn-border-hairline);
}

.wn-ledger__row:last-child { border-bottom: 0; }

.wn-ledger__term {
	display: flex;
	align-items: center;
	gap: var(--wn-space-2);
	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-text-secondary);
}

/* Engraved leader between term and value */
.wn-ledger__rule {
	flex: 1;
	height: 1px;
	min-width: var(--wn-space-5);
	background-image: linear-gradient(90deg, rgba(200, 163, 90, 0.28) 50%, transparent 50%);
	background-size: 5px 1px;
	background-repeat: repeat-x;
	opacity: 0.6;
}

/* Statistic — body face, tabular figures */
.wn-ledger__value {
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-read-sm);
	font-weight: 700;
	line-height: 1;
	color: var(--wn-bone);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

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

/* Current chapter block inside the season module */
.wn-season2__chapter {
	margin-top: var(--wn-space-4);
	padding-top: var(--wn-space-4);
	border-top: 1px solid var(--wn-border-hairline);
	text-align: left;
}

.wn-season2__chapter-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wn-space-2);
}

.wn-season2__chapter-id {
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-micro);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-gold);
}

.wn-season2__chapter-name {
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	color: var(--wn-bone);
}

.wn-season2__chapter-meta {
	margin: var(--wn-space-2) 0 0;
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
	font-variant-numeric: tabular-nums;
}

.wn-season2__ledger .wn-ledger { border-top: 0; }

.wn-season2__ledger .wn-ledger__row { padding-block: var(--wn-space-3); }

.wn-season2__ledger .wn-ledger__value {
	font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.4rem);
}

.wn-season2__note {
	margin: var(--wn-space-4) 0 0;
	font-size: var(--wn-text-tiny);
	line-height: 1.55;
	color: var(--wn-text-muted);
}

/* ==========================================================================
   3. NEWS — the Winnera Chronicle module
   ========================================================================== */

.wn-tickers {
	padding: var(--wn-space-3) var(--wn-space-4);
	background: rgba(200, 163, 90, 0.05);
	border: 1px solid var(--wn-border);
	border-left: 2px solid var(--wn-gold);
	border-radius: var(--wn-radius-sm);
}

/* ==========================================================================
   4. SEASON WORLD GOAL — objective panel
   ========================================================================== */

.wn-goal2 {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wn-space-4);
}

.wn-goal2__lede { flex: 1 1 22ch; min-width: 0; }

.wn-goal2__title {
	margin: 0 0 var(--wn-space-1);
	font-family: var(--wn-font-display);
	font-size: clamp(1.15rem, 1rem + 1vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wn-bone);
}

.wn-goal2__text {
	margin: 0;
	max-width: 52ch;
	font-size: var(--wn-text-small);
	color: var(--wn-text-secondary);
}

.wn-goal2__figure { text-align: right; flex: none; }

.wn-goal2__percent {
	display: block;
	font-family: var(--wn-font-display);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
	font-weight: 800;
	line-height: 0.85;
	color: var(--wn-gold-bright);
	font-variant-numeric: tabular-nums;
}

.wn-goal2__count {
	display: block;
	margin-top: var(--wn-space-2);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-secondary);
	font-variant-numeric: tabular-nums;
}

.wn-goal2__reward {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-3);
	margin-top: var(--wn-space-4);
	padding-top: var(--wn-space-4);
	border-top: 1px solid var(--wn-border-hairline);
	font-size: var(--wn-text-small);
	color: var(--wn-text-secondary);
}

/* ==========================================================================
   5. THE WORLD REMEMBERS — chronicle rail inside the module
   ========================================================================== */

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

.wn-chron__entry {
	position: relative;
	display: flex;
	gap: var(--wn-space-4);
	padding: var(--wn-space-4) var(--wn-module-pad);
	border-bottom: 1px solid var(--wn-border-hairline);
}

.wn-chron__entry:last-child { border-bottom: 0; }
.wn-chron__entry:hover { background: rgba(200, 163, 90, 0.035); }

/* The carved line the chronicle is written against */
.wn-chron__entry::before {
	content: "";
	position: absolute;
	left: calc(var(--wn-module-pad) + 4px);
	top: 0; bottom: 0;
	width: 1px;
	background: var(--wn-border-hairline);
}

.wn-chron__entry:first-child::before { top: 50%; }
.wn-chron__entry:last-child::before { bottom: 50%; }

.wn-chron__mark {
	position: relative;
	z-index: 1;
	flex: none;
	width: 9px; height: 9px;
	margin-top: 0.4rem;
	transform: rotate(45deg);
	background: var(--wn-obsidian);
	border: 1px solid var(--wn-gold);
	box-shadow: 0 0 0 3px var(--wn-surface-sunken);
}

.wn-chron__body { min-width: 0; }

.wn-chron__text {
	margin: 0;
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	line-height: 1.45;
	color: var(--wn-text);
}

.wn-chron__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-3);
	margin: var(--wn-space-2) 0 0;
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
}

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

/* ==========================================================================
   6. GAMEPLAY — asymmetric mosaic, portal proportions
   ========================================================================== */

.wn-mosaic { display: grid; gap: var(--wn-space-3); }

@media (min-width: 700px) {
	.wn-mosaic {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: minmax(132px, auto);
	}

	/* Deliberately uneven: one hero tile, then supporting tiles */
	.wn-tile:nth-child(1) { grid-column: span 4; grid-row: span 2; }
	.wn-tile:nth-child(2) { grid-column: span 2; }
	.wn-tile:nth-child(3) { grid-column: span 2; }
	.wn-tile:nth-child(4) { grid-column: span 2; }
	.wn-tile:nth-child(5) { grid-column: span 2; }
	.wn-tile:nth-child(6) { grid-column: span 2; }
}

.wn-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 132px;
	padding: var(--wn-space-4);
	background: linear-gradient(180deg, #15181D, #0B0D10);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	overflow: hidden;
	transition: border-color var(--wn-dur) var(--wn-ease);
}

.wn-tile:hover { border-color: var(--wn-border-strong); }

/* Atmospheric wash — replaced by commissioned artwork, see docs/ASSETS.md */
.wn-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wn-tile-wash, radial-gradient(ellipse 90% 80% at 25% 0%, rgba(200,163,90,0.10), transparent 65%));
	opacity: 0.85;
	transition: opacity var(--wn-dur-slow) var(--wn-ease);
}

.wn-tile:hover::before { opacity: 1; }

.wn-tile__glyph {
	position: absolute;
	top: var(--wn-space-4);
	right: var(--wn-space-4);
	width: 34px; height: 34px;
	color: var(--wn-gold);
	opacity: 0.2;
	transition: opacity var(--wn-dur) var(--wn-ease);
}

.wn-tile:hover .wn-tile__glyph { opacity: 0.4; }

.wn-tile__body { position: relative; }

.wn-tile__title {
	margin: 0 0 var(--wn-space-1);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-h4);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wn-bone);
}

.wn-tile:nth-child(1) .wn-tile__title { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.85rem); }

.wn-tile__text {
	margin: 0;
	max-width: 42ch;
	font-size: var(--wn-text-tiny);
	line-height: 1.55;
	color: var(--wn-text-secondary);
}

/* Mobile: a scroll-snap rail rather than a tall stack */
@media (max-width: 699px) {
	.wn-mosaic {
		grid-auto-flow: column;
		grid-auto-columns: 74vw;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--wn-space-3);
		scrollbar-width: thin;
	}

	.wn-tile { scroll-snap-align: start; }
}

/* ==========================================================================
   7. SEASON CHAPTERS — the four chapter timeline
   State is carried by the mark glyph, a text label and colour together, so a
   chapter's status never depends on colour alone.
   ========================================================================== */

.wn-chapters-track {
	position: relative;
	display: grid;
	gap: var(--wn-space-5);
	margin: 0 0 var(--wn-space-6);
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) and (max-width: 899px) {
	.wn-chapters-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.wn-chapters-track {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wn-space-4);
	}

	/* The engraved rail the chapters sit on */
	.wn-chapters-track::before {
		content: "";
		position: absolute;
		left: 8%; right: 8%;
		top: 17px;
		height: 1px;
		background-image: var(--wn-rule-gold);
	}
}

.wn-chapter-station { position: relative; min-width: 0; }

.wn-chapter-station__mark {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	margin-bottom: var(--wn-space-3);
	border-radius: 50%;
	font-family: var(--wn-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	box-shadow: 0 0 0 5px var(--wn-surface-sunken);
	background: linear-gradient(180deg, var(--wn-iron), var(--wn-surface-sunken));
	border: 1px solid var(--wn-border-iron);
	color: var(--wn-text-muted);
}

.wn-chapter-station__mark svg { width: 15px; height: 15px; }

/* Completed — filled mark with a check glyph */
.wn-chapter-station[data-state="complete"] .wn-chapter-station__mark {
	background: linear-gradient(180deg, rgba(200,163,90,0.30), rgba(200,163,90,0.10));
	border-color: var(--wn-gold);
	color: var(--wn-gold-bright);
}

/* Current — solid gold, with a ring to separate it from completed */
.wn-chapter-station[data-state="current"] .wn-chapter-station__mark {
	background: linear-gradient(180deg, var(--wn-gold-bright), var(--wn-gold));
	border-color: var(--wn-gold-bright);
	color: var(--wn-text-inverse);
	box-shadow: 0 0 0 5px var(--wn-surface-sunken), 0 0 0 6px rgba(200, 163, 90, 0.45);
}

/* Upcoming — hollow and dimmed */
.wn-chapter-station[data-state="upcoming"] .wn-chapter-station__mark {
	background: var(--wn-surface-sunken);
	border-style: dashed;
}

.wn-chapter-station__name {
	margin: 0 0 var(--wn-space-1);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wn-text-secondary);
}

.wn-chapter-station[data-state="current"] .wn-chapter-station__name { color: var(--wn-bone); }
.wn-chapter-station[data-state="upcoming"] .wn-chapter-station__name { color: var(--wn-text-muted); }

.wn-chapter-station__numeral {
	display: block;
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-micro);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	color: var(--wn-gold);
}

.wn-chapter-station[data-state="upcoming"] .wn-chapter-station__numeral { color: var(--wn-gold-deep); }

.wn-chapter-station__days {
	margin: 0 0 var(--wn-space-2);
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
	font-variant-numeric: tabular-nums;
}

.wn-chapter-station__lead {
	margin: 0 0 var(--wn-space-2);
	font-size: var(--wn-text-tiny);
	line-height: 1.55;
	color: var(--wn-text-secondary);
}

.wn-chapter-station[data-state="upcoming"] .wn-chapter-station__lead { color: var(--wn-text-muted); }

/* Text status label — the non-colour carrier of chapter state */
.wn-chapter-station__state {
	margin: 0;
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

.wn-chapter-station[data-state="current"] .wn-chapter-station__state { color: var(--wn-gold-bright); }

/* ---- The model, stated plainly ------------------------------------------ */

.wn-model {
	display: grid;
	gap: var(--wn-space-5);
	padding-top: var(--wn-space-5);
	border-top: 1px solid var(--wn-border-hairline);
}

@media (min-width: 720px) {
	.wn-model { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wn-space-6); }
}

.wn-model__title {
	margin: 0 0 var(--wn-space-2);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-label);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-gold);
}

.wn-model__point p {
	margin: 0;
	font-size: var(--wn-text-tiny);
	line-height: 1.6;
	color: var(--wn-text-secondary);
}

.wn-model__point strong { color: var(--wn-bone); }

/* ==========================================================================
   7b. LEGACY FOUR-STATION TIMELINE (retained for reuse)
   ========================================================================== */

.wn-seasons__track {
	position: relative;
	display: grid;
	gap: var(--wn-space-5);
}

@media (min-width: 560px) and (max-width: 899px) {
	.wn-seasons__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.wn-seasons__track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wn-space-4); }

	/* The engraved line connecting every station */
	.wn-seasons__track::before {
		content: "";
		position: absolute;
		left: 8%; right: 8%;
		top: 17px;
		height: 1px;
		background-image: var(--wn-rule-gold);
	}
}

.wn-station { position: relative; }

.wn-station__mark {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	margin-bottom: var(--wn-space-3);
	background: linear-gradient(180deg, var(--wn-iron), var(--wn-surface-sunken));
	border: 1px solid var(--wn-border-strong);
	border-radius: 50%;
	font-family: var(--wn-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wn-gold-bright);
	box-shadow: 0 0 0 5px var(--wn-surface-sunken);
}

.wn-station:last-child .wn-station__mark {
	border-color: var(--wn-gold);
	background: linear-gradient(180deg, rgba(200,163,90,0.28), rgba(200,163,90,0.08));
	color: var(--wn-bone);
}

.wn-station__title {
	margin: 0 0 var(--wn-space-1);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wn-bone);
}

.wn-station__text {
	margin: 0;
	font-size: var(--wn-text-tiny);
	line-height: 1.55;
	color: var(--wn-text-secondary);
}

.wn-seasons__creed {
	margin-top: var(--wn-space-5);
	padding-top: var(--wn-space-4);
	border-top: 1px solid var(--wn-border-hairline);
	text-align: center;
}

.wn-seasons__creed p {
	margin: 0;
	font-family: var(--wn-font-display);
	font-size: clamp(1rem, 0.9rem + 0.9vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

.wn-seasons__creed strong { color: var(--wn-gold-bright); }

/* ==========================================================================
   8. WHAT IS WINNERA — manifesto + staggered pillar slab
   ========================================================================== */

.wn-creed2__text {
	margin: 0 0 var(--wn-space-4);
	font-size: var(--wn-text-body);
	line-height: 1.65;
	color: var(--wn-text-secondary);
}

.wn-creed2__text strong { color: var(--wn-bone); }

.wn-creed__vows { display: flex; flex-wrap: wrap; gap: var(--wn-space-2); }

.wn-vow {
	padding: var(--wn-space-1) var(--wn-space-3);
	border: 1px solid var(--wn-border);
	border-radius: var(--wn-radius-sm);
	background: rgba(200, 163, 90, 0.05);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-tiny);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wn-gold-bright);
}

.wn-pillars { display: grid; gap: 1px; background: var(--wn-border-hairline); }

@media (min-width: 560px) {
	.wn-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* The fifth pillar spans the full width and closes the slab */
	.wn-pillar:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
	.wn-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wn-pillar:last-child { grid-column: auto; }
	.wn-pillar:nth-child(4) { grid-column: span 2; }
}

.wn-pillar {
	position: relative;
	padding: var(--wn-space-4);
	background: var(--wn-surface-raised);
	transition: background-color var(--wn-dur) var(--wn-ease);
}

.wn-pillar:hover { background: #1B1F25; }

.wn-pillar::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--wn-gold), transparent 70%);
	opacity: 0;
	transition: opacity var(--wn-dur) var(--wn-ease);
}

.wn-pillar:hover::before { opacity: 1; }

.wn-pillar__glyph {
	width: 24px; height: 24px;
	margin-bottom: var(--wn-space-3);
	color: var(--wn-gold);
}

.wn-pillar__title {
	margin: 0 0 var(--wn-space-1);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wn-bone);
}

.wn-pillar__text {
	margin: 0;
	font-size: var(--wn-text-tiny);
	line-height: 1.55;
	color: var(--wn-text-secondary);
}

/* ==========================================================================
   9. YOUR LEGACY — chapter ledger
   ========================================================================== */

.wn-legacy2 {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	align-items: center;
}

@media (min-width: 760px) {
	.wn-legacy2 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.wn-legacy2__statement p:first-child {
	font-family: var(--wn-font-display);
	font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.5rem);
	line-height: 1.35;
	color: var(--wn-text-secondary);
}

.wn-legacy2__statement strong { color: var(--wn-gold-bright); font-weight: 700; }

.wn-chapters {
	border-left: 1px solid var(--wn-border);
	padding-left: var(--wn-space-5);
}

.wn-chapter {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wn-space-3);
	padding-block: var(--wn-space-3);
	border-bottom: 1px solid var(--wn-border-hairline);
}

.wn-chapter:last-child { border-bottom: 0; }

.wn-chapter::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--wn-space-5) - 4px);
	top: calc(var(--wn-space-3) + 7px);
	width: 7px; height: 7px;
	transform: rotate(45deg);
	background: var(--wn-gold-deep);
	border: 1px solid var(--wn-gold);
}

.wn-chapter:last-child::before { background: var(--wn-gold-bright); }

.wn-chapter__id {
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wn-bone);
}

.wn-chapter__name {
	display: block;
	margin-top: 1px;
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-muted);
}

.wn-chapter__figures { display: flex; gap: var(--wn-space-5); text-align: right; }

.wn-chapter__figure-value {
	display: block;
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-body);
	font-weight: 700;
	color: var(--wn-gold-bright);
	font-variant-numeric: tabular-nums;
}

.wn-chapter__figure-label {
	display: block;
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

/* ==========================================================================
   10. ENTER WINNERA — closing gateway module
   ========================================================================== */

.wn-gateway2 {
	position: relative;
	overflow: hidden;
	text-align: center;
	border-color: var(--wn-border);
}

.wn-gateway2__glow {
	position: absolute;
	left: 50%; bottom: -70%;
	width: min(760px, 130%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 163, 90, 0.14), transparent 62%);
	pointer-events: none;
}

.wn-gateway2__inner {
	position: relative;
	padding: clamp(2rem, 1.25rem + 3vw, 3.5rem) var(--wn-module-pad);
}

.wn-gateway2__title {
	margin: 0 0 var(--wn-space-3);
	font-family: var(--wn-font-display);
	font-size: clamp(1.85rem, 1.2rem + 3vw, 3.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wn-bone);
}

.wn-gateway2__lead {
	max-width: 46ch;
	margin: 0 auto var(--wn-space-5);
	font-family: var(--wn-font-display);
	font-size: var(--wn-text-lead);
	color: var(--wn-text-secondary);
}

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

@media (max-width: 460px) {
	.wn-gateway__actions { display: grid; }
	.wn-gateway__actions .wn-btn { width: 100%; }
}

.wn-gateway__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wn-space-2) var(--wn-space-4);
	margin-top: var(--wn-space-5);
	font-size: var(--wn-text-small);
	color: var(--wn-text-muted);
}

/* ==========================================================================
   ENTRANCE MOTION
   Hiding is scoped to .wn-js, stamped on <html> before first paint, so
   content is never dependent on script to be readable.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.wn-js [data-wn-reveal] {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 600ms var(--wn-ease-out), transform 600ms var(--wn-ease-out);
	}

	.wn-js [data-wn-reveal][data-revealed="true"] {
		opacity: 1;
		transform: none;
	}
}