/* =====================================================================
   JSV Memorial — gold & charcoal archival memorial design system
   Palette grounded in the original site (#b1923d gold, #32373c charcoal).
   ===================================================================== */

:root {
	/* Surfaces */
	--paper:        #f5f0e6; /* warm archival paper */
	--paper-deep:   #ece4d4; /* recessed panels */
	--paper-edge:   #d8cfc0; /* hairlines */
	--charcoal:     #32373c; /* ink / body text */
	--charcoal-900: #25282c; /* header / footer */
	--charcoal-700: #4a5057;

	/* Accent */
	--gold:         #b1923d; /* honor / medals — large display & rules */
	--gold-deep:    #7a5e29; /* gold text on light — WCAG AA on paper (5.3:1) & paper-deep (4.8:1) */

	/* Type */
	--display: "Marcellus", "Cormorant Garamond", Georgia, serif;
	--caps:    "Marcellus SC", "Marcellus", Georgia, serif;
	--body:    "Spectral", Georgia, "Times New Roman", serif;

	/* Scale */
	--measure: 68ch;      /* the one reading column for ALL body prose, every page */
	--measure-lead: 54ch; /* short centered statements: hero lede, dedications, credits */
	--h-hero: clamp(2rem, 1.3rem + 3vw, 3.4rem); /* one size for every interior page-title */
	--gutter:  clamp(1.1rem, 4vw, 3rem);

	/* RGB channels of the core colors, so scrims/overlays derive from one source */
	--charcoal-900-rgb: 37, 40, 44;
	--paper-rgb:        245, 240, 230;

	--shadow:  0 1px 2px rgba(var(--charcoal-900-rgb), 0.06), 0 10px 30px rgba(var(--charcoal-900-rgb), 0.08);
	--shadow-lift: 0 6px 14px rgba(var(--charcoal-900-rgb), 0.10), 0 18px 50px rgba(var(--charcoal-900-rgb), 0.14);
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background-color: var(--paper);
	/* faint paper grain via layered gradients (no image dependency) */
	background-image:
		radial-gradient(circle at 18% 22%, rgba(177,146,61,0.05), transparent 36%),
		radial-gradient(circle at 82% 78%, rgba(50,55,60,0.04), transparent 40%);
	color: var(--charcoal);
	font-family: var(--body);
	font-weight: 400;
	font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.18rem);
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--charcoal); }

/* Accessibility: skip link + visible focus */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--charcoal-900); color: var(--paper);
	padding: 0.75rem 1.25rem; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}

/* ------------------------------------------------------------------ Layout */
.wrap { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }

.eyebrow {
	font-family: var(--caps);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: 0.74rem;
	color: var(--gold-deep);
	margin: 0 0 0.6rem;
}


/* --------------------------------------------------------------- Site header */
.site-header {
	background: var(--charcoal-900);
	color: var(--paper);
	border-bottom: 3px solid var(--gold);
}
.site-header__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: clamp(0.9rem, 2vw, 1.4rem);
}
.masthead { text-decoration: none; color: inherit; display: block; }
.masthead__title {
	font-family: var(--display);
	font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
	letter-spacing: 0.02em;
	line-height: 1.05;
	margin: 0;
	color: var(--paper);
}
.masthead__sub {
	font-family: var(--caps);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.66rem;
	color: var(--gold);
	margin-top: 0.4rem;
}

/* Primary nav */
.primary-nav > ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin: 0; padding: 0; }
.primary-nav li { position: relative; }
.primary-nav a {
	color: var(--paper);
	font-family: var(--caps);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	text-decoration: none;
	padding-block: 0.3rem;
	border-bottom: 2px solid transparent;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-parent > a,
.primary-nav .current_page_parent > a { color: var(--gold); border-bottom-color: var(--gold); }

/* Parent of a dropdown: the link and its caret toggle share one row */
.primary-nav .menu-item-has-children { display: flex; align-items: center; gap: 0.2rem; }
.submenu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; margin: 0; padding: 0.25rem;
	color: var(--paper); cursor: pointer; line-height: 0;
}
.submenu-toggle__caret { width: 14px; height: 14px; transition: transform 0.25s ease; }
.menu-item-has-children:hover > .submenu-toggle,
.menu-item-has-children:focus-within > .submenu-toggle { color: var(--gold); }
.menu-item-has-children:hover > .submenu-toggle .submenu-toggle__caret,
.submenu-toggle[aria-expanded="true"] .submenu-toggle__caret { transform: rotate(180deg); }
.submenu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* Dropdown panel — a small charcoal plaque carrying the signature gold top-rule */
.sub-menu {
	list-style: none; margin: 0; padding: 0.4rem 0;
	position: absolute; top: calc(100% + 0.55rem); left: 0; z-index: 80;
	min-width: 12.5rem;
	background: var(--charcoal-900);
	border-top: 3px solid var(--gold);
	box-shadow: var(--shadow-lift);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Open on mouse hover, or when the toggle reports expanded (keyboard / click /
   touch). Deliberately NOT :focus-within — that would keep the panel open after
   Escape while the toggle stays focused. */
.menu-item-has-children:hover > .sub-menu,
.submenu-toggle[aria-expanded="true"] ~ .sub-menu { opacity: 1; visibility: visible; transform: none; }
/* Transparent bridge across the gap so a hover-opened panel doesn't dismiss when
   the pointer crosses to it (mouse devices only — never blocks taps on touch). */
@media (hover: hover) and (pointer: fine) {
	.menu-item-has-children > .sub-menu::before {
		content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem;
	}
}
.sub-menu li { position: static; }
.sub-menu a {
	display: block; padding: 0.55rem 1.15rem;
	font-size: 0.72rem;
	color: rgba(var(--paper-rgb),0.85);
	border-bottom: 0; border-left: 2px solid transparent;
}
.sub-menu a:hover,
.sub-menu .current-menu-item > a {
	color: var(--gold); border-bottom: 0; border-left-color: var(--gold);
	background: rgba(var(--paper-rgb),0.05);
}
@media (prefers-reduced-motion: reduce) {
	.submenu-toggle__caret, .sub-menu { transition: none; }
}

/* ------------------------------------------------------------------- Hero */
.hero {
	background: var(--charcoal-900);
	color: var(--paper);
	border-bottom: 3px solid var(--gold);
	padding-block: clamp(3rem, 8vw, 6rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hero::after { /* subtle gold vignette */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35));
}
/* Heroes & dark bands share the one .eyebrow, recoloured gold on charcoal */
.hero .eyebrow, .remembrance .eyebrow { color: var(--gold); }
.hero__title {
	font-family: var(--display);
	font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.3rem);
	line-height: 1.04; letter-spacing: 0.01em; margin: 0 auto; max-width: 16ch; color: var(--paper);
}
.hero__lede {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
	color: rgba(var(--paper-rgb), 0.82); max-width: var(--measure-lead); margin: 1.4rem auto 0; font-weight: 300;
}
.hero__divider { width: 90px; margin: 1.8rem auto 0; height: 2px; background: var(--gold); }

/* --------------------------------------------------------- Section heading */
.section { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.section__head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.8rem); }
.section__title {
	font-family: var(--display);
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
	margin: 0.2rem 0 0; line-height: 1.1;
}

/* ---------------------------------------------------------- Veteran grid */
.vet-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: clamp(1rem, 2.4vw, 1.75rem);
}

.vet-card {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--paper-edge);
	border-top: 3px solid var(--gold);
	box-shadow: var(--shadow);
	text-decoration: none;
	color: inherit;
	display: flex; flex-direction: column;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
	isolation: isolate;
}
.vet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.vet-card:hover .vet-card__name { color: var(--gold-deep); }

/* Portrait = the veteran's own interview still */
.vet-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--charcoal-900);
	overflow: hidden;
}
.vet-card__thumb {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center top;
	display: block;
	filter: grayscale(0.18) contrast(1.02);
	transition: transform 0.4s ease, filter 0.4s ease;
}
.vet-card:hover .vet-card__thumb { transform: scale(1.04); filter: grayscale(0); }

/* Monogram stand-in when a video has no still */
.vet-card__monogram {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-family: var(--display);
	font-size: clamp(2.6rem, 6vw, 3.6rem);
	color: var(--gold);
	background: var(--charcoal-900);
}

.vet-card__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 46px; height: 46px; border-radius: 50%;
	border: 1.5px solid var(--gold);
	display: grid; place-items: center;
	color: var(--paper);
	background: rgba(var(--charcoal-900-rgb), 0.55);
	backdrop-filter: blur(2px);
	transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
}
.vet-card:hover .vet-card__play { background: var(--gold); color: var(--charcoal-900); transform: translate(-50%, -50%) scale(1.08); }
.vet-card__play svg { width: 18px; height: 18px; margin-left: 2px; }

.vet-card__body { padding: 1.05rem 1.2rem 1.25rem; }
.vet-card__name {
	font-family: var(--display);
	font-size: 1.3rem; line-height: 1.12; margin: 0;
	transition: color 0.28s ease;
}
.vet-card__meta {
	font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em;
	font-size: 0.7rem; color: var(--gold-deep); margin-top: 0.5rem;
}

/* City chips / secondary nav of locations */
.city-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.6rem; }
.city-nav a {
	font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em;
	font-size: 0.74rem; text-decoration: none; color: var(--charcoal);
	border: 1px solid var(--paper-edge); padding: 0.45rem 1rem; border-radius: 999px;
	background: var(--paper-deep); transition: all 0.2s ease;
}
.city-nav a:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ------------------------------------------------------------------ Footer */
.site-footer {
	background: var(--charcoal); /* a shade lighter than the charcoal-900 plaque, so they don't twin */
	color: rgba(var(--paper-rgb),0.8);
	border-top: 1px solid var(--gold); /* hairline close, not the plaque's 3px rule */
	padding-block: clamp(2.4rem, 5vw, 3.4rem);
	text-align: center;
}
.site-footer__mark { display: block; width: 30px; height: 30px; margin: 0 auto 0.9rem; color: var(--gold); }
.site-footer__mark svg { display: block; width: 100%; height: 100%; }
.site-footer__title { font-family: var(--display); color: var(--paper); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); margin: 0 0 0.95rem; }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0; padding: 0; margin: 0 0 1.15rem; }
.footer-nav li { display: inline-flex; align-items: center; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.72rem; }
.footer-nav li:not(:last-child)::after { content: "·"; color: var(--gold); opacity: 0.7; margin: 0 0.85rem; }
.footer-nav a { color: rgba(var(--paper-rgb),0.78); text-decoration: none; }
.footer-nav a:hover { color: var(--gold); }
.site-footer__fine { font-size: 0.82rem; color: rgba(var(--paper-rgb),0.5); margin: 0; }

/* ============================================================ Single veteran */
.vet-hero {
	background: var(--charcoal-900);
	color: var(--paper);
	border-bottom: 3px solid var(--gold);
	padding-block: clamp(2.4rem, 6vw, 4rem);
	text-align: center;
}
.vet-hero .eyebrow { color: var(--gold); }
.vet-hero__name {
	font-family: var(--display);
	font-size: var(--h-hero);
	line-height: 1.06; margin: 0; color: var(--paper);
}
.vet-hero__meta { margin: 0.7rem 0 0; }
.vet-hero__meta a {
	font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.2em;
	font-size: 0.78rem; color: var(--gold); text-decoration: none;
}
.vet-hero__meta a:hover { text-decoration: underline; }
.vet-hero .hero__divider { margin-top: 1.4rem; }

.vet-single__inner { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* Video facade (16:9, click to load) — shares the reading column width so the
   video, quote, role and story all align to one tidy column. */
.vet-video { max-width: var(--measure); margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); }
.video-facade {
	position: relative; aspect-ratio: 16 / 9; background: #000;
	border: 1px solid var(--paper-edge); box-shadow: var(--shadow);
	overflow: hidden;
}
.video-facade__btn {
	all: unset; cursor: pointer; position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.video-facade__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.video-facade__thumb {
	width: 100%; height: 100%; object-fit: cover; opacity: 0.82;
	transition: opacity 0.3s ease, transform 0.6s ease;
}
.video-facade__btn:hover .video-facade__thumb { opacity: 1; transform: scale(1.03); }
.video-facade__play {
	position: absolute; inset: 0; margin: auto; width: 76px; height: 54px;
	display: grid; place-items: center;
}
.video-facade__play svg { width: 76px; height: 54px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.video-facade__play-bg { fill: #212121; opacity: 0.85; transition: fill 0.3s ease, opacity 0.3s ease; }
.video-facade__btn:hover .video-facade__play-bg { fill: var(--gold); opacity: 1; }
.video-facade__iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-fallback { text-align: center; }

/* Lead pull-quote (purple_card_content) */
.pull-quote {
	max-width: var(--measure); margin: 0 auto clamp(2rem, 5vw, 3rem); padding: 0 0 0 1.6rem;
	border-left: 3px solid var(--gold);
	font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
	line-height: 1.4; color: var(--charcoal-700); font-style: italic;
}
.pull-quote p { margin: 0 0 0.6rem; }

/* Single-column life story — the narrative rejoined from its two fields */
.vet-narrative { max-width: var(--measure); margin: 0 auto; }
.vet-role {
	font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em;
	font-size: 0.82rem; color: var(--gold-deep);
	margin: 0 0 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--paper-edge);
}
.vet-backlink { margin-top: clamp(2rem, 5vw, 3rem); }
.vet-backlink a { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; text-decoration: none; }
.vet-backlink a:hover { color: var(--gold-deep); }

/* Rich WYSIWYG content typography */
.rich { max-width: var(--measure); }
.rich > :first-child { margin-top: 0; }
.rich p { margin: 0 0 1.2em; }
.rich h2, .rich h3 { font-family: var(--display); line-height: 1.18; margin: 1.8em 0 0.5em; }
.rich h2 { font-size: 1.6rem; } .rich h3 { font-size: 1.3rem; }
.rich a { color: var(--gold-deep); }
.rich a:hover { color: var(--charcoal); }
.rich img { margin: 1.4em 0; border: 1px solid var(--paper-edge); box-shadow: var(--shadow); }
.rich blockquote {
	margin: 1.6em 0; padding-left: 1.2rem; border-left: 3px solid var(--gold);
	font-style: italic; color: var(--charcoal-700);
}
.rich ul, .rich ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.rich li { margin-bottom: 0.4em; }

/* ============================================================== Single battle */
.battle-hero {
	background: var(--charcoal-900);
	color: var(--paper);
	border-bottom: 3px solid var(--gold);
	padding-block: clamp(2.4rem, 6vw, 4rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.battle-hero .eyebrow { color: var(--gold); position: relative; z-index: 1; }
.battle-hero__title {
	font-family: var(--display);
	font-size: var(--h-hero);
	line-height: 1.05; margin: 0; color: var(--paper);
	position: relative; z-index: 1;
}
.battle-hero .hero__divider { position: relative; z-index: 1; }
/* Image variant: photo washed under a charcoal scrim for legibility */
.battle-hero--image::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--hero);
	background-size: cover; background-position: center;
	opacity: 0.32; filter: grayscale(0.35) contrast(1.05);
}
.battle-hero--image::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(var(--charcoal-900-rgb),0.55), rgba(var(--charcoal-900-rgb),0.82));
}

/* All standalone content bodies share one reading column + one vertical rhythm */
.battle-single__body, .about-page__body, .standalone-page__body { padding-block: clamp(2rem, 5vw, 3.5rem); }
.battle-veterans { padding-top: 0; }

/* =================================================== Shared page hero + city */
.page-hero {
	background: var(--charcoal-900);
	color: var(--paper);
	border-bottom: 3px solid var(--gold);
	padding-block: clamp(2.4rem, 6vw, 4rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.page-hero .eyebrow { color: var(--gold); }
.page-hero__title {
	font-family: var(--display);
	font-size: var(--h-hero);
	line-height: 1.06; margin: 0; color: var(--paper);
}
.city-single__intro { padding-block: clamp(1.6rem, 4vw, 2.6rem); text-align: center; font-size: 1.08em; color: var(--charcoal-700); max-width: var(--measure-lead); margin-inline: auto; }
.city-single__intro + .section { padding-top: 0; }
.city-single__credit { text-align: center; font-size: 0.85rem; color: var(--charcoal-700); padding-bottom: clamp(0.5rem, 2vw, 1rem); }
.city-single__credit p { margin: 0; }

/* Pagination */
.pagination { margin-top: clamp(2rem, 5vw, 3rem); text-align: center; }
.pagination .page-numbers {
	display: inline-block; padding: 0.5rem 0.9rem; margin: 0 0.15rem;
	font-family: var(--caps); letter-spacing: 0.08em; text-decoration: none;
	color: var(--charcoal); border: 1px solid var(--paper-edge); background: var(--paper-deep);
}
.pagination .page-numbers.current { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.pagination a.page-numbers:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ============================================================ Search + buttons */
.search-form { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.search-form__field {
	font-family: var(--body); font-size: 1rem; padding: 0.6rem 0.9rem;
	border: 1px solid var(--paper-edge); background: var(--paper); color: var(--charcoal);
	min-width: min(280px, 70vw);
}
.search-form__field:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.search-form__submit, .city-nav-link {
	font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem;
	padding: 0.6rem 1.3rem; border: 1px solid var(--gold); background: var(--gold); color: var(--paper);
	cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.2s ease;
}
.search-form__submit:hover, .city-nav-link:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--paper); }
.city-nav-link { background: transparent; color: var(--gold-deep); }
.city-nav-link:hover { background: var(--gold); color: var(--paper); }

/* --------------------------------------------------------- Staggered reveal */
@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(14px); animation: jsv-rise 0.7s ease forwards; }
	@keyframes jsv-rise { to { opacity: 1; transform: none; } }
}

/* ----------------------------------------------------------- Small screens */
@media (max-width: 640px) {
	.site-header__inner { flex-direction: column; align-items: flex-start; }
	.primary-nav { width: 100%; }
	.primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0.15rem; width: 100%; }
	/* Parent row wraps: link + caret on line 1, sub-menu drops to its own line */
	.primary-nav .menu-item-has-children { flex-wrap: wrap; }
	.submenu-toggle { margin-left: auto; padding: 0.5rem; }
	/* Submenu becomes an inline accordion: a gold left-rule, indented, no panel */
	.sub-menu {
		position: static; min-width: 0; flex-basis: 100%; width: 100%;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border-top: 0;
		border-left: 2px solid var(--gold);
		margin: 0.1rem 0 0.5rem 0.35rem; padding: 0.15rem 0;
		display: none;
	}
	.sub-menu a { padding: 0.55rem 0.9rem; }
	/* With JS, the caret controls it; without JS, leave it open so Battles shows */
	.nav-js .submenu-toggle[aria-expanded="true"] ~ .sub-menu { display: block; }
	html:not(.nav-js) .sub-menu { display: block; }
}

/* ================================================== Masthead logo (wordmark) */
.masthead__logo { display: block; height: clamp(26px, 3.6vw, 34px); width: auto; }

/* ============================================== Photographic heroes (scrim) */
/* The front page and page heroes reuse the single-battle scrim treatment: a
   real photograph, darkened, sits behind the gold title. */
.hero--image::before,
.page-hero--image::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: var(--hero);
	background-size: cover; background-position: center 28%;
	opacity: 0.32; filter: grayscale(0.3) contrast(1.05);
}
.hero--image::after { /* deepen vignette over the photo for legibility */
	background: linear-gradient(180deg, rgba(var(--charcoal-900-rgb),0.42), rgba(var(--charcoal-900-rgb),0.78));
	z-index: 1;
}
.hero--image .wrap { position: relative; z-index: 2; }

.page-hero--image::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(var(--charcoal-900-rgb),0.58), rgba(var(--charcoal-900-rgb),0.82));
}
.page-hero--image .wrap { position: relative; z-index: 2; }

/* ============================================================== Battle grid */
.battle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(1rem, 2.4vw, 1.75rem);
}
.battle-card {
	position: relative; display: block; min-height: 240px;
	text-decoration: none; color: inherit;
	background: var(--charcoal-900);
	border-top: 3px solid var(--gold);
	box-shadow: var(--shadow);
	overflow: hidden; isolation: isolate;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.battle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.battle-card__media {
	position: absolute; inset: 0; z-index: 0;
	background-image: var(--img); background-size: cover; background-position: center;
	filter: grayscale(0.35) contrast(1.05);
	transition: transform 0.5s ease, filter 0.5s ease;
}
.battle-card:hover .battle-card__media { transform: scale(1.05); filter: grayscale(0); }
.battle-card__media--blank { background: var(--charcoal-700); }
.battle-card::after { /* foot scrim so the title always reads */
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(var(--charcoal-900-rgb),0.12) 30%, rgba(var(--charcoal-900-rgb),0.88));
}
.battle-card__body {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 240px; padding: 1.4rem 1.4rem 1.3rem; color: var(--paper);
}
.battle-card__title {
	font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
	line-height: 1.1; margin: 0; color: var(--paper);
}
.battle-card__count {
	font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.12em;
	font-size: 0.74rem; color: var(--gold); margin: 0.6rem 0 0;
}

/* ================================================================ About page */
.about-gallery { padding-top: 0; }
.about-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: clamp(0.9rem, 2vw, 1.4rem);
}
.about-figure { margin: 0; background: var(--paper-deep); border-top: 3px solid var(--gold); box-shadow: var(--shadow); }
.about-figure img {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	filter: grayscale(0.35) sepia(0.12) contrast(1.03);
}
.about-figure figcaption {
	font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.1em;
	font-size: 0.66rem; color: var(--gold-deep); padding: 0.7rem 0.9rem; line-height: 1.4;
}
.about-ack {
	background: var(--charcoal-900); color: var(--paper);
	border-top: 3px solid var(--gold); text-align: center;
	padding-block: clamp(1.8rem, 4vw, 2.5rem);
}
.about-ack .eyebrow { color: var(--gold); margin-bottom: 0; }
/* Provenance lockup: Yad Vashem (type) | gold rule | USHMM (logo), balanced */
.ack-lockup {
	display: flex; align-items: center; justify-content: center;
	margin: 1.6rem auto 0;
}
/* Each institution hugs the divider; the divider's own margins set the gap, so
   the space from the line to the content is identical on both sides. */
.ack-lockup > .ack-inst:first-child { align-items: flex-end; text-align: right; }
.ack-lockup > .ack-inst:last-child { align-items: flex-start; text-align: left; }
.ack-inst { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-decoration: none; }
.ack-inst__name { font-family: var(--display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height: 1.05; color: var(--paper); }
.ack-inst:hover .ack-inst__name { color: var(--gold); }
.ack-inst__desc { font-size: 0.78rem; line-height: 1.35; color: rgba(var(--paper-rgb),0.7); max-width: 17ch; }
.ack-inst__logo { height: clamp(34px, 4.5vw, 40px); width: auto; opacity: 0.92; margin-bottom: 0.15rem; }
.ack-inst:hover .ack-inst__logo { opacity: 1; }
.ack-inst__loc { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.64rem; color: var(--gold); margin-top: 0.15rem; }
.ack-divider { width: 1px; align-self: stretch; min-height: 48px; background: var(--gold); opacity: 0.4; margin-inline: 1.6rem; }
.about-ack__note { font-size: 0.82rem; line-height: 1.5; color: rgba(var(--paper-rgb),0.6); max-width: var(--measure-lead); margin: 1.6rem auto 0; }
@media (max-width: 600px) {
	.ack-lockup { flex-direction: column; gap: 1.2rem; }
	.ack-lockup > .ack-inst:first-child, .ack-lockup > .ack-inst:last-child { align-items: center; text-align: center; }
	.ack-divider { width: 64px; min-height: 0; height: 1px; margin: 0; }
}

/* ====================================================== Home remembrance band */
.remembrance {
	position: relative; overflow: hidden;
	background: var(--charcoal-900); color: var(--paper);
	border-top: 3px solid var(--gold);
	text-align: center;
	padding-block: clamp(3rem, 8vw, 5.5rem) 1.6rem;
}
/* On the home page the dedication flows straight into the provenance plaque.
   Both are charcoal-900, so drop the plaque's own rule and tighten its top
   padding — otherwise their stacked padding opens a dead gap between them.
   (The About page plaque follows the paper gallery, so it keeps its rule.) */
.remembrance + .about-ack { border-top: 0; padding-top: 0; }
.remembrance::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: var(--img); background-size: cover; background-position: center;
	opacity: 0.22; filter: grayscale(0.4) contrast(1.05);
}
.remembrance::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(var(--charcoal-900-rgb),0.60), rgba(var(--charcoal-900-rgb),0.86));
}
.remembrance .wrap { position: relative; z-index: 2; }
.remembrance__text {
	font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
	line-height: 1.45; max-width: var(--measure-lead); margin: 0 auto; color: var(--paper); font-style: italic;
}
.remembrance__rule { width: 90px; height: 2px; background: var(--gold); margin: 1.6rem auto 0; }

/* ================================================================== Buttons */
.btn-gold, .btn-gold-outline {
	display: inline-block; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em;
	font-size: 0.82rem; padding: 0.8rem 1.8rem; text-decoration: none;
	border: 1px solid var(--gold); transition: background 0.25s ease, color 0.25s ease;
}
.btn-gold { background: var(--gold); color: var(--charcoal-900); }
.btn-gold:hover { background: transparent; color: var(--gold); }
.btn-gold-outline { background: transparent; color: var(--gold-deep); }
.btn-gold-outline:hover { background: var(--gold); color: var(--charcoal-900); }
.hero__cta { margin-top: 1.9rem; }

/* ================================================================= Mission */
.mission__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.mission__text p { margin: 0 0 1.1rem; max-width: var(--measure); }
.mission__figure { margin: 0; }
.mission__figure img {
	width: 100%; max-width: 340px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%;
	border: 4px solid var(--paper); box-shadow: var(--shadow-lift); filter: grayscale(0.2) sepia(0.08);
	display: block; margin-inline: auto;
}
@media (max-width: 760px) { .mission__grid { grid-template-columns: 1fr; } .mission__figure { order: -1; } }

/* ====================================================== Featured veterans */
.featured { background: var(--paper-deep); }
.featured__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
.feat-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--paper); border: 1px solid var(--paper-edge); border-top: 3px solid var(--gold);
	box-shadow: var(--shadow); text-decoration: none; color: inherit;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feat-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--charcoal-900); overflow: hidden; }
.feat-card__thumb { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(0.18) contrast(1.02); transition: transform 0.4s ease, filter 0.4s ease; }
.feat-card:hover .feat-card__thumb { transform: scale(1.04); filter: grayscale(0); }
.feat-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; color: var(--paper); background: rgba(var(--charcoal-900-rgb),0.55); backdrop-filter: blur(2px); transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease; }
.feat-card:hover .feat-card__play { background: var(--gold); color: var(--charcoal-900); transform: translate(-50%,-50%) scale(1.08); }
.feat-card__play svg { width: 18px; height: 18px; margin-left: 2px; }
.feat-card__body { padding: 1.1rem 1.3rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.feat-card__name { font-family: var(--display); font-size: 1.35rem; margin: 0; line-height: 1.12; }
.feat-card__born { font-size: 0.88rem; color: var(--charcoal-700); margin: 0.45rem 0 0; }
.feat-card__seen { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; color: var(--gold-deep); margin: 0.25rem 0 0; }
.feat-card__more { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; color: var(--gold-deep); margin-top: auto; padding-top: 0.9rem; }
.feat-card:hover .feat-card__more { color: var(--charcoal); }
.featured__all { text-align: center; margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.featured__all a { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; text-decoration: none; color: var(--gold-deep); }
.featured__all a:hover { color: var(--charcoal); }

/* ===================================================== History (home cards) */
.history-home__intro { margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); text-align: center; }
.history-home__intro p { margin: 0 auto 1rem; max-width: var(--measure); }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); }
.topic-card { position: relative; display: block; min-height: 200px; overflow: hidden; isolation: isolate; text-decoration: none; color: inherit; background: var(--charcoal-900); border-top: 3px solid var(--gold); box-shadow: var(--shadow); transition: transform 0.28s ease, box-shadow 0.28s ease; }
.topic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.topic-card__media { position: absolute; inset: 0; z-index: 0; background-image: var(--img); background-size: cover; background-position: center; filter: grayscale(0.4) contrast(1.05); transition: transform 0.5s ease, filter 0.5s ease; }
.topic-card:hover .topic-card__media { transform: scale(1.05); filter: grayscale(0); }
.topic-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--charcoal-900-rgb),0.18) 30%, rgba(var(--charcoal-900-rgb),0.9)); }
.topic-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 1.3rem; color: var(--paper); }
.topic-card__title { font-family: var(--display); font-size: 1.4rem; margin: 0; color: var(--paper); }
.topic-card__sub { font-size: 0.8rem; color: rgba(var(--paper-rgb),0.82); margin: 0.4rem 0 0; }

/* Veteran-card role teaser (archive list) + home acknowledgments text + history meta */
.vet-card__role { font-size: 0.82rem; color: var(--charcoal-700); margin: 0.4rem 0 0; line-height: 1.35; }
.rich .hist-meta { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--gold-deep); margin: -0.4em 0 1.3em; }

/* 404 */
.notfound { text-align: center; }
.notfound__action, .notfound__search { margin-top: 1.5rem; }

/* ============================================================= Back to top */
.to-top {
	position: fixed; z-index: 60;
	right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
	width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--charcoal-900); color: var(--gold);
	border: 1.5px solid var(--gold); cursor: pointer;
	box-shadow: var(--shadow-lift);
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.25s ease, color 0.25s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: var(--charcoal-900); }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
	.to-top { transition: opacity 0.2s ease, visibility 0.2s; transform: none; }
	.to-top.is-visible { transform: none; }
}

/* ============================================================== Breadcrumbs */
.breadcrumbs { background: var(--paper-deep); border-bottom: 1px solid var(--paper-edge); }
.breadcrumbs .wrap {
	padding-block: 0.7rem;
	font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.1em;
	font-size: 0.72rem; color: var(--charcoal-700);
}
.breadcrumbs a { color: var(--gold-deep); text-decoration: none; }
.breadcrumbs a:hover { color: var(--charcoal); text-decoration: underline; }
.breadcrumbs .separator { color: var(--paper-edge); margin: 0 0.5em; }

/* ============================================== In the press (home news story) */
.press__grid {
	display: grid; grid-template-columns: 1.05fr 1fr;
	background: var(--paper-deep); border-top: 3px solid var(--gold);
	box-shadow: var(--shadow); text-decoration: none; color: inherit;
	overflow: hidden; isolation: isolate;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.press__grid:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.press__media {
	background-image: var(--img); background-size: cover; background-position: center;
	min-height: clamp(220px, 32vw, 360px);
	filter: grayscale(0.35) contrast(1.04); transition: transform 0.5s ease, filter 0.5s ease;
}
.press__grid:hover .press__media { transform: scale(1.04); filter: grayscale(0); }
.press__body { display: flex; flex-direction: column; padding: clamp(1.4rem, 3.5vw, 2.6rem); }
.press__title { font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.12; margin: 0.5rem 0 0; }
.press__byline { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; color: var(--gold-deep); margin-top: 0.6rem; }
.press__excerpt { margin: 1rem 0 0; color: var(--charcoal-700); max-width: 46ch; }
.press__link { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--gold-deep); margin-top: auto; padding-top: 1.2rem; }
.press__grid:hover .press__link { color: var(--charcoal); }
@media (max-width: 640px) { .press__grid { grid-template-columns: 1fr; } }

/* History (home) — two calls to action in place of the old topic cards */
.history-home__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: clamp(1.6rem, 4vw, 2.4rem); }

/* ====================================================== About: project team */
.team-credits {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: clamp(0.9rem, 2.2vw, 1.4rem); margin: 1.5em 0 0;
}
.team-credits__group { background: var(--paper-deep); border-top: 2px solid var(--gold); padding: 1rem 1.2rem 1.1rem; }
.rich .team-credits__role { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--gold-deep); margin: 0 0 0.5rem; }
.rich .team-credits__people { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.rich .team-credits__list { margin: 0; padding-left: 1.1em; font-size: 0.95rem; }
.rich .team-credits__list li { margin-bottom: 0.35em; }

/* Story page byline + back link */
.rich .article-byline { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--gold-deep); margin: 0 0 1.6em; }
.story-back { margin-top: 2em; }
.story-back a { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; text-decoration: none; color: var(--gold-deep); }
.story-back a:hover { color: var(--charcoal); }