/*!
 * Mystwood Studios — Kaeros lore tier layer (assets/css/lore.css)
 *
 * Topic 27 BRAND-WP4 Iter 5 — the "manuscript / codex" aesthetic the Claude
 * Design Kaeros pages (Kaeros hub, Timeline, Lore entry, A Balance Lost) render
 * on top of the dark studio surface: serif headings, gilt accents, the
 * Celestials split, prose-lore, and the timeline rail. Enqueued conditionally
 * on the lore pages only (see functions.php).
 *
 * Owner ruling (Iter 5, 2026-07-05): "follow Claude Design to the letter." CD's
 * Kaeros pages are lore-accented on studio-dark/violet bands with the SHARED
 * studio header/footer (CD has no parchment chrome — the Topic 14 parchment
 * identity is a theme-only thing that stays parked DORMANT, Topic 24 WP-4).
 *
 * Architecture: the bands keep is_brand=studio so the _studio.css painter
 * darkens them correctly; THIS layer only paints the lore aesthetic on top,
 * page-scoped via the `.mw-page-<slug>` main class. Missing DS tokens degrade
 * via var(--token, fallback). Iter 5a wires the Kaeros hub subset; the timeline
 * rail (.tl) + lore-entry/a-balance-lost bits arrive in 5b/5c/5d.
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 27 BRAND-WP4 Iter 5a
 */

/* ============================================================================
 * SHARED LORE AESTHETIC (all lore pages)
 * ========================================================================== */

/* Serif "manuscript" headings (Claude Design `.lore-serif` / SectionHeading lore). */
.mw-page-kaeros-hub .mw-section__headline,
.mw-page-kaeros-timeline .mw-section__headline,
.mw-page-lore-entry .mw-section__headline,
.mw-page-a-balance-lost .mw-section__headline {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* Gilt, serif-italic eyebrows (Claude Design `.lore-eyebrow`). */
.mw-page-kaeros-hub .mw-section__eyebrow,
.mw-page-kaeros-timeline .mw-section__eyebrow,
.mw-page-lore-entry .mw-section__eyebrow,
.mw-page-a-balance-lost .mw-section__eyebrow {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
	font-style: italic;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--lore-gilt-text, var(--lore-gilt, #a87d32));
	opacity: 1;
}

/* Hero: serif title + gilt eyebrow on the dark lore hero. The eyebrow rule
 * outranks _studio.css's `.mw-section--hero.mw-section--brand-studio
 * .mw-section__eyebrow` (which paints the studio accent-violet). Covers every
 * lore hero (hub, timeline, lore-entry, A Balance Lost). */
.mw-page-kaeros-hub .mw-section--hero .mw-section__headline,
.mw-page-kaeros-timeline .mw-section--hero .mw-section__headline,
.mw-page-lore-entry .mw-section--hero .mw-section__headline,
.mw-page-a-balance-lost .mw-section--hero .mw-section__headline {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
}

.mw-page-kaeros-hub .mw-section--hero.mw-section--brand-studio .mw-section__eyebrow,
.mw-page-kaeros-timeline .mw-section--hero.mw-section--brand-studio .mw-section__eyebrow,
.mw-page-lore-entry .mw-section--hero.mw-section--brand-studio .mw-section__eyebrow,
.mw-page-a-balance-lost .mw-section--hero.mw-section--brand-studio .mw-section__eyebrow {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0.06em;
	color: var(--lore-gilt-text, var(--lore-gilt, #a87d32));
}

/* Lore hero carrying real ART (Topic 35 REOPEN-WP5) — the eyebrow drops gilt.
 *
 * Measured on /princess-tereza/ with the content stack hidden, so these are the
 * composited backdrop, not a guess: under the eyebrow line the hero reads
 * rgb(93,62,61) at the median and rgb(136,122,124) at its brightest 5%. Against
 * those, #A87D32 scores 2.54 and 1.10; the raised #B18435 scores 2.80 and 1.21.
 * AA at 14px italic wants 4.5. This is the SAME failure — 2.54 against 2.56 —
 * that this topic's design ruling explicitly refused to reopen when it left the
 * Topic 14 parchment tier parked.
 *
 * No gilt survives here and no scrim rescues it: driving the backdrop down far
 * enough for #A87D32 to reach 4.5 needs roughly 80% black over the art, which
 * erases the picture the whole topic exists to show. So the eyebrow takes the
 * on-dark ink instead. The serif italic and the letter-spacing stay, so the lore
 * voice survives the colour change — and gilt keeps every surface where it is
 * still in bounds: the key-fact labels, the card eyebrows, the flat dark bands.
 *
 * Scoped to [data-has-image]. A lore hero with no art keeps its gilt eyebrow
 * against a flat band, where gilt measures fine and has always been correct.
 */
.mw-page-kaeros-hub .mw-section--hero[data-has-image] .mw-section__eyebrow,
.mw-page-kaeros-timeline .mw-section--hero[data-has-image] .mw-section__eyebrow,
.mw-page-lore-entry .mw-section--hero[data-has-image] .mw-section__eyebrow,
.mw-page-kaeros-cosmology .mw-section--hero[data-has-image] .mw-section__eyebrow,
.mw-page-a-balance-lost .mw-section--hero[data-has-image] .mw-section__eyebrow {
	color: var(--mw-color-text-light, #faf8ff);
}

/* …and the scrim goes deeper under that art than the shared one does.
 *
 * _hero.css ships rgba(4,4,32,.35)→.72 for every image hero on the site. That is
 * tuned for the muted key art the K-World and studio pages carry. The Vol. 1
 * coloring-book art is fully saturated and far brighter, and at .35 even WHITE
 * only reaches 4.10 over the brightest patch the headline crosses — under AA,
 * with nothing left over for the smaller eyebrow. .50 takes white to about 9
 * across the whole stack while the art is still plainly readable underneath.
 *
 * Scoped to lore.css, which loads on the lore pages only, so no K-World or
 * studio hero changes. Same gradient shape and same rgba(4,4,32) base as the
 * shared rule — only the two stops move.
 */
.mw-page-kaeros-hub .mw-section--hero[data-has-image] .mw-section__scrim,
.mw-page-kaeros-timeline .mw-section--hero[data-has-image] .mw-section__scrim,
.mw-page-lore-entry .mw-section--hero[data-has-image] .mw-section__scrim,
.mw-page-kaeros-cosmology .mw-section--hero[data-has-image] .mw-section__scrim,
.mw-page-a-balance-lost .mw-section--hero[data-has-image] .mw-section__scrim {
	background: linear-gradient(180deg, rgba(4, 4, 32, 0.5) 0%, rgba(4, 4, 32, 0.8) 100%);
}

/* Gilt chip (Claude Design `.mw-chip--gilt`) — lore status pills. Self-scoped
 * hardcode, NOT the --lore-gilt-text indirection (Topic 33 FIX-WP10): this
 * chip carries its own tint background, so it must not inherit an ancestor's
 * ink. #A87D32 on its own rgba(168,125,50,0.16) tint composites to #271B3F
 * over studio-dark and #271C2B over studio-violet — 4.29 / 4.38, a genuine AA
 * failure at 12.8px that the audit's flat-surface model missed. #B18435 (same
 * hue/saturation, lightness raised) clears 4.73 / 4.83. Bound: #B18435 is
 * valid on the DARK lore bands only — over this same tint composited on
 * parchment it measures 2.34, on vellum 2.04. A gilt chip on a light surface
 * needs a new TINT, not a new text colour; not fixed here. */
.mw-chip--gilt {
	--lore-gilt-text: #B18435;
	color: var(--lore-gilt-text);
	background: rgba(168, 125, 50, 0.16);
	border: 1px solid rgba(168, 125, 50, 0.45);
}

/* Gilt hero badge chip (for the "Book 1" gilt pill on A Balance Lost, 5d).
 * Same self-scoped hardcode + bound as .mw-chip--gilt above. */
.mw-hero__badge-chip--gilt {
	--lore-gilt-text: #B18435;
	color: var(--lore-gilt-text);
	background: rgba(168, 125, 50, 0.16);
	border-color: rgba(168, 125, 50, 0.45);
}

/* ============================================================================
 * KAEROS HUB — The Codex grid + The Celestials split (5a)
 * ========================================================================== */

/* The Codex is a strict two-column grid (Claude Design Grid cols=2). The base
 * .mw-card-grid--cols-2 is an auto-fit min-width grid that packs 3-4 across on
 * desktop, so force exactly two columns here (collapsing to one on mobile). */
.mw-page-kaeros-hub .mw-section--card-grid .mw-card-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
	.mw-page-kaeros-hub .mw-section--card-grid .mw-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Codex / Connections cards: gilt eyebrow accent (Claude Design GCard/Card
 * accent="gilt") — the Kaeros hub Codex + the lore-entry Connections row. */
.mw-page-kaeros-hub .mw-section--card-grid .mw-card__eyebrow,
.mw-page-lore-entry .mw-section--card-grid .mw-card__eyebrow,
.mw-page-a-balance-lost .mw-section--card-grid .mw-card__eyebrow {
	color: var(--lore-gilt-text, var(--lore-gilt, #a87d32));
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-style: italic;
	letter-spacing: 0.06em;
	text-transform: none;
}

/* ---- The Celestials — wide two-column split (copy + key-facts) ----------- */
.mw-section--celestials {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.mw-section--celestials .mw-section__inner {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.split--wide {
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: clamp(2rem, 5vw, 4rem);
}

.split__eyebrow {
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-style: italic;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: var(--lore-gilt-text, var(--lore-gilt, #a87d32));
	margin: 0 0 0.6rem;
}

.split__title {
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-weight: 400;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	line-height: 1.1;
	color: #f4ecd8;
	margin: 0 0 1.2rem;
}

.prose-lore p {
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-size: 1.075rem;
	line-height: 1.8;
	color: rgba(240, 230, 205, 0.85);
	margin: 0 0 1rem;
}

.prose-lore strong {
	color: var(--lore-gilt-text, var(--lore-gilt, #a87d32));
	font-weight: 600;
}

/* Celestials key-facts — a gilt-ruled definition list on the dark band. */
.lore-keyfacts {
	margin: 0;
	border-top: 1px solid rgba(168, 125, 50, 0.35);
}

.lore-keyfacts__row {
	display: grid;
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(168, 125, 50, 0.22);
}

.lore-keyfacts__label {
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-size: 1.05rem;
	color: var(--lore-gilt-text, var(--lore-gilt, #a87d32));
	margin: 0;
}

.lore-keyfacts__value {
	font-size: 0.98rem;
	line-height: 1.5;
	color: rgba(240, 230, 205, 0.85);
	margin: 0;
}

/* ============================================================================
 * KAEROS TIMELINE — the eras rail (5b)
 * ========================================================================== */

/* The eras band is a narrow studio-dark section carrying the gilt `.tl` rail.
 * scroll-margin offsets the sticky theme header for the hero's #eras jump. */
.mw-section--eras {
	padding-block: clamp(3rem, 7vw, 6rem);
	scroll-margin-top: calc(var(--mw-header-h, 5rem) + 1rem);
}

.mw-section--eras .mw-section__inner {
	max-width: 54rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mw-section--eras .mw-section__intro {
	max-width: 44rem;
	color: rgba(240, 230, 205, 0.8);
}

/* The manuscript timeline (Claude Design `.tl`): a gilt rail threaded through
 * numbered marker discs, serif era names, and prose-lore body text. Era VI is
 * marked current (gilt-filled disc + halo). Ported from Claude Design site.css. */
.tl {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	position: relative;
}

.tl::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(180deg, transparent, var(--lore-gilt, #a87d32) 8%, var(--lore-gilt, #a87d32) 92%, transparent);
	opacity: 0.5;
}

.tl__item {
	position: relative;
	padding: 0 0 2.5rem 4.25rem;
}

.tl__item:last-child {
	padding-bottom: 0;
}

.tl__marker {
	/* Self-scoped pin (Topic 33 FIX-WP10): .tl__marker hard-sets a dark
	 * background unconditionally, and .tl__num (its child) reads
	 * --lore-gilt-text. Without this pin, .tl__num would inherit the
	 * surface-scoped ink the moment the eras band is ever painted
	 * lore-parchment/lore-vellum — gilt on #171043 is 4.74 (passes); the ink
	 * would be 2.68 there. Pin keeps the marker's own child on raw gilt. */
	--lore-gilt-text: var(--lore-gilt);
	position: absolute;
	left: 0;
	top: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--mw-color-surface-dark, #171043);
	border: 2px solid var(--lore-gilt, #a87d32);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.tl__num {
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-size: 1.05rem;
	color: var(--lore-gilt-text, var(--lore-gilt, #a87d32));
}

.tl__item--current .tl__marker {
	background: var(--lore-gilt, #a87d32);
	box-shadow: 0 0 0 6px rgba(168, 125, 50, 0.18);
}

.tl__item--current .tl__num {
	color: #1a140d;
}

.tl__era {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lore-gilt-text, var(--lore-gilt, #a87d32));
	margin: 0.35rem 0 0.3rem;
}

.tl__name {
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-weight: 400;
	font-size: 1.7rem;
	color: #fff;
	margin: 0 0 0.6rem;
}

.tl__text {
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(240, 230, 205, 0.82);
	margin: 0;
	max-width: 42rem;
}

.tl__tag {
	font-family: var(--mw-font-display, Georgia, serif);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--kw-gold, #f4c430);
	margin: 0.85rem 0 0;
}

/* ============================================================================
 * LORE ENTRY — the heir split, biography, connections (5c)
 * ========================================================================== */

/* The "Son of the Sun" split reuses the shared .split--wide (prose + key-facts),
 * in the same wide container + padding as the Celestials split. */
.mw-section--heir {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.mw-section--heir .mw-section__inner {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Biography — a narrow prose-lore column (a lore-tier key-art figure is a WP-6
 * candidate; the CD figure was a placeholder). */
.mw-section--biography {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.mw-section--biography .mw-section__inner {
	max-width: 54rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Serif subsection headings inside prose-lore (the biography's H3s). */
.prose-lore h3 {
	font-family: var(--mw-font-lore-serif, Georgia, serif);
	font-weight: 400;
	font-size: clamp(1.3rem, 2.5vw, 1.6rem);
	color: #f4ecd8;
	margin: 2rem 0 0.6rem;
}

.prose-lore h3:first-child {
	margin-top: 0;
}

/* ============================================================================
 * A BALANCE LOST — trilogy, chapters, waitlist (5d)
 * ========================================================================== */

.mw-section--trilogy,
.mw-section--chapters,
.mw-section--waitlist {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.mw-section--trilogy .mw-section__inner,
.mw-section--waitlist .mw-section__inner {
	max-width: 54rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mw-section--chapters .mw-section__inner {
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Chapters — stack the chapter label above its tease (labels are long). */
.lore-keyfacts--stack .lore-keyfacts__row {
	grid-template-columns: 1fr;
	gap: 0.3rem;
}

.lore-keyfacts--stack .lore-keyfacts__label {
	font-size: 1.15rem;
}

/* Waitlist — centred heading + a width-capped form. */
.mw-section--waitlist {
	text-align: center;
}

.mw-section--waitlist .mw-section__intro {
	margin-inline: auto;
	max-width: 34rem;
}

.mw-section--waitlist__form {
	max-width: 30rem;
	margin: 1.75rem auto 0;
	text-align: left;
}

/* ============================================================================
 * RESPONSIVE
 * ========================================================================== */
@media (max-width: 760px) {
	.split--wide {
		grid-template-columns: 1fr;
	}
}