/* ============================================================
   theme — site design system (workshop / signage direction)
   Loaded site-wide via Base.astro and scoped under <main class="v2">.
   (Formerly v2-preview.css, prototyped under /preview/*; promoted to
   the live site 2026-06. Coexists with site.css, which still owns the
   nav/footer/reset.)

   Google Fonts (Big Shoulders Display, Sora, JetBrains Mono) are
   loaded via <link rel="stylesheet"> + preconnect in Base.astro
   so the fonts fetch in parallel with the
   page CSS instead of queueing behind this file's @import.
   ============================================================ */

:root {
	--v2-ink: #161210;
	--v2-ink-soft: #1f1814;
	--v2-paper: #f5efe6;
	--v2-paper-strong: #efe7d8;
	--v2-rule: rgba(247,241,227,.10);
	--v2-rule-strong: rgba(247,241,227,.20);
	--v2-text: #f0e9dd;
	--v2-text-soft: rgba(240,233,221,.72);
	--v2-primary: #ae504e;
	--v2-primary-deep: #8a3f3d;
	--v2-accent: #f4c430;
	--v2-display: 'Big Shoulders Display', 'Oswald', Impact, sans-serif;
	--v2-body: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--v2-mono: 'JetBrains Mono', 'Consolas', monospace;
}

/* ===== preview banner ===== */
.v2 .preview-banner {
	background: var(--v2-accent);
	color: var(--v2-ink);
	font-family: var(--v2-mono);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	padding: .55rem 1rem;
	font-weight: 500;
}
.v2 .preview-banner a {
	color: var(--v2-primary-deep);
	text-decoration: underline;
	text-underline-offset: .25em;
	margin-left: .75rem;
}

/* ===== HERO ===== */
.v2 .hero-v2 {
	position: relative;
	background: var(--v2-ink);
	color: var(--v2-text);
	overflow: hidden;
	isolation: isolate;
}
.v2 .hero-v2-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: .88;
	filter: contrast(1.05) saturate(.9);
	z-index: 1;
}
/* Subtle overlay — the home hero image is pre-darkened on the left side
   where the headline sits, so the overlay can be light. */
.v2 .hero-v2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(22,18,16,.08) 0%, rgba(22,18,16,.4) 100%);
}
.v2 .grain-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: .14;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.65'/></svg>");
}

/* ============================================================
   HERO VARIANTS — distinct treatment per preview page so the
   five previews don't all read as the same hero with different
   text. Each variant overrides the home hero (image-right + dark)
   with a layout that fits the page's purpose.
   ============================================================ */

/* PAPER — typographic hero on warm paper with a small tilted "polaroid"
   image frame to the right of the headline. Used on /preview/foundation/. */
.v2 .hero-v2.hero-v2--paper {
	background: var(--v2-paper-strong);
	color: var(--v2-ink);
}
.v2 .hero-v2.hero-v2--paper > .hero-v2-bg,
.v2 .hero-v2.hero-v2--paper::before,
.v2 .hero-v2.hero-v2--paper > .grain-overlay { display: none; }
.v2 .hero-v2.hero-v2--paper .display-stack .ds-eyebrow { color: var(--v2-primary); }
.v2 .hero-v2.hero-v2--paper .display-stack .ds-line-1 { color: #5a4e3c; }
.v2 .hero-v2.hero-v2--paper .display-stack .ds-line-2 { color: var(--v2-ink); }
.v2 .hero-v2.hero-v2--paper .display-stack .ds-rule::after { color: #8a7e6b; }
.v2 .hero-v2.hero-v2--paper .hero-lead { color: #3a2f25; }
.v2 .hero-v2.hero-v2--paper .hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 992px) {
	.v2 .hero-v2.hero-v2--paper .hero-grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 4rem;
	}
}
.v2 .hero-frame {
	position: relative;
	background: #fff;
	padding: .85rem .85rem 2.6rem;
	box-shadow:
		0 24px 50px -18px rgba(0,0,0,.45),
		0 2px 4px rgba(0,0,0,.18),
		inset 0 0 0 1px rgba(0,0,0,.05);
	transform: rotate(-1.5deg);
	max-width: 26rem;
	margin: 0 auto;
}
.v2 .hero-frame img {
	display: block;
	width: 100%;
	height: auto;
	filter: contrast(1.08) saturate(.92) sepia(.08);
}
.v2 .hero-frame-caption {
	position: absolute;
	bottom: .75rem;
	left: 1rem;
	right: 1rem;
	font-family: var(--v2-mono);
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8a7e6b;
}

/* IMMERSIVE — full-bleed photo at higher opacity with a softer overlay,
   so the studio room is the dominant visual. Legacy variant. */
.v2 .hero-v2.hero-v2--immersive .hero-v2-bg { opacity: .92; }
@media (min-width: 768px) {
	.v2 .hero-v2.hero-v2--immersive .hero-v2-bg {
		background-size: cover;
		background-position: 50% 55%;
	}
}
.v2 .hero-v2.hero-v2--immersive::before {
	background: linear-gradient(180deg,
		rgba(22,18,16,.15) 0%,
		rgba(22,18,16,.55) 60%,
		rgba(22,18,16,.92) 100%);
}

/* CONSOLE — let the backdrop photo read more (softer overlay, higher bg
   opacity) and fix the hero to a 460px desktop band with content centered
   vertically. Paired with .hero-grid.with-aside + .hero-collage to drop the
   polaroid header PNG into the right column. Used on /preview/foundation/
   and /preview/studio/. */
.v2 .hero-v2--console .hero-v2-bg { opacity: .5; filter: contrast(1.06) saturate(1); }
.v2 .hero-v2.hero-v2--console::before { background: linear-gradient(180deg, rgba(22,18,16,.04) 0%, rgba(22,18,16,.26) 100%); }
@media (min-width: 992px) {
	.v2 .hero-v2--console { height: 460px; }
	.v2 .hero-v2--console .hero-grid { height: 100%; padding-top: 0; padding-bottom: 0; align-content: center; }
}

/* BRICK — solid brand-red brick wall, no studio photo. Reuses the same
   brick texture as the closing CTA so the support page reads as the
   page where you commit. Used on /preview/support/. */
.v2 .hero-v2.hero-v2--brick {
	background:
		linear-gradient(rgba(174,80,78,.82), rgba(138,63,61,.95)),
		url('/assets/images/studio-a-brick.webp') center/cover no-repeat;
}
.v2 .hero-v2.hero-v2--brick > .hero-v2-bg,
.v2 .hero-v2.hero-v2--brick::before,
.v2 .hero-v2.hero-v2--brick > .grain-overlay { display: none; }
.v2 .hero-v2.hero-v2--brick .display-stack .ds-line-3 {
	color: #fff;
	text-shadow: none;
}
.v2 .hero-v2.hero-v2--brick .display-stack .ds-line-3 em {
	-webkit-text-stroke: 2.5px #fff;
}
.v2 .hero-v2.hero-v2--brick .display-stack .ds-rule {
	background: var(--v2-accent);
}
.v2 .hero-v2.hero-v2--brick .display-stack .ds-rule::after {
	color: rgba(255,255,255,.75);
}
.v2 .hero-v2.hero-v2--brick .display-stack .ds-eyebrow { color: var(--v2-accent); }

/* PORTRAIT — image as a tall portrait card on the right, text on the
   left. Used on /preview/about/ to feature Steve specifically rather
   than have him buried under an overlay. */
.v2 .hero-v2.hero-v2--portrait > .hero-v2-bg,
.v2 .hero-v2.hero-v2--portrait::before,
.v2 .hero-v2.hero-v2--portrait > .grain-overlay { display: none; }
.v2 .hero-v2.hero-v2--portrait .hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 992px) {
	.v2 .hero-v2.hero-v2--portrait .hero-grid {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 4rem;
	}
}
.v2 .hero-portrait {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--v2-ink);
	box-shadow:
		0 24px 60px -20px rgba(0,0,0,.65),
		0 0 0 1px rgba(0,0,0,.4);
}
.v2 .hero-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(1.08) saturate(.9) sepia(.1);
}
.v2 .hero-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(22,18,16,.65) 100%);
	pointer-events: none;
}
.v2 .hero-portrait-caption {
	position: absolute;
	bottom: 1rem;
	left: 1.25rem;
	right: 1.25rem;
	z-index: 2;
	font-family: var(--v2-mono);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(247,241,227,.85);
}

/* foundation hero collage — the PNG already carries the tilted polaroid
   frames + white borders, so this just sizes and places it in the aside.
   align-self overrides the with-aside grid's align-items:end so it sits
   centered against the headline rather than pinned to the bottom. */
.v2 .hero-collage {
	margin: 0;
	align-self: center;
	justify-self: end;
	width: 100%;
	max-width: 46rem;
	filter: drop-shadow(0 26px 50px rgba(0,0,0,.55));
}
.v2 .hero-collage img {
	display: block;
	width: 100%;
	height: auto;
}
@media (min-width: 992px) {
	/* the default with-aside ratio (1.45fr / 1fr) starves the collage column,
	   so the postcards never reach their max-width. Give the collage the
	   larger column on the foundation hero. */
	.v2 .hero-grid.with-aside:has(.hero-collage) {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		align-items: center;
	}
}
@media (max-width: 991.98px) {
	.v2 .hero-collage {
		justify-self: start;
		max-width: 36rem;
		margin-top: .25rem;
	}
}

/* meta strip across top */
.v2 .hero-meta {
	position: relative;
	z-index: 5;
	border-bottom: 1px solid var(--v2-rule);
	background: rgba(0,0,0,.30);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
/* hero-meta variant pinned to the bottom of the hero — flip the divider
   so it sits above the strip, separating it from the hero content */
.v2 .hero-meta.hero-meta-bottom {
	border-top: 1px solid var(--v2-rule);
	border-bottom: none;
}
.v2 .hero-meta-inner {
	display: flex;
	gap: 1.6rem;
	flex-wrap: wrap;
	font-family: var(--v2-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(240,233,221,.72);
	padding: .75rem 0;
}
.v2 .hero-meta-inner span { display: inline-flex; align-items: center; gap: .4rem; }
.v2 .hero-meta-inner b { color: var(--v2-accent); font-weight: 500; letter-spacing: .14em; }
.v2 .hero-meta-inner .live { color: var(--v2-text); }
.v2 .hero-meta-inner .live::before {
	content: "";
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--v2-primary);
	box-shadow: 0 0 8px rgba(174,80,78,.7);
	animation: v2-pulse 1.9s ease-in-out infinite;
}
@keyframes v2-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.85); }
}

/* grid layouts */
.v2 .hero-grid {
	position: relative;
	z-index: 5;
	padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.v2 .hero-grid.with-aside {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
@media (min-width: 992px) {
	.v2 .hero-grid.with-aside {
		grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
		gap: 4rem;
		align-items: end;
	}
}
.v2 .hero-content { max-width: 64rem; }

/* the BIG type stack */
.v2 .display-stack {
	font-family: var(--v2-display);
	text-transform: uppercase;
	line-height: .82;
	letter-spacing: -.012em;
}
.v2 .display-stack .ds-eyebrow {
	display: block;
	font-family: var(--v2-mono);
	font-weight: 500;
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .22em;
	color: var(--v2-accent);
	margin-bottom: 1.5rem;
	line-height: 1.4;
}
.v2 .display-stack .ds-line-1 {
	display: block;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	color: rgba(247,241,227,.65);
	letter-spacing: .01em;
	margin-bottom: .1rem;
}
.v2 .display-stack .ds-line-2 {
	display: block;
	font-weight: 700;
	font-size: clamp(2.5rem, 5.2vw, 4.2rem);
	color: rgba(247,241,227,.95);
	margin-bottom: .15rem;
	letter-spacing: -.005em;
}
.v2 .display-stack .ds-line-3 {
	display: block;
	font-weight: 800;
	font-size: clamp(2.6rem, 10.5vw, 9rem);
	color: var(--v2-primary);
	text-shadow: 0 0 50px rgba(174,80,78,.22);
	letter-spacing: -.015em;
	white-space: nowrap;
}
.v2 .display-stack .ds-line-3 em {
	font-style: normal;
	-webkit-text-stroke: 2.5px var(--v2-primary);
	color: transparent;
	text-shadow: none;
}
.v2 .display-stack .ds-rule {
	display: block;
	width: clamp(7rem, 22vw, 12rem);
	height: 4px;
	background: var(--v2-primary);
	margin: 1.4rem 0 2.4rem;
	position: relative;
}
.v2 .display-stack .ds-rule::after {
	content: attr(data-caption);
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: .65rem;
	font-family: var(--v2-mono);
	font-size: .68rem;
	letter-spacing: .2em;
	color: rgba(247,241,227,.55);
	white-space: nowrap;
}

.v2 .hero-lead {
	font-family: var(--v2-body);
	font-size: clamp(1.05rem, 1.35vw, 1.18rem);
	line-height: 1.6;
	color: var(--v2-text-soft);
	max-width: 38rem;
	margin: 0;
	font-weight: 300;
}

/* CTAs */
.v2 .cta-row {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
}
.v2 .btn-loud {
	font-family: var(--v2-body);
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 1rem 1.6rem;
	background: var(--v2-primary);
	color: #fff;
	border: 1px solid var(--v2-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	transition: background .15s, transform .15s, box-shadow .2s;
	border-radius: 2px;
}
.v2 .btn-loud:hover {
	background: var(--v2-primary-deep);
	border-color: var(--v2-primary-deep);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -8px rgba(174,80,78,.45);
	color: #fff;
}
.v2 .btn-loud::after { content: "→"; font-family: var(--v2-mono); font-weight: 400; }

/* Yellow accent variant of .btn-loud — same body/weight/tracking/arrow as
   the primary loud button, but yellow-on-ink. Same look as the closing-strip
   Ways-to-Give pill, so it can be reused on any dark surface. */
.v2 .btn-loud.btn-accent {
	background: var(--v2-accent);
	color: var(--v2-ink);
	border-color: var(--v2-accent);
}
.v2 .btn-loud.btn-accent:hover {
	background: #fff;
	color: var(--v2-primary);
	border-color: #fff;
	box-shadow: 0 12px 28px -8px rgba(0,0,0,.35);
}

/* Outlined variant of .btn-loud — brand-red border + text, transparent fill.
   Hover fills in brand-red with white text. */
.v2 .btn-loud.btn-outline {
	background: transparent;
	color: var(--v2-primary);
	border-color: var(--v2-primary);
	font-weight: 700;
}
.v2 .btn-loud.btn-outline:hover {
	background: var(--v2-primary);
	color: #fff;
	border-color: var(--v2-primary);
}

/* Cream-ghost variant of .btn-loud — for secondary CTAs on dark surfaces.
   Cream text + 50% cream border + transparent fill; hover fills in cream
   with ink text. Same body/weight/arrow as the primary so the pair reads
   as matched in size but clearly differentiated in weight. */
.v2 .btn-loud.btn-ghost {
	background: transparent;
	color: var(--v2-text);
	border-color: rgba(247,241,227,.5);
}
.v2 .btn-loud.btn-ghost:hover {
	background: var(--v2-text);
	color: var(--v2-ink);
	border-color: var(--v2-text);
	box-shadow: 0 12px 28px -8px rgba(0,0,0,.4);
}
.v2 .btn-quiet {
	font-family: var(--v2-body);
	font-weight: 500;
	font-size: .92rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 1rem 1.6rem;
	background: transparent;
	color: var(--v2-text);
	border: 1px solid rgba(247,241,227,.28);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	border-radius: 2px;
	transition: border-color .15s, background .15s, color .15s;
}
.v2 .btn-quiet:hover {
	border-color: var(--v2-accent);
	color: var(--v2-accent);
	background: rgba(244,196,48,.06);
}

/* ===== SIDE SPEC CARD ("tape label") ===== */
.v2 .spec-card {
	background: var(--v2-paper);
	color: var(--v2-ink);
	padding: 2.1rem 1.85rem 1.4rem;
	position: relative;
	transform: rotate(-.6deg);
	box-shadow:
		0 28px 60px -22px rgba(0,0,0,.65),
		0 2px 4px rgba(0,0,0,.4),
		inset 0 0 0 1px rgba(0,0,0,.06);
	max-width: 26rem;
	margin: 0 auto;
	font-family: var(--v2-body);
}
@media (min-width: 992px) {
	.v2 .spec-card { margin: 0 0 0 auto; }
}
.v2 .spec-card::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 7px;
	background: repeating-linear-gradient(90deg, var(--v2-primary) 0 14px, transparent 14px 24px);
}
.v2 .spec-card::after {
	content: "";
	position: absolute;
	top: 1.1rem;
	left: 1.85rem;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--v2-ink);
	opacity: .15;
	box-shadow: 200px 0 0 var(--v2-ink), -100px 0 0 var(--v2-ink);
}
.v2 .spec-card-eyebrow {
	font-family: var(--v2-mono);
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--v2-primary);
	margin: .65rem 0 .3rem;
}
.v2 .spec-card-title {
	font-family: var(--v2-display);
	font-weight: 800;
	font-size: 1.55rem;
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 1.4rem;
	letter-spacing: -.005em;
}
.v2 .spec-card-title span {
	display: block;
	color: var(--v2-primary);
}
.v2 .spec-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .85rem 1rem;
}
.v2 .spec-list li {
	border-top: 1px solid #d6cbb9;
	padding-top: .55rem;
}
.v2 .spec-list dt {
	font-family: var(--v2-mono);
	font-size: .64rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: #756a59;
	margin-bottom: .15rem;
}
.v2 .spec-list dd {
	font-family: var(--v2-display);
	font-weight: 800;
	font-size: 1.4rem;
	line-height: 1;
	margin: 0;
	color: var(--v2-ink);
}
.v2 .spec-list dd small {
	font-family: var(--v2-mono);
	font-weight: 400;
	font-size: .65rem;
	color: #756a59;
	letter-spacing: .08em;
	margin-left: .25rem;
}
.v2 .spec-card-meter {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 2px dashed #cdc0aa;
	display: flex;
	align-items: center;
	gap: .75rem;
}

.v2 .meter-label {
	font-family: var(--v2-mono);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #756a59;
	flex-shrink: 0;
}
.v2 .meter-bar {
	flex: 1;
	height: 10px;
	background: repeating-linear-gradient(90deg, #c8bda9 0 6px, transparent 6px 9px);
	position: relative;
	overflow: hidden;
}
.v2 .meter-bar::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 78%;
	background: var(--v2-primary);
	mix-blend-mode: multiply;
	animation: v2-meter 3.2s cubic-bezier(.4,.0,.6,1) infinite alternate;
}
@keyframes v2-meter {
	0% { width: 22%; }
	35% { width: 64%; }
	60% { width: 48%; }
	100% { width: 88%; }
}

/* ===== signal strip at hero base ===== */
.v2 .signal-strip {
	position: relative;
	z-index: 5;
	border-top: 1px solid var(--v2-rule);
	background: rgba(0,0,0,.42);
}
.v2 .signal-strip-inner {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1rem 0;
	flex-wrap: wrap;
	font-family: var(--v2-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: rgba(240,233,221,.62);
}
.v2 .signal-strip-inner b {
	color: var(--v2-accent);
	font-weight: 500;
	margin-right: .8rem;
	letter-spacing: .16em;
}
.v2 .signal-strip-inner .tag {
	color: rgba(240,233,221,.92);
	font-weight: 500;
}
.v2 .signal-strip-inner .div {
	color: var(--v2-primary);
	user-select: none;
	font-weight: 400;
}

/* ===== Story-block (paper section, mandate/intro pattern) ===== */
.v2 .story {
	background: var(--v2-paper);
	color: var(--v2-ink);
	padding: clamp(4rem, 8vw, 7rem) 0;
	position: relative;
	overflow: hidden;
}
.v2 .story::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
	opacity: .07;
	pointer-events: none;
	mix-blend-mode: multiply;
}
.v2 .story-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 992px) {
	.v2 .story-grid {
		grid-template-columns: minmax(0,.95fr) minmax(0,1.25fr);
		gap: 5rem;
		align-items: start;
	}
}
.v2 .story-num {
	font-family: var(--v2-display);
	font-weight: 900;
	font-size: clamp(5rem, 11vw, 8.5rem);
	line-height: .82;
	color: transparent;
	-webkit-text-stroke: 2px var(--v2-primary);
	margin: 0 0 1.25rem;
	letter-spacing: -.02em;
}
.v2 .story-eyebrow {
	font-family: var(--v2-mono);
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--v2-primary);
	margin: 0 0 .85rem;
}
.v2 .story-heading {
	font-family: var(--v2-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 4vw, 3.2rem);
	line-height: .95;
	letter-spacing: -.005em;
	color: var(--v2-ink);
	margin: 0 0 1.5rem;
}
.v2 .story-heading em {
	font-style: normal;
	color: var(--v2-primary);
}
.v2 .story-body { font-family: var(--v2-body); }
.v2 .story-body p {
	font-size: 1.08rem;
	line-height: 1.7;
	color: #3a2f25;
	font-weight: 400;
	margin: 0 0 1.2rem;
	max-width: 38rem;
}
.v2 .story-body p.lede {
	font-size: 1.2rem;
	color: var(--v2-ink);
	font-weight: 400;
}
.v2 .story-body p.lede::first-letter {
	font-family: var(--v2-display);
	font-weight: 900;
	font-size: 4.4rem;
	line-height: .85;
	float: left;
	margin: .15rem .55rem -.05rem 0;
	color: var(--v2-primary);
}
.v2 .story-divide {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.8rem 0;
	font-family: var(--v2-mono);
	text-transform: uppercase;
	font-size: .68rem;
	letter-spacing: .22em;
	color: #8a7e6b;
}
.v2 .story-divide::before,
.v2 .story-divide::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #cdc0aa;
}

/* second paper-section variant — slightly warmer base so it reads
   distinct from the mandate when stacked on the same page */
.v2 .story.story-alt {
	background: var(--v2-paper-strong);
}
.v2 .story-body .v2-pullquote {
	margin: 1.8rem 0;
	padding: 1.4rem 1.6rem 1.4rem 1.8rem;
	background: rgba(174,80,78,.06);
	border-left: 4px solid var(--v2-primary);
	position: relative;
	max-width: 40rem;
}
.v2 .story-body .v2-pullquote p {
	font-family: var(--v2-display);
	font-weight: 700;
	font-size: clamp(1.2rem, 1.8vw, 1.55rem);
	line-height: 1.25;
	color: var(--v2-ink);
	margin: 0 0 .9rem;
	text-transform: none;
	letter-spacing: 0;
}
.v2 .story-body .v2-pullquote cite {
	display: block;
	font-family: var(--v2-mono);
	font-style: normal;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a7e6b;
}
.v2 .story-body .v2-pullquote cite b {
	color: var(--v2-primary);
	font-weight: 500;
	margin-right: .35rem;
}
/* ===== WORKSHOP CARDS (used for grids of small content blocks —
   "Our People" 2-col + "Resources" 3-col on /preview/foundation/) ===== */
.v2 .workshop-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 2.5rem;
}
@media (min-width: 768px) {
	.v2 .workshop-grid.workshop-grid-2 {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem;
	}
	.v2 .workshop-grid.workshop-grid-3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}
.v2 .workshop-card {
	background: #fff;
	border: 1px solid #d6cbb9;
	padding: 1.75rem 1.6rem 1.5rem;
	position: relative;
	font-family: var(--v2-body);
}
.v2 .workshop-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--v2-primary);
}
.v2 .workshop-card-num {
	display: inline-block;
	font-family: var(--v2-display);
	font-weight: 900;
	font-size: 2.1rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.6px var(--v2-primary);
	margin: .35rem 0 .75rem;
	letter-spacing: -.01em;
}
.v2 .workshop-card-tag {
	display: inline-block;
	font-family: var(--v2-mono);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--v2-primary);
	margin: .35rem 0 .85rem;
}
.v2 .workshop-card-title {
	font-family: var(--v2-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.25rem;
	line-height: 1.05;
	letter-spacing: -.005em;
	color: var(--v2-ink);
	margin: 0 0 .65rem;
}
.v2 .workshop-card p {
	font-family: var(--v2-body);
	font-size: .95rem;
	line-height: 1.55;
	color: #3a2f25;
	margin: 0;
}
.v2 .workshop-card p + p { margin-top: .9rem; }
.v2 .workshop-card-link {
	font-family: var(--v2-mono);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.v2 .workshop-card a {
	color: var(--v2-primary);
	text-decoration: underline;
	text-underline-offset: .15em;
}
.v2 .workshop-card a:hover { color: var(--v2-primary-deep); }

/* On a warmer paper background (.story-alt), tint the cards slightly so they
   still pop against the page bg */
.v2 .story-alt .workshop-card { background: var(--v2-paper); }

/* ===== GIVE NOW (support preview — benefits list + GiveButter widget) ===== */
.v2 .give-benefits {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 1.5rem;
	font-family: var(--v2-body);
}
.v2 .give-benefits li {
	position: relative;
	padding: .35rem 0 .35rem 1.6rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--v2-ink);
	border-bottom: 1px dashed #cdc0aa;
}
.v2 .give-benefits li:last-child { border-bottom: none; }
.v2 .give-benefits li::before {
	content: "+";
	position: absolute;
	left: 0;
	top: .35rem;
	font-family: var(--v2-mono);
	font-weight: 500;
	color: var(--v2-primary);
}
.v2 .give-aside {
	font-family: var(--v2-body);
	font-size: .9rem;
	color: #8a7e6b;
	margin: 0;
}
.v2 .give-aside a {
	color: var(--v2-primary);
	text-decoration: underline;
	text-underline-offset: .15em;
}
.v2 .give-widget {
	background: #fff;
	border: 1px solid #d6cbb9;
	padding: 1rem;
	position: relative;
}
.v2 .give-widget::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--v2-primary);
}
.v2 .give-credit {
	font-family: var(--v2-mono);
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a7e6b;
	text-align: center;
	margin: .75rem 0 0;
}
.v2 .give-credit a {
	color: var(--v2-primary);
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* ===== PROMISE (white paper section with stencil-stamp number) ===== */
.v2 .promise {
	background: #fff;
	color: var(--v2-ink);
	position: relative;
	padding: clamp(4rem, 8vw, 6.5rem) 0;
	overflow: hidden;
	/* site.css defines an unrelated .promise "callout" with a red left
	   border, radius, and shadow; this full-width section reuses the class
	   name, so neutralize that leaked styling. */
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.v2 .promise::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
	opacity: .06;
	pointer-events: none;
	mix-blend-mode: multiply;
}
.v2 .promise > .container { position: relative; }
.v2 .promise-marker {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-bottom: 1.4rem;
	flex-wrap: wrap;
}
.v2 .promise-num {
	font-family: var(--v2-display);
	font-weight: 900;
	font-size: clamp(3rem, 7vw, 5.5rem);
	line-height: .82;
	color: transparent;
	-webkit-text-stroke: 2px var(--v2-primary);
	letter-spacing: -.02em;
}
.v2 .promise-eyebrow {
	font-family: var(--v2-mono);
	font-size: .78rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--v2-primary);
}
.v2 .promise-heading {
	font-family: var(--v2-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(2rem, 4.4vw, 3.6rem);
	line-height: .95;
	letter-spacing: -.005em;
	color: var(--v2-ink);
	margin: 0 0 2rem;
	max-width: 48rem;
}
.v2 .promise-heading em {
	font-style: normal;
	color: var(--v2-primary);
}
.v2 .promise-body {
	font-family: var(--v2-body);
	max-width: 44rem;
}
/* Two-column variant: text on the left, polaroid collage on the right.
   When .promise-grid wraps the content, the body's max-width is allowed
   to fill the column. */
.v2 .promise-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 992px) {
	.v2 .promise-grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 4rem;
	}
}
.v2 .promise-grid .promise-content { min-width: 0; }
.v2 .promise-grid .promise-body { max-width: none; }
.v2 .promise-collage {
	margin: 0;
}
.v2 .promise-collage img {
	display: block;
	width: 100%;
	height: auto;
}
.v2 .promise-body p {
	font-size: 1.1rem;
	line-height: 1.7;
	color: #3a2f25;
	margin: 0 0 1.3rem;
	font-weight: 400;
}
.v2 .promise-body p:last-child { margin-bottom: 0; }
.v2 .promise-body em {
	font-style: normal;
	font-weight: 600;
	color: var(--v2-primary);
}

/* ===== TALKBACK (feature quote, dark image, console-radio framing) ===== */
.v2 .talkback {
	position: relative;
	padding: clamp(4rem, 8vw, 6.5rem) 0;
	background: var(--v2-ink);
	color: var(--v2-text);
	overflow: hidden;
	isolation: isolate;
}
.v2 .talkback-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 50% 55%;
	opacity: .52;
	filter: contrast(1.08) saturate(.88) sepia(.14);
	z-index: 0;
}
.v2 .talkback::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(22,18,16,.45) 0%,
		rgba(22,18,16,.8) 100%);
	z-index: 1;
}
.v2 .talkback > .container { position: relative; z-index: 2; }
.v2 .talkback-strip {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--v2-mono);
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed rgba(247,241,227,.18);
	flex-wrap: wrap;
}
.v2 .talkback-label {
	color: var(--v2-accent);
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}
.v2 .talkback-label::before {
	content: "";
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--v2-primary);
	box-shadow: 0 0 8px rgba(174,80,78,.7);
	animation: v2-pulse 1.9s ease-in-out infinite;
}
.v2 .talkback-time { color: rgba(247,241,227,.55); }
.v2 .talkback-quote {
	font-family: var(--v2-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.8vw, 2.9rem);
	line-height: 1.18;
	letter-spacing: -.005em;
	max-width: 56rem;
	margin: 0;
	color: var(--v2-text);
	position: relative;
	padding-left: 2.5rem;
}
.v2 .talkback-quote::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -.7rem;
	font-family: var(--v2-display);
	font-size: 4.8rem;
	line-height: 1;
	color: var(--v2-primary);
	font-weight: 900;
}
.v2 .talkback-quote p {
	margin: 0 0 1.4rem;
	font-style: normal;
}
.v2 .talkback-quote cite {
	font-family: var(--v2-mono);
	font-style: normal;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(247,241,227,.66);
	font-weight: 400;
	display: block;
}
.v2 .talkback-quote cite b {
	color: var(--v2-accent);
	font-weight: 500;
	margin-right: .35rem;
}

/* Centered variant of .talkback — strip + quote both center-aligned, with
   the giant opening curly-quote rebased above the line rather than tucked
   into the left padding. Used on /preview/foundation/ and /preview/studio/. */
.v2 .talkback.talkback--center .talkback-strip { justify-content: center; }
.v2 .talkback.talkback--center .talkback-quote { padding-left: 0; text-align: center; margin-left: auto; margin-right: auto; }
.v2 .talkback.talkback--center .talkback-quote::before { position: static; display: block; top: auto; line-height: .5; margin: 0 0 .4rem; }

/* ===== BANNER QUOTE (centered Talkback-style — same dark image-backed
   feel as .talkback but center-aligned for a different read.) ===== */
.v2 .banner-quote {
	position: relative;
	padding: clamp(4.5rem, 9vw, 7rem) 0;
	background: var(--v2-ink);
	color: var(--v2-text);
	overflow: hidden;
	isolation: isolate;
}
.v2 .banner-quote-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 50% 45%;
	opacity: .28;
	filter: contrast(1.1) saturate(.8) sepia(.18);
	z-index: 0;
}
.v2 .banner-quote::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(22,18,16,.55) 0%,
		rgba(22,18,16,.92) 100%);
	z-index: 1;
}
.v2 .banner-quote > .container {
	position: relative;
	z-index: 2;
	text-align: center;
}
.v2 .banner-quote-strip {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	font-family: var(--v2-mono);
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin: 0 auto 2.4rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed rgba(247,241,227,.18);
	flex-wrap: wrap;
}
.v2 .banner-quote-label {
	color: var(--v2-accent);
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}
.v2 .banner-quote-label::before {
	content: "";
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--v2-primary);
	box-shadow: 0 0 8px rgba(174,80,78,.7);
	animation: v2-pulse 1.9s ease-in-out infinite;
}
.v2 .banner-quote-time { color: rgba(247,241,227,.55); }
.v2 .banner-quote-text {
	font-family: var(--v2-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.8vw, 2.9rem);
	line-height: 1.18;
	letter-spacing: -.005em;
	max-width: 56rem;
	margin: 0 auto;
	color: var(--v2-text);
	position: relative;
}
.v2 .banner-quote-text p {
	margin: 0 0 1.6rem;
}
.v2 .banner-quote-text p::before {
	content: "\201C";
	font-family: var(--v2-display);
	font-weight: 900;
	color: var(--v2-primary);
	font-size: 1.5em;
	line-height: 0;
	vertical-align: -.12em;
	margin-right: .12em;
}
.v2 .banner-quote-text em {
	font-style: normal;
	color: var(--v2-primary);
	white-space: nowrap;
}
.v2 .banner-quote-text cite {
	display: inline-block;
	font-style: normal;
	font-family: var(--v2-mono);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .82rem;
	color: rgba(247,241,227,.66);
}
.v2 .banner-attrib-name {
	color: var(--v2-accent);
	font-weight: 500;
	margin-right: .5rem;
}
.v2 .banner-attrib-band { color: rgba(247,241,227,.55); }

/* ===== CLOSING STRIP (brand-red CTA over the analog tape-machine photo) ===== */
.v2 .closing-strip {
	position: relative;
	padding: clamp(4rem, 8vw, 6rem) 0;
	background:
		linear-gradient(rgba(174,80,78,.85), rgba(138,63,61,.95)),
		url('/assets/images/eaf-tape-machine-bg.jpg') center/cover no-repeat;
	color: var(--v2-text);
	overflow: hidden;
	isolation: isolate;
}
.v2 .closing-strip > .container {
	position: relative;
	text-align: center;
}
.v2 .closing-heading {
	font-family: var(--v2-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.9rem, 4vw, 3.2rem);
	line-height: 1;
	letter-spacing: -.005em;
	color: #fff;
	margin: 0 0 1.8rem;
}
.v2 .closing-heading em {
	font-style: normal;
	color: var(--v2-accent);
}
.v2 .closing-strip .cta-row {
	justify-content: center;
	margin-top: 0;
}
.v2 .closing-strip .btn-loud {
	background: var(--v2-accent);
	color: var(--v2-ink);
	border-color: var(--v2-accent);
}
.v2 .closing-strip .btn-loud:hover {
	background: #fff;
	color: var(--v2-primary);
	border-color: #fff;
	box-shadow: 0 12px 28px -8px rgba(0,0,0,.35);
}
/* Subscribe button styled distinctly from Ways-to-Give — black on red */
.v2 .closing-strip .btn-loud[data-subscribe-open] {
	background: var(--v2-ink);
	color: #fff;
	border-color: var(--v2-ink);
}
.v2 .closing-strip .btn-loud[data-subscribe-open]:hover {
	background: #fff;
	color: var(--v2-ink);
	border-color: #fff;
}

/* Subscribe button next to Ways-to-Give opens a modal. Same yellow base look
   on the red section, but on hover it inverts to white-on-primary just like
   the primary CTA (handled by the .closing-strip .btn-loud rules above —
   button[class~="btn-loud"] inherits them). */

/* ===== SUBSCRIBE MODAL (rack-mount panel — dark brushed metal, LED
   indicator, engraved input, "signal feed" framing — with red glow halo) ===== */
.v2 .subscribe-dialog {
	border: none;
	padding: 0;
	background: transparent;
	max-width: min(34rem, calc(100vw - 2rem));
	width: 100%;
	color: var(--v2-text);
	margin: auto;
	overflow: visible;
}
.v2 .subscribe-dialog::backdrop {
	background: rgba(8,5,4,.4);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}
.v2 .subscribe-dialog-inner {
	position: relative;
	background:
		linear-gradient(90deg, var(--v2-primary), var(--v2-accent) 50%, var(--v2-primary)) top/100% 3px no-repeat,
		linear-gradient(180deg, #2a221c 0%, #15100c 60%, #1c1611 100%);
	color: var(--v2-text);
	padding: 2.5rem 2.1rem 2rem;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.07),
		inset 0 -1px 0 rgba(0,0,0,.55),
		0 0 0 1px #0a0705,
		0 30px 60px -20px rgba(0,0,0,.7),
		0 0 90px rgba(174,80,78,.55),
		0 0 28px rgba(244,196,48,.18);
	font-family: var(--v2-body);
	overflow: hidden;
}
.v2 .subscribe-dialog-close {
	position: absolute;
	top: .55rem;
	right: 1.3rem;
	z-index: 2;
	background: transparent;
	border: none;
	font-family: var(--v2-display);
	font-size: 1.85rem;
	line-height: 1;
	color: rgba(247,241,227,.66);
	cursor: pointer;
	padding: .15rem .35rem;
	transition: color .15s;
}
.v2 .subscribe-dialog-close:hover { color: var(--v2-accent); }
/* mono "SIGNAL FEED" label with a pulsing red LED indicator */
.v2 .subscribe-dialog-label {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--v2-mono);
	font-size: .7rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--v2-accent);
	margin: .35rem 0 1rem;
}
.v2 .subscribe-dialog-label::before {
	content: "";
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--v2-primary);
	box-shadow: 0 0 8px rgba(174,80,78,.75);
	animation: v2-pulse 1.9s ease-in-out infinite;
}
.v2 .subscribe-dialog-title {
	font-family: var(--v2-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	line-height: 1;
	letter-spacing: -.005em;
	color: var(--v2-text);
	margin: 0 0 .8rem;
	text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.v2 .subscribe-dialog-lead {
	font-family: var(--v2-body);
	font-size: .98rem;
	line-height: 1.55;
	color: var(--v2-text-soft);
	margin: 0 0 1.6rem;
	max-width: 28rem;
	font-weight: 300;
}
.v2 .subscribe-dialog-form {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	position: relative;
}
/* input is "engraved" into the metal — cream face, dark inset shadow */
.v2 .subscribe-dialog-form input[type="email"] {
	flex: 1 1 14rem;
	padding: .85rem 1rem;
	font-family: var(--v2-body);
	font-size: 1rem;
	background: var(--v2-paper);
	border: 1px solid #0a0705;
	color: var(--v2-ink);
	border-radius: 2px;
	box-shadow:
		inset 0 2px 4px rgba(0,0,0,.5),
		inset 0 -1px 0 rgba(255,255,255,.08);
}
.v2 .subscribe-dialog-form input[type="email"]:focus {
	outline: 2px solid var(--v2-accent);
	outline-offset: 1px;
	border-color: var(--v2-accent);
}
.v2 .subscribe-dialog-form input[type="email"]::placeholder {
	color: #8a7e6b;
}
.v2 .subscribe-dialog-form button[type="submit"] {
	padding: .85rem 1.4rem;
	font-family: var(--v2-body);
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--v2-primary);
	color: #fff;
	border: 1px solid #0a0705;
	border-radius: 2px;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.18),
		inset 0 -1px 0 rgba(0,0,0,.35),
		0 2px 0 rgba(0,0,0,.35);
	transition: background .15s, border-color .15s, transform .08s, box-shadow .08s;
}
.v2 .subscribe-dialog-form button[type="submit"]:hover {
	background: var(--v2-primary-deep);
}
.v2 .subscribe-dialog-form button[type="submit"]:active {
	transform: translateY(1px);
	box-shadow:
		inset 0 1px 2px rgba(0,0,0,.45),
		0 0 0 rgba(0,0,0,.35);
}
.v2 .subscribe-dialog-form .ea-subscribe-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
}
.v2 .subscribe-dialog-form .ea-subscribe-status {
	flex-basis: 100%;
	margin: .4rem 0 0;
	font-family: var(--v2-mono);
	font-size: .74rem;
	letter-spacing: .08em;
	color: rgba(247,241,227,.58);
	min-height: 1em;
}
.v2 .subscribe-dialog-form .ea-subscribe-status[data-state="error"] { color: var(--v2-accent); }
.v2 .subscribe-dialog-form .ea-subscribe-status[data-state="success"] { color: var(--v2-text); font-weight: 500; }

/* ===== NAV overrides (preview-only) — signal-strip aesthetic, light variant:
   white bar, mono caps tracked links in ink, red "/" separators,
   brand-red Support pill. ===== */
.site-nav {
	background: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--line, #e4e2de);
}

.site-nav .nav-link {
	font-family: var(--v2-mono);
	font-size: .88rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba(22,18,16,.72);
	padding: .5rem .25rem;
	border-radius: 0;
	background: transparent;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
.site-nav .nav-link:hover {
	color: var(--v2-primary);
	background: transparent;
	border-bottom-color: rgba(174,80,78,.35);
}
.site-nav .nav-link.active {
	color: var(--v2-primary);
	background: transparent;
	border-bottom-color: var(--v2-primary);
}

/* red "/" between consecutive nav-link items on desktop only — uses :has()
   so the slash only appears between text links, never adjacent to the
   Support pill. Older browsers without :has() simply omit the dividers. */
@media (min-width: 992px) {
	.site-nav .nav-item {
		display: flex;
		align-items: center;
	}
	.site-nav .nav-item:has(> .nav-link):has(+ .nav-item > .nav-link)::after {
		content: "/";
		color: var(--v2-primary);
		font-family: var(--v2-mono);
		font-weight: 400;
		margin-left: .35rem;
		user-select: none;
		font-size: 1rem;
		line-height: 1;
	}
}

.site-nav .btn-support {
	margin-left: .9rem;
	font-family: var(--v2-body);
	font-weight: 600;
	font-size: .85rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .65rem 1.2rem;
	background: var(--v2-primary);
	color: #fff;
	border: 1px solid var(--v2-primary);
	border-radius: 2px;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	text-decoration: none;
	transition: background .15s, border-color .15s, transform .15s, box-shadow .2s;
}
.site-nav .btn-support::after {
	content: "→";
	font-family: var(--v2-mono);
	font-weight: 400;
}
.site-nav .btn-support:hover {
	background: var(--v2-primary-deep);
	border-color: var(--v2-primary-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -8px rgba(174,80,78,.45);
}

/* ===== FOOTER overrides (preview-only — site.css remains unaffected
   on non-preview pages because this stylesheet only loads on /preview/*) ===== */
.site-footer {
	background: var(--v2-ink);
	font-family: var(--v2-body);
	color: #cbc4b6;
}
/* Align footer columns with the .story-grid above: brand sits in the
   "narrator" column, the 3 nav columns share the "content" column at the
   same proportions (.95fr : 1.25fr / 3 each). Bypass Bootstrap's row
   gutters in favor of CSS grid column-gap on desktop. */
@media (min-width: 992px) {
	.site-footer > .container > .row.g-4:first-child {
		display: grid;
		grid-template-columns: minmax(0, .95fr) repeat(3, minmax(0, .4167fr));
		column-gap: 2.5rem;
		row-gap: 0;
		margin: 0;
		--bs-gutter-x: 0;
		--bs-gutter-y: 0;
	}
	.site-footer > .container > .row.g-4:first-child > * {
		flex: none;
		max-width: 100%;
		width: auto;
		padding: 0;
	}
	/* extra breathing room + vertical rule between the brand column and the
	   nav block, and between Engage and Get in touch */
	.site-footer > .container > .row.g-4:first-child > :nth-child(2),
	.site-footer > .container > .row.g-4:first-child > :nth-child(4) {
		padding-left: 2.5rem;
		border-left: 1px solid rgba(247,241,227,.1);
	}
}
.site-footer h4 {
	font-family: var(--v2-mono);
	font-size: .7rem;
	letter-spacing: .24em;
	font-weight: 500;
	color: var(--v2-primary);
	margin-bottom: 1rem;
}
.site-footer p,
.site-footer li {
	font-family: var(--v2-body);
	font-weight: 400;
}
.site-footer li { font-size: .94rem; }
.site-footer a { color: #cbc4b6; }
.site-footer a:hover { color: var(--v2-accent); }
.site-footer .col-lg-4:first-child p:first-of-type {
	color: #a9a39a;
	font-size: .95rem;
	line-height: 1.6;
}
.site-footer .footer-newsletter h4 {
	color: var(--v2-accent);
	font-family: var(--v2-display);
	font-weight: 700;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0;
}
.site-footer .footer-newsletter p {
	font-family: var(--v2-body);
	font-size: .95rem;
	color: #a9a39a;
}
.site-footer .colophon {
	font-family: var(--v2-mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8a8378;
	border-top-color: rgba(247,241,227,.08);
}
.site-footer .colophon a {
	font-family: var(--v2-mono);
	color: #cbc4b6;
}
.site-footer .colophon a:hover { color: var(--v2-accent); }
.site-footer .ea-subscribe input[type="email"] {
	font-family: var(--v2-body);
	background: #100c0a;
	border-color: #2a221d;
	color: #f0e9dd;
}
.site-footer .ea-subscribe button[type="submit"] {
	font-family: var(--v2-body);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .92rem;
	border-radius: 2px;
}

/* ============================================================
   Responsive refinements
   ============================================================ */

/* Tablet and below — tighten data rails and let captions wrap */
@media (max-width: 767px) {
	/* the FORM./BASED./MISSION. hero data strip is dropped on mobile */
	.v2 .hero-meta-bottom { display: none; }
	.v2 .hero-meta-inner {
		gap: .65rem 1rem;
		font-size: .66rem;
		padding: .6rem 0;
	}
	.v2 .signal-strip-inner {
		gap: .55rem 1rem;
		font-size: .66rem;
		padding: .85rem 0;
	}
	/* the slash dividers between tags get noisy when tags stack —
	   show them only when the row fits one line */
	.v2 .signal-strip-inner .div { display: none; }

	/* hero padding tightens a bit so the headline doesn't push
	   everything else below the fold */
	.v2 .hero-grid {
		padding: 2.5rem 1.5rem 2.25rem;
		gap: 2rem;
	}
	/* the desktop .hero-grid zeroes horizontal padding (the centered,
	   max-width container supplies the gutter there). On phones the container
	   is full-width, so without this the headline + data strip hug the screen
	   edge. Give the whole hero one shared 1.5rem gutter. */
	.v2 .hero-meta-bottom > .container,
	.v2 .hero-meta > .container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* aside flattens out — drop the rotation and the heavy shadow
	   so the card sits flush at full mobile width */
	.v2 .spec-card {
		transform: none;
		max-width: 100%;
		box-shadow:
			0 12px 28px -16px rgba(0,0,0,.55),
			inset 0 0 0 1px rgba(0,0,0,.06);
	}
}

/* Phone — let the caption under the red rule wrap, and lighten
   typographic density on truly narrow screens */
@media (max-width: 600px) {
	/* shift the crop so the E plate (in the image's right third) moves toward
	   the right and we stop catching its clipped edge behind the text */
	.v2 .hero-v2-bg {
		background-position: 62% 50%;
	}
	/* On phones the desktop clamp minimums land too small. Scale the headline
	   up (vw-driven, capped) and let the outlined word wrap rather than force a
	   horizontal overflow. */
	.v2 .display-stack .ds-line-2 {
		font-size: clamp(3rem, 13.5vw, 4.2rem);
	}
	.v2 .display-stack .ds-line-3 {
		font-size: clamp(3.8rem, 18.5vw, 5.6rem);
		white-space: normal;
	}
	/* The caption flows in-stack under the bar (see ::after below). Desktop
	   draws the bar as the .ds-rule background inside a fixed 4px-tall, ~12rem
	   box with the caption absolutely positioned. Reused as-is on mobile that
	   fixed box can't grow, so the in-flow caption overflows it and collides
	   with the lead paragraph (and is clamped to the bar's narrow width). So on
	   phones let .ds-rule grow, paint the 4px bar via ::before, and let ::after
	   sit below at its own width. */
	.v2 .display-stack .ds-rule {
		height: auto;
		width: auto;
		background: none;
		margin: 1.1rem 0 1.6rem;
	}
	.v2 .hero-v2.hero-v2--brick .display-stack .ds-rule {
		background: none;
	}
	.v2 .display-stack .ds-rule::before {
		content: "";
		display: block;
		width: clamp(7rem, 22vw, 12rem);
		height: 4px;
		background: var(--v2-primary);
	}
	.v2 .hero-v2.hero-v2--brick .display-stack .ds-rule::before {
		background: var(--v2-accent);
	}
	.v2 .display-stack .ds-rule::after {
		position: static;
		display: block;
		margin: .65rem 0 0;
		white-space: normal;
		font-size: .6rem;
		letter-spacing: .14em;
		line-height: 1.5;
		max-width: 22rem;
	}

	/* preview banner: stack the back-link under the label */
	.v2 .preview-banner {
		font-size: .62rem;
		letter-spacing: .14em;
		padding: .5rem .75rem;
	}
	.v2 .preview-banner a {
		display: block;
		margin-left: 0;
		margin-top: .25rem;
	}

	/* story section — drop cap shrinks so it doesn't dominate
	   short mobile lines */
	.v2 .story-body p.lede::first-letter {
		font-size: 3.4rem;
		margin: .1rem .4rem -.05rem 0;
	}

	/* spec list goes single column on narrow widths so the
	   value text never gets cramped */
	.v2 .spec-list { grid-template-columns: 1fr; }
}

/* Very narrow (≤ 380px) — additional headline relief */
@media (max-width: 380px) {
	.v2 .display-stack .ds-line-2 { font-size: 2.7rem; }
	.v2 .display-stack .ds-line-3 { font-size: 3.8rem; }
	.v2 .spec-card { padding: 1.6rem 1.35rem 1.2rem; }
	.v2 .spec-card-title { font-size: 1.35rem; }
}

/* ============================================================
   Mobile nav drawer (preview only)

   Bootstrap's responsive offcanvas-navbar: below lg the menu is a
   left slide-in drawer (backdrop, scroll-lock, focus-trap, ESC all
   handled by bootstrap.bundle); at lg+ Bootstrap neutralizes the
   offcanvas back into the horizontal bar. All drawer styling is
   therefore scoped to <lg so the desktop nav is left untouched.
   The .v2-drawer lives in the site header, OUTSIDE <main class="v2">,
   so these selectors are intentionally un-prefixed.
   ============================================================ */
@media (max-width: 991.98px) {
	/* Two things keep the drawer from showing on top of the page:
	   1. .site-nav's backdrop-filter makes the nav the containing block for the
	      fixed offcanvas and CLIPS it to the header's box — so the panel must
	      not inherit that. Drop the filter on mobile.
	   2. sticky-top puts the nav in its own stacking context at z-index 1020,
	      below Bootstrap's body-level backdrop (1040). Lift it above the
	      backdrop/offcanvas layers so the drawer paints on top. */
	.v2-nav.sticky-top {
		z-index: 1050;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.v2-drawer.offcanvas {
		background: var(--v2-ink);
		color: var(--v2-text);
		width: min(85vw, 360px);
		border-right: 1px solid var(--v2-rule-strong);
	}
	.v2-drawer .offcanvas-header {
		padding: 1.35rem 1.5rem;
		border-bottom: 1px solid var(--v2-rule);
	}
	.v2-drawer .offcanvas-title {
		font-family: var(--v2-mono);
		font-size: 1.1rem;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: var(--v2-text-soft);
	}
	.v2-drawer .btn-close { opacity: .7; box-shadow: none; }
	.v2-drawer .btn-close:hover,
	.v2-drawer .btn-close:focus { opacity: 1; }
	.v2-drawer .offcanvas-body { padding: .25rem 0 1.75rem; }
	.v2-drawer .navbar-nav { width: 100%; }
	.v2-drawer .nav-item { border-bottom: 1px solid var(--v2-rule); }
	.v2-drawer .nav-item:last-child { border-bottom: 0; }
	.v2-drawer .nav-link {
		font-family: var(--v2-display);
		text-transform: uppercase;
		font-weight: 700;
		font-size: 1.65rem;
		line-height: 1.1;
		letter-spacing: .01em;
		color: var(--v2-text);
		padding: 1.05rem 1.5rem;
	}
	.v2-drawer .nav-link.active,
	.v2-drawer .nav-link:hover,
	.v2-drawer .nav-link:focus {
		color: var(--v2-primary);
		background: rgba(174,80,78,.10);
	}
	/* Support Us reads as a full-width loud button under the links */
	.v2-drawer .btn-support {
		display: block;
		margin: 1.75rem 1.5rem 0;
		background: var(--v2-primary);
		color: #fff;
		border: 1px solid var(--v2-primary);
		font-family: var(--v2-body);
		font-weight: 600;
		font-size: .95rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		text-align: center;
		text-decoration: none;
		padding: 1rem 1.4rem;
		border-radius: 2px;
	}
	.v2-drawer .btn-support::after { content: " →"; font-family: var(--v2-mono); }
}