/*
 * Lapland Reveal v4 — design system
 *
 * The idea: it is the night before, the aurora is out, and the light is coming from
 * lanterns rather than the sky. Deep spruce-black ground, gilded rules and filigree,
 * candle-gold type, postbox red for actions, snow along the top edge.
 *
 * This is the ornate, dark, gold-leaf theme. v3 is the light postal one and v2 the
 * earlier cinematic one; the three share no visual vocabulary on purpose, and none of
 * them loads a line of another's code.
 *
 * Ornament policy: every illustrated ornament — lantern, corner filigree, snow edge,
 * wax seal, frame — is a background image behind a custom property with a drawn CSS
 * fallback underneath it. A missing art file degrades to the fallback rather than to a
 * broken box, so the theme is previewable before any of the art in
 * assets/images/ornaments/PROMPTS.md has been generated.
 *
 * The twelve published pages still carry markup written for the earlier themes
 * (.section--night, .media-frame, .ticket, .article-hero and so on). Section 12
 * restyles every one of those into this language, so nothing has to be re-authored.
 *
 * Contents
 *   1  Tokens and fonts
 *   2  Reset and base
 *   3  Typography
 *   4  Layout: wrap, section, paper
 *   5  Postal furniture: stripes, postmarks, stamps, seals
 *   6  Buttons and forms
 *   7  Masthead and navigation
 *   8  The letter hero
 *   9  Guide modules
 *  10  Product ladder, demo, FAQ, related
 *  11  Postbox call to action and footer
 *  12  Inherited page markup
 *  13  WooCommerce
 *  14  Accessibility and motion
 *  15  Ornament layer — gilding, lanterns, snow, aurora (v4 only)
 */

/* -------------------------------------------------------- 1 Tokens and fonts */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nunito";
	src: url("../fonts/nunito.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/courier-prime-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/courier-prime-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Ground: spruce so dark it reads black until the aurora lifts it. */
	--night: #04211a;
	--night-deep: #021410;
	--pine: #0a3227;
	--pine-lift: #0e3d2f;
	--panel: #0c2c23;
	--panel-lift: #12392d;

	/* Gilding. Three stops, because a single gold reads flat on a dark ground. */
	--gold: #d8ab5c;
	--gold-bright: #f2d69a;
	--gold-deep: #8a6522;
	--candle: #ffcf85;

	--postbox: #a5121b;
	--berry: #7d0d14;
	--ember: #c8323c;

	--parchment: #f6ecd8;
	--cream: #f4ead7;
	--ink: #f2e8d5;
	--ink-soft: #c3b596;
	--snow: #ffffff;

	/*
	 * Aliases for the vocabulary the inherited rules were written against. The light
	 * theme's paper names still appear all through sections 8–13; rather than rewrite
	 * a thousand declarations, each name is re-pointed at its night equivalent, so a
	 * rule that asked for "parchment" gets the surface that plays that role here.
	 */
	--paper: var(--panel);
	--parchment-deep: var(--panel-lift);
	--kraft: var(--pine);
	--kraft-line: var(--rule);
	--spruce: var(--pine);

	--surface: var(--night);
	--text: var(--ink);
	--text-muted: var(--ink-soft);
	--rule: rgba(216, 171, 92, 0.34);
	--rule-soft: rgba(216, 171, 92, 0.18);

	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-postal: "Courier Prime", ui-monospace, "Courier New", monospace;

	--step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	--step-1: clamp(1.12rem, 1.06rem + 0.3vw, 1.3rem);
	--step-2: clamp(1.4rem, 1.26rem + 0.7vw, 1.85rem);
	--step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.7rem);
	--step-4: clamp(2.1rem, 1.55rem + 2.6vw, 4rem);
	--step-article: clamp(1.04rem, 1rem + 0.22vw, 1.17rem);

	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1.15rem;
	--space-m: 1.75rem;
	--space-l: 2.6rem;
	--space-xl: clamp(2.75rem, 5.5vw, 4.5rem);
	--space-2xl: clamp(3.5rem, 8vw, 6rem);

	--measure: 58ch;
	--wide: 1160px;
	--gutter: clamp(1.15rem, 5vw, 2.75rem);

	--radius: 3px;
	--radius-lg: 6px;

	/*
	 * Shadows on a dark ground do almost no work, so depth is carried by a gilded
	 * hairline and a warm glow instead. Both are here so a card can use either.
	 */
	--shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 30px -18px rgba(0, 0, 0, 0.8);
	--shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.55), 0 30px 60px -28px rgba(0, 0, 0, 0.95);
	--glow-gold: 0 0 0 1px rgba(216, 171, 92, 0.28), 0 0 34px -8px rgba(255, 207, 133, 0.35);
	--glow-candle: 0 0 60px -12px rgba(255, 207, 133, 0.45);

	--bar-height: 3.6rem;
	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	/*
	 * Fibre. On the light theme this was paper grain; here it is the faint film of
	 * snow-static over a night photograph. It must stay near-invisible — anything
	 * heavier turns the spruce grey.
	 */
	--fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='0.05'/%3E%3C/svg%3E");

	/*
	 * Aurora. Drawn in CSS so the theme has a sky before any art exists; the generated
	 * plate in section 15 layers over the top when it is present.
	 */
	--aurora:
		radial-gradient(70% 44% at 18% 6%, rgba(88, 214, 158, 0.22), transparent 62%),
		radial-gradient(58% 40% at 78% 0%, rgba(126, 108, 214, 0.18), transparent 64%),
		radial-gradient(90% 60% at 50% 100%, rgba(10, 50, 39, 0.9), transparent 70%);

	/*
	 * Ornament art. Each is set to `none` here and switched on in section 15 only
	 * when the corresponding file has been generated — see the note there.
	 */
	--art-ornaments: url("../images/ornaments/");
}

/* --------------------------------------------------------- 2 Reset and base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bar-height) + 1rem);
}

body {
	margin: 0;
	background-color: var(--surface);
	background-image: var(--fibre);
	background-size: 160px 160px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

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

a {
	color: var(--gold);
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
	transition: color 150ms var(--ease);
}

a:hover {
	color: var(--berry);
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: var(--space-l) 0;
}

::selection {
	background: var(--candle);
	color: var(--ink);
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	color: var(--parchment);
	margin: 0 0 var(--space-s);
	text-wrap: balance;
	font-variation-settings: "SOFT" 20, "WONK" 1;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.2; }
h4 { font-size: var(--step-1); }

p {
	margin: 0 0 var(--space-s);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

small,
.fine-print {
	font-size: var(--step--1);
	color: var(--text-muted);
}

/* Eyebrows are typed, not set — they read as postal annotations. */
.eyebrow {
	font-family: var(--font-postal);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 var(--space-xs);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 8px);
}

.eyebrow--light {
	color: var(--candle);
}

.eyebrow--light::after {
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 4px, transparent 4px 8px);
}

.lede {
	font-size: var(--step-1);
	line-height: 1.55;
	color: var(--text-muted);
	max-width: 48ch;
}

.section__title {
	margin-bottom: var(--space-m);
}

.section__title--light {
	color: var(--parchment);
}

/* ------------------------------------------------- 4 Layout: wrap, section */

/* .section__inner is the container class the published pages already use. */
.wrap,
.section__inner {
	width: min(100% - (var(--gutter) * 2), var(--wide));
	margin-inline: auto;
}

.wrap--narrow,
.section__inner--narrow {
	width: min(100% - (var(--gutter) * 2), var(--measure));
}

.wrap + .wrap,
.section__inner + .section__inner {
	margin-top: var(--space-xl);
}

.section {
	padding: var(--space-2xl) 0;
	position: relative;
}

.section--kraft,
.guide-section--kraft {
	background-color: var(--kraft);
	background-image: var(--fibre);
	background-size: 160px 160px;
	border-block: 1px solid var(--kraft-line);
}

.section--pine {
	background-color: var(--spruce);
	background-image:
		radial-gradient(circle at 20% 0%, rgba(243, 201, 105, 0.14), transparent 55%),
		var(--fibre);
	background-size: auto, 160px 160px;
	color: var(--parchment);
}

.section--pine h2,
.section--pine h3,
.section--pine .section__title {
	color: var(--parchment);
}

.section--pine p {
	color: rgba(253, 247, 234, 0.82);
}

/* Paper: the base surface for every card in the theme. */
.paper {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-paper);
	padding: clamp(1.3rem, 3vw, 1.9rem);
}

.card-grid {
	display: grid;
	gap: clamp(1.1rem, 2.4vw, 1.7rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
	margin-top: var(--space-l);
}

.card-grid--two {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-s);
	align-items: center;
	margin-top: var(--space-m);
}

.table-scroll {
	overflow-x: auto;
	margin: var(--space-m) 0;
}

/* ------------------------------------------------------ 5 Postal furniture */

.airmail-stripe {
	height: 8px;
	background: repeating-linear-gradient(
		45deg,
		var(--postbox) 0 12px,
		var(--parchment) 12px 24px,
		var(--spruce) 24px 36px,
		var(--parchment) 36px 48px
	);
}

/* Circular postmark, rubber-stamped slightly off true. */
.postmark {
	display: grid;
	place-content: center;
	width: 6.5rem;
	height: 6.5rem;
	border: 2px solid var(--postbox);
	border-radius: 50%;
	color: var(--gold);
	font-family: var(--font-postal);
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.5;
	transform: rotate(-8deg);
	opacity: 0.75;
	box-shadow: inset 0 0 0 1px var(--postbox);
}

.postmark-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-postal);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.2rem 0.55rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	color: var(--gold);
}

.postmark-chip--posted {
	color: var(--candle);
}

/* Wax seal. */
.wax-seal {
	position: absolute;
	right: 1.1rem;
	bottom: 1.1rem;
	display: grid;
	place-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #c8323c, var(--berry) 60%, #6d0f18);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-postal);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.28);
	transform: rotate(-6deg);
}

/* A perforated stamp edge, cut with a repeating radial mask. */
.stamp-edge {
	--perf: 7px;
	padding: calc(var(--perf) * 1.4);
	background: var(--paper);
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
	-webkit-mask:
		radial-gradient(circle at 50% 0, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 50% 0 / calc(var(--perf) * 2.4) 100% repeat-x,
		radial-gradient(circle at 50% 100%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 50% 100% / calc(var(--perf) * 2.4) 100% repeat-x,
		radial-gradient(circle at 0 50%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 0 50% / 100% calc(var(--perf) * 2.4) repeat-y,
		radial-gradient(circle at 100% 50%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 100% 50% / 100% calc(var(--perf) * 2.4) repeat-y,
		linear-gradient(#000 0 0) padding-box;
	mask:
		radial-gradient(circle at 50% 0, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 50% 0 / calc(var(--perf) * 2.4) 100% repeat-x,
		radial-gradient(circle at 50% 100%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 50% 100% / calc(var(--perf) * 2.4) 100% repeat-x,
		radial-gradient(circle at 0 50%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 0 50% / 100% calc(var(--perf) * 2.4) repeat-y,
		radial-gradient(circle at 100% 50%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 100% 50% / 100% calc(var(--perf) * 2.4) repeat-y,
		linear-gradient(#000 0 0) padding-box;
}

/* ---------------------------------------------------- 6 Buttons and forms */

.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9rem 1.7rem;
	background: var(--postbox);
	color: var(--snow);
	font-family: var(--font-postal);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--berry);
	border-radius: var(--radius);
	cursor: pointer;
	/*
	 * The label is all-caps in a monospace face, so the line box carries descender
	 * room that no glyph ever uses and the text reads as sitting high with a gap
	 * beneath it. Trimming the leading to 1 and biasing the block padding down by a
	 * hair centres the cap-height rather than the em box.
	 */
	line-height: 1;
	padding-block: 1rem 0.86rem;
	text-align: center;
	box-shadow: 0 2px 0 var(--berry);
	transition: background-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}

.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--berry);
	color: var(--snow);
	transform: translateY(-1px);
	box-shadow: 0 3px 0 #6d0f18;
}

.button:active {
	transform: translateY(1px);
	box-shadow: 0 1px 0 var(--berry);
}

.button--outline,
.button--ghost {
	background: transparent;
	color: var(--gold);
	border-color: currentColor;
	box-shadow: none;
}

.button--outline:hover,
.button--ghost:hover {
	background: rgba(179, 30, 40, 0.08);
	color: var(--berry);
	box-shadow: none;
}

/*
 * Pale outline buttons belong only on the dark surfaces. The hero is parchment in
 * this theme, so a hero ghost button keeps the red outline — light on light would
 * be invisible.
 */
.section--pine .button--outline,
.section--pine .button--ghost,
.section--night .button--ghost,
.section--night .button--outline,
.postbox-cta .button--outline {
	color: var(--parchment);
	border-color: rgba(253, 247, 234, 0.6);
}

.section--pine .button--outline:hover,
.section--pine .button--ghost:hover,
.section--night .button--ghost:hover,
.postbox-cta .button--outline:hover {
	background: rgba(253, 247, 234, 0.16);
	color: var(--snow);
}

.button--block {
	width: 100%;
}

.button--compact {
	/* Same downward bias as the full-size button, scaled to the smaller box. */
	padding: 0.7rem 1rem 0.56rem;
	font-size: 0.72rem;
	letter-spacing: 0.07em;
}

.link-button {
	background: none;
	border: 0;
	padding: 0;
	color: var(--gold);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.16em;
	cursor: pointer;
}

.field {
	display: grid;
	gap: 0.35rem;
	margin-bottom: var(--space-s);
}

.field label {
	font-family: var(--font-postal);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	width: 100%;
}

.field input:focus-visible {
	outline: 2px solid var(--postbox);
	outline-offset: 2px;
}

.ticks,
.tick-list {
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.ticks li,
.tick-list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: var(--step--1);
	line-height: 1.55;
}

/* A tick, not a cross — on a list of what you get, ✕ reads as an exclusion. */
.ticks li::before,
.tick-list li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.42em;
	width: 0.6rem;
	height: 0.32rem;
	border-left: 2px solid var(--postbox);
	border-bottom: 2px solid var(--postbox);
	transform: rotate(-45deg);
}

.section--pine .ticks li::before,
.section--night .tick-list li::before {
	border-color: var(--candle);
}

/* ------------------------------------------ 7 Masthead and navigation */

.announcement {
	background: var(--spruce);
	color: var(--parchment);
	text-align: center;
	font-family: var(--font-postal);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	padding: 0.5rem var(--gutter);
}

.announcement p {
	margin: 0;
}

.masthead__full {
	padding: var(--space-m) 0 var(--space-s);
	border-bottom: 1px solid var(--rule-soft);
	background: var(--parchment);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-m);
	position: relative;
}

.wordmark {
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	text-decoration: none;
	color: var(--parchment);
	text-align: center;
}

.wordmark__rule {
	width: 3.5rem;
	height: 2px;
	background: var(--gold);
	margin-bottom: 0.35rem;
}

.wordmark__name {
	font-family: var(--font-display);
	font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variation-settings: "SOFT" 30, "WONK" 1;
}

.wordmark__tagline {
	font-family: var(--font-postal);
	font-size: 0.66rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	/*
	 * The wordmark sets line-height 1, so its descenders reach the bottom of their
	 * box and the grid gap alone leaves the tagline crowding the name. This buys
	 * the breathing room back without loosening the gap above the rule.
	 */
	margin-top: 0.5rem;
}

.masthead__postmark {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(-9deg);
	display: none;
	place-content: center;
	width: 6rem;
	height: 6rem;
	border: 2px solid var(--postbox);
	border-radius: 50%;
	color: var(--gold);
	font-family: var(--font-postal);
	font-size: 0.54rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.6;
	opacity: 0.6;
}

.masthead__postmark-mid {
	font-size: 0.72rem;
	font-weight: 700;
	display: block;
	border-block: 1px solid currentColor;
	padding: 0.1rem 0;
	margin: 0.12rem 0;
}

@media (min-width: 56em) {
	.masthead__postmark {
		display: grid;
	}
}

.masthead__bar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--parchment);
	border-bottom: 1px solid var(--rule);
	transition: box-shadow 200ms var(--ease);
}

.masthead__bar.is-stuck {
	box-shadow: 0 8px 24px -20px rgba(0, 0, 0, 0.8);
}

.masthead__bar-inner {
	min-height: var(--bar-height);
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.masthead__mini {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1rem;
	color: var(--parchment);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 200ms var(--ease), transform 200ms var(--ease);
	pointer-events: none;
	max-width: 0;
	overflow: hidden;
}

.masthead__bar.is-stuck .masthead__mini {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	max-width: 14rem;
	margin-right: var(--space-s);
}

.site-nav__list,
.site-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.8rem);
	list-style: none;
	margin: 0 auto 0 0;
	padding: 0;
}

.site-nav li a {
	font-family: var(--font-postal);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--parchment);
	text-decoration: none;
	padding: 0.35rem 0;
	position: relative;
	white-space: nowrap;
}

.site-nav li a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--postbox);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms var(--ease);
}

.site-nav li a:hover::after,
.site-nav .is-current a::after,
.site-nav .current-menu-item a::after {
	transform: scaleX(1);
}

/*
 * Submenus. The parent item pairs its link with a script-injected toggle button:
 * hover alone would strand keyboard and touch users, and the "Lapland Guides"
 * parent points at "#", so its link is not a destination on any device.
 */
.site-nav .menu-item-has-children {
	position: relative;
}

.site-nav__parent {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

/*
 * The toggle matches the link's own box exactly — same vertical padding, same
 * line-height — so a parent item is the same height as its flat siblings.
 */
.site-nav__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	padding: 0.35rem 0;
	background: transparent;
	border: 0;
	color: var(--parchment);
	cursor: pointer;
	font-size: 0.78rem;
	line-height: 1.2;
}

.site-nav__sub-toggle svg {
	width: 0.6rem;
	height: 0.6rem;
	transition: transform 180ms var(--ease);
}

.site-nav__sub-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.site-nav .sub-menu li a::after {
	display: none;
}

.site-nav__action {
	display: none;
}

.masthead__action {
	flex: none;
	white-space: nowrap;
}

.cta-short {
	display: none;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	background: transparent;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	cursor: pointer;
}

.menu-toggle__bars {
	display: grid;
	gap: 4px;
	width: 17px;
}

.menu-toggle__bars span {
	height: 2px;
	background: var(--spruce);
	transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}

body.menu-open .menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 61.99em) {
	/*
	 * The shared clamp bottoms out at 1.65rem well before phone widths, so the
	 * wordmark arrived at its smallest size on the screens with the most vertical
	 * room to spare. Small screens get their own curve: a higher floor, and a
	 * steeper slope so it grows through the tablet range instead of sitting flat.
	 */
	.wordmark__name {
		font-size: clamp(1.95rem, 1.2rem + 3.6vw, 2.9rem);
	}

	.site-nav {
		position: fixed;
		inset: 0;
		background: var(--parchment);
		background-image: var(--fibre);
		background-size: 160px 160px;
		display: grid;
		align-content: center;
		justify-items: start;
		gap: var(--space-m);
		padding: var(--space-2xl) var(--gutter);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.75rem);
		transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
		overflow-y: auto;
		z-index: 60;
	}

	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__list,
	.site-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-s);
		margin: 0;
	}

	.site-nav li a {
		font-family: var(--font-display);
		font-size: var(--step-2);
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
	}

	/* An in-flow accordion on small screens rather than an overlay panel. */
	.site-nav .sub-menu {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2xs);
		margin: var(--space-2xs) 0 0;
		padding: 0 0 0 var(--space-s);
		border-left: 1px solid var(--rule);
	}

	.site-nav .menu-item-has-children.is-open > .sub-menu {
		display: flex;
	}

	.site-nav .sub-menu li a {
		font-size: var(--step-0);
		font-weight: 500;
	}

	.site-nav__sub-toggle {
		width: 2.2rem;
		height: 2.2rem;
	}

	.site-nav__sub-toggle svg {
		width: 0.8rem;
		height: 0.8rem;
	}

	.site-nav__action {
		display: block;
		width: 100%;
		margin-top: var(--space-s);
	}

	/*
	 * The nav is taken out of flow on small screens, so it no longer supplies the
	 * automatic margin that pushes the action right. The action does it itself.
	 */
	.masthead__action {
		margin-left: auto;
		order: 3;
	}

	/*
	 * The mini wordmark is a scroll affordance on desktop, revealed only once the
	 * bar sticks. On small screens the bar would otherwise open with a wide empty
	 * left edge, so the wordmark is shown from the start and the burger sits with
	 * it rather than drifting off alone on the right.
	 */
	.masthead__mini {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		max-width: 14rem;
		order: 1;
	}

	.menu-toggle {
		order: 2;
	}

	/* The nav panel carries its own full-width CTA, so the bar can drop it. */
	@media (max-width: 23.4375em) {
		.masthead__action {
			display: none;
		}
	}

	body.menu-open {
		overflow: hidden;
	}
}

@media (min-width: 62em) {
	.menu-toggle {
		display: none;
	}

	/* A dropped card on pointer screens. */
	.site-nav .sub-menu {
		position: absolute;
		top: calc(100% + 0.6rem);
		inset-inline-start: 0;
		z-index: 70;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		min-width: 15rem;
		margin: 0;
		padding: var(--space-2xs) 0;
		background: var(--parchment);
		border: 1px solid var(--rule);
		border-radius: var(--radius);
		box-shadow: var(--shadow-paper);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.35rem);
		transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
	}

	/*
	 * Hover keeps it feeling immediate for mouse users; focus-within covers tabbing
	 * straight through; is-open is what the toggle button drives.
	 */
	.site-nav .menu-item-has-children:hover > .sub-menu,
	.site-nav .menu-item-has-children:focus-within > .sub-menu,
	.site-nav .menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav .sub-menu li {
		width: 100%;
	}

	.site-nav .sub-menu li a {
		display: block;
		width: 100%;
		padding: 0.5rem var(--space-s);
		font-size: 0.74rem;
		white-space: normal;
	}

	.site-nav .sub-menu li a:hover,
	.site-nav .sub-menu li a:focus-visible {
		background: var(--parchment-deep);
	}

	/*
	 * The gap between the parent and the card would drop the hover on the way down,
	 * so it is bridged rather than removed — the card keeps its visual offset.
	 */
	.site-nav .menu-item-has-children > .sub-menu::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 100%;
		height: 0.6rem;
	}
}

@media (max-width: 30em) {
	.cta-long { display: none; }
	.cta-short { display: inline; }

	/*
	 * The tagline is a single line of widely-tracked uppercase, so it costs about
	 * 9.5px a character and a 34-character line runs out of room before 360px.
	 * Tightening the tracking keeps it on one line rather than letting it wrap and
	 * unbalance the masthead.
	 */
	.wordmark__tagline {
		font-size: 0.58rem;
		letter-spacing: 0.18em;
	}
}

/* --------------------------------------------------------- 8 The letter hero */

/*
 * The published pages open with .hero / .article-hero. Here that becomes a letter on
 * the desk: parchment, ruled margin, a stamp cut from the page's hero photograph, and
 * a postmark across it.
 */
.hero,
.article-hero {
	position: relative;
	background: var(--parchment-deep);
	background-image: var(--fibre);
	background-size: 160px 160px;
	border-bottom: 1px solid var(--rule);
	padding: var(--space-2xl) 0;
	overflow: hidden;
}

.hero::before,
.article-hero::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 3px;
	background: repeating-linear-gradient(180deg, var(--postbox) 0 10px, transparent 10px 20px);
	opacity: 0.5;
}

.hero__content,
.article-hero__inner {
	width: min(100% - (var(--gutter) * 2), var(--wide));
	margin-inline: auto;
	position: relative;
	z-index: 2;
}

.hero h1,
.article-hero h1 {
	color: var(--parchment);
	margin-bottom: var(--space-s);
}

.hero .lede,
.article-hero .lede {
	color: var(--text-muted);
}

.hero .price-note {
	margin-top: var(--space-s);
	font-family: var(--font-postal);
	font-size: var(--step--1);
	color: var(--text-muted);
}

/* The hero photograph, cut as a stamp and pinned to the right on wide screens. */
.hero::after,
.article-hero::after {
	content: "";
	position: absolute;
	right: clamp(1rem, 5vw, 4.5rem);
	top: 50%;
	width: clamp(12rem, 22vw, 19rem);
	aspect-ratio: 3 / 4;
	transform: translateY(-50%) rotate(3deg);
	background-image: var(--hero-image, var(--lr4-hero-image, none));
	background-size: cover;
	background-position: center;
	border: 10px solid var(--paper);
	box-shadow: var(--shadow-lift);
	display: none;
	z-index: 1;
}

@media (min-width: 62em) {
	.hero::after,
	.article-hero::after {
		display: block;
	}

	.hero__content > *,
	.article-hero__inner > * {
		max-width: min(100%, 34rem);
	}

	.hero__content > h1,
	.article-hero__inner > h1 {
		max-width: 17ch;
	}
}

/* Snow, only on the hero, only if motion is welcome. */
.hero .snow,
.article-hero .snow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background-image:
		radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.9), transparent),
		radial-gradient(2px 2px at 70% 20%, rgba(255, 255, 255, 0.8), transparent),
		radial-gradient(1.5px 1.5px at 45% 70%, rgba(255, 255, 255, 0.85), transparent),
		radial-gradient(1.5px 1.5px at 85% 60%, rgba(255, 255, 255, 0.75), transparent),
		radial-gradient(2px 2px at 10% 80%, rgba(255, 255, 255, 0.8), transparent);
	background-size: 300px 300px;
	animation: lr4-snow 16s linear infinite;
	opacity: 0.7;
}

@keyframes lr4-snow {
	from { background-position: 0 -300px, 0 -300px, 0 -300px, 0 -300px, 0 -300px; }
	to { background-position: 30px 300px, -20px 300px, 15px 300px, -35px 300px, 25px 300px; }
}

/* ------------------------------------------------------- 9 Guide modules */

.guide-section {
	border-top: 1px solid var(--rule-soft);
}

.glance {
	margin: var(--space-m) 0 0;
	display: grid;
	gap: 0;
	border-top: 2px solid var(--spruce);
}

.glance__row {
	display: grid;
	gap: 0.15rem 1.5rem;
	padding: var(--space-s) 0;
	border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 44em) {
	.glance__row {
		grid-template-columns: 12rem minmax(0, 1fr);
		align-items: baseline;
	}
}

.glance dt {
	font-family: var(--font-postal);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
}

.glance dd {
	margin: 0;
	color: var(--text);
}

.ledger {
	border-collapse: collapse;
	width: 100%;
	min-width: 36rem;
	background: var(--paper);
	box-shadow: var(--shadow-paper);
}

.ledger th,
.ledger td {
	text-align: left;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--rule-soft);
	font-size: var(--step--1);
	vertical-align: top;
}

.ledger thead th {
	font-family: var(--font-postal);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--parchment);
	background: var(--spruce);
	border-bottom: 0;
}

.ledger tbody th {
	font-family: var(--font-display);
	font-size: var(--step-1);
	color: var(--parchment);
	white-space: nowrap;
}

.ledger tbody tr:nth-child(even) {
	background: rgba(239, 224, 196, 0.35);
}

.activity__age {
	font-family: var(--font-postal);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: var(--space-2xs);
}

.checklist {
	display: grid;
	gap: clamp(1.1rem, 2.4vw, 1.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin-top: var(--space-l);
}

.checklist__group h3 {
	font-size: var(--step-1);
	margin-bottom: var(--space-xs);
	padding-bottom: var(--space-2xs);
	border-bottom: 2px solid var(--gold);
}

.checklist__group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.checklist__group li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.65rem;
	align-items: start;
	font-size: var(--step--1);
	line-height: 1.5;
}

.checklist__group input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.2rem;
	accent-color: var(--gold);
}

.checklist__group input:checked + label {
	color: var(--text-muted);
	text-decoration: line-through;
}

.checklist__note {
	margin-top: var(--space-m);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.bands {
	display: grid;
	gap: clamp(1.1rem, 2.4vw, 1.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	margin-top: var(--space-l);
}

.band__verdict {
	font-family: var(--font-postal);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: var(--space-2xs);
}

.tips {
	counter-reset: tips;
	list-style: none;
	margin: var(--space-l) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-s);
	max-width: 62ch;
}

.tips li {
	counter-increment: tips;
	position: relative;
	padding-left: 3rem;
	line-height: 1.6;
}

.tips li::before {
	content: counter(tips, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-postal);
	font-weight: 700;
	color: var(--gold);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.05rem 0.35rem;
	font-size: 0.72rem;
}

/* ------------------------- 10 Product ladder, demo, FAQ, related */

.ladder__grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin-top: var(--space-l);
	align-items: stretch;
}

.stamp-card {
	--perf: 7px;
	position: relative;
	display: flex;
	background: var(--paper);
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
	-webkit-mask:
		radial-gradient(circle at 50% 0, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 50% 0 / calc(var(--perf) * 2.4) 100% repeat-x,
		radial-gradient(circle at 50% 100%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 50% 100% / calc(var(--perf) * 2.4) 100% repeat-x,
		radial-gradient(circle at 0 50%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 0 50% / 100% calc(var(--perf) * 2.4) repeat-y,
		radial-gradient(circle at 100% 50%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 100% 50% / 100% calc(var(--perf) * 2.4) repeat-y,
		linear-gradient(#000 0 0) padding-box;
	mask:
		radial-gradient(circle at 50% 0, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 50% 0 / calc(var(--perf) * 2.4) 100% repeat-x,
		radial-gradient(circle at 50% 100%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 50% 100% / calc(var(--perf) * 2.4) 100% repeat-x,
		radial-gradient(circle at 0 50%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 0 50% / 100% calc(var(--perf) * 2.4) repeat-y,
		radial-gradient(circle at 100% 50%, transparent var(--perf), #000 calc(var(--perf) + 0.5px)) 100% 50% / 100% calc(var(--perf) * 2.4) repeat-y,
		linear-gradient(#000 0 0) padding-box;
	transition: transform 200ms var(--ease);
}

.stamp-card:hover {
	transform: translateY(-4px);
}

.stamp-card__perf {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 2px solid var(--kraft-line);
	margin: 12px;
}

.stamp-card--featured .stamp-card__perf {
	border-color: var(--postbox);
}

.stamp-card__class {
	font-family: var(--font-postal);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

.stamp-card__value {
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 800;
	line-height: 1;
	color: var(--parchment);
	margin: 0.4rem 0 0.15rem;
}

.stamp-card__name {
	font-size: var(--step-1);
	margin-bottom: var(--space-2xs);
}

.stamp-card__tagline {
	font-size: var(--step--1);
	color: var(--text-muted);
	margin-bottom: var(--space-s);
}

.stamp-card__delivery {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	font-size: var(--step--1);
	color: var(--text-muted);
	margin-top: auto;
	margin-bottom: var(--space-s);
}

.stamp-card .postmark-chip {
	color: var(--parchment);
}

.stamp-card .postmark-chip--posted {
	color: var(--gold);
}

/*
 * Paper stays dark-on-light even when it sits on a dark section.
 *
 * The section-level text colours are set for the section's own background, and they
 * would otherwise cascade into the white stamps and wash them out. These selectors
 * carry a class more than the section rules on purpose, so the order of the file
 * cannot reintroduce the problem.
 */
.section--pine .stamp-card,
.section--night .stamp-card {
	color: var(--ink);
}

.section--pine .stamp-card h2,
.section--pine .stamp-card h3,
.section--night .stamp-card h2,
.section--night .stamp-card h3 {
	color: var(--parchment);
}

.section--pine .stamp-card p,
.section--pine .stamp-card li,
.section--night .stamp-card p,
.section--night .stamp-card li {
	color: var(--text-muted);
}

.section--pine .stamp-card .stamp-card__value,
.section--night .stamp-card .stamp-card__value {
	color: var(--parchment);
}


.section--pine .stamp-card .button--outline,
.section--night .stamp-card .button--outline {
	color: var(--gold);
	border-color: currentColor;
	background: transparent;
}

.section--pine .stamp-card .ticks li::before,
.section--night .stamp-card .ticks li::before {
	border-color: var(--postbox);
}

.section--pine .stamp-card .button--outline:hover,
.section--night .stamp-card .button--outline:hover {
	background: rgba(179, 30, 40, 0.08);
	color: var(--berry);
}

.ladder__note {
	margin-top: var(--space-l);
	font-size: var(--step--1);
	color: rgba(253, 247, 234, 0.75);
	max-width: 62ch;
}

.ladder__note a {
	color: var(--candle);
}

.demo__layout {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
	margin-top: var(--space-l);
}

@media (min-width: 62em) {
	.demo__layout {
		grid-template-columns: 19rem minmax(0, 1fr);
	}
}

.demo__controls {
	position: sticky;
	top: calc(var(--bar-height) + 1rem);
}

.demo__previews {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.demo__card {
	display: grid;
	gap: var(--space-xs);
	align-content: start;
}

.demo__label {
	font-family: var(--font-postal);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

.paper--letter {
	padding-bottom: 3.5rem;
	background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(216, 171, 92, 0.10) 27px 28px);
}

.demo__letter,
.demo__quote {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.5;
	margin: 0;
	color: var(--ink);
}

.demo__card figcaption {
	font-size: var(--step--1);
	color: var(--text-muted);
	border-top: 1px dashed var(--rule);
	padding-top: var(--space-xs);
}

[data-lr4-demo-name] {
	color: var(--gold);
	font-weight: 800;
	transition: background-color 350ms var(--ease);
}

.demo__card.is-updating [data-lr4-demo-name] {
	background: var(--candle);
	border-radius: 2px;
}

.mini-ticket {
	background: var(--spruce);
	color: var(--parchment);
	border-radius: var(--radius);
	padding: var(--space-s);
	display: grid;
	gap: 0.3rem;
}

.mini-ticket__route {
	font-family: var(--font-postal);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--candle);
}

.mini-ticket strong {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1.05;
	color: var(--parchment);
}

.mini-ticket__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--space-xs);
	flex-wrap: wrap;
	font-size: var(--step--1);
	color: rgba(253, 247, 234, 0.75);
	border-top: 1px dashed rgba(253, 247, 234, 0.3);
	padding-top: 0.4rem;
}

.faq__list {
	margin-top: var(--space-l);
	border-top: 2px solid var(--spruce);
}

.faq__item {
	border-bottom: 1px solid var(--rule-soft);
}

.faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: var(--space-s) 2.5rem var(--space-s) 0;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
	color: var(--parchment);
	position: relative;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-postal);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--gold);
	line-height: 1;
}

.faq__item[open] summary::after {
	content: "–";
}

.faq__answer {
	padding-bottom: var(--space-s);
	color: var(--text-muted);
	max-width: 62ch;
}

.related__grid {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-top: var(--space-m);
}

.related__card {
	display: grid;
	gap: var(--space-xs);
	text-decoration: none;
	color: var(--ink);
	padding: 0.75rem;
	transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.related__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
}

.related__art {
	display: block;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--rule-soft);
}

.related__stamp {
	font-family: var(--font-postal);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}

.related__title {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
	line-height: 1.2;
	color: var(--parchment);
}

/* ------------------------- 11 Postbox call to action and footer */

.postbox-cta {
	position: relative;
	background: var(--postbox);
	background-image:
		repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 18px, transparent 18px 36px),
		var(--fibre);
	background-size: auto, 160px 160px;
	color: var(--parchment);
	padding: var(--space-2xl) 0;
	border-top: 6px solid var(--spruce);
}

.postbox-cta__inner {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}

@media (min-width: 56em) {
	.postbox-cta__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}
}

.postbox-cta h2 {
	color: var(--parchment);
	font-size: var(--step-4);
}

.postbox-cta p {
	color: rgba(253, 247, 234, 0.88);
	max-width: 40ch;
}

.fine-print--light {
	color: rgba(253, 247, 234, 0.72);
}

.postbox-cta .button {
	background: var(--candle);
	color: var(--ink);
	border-color: var(--gold);
	box-shadow: 0 2px 0 var(--gold);
}

.postbox-cta .button:hover {
	background: var(--snow);
	color: var(--ink);
}

/* An envelope, drawn in CSS, addressed and stamped. */
.envelope {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--paper);
	border: 1px solid var(--kraft-line);
	box-shadow: var(--shadow-lift);
	transform: rotate(-2deg);
	overflow: hidden;
}

.envelope::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 58%;
	background: linear-gradient(175deg, var(--parchment-deep) 0 50%, transparent 50%);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	border-bottom: 1px solid var(--kraft-line);
}

.envelope__stamp {
	position: absolute;
	top: 8%;
	right: 7%;
	display: grid;
	place-content: center;
	width: 22%;
	aspect-ratio: 3 / 4;
	background: var(--spruce);
	color: var(--candle);
	font-family: var(--font-postal);
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.25rem;
	border: 3px solid var(--paper);
	outline: 1px dashed var(--kraft-line);
	z-index: 2;
}

.envelope__postmark {
	position: absolute;
	top: 12%;
	right: 30%;
	display: grid;
	place-content: center;
	width: 20%;
	aspect-ratio: 1;
	border: 2px solid var(--postbox);
	border-radius: 50%;
	color: var(--gold);
	font-family: var(--font-postal);
	font-size: 0.48rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	transform: rotate(-12deg);
	opacity: 0.65;
	z-index: 2;
}

.envelope__address {
	position: absolute;
	left: 12%;
	bottom: 16%;
	display: grid;
	gap: 0.55rem;
	width: 45%;
	z-index: 2;
}

.envelope__address span {
	display: block;
	height: 2px;
	background: var(--rule);
}

.envelope__address span:nth-child(2) { width: 78%; }
.envelope__address span:nth-child(3) { width: 55%; }

.site-footer {
	background: var(--spruce);
	background-image: var(--fibre);
	background-size: 160px 160px;
	color: rgba(253, 247, 234, 0.82);
	padding: var(--space-2xl) 0 var(--space-l);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-xl);
}

.site-footer__cols {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.site-footer__col h3 {
	font-family: var(--font-postal);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--candle);
	margin-bottom: var(--space-s);
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.site-footer__col a {
	color: rgba(253, 247, 234, 0.82);
	text-decoration: none;
	font-size: var(--step--1);
}

.site-footer__col a:hover {
	color: var(--snow);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.site-footer__notes {
	display: grid;
	gap: 0.5rem;
	font-size: var(--step--1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__base {
	border-top: 1px solid rgba(253, 247, 234, 0.18);
	padding-top: var(--space-m);
	display: grid;
	gap: var(--space-2xs);
	font-size: var(--step--1);
}

.site-footer__mark {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 800;
	color: var(--parchment);
}

.site-footer__base p {
	margin: 0;
}

.site-footer__independence {
	max-width: 52ch;
	color: rgba(253, 247, 234, 0.62);
}

/* ------------------------------------------------ 12 Inherited page markup */

/*
 * Everything below restyles markup written for the earlier themes so the twelve
 * published pages render in this language without being re-authored.
 */

/* The dark and pale section variants become pine and kraft. */
.section--night {
	background-color: var(--spruce);
	background-image:
		radial-gradient(circle at 20% 0%, rgba(243, 201, 105, 0.14), transparent 55%),
		var(--fibre);
	background-size: auto, 160px 160px;
	color: var(--parchment);
}

.section--night h2,
.section--night h3 {
	color: var(--parchment);
}

.section--night p,
.section--night .lede {
	color: rgba(253, 247, 234, 0.82);
}

.section--night .eyebrow {
	color: var(--candle);
}

.section--night .eyebrow::after {
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 4px, transparent 4px 8px);
}

.section--night a:not(.button) {
	color: var(--candle);
}

.section--mist {
	background-color: var(--kraft);
	background-image: var(--fibre);
	background-size: 160px 160px;
	border-block: 1px solid var(--kraft-line);
}

/* The reassurance strip becomes a row of rubber stamps. */
.trust-strip,
.delivery-strip {
	background: var(--kraft);
	border-block: 1px dashed var(--kraft-line);
}

.trust-strip__inner,
.delivery-strip__inner {
	width: min(100% - (var(--gutter) * 2), var(--wide));
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem clamp(0.75rem, 3vw, 2rem);
	padding: var(--space-s) 0;
}

.trust-strip__inner span,
.delivery-strip__mark {
	font-family: var(--font-postal);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.28rem 0.6rem;
	transform: rotate(-1deg);
}

.trust-strip__inner span:nth-child(even),
.delivery-strip__mark:nth-child(even) {
	transform: rotate(1.2deg);
	color: var(--parchment);
}

/* Two-column splits. */
.split {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: center;
}

@media (min-width: 62em) {
	.split { grid-template-columns: 1fr 1fr; }
	.split--wide-media { grid-template-columns: 1.1fr 1fr; }
}

/* Photographs are mounted like prints, not bled to the edge. */
.media-frame {
	position: relative;
	background: var(--paper);
	padding: 0.75rem;
	border: 1px solid var(--rule-soft);
	box-shadow: var(--shadow-lift);
	transform: rotate(-1deg);
}

.media-frame img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.media-frame__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 50%;
	border: 2px solid var(--paper);
	background: var(--postbox);
	color: var(--snow);
	font-size: 1.2rem;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-lift);
	transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}

.media-frame__play:hover {
	transform: scale(1.06);
	background: var(--berry);
}

/* Cards. */
.card {
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-paper);
	padding: clamp(1.3rem, 3vw, 1.9rem);
	transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
}

.section--night .card,
.section--pine .card {
	background: rgba(253, 247, 234, 0.07);
	border-color: rgba(253, 247, 234, 0.2);
	color: var(--parchment);
	box-shadow: none;
}

.section--night .card h3 {
	color: var(--parchment);
}

.card__number {
	display: inline-block;
	font-family: var(--font-postal);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gold);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.1rem 0.4rem;
	margin-bottom: var(--space-xs);
}

.section--night .card__number {
	color: var(--candle);
}

.product-card--featured {
	border-color: var(--postbox);
	box-shadow: 0 0 0 3px rgba(179, 30, 40, 0.12), var(--shadow-lift);
}

.product-price {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 800;
	line-height: 1;
	color: var(--parchment);
	margin: 0.3rem 0 var(--space-s);
	padding: 0.25rem 0.65rem;
	background: var(--candle);
	border-radius: 2px;
}

.price-note {
	font-size: var(--step--1);
	color: var(--text-muted);
}

/* Editorial layout. */
.article-layout {
	width: min(100% - (var(--gutter) * 2), var(--wide));
	margin-inline: auto;
	padding: var(--space-2xl) 0;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
}

@media (min-width: 62em) {
	.article-layout {
		grid-template-columns: 14rem minmax(0, 1fr);
	}
}

.article-body {
	max-width: var(--measure);
	font-size: var(--step-article);
	line-height: 1.75;
}

.article-body > h2 {
	margin-top: var(--space-xl);
	padding-top: var(--space-s);
	border-top: 2px solid var(--gold);
}

.article-body > h2:first-child {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

.article-body h3 {
	margin-top: var(--space-l);
}

.article-body ul,
.article-body ol {
	margin: 0 0 var(--space-s);
	padding-left: 1.35rem;
	display: grid;
	gap: 0.45rem;
}

.article-body li::marker {
	color: var(--gold);
}

.article-body blockquote {
	margin: var(--space-l) 0;
	padding-left: var(--space-m);
	border-left: 3px solid var(--postbox);
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.35;
	color: var(--parchment);
}

/* Contents: an index card on desktop, a scrolling rail on mobile. */
.article-toc {
	position: sticky;
	top: calc(var(--bar-height) + 1rem);
	display: grid;
	gap: 0.1rem;
	align-content: start;
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	box-shadow: var(--shadow-paper);
	padding: var(--space-s);
	font-size: var(--step--1);
}

.article-toc strong {
	display: block;
	font-family: var(--font-postal);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	border-bottom: 1px solid var(--rule-soft);
	padding-bottom: var(--space-2xs);
	margin-bottom: var(--space-2xs);
}

.article-toc a {
	color: var(--text-muted);
	text-decoration: none;
	padding: 0.28rem 0 0.28rem 0.6rem;
	line-height: 1.35;
	border-left: 2px solid transparent;
	transition: color 150ms var(--ease), border-color 150ms var(--ease);
}

.article-toc a:hover,
.article-toc a.is-active {
	color: var(--parchment);
	border-left-color: var(--postbox);
}

@media (max-width: 61.99em) {
	.article-toc {
		position: sticky;
		top: var(--bar-height);
		z-index: 20;
		display: flex;
		gap: 0.5rem;
		overflow-x: auto;
		scrollbar-width: none;
		border-radius: 0;
		border-inline: 0;
		box-shadow: none;
		padding: 0.6rem var(--gutter);
		margin-inline: calc(var(--gutter) * -1);
	}

	.article-toc::-webkit-scrollbar { display: none; }
	.article-toc strong { display: none; }

	.article-toc a {
		flex: none;
		white-space: nowrap;
		border: 1px solid var(--rule);
		border-radius: 999px;
		padding: 0.3rem 0.75rem;
	}

	.article-toc a.is-active {
		border-color: var(--postbox);
		background: rgba(179, 30, 40, 0.1);
	}
}

/* Key facts and verdict panels. */
.key-facts {
	background: var(--kraft);
	border: 1px solid var(--kraft-line);
	border-left: 4px solid var(--spruce);
	border-radius: var(--radius);
	padding: clamp(1.2rem, 3vw, 1.8rem);
	margin: var(--space-l) 0;
}

.key-facts h2 {
	font-size: var(--step-2);
	margin-top: 0;
	border: 0;
	padding-top: 0;
}

.key-facts ul {
	margin-bottom: 0;
}

.verdict {
	position: relative;
	background: var(--spruce);
	color: var(--parchment);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.4rem);
	margin-bottom: var(--space-l);
	box-shadow: var(--shadow-lift);
}

.verdict h2 {
	color: var(--parchment);
	margin-top: 0;
	border: 0;
	padding-top: 0;
}

.verdict p {
	color: rgba(253, 247, 234, 0.85);
}

/* The in-content product panel, as a franked envelope. */
.inline-reveal {
	position: relative;
	background: var(--paper);
	border: 2px solid var(--postbox);
	border-radius: var(--radius);
	padding: clamp(1.4rem, 3.5vw, 2.2rem);
	margin: var(--space-xl) 0;
	box-shadow: var(--shadow-paper);
	overflow: hidden;
}

.inline-reveal::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 10px;
	background: repeating-linear-gradient(
		45deg,
		var(--postbox) 0 8px,
		var(--paper) 8px 16px,
		var(--spruce) 16px 24px,
		var(--paper) 24px 32px
	);
}

.inline-reveal > * {
	margin-left: 0.75rem;
}

.inline-reveal h3 {
	margin-bottom: var(--space-2xs);
}

.inline-reveal__stamp {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 3.2rem;
	height: 4rem;
	background: var(--spruce);
	border: 3px solid var(--paper);
	outline: 1px dashed var(--kraft-line);
	display: none;
}

@media (min-width: 44em) {
	.inline-reveal__stamp { display: block; }
	.inline-reveal > * { margin-right: 5rem; }
}

/* Numbered reveal ideas. */
.idea-list {
	counter-reset: ideas;
	display: grid;
	gap: var(--space-l);
	margin: var(--space-l) 0 0;
	padding: 0;
	list-style: none;
}

.idea {
	counter-increment: ideas;
	position: relative;
	padding-left: clamp(3rem, 6vw, 4rem);
	padding-bottom: var(--space-l);
	border-bottom: 1px dashed var(--rule);
}

.idea:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.idea::before {
	content: counter(ideas, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.15em;
	font-family: var(--font-postal);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--gold);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.15rem 0.4rem;
}

.idea h2,
.idea h3 {
	margin-top: 0;
	border: 0;
	padding-top: 0;
}

/* The free ticket studio. */
.ticket-studio {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 62em) {
	.ticket-studio { grid-template-columns: 21rem minmax(0, 1fr); }
}

.ticket-controls {
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-paper);
	padding: clamp(1.3rem, 3vw, 1.9rem);
}

.ticket-controls h2 {
	font-size: var(--step-2);
}

.ticket-controls .button {
	width: 100%;
}

.ticket-controls p {
	margin-top: var(--space-s);
	color: var(--text-muted);
}

.ticket {
	position: relative;
	background: var(--paper);
	border: 2px solid var(--spruce);
	border-radius: var(--radius);
	padding: clamp(1.4rem, 4vw, 2.2rem);
	display: grid;
	gap: var(--space-m);
	min-height: 14rem;
	box-shadow: var(--shadow-lift);
	overflow: hidden;
}

.ticket::before {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 22%;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--rule) 0 6px, transparent 6px 12px);
}

.ticket__route {
	font-family: var(--font-postal);
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}

.ticket__name {
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 800;
	line-height: 1.05;
	color: var(--parchment);
	margin-top: 0.3rem;
	word-break: break-word;
}

.ticket__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: var(--space-s);
	border-top: 1px dashed var(--rule);
	padding-top: var(--space-s);
}

.ticket__meta small {
	display: block;
	font-family: var(--font-postal);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.15rem;
}

.ticket__meta span {
	font-weight: 700;
	color: var(--parchment);
}

/* Utility bars. */
.page-utility {
	background: var(--parchment);
	border-bottom: 1px solid var(--rule-soft);
}

.page-utility__inner {
	padding: var(--space-s) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-m);
}

.breadcrumbs {
	font-family: var(--font-postal);
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.breadcrumbs a {
	color: var(--text-muted);
}

.breadcrumbs a:hover {
	color: var(--gold);
}

.article-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	font-family: var(--font-postal);
	font-size: 0.74rem;
	color: var(--text-muted);
}

.article-meta__by {
	font-weight: 700;
	color: var(--parchment);
}

.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 60;
	pointer-events: none;
}

.reading-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--postbox);
	transition: width 90ms linear;
}

/* --------------------------------------------------------- 13 WooCommerce */

.woocommerce .woo-reassurance {
	list-style: none;
	margin: var(--space-s) 0 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	font-size: var(--step--1);
	color: var(--text-muted);
}

.woocommerce div.product .product_title,
.woocommerce ul.products li.product h2 {
	font-family: var(--font-display);
	color: var(--parchment);
}

.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	color: var(--parchment);
	font-family: var(--font-display);
	font-size: var(--step-2);
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--postbox);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--gold);
}

/* --------------------------------------- 14 Accessibility and motion */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--postbox);
	color: var(--snow);
	padding: 0.75rem 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--postbox);
	outline-offset: 2px;
	border-radius: 2px;
}

.section--pine :where(a, button):focus-visible,
.section--night :where(a, button):focus-visible,
.postbox-cta :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible {
	outline-color: var(--candle);
}

.video-theatre {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	background: rgba(13, 47, 32, 0.95);
	padding: var(--gutter);
}

.video-theatre video,
.video-theatre__embed {
	width: min(100%, 66rem);
	max-height: 82svh;
	border: 10px solid var(--paper);
	/* Matches the showcase frame so the same video keeps its shape when enlarged. */
	border-radius: clamp(0.6rem, 1.4vw, 1.1rem);
	box-shadow: var(--shadow-lift);
	background: #000;
}

/* An iframe has no intrinsic ratio to size against, so it is given one. */
.video-theatre__embed {
	aspect-ratio: 16 / 9;
	height: auto;
}

.video-theatre__close {
	position: absolute;
	top: var(--gutter);
	right: var(--gutter);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid rgba(253, 247, 234, 0.5);
	background: transparent;
	color: var(--parchment);
	font-size: 1.1rem;
	cursor: pointer;
}

.video-theatre__close:hover {
	background: var(--postbox);
	border-color: var(--postbox);
	color: var(--snow);
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	/* The snow is decoration; it goes entirely rather than freezing mid-fall. */
	.hero .snow,
	.article-hero .snow {
		display: none;
	}
}

@media (prefers-contrast: more) {
	:root {
		--text-muted: #e6dcc4;
		--rule: rgba(216, 171, 92, 0.6);
		--rule-soft: rgba(216, 171, 92, 0.4);
	}
}

/* ------------------------------------------------- 24 The video showcase */

/*
 * The sample video, directly under the hero. Dark surface so the frame reads as a
 * screen rather than another sheet of paper, and so it separates the hero from the
 * parchment sections below it.
 */
.video-showcase {
	background: var(--pine, #10281d);
	background-image: var(--fibre);
	background-size: 160px 160px;
	padding: var(--space-2xl) 0;
	text-align: center;
	color: var(--parchment);
}

.video-showcase .eyebrow {
	color: var(--gold);
}

.video-showcase__title {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem);
	line-height: 1.1;
	/* The eyebrow above this is gone, so the heading opens the section itself. */
	margin: 0;
	color: var(--parchment);
}

.video-showcase__lede {
	margin: 0;
	color: rgba(253, 247, 234, 0.86);
	font-size: var(--step-1);
}

.video-showcase__body {
	margin: var(--space-s) 0 0;
	color: rgba(253, 247, 234, 0.7);
}

.video-showcase__copy {
	max-width: 56ch;
	margin: var(--space-l) auto 0;
}

.video-showcase__frame {
	position: relative;
	max-width: 62rem;
	margin: var(--space-l) auto 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	/*
	 * Softer than the theme's --radius-lg. Everything else on the site is paper,
	 * where a near-square corner is right; this one is a screen, and reads as one
	 * with a rounder corner. Kept off the sharp end so it still sits in the set.
	 */
	border-radius: clamp(0.6rem, 1.4vw, 1.1rem);
	border: 1px solid rgba(253, 247, 234, 0.22);
	box-shadow: var(--shadow-lift);
	background: #000;
}

.video-showcase__poster,
.video-showcase__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.video-showcase__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--space-xs);
	justify-items: center;
	width: 100%;
	background: linear-gradient(180deg, rgba(16, 40, 29, 0.12), rgba(16, 40, 29, 0.55));
	border: 0;
	color: var(--parchment);
	cursor: pointer;
	transition: background-color 180ms var(--ease);
}

.video-showcase__play:hover,
.video-showcase__play:focus-visible {
	background: linear-gradient(180deg, rgba(16, 40, 29, 0.05), rgba(16, 40, 29, 0.42));
}

/* A wax-seal disc with a play triangle punched out of it. */
.video-showcase__play-mark {
	width: clamp(3.6rem, 8vw, 5.2rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--postbox);
	border: 2px solid rgba(253, 247, 234, 0.85);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
	display: grid;
	place-content: center;
	transition: transform 180ms var(--ease);
}

.video-showcase__play-mark::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 0.28em;
	border-left: 1.05rem solid var(--parchment);
	border-top: 0.66rem solid transparent;
	border-bottom: 0.66rem solid transparent;
}

.video-showcase__play:hover .video-showcase__play-mark {
	transform: scale(1.06);
}

.video-showcase__play-label {
	font-family: var(--font-postal);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.video-showcase__action {
	margin-top: var(--space-l);
}

@media (prefers-reduced-motion: reduce) {
	.video-showcase__play-mark,
	.video-showcase__play:hover .video-showcase__play-mark {
		transition: none;
		transform: none;
	}
}

/* A media frame that became a facade plays in place; the iframe fills the frame. */
.media-frame[data-lr4-facade] {
	position: relative;
}

.media-frame[data-lr4-facade] iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: clamp(0.6rem, 1.4vw, 1.1rem);
	background: #000;
}

/* ------------------- 15 Ornament layer — gilding, lanterns, snow, aurora */

/*
 * Everything below is what makes v4 v4. It is deliberately the last section, and almost
 * entirely additive: strip section 15 and the theme still renders as a legible dark
 * site. That property is what lets the illustrated art be optional.
 *
 * One change could not live here. Sections 8–13 were written for pale paper, where
 * `color: var(--spruce)` meant "heading" and `color: var(--postbox)` meant "accent" —
 * both of which disappear on a dark ground. Every `color:` use of those two tokens was
 * re-pointed to parchment and gold in place, throughout the file. Their background and
 * border uses are untouched, and are still spruce and red.
 *
 * ART HOOKS. Each ornament reads a custom property that is `none` by default. When the
 * matching file in assets/images/ornaments/ exists, switch it on by uncommenting the
 * one line in the block marked "generated art" at the end of this section. Until then
 * the CSS-drawn fallback beneath it does the job. See ornaments/PROMPTS.md for the
 * generation prompts and the exact filenames and sizes each hook expects.
 */

:root {
	--art-snow-edge: none;
	--art-lantern: none;
	--art-corner: none;
	--art-seal: none;
	--art-flourish: none;
	--art-frame: none;
	--art-aurora-plate: none;
	--art-holly: none;

	--snow-edge-height: clamp(18px, 2.4vw, 34px);
	--lantern-width: clamp(52px, 7vw, 104px);
}

/* ------------------------------------------------------------ 15.1 The sky */

/*
 * The aurora is painted on a fixed pseudo-element rather than the body background so
 * it stays put while the page scrolls — the sky should not slide past the trees.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image: var(--art-aurora-plate), var(--aurora);
	background-size: cover, auto;
	background-position: center top;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* A vignette so the gilding at the edges never competes with the content. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(2, 20, 16, 0.75) 100%);
	pointer-events: none;
}

/* --------------------------------------------------- 15.2 Snow along an edge */

/*
 * A drift that sits on top of a boundary. The fallback is three overlapping radial
 * gradients, which reads as soft snow at small sizes; the generated plate replaces it
 * with a proper hand-drawn drift and icicles.
 */
.snow-edge {
	position: absolute;
	left: 0;
	right: 0;
	height: var(--snow-edge-height);
	pointer-events: none;
	background-image: var(--art-snow-edge);
	background-size: 1200px 100%;
	background-repeat: repeat-x;
	background-position: center bottom;
}

.snow-edge::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(14px 10px at 8% 100%, var(--snow) 60%, transparent 62%),
		radial-gradient(22px 12px at 24% 100%, var(--snow) 60%, transparent 62%),
		radial-gradient(16px 9px at 41% 100%, var(--snow) 60%, transparent 62%),
		radial-gradient(26px 13px at 58% 100%, var(--snow) 60%, transparent 62%),
		radial-gradient(18px 10px at 76% 100%, var(--snow) 60%, transparent 62%),
		radial-gradient(20px 11px at 93% 100%, var(--snow) 60%, transparent 62%),
		linear-gradient(180deg, transparent 72%, rgba(255, 255, 255, 0.85) 100%);
	opacity: 0.82;
}

/* When the drawn plate is available the CSS drift would double it up. */
.snow-edge[style*="ornaments"]::before,
:root:not([data-lr4-art="fallback"]) .snow-edge.has-art::before {
	display: none;
}

.snow-edge--top {
	top: 0;
	transform: scaleY(-1);
}

.snow-edge--bottom {
	bottom: 0;
}

/* ------------------------------------------------------- 15.3 Gilded rules */

/*
 * The double rule with a diamond at its centre, used to close a masthead and to open
 * a section. Pure CSS: a gradient hairline that fades at both ends, so it never
 * collides with the gutter.
 */
.gild-rule {
	position: relative;
	height: 1px;
	border: 0;
	margin: var(--space-s) 0;
	background: linear-gradient(90deg, transparent, var(--rule) 12%, var(--gold) 50%, var(--rule) 88%, transparent);
}

.gild-rule::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	background: var(--gold-bright);
	transform: translate(-50%, -50%) rotate(45deg);
	box-shadow: 0 0 10px rgba(255, 207, 133, 0.7);
}

/* The centred flourish above a section title. */
.flourish {
	display: block;
	width: clamp(120px, 22vw, 260px);
	height: 20px;
	margin: 0 auto var(--space-xs);
	background-image: var(--art-flourish);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.flourish::before {
	content: "❋";
	display: block;
	text-align: center;
	color: var(--gold);
	font-size: 0.9rem;
	line-height: 20px;
	letter-spacing: 1.4em;
	text-indent: 1.4em;
	opacity: 0.85;
}

/* ------------------------------------------------ 15.4 Corner filigree */

/*
 * Four corner pieces on the frame that wraps the masthead. The fallback is an L of two
 * gilded hairlines, which is quiet enough to live with permanently if the drawn
 * filigree never arrives.
 */
.gild-frame {
	position: relative;
}

.gild-frame > .corner {
	position: absolute;
	width: clamp(28px, 4vw, 64px);
	height: clamp(28px, 4vw, 64px);
	background-image: var(--art-corner);
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}

.gild-frame > .corner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-top: 1px solid var(--gold);
	border-left: 1px solid var(--gold);
	opacity: 0.55;
}

.corner--tl { top: 8px; left: 8px; }
.corner--tr { top: 8px; right: 8px; transform: scaleX(-1); }
.corner--bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.corner--br { bottom: 8px; right: 8px; transform: scale(-1); }

/* ---------------------------------------------------------- 15.5 Lanterns */

/*
 * The lanterns hang from the top edge, flanking the masthead. They are decorative and
 * carry no meaning, so they are hidden from assistive technology in the template and
 * dropped entirely below the width where they would crowd the wordmark.
 */
.lantern {
	position: absolute;
	top: 0;
	width: var(--lantern-width);
	aspect-ratio: 1 / 2.4;
	background-image: var(--art-lantern);
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
	pointer-events: none;
	transform-origin: 50% 0;
	animation: lr4-sway 7s ease-in-out infinite alternate;
}

.lantern--left { left: clamp(0.5rem, 3vw, 3.5rem); }
.lantern--right { right: clamp(0.5rem, 3vw, 3.5rem); animation-delay: -3.5s; }

/* Fallback: a chain, a warm glass box and the glow it throws. */
.lantern::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 38%;
	transform: translateX(-50%);
	background: linear-gradient(180deg, var(--gold-deep), var(--gold));
}

.lantern::after {
	content: "";
	position: absolute;
	top: 38%;
	left: 50%;
	width: 68%;
	height: 46%;
	transform: translateX(-50%);
	border: 1px solid var(--gold);
	border-radius: 3px 3px 5px 5px;
	background: linear-gradient(180deg, rgba(255, 207, 133, 0.95), rgba(216, 138, 43, 0.75));
	box-shadow: var(--glow-candle);
}

@keyframes lr4-sway {
	from { transform: rotate(-2.2deg); }
	to { transform: rotate(2.2deg); }
}

@media (max-width: 61.99em) {
	.lantern { display: none; }
}

/* ------------------------------------------------------- 15.6 The wax seal */

/*
 * The date stamp in the masthead's top right. Set as a wax medallion with a stamped
 * ring of type. The date is printed by the template, so it is always today's.
 */
.seal {
	position: relative;
	display: grid;
	place-content: center;
	gap: 0.1rem;
	width: clamp(64px, 8vw, 96px);
	aspect-ratio: 1;
	border-radius: 50%;
	text-align: center;
	color: var(--gold-bright);
	font-family: var(--font-postal);
	text-transform: uppercase;
	background-image: var(--art-seal);
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--berry);
	box-shadow:
		inset 0 -3px 6px rgba(0, 0, 0, 0.45),
		inset 0 2px 4px rgba(255, 255, 255, 0.15),
		0 6px 18px -8px rgba(0, 0, 0, 0.9);
}

.seal::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(242, 214, 154, 0.6);
	border-radius: 50%;
}

.seal__top,
.seal__bottom {
	font-size: 0.44rem;
	letter-spacing: 0.16em;
	opacity: 0.9;
}

.seal__date {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* ------------------------------------------- 15.7 Masthead and navigation */

.masthead__full {
	position: relative;
	background:
		linear-gradient(180deg, rgba(2, 20, 16, 0.9), rgba(4, 33, 26, 0.72));
	border-bottom: 0;
	padding-top: calc(var(--snow-edge-height) * 0.6);
}

.masthead__inner {
	position: relative;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	padding-block: clamp(1.2rem, 3vw, 2.2rem);
	text-align: center;
}

.wordmark {
	align-items: center;
	text-align: center;
}

/*
 * The wordmark is type by default and art when a logo file is set. `--lr4-logo` is
 * printed by the template from the Customizer setting, so swapping the lettering for
 * the drawn logo is a media-library upload, not a code change.
 */
.wordmark__name {
	background-image: linear-gradient(180deg, var(--gold-bright) 8%, var(--gold) 52%, var(--gold-deep) 96%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(2.2rem, 6.5vw, 4.4rem);
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.02;
	filter: drop-shadow(0 2px 10px rgba(255, 207, 133, 0.28));
}

.wordmark--art .wordmark__name {
	display: block;
	width: min(90vw, 620px);
	height: clamp(3rem, 8vw, 5.6rem);
	background-image: var(--lr4-logo);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	filter: none;
	text-indent: -9999px;
	overflow: hidden;
}

.wordmark__rule {
	display: none;
}

.wordmark__tagline {
	color: var(--gold);
	font-family: var(--font-body);
	font-size: clamp(0.62rem, 1.1vw, 0.76rem);
	letter-spacing: 0.34em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* The tagline sits between two short gilded rules. */
.wordmark__tagline::before,
.wordmark__tagline::after {
	content: "✦";
	margin: 0 0.9em;
	color: var(--gold-deep);
	font-size: 0.7em;
	vertical-align: 0.15em;
}

.masthead__seal {
	position: absolute;
	top: clamp(0.6rem, 2vw, 1.4rem);
	right: 0;
}

@media (max-width: 47.99em) {
	.masthead__seal { display: none; }
}

.masthead__bar {
	background: rgba(2, 20, 16, 0.86);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule-soft);
	box-shadow: 0 12px 30px -26px #000;
}

.masthead__bar.is-stuck {
	background: rgba(2, 20, 16, 0.96);
	box-shadow: 0 10px 30px -18px #000;
}

.site-nav li a {
	color: var(--cream);
	font-family: var(--font-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.site-nav li a:hover,
.site-nav .is-current a {
	color: var(--gold-bright);
}

.site-nav li a::after {
	background: var(--gold);
}

/* Hairline separators between the top-level items, as in the plate. */
@media (min-width: 62em) {
	.site-nav__list > li + li {
		border-left: 1px solid var(--rule-soft);
		padding-left: clamp(0.8rem, 1.6vw, 1.5rem);
		margin-left: clamp(0.1rem, 0.6vw, 0.6rem);
	}
}

/* --------------------------------------------------------- 15.8 Buttons */

/*
 * Red enamel with a gold bezel. The bezel is an inset ring rather than a border so it
 * survives the compact and block variants without recomputing padding.
 */
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	position: relative;
	background: linear-gradient(180deg, var(--ember) 0%, var(--postbox) 45%, var(--berry) 100%);
	border-color: var(--gold-deep);
	color: var(--gold-bright);
	box-shadow:
		inset 0 0 0 1px rgba(242, 214, 154, 0.35),
		0 2px 0 var(--berry),
		0 10px 26px -14px rgba(0, 0, 0, 0.9);
}

.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: linear-gradient(180deg, #d84450 0%, var(--postbox) 50%, var(--berry) 100%);
	color: var(--snow);
	box-shadow:
		inset 0 0 0 1px rgba(242, 214, 154, 0.6),
		0 3px 0 var(--berry),
		0 0 30px -6px rgba(255, 207, 133, 0.4);
}

.button--outline,
.button--ghost {
	background: rgba(246, 236, 216, 0.03);
	color: var(--gold-bright);
	border-color: var(--gold);
	box-shadow: inset 0 0 0 1px rgba(216, 171, 92, 0.18);
}

.button--outline:hover,
.button--ghost:hover {
	background: rgba(216, 171, 92, 0.14);
	color: var(--gold-bright);
	box-shadow: inset 0 0 0 1px rgba(216, 171, 92, 0.45);
}

/* -------------------------------------------------- 15.9 Surfaces and cards */

/*
 * A panel in this theme is a pane of dark glass with a gilded hairline, not a sheet of
 * paper. Every inherited `.paper`, `.card`, `.stamp-card` and `.related__card` picks
 * this up through the token aliases; what is added here is the gilding.
 */
.paper,
.card,
.stamp-card,
.related__card,
.inline-reveal,
.faq__item,
.key-facts,
.verdict,
.glance,
.ticket {
	background-color: var(--panel);
	background-image: linear-gradient(180deg, rgba(246, 236, 216, 0.045), transparent 60%);
	border: 1px solid var(--rule-soft);
	color: var(--text);
	box-shadow: var(--shadow-paper);
}

.paper:hover,
.card:hover,
.stamp-card:hover,
.related__card:hover {
	border-color: var(--rule);
	box-shadow: var(--shadow-lift), var(--glow-gold);
}

.stamp-card--featured {
	border-color: var(--gold);
	box-shadow: var(--shadow-lift), var(--glow-gold);
}

.section--kraft,
.guide-section--kraft {
	background-color: rgba(10, 50, 39, 0.55);
	border-block: 1px solid var(--rule-soft);
}

.section--pine,
.section--night {
	background-color: rgba(2, 20, 16, 0.72);
	background-image: var(--fibre);
}

/* A gilded flourish opening every section title. */
.section__title,
.video-showcase__title {
	color: var(--parchment);
}

.eyebrow {
	color: var(--gold);
	letter-spacing: 0.3em;
}

.eyebrow::after,
.eyebrow--light::after {
	background: var(--gold-deep);
}

/* ------------------------------------------------- 15.10 The framed picture */

/*
 * The hero photograph and the in-content media frames are hung as tilted prints with a
 * deckled paper border — the plate's defining object. The tilt is applied to the frame
 * and removed on hover so the image can be read straight.
 */
.media-frame,
.video-showcase__frame {
	position: relative;
	padding: clamp(0.7rem, 1.6vw, 1.15rem) clamp(0.7rem, 1.6vw, 1.15rem) clamp(1.6rem, 3vw, 2.4rem);
	background-color: #f3ecdd;
	background-image: var(--art-frame);
	background-size: 100% 100%;
	border: 0;
	border-radius: 2px;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.5),
		0 30px 60px -24px rgba(0, 0, 0, 0.95),
		var(--glow-gold);
	transform: rotate(-1.4deg);
	transition: transform 400ms var(--ease);
}

.media-frame:hover,
.video-showcase__frame:hover {
	transform: rotate(0deg);
}

.media-frame img,
.video-showcase__poster {
	border-radius: 1px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* The sprig of holly that rests on the lower right corner of the print. */
.media-frame::after,
.video-showcase__frame::after {
	content: "";
	position: absolute;
	right: -14px;
	bottom: -10px;
	width: clamp(48px, 7vw, 96px);
	aspect-ratio: 1.4;
	background-image: var(--art-holly);
	background-size: contain;
	background-position: bottom right;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* ------------------------------------------------------------ 15.11 Hero */

.hero,
.article-hero {
	position: relative;
	background-color: transparent;
	color: var(--text);
	overflow: hidden;
}

.hero::before,
.article-hero::before {
	background-image: var(--lr4-hero-image, var(--hero-image, none));
	background-size: cover;
	background-position: center;
	opacity: 0.5;
	filter: saturate(1.05);
}

.hero h1,
.article-hero h1 {
	color: var(--parchment);
	font-weight: 500;
	line-height: 1.04;
	text-wrap: balance;
}

/*
 * The plate sets the second and third lines of the headline in gold. An editor cannot
 * be asked to wrap spans by hand across twelve pages, so the theme gilds any <em> or
 * <strong> the copy already carries in a hero heading.
 */
.hero h1 em,
.hero h1 strong,
.article-hero h1 em,
.article-hero h1 strong {
	background-image: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: normal;
	font-weight: inherit;
}

.hero .lede,
.article-hero .lede {
	color: var(--cream);
	opacity: 0.92;
}

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

.site-footer {
	position: relative;
	background: linear-gradient(180deg, rgba(2, 20, 16, 0.6), var(--night-deep));
	border-top: 1px solid var(--rule-soft);
	color: var(--cream);
	padding-top: calc(var(--space-xl) + var(--snow-edge-height));
}

.site-footer__col h3 {
	color: var(--gold);
	letter-spacing: 0.22em;
}

.site-footer__mark {
	background-image: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* -------------------------------------------------------- 15.13 Sparkle */

/*
 * The drifting gold specks in the plate. One element, three gradients, no JavaScript —
 * and switched off entirely under reduced motion, where a moving background is exactly
 * the thing being asked about.
 */
.sparkle {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 231, 184, 0.9), transparent),
		radial-gradient(1.5px 1.5px at 68% 12%, rgba(255, 231, 184, 0.7), transparent),
		radial-gradient(2px 2px at 84% 58%, rgba(255, 231, 184, 0.75), transparent),
		radial-gradient(1.5px 1.5px at 34% 76%, rgba(255, 231, 184, 0.6), transparent),
		radial-gradient(1.5px 1.5px at 52% 42%, rgba(255, 231, 184, 0.55), transparent);
	background-size: 420px 420px;
	animation: lr4-drift 26s linear infinite;
	opacity: 0.7;
}

@keyframes lr4-drift {
	from { background-position: 0 0; }
	to { background-position: 420px 420px; }
}

@media (prefers-reduced-motion: reduce) {
	.sparkle,
	.lantern {
		animation: none;
	}
}

/* --------------------------------------------- 15.14 Contrast and fallback */

/*
 * Under forced high contrast the gilded hairlines and the clipped-gradient type are
 * the two things that fail first, so both revert to flat, fully opaque colour.
 */
@media (prefers-contrast: more) {
	:root {
		--rule: rgba(216, 171, 92, 0.8);
		--rule-soft: rgba(216, 171, 92, 0.55);
	}

	.wordmark__name,
	.hero h1 em,
	.hero h1 strong,
	.article-hero h1 em,
	.article-hero h1 strong,
	.site-footer__mark {
		background-image: none;
		-webkit-text-fill-color: currentColor;
		color: var(--gold-bright);
	}

	body::after {
		display: none;
	}
}

/*
 * GENERATED ART. Uncomment a line once the matching file exists in
 * assets/images/ornaments/. Each is safe to enable independently — the fallback for
 * that ornament simply stops being visible underneath it.
 */
/*
:root {
	--art-snow-edge: url("../images/ornaments/snow-edge.webp");
	--art-lantern: url("../images/ornaments/lantern.webp");
	--art-corner: url("../images/ornaments/corner-filigree.webp");
	--art-seal: url("../images/ornaments/wax-seal.webp");
	--art-flourish: url("../images/ornaments/flourish.webp");
	--art-frame: url("../images/ornaments/photo-frame.webp");
	--art-aurora-plate: url("../images/ornaments/aurora-plate.webp");
	--art-holly: url("../images/ornaments/holly-sprig.webp");
}

.snow-edge::before,
.lantern::before,
.lantern::after,
.gild-frame > .corner::before,
.seal::before,
.flourish::before {
	display: none;
}
*/

/*
 * The eyebrow becomes a centred, star-flanked label — the plate's
 * "✦ THE FIRST SCENE OF THEIR ADVENTURE ✦". The inherited rule set it as a label
 * followed by a dashed rule that filled the row, so that trailing rule is retired
 * here and a matching star put on each side instead.
 */
.eyebrow {
	justify-content: center;
	gap: 0.9em;
	text-align: center;
}

.eyebrow::before,
.eyebrow::after {
	content: "✦";
	flex: 0 0 auto;
	height: auto;
	background: none;
	color: var(--gold-deep);
	font-size: 0.8em;
}

/* Left-aligned contexts keep the label at the start of the line. */
.article-body .eyebrow,
.inline-reveal .eyebrow,
.postbox-cta__copy .eyebrow {
	justify-content: flex-start;
}

/* ------------------------------------- 15.15 Corrections to inherited rules */

/*
 * Four places where the light theme's geometry, not its colour, is wrong for v4.
 * They are gathered here rather than edited in place so section 15 stays the single
 * thing that has to be read to understand what v4 changed.
 */

/* 1. The hero wash. The inherited ::before was a 3px stamp-perforation stripe down
      the left edge; here it carries the hero photograph across the whole panel. */
.hero::before,
.article-hero::before {
	inset: 0;
	width: auto;
	/*
	 * Held well back. The same photograph is also hung as the pinned print to the
	 * right, so at full strength the hero showed it twice and ran the headline across
	 * Santa's face. Here it is atmosphere behind the type, and the print is the one
	 * place the picture is actually legible.
	 */
	opacity: 0.32;
}

/* A scrim under the copy, heaviest where the text starts. */
.hero::before,
.article-hero::before {
	box-shadow: inset 0 0 0 100vmax rgba(2, 20, 16, 0.15);
}

.hero,
.article-hero {
	background-image:
		linear-gradient(96deg, rgba(2, 20, 16, 0.92) 0%, rgba(2, 20, 16, 0.72) 38%, rgba(2, 20, 16, 0.3) 66%, transparent 100%),
		var(--fibre);
	background-size: auto, 160px 160px;
	background-repeat: no-repeat, repeat;
}

/*
 * The scrim is painted on the section, so the copy has to sit above it — but the
 * ornaments are absolutely positioned against the hero, and lifting them with
 * `position: relative` drops the snow drift back into the flow, where it has no height
 * and never appears. Everything except the ornaments.
 */
.hero > *:not(.sparkle):not(.snow-edge),
.article-hero > *:not(.sparkle):not(.snow-edge) {
	position: relative;
	z-index: 2;
}

.hero > .sparkle,
.hero > .snow-edge,
.article-hero > .sparkle,
.article-hero > .snow-edge {
	z-index: 3;
}

/*
 * 2. The pinned hero print. It only earns its place when there is a photograph to put
 *    in it — an empty bordered rectangle is worse than nothing. The theme prints
 *    --lr4-hero-print alongside the image URL, so the frame appears only on pages
 *    that actually have hero art, and the wide-screen media query below still gates
 *    it on there being room.
 */
@media (min-width: 62em) {
	.hero::after,
	.article-hero::after {
		display: var(--lr4-hero-print, none);
		border: clamp(0.6rem, 1.1vw, 0.9rem) solid #f3ecdd;
		border-bottom-width: clamp(1.6rem, 2.6vw, 2.2rem);
		border-radius: 2px;
		box-shadow:
			0 2px 4px rgba(0, 0, 0, 0.5),
			0 30px 60px -24px rgba(0, 0, 0, 0.95),
			var(--glow-gold);
	}
}

/*
 * 3. The showcase poster is absolutely positioned to fill its frame, so the paper
 *    margin the frame paints underneath was invisible. Inset it by the same amounts
 *    the frame is padded, and the print border appears.
 */
.video-showcase__frame {
	--frame-pad: clamp(0.7rem, 1.6vw, 1.15rem);
	--frame-pad-bottom: clamp(1.6rem, 3vw, 2.4rem);
	aspect-ratio: auto;
	overflow: visible;
}

.video-showcase__poster,
.video-showcase__frame iframe {
	position: relative;
	inset: auto;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* The play control is positioned against the frame, so it has to skip the margin. */
.video-showcase__play {
	inset: var(--frame-pad) var(--frame-pad) var(--frame-pad-bottom);
}

/*
 * 4. Section headers are centred in this theme — the eyebrow, the title and the lede
 *    read as one plate. Article bodies and the two split layouts keep their left
 *    alignment, where centring would hurt the line length.
 */
.section > .wrap > .section__title,
.section > .wrap > .lede,
.ladder__note {
	text-align: center;
}

.section > .wrap > .lede {
	margin-inline: auto;
}

.article-body :where(h2, h3, p),
.postbox-cta__copy :where(h2, p),
.inline-reveal :where(h3, p) {
	text-align: left;
}

/* 5. Three marks, not one — the single glyph read as a stray asterisk. */
.flourish::before {
	content: "✦ ❋ ✦";
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	font-size: 0.8rem;
}

/* ------------------------------ 15.16 The closing call to action */

/*
 * The inherited version was a solid postbox-red band — right when the page above it
 * was parchment, far too loud when the whole site is already dark and gilded. Here it
 * becomes the deepest panel on the page, with the red kept for the button alone.
 */
.postbox-cta {
	background-color: var(--night-deep);
	background-image:
		radial-gradient(80% 120% at 50% 0%, rgba(216, 171, 92, 0.12), transparent 60%),
		var(--fibre);
	border-top: 1px solid var(--rule-soft);
	color: var(--cream);
}

.postbox-cta h2 {
	color: var(--parchment);
}

.envelope {
	border-color: var(--rule);
}

/*
 * The closing CTA's button was inverted to candlelight-on-red because the band behind
 * it used to be solid postbox red. The band is now the darkest panel on the page, so
 * the button goes back to the site's red enamel and the secondary to a gold outline —
 * a pale block with pale type is unreadable either way round.
 */
.postbox-cta .button {
	background: linear-gradient(180deg, var(--ember) 0%, var(--postbox) 45%, var(--berry) 100%);
	color: var(--gold-bright);
	border-color: var(--gold-deep);
	box-shadow:
		inset 0 0 0 1px rgba(242, 214, 154, 0.35),
		0 2px 0 var(--berry),
		0 10px 26px -14px rgba(0, 0, 0, 0.9);
}

.postbox-cta .button:hover {
	background: linear-gradient(180deg, #d84450 0%, var(--postbox) 50%, var(--berry) 100%);
	color: var(--snow);
}

.postbox-cta .button--outline {
	background: rgba(246, 236, 216, 0.03);
	color: var(--gold-bright);
	border-color: var(--gold);
	box-shadow: inset 0 0 0 1px rgba(216, 171, 92, 0.18);
}

/* Ticks read as gold on this ground; red on spruce is close to invisible. */
.ticks li::before,
.tick-list li::before {
	border-left-color: var(--gold);
	border-bottom-color: var(--gold);
}

/* --------------------------- 15.17 Surfaces that were still pale */

/*
 * The last of the light theme's paper panels. Each was a parchment surface holding
 * text that inherited its colour — which was ink-on-paper then and cream-on-cream now.
 * These are the panels that do not appear in a static screenshot of the home page:
 * the mobile menu, the desktop dropdown, the breadcrumb bar, the selection highlight.
 */
.site-nav,
.site-nav .sub-menu,
.page-utility {
	background-color: rgba(2, 20, 16, 0.97);
	background-image: var(--fibre);
	border-color: var(--rule-soft);
	color: var(--cream);
}

@supports (backdrop-filter: blur(1px)) {
	.site-nav .sub-menu {
		background-color: rgba(2, 20, 16, 0.92);
		backdrop-filter: blur(10px);
	}
}

.page-utility {
	border-bottom: 1px solid var(--rule-soft);
}

/*
 * The two remaining gold plates carry dark type, not light — they are the only places
 * in the theme where the surface is brighter than the text.
 */
.product-price {
	background: linear-gradient(180deg, var(--gold-bright), var(--gold));
	color: var(--night-deep);
}

.demo__card.is-updating [data-lr4-demo-name] {
	color: var(--night-deep);
}

::selection {
	background: var(--candle);
	color: var(--night-deep);
}