/*
 * MotCP Educator Resources — base styles.
 *
 * Intentionally minimal: scaffolding for the working sitemap/content map
 * review. Visual design comes later.
 */

:root {
	/* Type families. Adobe kit family names are "proxima-nova" and
	 * "phoreuscherokee" (confirmed from the euv0ses kit CSS); Garamonds are
	 * from Google Fonts. Sizes/weights/rhythm come in a later styling pass. */
	--font-proxima: "proxima-nova", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-cormorant: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-eb-garamond: "EB Garamond", Georgia, "Times New Roman", serif;
	--font-cherokee: "phoreuscherokee", "EB Garamond", serif;

	/* Type scale — Perfect Fourth (1.333). Fluid via clamp() between a 375px
	 * and a 1080px viewport (the content max-width). The clamp mins are tuned
	 * so the small levels barely shrink on mobile and only the display levels
	 * scale down — that keeps a clear, print-like size division between every
	 * heading level even on small screens. Resulting px (mobile floor -> desktop
	 * max): h1 40->67, h2 34->50, h3 29->38, h4 25->28, h5 20->21, h6 16 (fixed;
	 * distinguished by caps + weight), body 16->17. */
	--fs-h1: clamp(2.5rem, 1.602rem + 3.83vw, 4.1875rem);
	--fs-h2: clamp(2.125rem, 1.593rem + 2.27vw, 3.125rem);
	--fs-h3: clamp(1.8125rem, 1.513rem + 1.28vw, 2.375rem);
	--fs-h4: clamp(1.5625rem, 1.463rem + 0.43vw, 1.75rem);
	--fs-h5: clamp(1.25rem, 1.217rem + 0.14vw, 1.3125rem);
	--fs-h6: 1rem;
	--fs-body: clamp(1rem, 0.967rem + 0.14vw, 1.0625rem);
	/* One sanctioned sub-body size for labels, eyebrows, captions, counts,
	 * and fine print. 12px is the next Perfect-Fourth step below body
	 * (16 / 1.333), so it belongs to the same scale. */
	--fs-small: 12px;

	/* Brand palette — Museum of the Cherokee People.
	 * Blackberry stands in for straight black (#000) everywhere per brand
	 * direction. Blackberry and tan carried over from the original palette;
	 * the accent hues come from the 2026-09 rebrand. Spring and Dusk are
	 * defined but not yet assigned a role. */
	--color-smoky-sunset: #cc7661;
	--color-golden-sun: #faac1a;
	--color-fire: #db5328;
	--color-dark-pine: #39433b;
	--color-spring: #b1b561;
	--color-dusk: #461614;
	--color-blackberry: #100c17;
	--color-tan: #f8f3e8;
	/* Blackberry as RGB channels, for translucent use (shadows/overlays). */
	--color-blackberry-rgb: 16, 12, 23;
	/* Derived darker Fire (80% of each channel) for button/link hover + active states. */
	--color-fire-dark: #af4220;

	--header-height: 80px;
	--menu-strip-height: 5px;
	--max-width: 1080px;
	/* Default text is Dark Pine (2026-09 rebrand); Blackberry remains for dark
	 * backgrounds (footer colophon, video facade). */
	--text: var(--color-dark-pine);
	--surface: #ffffff;
	--border: #e0e0e0;
	/* Fire is the primary action color (buttons + links). */
	/* WCAG AA with brand colors only: white on Fire is 3.98:1 (fails at
	 * button text sizes), so solid buttons are Blackberry on Fire (4.86:1) and
	 * turn white on Dusk (15.2:1) on hover. */
	--button-bg: var(--color-fire);
	--button-bg-hover: var(--color-dusk);
	--button-text: var(--color-blackberry);
	--button-text-hover: #ffffff;
}

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

body {
	margin: 0;
	/* Offset the fixed header, which is the menu bar plus the decorative strip. */
	padding-top: calc(var(--header-height) + var(--menu-strip-height));
	font-family: var(--font-proxima);
	font-size: var(--fs-body);
	color: var(--text);
	background: var(--surface);
	line-height: 1.5;
}

/* ---------- Links ----------
 * Links share Dark Pine with body text, so the underline is what marks them
 * as links (WCAG 1.4.1) — keep it. Hover/focus thickens it rather than
 * changing color. Standalone UI links (buttons, nav, cards) override this. */
a {
	color: var(--color-dark-pine);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--color-dark-pine);
	text-decoration-thickness: 2px;
}

/* Underline links within prose so they're distinguishable from body text
 * without relying on color alone (WCAG 1.4.1). Standalone UI links (buttons,
 * nav, card titles) style themselves and override this. */
.entry-content a {
	text-decoration: underline;
}

/* ---------- Typography: font-family map ----------
 * Per design direction. Sizes, weights, and rhythm are intentionally left
 * for a later styling pass — this only assigns families.
 *   Proxima Nova ........ body default (menus, filters, buttons, UI lists),
 *                         plus h1, h3, h4, h6
 *   Cormorant Garamond .. h2 (display)
 *   EB Garamond ......... h5, body paragraphs, authored prose lists
 *   Phoreus Cherokee .... special cases, via the .cherokee utility class
 * Heads up: the shared Adobe kit ships Proxima Nova in weights 700/800 only
 * (no 400). Headings render bold by default so this is fine; add a regular
 * weight to the Adobe web project if Proxima Nova is ever needed at 400.
 */
h1,
h3,
h4,
h6 {
	font-family: var(--font-proxima);
}

h2 {
	font-family: var(--font-cormorant);
}

h5,
p {
	font-family: var(--font-eb-garamond);
}

/* Authored lists are prose, so they read in the paragraph face rather than the
 * Proxima body default. Scoped to the containers that hold editor-authored
 * copy, so navigation, filter, and other UI lists keep Proxima.
 * Without this, list items inherit Proxima from `body` — and because the shared
 * Adobe kit ships no 400 weight, they render bold as well as in the wrong
 * family, which reads as a different style mid-paragraph. */
.entry-content li {
	font-family: var(--font-eb-garamond);
}

/* Sizes + line-height for the type scale (families assigned above). Line-height
 * tightens as size grows. Component headings that set their own font-size keep
 * it; only headings that would otherwise fall back to browser defaults inherit
 * this scale. */
h1 {
	font-size: var(--fs-h1);
	line-height: 1.1;
}

h2 {
	font-size: var(--fs-h2);
	line-height: 1.15;
}

h3 {
	font-size: var(--fs-h3);
	line-height: 1.2;
}

h4 {
	font-size: var(--fs-h4);
	line-height: 1.25;
}

h5 {
	font-size: var(--fs-h5);
	line-height: 1.3;
}

/* h6 lands at body size, so it's distinguished by weight + uppercase tracking
 * rather than a too-small size. */
h6 {
	font-size: var(--fs-h6);
	line-height: 1.4;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cherokee {
	font-family: var(--font-cherokee);
}

/* ---------- Skip link ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	height: auto;
	width: auto;
	top: 0;
	left: 0;
	padding: 0.75rem 1rem;
	background: #fff;
	z-index: 200;
}

/* ---------- Fixed top header ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--surface);
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0.5rem 1.5rem;
	min-height: var(--header-height);
}

.site-header__logo {
	display: inline-block;
	flex-shrink: 0;
}

.site-header__logo img {
	display: block;
	width: auto;
	max-height: 56px;
	height: auto;
}

/* Decorative brand strip pinned under the menu bar, full browser width. */
.site-header__strip {
	height: var(--menu-strip-height);
	background: url(../img/menu-strip.jpg?v=2) repeat-x left center;
	background-size: auto 100%;
}

/* ---------- Primary navigation ---------- */
.primary-navigation .primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.primary-navigation li {
	position: relative;
	margin: 0;
}

.primary-navigation a,
.primary-navigation .menu-item-toggle {
	display: inline-block;
	padding: 0.5rem 0;
	color: var(--color-dark-pine);
	text-decoration: none;
	font: inherit;
	font-weight: 700;
	background: none;
	border: 0;
	cursor: pointer;
}

.primary-navigation a:hover,
.primary-navigation a:focus,
.primary-navigation .menu-item-toggle:hover,
.primary-navigation .menu-item-toggle:focus {
	color: var(--color-dark-pine);
	text-decoration: underline;
}

.primary-navigation .menu-item-toggle {
	cursor: default;
}

.primary-navigation .menu-item-toggle::after {
	content: " \25BE"; /* small down-arrow */
	font-size: 0.85em;
}

/* Submenus */
.primary-navigation .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 14rem;
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: 0 4px 12px rgba(var(--color-blackberry-rgb), 0.08);
	display: none;
	z-index: 110;
}

.primary-navigation .sub-menu li {
	display: block;
}

.primary-navigation .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	white-space: nowrap;
}

.primary-navigation .menu-item-has-children:hover > .sub-menu,
.primary-navigation .menu-item-has-children:focus-within > .sub-menu,
.primary-navigation .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/* ---------- Mobile menu toggle (hamburger) ---------- */
.menu-toggle {
	display: none; /* shown only at the mobile breakpoint */
	position: relative;
	z-index: 110; /* stay above the full-screen nav overlay */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-dark-pine);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	display: block;
	width: 1.75rem;
	height: 3px;
	background: currentColor;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-toggle__bars {
	position: relative;
}

.menu-toggle__bars::before {
	position: absolute;
	left: 0;
	top: -0.5rem;
}

.menu-toggle__bars::after {
	position: absolute;
	left: 0;
	top: 0.5rem;
}

/* Morph the bars into an X while the menu is open. */
.site-header.menu-open .menu-toggle__bars {
	background: transparent;
}

.site-header.menu-open .menu-toggle__bars::before {
	transform: translateY(0.5rem) rotate(45deg);
}

.site-header.menu-open .menu-toggle__bars::after {
	transform: translateY(-0.5rem) rotate(-45deg);
}

/* Lock background scroll while the full-screen menu is open. */
body.mobile-nav-open {
	overflow: hidden;
}

@media (max-width: 800px) {
	.menu-toggle {
		display: inline-flex;
	}

	/* Full-screen panel that drops in below the fixed header bar. */
	.primary-navigation {
		position: fixed;
		top: calc(var(--header-height) + var(--menu-strip-height));
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background: var(--surface);
		padding: 1.5rem;
		overflow-y: auto;
		display: none;
	}

	.site-header.menu-open .primary-navigation {
		display: block;
	}

	.primary-navigation .primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.primary-navigation .primary-menu > li {
		border-bottom: 1px solid var(--border);
	}

	.primary-navigation a,
	.primary-navigation .menu-item-toggle {
		display: block;
		width: 100%;
		padding: 1rem 0;
		font-size: var(--fs-h4);
	}

	/* Center top-level leaf links (e.g. Contact) to match the <button>
	 * dropdown toggles, which browsers center by default. */
	.primary-navigation .primary-menu > li > a {
		text-align: center;
	}

	/* Submenus expand inline instead of floating; tap the toggle to open. */
	.primary-navigation .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0.5rem 1rem;
		border: 0;
		box-shadow: none;
	}

	.primary-navigation .menu-item-has-children:hover > .sub-menu,
	.primary-navigation .menu-item-has-children:focus-within > .sub-menu {
		display: none;
	}

	.primary-navigation .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}
}

/* ---------- Main content scaffold ---------- */
.site-main {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

.entry-title {
	margin-top: 0;
}

/* Page and post titles, the hero eyebrow ("Posts tagged with:"), and intro
 * leads are Dark Pine site-wide — every template renders its title as
 * .entry-title, via template-parts/page-hero.php or directly. */
.entry-title,
.lp-hero__eyebrow,
.lp-intro {
	color: var(--color-dark-pine);
}

.entry-content {
	font-size: var(--fs-body);
}

.entry-content > * + * {
	margin-top: 1rem;
}

/* ---------- Footer ---------- */
.site-footer {
	margin-top: 4rem;
}

/* Two-column "plan your visit" CTA: museum photo left, Spring panel right. */
.footer-cta {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.footer-cta {
		grid-template-columns: 1fr 1fr;
	}
}

.footer-cta__media {
	min-height: 16rem;
	background-image: url(../img/footer-cta.jpg);
	background-size: cover;
	background-position: center;
}

.footer-cta__content {
	display: flex;
	align-items: center;
	background: var(--color-spring);
	color: var(--color-dark-pine);
}

.footer-cta__inner {
	max-width: 40rem;
	padding: 6rem 2.5rem;
	margin: auto;
}

.footer-cta__title {
	margin: 0 0 1.25rem;
	font-family: var(--font-proxima);
	font-weight: 700;
	font-size: var(--fs-h4);
	color: var(--color-dark-pine);
}

.footer-cta__text {
	margin: 0 0 2rem;
	font-family: var(--font-cormorant);
	font-size: var(--fs-h5);
	color: var(--color-dark-pine);
	line-height: 1.3;
	font-weight: 300;
}

.footer-cta__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2rem calc(0.75rem + var(--menu-strip-height));
	background: var(--color-smoky-sunset);
	color: var(--color-dark-pine);
	font-family: var(--font-proxima);
	font-weight: 800;
	font-size: var(--fs-h5);
	text-transform: uppercase;
	letter-spacing: 0.075em;
	text-decoration: none;
}

/* Brand strip pinned to the button's base — the Golden Sun / Dark Pine variant,
 * not the menu bar's Spring one. Other variants live beside it in assets/img. */
.footer-cta__button::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--menu-strip-height);
	background: url(../img/menu-strip-golden-pine.jpg) repeat-x left center;
	background-size: auto 100%;
}

.footer-cta__button:hover,
.footer-cta__button:focus {
	background: var(--color-dark-pine);
	color: var(--color-golden-sun);
}

.footer-cta__button:focus-visible {
	/* Dark Pine, not white: white on the Spring panel is only 2.2:1. */
	outline: 3px solid var(--color-dark-pine);
	outline-offset: 3px;
}

.footer-cta__button-arrow {
	font-size: 1.1em;
	line-height: 1;
}

/* Dark colophon bar: attribution + syllabary + seal. */
.footer-copyright-bar {
	background: var(--color-blackberry);
}

.footer-copyright-bar__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 2.5rem;
}

.footer-colophon {
	display: flex;
	flex-direction: column;
	color: var(--color-tan);
}

.footer-colophon__lead {
	margin: 0;
	font-family: var(--font-cormorant);
	font-size: var(--fs-h4);
	font-weight: 100;
	line-height: 1.3;
}

.footer-colophon__cherokee {
	margin: 0.25rem 0 0;
	font-size: var(--fs-h4);
	font-weight: 300;
	line-height: 1.3;
}

.footer-copyright {
	margin: auto 0 0;
	padding-top: 1.5rem;
	color: rgb(106, 96, 123);
	font-family: var(--font-eb-garamond);
	font-size: var(--fs-small);
	font-weight: 100;
	text-transform: none;
	letter-spacing: 0;
}

/* Privacy policy link on the copyright line, same muted color, underlined. */
.footer-copyright a {
	color: inherit;
	text-decoration: underline;
}

.footer-copyright__sep {
	margin: 0 0.4em;
}

.footer-seal {
	flex: none;
	height: 11rem;
	width: auto;
}

@media (max-width: 40rem) {
	.footer-copyright-bar__inner {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.footer-colophon__lead,
	.footer-colophon__cherokee {
		font-size: var(--fs-h5);
	}

	.footer-cta__button {
		padding: 1rem 1rem calc(0.75rem + var(--menu-strip-height));
	}
}

/* ---------- Curriculum listing page ---------- */
.curriculum-page__active-filter {
	margin: 0.5rem 0 0;
	font-size: var(--fs-body);
	color: #555;
}

.curriculum-page__clear {
	margin-left: 0.75rem;
	font-size: var(--fs-small);
}

.curriculum-page__layout {
	display: grid;
	grid-template-columns: 16rem 1fr;
	gap: 2rem;
	margin-top: 1.5rem;
}

@media (max-width: 760px) {
	.curriculum-page__layout {
		grid-template-columns: 1fr;
	}
}

.curriculum-filters__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.curriculum-filters__group {
	border: 1px solid var(--border);
	padding: 0.75rem 1rem;
}

.curriculum-filters__group legend {
	padding: 0 0.25rem;
	font-weight: 600;
}

.curriculum-filters__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	cursor: pointer;
}

.curriculum-filters__count {
	color: #777;
	font-size: var(--fs-small);
}

.curriculum-filters__group--collapsible[open] {
	padding-bottom: 0.5rem;
}

.curriculum-filters__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.25rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.curriculum-filters__summary::-webkit-details-marker {
	display: none;
}

.curriculum-filters__summary:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

.curriculum-filters__summary-label {
	flex: 1 1 auto;
}

.curriculum-filters__summary-count {
	font-weight: 400;
	font-size: var(--fs-small);
	color: #555;
}

.curriculum-filters__summary::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.25rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 150ms ease;
}

.curriculum-filters__group--collapsible[open] .curriculum-filters__summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.curriculum-filters__scroll {
	max-height: 240px;
	overflow-y: auto;
	margin-top: 0.5rem;
	padding-right: 0.25rem;
}

.curriculum-filters__submit {
	padding: 0.5rem 1rem;
	border: 1px solid var(--button-bg);
	background: var(--button-bg);
	color: var(--button-text);
	cursor: pointer;
	font: inherit;
}

.curriculum-filters__submit:hover {
	border-color: var(--button-bg-hover);
	background: var(--button-bg-hover);
	color: var(--button-text-hover);
}

.curriculum-results__count {
	margin: 0 0 1rem;
	color: #555;
	font-size: var(--fs-body);
}

.lesson-plan-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
}

.lesson-plan-card {
	border: 1px solid var(--border);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lesson-plan-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.lesson-plan-card__title {
	margin: 0;
	font-size: var(--fs-h4);
	line-height: 1.3;
}

.lesson-plan-card__title a {
	color: inherit;
	text-decoration: none;
}

.lesson-plan-card__title a:hover,
.lesson-plan-card__title a:focus {
	text-decoration: underline;
}

.lesson-plan-card__meta {
	margin: 0;
	font-size: var(--fs-small);
	color: #555;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.lesson-plan-card__excerpt {
	margin: 0;
	font-size: var(--fs-body);
}

.curriculum-results__empty {
	padding: 2rem 1rem;
	border: 1px dashed var(--border);
	text-align: center;
	color: #555;
}

.curriculum-results__pagination {
	margin-top: 2rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.curriculum-results__pagination .page-numbers {
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--border);
	text-decoration: none;
	color: inherit;
}

.curriculum-results__pagination .page-numbers.current {
	background: var(--text);
	color: var(--surface);
	border-color: var(--text);
}

.curriculum-page__notes {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px dashed var(--border);
}

.curriculum-page__notes h2 {
	margin-top: 0;
	font-size: var(--fs-small);
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Lesson plan downloads ---------- */
.lesson-plan-downloads {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lesson-plan-downloads li + li {
	margin-top: 0.5rem;
}

.lesson-plan-downloads a {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--button-bg);
	color: var(--button-text);
	text-decoration: none;
	border-radius: 4px;
	line-height: 1.4;
}

.lesson-plan-downloads a:hover {
	background: var(--button-bg-hover);
	color: var(--button-text-hover);
}

.lesson-plan-downloads a:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* ---------- Button utilities ---------- */
.button-fire,
.button-outline {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	font-family: var(--font-proxima);
	font-weight: 700;
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 2px solid var(--button-bg);
	border-radius: 0;
	cursor: pointer;
	line-height: 1.3;
}

.button-fire {
	background: var(--button-bg);
	color: var(--button-text);
}

.button-fire:hover,
.button-fire:focus {
	background: var(--button-bg-hover);
	border-color: var(--button-bg-hover);
	color: var(--button-text-hover);
}

/* Outline: Golden Sun border, Dusk text (13.7:1); fills Golden Sun on hover. */
.button-outline {
	background: transparent;
	border-color: var(--color-golden-sun);
	color: var(--color-dusk);
}

.button-outline:hover,
.button-outline:focus {
	background: var(--color-golden-sun);
	color: var(--color-dusk);
}

.button-fire:focus-visible,
.button-outline:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* Keep buttons free of the prose underline applied by `.entry-content a`. */
.entry-content a.button-fire,
.entry-content a.button-outline {
	text-decoration: none;
}

/* ---------- Single lesson plan ----------
 * The template's main runs edge to edge (--flush) so the background zones span
 * the full browser width; each zone re-constrains its content to the page
 * margin via .lp-zone__inner. */
.site-main--flush {
	max-width: none;
	padding: 0;
}

.lp-zone__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 6rem 1.5rem;
}

/* Zone 1 — cream background behind title, meta, intro, flexible content. */
.lp-zone--cream {
	background: var(--color-tan);
}

/* Two columns: main content left, taxonomy meta top-right. Stacks on mobile. */
.lp-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (min-width: 760px) {
	.lp-top {
		grid-template-columns: minmax(0, 1fr) 18rem;
		gap: 3rem;
	}

	.lp-top--no-meta {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lp-top__main .entry-title {
	margin: 0;
}

.lp-top__meta {
	padding-top: 1rem;
}

/* Eyebrow label above a hero title (e.g. "Posts tagged with:"), h4-sized. */
.lp-hero__eyebrow {
	margin: 0 0 0.25rem;
	font-family: var(--font-proxima);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.2;
}

/* Dotted rule under the title. */
.lp-rule {
	border-top: 5px dotted var(--color-dark-pine);
	margin: 1.25rem 0 1.5rem;
}

/* Intro lead paragraph — sized to match the h4 scale, in light Cormorant. */
.lp-intro {
	margin: 0 0 1.5rem;
	font-family: var(--font-cormorant);
	font-weight: 100;
	font-size: var(--fs-h4);
	line-height: 1.25;
}

/* Taxonomy meta list (top-right column, and reused in related-lesson cards). */
.entry-meta {
	margin: 0;
	font-size: var(--fs-body);
}

.entry-meta dt {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-size: var(--fs-small);
	color: var(--color-dark-pine);
	margin: 0;
}

.entry-meta dt + dd {
	margin: 0.15rem 0 0;
}

.entry-meta dd + dt {
	margin-top: 0.85rem;
}

/* Per-taxonomy link colors, per the design. NOTE: State Accreditation is
 * flag-hidden today; the Golden-Sun-on-light treatment below has poor contrast and
 * must be revisited (darker shade) before the state flag is ever enabled. */
.entry-meta dd a {
	text-decoration: underline;
}

.entry-meta__lesson-plans a {
	color: var(--color-dark-pine);
}

.entry-meta__grades a,
.entry-meta__subjects a {
	color: var(--color-dark-pine);
}

/* Post pages only (single lesson plans and activities, via their right-hand
 * .lp-top__meta column): grade tags in Dusk (13.7:1 on tan; Smoky Sunset was
 * 3:1), subject tags in Fire. Cards on listings and inside posts stay Dark
 * Pine. */
.lp-top__meta .entry-meta__grades a {
	color: var(--color-dusk);
}

.lp-top__meta .entry-meta__subjects a {
	color: var(--color-fire);
}

.entry-meta__states a {
	color: var(--color-golden-sun);
}

/* In-content downloads (the "Lesson Plan Downloads" flexible layout). */
.lp-downloads {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lp-download {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(var(--color-blackberry-rgb), 0.15);
}

/* Rule above the first entry so the list is bounded top and bottom. */
.lp-download:first-child {
	border-top: 1px solid rgba(var(--color-blackberry-rgb), 0.15);
}

.lp-download__label {
	flex: 1 1 12rem;
	font-family: var(--font-eb-garamond);
	font-size: var(--fs-h5);
	color: var(--color-dark-pine);
}

/* The downloads layout and the Videos grid swap their Fire buttons: solid
 * ones are Golden Sun with Dusk text, outlines are Dusk. Placed after the button utilities so
 * these win at equal specificity. Download / Visit Site invert to the Dusk
 * outline look on hover; View fills with Golden Sun. */
.lp-downloads .button-fire,
.video-card .button-fire,
.lp-downloads .button-outline:hover,
.lp-downloads .button-outline:focus {
	background: var(--color-golden-sun);
	border-color: var(--color-golden-sun);
	color: var(--color-dusk);
}

.lp-downloads .button-fire:hover,
.lp-downloads .button-fire:focus,
.video-card .button-fire:hover,
.video-card .button-fire:focus {
	background: transparent;
	border-color: var(--color-dusk);
	color: var(--color-dusk);
}

/* View: Golden Sun outline with Dusk text (fills Golden Sun on hover, above). */
.lp-downloads .button-outline {
	background: transparent;
	border-color: var(--color-golden-sun);
	color: var(--color-dusk);
}

.lp-download__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 0.75rem;
}

/* Zone 2 — Dark Pine "Download the Lesson Plan" CTA band with the brand bg image. */
.lp-download-cta {
	background-color: var(--color-dark-pine);
	background-image: url(../img/lp-download-bg-dark-pine.webp);
	background-size: cover;
	background-position: center;
}

.lp-download-cta__inner {
	display: flex;
	justify-content: center;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.lp-download-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 2rem;
	background: var(--color-golden-sun);
	color: var(--color-dark-pine);
	font-family: var(--font-proxima);
	font-weight: 800;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	letter-spacing: 0.075em;
	text-decoration: none;
}

.lp-download-cta__label {
	margin-top: 4px;
}

.lp-download-cta__button:hover,
.lp-download-cta__button:focus {
	/* Tan, not the old white-text hover: white on Golden Sun is only 1.9:1. */
	background: var(--color-tan);
	color: var(--color-dark-pine);
}

.lp-download-cta__button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.lp-download-cta__icon {
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
}

/* Zone 3 — Activities + Related lesson plans sections. */
.lp-section + .lp-section {
	margin-top: 3.5rem;
}

.lp-section__title {
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 4px dotted var(--color-fire);
	font-size: var(--fs-h2);
}

.lp-section__title--fire {
	color: var(--color-fire);
	font-weight: 100;
	letter-spacing: -0.05rem;
}

.lp-section__title--dark-pine {
	color: var(--color-fire);
	font-weight: 100;
	letter-spacing: -0.05rem;
}

/* Activity cards (this lesson plan's activities) — centered, Fire title. */
.lp-activity-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
}

.lp-activity-card {
	border: 1px solid var(--border);
	padding: 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}

.lp-activity-card__title {
	margin: 0;
	font-size: var(--fs-h5);
	color: var(--color-fire);
}

.lp-activity-card__title a {
	color: inherit;
	text-decoration: none;
}

.lp-activity-card__title a:hover,
.lp-activity-card__title a:focus {
	text-decoration: underline;
}

/* Match the taxonomy labels (.entry-meta dt): same weight, tracking, size. */
.lp-activity-card__format {
	margin: 0;
	font-family: var(--font-proxima);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-size: var(--fs-small);
	color: var(--color-dark-pine);
}

.lp-activity-card__rule {
	width: 3rem;
	margin: 0.5rem 0;
	border: 0;
	border-top: 1px solid var(--border);
}

.lp-activity-card__desc {
	margin: 0 0 1rem;
	font-size: var(--fs-body);
}

/* Inherited grade/subject terms — same treatment as the related-lesson-plan
 * card meta (small size, blackberry terms). */
.lp-activity-card__meta {
	font-size: var(--fs-small);
	margin: 0;
}

.lp-activity-card__meta dd a {
	color: var(--color-dark-pine);
}

/* Push the download button to the card's bottom so cards align in a row. */
.lp-activity-card__download {
	margin-top: auto;
}

/* Related lesson-plan cards — compact, green title + labeled meta. */
.lp-related-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
}

.lp-related-card {
	border: 1px solid var(--border);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lp-related-card__title {
	margin: 0;
	font-family: var(--font-proxima);
	font-size: var(--fs-h4);
	color: var(--color-dark-pine);
}

.lp-related-card__title a {
	color: var(--color-fire);
	text-decoration: none;
}

.lp-related-card__title a:hover,
.lp-related-card__title a:focus {
	text-decoration: underline;
}

.lp-related-card__meta {
	font-size: var(--fs-small);
}

/* Related-lesson-plan cards keep all taxonomy terms blackberry; the
 * per-taxonomy link colors apply only to the top-of-page meta. */
.lp-related-card__meta dd a {
	color: var(--color-dark-pine);
}

/* ---------- Activities ---------- */
.activity-card {
	justify-content: space-between;
}

/* Lesson plan name shown subordinate to the activity title, on the grid card
 * and single activity. Auto-derived from the relationship, never authored. */
.activity-subtitle {
	margin: -0.15rem 0 0;
	font-size: var(--fs-small);
	color: #555;
}

.activity-subtitle__label {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--fs-small);
	color: #777;
}

.activity-subtitle a {
	color: inherit;
}

/* Download button shared by activity cards, single activities, and the
 * Activities section on single lesson plans. Matches .lesson-plan-downloads a. */
.activity-download {
	display: inline-block;
	align-self: flex-start;
	padding: 0.5rem 1rem;
	background: var(--button-bg);
	color: var(--button-text);
	text-decoration: none;
	border-radius: 4px;
	line-height: 1.4;
}

.activity-download:hover {
	background: var(--button-bg-hover);
	color: var(--button-text-hover);
}

.activity-download:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

.lesson-plan-activities {
	margin-top: 2.5rem;
}

.lesson-plan-activities__title {
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #555;
}

/* ---------- Single activity ---------- */
/* The activity post runs on tan all the way down to the footer (the footer +
 * an above-footer CTA are still to be designed). */
body.single-activity {
	background: var(--color-tan);
}

/* Tighten the gap between the intro (tan hero) and the download button on
 * activity posts: the two stacked zone paddings total 12rem by default; bring
 * each to 1rem so the combined gap is 2rem. */
body.single-activity .lp-zone--cream .lp-zone__inner {
	padding-bottom: 1rem;
}

body.single-activity .lp-zone:not(.lp-zone--cream) .lp-zone__inner {
	padding-top: 1rem;
}

.activity-single__meta {
	margin-top: 0.5rem;
}

/* Download CTA — styled like the homepage "Browse all" button (size/shape),
 * kept in the brand Fire + white, with the download icon at the end. */
.activity-download-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 2rem 0.75rem;
	background: var(--color-fire);
	color: var(--color-dusk);
	font-family: var(--font-proxima);
	font-weight: 800;
	font-size: var(--fs-h5);
	text-transform: uppercase;
	letter-spacing: 0.075em;
	text-decoration: none;
}

.activity-download-cta:hover,
.activity-download-cta:focus {
	background: var(--color-fire-dark);
	color: #fff;
}

.activity-download-cta:focus-visible {
	outline: 3px solid var(--text);
	outline-offset: 3px;
}

.activity-download-cta__icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
}

.activity-single__thumb {
	margin: 0 0 1.5rem;
}

.activity-single__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.activity-single__download {
	margin: 1.5rem 0;
}

.activity-single__lesson-plans {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px dashed var(--border);
}

.activity-single__lesson-plans h2 {
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #555;
}

/* ---------- Field trips (grid cards) ---------- */
.field-trip-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* 18rem min caps the row at 3 columns in the content column (a 4th won't
	 * fit); still drops to 2 / 1 as the screen narrows. */
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
}

/* Field trips carry only a title, so each card is one full clickable button
 * (blackberry, Smoky Sunset text) rather than an info card like lesson plans/activities. */
.field-trip-card {
	display: flex;
}

.field-trip-card__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 6rem;
	padding: 1.5rem 1.25rem;
	background: var(--color-dusk);
	color: var(--color-smoky-sunset);
	text-decoration: none;
}

.field-trip-card__link:hover,
.field-trip-card__link:focus {
	color: #fff;
}

.field-trip-card__link:focus-visible {
	outline: 3px solid var(--text);
	outline-offset: 3px;
}

.field-trip-card__title {
	margin: 0;
	font-family: var(--font-proxima);
	font-size: var(--fs-h4);
	color: inherit;
	text-align: center;
}

/* Field trips + SPiN pages: flexible rows sit above the listing grid. */
.field-trips-page .entry-content,
.spin-curriculum-page .entry-content {
	margin-bottom: 5rem;
}

/* A full-width photo as the first row meets the hero band with no white gap:
 * drop the zone's top padding and the photo's own top margin. */
.field-trips-page .lp-zone__inner:has(> .entry-content:first-child > .layout-photo-carousel--full-width:first-child),
.spin-curriculum-page .lp-zone__inner:has(> .entry-content:first-child > .layout-photo-carousel--full-width:first-child) {
	padding-top: 0;
}

.field-trips-page .entry-content > .layout-photo-carousel--full-width:first-child,
.spin-curriculum-page .entry-content > .layout-photo-carousel--full-width:first-child {
	margin-top: 0;
}

.field-trips-page .lp-zone:not(.lp-zone--cream) .lp-zone__inner {
	padding-bottom: 2rem;
}

.field-trip-single .entry-title {
	padding: 4rem 0rem;
	color: var(--color-dark-pine);
}

.field-trip-single__thumb {
	margin: 0 0 1.5rem;
}

.field-trip-single__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Taxonomy term archive ---------- */
/* The hero band is Smoky Sunset on taxonomy archives (tan elsewhere). */
.taxonomy-archive .lp-zone--cream {
	background: var(--color-smoky-sunset);
}

.taxonomy-archive__term {
	font-style: italic;
}

.taxonomy-archive__description {
	margin-top: 0.5rem;
	color: #555;
}

/* the_posts_pagination() nests page numbers in .nav-links; mirror the flex
 * layout used by the curriculum listing's paginate_links() output. */
.taxonomy-archive .curriculum-results__pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* ---------- Homepage ---------- */
/* .home-main is intentionally unconstrained (no max-width) so the intro can
 * run full-bleed; inner content uses .home-section--constrained / __inner. */
.home-section--constrained {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

/* Homepage flexible-content rows: narrower than the other home sections,
 * matching the 850px Browse Lesson Plans box. */
.home-flexible {
	max-width: 850px;
}

.home-section__title {
	margin-top: 0;
}

/* Intro — full-width two-column band; each column has its own background. */
.home-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.home-intro__col {
	background-color: var(--color-smoky-sunset);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 1.5rem;
}

.home-intro__col-inner {
	width: 100%;
	max-width: 25rem;
}

.home-intro__logo {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Translucent panel keeps the copy readable over any background image
 * (WCAG contrast is not left to chance on the intro art). */
/* Intro copy reads at h2 size/style (Cormorant), light weight. The `p`
 * selector overrides the global `h5, p` family + `.entry-content` size.
 * Set in Dark Pine per the 2026-09 rebrand. */
.home-intro__copy,
.home-intro__copy p,
.home-intro__copy li {
	font-family: var(--font-cormorant);
	font-size: var(--fs-h2);
	font-weight: 300;
	line-height: 1.15;
	color: var(--color-dark-pine);
}

.home-intro__copy > :first-child {
	margin-top: 0;
}

.home-intro__copy > :last-child {
	margin-bottom: 0;
}

@media (max-width: 760px) {
	.home-intro {
		grid-template-columns: 1fr;
	}

	.home-intro__col {
		padding: 3.5rem 1.5rem;
	}

	.home-intro__col--right {
		padding: 3.5rem 3.5rem;
	}

	.home-intro__col-inner {
		width: 100%;
	}

	.home-intro__col--left .home-intro__col-inner {
		max-width: 15rem;
	}

	.home-intro__col--right .home-intro__col-inner {
		max-width: 23rem;
	}
}

/* Browse by — one dropdown per taxonomy. */
.home-browse {
	/* width caps the box at (viewport - gutter) so there's always side white
	 * space; max-width still limits + centers it on large screens. Bump the
	 * 3rem gutter for a thicker border. */
	width: calc(100% - 8rem);
	max-width: 850px;
	margin: 6rem auto;
	/* Tan text on Dusk. Overriding --text also turns the select focus outline
	 * tan, since the default Blackberry would vanish against Dusk. */
	--text: var(--color-tan);
	color: var(--text);
	background-color: var(--color-dusk);
	background-image: url(../img/browse-pottery-smoky-sunset-3.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	padding: 6rem 4rem 4rem 4rem;
}

@media (max-width: 40rem) {
	.home-browse {
		width: calc(100% - 4rem);
		margin: 2rem auto;
		padding: 3.5rem 2rem 2rem 2rem;
	}
}

#home-browse-title {
	font-family: var(--font-proxima);
	text-align: center;
}

.home-browse__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.home-browse__form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.home-browse__heading {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 600;
}

.home-browse__control {
	display: flex;
	gap: 0.5rem;
}

.home-browse__select {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface);
	font: inherit;
	/* The select sits on a white field, so its "Choose an option…" text is
	 * Dusk rather than inheriting the box's tan. */
	color: var(--color-dusk);
}

.home-browse__go {
	flex: 0 0 auto;
	padding: 0.5rem 1rem;
	background: var(--button-bg);
	color: var(--button-text);
	border: 0;
	border-radius: 4px;
	font: inherit;
	cursor: pointer;
}

.home-browse__go:hover {
	background: var(--button-bg-hover);
	color: var(--button-text-hover);
}

.home-browse__select:focus-visible,
.home-browse__go:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* With JS, selecting an option submits the form, so the Go fallback hides. */
.home-browse__form--js .home-browse__go {
	display: none;
}

/* Featured lesson plans. */
.home-featured__more {
	margin-top: 1.5rem;
}

/* Styled like the "Download the Lesson Plan" CTA button, but Fire with
 * Blackberry text (and no background band/image). Blackberry rather than
 * Dusk: Dusk on Fire is 3.8:1, which fails AA at the 16px mobile size. */
.home-featured__more-link {
	display: inline-flex;
	align-items: center;
	/* Slightly less bottom padding nudges the uppercase text down so it reads as
	 * optically centered. */
	padding: 1rem 2rem 0.75rem;
	background: var(--color-fire);
	color: var(--color-blackberry);
	font-family: var(--font-proxima);
	font-weight: 800;
	font-size: var(--fs-h5);
	text-transform: uppercase;
	letter-spacing: 0.075em;
	text-decoration: none;
}

@media (max-width: 40rem) {
	.home-featured__more-link {
		padding: 0.5rem 1rem;
		font-size: var(--fs-h6);
	}
}

.home-featured__more-link:hover,
.home-featured__more-link:focus {
	background: var(--color-smoky-sunset);
	color: var(--color-blackberry);
}

.home-featured__more-link:focus-visible {
	outline: 3px solid var(--color-dark-pine);
	outline-offset: 3px;
}

/* ---------- Text layout: pullquote (blockquote) ---------- */
/* margin-left:0 keeps the Golden Sun rule flush with the left margin of the
 * surrounding text; padding-left sets the quote off from the rule. TinyMCE
 * wraps the quote in a <p>, which the global `h5, p` rule would otherwise
 * force back to EB Garamond — so the font is set on the paragraph too. */
.layout-text blockquote {
	margin: 1.5rem 0;
	padding-left: 1.5rem;
	border-left: 4px solid var(--color-golden-sun);
	font-style: italic;
}

.layout-text blockquote,
.layout-text blockquote p {
	font-family: var(--font-cormorant);
	font-size: var(--fs-h4);
}

.layout-text blockquote p {
	margin: 0;
}

/* ---------- Video embed (shared: flex layout, Videos page, single video) ---------- */
/* The oEmbed field returns a fixed-size iframe; stretch it to the container
 * width at a 16:9 ratio. Absolute positioning overrides the iframe's own
 * width/height attributes. */
.layout-video {
	margin: 2rem 0;
}

.video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.video-embed iframe,
.video-embed embed,
.video-embed object,
.video-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Click-to-load facade: poster + play button; the player iframe (and its heavy
 * third-party JS) only loads when clicked. JS swaps in the iframe — see
 * assets/js/main.js. */
.video-facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--color-blackberry);
	cursor: pointer;
	overflow: hidden;
}

.video-facade__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: rgba(var(--color-blackberry-rgb), 0.75);
	transition: background 150ms ease;
}

.video-facade__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 56%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.15rem;
	border-color: transparent transparent transparent #fff;
}

.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
	background: var(--color-fire);
}

.video-facade:focus-visible {
	outline: 3px solid var(--color-fire);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.video-facade__play {
		transition: none;
	}
}

/* ---------- Videos page (grid of playable embeds) ---------- */
.videos-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
	gap: 2.5rem;
}

.video-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.video-card__title {
	margin: 0;
	font-family: var(--font-proxima);
	font-size: var(--fs-h4);
	color: var(--text);
}

/* "Watch Video" link to the single page; the card no longer shows the
 * description (editors write long ones). */
.video-card__more {
	margin: 0;
}

/* Single video: the player leads, centered in the tan band; the title, rule,
 * and description follow in the white section in a narrower centered column
 * sized for reading. */
.video-single__player {
	max-width: 60rem;
	margin: 0 auto;
}

.video-single__content {
	max-width: 40rem;
	margin: 0 auto;
}

.video-single .entry-title {
	margin: 0;
	font-size: var(--fs-h3);
	line-height: 1.2;
}

/* ---------- Photo Carousel layout ---------- */
.layout-photo-carousel {
	margin: 2rem 0;
}

/* Shared image reset for grid + carousel figures. */
.photo-grid__figure,
.photo-carousel__figure {
	margin: 0;
}

.photo-grid__image {
	display: block;
	width: 100%;
	height: auto;
}

/* 2-4 photos: all cells share one height and crop-to-fill so every image
 * occupies equal space in the grid. (1 photo keeps its natural aspect ratio.) */
.photo-grid--count-2 .photo-grid__image,
.photo-grid--count-3 .photo-grid__image,
.photo-grid--count-4 .photo-grid__image {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Count-driven grids (1-4 photos). */
.photo-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* 2rem matches the section's top/bottom margin for even spacing all around. */
	gap: 2rem;
}

.photo-grid__item {
	margin: 0;
}

/* 1 photo: single column, spans the content width. */
.photo-grid--count-1 {
	grid-template-columns: 1fr;
}

/* 2 photos: two columns. */
.photo-grid--count-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* 3 photos: three columns. */
.photo-grid--count-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* 4 photos: 2x2 grid. */
.photo-grid--count-4 {
	grid-template-columns: repeat(2, 1fr);
}

/* Tablet: three-column drops to two so images don't get too small. */
@media (max-width: 900px) {
	.photo-grid--count-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Phone: everything stacks to a single column. */
@media (max-width: 600px) {
	.photo-grid--count-2,
	.photo-grid--count-3,
	.photo-grid--count-4 {
		grid-template-columns: 1fr;
	}
}

/* 1 photo with "Full Width" on. Base state = no JS: sits in the content column
 * like the plain single photo. main.js adds .is-bleed and sets --bleed-offset
 * (distance from the window's left edge to the column) and --bleed-width (the
 * window width minus any scrollbar), which stretch it edge to edge from any
 * column — centered or not. */
.layout-photo-carousel--full-width.is-bleed {
	width: var(--bleed-width);
	max-width: none;
	margin-left: calc(-1 * var(--bleed-offset));
}

.photo-bleed {
	position: relative;
}

.photo-bleed__image {
	display: block;
	width: 100%;
	height: auto;
}

/* Back-to-back full-width photos butt together with no gap between them.
 * Sibling margins collapse, so both sides of the seam must go to zero. */
.layout-photo-carousel--full-width:has(+ .layout-photo-carousel--full-width) {
	margin-bottom: 0;
}

.layout-photo-carousel--full-width + .layout-photo-carousel--full-width {
	margin-top: 0;
}

/* Gradient under the headline. Color is editor-picked (--bleed-scrim-rgb, set
 * inline by the partial); defaults to Blackberry. */
.photo-bleed--has-headline::after {
	content: "";
	position: absolute;
	inset: 0;
	--scrim: var(--bleed-scrim-rgb, var(--color-blackberry-rgb));
	background: linear-gradient(to top, rgba(var(--scrim), 0.8) 0%, rgba(var(--scrim), 0.45) 45%, rgba(var(--scrim), 0) 75%);
	pointer-events: none;
}

/* Headline aligns with the site's content margin, not the window edge. Text
 * color is editor-picked (--bleed-headline-color); defaults to white. The
 * deeper bottom padding lifts it up the photo. */
.layout-photo-carousel .photo-bleed__headline {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 2.5rem max(1.5rem, calc((100% - var(--max-width)) / 2 + 1.5rem)) 5rem;
	color: var(--bleed-headline-color, #fff);
	font-size: var(--fs-h1);
	font-weight: 100;
	letter-spacing: -0.03rem;
	line-height: 1.1;
}

/* Phone: give the headline room by cropping the photo to a taller frame. */
@media (max-width: 600px) {
	.photo-bleed--has-headline .photo-bleed__image {
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.layout-photo-carousel .photo-bleed__headline {
		padding-top: 1.5rem;
		padding-bottom: 2.5rem;
		font-size: var(--fs-h4);
	}
}

/* Carousel (5+ photos). Base state = no JS: a plain stacked, all-visible
 * gallery. The nav buttons and thumbnail strip are useless without JS, so they
 * stay hidden until .is-enhanced is added by main.js. */
.photo-carousel__viewport {
	position: relative;
}

.photo-carousel__stage {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.photo-carousel__slide {
	margin: 0;
}

.photo-carousel__image {
	display: block;
	width: 100%;
	height: auto;
}

.photo-carousel__nav,
.photo-carousel__thumbs {
	display: none;
}

/* Enhanced (JS active): single stage with overlaid slides + thumbnail strip. */
.photo-carousel.is-enhanced .photo-carousel__viewport {
	background: var(--color-blackberry);
	overflow: hidden;
}

.photo-carousel.is-enhanced .photo-carousel__stage {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	gap: 0;
}

.photo-carousel.is-enhanced .photo-carousel__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	opacity: 0;
}

.photo-carousel.is-enhanced .photo-carousel__slide.is-active {
	visibility: visible;
	opacity: 1;
	animation: photo-carousel-fade 300ms ease;
}

.photo-carousel.is-enhanced .photo-carousel__figure {
	height: 100%;
}

/* cover so each photo fills the stage to its edges, cropping as needed. */
.photo-carousel.is-enhanced .photo-carousel__image {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

@keyframes photo-carousel-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Prev/next controls. */
.photo-carousel.is-enhanced .photo-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	color: var(--color-dark-pine);
	cursor: pointer;
}

.photo-carousel.is-enhanced .photo-carousel__nav--prev {
	left: 0.75rem;
}

.photo-carousel.is-enhanced .photo-carousel__nav--next {
	right: 0.75rem;
}

.photo-carousel__nav-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.photo-carousel.is-enhanced .photo-carousel__nav:hover {
	background: #fff;
}

.photo-carousel.is-enhanced .photo-carousel__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Thumbnail strip. */
.photo-carousel.is-enhanced .photo-carousel__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.photo-carousel__thumb-item {
	margin: 0;
}

.photo-carousel__thumb {
	display: block;
	padding: 0;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	line-height: 0;
	opacity: 0.6;
	transition: opacity 150ms ease;
}

.photo-carousel__thumb-image {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
}

.photo-carousel__thumb:hover,
.photo-carousel__thumb:focus-visible {
	opacity: 1;
}

.photo-carousel__thumb.is-active {
	opacity: 1;
	border-color: var(--color-fire);
}

.photo-carousel__thumb:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* Respect reduced-motion: no crossfade animation. */
@media (prefers-reduced-motion: reduce) {
	.photo-carousel.is-enhanced .photo-carousel__slide.is-active {
		animation: none;
	}

	.photo-carousel__thumb {
		transition: none;
	}
}