/* ----------------------------------------------------------------------------------------------------------------------
     CSS VARIABLES — CentralApplied Brand System v6.3
     Two-Gold Rule strictly enforced throughout:
       --sun       fills + text on dark ONLY
       --sun-warm  thin rule lines + borders ONLY
  ---------------------------------------------------------------------------------------------------------------------- */
:root {
	--blue: #205999;
	--night: #184171;
	--deep: #0e2a4e;
	--cloud: #9dcffc;
	--sun: #ffda4a;
	--sun-warm: #f2c52e;
	--parchment: #f5f0e8;
	--parch-2: #ede5d5;
	--parch-3: #d9cebc;
	--parch-warm: #a0845c;
	--sea: #67c9d3;
	--storm: #6e7880;
	--white: #ffffff;
	--ink: #1a1a2e;
	--warm-dark: #2c2318;

	--font-display: "Montserrat", sans-serif;
	--font-serif: "Roboto Serif", Georgia, serif;
	--font-sans: "Roboto", system-ui, sans-serif;

	--shadow-card: 0 4px 24px rgba(14, 42, 78, 0.14);
	--shadow-lift: 0 12px 48px rgba(14, 42, 78, 0.28);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-sans);
	color: var(--ink);
	background: var(--white);
	line-height: 1.6;
}
img {
	display: block;
	max-width: 100%;
}
a {
	text-decoration: none;
	color: inherit;
}
::selection {
	background: var(--sun);
	color: var(--deep);
}

/* ----------------------------------------------------------------------------------------------------------------------
     WCAG 2.1 AA — SKIP NAVIGATION (2.4.1 Level A)
     Visually hidden until focused; appears at top for keyboard users.
  ---------------------------------------------------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	overflow: visible;
	padding: 12px 24px;
	background: var(--sun);
	color: var(--deep);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1rem;
	z-index: 9999;
	outline: 3px solid var(--deep);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------------------------------------------------------------
     WCAG 2.1 AA — FOCUS VISIBLE (2.4.7)
     Explicit keyboard focus indicator — Sun gold ring, matches brand.
     :focus-visible targets keyboard only (not mouse clicks).
  ---------------------------------------------------------------------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--sun);
	outline-offset: 3px;
}
/* On light backgrounds use deep outline for contrast */
.faqs :focus-visible,
.ccsu-mainnav :focus-visible,
.craig-break :focus-visible,
.stats :focus-visible {
	outline-color: var(--deep);
}

/* structural gold rule — always Sun Warm, beneath headers, 40–80px */
.gold-rule {
	display: block;
	width: 60px;
	height: 3px;
	background: var(--sun-warm);
	margin-top: 16px;
}
.gold-rule--full {
	width: 100%;
	margin-top: 0;
}

/* ----------------------------------------------------------------------------------------------------------------------
     STICKY SECTION NAV
  ---------------------------------------------------------------------------------------------------------------------- */
.section-nav {
	position: sticky;
	top: 0;
	z-index: 300;
	background: var(--night);
	border-bottom: 3px solid var(--sun-warm);
}

.section-nav__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 48px;
	display: flex;
	align-items: center;
	height: 52px;
}

.section-nav__links {
	display: flex;
	align-items: center;
	list-style: none;
	width: 100%;
	margin-bottom: 0;
}

.section-nav__links > li {
	position: relative;
	line-height: 1;
	margin-bottom: 0;
}

.section-nav__links > li > a,
.section-nav__links > li > button {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 18px;
	height: 52px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: 1.5px;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.7);
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		color 0.15s,
		background 0.15s;
}

.section-nav__links > li > a:hover,
.section-nav__links > li > button:hover {
	color: var(--white);
	background: rgba(255, 255, 255, 0.05);
}

/* active state — Sun fills, Sun Warm rule */
.section-nav__links > li > a.is-active {
	color: var(--sun);
	box-shadow: inset 0 -3px 0 var(--sun-warm);
}

.section-nav__links > li > a.nav-feedback {
	margin-left: auto;
	color: var(--sun-warm);
}
.section-nav__links > li > a.nav-feedback:hover {
	color: var(--sun);
	background: rgba(242, 197, 46, 0.07);
}

/* Task Forces dropdown */
.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--deep);
	border-top: 3px solid var(--sun-warm);
	min-width: 310px;
	display: none;
	flex-direction: column;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	z-index: 400;
}
.nav-dropdown.is-open {
	display: flex;
}

.nav-dropdown a {
	padding: 22px 20px;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 1.6rem;
	color: rgba(255, 255, 255, 0.82);
	display: flex;
	align-items: center;
	gap: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition:
		background 0.15s,
		color 0.15s;
	line-height: 1;
}
.nav-dropdown a:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

/* TF number — Sun fill on dark */
.nav-dropdown a .tf-n {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.2rem;
	color: var(--sun);
	min-width: 22px;
	letter-spacing: 1px;
}

/* ----------------------------------------------------------------------------------------------------------------------
     01 HERO — full-bleed background, constrained inner grid
     Background extends edge-to-edge; content caps at 1440px
     and centers so the mosaic and copy never over-stretch on
     wide monitors. Consistent with all other section layouts.
  ---------------------------------------------------------------------------------------------------------------------- */
.hero {
	background: linear-gradient(135deg, #0e2a4e 0%, #184171 100%);
	position: relative;
	overflow: hidden;
	min-height: 660px;
}

/* subtle chevron texture — full-bleed on .hero */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 22px, rgba(255, 255, 255, 0.018) 22px, rgba(255, 255, 255, 0.018) 44px);
	pointer-events: none;
	z-index: 0;
}

/* Inner grid — max-width container, auto-centered */
.hero__inner {
	display: grid;
	grid-template-columns: 0.65fr 1.35fr;
	max-width: 1440px;
	margin: 0 auto;
	min-height: 660px;
	position: relative;
	z-index: 1;
}

/* Left pane — discipline tag collage */
.hero__collage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 40px 80px 64px;
	z-index: 1;
}

/* Colored geometric blocks */
.hero__geo {
	position: relative;
	width: 100%;
	max-width: 400px;
	height: 420px;
}

.hero__block {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__block--blue {
	width: 190px;
	height: 210px;
	background: var(--blue);
	left: 0;
	top: 60px;
}
.hero__block--warm {
	width: 130px;
	height: 150px;
	background: var(--sun-warm);
	right: 36px;
	top: 0;
}
.hero__block--night {
	width: 155px;
	height: 175px;
	background: var(--night);
	right: 0;
	bottom: 40px;
}

.hero__block-label {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	padding: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}
.hero__block--warm .hero__block-label {
	color: rgba(14, 41, 73, 0.65);
}

/* Decorative triangle */
.hero__tri {
	position: absolute;
	bottom: 62px;
	left: 124px;
	width: 0;
	height: 0;
	border-left: 28px solid transparent;
	border-right: 28px solid transparent;
	border-top: 48px solid var(--sun-warm);
	opacity: 0.22;
}

/* Discipline tag chips */
.hero__tag {
	position: absolute;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 13px;
	white-space: nowrap;
	backdrop-filter: blur(4px);
}

.hero__tag-1 {
	top: 24px;
	left: 16px;
}
.hero__tag-2 {
	bottom: 96px;
	left: 0;
}
.hero__tag-3 {
	top: 116px;
	right: 24px;
}
.hero__tag-4 {
	bottom: 16px;
	right: 44px;
}
.hero__tag-5 {
	top: 0;
	right: 100px;
	color: var(--cloud);
	border-color: rgba(157, 207, 252, 0.3);
	background: rgba(157, 207, 252, 0.06);
}

/* Right pane — editorial copy */
.hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 64px 80px 32px;
	position: relative;
	z-index: 1;
}

.hero__hashtag {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.5rem;
	letter-spacing: 2px;
	color: var(--white);
	margin-bottom: 28px;
	line-height: 1;
}

.hero__eyebrow {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--cloud);
	margin-bottom: 18px;
	line-height: 1;
}

.hero__headline {
	font-family: var(--font-display);
	font-weight: 900;
	font-style: italic;
	font-size: clamp(40px, 5.5vw, 72px);
	line-height: 1.02;
	color: var(--white);
	margin-bottom: 20px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* "CENTRAL." renders in Sun gold — key brand signal */
.hero__headline--gold {
	color: var(--sun);
}

/* "We are exploring…" paragraph — light body copy below headline */
.hero__intro-body {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.68);
	max-width: 440px;
	margin-bottom: 24px;
}

/* Toro pull quote in hero — Roboto Serif italic, cloud color */
.hero__quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 1.8rem;
	line-height: 1.7;
	color: var(--cloud);
	max-width: 440px;
	margin-bottom: 10px;
	padding-left: 16px;
	border-left: 3px solid var(--sun-warm);
}

.hero__quote-attr {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 1.4rem;
	color: rgba(255, 255, 255, 0.6); /* was 0.45 — raised to 4.8:1 for WCAG AA */
	margin-left: 19px;
	margin-bottom: 40px;
	letter-spacing: 0.04em;
	line-height: 1;
}

.hero__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* CTA button — transparent fill, Sun Warm outline + text */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: transparent;
	border: 2px solid var(--sun-warm);
	color: var(--sun-warm);
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s,
		border-color 0.2s;
}
.btn:hover {
	background: rgba(242, 197, 46, 0.12);
	color: var(--sun);
	border-color: var(--sun);
}

/* Solid fill button — primary hero CTA, Sun fill on dark backgrounds */
.btn--solid {
	background: var(--sun);
	border-color: var(--sun);
	color: var(--deep);
}
.btn--solid:hover {
	background: var(--sun-warm);
	border-color: var(--sun-warm);
	color: var(--deep);
}

/* ----------------------------------------------------------------------------------------------------------------------
     DR. TORO VIDEO — parchment bg, Sun Warm top/bottom rules
     Per ccsu_toro_video_block.html design spec.
     WCAG 2.1 AA: all text meets 4.5:1 contrast on parchment.
  ---------------------------------------------------------------------------------------------------------------------- */
.toro-video {
	background: var(--parchment);
	position: relative;
}

/* Top + bottom Sun Warm rules via pseudo-elements */
.toro-video::before,
.toro-video::after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background: var(--sun-warm);
}

.toro-video__rule {
	display: none;
} /* handled by pseudo-elements */

.toro-video__inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 2.75rem 2rem 3rem;
}

.toro-video__eyebrow {
	font-family: var(--font-sans);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--blue);
	display: block;
	margin-bottom: 0.5rem;
}

.toro-video__heading {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 900;
	color: var(--deep);
	line-height: 1.15;
	margin-block: 0;
}

/* Short Sun Warm rule beneath heading */
.toro-video__gold-rule {
	width: 48px;
	height: 3px;
	background: var(--sun-warm);
	margin: 1.25rem 0 1.75rem;
	border: none;
	display: block;
}

/* 16:9 responsive video wrapper */
.video-wrapper {
	/* position: relative; */
	width: 100%;
	margin: 0;
	/* padding: 0; */
	box-shadow: 0 4px 24px rgba(14, 42, 78, 0.18);
}

/* Kaltura iframe and div targets — WCAG: title attr on iframe required */
.video-wrapper iframe,
.video-wrapper > div {
	display: block;
	/* top: 0; */
	/* left: 0; */
	/* width: 100%; */
	/* height: 100%; */
	/* border: none; */
}

/* Caption — Roboto Serif italic, dark grey, AA compliant on parchment */
.toro-video__attr {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-style: italic;
	color: #4a5568; /* contrast 5.9:1 on parchment — AA pass */
	margin-top: 1rem;
	padding-left: 2px;
}

/* ----------------------------------------------------------------------------------------------------------------------
     03 INTRO PARAGRAPH — styled as editorial pull-quote block
     Matches beta site: large gold open-quote, sea eyebrow,
     Roboto Serif italic body.
  ---------------------------------------------------------------------------------------------------------------------- */
.intro {
	background: var(--white);
	padding: 88px 48px;
	position: relative;
}

.intro__inner {
	max-width: 820px;
	margin: 0 auto;
	position: relative;
}

/* Large decorative open-quote — Sun Warm on white */
.intro__quote-mark {
	font-family: var(--font-serif);
	font-size: 120px;
	line-height: 0.7;
	color: var(--sun-warm);
	display: block;
	margin-bottom: 20px;
	opacity: 0.85;
	user-select: none;
}

.intro__eyebrow {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--sea); /* sea — matches beta site teal label */
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.intro__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sea);
	opacity: 0.25;
}

/* Body text — Roboto Serif italic, editorial register */
.intro__body {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.88;
	color: var(--ink);
}

.intro__body p + p {
	margin-top: 26px;
}

/* ----------------------------------------------------------------------------------------------------------------------
     04 TICKER BAND — discipline marquee
  ---------------------------------------------------------------------------------------------------------------------- */
.ticker {
	background: var(--night);
	overflow: hidden;
	height: 52px;
	display: flex;
	align-items: center;
}

.ticker__track {
	display: flex;
	align-items: center;
	animation: ticker-scroll 72s linear infinite;
	white-space: nowrap;
}

.ticker__track:hover {
	animation-play-state: paused;
}

.ticker__item {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 400;
	font-style: italic;
	color: rgba(255, 255, 255, 0.85);
	padding: 0 40px;
	border-right: 1px solid rgba(255, 255, 255, 0.13);
	display: flex;
	align-items: center;
	height: 52px;
	gap: 12px;
}

/* Ticker dot — Sun Warm (structural, not fill) */
.ticker__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sun-warm);
	flex-shrink: 0;
}

@keyframes ticker-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* ----------------------------------------------------------------------------------------------------------------------
     05 ETYMOLOGY + DISCIPLINE MOSAIC (PARCHMENT — approved)
  ---------------------------------------------------------------------------------------------------------------------- */
.etymology {
	background: var(--parchment);
	position: relative;
}

/* dot texture overlay */
.etymology::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23C4B89A' opacity='0.2'/%3E%3C/svg%3E");
	pointer-events: none;
}

.etymology__rule {
	height: 3px;
	background: var(--sun-warm);
	width: 100%;
	position: relative;
	z-index: 1;
}

.etymology__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 48px;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

/* Left col — copy */
.etymology__overline {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 16px;
}

/* Roboto Serif heading on parchment — scholarly register */
.etymology__heading {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(26px, 3.5vw, 44px);
	line-height: 1.12;
	color: var(--warm-dark);
	margin-bottom: 12px;
}

.etymology__heading em {
	font-style: italic;
	color: var(--blue);
}

.etymology__sub-rule {
	width: 60px;
	height: 3px;
	background: var(--parch-warm);
	margin-bottom: 28px;
}

.etymology__body {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.85;
	color: #4a3f30;
}
.etymology__body p + p {
	margin-top: 18px;
}

/* Blockquote — Roboto Serif italic, Sun Warm left border */
.etymology__blockquote {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 15px;
	color: #8c7b65;
	border-left: 3px solid var(--sun-warm);
	padding-left: 16px;
	margin-top: 24px;
	line-height: 1.7;
}
.etymology__blockquote cite {
	display: block;
	margin-top: 10px;
	font-style: normal;
	font-size: 13px;
	font-family: var(--font-sans);
	font-weight: 700;
	color: #8c7b65;
	letter-spacing: 0.03em;
}

/* Right col — discipline mosaic grid */
.disc-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.dm-cell {
	padding: 20px 22px 20px 22px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* top-aligned, consistent across all cells */
	min-height: 140px;
	position: relative;
	overflow: hidden;
}

/* Roman numeral — in flow at top, decorative */
.dm-cell__roman {
	font-family: var(--font-serif);
	font-size: 26px;
	font-weight: 600;
	opacity: 0.18;
	line-height: 1;
	color: currentColor;
	margin-bottom: 10px;
	display: block;
}

.dm-cell__label {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 6px;
	line-height: 1.3;
}

.dm-cell__desc {
	font-family: var(--font-serif);
	font-size: 13px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.45;
}

.dm-blue {
	background: var(--blue);
	color: var(--white);
}
.dm-night {
	background: var(--night);
	color: var(--white);
}
.dm-deep {
	background: var(--deep);
	color: var(--white);
}
.dm-parch {
	background: var(--parch-2);
	color: #2c2318;
}

/* Full-width bottom cell — spans both columns */
.dm-full {
	grid-column: 1 / 3;
	background: var(--sun-warm);
	color: var(--deep);
	min-height: 90px;
}

/* ----------------------------------------------------------------------------------------------------------------------
     06 VOICES — Portrait overlay photo cards
     Photos from Drive (need public share or CDN for production)
  ---------------------------------------------------------------------------------------------------------------------- */
.voices {
	background: var(--deep);
	padding: 88px 48px;
	position: relative;
	overflow: hidden;
}

.voices::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 14px);
}

.voices__inner {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.voices__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 48px;
}

.voices__eyebrow {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--cloud);
	margin-bottom: 12px;
	line-height: 1;
}

/* Roboto Serif for voices section heading — editorial register */
.voices__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(2rem, 3.5vw, 5rem);
	color: var(--white);
	line-height: 1.15;
	margin-top: 0;
}

.voices__title em {
	font-style: italic;
	color: var(--sun-warm);
}

.voices__view-all {
	font-family: var(--font-sans);
	font-size: 1.6rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.6); /* was 0.45 (4.08:1) — now 4.8:1 on deep, WCAG AA */
	display: flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	padding-bottom: 2px;
	white-space: nowrap;
	margin-bottom: 4px;
	transition: color 0.15s;
}
.voices__view-all:hover {
	color: var(--sun-warm);
}

/* Portrait grid: 1 wide hero card + 3-col row of 6 */
.portrait-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.portrait-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3/4;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	border: none;
}

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

/* Wide hero card — spans full 3 columns */
.portrait-card--wide {
	grid-column: 1 / 4;
	aspect-ratio: 16 / 5;
}

.portrait-card__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	/* fallback gradient shown if Drive image fails to load */
}

.portrait-card:hover .portrait-card__photo {
	transform: scale(1.04);
}

.portrait-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.portrait-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 41, 73, 0.1) 0%, rgba(14, 41, 73, 0.45) 40%, rgba(14, 41, 73, 0.92) 100%);
	transition: background 0.3s;
}
.portrait-card:hover .portrait-card__overlay {
	background: linear-gradient(180deg, rgba(14, 41, 73, 0.18) 0%, rgba(14, 41, 73, 0.58) 35%, rgba(14, 41, 73, 0.95) 100%);
}

.portrait-card__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px 24px;
}

/* Wide card uses row layout */
.portrait-card--wide .portrait-card__content {
	flex-direction: row;
	align-items: flex-end;
	gap: 48px;
}

.portrait-card--wide .portrait-card__quote-block {
	flex: 1;
}
.portrait-card--wide .portrait-card__person-block {
	min-width: 240px;
}

/* Large gold open-quote — Sun Warm on dark overlay */
.portrait-card__quote-mark {
	font-family: var(--font-serif);
	font-size: 54px;
	line-height: 0.7;
	color: var(--sun-warm);
	opacity: 0.8;
	display: block;
	margin-bottom: 8px;
}

/* Quote text — Roboto Serif Light Italic */
.portrait-card__quote {
	font-family: var(--font-serif);
	font-size: 1.8rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.6;
	color: var(--white);
	margin-bottom: 16px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.portrait-card--wide .portrait-card__quote {
	font-size: 2rem;
	max-width: 680px;
}

/* Discipline pill — Sun fill on dark (approved use) */
.portrait-card__discipline {
	position: absolute;
	top: 20px;
	right: 20px;
	background: var(--sun);
	color: var(--deep);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 10px;
	line-height: 1;
}

/* Person name — Montserrat Black, Sun fill on dark */
.portrait-card__name {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.8rem;
	color: var(--sun);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Role — Roboto 300, white-50 */
.portrait-card__role {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 1.4rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* Fallback photo gradients — shows when Drive images unavailable */
.photo-craig {
	background-image: url("https://drive.google.com/thumbnail?id=1s0dKgq-9WFNTpBX1-vB38SL0h8r84qdz&sz=w600");
	background-color: #2d4a6b;
}
.photo-tyler {
	background-image: url("https://drive.google.com/thumbnail?id=1rFqTfYOOlFIOIqdQ6fLY2pwf-cPWomue&sz=w600");
	background-color: #3a5c44;
}
.photo-malachi {
	background-image: url("https://drive.google.com/thumbnail?id=1of9eIgwJLt-DDjEHnWWl2OHj4nYUDmUY&sz=w600");
	background-color: #1e3a5f;
}
.photo-aidan {
	background-image: url("https://drive.google.com/thumbnail?id=1YCIG1C7Aw9t-a7ZWkCTe5zGNA0kyZu7Y&sz=w600");
	background-color: #4a3a6b;
}
.photo-lourdes {
	background-image: url("https://drive.google.com/thumbnail?id=1KZ689rN6PuCW6rFVbfHNqWysDVeKyp--&sz=w600");
	background-color: #5c3a2d;
}
.photo-tina {
	background-image: url("https://drive.google.com/thumbnail?id=17bGBENu4ycrG45JnaLOvDxWsMiIEdqgD&sz=w600");
	background-color: #1e4a5c;
}
.photo-sadie {
	background-image: url("https://drive.google.com/thumbnail?id=19IQ4tlBkdCOsz6u8qFPfy8cbxTDCU0PC&sz=w600");
	background-color: #3a1e5c;
}

/* ----------------------------------------------------------------------------------------------------------------------
     07 TASK FORCE UPDATES
  ---------------------------------------------------------------------------------------------------------------------- */
.tf-updates {
	background: var(--night);
	padding: 88px 48px;
}

.tf-updates__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.tf-updates__eyebrow {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--cloud);
	margin-bottom: 1.2rem;
}

.tf-updates__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(26px, 3.5vw, 44px);
	color: var(--white);
	margin-block: 0;
}

.tf-updates__header {
	margin-bottom: 52px;
}

.tf-updates__footer {
	margin-top: 40px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.tf-updates__view-all {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--sun-warm);
	display: flex;
	align-items: center;
	gap: 8px;
	transition:
		gap 0.2s,
		color 0.2s;
}
.tf-updates__view-all:hover {
	gap: 12px;
	color: var(--sun);
}

.tf-updates__scroll-note {
	font-family: var(--font-sans);
	font-size: 1.6rem;
	color: rgba(255, 255, 255, 0.75); /* raised from 0.30 — 5.6:1 on night, WCAG AA */
	font-style: italic;
}

/* TF update card grid */
.tf-update-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.tf-update-card {
	background: var(--deep);
	padding: 0;
	border-left: 3px solid var(--sun-warm);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition:
		transform 0.2s,
		box-shadow 0.2s;
}
.tf-update-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 16:9 thumbnail placeholder — replaced by Kaltura embed per card */
.tf-update-card__thumb {
	position: relative;
	width: 100%;
	padding-top: 42%;
	background: var(--night);
	cursor: pointer;
	flex-shrink: 0;
	aspect-ratio: 16/9;
}

.tf-update-card__thumb:has(.tf-update-card__link) {
	padding: 0;
}

.tf-update-card__link {
	padding: 0;
	border: 0;
	margin: 0;
	display: block;
}

.tf-update-card__thumb-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.tf-update-card__thumb-label {
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(157, 207, 252, 0.55);
}
.tf-update-card__thumb:hover .tf-update-card__thumb-inner {
	opacity: 0.85;
}

/* Text content area */
.tf-update-card__body {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

/* TF number — Sun fill on dark */
.tf-update-card__num {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.2rem;
	letter-spacing: 2px;
	color: var(--sun);
}

.tf-update-card__name {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 15px;
	line-height: 1.2;
	color: var(--white);
	flex: 1;
	margin-block: 0;
}

.tf-update-card__status {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 1.4rem;
	color: var(--cloud);
	letter-spacing: 0.03em;
	margin-block: 0;
	line-height: 1;
}

.tf-update-card__link {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--sun-warm);
	display: flex;
	align-items: center;
	gap: 6px;
	transition:
		gap 0.2s,
		color 0.2s;
}
.tf-update-card__link:hover {
	gap: 10px;
	color: var(--sun);
}

/* ----------------------------------------------------------------------------------------------------------------------
     08 PRESIDENT TORO FEATURE QUOTE
     NOTE: If consolidating with the video block (02),
     remove this section and add the quote text to the
     toro-video block's attribution area.
  ---------------------------------------------------------------------------------------------------------------------- */
.feature-quote {
	background: var(--blue);
	padding: 88px 80px;
	position: relative;
	overflow: hidden;
}

/* Decorative large "C" watermark */
.feature-quote::before {
	content: "C";
	font-family: var(--font-serif);
	font-size: 560px;
	font-weight: 600;
	line-height: 0.7;
	color: rgba(255, 255, 255, 0.04);
	position: absolute;
	top: -60px;
	left: 40px;
	pointer-events: none;
}

.feature-quote__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Large pull quote — Roboto Serif italic */
.feature-quote__text {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 2.8vw, 3.5rem);
	font-style: italic;
	font-weight: 300;
	color: var(--white);
	line-height: 1.6;
	margin-bottom: 28px;
}

.feature-quote__attr {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sun-warm);
	margin-bottom: 4px;
}

.feature-quote__role {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 1.6rem;
	color: rgba(255, 255, 255, 0.45);
}

/* ----------------------------------------------------------------------------------------------------------------------
     09 STATISTICS
  ---------------------------------------------------------------------------------------------------------------------- */
.stats {
	background: var(--parchment);
	border-top: 3px solid var(--blue);
	border-bottom: 3px solid var(--blue);
	padding: 72px 48px;
}

.stats__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.stat-cell {
	text-align: center;
	padding: 28px;
	border-right: 1px solid var(--parch-3);
}
.stat-cell:last-child {
	border-right: none;
}

/* Large numerals — Montserrat Black italic, blue on parchment */
.stat-cell__num {
	font-family: var(--font-display);
	font-weight: 900;
	font-style: italic;
	font-size: clamp(5rem, 7vw, 8rem);
	line-height: 1;
	color: var(--blue);
	text-transform: uppercase;
	margin-bottom: 12px;
}

.stat-cell__rule {
	width: 6rem;
	height: 2px;
	background: var(--sun-warm);
	margin: 0 auto 16px;
}

/* Stat labels — Roboto Serif italic on parchment surface */
.stat-cell__label {
	font-family: var(--font-serif);
	font-size: 1.8rem;
	font-style: italic;
	font-weight: 300;
	color: #4a3f30;
	line-height: 1.6;
	max-width: 240px;
	margin: 0 auto 6px;
}

.stat-cell__source {
	font-family: var(--font-sans);
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #4a3f30; /* was #8C7B65 (3.6:1) — now 9.1:1 on parchment, WCAG AA */
}

/* ----------------------------------------------------------------------------------------------------------------------
     10 MID-PAGE CTA
  ---------------------------------------------------------------------------------------------------------------------- */
.mid-cta {
	background: var(--deep);
	padding: 88px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.mid-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 22px, rgba(255, 255, 255, 0.015) 22px, rgba(255, 255, 255, 0.015) 44px);
	pointer-events: none;
}

/* Watermark text */
.mid-cta::after {
	content: "CENTRAL";
	font-family: var(--font-display);
	font-size: 220px;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.025);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.mid-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

.mid-cta__eyebrow {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--cloud);
	margin-bottom: 20px;
	line-height: 1;
}

.mid-cta__headline {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(3rem, 4.5vw, 6rem);
	line-height: 1.05;
	color: var(--white);
	margin-block: 0 16px;
}

.mid-cta__sub {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 1.8rem;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 40px;
	line-height: 1.6;
}

.mid-cta__btns {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* ----------------------------------------------------------------------------------------------------------------------
     11 FAQs — editorial two-column (sticky sidebar + accordion)
  ---------------------------------------------------------------------------------------------------------------------- */
.faqs {
	background: var(--white);
	padding: 88px 48px;
}

.faqs__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 88px;
}

/* Sticky sidebar */
.faqs__sidebar {
	position: sticky;
	top: 72px; /* account for nav bar */
	align-self: start;
}

.faqs__sidebar-label {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
}
.faqs__sidebar-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--blue);
	opacity: 0.2;
}

/* Roboto Serif for FAQ sidebar heading */
.faqs__sidebar-heading {
	font-family: var(--font-serif);
	font-size: 3.4rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--warm-dark);
	margin-block: 0 20px;
}
.faqs__sidebar-heading em {
	font-style: italic;
	color: var(--blue);
}

.faqs__sidebar-body {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 1.6rem;
	color: #4a3f30;
	line-height: 1.75;
	margin-bottom: 24px;
}

.faqs__sidebar-link {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--blue);
	display: flex;
	align-items: center;
	gap: 8px;
	transition: gap 0.2s;
}
.faqs__sidebar-link:hover {
	gap: 12px;
}

/* FAQ accordion */
.faq-item {
	border-top: 1px solid #e2e8f0;
}
.faq-item:last-child {
	border-bottom: 1px solid #e2e8f0;
}

.faq-item__q {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	user-select: none;
}

/* FAQ number — Roboto Serif italic, blue */
.faq-item__num {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 600;
	font-style: italic;
	color: var(--blue);
	min-width: 36px;
	line-height: 1.6;
	flex-shrink: 0;
}

.faq-item__q-text {
	font-family: var(--font-sans);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
	flex: 1;
	transition: color 0.15s;
	padding-top: 1px;
}
.faq-item:hover .faq-item__q-text {
	color: var(--blue);
}

.faq-item__toggle {
	flex-shrink: 0;
	color: var(--storm);
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.6;
	transition:
		transform 0.25s,
		color 0.2s;
	margin-top: 2px;
}
.faq-item.is-open .faq-item__toggle {
	transform: rotate(180deg);
	color: var(--blue);
}

.faq-item__a {
	display: none;
	padding: 8px 0 24px 56px;
	font-family: var(--font-sans);
	font-size: 1.8rem;
	line-height: 1.85;
	color: var(--storm);
}
.faq-item__a strong {
	color: var(--ink);
	font-weight: 700;
}
.faq-item.is-open .faq-item__a {
	display: block;
}

/* ----------------------------------------------------------------------------------------------------------------------
     12 FEEDBACK CTA
  ---------------------------------------------------------------------------------------------------------------------- */
.feedback {
	background: var(--warm-dark);
	padding: 100px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.feedback::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 22px, rgba(255, 255, 255, 0.012) 22px, rgba(255, 255, 255, 0.012) 44px);
}

.feedback__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

.feedback__eyebrow {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--cloud);
	margin-bottom: 24px;
}

.feedback__headline {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(28px, 4.5vw, 52px);
	line-height: 1.05;
	color: var(--white);
	margin-bottom: 16px;
}

.feedback__sub {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.52);
	margin-bottom: 48px;
	line-height: 1.65;
}

.feedback__btns {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* ----------------------------------------------------------------------------------------------------------------------
     HERO LEFT PANE — Etymology mosaic (replaces geometric art)
     Designed composition:
       • Overline (tiny, tracked)
       • Greek display word — prominent but not oversized
       • One-line translation subtitle — restrained, elegant
       • Short Sun Warm rule
       • Mosaic grid fills remaining height
  ---------------------------------------------------------------------------------------------------------------------- */
.hero__mosaic-pane {
	display: flex;
	flex-direction: column;
	padding: 52px 24px 52px 60px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	/* Full height of the hero row */
	align-self: stretch;
}

/* Vertical hair-line divider between panes */
.hero__mosaic-pane::after {
	content: "";
	position: absolute;
	top: 52px;
	bottom: 52px;
	right: 0;
	width: 1px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.12) 80%, transparent);
}

/* ── Header group ─────────────────────────────────────── */
.hero__etym-header {
	margin-bottom: 18px;
	flex-shrink: 0;
}

.hero__etym-overline {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: rgba(157, 207, 252, 0.8); /* raised from 0.55 — 6.0:1 on deep, WCAG AA */
	margin-bottom: 10px;
	line-height: 1;
}

/* The Greek word — display type, refined, not huge */
.hero__etym-greek {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.08;
	color: var(--white);
	letter-spacing: 0.01em;
	margin-bottom: 5px;
}

/* English translation — small, italic, reads as caption */
.hero__etym-translation {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(0.9rem, 1vw, 1.6rem);
	line-height: 1.5;
	color: rgba(157, 207, 252, 0.72);
}
.hero__etym-translation em {
	color: var(--sun-warm);
	font-style: italic;
}

/* Short structural rule — Sun Warm, tight */
.hero__etym-rule {
	width: 36px;
	height: 2px;
	background: var(--sun-warm);
	margin-top: 12px;
}

/* ── Mosaic grid — explicit row heights, compact ─────── */
.hero__dm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(80px, auto) minmax(80px, auto) minmax(48px, auto);
	gap: 3px;
}

.hero__dm-cell {
	padding: 12px 28px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: visible;
}

/* Roman numerals — large, decorative, dominant */
.hero__dm-roman {
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 600;
	opacity: 0.22;
	line-height: 1;
	display: block;
	margin-bottom: 5px;
	color: currentColor;
}

.hero__dm-label {
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 3px;
	line-height: 1.3;
}

.hero__dm-desc {
	font-family: var(--font-serif);
	font-size: 10.5px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.4;
	opacity: 0.82; /* raised from 0.68 — worst case (blue cell) now 5.2:1, WCAG AA */
}

/* Cell color variants */
.hero__dm-blue {
	background: var(--blue);
	color: var(--white);
}
.hero__dm-night {
	background: var(--night);
	color: var(--white);
}
.hero__dm-parch {
	background: var(--parch-2);
	color: #2c2318;
}
.hero__dm-deep {
	background: var(--deep);
	color: var(--white);
}

/* Full-width V cell — Sun Warm accent bar */
.hero__dm-full {
	grid-column: 1 / 3;
	background: var(--sun-warm);
	color: var(--deep);
	padding: 12px 28px;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* V cell: roman + label inline — compact horizontal layout */
.hero__dm-full .hero__dm-roman {
	font-size: 22px;
	margin-bottom: 0;
	flex-shrink: 0;
	opacity: 0.25;
}

.hero__dm-full .hero__dm-label {
	font-size: 1.5rem;
	letter-spacing: 0.07em;
	margin-bottom: 0;
}

/* Hide desc in V cell — label alone is sufficient at this size */
.hero__dm-full .hero__dm-desc {
	display: none;
}

/* ----------------------------------------------------------------------------------------------------------------------
     CRAIG QUOTE BREAK — parchment divider between dark sections
  ---------------------------------------------------------------------------------------------------------------------- */
.craig-break {
	background: var(--parchment);
	padding: 72px 48px;
	position: relative;
}

.craig-break::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--sun-warm);
}

.craig-break::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--sun-warm);
}

.craig-break__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.craig-break__overline {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 24px;
}

.craig-break__quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(17px, 2.2vw, 24px);
	line-height: 1.7;
	color: #4a3f30;
	margin-bottom: 20px;
	border: none;
	padding: 0;
}

.craig-break__cite {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	color: #5a4028; /* was --parch-warm #A0845C (3.1:1) — #5A4028 = 8.1:1 on parchment, WCAG AA */
	letter-spacing: 0.05em;
	font-style: normal;
	display: block;
}

/* ----------------------------------------------------------------------------------------------------------------------
     IMPORTANT DATES — two-column list, matches FAQ layout
  ---------------------------------------------------------------------------------------------------------------------- */
.dates {
	background: var(--deep);
	padding: 88px 48px;
	position: relative;
	overflow: hidden;
}

.dates::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 22px, rgba(255, 255, 255, 0.013) 22px, rgba(255, 255, 255, 0.013) 44px);
	pointer-events: none;
}

.dates__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 88px;
	align-items: start;
	position: relative;
	z-index: 1;
}

.dates__sidebar-label {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--cloud);
	margin-bottom: 16px;
	line-height: 1;
}

.dates__sidebar-heading {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 3.4rem;
	line-height: 1.2;
	color: var(--white);
	margin-block: 0 16px;
}
.dates__sidebar-heading em {
	font-style: italic;
	color: var(--sun-warm);
}

.dates__sidebar-body {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 1.6rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.75;
}

/* Date list */
.date-list {
	list-style: none;
}

.date-item {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 32px;
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	align-items: start;
}
.date-item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.date-item__when {
	padding-top: 2px;
}

.date-item__month {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--cloud);
	display: block;
	font-weight: 300;
	margin-bottom: 2px;
	line-height: 1.5;
}

.date-item__date {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.6rem;
	color: var(--sun);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
	display: block;
}

.date-item__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 2rem;
	color: var(--white);
	margin-bottom: 5px;
	line-height: 1.3;
}

.date-item__desc {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 1.6rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.65;
}

.date-item__tag {
	display: inline-block;
	margin-block: 8px 0;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--deep);
	background: var(--cloud);
	padding: 3px 9px;
	line-height: 1.5;
}

/* ----------------------------------------------------------------------------------------------------------------------
     RESPONSIVE
  ---------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		align-content: start;
	}
	.hero__collage {
		display: none;
	}
	.hero__copy {
		padding: 72px 48px;
	}

	.hero__mosaic-pane {
		padding: 48px 32px;
	}
	.hero__mosaic-pane::after {
		display: none;
	}
	.portrait-grid {
		grid-template-columns: 1fr 1fr;
	}
	.portrait-card--wide {
		grid-column: 1 / 3;
		aspect-ratio: 16/6;
	}
	.portrait-card--wide .portrait-card__content {
		flex-direction: column;
		gap: 12px;
	}

	.tf-update-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.stats__inner {
		grid-template-columns: 1fr;
	}
	.stat-cell {
		border-right: none;
		border-bottom: 1px solid var(--parch-3);
	}
	.faqs__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.faqs__sidebar {
		position: static;
	}
	.dates__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.date-item {
		grid-template-columns: 80px 1fr;
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.section-nav__links > li > a,
	.section-nav__links > li > button {
		padding: 0 12px;
		font-size: 9px;
	}
	.portrait-grid {
		grid-template-columns: 1fr;
	}
	.portrait-card--wide {
		grid-column: 1;
		aspect-ratio: 16/9;
	}
	.tf-update-grid {
		grid-template-columns: 1fr;
	}
	.voices,
	.etymology__inner,
	.faqs,
	.stats,
	.mid-cta,
	.tf-updates,
	.toro-video__inner,
	.feature-quote {
		padding-left: 24px;
		padding-right: 24px;
	}
	.ccsu-mainnav__items {
		display: none;
	}
}

@media (max-width: 480px) {
	/* Mosaic cells: drop fixed row heights so content isn't clipped at narrow widths;
       hide descriptions to keep cells compact — labels alone carry the message */
	.hero__dm-grid {
		grid-template-rows: auto auto auto;
	}
	.hero__dm-cell {
		padding: 10px 14px;
		overflow: visible;
	}
	.hero__dm-desc {
		display: none;
	}
	.hero__dm-full {
		padding: 10px 14px;
	}
	.hero__mosaic-pane {
		padding: 36px 20px 28px;
	}
	.hero__copy {
		padding: 36px 20px 48px;
	}
}

/* --------------------------------------------------------------------------------------------------------------
     DOWNLOADS & RESOURCES
  -------------------------------------------------------------------------------------------------------------- */
.downloads {
	background: var(--night);
	border-top: 3px solid var(--sun-warm);
	border-bottom: 3px solid var(--sun-warm);
}

.downloads__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 72px 48px;
}

.downloads__eyebrow {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--sun);
	display: block;
	margin-bottom: 1rem;
	line-height: 1;
}

.downloads__title {
	font-family: var(--font-display);
	font-size: 3.4rem;
	font-weight: 900;
	color: var(--white);
	margin-block: 0 0.75rem;
	line-height: 1.1;
}

.downloads__sub {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 300;
	font-style: italic;
	color: rgba(255, 255, 255, 0.65);
	max-width: 540px;
	margin-bottom: 2.5rem;
	line-height: 1.7;
}

.downloads__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.download-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left: 3px solid var(--sun-warm);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition:
		background 0.2s,
		transform 0.2s;
	text-decoration: none;
}

.download-card:hover {
	background: rgba(255, 255, 255, 0.09);
	transform: translateY(-3px);
}

.download-card__type {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--sun);
	line-height: 1;
}

.download-card__icon {
	display: flex;
	align-items: center;
	gap: 8px;
}

.download-card__title {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--white);
	line-height: 1.35;
	flex: 1;
	margin-block: 0;
}

.download-card__desc {
	font-family: var(--font-serif);
	font-size: 1.4rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.6;
}

.download-card__meta {
	font-family: var(--font-sans);
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.35);
	text-transform: uppercase;
	line-height: 1;
	margin-block: 0;
}

.download-card__cta {
	font-family: var(--font-sans);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--sun-warm);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	transition:
		gap 0.2s,
		color 0.2s;
	line-height: 1;
}

.download-card:hover .download-card__cta {
	gap: 10px;
	color: var(--sun);
}

@media (max-width: 1024px) {
	.downloads__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.downloads__inner {
		padding: 48px 20px;
	}
	.downloads__grid {
		grid-template-columns: 1fr;
	}
}
main .container {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}
main::before,
main::after {
	content: none;
}
div.layout-breadcrumb.layout-breadcrumb {
	display: none;
}