/**
 * Neighborhood Disruptors — FINAL Visual Layer
 * ------------------------------------------------------------
 * Skywork visual system translated into WordPress presentation
 * primitives. Additive: does not override any existing selector
 * that the production nd-editorial.css / nd-modules.css already
 * defines. Scoped to body.nd-brand + ND-specific classes so it
 * cannot leak into Listeo dashboard, WooCommerce admin, or
 * Dokan vendor pages.
 *
 * Source of truth: Neighborhood_Disruptors_—_Final_Developer_Visual_Handoff.pdf
 *                  Skywork ND.tsx / Site.tsx / data.ts
 *
 * Aliases the prescribed handoff tokens (--pearl / --stone /
 * --plum / --sage / --linen / --champagne / --champagne-light /
 * --ink / --soft-ink / --muted) so future work can use the
 * handoff vocabulary directly.
 */

/* ============================================================
 * 1. Token aliases — handoff vocabulary
 * ============================================================ */
:root {
	/* Handoff-prescribed palette */
	--pearl:            #f7f3ed;
	--ivory:            #fffdf8;
	--stone:            #e9e2d8;
	--ink:              #151613;
	--soft-ink:         #343630;
	--muted:            #727068;
	--champagne:        #b99b62;
	--champagne-light:  #dcc99d;
	--plum:             #493246;
	--sage:             #69796d;
	--linen:            #eee7dc;

	/* Aliases to production ND tokens so both vocabularies work */
	--nd-pearl:            var(--pearl);
	--nd-stone:            var(--stone);
	--nd-plum:             var(--plum);
	--nd-sage:             var(--sage);
	--nd-linen:            var(--linen);
	--nd-champagne-light:  var(--champagne-light);
	--nd-soft-ink:         var(--soft-ink);

	/* Typography per handoff:
	 *   Display serif: Playfair Display / Georgia fallback
	 *   Body sans:     DM Sans / Arial fallback
	 * If existing production shipped Cormorant Garamond / Inter,
	 * fall back through both stacks so either font family works
	 * without a hard swap.
	 */
	--nd-serif-final:  "Playfair Display", "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
	--nd-sans-final:   "DM Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	/* Editorial rhythm per handoff */
	--nd-page-pad-dt: 6vw;       /* desktop 5–8vw */
	--nd-page-pad-mb: 22px;      /* mobile ~20–23px */
	--nd-section-pad-dt: 112px;  /* desktop 95–130px */
	--nd-section-pad-mb: 72px;   /* mobile 65–85px */
	--nd-hero-min-dt: 640px;     /* desktop 560–720px */
	--nd-hero-min-mb: 500px;     /* mobile 430–590px */

	/* Motion */
	--nd-ease-lux: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
 * 2. Editorial reset — body.nd-brand only, additive
 * ============================================================ */

body.nd-brand {
	background: var(--pearl);
	color: var(--ink);
	font-family: var(--nd-sans-final);
}

body.nd-brand h1,
body.nd-brand h2,
body.nd-brand h3,
body.nd-brand .nd-display,
body.nd-brand .editorial-card h3,
body.nd-brand .nd-hero-final h1 {
	font-family: var(--nd-serif-final);
	font-weight: 500;
	color: var(--ink);
	letter-spacing: -0.005em;
}

/* Editorial kickers */
body.nd-brand .nd-kicker,
body.nd-brand .editorial-kicker,
body.nd-brand .world-tab {
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
}
body.nd-brand .nd-kicker.gold,
body.nd-brand .nd-kicker--gold {
	color: var(--champagne);
}

/* Long-form editorial prose */
body.nd-brand .nd-editorial-body p,
body.nd-brand .nd-longform p {
	font-family: var(--nd-serif-final);
	font-size: clamp(17px, 1.35vw, 19px);
	line-height: 1.9;
	color: var(--soft-ink);
	max-width: 66ch;
	margin: 0 auto 1.4em;
}

/* ============================================================
 * 3. Announcement bar (per Skywork Header)
 * ============================================================ */
.nd-announcement {
	background: var(--ink);
	color: var(--pearl);
	font-family: var(--nd-sans-final);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px var(--nd-page-pad-dt);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}
.nd-announcement a {
	color: var(--champagne-light);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.nd-announcement a:hover { color: var(--champagne); }

/* ============================================================
 * 4. Buttons — Skywork nd-button dark / light / inline
 * ============================================================ */
.nd-button,
.nd-button.dark,
body.nd-brand .nd-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var(--ink);
	color: var(--pearl);
	border: 1px solid var(--ink);
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0;
	cursor: pointer;
	transition: all 220ms var(--nd-ease-lux);
}
.nd-button:hover,
.nd-button.dark:hover {
	background: transparent;
	color: var(--ink);
	transform: translateY(-1px);
	box-shadow: 0 6px 22px -18px var(--ink);
}
.nd-button.light {
	background: var(--pearl);
	color: var(--ink);
	border-color: var(--pearl);
}
.nd-button.light:hover {
	background: transparent;
	color: var(--pearl);
	border-color: var(--pearl);
}
.nd-button--champagne {
	background: var(--champagne);
	color: var(--ink);
	border-color: var(--champagne);
}
.nd-button--champagne:hover {
	background: transparent;
	color: var(--champagne);
}
.nd-inline {
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--champagne);
	padding-bottom: 2px;
	transition: color 180ms var(--nd-ease-lux);
}
.nd-inline:hover { color: var(--champagne); }

/* Focus rings for keyboard users, reduced-motion respected */
.nd-button:focus-visible,
.nd-inline:focus-visible,
body.nd-brand a:focus-visible {
	outline: 2px solid var(--champagne);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.nd-button, .nd-button:hover, .nd-inline { transition: none; transform: none; }
}

/* ============================================================
 * 5. Hero — homepage + world + experience-detail
 * ============================================================ */
.nd-hero-final {
	position: relative;
	min-height: var(--nd-hero-min-dt);
	background: var(--ink);
	color: var(--pearl);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 0 var(--nd-page-pad-dt);
}
.nd-hero-final__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.86;
}
.nd-hero-final__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(21,22,19,0.15) 0%, rgba(21,22,19,0.55) 65%, rgba(21,22,19,0.82) 100%);
	pointer-events: none;
}
.nd-hero-final__body {
	position: relative;
	max-width: 720px;
	padding: 96px 0 88px;
}
.nd-hero-final .nd-kicker {
	color: var(--champagne-light);
	margin-bottom: 18px;
}
.nd-hero-final h1 {
	font-size: clamp(46px, 6vw, 84px);
	line-height: 0.98;
	letter-spacing: -0.015em;
	color: #fff;
	margin: 0 0 22px;
	max-width: 18ch;
}
.nd-hero-final p {
	font-family: var(--nd-serif-final);
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.5;
	color: rgba(255,255,255,0.9);
	max-width: 56ch;
	margin: 0 0 30px;
}
.nd-hero-final__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
 * 6. Editorial card + story grid (Skywork editorial-card)
 * ============================================================ */
.nd-editorial-section {
	padding: var(--nd-section-pad-dt) var(--nd-page-pad-dt);
	background: var(--pearl);
}
.nd-editorial-section--linen { background: var(--linen); }
.nd-editorial-section--ivory { background: var(--ivory); }
.nd-editorial-section--ink   { background: var(--ink); color: var(--pearl); }
.nd-editorial-section--ink h2,
.nd-editorial-section--ink h3 { color: #fff; }
.nd-editorial-section--ink .nd-kicker { color: var(--champagne-light); }

.nd-section-title {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: end;
	margin-bottom: 48px;
	max-width: 100%;
}
.nd-section-title h2 {
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.012em;
	margin: 8px 0 6px;
	max-width: 20ch;
}
.nd-section-title p {
	font-family: var(--nd-serif-final);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.55;
	color: var(--soft-ink);
	max-width: 54ch;
	margin: 8px 0 0;
}

.nd-story-grid-final {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.nd-story-grid-final .editorial-card.large,
.nd-story-grid-final > *:first-child.large {
	grid-column: span 2;
	grid-row: span 2;
}

/* Editorial card — matches Skywork markup */
body.nd-brand .editorial-card {
	background: transparent;
	border: none;
	padding: 0;
	position: relative;
	display: flex;
	flex-direction: column;
}
body.nd-brand .editorial-card .editorial-image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--stone);
}
body.nd-brand .editorial-card.large .editorial-image { aspect-ratio: 4 / 5; }
body.nd-brand .editorial-card .editorial-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--nd-ease-lux);
}
body.nd-brand .editorial-card:hover .editorial-image img { transform: scale(1.04); }
body.nd-brand .editorial-card .world-tab {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(255,253,248,0.94);
	color: var(--ink);
	padding: 6px 12px;
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
}
body.nd-brand .editorial-card .watch-badge {
	position: absolute;
	bottom: 16px;
	left: 16px;
	background: rgba(21,22,19,0.72);
	color: var(--pearl);
	padding: 6px 12px 6px 30px;
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
body.nd-brand .editorial-card .watch-badge::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid var(--pearl);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
body.nd-brand .editorial-card .editorial-copy { padding-top: 20px; }
body.nd-brand .editorial-card .card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
body.nd-brand .editorial-card h3 {
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1.15;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
body.nd-brand .editorial-card.large h3 {
	font-size: clamp(30px, 2.8vw, 42px);
}
body.nd-brand .editorial-card p {
	font-family: var(--nd-serif-final);
	font-size: 16px;
	line-height: 1.5;
	color: var(--soft-ink);
	margin: 0 0 16px;
}
body.nd-brand .editorial-card .byline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--nd-sans-final);
	font-size: 12px;
	color: var(--muted);
	padding-top: 12px;
	border-top: 1px solid var(--stone);
}
body.nd-brand .editorial-card a {
	color: inherit;
	text-decoration: none;
}
body.nd-brand .editorial-card a:hover h3 { color: var(--plum); }

/* ============================================================
 * 7. Homepage — cover story + editorial film + living feature
 * ============================================================ */
.nd-cover-story {
	position: relative;
	min-height: 620px;
	overflow: hidden;
	display: grid;
	align-content: end;
	padding: 96px var(--nd-page-pad-dt) 96px;
	background: var(--ink);
	color: var(--pearl);
}
.nd-cover-story__image {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0.75;
}
.nd-cover-story__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,22,19,0.15), rgba(21,22,19,0.82)); }
.nd-cover-story__copy { position: relative; max-width: 720px; }
.nd-cover-story__copy .nd-kicker { color: var(--champagne-light); margin-bottom: 22px; display: inline-block; }
.nd-cover-story__copy h1 {
	font-family: var(--nd-serif-final);
	font-size: clamp(48px, 6.8vw, 92px);
	line-height: 0.94;
	letter-spacing: -0.015em;
	color: #fff;
	margin: 0 0 24px;
	max-width: 15ch;
}
.nd-cover-story__copy p {
	font-family: var(--nd-serif-final);
	font-size: clamp(18px, 1.4vw, 22px);
	line-height: 1.55;
	color: rgba(255,255,255,0.88);
	max-width: 58ch;
	margin: 0 0 32px;
}
.nd-cover-story__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; }

/* Editorial film composition */
.nd-film {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	padding: var(--nd-section-pad-dt) var(--nd-page-pad-dt);
	background: var(--pearl);
	align-items: center;
}
.nd-film__image {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--stone);
	overflow: hidden;
}
.nd-film__image img { width: 100%; height: 100%; object-fit: cover; }
.nd-film__image button {
	position: absolute; inset: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
}
.nd-film__image button::after {
	content: "";
	width: 84px; height: 84px;
	border-radius: 50%;
	background: rgba(255,253,248,0.16);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,253,248,0.4);
	transition: transform 300ms var(--nd-ease-lux);
}
.nd-film__image button:hover::after { transform: scale(1.08); background: rgba(255,253,248,0.22); }
.nd-film__image button svg { position: absolute; width: 28px; height: 28px; z-index: 2; }
.nd-film__image span {
	position: absolute; bottom: 20px; left: 20px;
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(21,22,19,0.55);
	padding: 6px 12px;
	backdrop-filter: blur(4px);
}
.nd-film__copy h2 {
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.02;
	letter-spacing: -0.012em;
	margin: 8px 0 20px;
}
.nd-film__copy p {
	font-family: var(--nd-serif-final);
	font-size: 18px;
	line-height: 1.55;
	color: var(--soft-ink);
	max-width: 48ch;
	margin: 0 0 28px;
}

/* Living feature */
.nd-living-feature {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 64px;
	padding: var(--nd-section-pad-dt) var(--nd-page-pad-dt);
	background: var(--linen);
	align-items: center;
}
.nd-living-feature__copy h2 {
	font-size: clamp(30px, 3.2vw, 46px);
	line-height: 1.05;
	margin: 12px 0 18px;
}
.nd-living-feature__copy p {
	font-family: var(--nd-serif-final);
	font-size: 18px;
	line-height: 1.55;
	color: var(--soft-ink);
	max-width: 44ch;
	margin: 0 0 26px;
}
.nd-living-feature__image {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--stone);
	overflow: hidden;
}
.nd-living-feature__image img { width: 100%; height: 100%; object-fit: cover; }
.nd-living-feature__floating {
	position: absolute;
	bottom: 24px; right: 24px;
	background: rgba(255,253,248,0.94);
	padding: 18px 22px;
	max-width: 220px;
	backdrop-filter: blur(6px);
}
.nd-living-feature__floating span {
	display: block; font-family: var(--nd-sans-final);
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 4px;
}
.nd-living-feature__floating strong {
	display: block; font-family: var(--nd-serif-final);
	font-size: 26px; line-height: 1.1; color: var(--ink); margin-bottom: 2px;
}
.nd-living-feature__floating small {
	font-family: var(--nd-sans-final);
	font-size: 12px; color: var(--muted);
}

/* Creator feature (plum section) */
.nd-creator-feature {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	padding: var(--nd-section-pad-dt) var(--nd-page-pad-dt);
	background: var(--plum);
	color: var(--pearl);
	align-items: center;
}
.nd-creator-feature h2 {
	color: #fff;
	font-size: clamp(30px, 3.2vw, 46px);
	line-height: 1.05;
	margin: 12px 0 18px;
}
.nd-creator-feature p {
	font-family: var(--nd-serif-final);
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255,253,248,0.9);
	max-width: 46ch;
	margin: 0 0 28px;
}
.nd-creator-feature .creator-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--soft-ink);
}
.nd-creator-feature .creator-portrait img { width: 100%; height: 100%; object-fit: cover; }
.nd-creator-feature .creator-portrait span {
	position: absolute; bottom: 20px; left: 20px;
	font-family: var(--nd-sans-final);
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--champagne-light);
	background: rgba(21,22,19,0.5);
	padding: 6px 12px; backdrop-filter: blur(4px);
}
.nd-creator-feature .nd-kicker.gold { color: var(--champagne-light); }

/* ============================================================
 * 8. World hero + world participation strip
 * ============================================================ */
.nd-world-hero-final {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: 72px;
	padding: 120px var(--nd-page-pad-dt) 96px;
	background: var(--ivory);
	border-bottom: 1px solid var(--stone);
	align-items: center;
}
.nd-world-hero-final__body span.nd-kicker { color: var(--champagne); }
.nd-world-hero-final__body h1 {
	font-size: clamp(46px, 5.6vw, 76px);
	line-height: 0.98;
	letter-spacing: -0.012em;
	margin: 12px 0 22px;
	max-width: 16ch;
}
.nd-world-hero-final__body p {
	font-family: var(--nd-serif-final);
	font-size: clamp(18px, 1.4vw, 22px);
	line-height: 1.55;
	color: var(--soft-ink);
	max-width: 54ch;
	margin: 0 0 32px;
}
.nd-world-hero-final__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.nd-world-hero-final__image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--stone);
}
.nd-world-hero-final__image img { width: 100%; height: 100%; object-fit: cover; }

/* World participation strip — appears after editorial + discovery */
.nd-world-participation {
	background: var(--ink);
	color: var(--pearl);
	padding: 88px var(--nd-page-pad-dt);
	text-align: center;
}
.nd-world-participation .nd-kicker { color: var(--champagne); margin-bottom: 16px; display: inline-block; }
.nd-world-participation h2 {
	color: #fff;
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.05;
	max-width: 22ch;
	margin: 0 auto 28px;
}
.nd-world-participation__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
 * 9. Central destination gateway (Services / Directory / etc)
 * ============================================================ */
.nd-gateway-hero {
	background: var(--ink);
	color: var(--pearl);
	padding: 120px var(--nd-page-pad-dt);
	text-align: center;
}
.nd-gateway-hero .nd-kicker { color: var(--champagne); margin-bottom: 22px; display: inline-block; }
.nd-gateway-hero h1 {
	color: #fff;
	font-size: clamp(46px, 5.4vw, 72px);
	line-height: 0.98;
	max-width: 20ch;
	margin: 0 auto 20px;
}
.nd-gateway-hero p {
	font-family: var(--nd-serif-final);
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.55;
	color: rgba(255,253,248,0.86);
	max-width: 58ch;
	margin: 0 auto;
}

.nd-gateway-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 96px var(--nd-page-pad-dt);
	background: var(--pearl);
}
.nd-gateway-cards .card {
	background: #fff;
	border: 1px solid var(--stone);
	padding: 40px 32px;
	text-decoration: none;
	color: var(--ink);
	transition: all 260ms var(--nd-ease-lux);
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}
.nd-gateway-cards .card:hover {
	background: var(--ivory);
	border-color: var(--champagne);
	transform: translateY(-2px);
}
.nd-gateway-cards .card .nd-kicker { color: var(--champagne); }
.nd-gateway-cards .card h3 {
	font-family: var(--nd-serif-final);
	font-size: 28px;
	line-height: 1.1;
	margin: 4px 0 8px;
	color: var(--ink);
}
.nd-gateway-cards .card p {
	font-family: var(--nd-serif-final);
	font-size: 16px;
	line-height: 1.55;
	color: var(--soft-ink);
	margin: 0 0 20px;
}
.nd-gateway-cards .card .arrow {
	margin-top: auto;
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--champagne);
	border-top: 1px solid var(--stone);
	padding-top: 14px;
}

.nd-gateway-statement {
	padding: var(--nd-section-pad-dt) var(--nd-page-pad-dt);
	background: var(--linen);
	text-align: center;
}
.nd-gateway-statement p {
	font-family: var(--nd-serif-final);
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.4;
	color: var(--soft-ink);
	max-width: 40ch;
	margin: 0 auto;
	font-style: italic;
}

/* ============================================================
 * 10. Experience detail hero + fact grid + recipe hero
 * ============================================================ */
.nd-experience-hero {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 60px;
	padding: 120px var(--nd-page-pad-dt) 88px;
	background: var(--ivory);
	align-items: center;
}
.nd-experience-hero__body .nd-kicker { color: var(--champagne); }
.nd-experience-hero__body h1 {
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1;
	margin: 12px 0 18px;
	letter-spacing: -0.012em;
}
.nd-experience-hero__body .type {
	font-family: var(--nd-sans-final);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--soft-ink);
	margin-bottom: 12px;
	display: block;
}
.nd-experience-hero__body p {
	font-family: var(--nd-serif-final);
	font-size: 19px;
	line-height: 1.55;
	color: var(--soft-ink);
	max-width: 52ch;
	margin: 0 0 28px;
}
.nd-experience-hero__image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--stone);
}
.nd-experience-hero__image img { width: 100%; height: 100%; object-fit: cover; }

.nd-fact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 32px var(--nd-page-pad-dt) 72px;
	background: var(--ivory);
}
.nd-fact-grid .fact {
	background: var(--pearl);
	border: 1px solid var(--stone);
	padding: 26px 24px;
}
.nd-fact-grid .fact .label {
	display: block;
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}
.nd-fact-grid .fact .value {
	font-family: var(--nd-serif-final);
	font-size: 22px;
	line-height: 1.2;
	color: var(--ink);
}

/* Recipe hero — two-column editorial */
.nd-recipe-hero {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 60px;
	padding: 120px var(--nd-page-pad-dt) 96px;
	background: var(--pearl);
	align-items: center;
}
.nd-recipe-hero__body .nd-kicker { color: var(--champagne); }
.nd-recipe-hero__body h1 {
	font-size: clamp(40px, 4.8vw, 64px);
	line-height: 1;
	margin: 12px 0 18px;
}
.nd-recipe-hero__body p {
	font-family: var(--nd-serif-final);
	font-size: 19px;
	line-height: 1.55;
	color: var(--soft-ink);
	max-width: 52ch;
	margin: 0 0 24px;
}
.nd-recipe-hero__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.nd-recipe-hero__image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--stone);
}
.nd-recipe-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
 * 11. Save / Follow state controls
 * ============================================================ */
.nd-save,
.nd-follow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid var(--stone);
	padding: 8px 14px;
	font-family: var(--nd-sans-final);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
	transition: all 220ms var(--nd-ease-lux);
	border-radius: 0;
}
.nd-save:hover,
.nd-follow:hover {
	border-color: var(--champagne);
	color: var(--champagne);
}
.nd-save[aria-pressed="true"],
.nd-follow[aria-pressed="true"] {
	background: var(--champagne);
	border-color: var(--champagne);
	color: var(--ink);
}

/* ============================================================
 * 12. Responsive
 * ============================================================ */
@media (max-width: 1100px) {
	.nd-story-grid-final { grid-template-columns: repeat(2, 1fr); }
	.nd-story-grid-final .editorial-card.large { grid-column: span 2; grid-row: auto; }
	.nd-gateway-cards { grid-template-columns: 1fr 1fr; }
	.nd-fact-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.nd-hero-final,
	.nd-cover-story,
	.nd-film,
	.nd-living-feature,
	.nd-creator-feature,
	.nd-world-hero-final,
	.nd-experience-hero,
	.nd-recipe-hero,
	.nd-editorial-section,
	.nd-gateway-hero,
	.nd-gateway-cards,
	.nd-fact-grid,
	.nd-gateway-statement,
	.nd-world-participation,
	.nd-announcement {
		padding-left: var(--nd-page-pad-mb);
		padding-right: var(--nd-page-pad-mb);
	}
	.nd-film,
	.nd-living-feature,
	.nd-creator-feature,
	.nd-world-hero-final,
	.nd-experience-hero,
	.nd-recipe-hero {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-top: var(--nd-section-pad-mb);
		padding-bottom: var(--nd-section-pad-mb);
	}
	.nd-story-grid-final { grid-template-columns: 1fr; }
	.nd-story-grid-final .editorial-card.large { grid-column: span 1; }
	.nd-gateway-cards { grid-template-columns: 1fr; }
	.nd-section-title { grid-template-columns: 1fr; gap: 12px; }
	.nd-hero-final { min-height: var(--nd-hero-min-mb); }
	.nd-cover-story { min-height: var(--nd-hero-min-mb); padding-top: var(--nd-section-pad-mb); padding-bottom: var(--nd-section-pad-mb); }
	.nd-hero-final__body { padding: 72px 0 60px; }
	.nd-fact-grid { grid-template-columns: 1fr 1fr; padding-top: 12px; padding-bottom: var(--nd-section-pad-mb); }
	.nd-announcement { display: none; }
	.nd-editorial-section { padding-top: var(--nd-section-pad-mb); padding-bottom: var(--nd-section-pad-mb); }
}

@media (prefers-reduced-motion: reduce) {
	body.nd-brand .editorial-card:hover .editorial-image img { transform: none; }
	.nd-film__image button:hover::after { transform: none; }
	.nd-gateway-cards .card:hover { transform: none; }
	.nd-button:hover { transform: none; }
}

/* ============================================================
 * 13. Restrained motion system
 *
 * Presentation-only. Never touches business logic. Every effect
 * respects prefers-reduced-motion.
 *
 * Utility classes editors can drop onto elements in Elementor:
 *
 *   .nd-fx-fade-up          Editorial fade-up on scroll into view
 *   .nd-fx-image-reveal     Image mask reveal
 *   .nd-fx-zoom             Subtle hero/image zoom (slow, ambient)
 *   .nd-fx-lift             Premium card lift on hover
 *   .nd-fx-underline        Editorial underline animation on hover
 *   .nd-fx-arrow            CTA arrow slide on hover
 *   .nd-fx-stagger > *      Hero text stagger (~80ms per child)
 *
 * Sticky/glass utilities:
 *
 *   .nd-glass               Frosted-glass panel (backdrop-filter)
 *   .nd-sticky-top          Position-sticky top navigation shelf
 * ============================================================ */

/* -- Fade-up (scroll into view) -- */
.nd-fx-fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 800ms var(--nd-ease-lux), transform 800ms var(--nd-ease-lux);
	will-change: opacity, transform;
}
.nd-fx-fade-up.is-visible,
.nd-fx-fade-up[data-visible="true"] {
	opacity: 1;
	transform: translateY(0);
}

/* -- Image reveal (clip-path mask) -- */
.nd-fx-image-reveal {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1200ms var(--nd-ease-lux);
	will-change: clip-path;
}
.nd-fx-image-reveal.is-visible,
.nd-fx-image-reveal[data-visible="true"] {
	clip-path: inset(0 0 0 0);
}

/* -- Slow ambient zoom on the hero image -- */
.nd-fx-zoom img,
.nd-fx-zoom .nd-hero-final__image,
.nd-fx-zoom .nd-cover-story__image {
	transform: scale(1.02);
	transition: transform 12s var(--nd-ease-lux);
	will-change: transform;
}
.nd-fx-zoom:hover img,
.nd-fx-zoom.is-visible img,
.nd-fx-zoom.is-visible .nd-hero-final__image,
.nd-fx-zoom.is-visible .nd-cover-story__image {
	transform: scale(1.08);
}

/* -- Premium card lift on hover -- */
.nd-fx-lift {
	transition: transform 260ms var(--nd-ease-lux),
	            box-shadow 260ms var(--nd-ease-lux),
	            border-color 260ms var(--nd-ease-lux);
}
.nd-fx-lift:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -32px rgba(21,22,19,0.35);
	border-color: var(--champagne);
}

/* -- Editorial underline animation on hover -- */
.nd-fx-underline {
	position: relative;
	display: inline-block;
	color: inherit;
	text-decoration: none;
}
.nd-fx-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--champagne);
	transition: right 340ms var(--nd-ease-lux);
}
.nd-fx-underline:hover::after {
	right: 0;
}

/* -- CTA arrow slide on hover -- */
.nd-fx-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.nd-fx-arrow::after {
	content: "\2192"; /* rightward arrow */
	display: inline-block;
	transition: transform 220ms var(--nd-ease-lux);
	will-change: transform;
}
.nd-fx-arrow:hover::after {
	transform: translateX(6px);
}

/* -- Hero text stagger (each direct child fades up sequentially) -- */
.nd-fx-stagger > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 620ms var(--nd-ease-lux), transform 620ms var(--nd-ease-lux);
}
.nd-fx-stagger.is-visible > *,
.nd-fx-stagger[data-visible="true"] > * {
	opacity: 1;
	transform: translateY(0);
}
.nd-fx-stagger.is-visible > *:nth-child(1),
.nd-fx-stagger[data-visible="true"] > *:nth-child(1) { transition-delay: 0ms; }
.nd-fx-stagger.is-visible > *:nth-child(2),
.nd-fx-stagger[data-visible="true"] > *:nth-child(2) { transition-delay: 80ms; }
.nd-fx-stagger.is-visible > *:nth-child(3),
.nd-fx-stagger[data-visible="true"] > *:nth-child(3) { transition-delay: 160ms; }
.nd-fx-stagger.is-visible > *:nth-child(4),
.nd-fx-stagger[data-visible="true"] > *:nth-child(4) { transition-delay: 240ms; }
.nd-fx-stagger.is-visible > *:nth-child(5),
.nd-fx-stagger[data-visible="true"] > *:nth-child(5) { transition-delay: 320ms; }
.nd-fx-stagger.is-visible > *:nth-child(6),
.nd-fx-stagger[data-visible="true"] > *:nth-child(6) { transition-delay: 400ms; }

/* -- Frosted-glass panel -- */
.nd-glass {
	background: rgba(255, 253, 248, 0.7);
	backdrop-filter: blur(14px) saturate(1.05);
	-webkit-backdrop-filter: blur(14px) saturate(1.05);
	border: 1px solid rgba(255, 253, 248, 0.6);
}
.nd-glass--dark {
	background: rgba(21, 22, 19, 0.55);
	backdrop-filter: blur(14px) saturate(1.05);
	-webkit-backdrop-filter: blur(14px) saturate(1.05);
	color: var(--pearl);
	border: 1px solid rgba(21, 22, 19, 0.5);
}

/* -- Position-sticky top shelf -- */
.nd-sticky-top {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--pearl);
	border-bottom: 1px solid var(--stone);
	transition: box-shadow 220ms var(--nd-ease-lux);
}
.nd-sticky-top.nd-scrolled {
	box-shadow: 0 12px 32px -28px rgba(21, 22, 19, 0.25);
}

/* -- Reduced-motion override — hard stop on every FX class -- */
@media (prefers-reduced-motion: reduce) {
	.nd-fx-fade-up,
	.nd-fx-image-reveal,
	.nd-fx-zoom img,
	.nd-fx-zoom .nd-hero-final__image,
	.nd-fx-zoom .nd-cover-story__image,
	.nd-fx-lift,
	.nd-fx-stagger > * {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
		clip-path: none !important;
	}
	.nd-fx-lift:hover { box-shadow: none !important; transform: none !important; }
	.nd-fx-underline::after { display: none; }
	.nd-fx-arrow::after { transition: none !important; }
	.nd-fx-arrow:hover::after { transform: none !important; }
	.nd-fx-zoom:hover img,
	.nd-fx-zoom.is-visible img { transform: none !important; }
}

/* ============================================================
 * 14. IntersectionObserver hook targets
 *
 * The nd-presentation.js file (existing, unchanged) or an inline
 * script drop-in can observe [data-nd-fx] elements and toggle
 * .is-visible on scroll into view. If no script observes them,
 * elements marked with FX classes but no .is-visible remain in
 * their initial (invisible/pre-animation) state — which is why
 * the fallback below force-reveals them once the page has been
 * loaded (JS-optional degradation).
 * ============================================================ */

@keyframes nd-fx-reveal-static { to { opacity: 1; transform: none; clip-path: inset(0); } }

html.no-js .nd-fx-fade-up,
html.no-js .nd-fx-image-reveal,
html.no-js .nd-fx-stagger > * {
	animation: nd-fx-reveal-static 600ms var(--nd-ease-lux) both;
}
/* Also fire the static fallback after 1200ms even with JS present,
 * so a broken/deferred observer never traps content invisibly. */
.nd-fx-fade-up { animation: nd-fx-reveal-static 600ms var(--nd-ease-lux) 1200ms both; }
.nd-fx-image-reveal { animation: nd-fx-reveal-static 800ms var(--nd-ease-lux) 1200ms both; }
.nd-fx-stagger > * { animation: nd-fx-reveal-static 500ms var(--nd-ease-lux) 1200ms both; }