/* ============================================================
   R/ Jeilani National School — public site
   Compact, reference-matched UI. Tokens first, no overrides.
   ============================================================ */

:root {
	/* Brand */
	--green:        #176B3A;
	--green-2:      #2E8B57;
	--gold:         #D6B63C;
	--white:        #FFFFFF;
	--ivory:        #FFFDF5;
	--sage:         #E8F1E8;
	--gold-light:   #F8F1D7;
	--ink:          #183A2B;
	--line:         #2E8B57;
	--muted:        #4C6655;

	/* Type */
	--font:   'Outfit', 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
	--serif:  var(--font);
	--display: var(--font);
	--body:   var(--font);
	--tamil:  'Noto Sans Tamil', var(--font);
	--sinh:   'Noto Sans Sinhala', var(--font);

	/* Geometry */
	--header-h: 52px;
	--gutter:   32px;
	--gap-lg:   24px;
	--gap-sm:   20px;
	--radius:   8px;
	--radius-sm: 6px;
	--wrap:     1240px;
	--home-wrap: 1608px;
	--shadow:   0 1px 3px rgba(24, 58, 43, .08);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body > * { flex-shrink: 0; }

main#main-content {
	flex: 1 0 auto;
}

/* ============================================================
   TEXT FADE-IN — smooth opacity+slide on page load (not hero)
   ============================================================ */
@keyframes textFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

main#main-content :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote, label, a.button, .section-eyebrow, .breadcrumb):not(.hero *) {
	opacity: 0;
	animation: textFadeIn 0.6s ease-out forwards;
}

/* ============================================================
   SECTION REVEAL — below-hero containers slide up step-by-step
   ============================================================ */
main#main-content .home-row,
main#main-content .about-body,
main#main-content .about-intro-section,
main#main-content .about-bottom-grid,
main#main-content .about-detail-section,
main#main-content .page-body,
main#main-content .archive-body,
main#main-content .contact-body,
main#main-content .search-body,
main#main-content .calendar-body,
main#main-content .detail-body,
main#main-content .section,
main#main-content .topic-section,
main#main-content .related-news,
main#main-content .calendar-month,
main#main-content .timeline-item {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

main#main-content .home-row.is-visible,
main#main-content .about-body.is-visible,
main#main-content .about-intro-section.is-visible,
main#main-content .about-bottom-grid.is-visible,
main#main-content .about-detail-section.is-visible,
main#main-content .page-body.is-visible,
main#main-content .archive-body.is-visible,
main#main-content .contact-body.is-visible,
main#main-content .search-body.is-visible,
main#main-content .calendar-body.is-visible,
main#main-content .detail-body.is-visible,
main#main-content .section.is-visible,
main#main-content .topic-section.is-visible,
main#main-content .related-news.is-visible,
main#main-content .calendar-month.is-visible,
main#main-content .timeline-item.is-visible,
main#main-content .site-footer.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	main#main-content :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote, label, a.button, .section-eyebrow, .breadcrumb):not(.hero *),
	main#main-content .home-row,
	main#main-content .about-body,
	main#main-content .about-intro-section,
	main#main-content .about-bottom-grid,
	main#main-content .about-detail-section,
	main#main-content .page-body,
	main#main-content .archive-body,
	main#main-content .contact-body,
	main#main-content .search-body,
	main#main-content .calendar-body,
	main#main-content .detail-body,
	main#main-content .section,
	main#main-content .topic-section,
	main#main-content .related-news,
	main#main-content .calendar-month,
	main#main-content .timeline-item,
	.site-footer {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* Footer reveal */
.site-footer {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-footer.is-visible {
	opacity: 1;
	transform: translateY(0);
}

img { max-width: 100%; height: auto; display: block; }
svg.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.12em; }
[hidden] { display: none !important; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-2); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--gold); color: var(--ink);
	padding: 8px 14px; font-weight: 600; border-radius: 0 0 6px 0;
}
.skip-link:focus,
.skip-link:focus-visible {
	left: 0;
	color: var(--ink);
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* Buttons + links */
.button {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--body); font-size: 13px; font-weight: 600;
	padding: 9px 16px; border-radius: var(--radius-sm);
	border: 1px solid transparent; cursor: pointer;
	text-align: center;
}
.button svg.icon { width: 15px; height: 15px; }
.button-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.button-gold:hover { background: #CBAB2F; color: var(--ink); }
.button-green { background: var(--green); color: #fff; border-color: var(--green); }
.button-green:hover { background: var(--green-2); color: #fff; }
.button-primary { background: var(--green); color: #fff; border-color: var(--green); }
.button-primary:hover { background: var(--green-2); color: #fff; }
.button-ghost { background: var(--white); color: var(--green); border-color: #CDE0D2; }
.button-ghost:hover { background: var(--sage); border-color: var(--green-2); color: var(--green); }

.text-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 600; color: var(--green);
	white-space: nowrap;
}
.text-link svg.icon { width: 15px; height: 15px; }
.text-link:hover { color: var(--ink); }

/* ============================================================
   HEADER — 52px, crest left, nav centre, search right
   ============================================================ */
.site-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--green);
	height: var(--header-h);
	--lock-pad: 0px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}
.scroll-progress-track {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(0px - var(--lock-pad, 0px));
	z-index: 5;
	height: 3px;
	background: rgba(255, 253, 245, .12);
	overflow: hidden;
	pointer-events: none;
}
.scroll-progress-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gold, #D6B63C);
	box-shadow: 0 0 8px rgba(214, 182, 60, .62);
	transform: scaleX(0);
	transform-origin: left center;
}
/* Flexible dock padding (set inline by site.js): while the flying crest locks in and
   is still taller than the bar, a green extension is drawn below the header — no
   layout shift — so the crest can poke out of the nav's bottom edge. */
body.has-flying-crest .site-header::after {
	content: '';
	position: absolute; left: 0; right: 0; top: 100%;
	height: var(--lock-pad);
	background: var(--green);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
	pointer-events: none;
	z-index: 0;
}

.header-shell {
	max-width: 1680px; margin-inline: auto;
	height: 100%;
	padding: 0 40px 0 max(40px, calc((100vw - 1680px) / 2 + 96px));
	display: flex; align-items: center; gap: 16px;
}

.brand { position: relative; z-index: 2; flex: 0 0 auto; display: block; }
.brand-crest {
	display: block;
	width: 64px; height: 64px;
	margin-top: -12px;               /* lets the crest overlap the header's lower edge */
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.brand-crest img { width: 100%; height: 100%; object-fit: contain; }

.site-nav { flex: 1; display: flex; align-items: center; justify-content: center; }
.site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; max-width: 100%; justify-content: center; row-gap: 2px; }
.site-nav a {
	display: inline-flex; align-items: center; gap: 4px;
	color: #fff; font-size: 12.377px; font-weight: 500;
	padding: 6px 9px; border-radius: 4px; white-space: normal; text-align: center;
}
/* Main topics only (not the dropdown): line-height normal uses each font's own
   metrics so the label is dead-centre in the bar at any size. */
.site-nav > ul > li > a { line-height: normal; }
/* Tamil/Sinhala Noto faces carry taller metrics; nudge back so the topic sits
   optically centred in the bar like the Latin one. */
html[lang="ta"] .site-nav > ul > li > a, html[lang="si"] .site-nav > ul > li > a { position: relative; top: -.5px; white-space: normal; line-height: 1.2; text-align: center; padding: 6px 8px; }

.site-nav a:hover { color: var(--gold); }
.site-nav a svg.icon { width: 11px; height: 11px; }
.site-nav .is-current > a { color: var(--gold); }
.site-nav .is-current > a { box-shadow: inset 0 -2px 0 var(--gold); }

.site-nav .has-children { position: relative; }
.site-nav .submenu-toggle {
	display: none; position: absolute; right: 0; top: 0;
	border: 0; background: transparent; color: var(--green);
	cursor: pointer; padding: 10px;
}
.submenu {
	display: flex; flex-direction: column; align-items: stretch;
	position: absolute; top: 100%; left: 0; z-index: 75;
	min-width: 210px; padding: 6px;
	background: #fff; border: 1px solid var(--sage);
	border-radius: 6px; box-shadow: 0 8px 20px rgba(24, 58, 43, .14);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	list-style: none;
}
.site-nav li:hover > .submenu,
.site-nav li:focus-within > .submenu,
.submenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { color: var(--ink); font-size: 12px; padding: 7px 10px; width: 100%; border-radius: 4px; }
.submenu a:hover { background: var(--sage); color: var(--green); }

.header-tools { display: flex; align-items: center; gap: 10px; }
.header-school-name { display: none; }

/* Language toggle — right corner of the navbar (EN / தமிழ் / සිංහල) */
.header-lang {
	display: flex; align-items: center; gap: 2px;
	padding: 2px; border-radius: 999px;
	background: rgba(255, 255, 255, .08);
}
.header-lang a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 30px; height: 26px; padding: 0 8px;
	color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
	border: 1px solid transparent; border-radius: 999px;
	white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.header-lang a:hover { background: rgba(255, 255, 255, .14); color: var(--gold); }
.header-lang a[aria-current] { background: var(--gold); border-color: var(--gold); color: var(--green); }
.menu-toggle {
	display: none; align-items: center; justify-content: center;
	width: 36px; height: 36px; color: #fff;
	background: transparent; border: 0; cursor: pointer;
}
.menu-toggle svg.icon { width: 22px; height: 22px; }
.search-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; color: #fff;
	background: transparent; border: 0; cursor: pointer; border-radius: 50%;
}
.search-toggle:hover { color: var(--gold); background: rgba(255, 255, 255, .08); }
.search-toggle svg.icon { width: 18px; height: 18px; }

/* ---- Mobile drawer chrome (hidden on desktop) ---- */
.site-nav-head,
.site-nav-head-actions,
.site-nav-foot { display: none; }
.nav-item-label { display: inline; }

/* Backdrop behind the slide-in drawer */
.nav-backdrop {
	position: fixed; inset: 0; z-index: 64;
	background: rgba(15, 35, 26, .5);
	opacity: 0; visibility: hidden;
	transition: opacity .22s ease, visibility .22s;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

.header-search {
	background: var(--green);
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding: 10px 0;
	position: absolute; left: 0; right: 0; top: var(--header-h);
}
.header-search form { display: flex; gap: 8px; }
.header-search input {
	flex: 1; min-width: 0;
	padding: 9px 12px; font-size: 13px;
	border: 1px solid var(--sage); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}

/* ============================================================
   HERO — ~289px, text left on a dark scrim, controls bottom-right
   ============================================================ */
.hero {
	position: relative;
	height: 289px; min-height: 289px;
	overflow: hidden;
	--hero-scale: 1;                /* driven by site.js: 1 → .5 as the crest locks in the navbar */
	/* Soft shadow for the hero copy. The background picture is busy and
	   colourful, so the glyphs need their own contrast. It scales with the
	   copy, so it keeps its proportion while the text shrinks in the flight. */
	--hero-text-shadow:
		0 calc(2px * var(--hero-scale, 1)) calc(14px * var(--hero-scale, 1)) rgba(3, 26, 13, .55),
		0 calc(1px * var(--hero-scale, 1)) calc(3px * var(--hero-scale, 1)) rgba(3, 26, 13, .45);
	background: linear-gradient(100deg, #2E7A4E 0%, #439769 60%, var(--sage) 130%);
}
.hero-carousel { position: absolute; inset: 0; }
.hero-slide {
	position: absolute; inset: 0;
	background-image: var(--hero-bg-desktop, none);
	background-size: cover; background-position: center 30%;
	opacity: 0; transition: opacity .6s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide.is-empty {
	opacity: 1;
	background: conic-gradient(from 90deg at 70% 40%, #2a8a54, #3a9a65, #4aaa74, #2a8a54);
}
.hero-scrim {
	position: absolute; inset: 0; z-index: 1;
	/* The scrim carries the hero copy: it stays dense under the text on the
	   left and only thins out where the picture should still be seen. */
	background: linear-gradient(105deg,
		rgba(10, 48, 26, .64) 0%,
		rgba(12, 58, 31, .58) 24%,
		rgba(14, 68, 36, .405) 44%,
		rgba(14, 68, 36, .189) 62%,
		rgba(0, 0, 0, 0) 80%);
}
.hero-inner {
	position: relative; z-index: 2;
	height: 100%;
	/* The hero copy keeps a constant distance from the top edge of the hero for
	   the whole flight. 58px puts it just below the crest once that has locked
	   into the navbar, so the copy never drifts up into the navbar. */
	display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
	padding-top: 58px;
	padding-inline: 6%;
	/* 800px keeps the school name on ONE line on every desktop width: the
	   content box is max-width minus 12% of the viewport, so a narrower
	   max-width made the name wrap on wide screens (and the copy then no
	   longer fitted the hero). */
	max-width: 800px;
	text-align: left;
}
.hero-copy {
	display: flex; flex-direction: column; align-items: flex-start;
	/* No permanent will-change: a permanently composited layer is rasterised once
	   and can soften the glyph edges. The slide is pixel-snapped in JS instead. */
}

/* Hero copy entrance — very slow, smooth staggered wipe-in on first load. */
.hero-copy > * {
	opacity: 0;
	animation: hero-wipe-in 2.6s cubic-bezier(.22, .61, .36, 1) both;
}
.hero-kicker  { animation-delay: .40s; }
.hero-title   { animation-delay: .95s; }
.hero-tagline { animation-delay: 1.55s; }
.hero-cta     { animation-delay: 2.10s; }

@keyframes hero-wipe-in {
	0%   { opacity: 0; transform: translateY(18px); clip-path: inset(0 100% 0 0); }
	65%  { clip-path: inset(0 0 0 0); }
	100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-copy > * { opacity: 1; transform: none; clip-path: none; animation: none; }
	.hero-slide { transition: none; }
}

/* Flying crest — starts large over the hero, docks into the navbar on scroll.
   Enabled on all screen sizes via body.has-flying-crest (set by site.js).
   Desktop uses wheel pinning; mobile uses scroll-driven flight. */
.fly-crest { display: none; }
body.has-flying-crest .fly-crest {
	display: block;
	position: fixed; top: 0; left: 0; z-index: 70;
	width: 200px; height: 200px;      /* real size is set by site.js */
	transform-origin: top left;
	pointer-events: auto;
	cursor: pointer;
	/* No permanent will-change: a pinned composited layer is rasterised once and
	   then GPU-scaled, which visibly softens the crest once it is parked. site.js
	   drops it to native size (no scale) when docked instead. */
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .4));
	opacity: 0;
	transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1);
}
body.has-flying-crest .fly-crest.is-ready { opacity: 1; }
/* While the pinned intro is running the finger drives the crest, never the
   document. `pan-y` (not `none`) keeps the browser's own vertical pull
   gesture available, so a downward pull at the very top can still trigger
   native pull-to-refresh while upward swipes remain under our control. */
body.has-flying-crest.is-hero-intro { touch-action: pan-y; }
.fly-crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The navbar crest stays as the docking slot but is hidden while the flyer exists. */
body.has-flying-crest .brand-crest img { visibility: hidden; }
.hero-kicker {
	margin: 0 0 calc(2px * var(--hero-scale, 1));
	font-family: var(--serif); font-style: italic; font-size: calc(26px * var(--hero-scale, 1));
	color: var(--gold);
	text-shadow: var(--hero-text-shadow);
}
.hero-title {
	margin: 0 0 calc(4px * var(--hero-scale, 1));
	font-family: var(--display);
	font-size: calc(46px * var(--hero-scale, 1)); line-height: 1.1; letter-spacing: calc(.2px * var(--hero-scale, 1)); color: #fff;
	text-shadow: var(--hero-text-shadow);
}
.hero-tagline {
	margin: 0 0 calc(14px * var(--hero-scale, 1));
	max-width: none;                /* keep the motto on one line on desktop */
	font-family: var(--display); font-style: italic; font-size: calc(21px * var(--hero-scale, 1)); line-height: 1.4;
	color: #EAF4EE;
	text-shadow: var(--hero-text-shadow);
}
/* The CTA scales with the rest of the hero copy, so the button shrinks with
   its label instead of keeping an empty box around tiny text. */
.hero-cta {
	min-width: calc(196px * var(--hero-scale, 1));
	height: calc(42px * var(--hero-scale, 1));
	padding-inline: calc(16px * var(--hero-scale, 1));
	gap: calc(8px * var(--hero-scale, 1));
	border-radius: calc(var(--radius-sm) * var(--hero-scale, 1));
	justify-content: center;
	font-size: calc(13.5px * var(--hero-scale, 1));
	/* Lift the button off the busy picture behind it. */
	box-shadow: 0 calc(4px * var(--hero-scale, 1)) calc(14px * var(--hero-scale, 1)) rgba(3, 26, 13, .45);
}
.hero-cta svg.icon { width: calc(15px * var(--hero-scale, 1)); height: calc(15px * var(--hero-scale, 1)); }

/* Slider controls — ivory circular arrows at the hero edges (vertically
   centred) and slide pills at the bottom centre. The container is a
   click-through overlay; only the buttons themselves take pointer events. */
.hero-controls {
	position: absolute; inset: 0; z-index: 3;
	pointer-events: none;
}
.hero-arrow {
	position: absolute; top: 50%; transform: translateY(var(--arrow-shift, -50%));
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: transparent;
	color: var(--green, #176B3A);
	cursor: pointer; pointer-events: auto;
	transition: color .2s ease, top .35s cubic-bezier(.22, .61, .36, 1);
}
/* The visible circle is half-size; the button keeps its full hit area. */
.hero-arrow::before {
	content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 23px; height: 23px; border-radius: 50%;
	border: 1px solid rgba(23, 107, 58, .20);
	background: var(--ivory, #FFFDF5);
	box-shadow: 0 4px 12px rgba(4, 31, 16, .28), 0 1px 2px rgba(4, 31, 16, .22);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hero-prev { left: clamp(8px, calc(6% - 54px), 30px); }
.hero-next { right: clamp(8px, calc(6% - 54px), 30px); }
/* Once the crest has docked, the hero copy shrinks into the top-left corner.
   The arrows settle into the clear band below it so they never sit on the
   school name, motto or CTA. Before the lock they stay vertically centred. */
@media (min-width: 901px) {
	.hero.is-hero-locked .hero-arrow { top: 75%; }
}
.hero-arrow svg.icon { position: relative; z-index: 1; width: 11px; height: 11px; }
.hero-arrow:hover { color: #fff; }
.hero-arrow:hover::before {
	background: var(--green, #176B3A); border-color: var(--green, #176B3A);
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 6px 16px rgba(4, 31, 16, .36);
}
.hero-arrow:active::before { transform: translate(-50%, -50%) scale(.97); }
.hero-arrow:focus-visible { outline: none; }
.hero-arrow:focus-visible::before,
.hero-dot:focus-visible { outline: 3px solid var(--gold, #D6B63C); outline-offset: 3px; }

.hero-dots {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
	display: flex; gap: 0; pointer-events: auto;
}
/* 44x44 tap target; the visible pill is drawn by ::before so the hit area
   stays accessible without making the indicator look heavy. */
.hero-dot {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; cursor: pointer; pointer-events: auto;
}
.hero-dot::before {
	content: ''; width: 8px; height: 8px; border-radius: 999px;
	background: rgba(255, 253, 245, .58);
	box-shadow: 0 1px 4px rgba(3, 26, 13, .55), 0 0 0 1px rgba(3, 26, 13, .16);
	transition: width .28s cubic-bezier(.22, .61, .36, 1), background-color .28s ease, box-shadow .28s ease;
}
.hero-dot:hover::before { background: rgba(255, 253, 245, .85); }
.hero-dot.is-active::before {
	width: 26px; background: var(--ivory, #FFFDF5);
	box-shadow: 0 2px 10px rgba(3, 26, 13, .5), 0 0 0 1px rgba(23, 107, 58, .14);
}
.hero-dot.is-active:hover::before { background: #fff; }

/* Keep the controls still for users who ask for reduced motion (this block
   follows the base rules above so it wins on source order). */
@media (prefers-reduced-motion: reduce) {
	.hero-arrow { transition: none; }
	.hero-arrow::before, .hero-dot::before { transition: none; }
	.hero-arrow:hover::before, .hero-arrow:active::before { transform: translate(-50%, -50%); }
}

/* ============================================================
   HOMEPAGE ROWS (32px gutters, fixed compact heights desktop)
   ============================================================ */
.home-row { padding-inline: var(--gutter); }
.home-row > div { max-width: var(--home-wrap); margin-inline: auto; }

/* Main information row — About 624 / Glance 458 / Principal 458, height ~179px */
.info-grid {
	display: grid;
	grid-template-columns: minmax(0, 624fr) minmax(0, 458fr) minmax(0, 458fr);
	gap: var(--gap-lg);
	margin-top: 16px;
}
.home-card {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid #DCE9DE;
	box-shadow: var(--shadow);
	background: #fff;
}

/* Home-page polish: gentle lift + shadow on hover, image zoom. */
.home-card {
	transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.home-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(24, 58, 43, .12);
	border-color: #B8D2BE;
}
.home-card .about-photo img,
.home-card .principal-illustration img,
.panel .hp-thumb img {
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.home-card:hover .about-photo img,
.panel:hover .hp-thumb img {
	transform: scale(1.04);
}
.panel {
	transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.panel:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(24, 58, 43, .1);
}
.academic-card {
	transition: transform .22s ease, box-shadow .22s ease;
}
.academic-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(24, 58, 43, .12);
}
.feature-card {
	transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.gold-divider { display: block; width: 42px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 0%, var(--green-2) 100%); margin: 8px 0 10px; }

/* About card: text 45% / photo 55% */
.about-card { display: grid; grid-template-columns: 45fr 55fr; gap: 0; height: 179px; }
.about-copy { padding: 18px 16px 14px 20px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.about-copy h2 { font-size: 17px; margin: 0; }
.about-copy p { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.about-copy .text-link { margin-top: auto; }
.about-photo { margin: 0; position: relative; background: var(--sage); overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Smooth left-edge fade so the photo blends into the text column (one container). */
.about-photo::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .72) 14%, rgba(255, 255, 255, .18) 34%, rgba(255, 255, 255, 0) 52%);
}
.about-photo .media-frame-note { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--green-2); font-size: 11px; text-align: center; padding: 8px; }
.about-photo .media-frame-note svg.icon { width: 30px; height: 30px; opacity: .7; }

/* School at a Glance */
.glance-card { min-height: 179px; height: auto; padding: 16px 12px 12px; background: var(--sage); }
.glance-card h2 { font-size: 17px; margin: 0; }
.glance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(100% - 44px); align-items: stretch; }
.glance-item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 4px; text-align: center; padding: 4px 6px;
	border-left: 1px solid rgba(46, 139, 87, .28);
}
.glance-item:first-child { border-left: 0; }
.glance-value { font-size: clamp(16px, 1.25vw, 19px); font-weight: 700; line-height: 1.2; color: var(--green); word-break: break-word; }
.glance-label { font-size: clamp(10px, .75vw, 11px); text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }

/* Principal's Message */
.principal-card { display: grid; grid-template-columns: 70fr 30fr; gap: 0; height: 179px; background: var(--ivory); }
.principal-body { padding: 16px 8px 12px 20px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.principal-body h2 { font-size: 17px; margin: 0; }
.principal-body blockquote {
	margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 12px; line-height: 1.45;
	color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.principal-name { margin: auto 0 0; font-size: 13px; font-weight: 700; }
.principal-role { margin: 0; font-size: 11px; color: var(--muted); }
.principal-illustration { display: flex; align-items: center; justify-content: center; }
.principal-building { width: 86px; height: 86px; stroke: rgba(46, 139, 87, .4) !important; stroke-width: 1.2 !important; }

/* Principal's photo: same treatment as About → Principal's Message */
.principal-card.has-principal-photo { grid-template-columns: minmax(0, 1fr) 38%; }
.principal-photo { position: relative; margin: 0; padding: 9px 10px 9px 4px; background: var(--ivory, #FFFDF5); }
.principal-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 6px; }

/* ---- Second row: Academics 50% / News 25% / Events 25%, height ~179px ---- */
.affairs-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--gap-lg);
	margin-top: 15px;
}
.panel {
	border-radius: var(--radius);
	border: 1px solid #DCE9DE;
	background: #fff;
	padding: 12px 14px 14px;
	height: 179px;
	box-shadow: var(--shadow);
	display: flex; flex-direction: column;
}
.panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-bottom: 7px;
}
.panel-title { display: flex; align-items: center; gap: 8px; }
.panel-title h2 { font-size: 15px; margin: 0; }

/* Academics mini cards */
.academic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1; }
.academic-card {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	background: var(--sage); border-radius: 7px;
	color: var(--green); text-align: center; padding: 10px 8px;
	min-height: 0;
}
.academic-card:hover { background: var(--green); color: #fff; }
.academic-card.is-gold { background: var(--gold-light); color: #8A6D1A; }
.academic-card.is-gold:hover { background: var(--gold); color: var(--ink); }
.academic-label { font-size: clamp(12px, 1vw, 14px); font-weight: 700; line-height: 1.3; text-wrap: balance; }

/* News & Event compact rows */
.hp-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.hp-row {
	display: flex; align-items: center; gap: 9px;
	padding: 4px 0; border-bottom: 1px solid #E7EFE8;
}
.hp-list li:last-child .hp-row { border-bottom: 0; }
.hp-row:hover { color: inherit; }
.hp-row > * { min-width: 0; }
.hp-thumb {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 32px; width: 32px; height: 32px;
	border-radius: 7px; background: var(--sage); color: var(--green-2);
	overflow: hidden;
}
.hp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-thumb svg.icon { width: 15px; height: 15px; }
.hp-body { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.hp-body strong {
	display: block; font-size: 12px; font-weight: 600; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.hp-body time, .hp-meta { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.hp-meta svg.icon, .hp-body time svg.icon { width: 11px; height: 11px; }
.hp-date {
	flex: 0 0 34px; width: 34px; height: 36px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--sage); color: var(--green); border-radius: 7px; line-height: 1.05;
}
.hp-date strong { font-size: 14px; }
.hp-date small { font-size: 9px; text-transform: uppercase; }
.hp-row.is-placeholder { opacity: .75; }
.hp-row.is-placeholder .hp-body strong { font-style: italic; font-weight: 500; color: var(--muted); }

/* ---- Feature cards — title + image preview + Explore (stacks vertically) ---- */
.feature-grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: var(--gap-sm);
	margin-top: 15px;
	margin-bottom: 12px;
	align-items: stretch;
}
.feature-card {
	display: block; position: relative; overflow: hidden;
	height: 200px; border-radius: var(--radius);
	border: 1px solid transparent;
	color: #fff;
	transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card.is-green { background: linear-gradient(135deg, #176B3A 0%, #2E8B57 55%, #1F7A45 100%); border-color: #2E8B57; }
.feature-card.is-gold  { background: linear-gradient(135deg, #176B3A 0%, #2E8B57 55%, #1F7A45 100%); border-color: #2E8B57; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(24, 58, 43, .18); }
/* Full-bleed image behind everything */
.feature-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.feature-media img,
.feature-tile {
	display: block; width: 100%; height: 100%; object-fit: cover;
	filter: brightness(1.05) contrast(1.05) saturate(1.05);
	transition: transform .45s ease, filter .45s ease;
}
.feature-card:hover .feature-media img { transform: scale(1.06); filter: brightness(1.1) contrast(1.08) saturate(1.1); }
.feature-tile.is-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--sage); color: var(--green);
}
.feature-tile.is-placeholder svg.icon { width: 28px; height: 28px; opacity: .55; }
/* Gradient scrim so text stays readable over any photo */
.feature-card::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .20) 45%, rgba(0, 0, 0, .55) 100%);
}
.feature-card.is-green::before { background: linear-gradient(180deg, rgba(23, 107, 58, .06) 0%, rgba(23, 107, 58, .32) 55%, rgba(15, 60, 35, .72) 100%); }
.feature-card.is-gold::before  { background: linear-gradient(180deg, rgba(23, 107, 58, .06) 0%, rgba(23, 107, 58, .32) 55%, rgba(15, 60, 35, .72) 100%); }
/* Title + Explore overlaid on top */
.feature-main { position: absolute; top: 14px; left: 16px; right: 16px; z-index: 2; color: #fff; }
.feature-body { min-width: 0; }
.feature-body strong { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.2; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); letter-spacing: .2px; position: relative; display: inline-block; }
.feature-body strong::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 0; height: 8px; z-index: -1; border-radius: 4px; background: linear-gradient(90deg, rgba(46, 139, 87, .55) 0%, rgba(214, 182, 60, .45) 100%); }
.feature-body strong::after { content: ''; display: block; width: 34px; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 0%, var(--green-2) 100%); }
.feature-body strong::after { content: ''; display: block; width: 38px; height: 3px; margin-top: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 0%, var(--green-2) 100%); }
.feature-link { position: absolute; bottom: 12px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(4px); font-size: 12px; font-weight: 700; color: #fff; }
.feature-link svg.icon { width: 12px; height: 12px; }

/* ============================================================
   FOOTER — primary green, ~110px, four areas
   ============================================================ */
.site-footer { background: var(--green); color: #EAF4EE; }
.footer-top {
	max-width: 1680px; margin-inline: auto;
	display: grid;
	grid-template-columns: 96px minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr);
	gap: 24px; align-items: center;
	padding: 14px 40px;
}
.footer-crest-col { display: flex; align-items: center; }
.footer-crest { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.footer-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: .6px; }
.footer-quicklinks { display: flex; flex-wrap: wrap; gap: 6px 0; }
.footer-quicklinks a { font-size: 11px; color: #DCEBE1; padding: 2px 10px; border-right: 1px solid rgba(214, 182, 60, .4); }
.footer-quicklinks a:last-child { border-right: 0; }
.footer-quicklinks a:hover { color: var(--gold); }
.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #DCEBE1; line-height: 1.5; }
.footer-contact svg.icon { width: 13px; height: 13px; color: var(--gold); flex: 0 0 auto; }
.footer-follow-col { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.social-row { display: flex; gap: 6px; }
.social-row a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: rgba(255, 255, 255, .1); color: #fff;
}
.social-row a:hover { background: var(--gold); color: var(--ink); }
.social-row svg.icon { width: 14px; height: 14px; }
.footer-lang { display: flex; gap: 4px; }
.footer-lang a {
	font-size: 10.5px; color: #BBD6C4; border: 1px solid rgba(255, 255, 255, .25);
	padding: 2px 8px; border-radius: 20px; line-height: 1.4;
}
.footer-lang a[aria-current] { border-color: var(--gold); color: var(--gold); }
.footer-bottom {
	display: flex; justify-content: center; align-items: center;
	gap: 12px; flex-wrap: wrap;
	padding: 8px 40px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 11px; color: #BBD6C4;
	text-align: center;
}
.footer-copy {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}

/* ============================================================
   INNER PAGES — page hero, content, cards, forms
   ============================================================ */
.page-hero {
	background: linear-gradient(120deg, var(--green) 0%, var(--green-2) 100%);
	color: #fff; padding: 34px 0 30px;
	border-bottom: 3px solid var(--gold);
}
.page-hero .wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.page-hero .eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.page-hero h1 { color: #fff; font-size: 34px; margin: 0; font-family: var(--display); }
/* The docked crest hangs ~50px below the navbar on every page, so lift the inner
   page hero clear of it (desktop only — that is where the crest is shown). */
body.has-flying-crest .page-hero { padding-top: 58px; }

/* Breadcrumb inside page-hero (and standalone) */
.breadcrumb ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	list-style: none; margin: 0 0 6px; padding: 0;
	font-size: 12px; color: rgba(255, 255, 255, .8);
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before { content: '/'; margin-right: 6px; color: var(--gold); opacity: .7; }
.breadcrumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current='page'] { color: #fff; font-weight: 500; }
.breadcrumb [aria-current='page']::before { color: var(--gold); }

.section { padding: 40px 0 34px; }

/* ============================================================
   SINGLE-PAGE TOPIC BAR — child topics of a nav group rendered
   as one page: a sticky strip of anchor tabs under the navbar.
   ============================================================ */
.topic-bar {
	position: sticky; top: var(--nav-h, var(--header-h)); z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--sage);
	box-shadow: 0 2px 6px rgba(24, 58, 43, .07);
}
.topic-bar-inner {
	display: flex; gap: 4px;
	overflow-x: auto; scrollbar-width: thin;
	-ms-overflow-style: none;
}
.topic-bar-inner::-webkit-scrollbar { display: none; }
.topic-bar a {
	display: inline-flex; align-items: center;
	padding: 11px 13px;
	color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.topic-bar a:hover { color: var(--green-2); border-bottom-color: var(--sage); }
.topic-bar a.is-active { color: var(--green); border-bottom-color: var(--gold); }

.topic-section { padding: 30px 0; border-top: 1px solid var(--sage); }
.topic-section:first-of-type { border-top: 0; padding-top: 6px; }
.topic-section h2 {
	font-family: var(--serif); font-size: 21px; margin: 0 0 12px; color: var(--green);
}
.topic-section > :last-child { margin-bottom: 0; }
.section.is-sage { background: var(--sage); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-head-title { display: flex; align-items: center; gap: 10px; }
.section-head-title h2 { margin: 0; font-size: 21px; }
.section-head-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 8px;
	background: var(--white); color: var(--green); box-shadow: var(--shadow);
}
.section-head-icon svg.icon { width: 17px; height: 17px; }

.eyebrow {
	margin: 0 0 6px; font-size: 11px; font-weight: 600;
	letter-spacing: 1px; text-transform: uppercase; color: var(--green-2);
}

/* Content layout */
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.content-narrow { max-width: 760px; }
.featured-media { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/8; background: var(--sage); }
.featured-media img { width: 100%; height: 100%; object-fit: cover; }

.richtext { font-size: 15px; line-height: 1.75; color: var(--ink); }
.richtext p { margin: 0 0 1em; }
.richtext h2, .richtext h3, .richtext h4 { margin-top: 1.4em; }
.richtext ul, .richtext ol { padding-left: 1.3em; }
.richtext img { border-radius: var(--radius); margin: .5em 0; }
.richtext blockquote {
	margin: 1em 0; padding: 12px 16px; border-left: 4px solid var(--gold);
	background: var(--ivory); border-radius: 0 6px 6px 0; font-family: var(--serif); font-style: italic;
}

.archive-intro { max-width: 72ch; margin: 0 0 28px; overflow-wrap: break-word; }
.archive-intro > :last-child { margin-bottom: 0; }

.meta-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--muted); }
.meta-list svg.icon { width: 13px; height: 13px; color: var(--green-2); }
.meta-list li { display: inline-flex; align-items: center; gap: 5px; }

.back-link { margin-top: 8px; }

/* Cards (archives) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.staff-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.content-card {
	background: #fff; border: 1px solid #DCE9DE; border-radius: var(--radius);
	overflow: hidden; box-shadow: var(--shadow);
	display: flex; flex-direction: column;
}
.content-card:hover { border-color: var(--green-2); }
.card-media { display: block; aspect-ratio: 16/9; background: var(--sage); overflow: hidden; position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-fallback {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--green-2);
}
.card-media-fallback svg.icon { width: 38px; height: 38px; opacity: .7; }
.album-count {
	position: absolute; right: 10px; bottom: 10px;
	background: rgba(24, 58, 43, .78); color: #fff; font-size: 11px;
	padding: 3px 8px; border-radius: 20px;
}
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card-body h2, .card-body h3 { font-size: 17px; margin: 0 0 6px; }
.card-body p { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.card-body .text-link { margin-top: auto; }
.event-badge {
	position: absolute; left: 12px; bottom: 12px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 52px; height: 56px; background: var(--sage); color: var(--green);
	border-radius: 8px; line-height: 1.1; box-shadow: var(--shadow);
}
.event-badge strong { font-size: 19px; }
.event-badge span { font-size: 10px; text-transform: uppercase; }
.event-badge.large { width: 60px; height: 64px; }

.pill {
	display: inline-block; align-self: flex-start;
	background: var(--gold-light); color: #8A6D1A; font-size: 11px; font-weight: 600;
	padding: 2px 10px; border-radius: 20px; margin-bottom: 10px;
}

/* Archive toolbar */
.archive-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	margin-bottom: 22px; padding: 12px 14px;
	background: var(--ivory); border: 1px solid #EFE7CE; border-radius: var(--radius);
}
.filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-tab {
	display: inline-block; font-size: 12px; font-weight: 500; color: var(--ink);
	padding: 5px 12px; border-radius: 20px; border: 1px solid #DCE9DE; background: #fff;
}
.filter-tab:hover { border-color: var(--green-2); color: var(--green); }
.filter-tab.is-active, .filter-tab.is-current { background: var(--green); border-color: var(--green); color: #fff; }
.archive-search { display: flex; gap: 8px; }
.archive-search input {
	padding: 8px 12px; font-size: 13px; border: 1px solid #DCE9DE;
	border-radius: var(--radius-sm); background: #fff;
}

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; }
.pagination a, .pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px; padding: 0 8px;
	border: 1px solid #DCE9DE; border-radius: 6px; font-size: 12.5px; color: var(--ink);
}
.pagination a:hover { border-color: var(--green-2); color: var(--green); }
.pagination .is-current { background: var(--green); border-color: var(--green); color: #fff; }
.pagination .page-ellipsis { border-color: transparent; }

/* Related panel */
.related-panel {
	background: var(--sage); border-radius: var(--radius); padding: 16px;
	position: sticky; top: calc(var(--header-h) + 16px);
}
.related-panel h2 { font-size: 15px; margin: 0 0 10px; }
.related-news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.related-news li { padding: 8px 0; border-bottom: 1px solid #CDE0D2; }
.related-news li:last-child { border-bottom: 0; }
.related-news a { font-size: 13px; font-weight: 600; line-height: 1.35; display: block; }
.related-news time { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Search */
.search-page { max-width: 760px; }
.search-count { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.search-results li { background: #fff; border: 1px solid #DCE9DE; border-radius: var(--radius); padding: 12px 14px; }
.search-results a { font-family: var(--serif); font-size: 16px; font-weight: 600; display: block; margin-bottom: 3px; }
.result-type { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--green-2); }

/* Empty state & notices */
.empty-state {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 8px; padding: 48px 20px;
	color: var(--muted); background: var(--ivory);
	border: 1px dashed #DECF96; border-radius: var(--radius);
}
.empty-state svg.icon { width: 42px; height: 42px; color: var(--gold); opacity: .8; }
.empty-state h2 { margin: 0; font-size: 18px; }
.empty-state p { margin: 0; font-size: 13px; max-width: 460px; }
.empty-state.small { padding: 18px; }

.notice, .flash {
	background: var(--gold-light); border: 1px solid #EFE2BC;
	color: var(--ink); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px;
	margin-bottom: 18px;
}
.flash-success { background: var(--sage); border-color: #C9E0CE; }
.flash-error { background: #FBE4E2; border-color: #F2C4BF; color: #7A241D; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink); }
.contact-list svg.icon { width: 18px; height: 18px; color: var(--green-2); flex: 0 0 auto; margin-top: 2px; }
.map-frame {
	aspect-ratio: 4/3; border-radius: var(--radius);
	background: var(--sage); border: 1px solid #DCE9DE;
	display: flex; align-items: center; justify-content: center;
	color: var(--green-2); font-size: 12px; text-align: center; padding: 12px;
	margin-top: 10px;
}
.map-frame svg.icon { width: 30px; height: 30px; margin-bottom: 6px; color: var(--green-2); }

.contact-form-wrap { background: #fff; border: 1px solid #DCE9DE; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; }
.field input, .field textarea, .contact-form input, .contact-form textarea {
	padding: 9px 12px; font-size: 13px; font-family: var(--body);
	border: 1px solid #D3E0D6; border-radius: var(--radius-sm); background: #fff; color: var(--ink);
	width: 100%;
}
.field textarea, .contact-form textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 11.5px; color: var(--muted); margin: 0; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-item { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sage); aspect-ratio: 4/3; position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-trigger {
	display: block; width: 100%; height: 100%; padding: 0; border: 0;
	background: none; cursor: zoom-in; overflow: hidden;
}
.gallery-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Lightbox */
.lightbox {
	position: fixed; inset: 0; z-index: 2000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(10, 24, 17, .92);
	padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: min(1100px, 92vw); max-height: 84vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-img { max-width: 100%; max-height: 76vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); background: #000; }
.lightbox-caption { margin-top: 12px; color: #fff; font-size: 14px; text-align: center; }
.lightbox-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: 13px; margin: 0; }
.lightbox button {
	position: absolute; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer;
	transition: background .15s;
}
.lightbox button:hover { background: rgba(255,255,255,.24); }
.lightbox button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lightbox-close { top: 16px; right: 18px; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; line-height: 1; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border-radius: var(--radius); font-size: 22px; }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }

/* Downloads */
.download-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.download-row {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px; background: #fff; border: 1px solid #DCE9DE;
	border-radius: var(--radius); margin-bottom: 12px;
}
.download-icon {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px;
	background: var(--sage); color: var(--green);
}
.download-icon svg.icon { width: 20px; height: 20px; }
.download-info { flex: 1; min-width: 0; }
.download-info strong { display: block; font-family: var(--serif); font-size: 15px; margin-bottom: 2px; }
.download-meta { font-size: 11.5px; color: var(--muted); }
.download-pending { font-size: 12px; color: var(--muted); font-style: italic; }

/* Staff */
.staff-card { text-align: center; }
.staff-photo { aspect-ratio: 1/1; background: var(--sage); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-photo-fallback { color: var(--green-2); display: flex; }
.staff-photo-fallback svg.icon { width: 56px; height: 56px; opacity: .7; }
.staff-card h3 { margin: 0 0 2px; font-size: 16px; }
.staff-role { font-size: 12px; color: var(--green-2); font-weight: 600; margin: 0 0 2px; }
.staff-dept { font-size: 12px; color: var(--muted); margin: 0 0 10px; }

/* Calendar */
.calendar-month { margin-bottom: 26px; }
.calendar-month h2 { font-size: 18px; border-left: 4px solid var(--gold); padding-left: 10px; }
.calendar-list { list-style: none; margin: 12px 0 0; padding: 0; }
.calendar-list li {
	display: flex; align-items: center; gap: 14px;
	border-bottom: 1px solid #E2EBE4; padding: 10px 0;
}
.calendar-date {
	flex: 0 0 54px; height: 58px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--sage); color: var(--green); border-radius: 8px; line-height: 1.1;
}
.calendar-date strong { font-size: 20px; }
.calendar-date span { font-size: 10px; text-transform: uppercase; }
.calendar-venue { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.calendar-venue svg.icon { width: 12px; height: 12px; }

/* Not found */
.not-found { text-align: center; padding: 60px 20px; }
.not-found h1 { font-size: 64px; color: var(--green-2); margin: 0; }
.not-found p { color: var(--muted); max-width: 480px; margin: 8px auto 18px; }

.muted { color: var(--muted); }
.notice { font-size: 12.5px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1380px) {
	.header-shell { padding-left: max(24px, calc((100vw - 1680px) / 2 + 40px)); }
	.brand-crest { width: 58px; height: 58px; margin-top: -9px; }
	.site-nav a { font-size: 11.839px; padding: 6px 7px; }
	.hero-title { font-size: calc(42px * var(--hero-scale, 1)); }
	.hero-kicker { font-size: calc(23px * var(--hero-scale, 1)); }
}

/* Tighter desktop bar in the narrow window before the drawer takes over,
   so all items still fit on a single row. */
@media (min-width: 1201px) and (max-width: 1260px) {
	.site-nav a { padding: 6px 4px; }
	.site-nav > ul { gap: 1px; }
}

@media (max-width: 1200px) {
	/* Collapse to hamburger before items crowd */
	.menu-toggle { display: inline-flex; }

	/* Crest (left) / menu + search (right corner) */
	.header-shell { justify-content: space-between; }

	/* Language switcher now lives in the drawer footer only */
	.header-lang { display: none; }

	/* Slide-in drawer from the right — deep-green panel.
	   Full-bleed on phones; capped as a side drawer on wider screens. */
	.site-nav {
		display: flex; flex-direction: column;
		align-items: stretch; justify-content: flex-start;
		position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 66;
		width: min(75%, 420px);
		max-width: 420px;
		height: 100vh; height: 100dvh;   /* dvh fallback for mobile toolbars */
		background: linear-gradient(180deg, #176B3A 0%, #075C36 100%);
		color: #fff;
		box-shadow: -18px 0 44px rgba(15, 35, 26, .38);
		overflow: hidden; overscroll-behavior: contain;
		opacity: 1; visibility: hidden;
		transform: translateX(100%);
		transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility .26s;
		margin-left: 0;
	}
	.site-nav.is-open { visibility: visible; transform: translateX(0); }

	/* Drawer header: crest (left) + search & close (right) */
	.site-nav-head {
		display: flex; align-items: center; justify-content: space-between;
		gap: 12px; padding: 12px 16px;
		flex: 0 0 auto;
		background: rgba(0, 0, 0, .12);
	}
	.site-nav-head-actions { display: flex; align-items: center; gap: 6px; }
	.site-nav .drawer-crest {
		display: block; width: 50px; height: 50px; flex: 0 0 50px;
		margin: 0; padding: 0; border-radius: 0;
	}
	.site-nav .drawer-crest img { width: 50px; height: 50px; object-fit: contain; }
	.site-nav-close,
	.site-nav-search {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; flex: 0 0 auto;
		color: #fff; background: transparent;
		border: 0; border-radius: 50%; cursor: pointer;
		transition: background .15s ease, color .15s ease;
	}
	.site-nav-close:hover,
	.site-nav-search:hover { background: rgba(255, 255, 255, .14); color: var(--gold); }
	.site-nav-close svg.icon,
	.site-nav-search svg.icon { width: 21px; height: 21px; }

	/* Navigation scrolls internally; header + language footer stay pinned. */
	.site-nav > ul {
		flex: 1 1 auto; min-height: 0;
		overflow-y: auto; overscroll-behavior: contain;
		flex-direction: column; padding: 4px 0 8px; gap: 0;
		align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; max-width: none;
	}
	.site-nav li { position: relative; }
	.site-nav > ul > li { flex: none; }
	/* Thin, low-opacity divider between rows */
	.site-nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .10); }
	.site-nav > ul > li:last-child { border-bottom: 0; }
	.site-nav > ul a {
		color: #fff; font-size: 15px; font-weight: 500; padding: 12px 18px;
		position: static; line-height: 1.35; letter-spacing: .01em;
		width: 100%; justify-content: flex-start; gap: 10px;
		min-height: 46px; border-radius: 0;
	}
	.site-nav > ul a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
	/* Active page: gold text + restrained accent, no bright block */
	.site-nav .is-current > a {
		color: var(--gold); background: rgba(255, 255, 255, .05);
		box-shadow: inset 3px 0 0 var(--gold);
	}
	.nav-item-label { flex: 1; text-align: left; min-width: 0; }
	/* The anchor keeps its desktop chevron; on mobile the dedicated toggle button
	   carries the indicator, so hide the anchor one to avoid a double chevron. */
	.site-nav .has-children > a > svg.icon { display: none; }
	.site-nav .submenu-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		position: absolute; right: 8px; top: 0; height: 46px;
		width: 40px; padding: 0; line-height: 0;
		color: rgba(255, 255, 255, .92); border-radius: 8px;
		background: transparent; border: 0; cursor: pointer;
	}
	.site-nav .submenu-toggle svg.icon { display: block; width: 14px; height: 14px; opacity: .92; transition: transform .2s ease; }
	.site-nav .has-children.is-open > .submenu-toggle svg.icon { transform: rotate(180deg); }
	.site-nav .submenu-toggle:hover { color: var(--gold); background: rgba(255, 255, 255, .08); }
	.site-nav .has-children > a { padding-right: 52px; }
	.site-nav > ul .submenu {
		position: static; min-width: 0; width: 100%;
		box-shadow: none; border: 0; border-radius: 0;
		background: rgba(0, 0, 0, .16); margin: 0; padding: 2px 0 6px;
		opacity: 1; visibility: visible; transform: none;
		display: none;
	}
	.has-children.is-open > .submenu, .submenu.is-open { display: block; }
	.site-nav > ul .submenu a {
		padding: 10px 18px 10px 34px; font-size: 13.5px; font-weight: 400;
		color: rgba(255, 255, 255, .9); min-height: 40px; border-radius: 0;
	}
	.site-nav > ul .submenu a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
	.site-nav > ul .submenu li + li > a { border-top: 1px solid rgba(255, 255, 255, .06); }
	.site-nav > ul .submenu a[aria-current] { color: var(--gold); }
	/* Current-section submenus stay closed until the user taps the chevron. */

	/* Drawer footer: language switcher */
	.site-nav-foot {
		display: flex; flex-direction: column; align-items: center; gap: 8px;
		flex: 0 0 auto; padding: 14px 16px 20px;
		background: rgba(0, 0, 0, .12);
	}
	.site-nav-foot-label {
		font-size: 11px; font-weight: 600; letter-spacing: .08em;
		text-transform: uppercase; color: rgba(255, 255, 255, .6);
	}
	.drawer-lang {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
		padding: 4px; border-radius: 999px;
		background: rgba(255, 255, 255, .10);
	}
	.drawer-lang a {
		display: inline-flex; align-items: center; justify-content: center;
		width: auto; min-width: 62px; padding: 8px 16px; border-radius: 999px;
		font-size: 13px; font-weight: 600; line-height: 1;
		color: #fff; background: transparent;
		transition: background .15s ease, color .15s ease;
	}
	.drawer-lang a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
	.drawer-lang a[aria-current] { background: var(--gold); color: var(--green); }

	.info-grid { grid-template-columns: 1fr 1fr; height: auto; }
	.about-card { grid-column: 1 / -1; height: 200px; }
	.glance-card, .principal-card { height: 190px; }
	.affairs-grid { grid-template-columns: 1fr 1fr; }
	.academics-panel { grid-column: 1 / -1; height: auto; }
	.academics-panel .academic-grid { min-height: 104px; }
	.news-panel, .events-panel { height: 200px; }
}

/* Wider phones / tablets: present as a capped, inset side drawer */
@media (min-width: 560px) and (max-width: 1200px) {
	.site-nav {
		width: min(384px, 92vw);
		border-radius: 18px 0 0 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav { transition: visibility .01s; }
	.site-nav.is-open { transform: none; }
	.nav-backdrop { transition: none; }
	.header-school-name { transition: none; transform: none; }
}

@media (max-width: 900px) {
	.hero-slide { background-image: var(--hero-bg-mobile, var(--hero-bg-desktop, none)); }
	.feature-grid { grid-template-columns: 1fr 1fr; }
	.content-layout, .contact-layout { grid-template-columns: 1fr; }
	.related-panel { position: static; }
	.footer-top { grid-template-columns: 84px 1fr 1fr; }
	.footer-follow-col { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
	.hero { height: 320px; min-height: 320px; }
	/* Stacked hero: the copy runs across the full width, so a left-to-right
	   scrim would leave the end of the motto on the bare picture. This one is a
	   light vertical wash instead of a heavy one: it is almost clear at the top,
	   where the picture should be seen in its real colours, and only deepens
	   towards the bottom, where the words sit. The text shadow (below) is what
	   keeps the words readable over the brighter parts of the picture. */
	.hero-scrim {
		background: linear-gradient(180deg,
			rgba(8, 42, 22, .04) 0%,
			rgba(8, 42, 22, .12) 28%,
			rgba(8, 42, 22, .30) 56%,
			rgba(8, 42, 22, .42) 100%);
	}
	/* With the lighter wash the shadow carries the contrast on small screens:
	   a tight dark halo right against each glyph (so even the small gold line
	   and the motto hold their own), a soft drop under it, and a wide haze
	   that lifts the whole block off the picture. */
	.hero {
		--hero-text-shadow:
			0 0 calc(2px * var(--hero-scale, 1)) rgba(3, 26, 13, .85),
			0 calc(1px * var(--hero-scale, 1)) calc(2px * var(--hero-scale, 1)) rgba(3, 26, 13, .78),
			0 calc(2px * var(--hero-scale, 1)) calc(12px * var(--hero-scale, 1)) rgba(3, 26, 13, .62);
	}
	/* The gold "Welcome to" line sits highest, where the wash is thinnest, so
	   it gets a slightly firmer halo of its own. */
	.hero-kicker {
		text-shadow:
			0 0 calc(3px * var(--hero-scale, 1)) rgba(3, 26, 13, .92),
			0 calc(1px * var(--hero-scale, 1)) calc(2px * var(--hero-scale, 1)) rgba(3, 26, 13, .88);
	}
	.hero-inner { padding-left: 8px !important; padding-right: 8px !important; max-width: 100%; justify-content: flex-start; padding-top: 10px; }
	/* Below the desktop breakpoint the copy fills the banner, so the arrows
	   move to the bottom corners — same row as the dots, clear of the text. */
	.hero-arrow {
		top: auto; bottom: 14px; --arrow-shift: 0;
		width: 44px; height: 44px;
	}
	.hero-prev { left: 12px; }
	.hero-next { right: 12px; }
	.hero-dots { bottom: 14px; }
	.hero-copy { max-width: 100%; overflow: hidden; padding-left: 0 !important; }
	.hero-kicker { font-size: calc(clamp(18.7px, 4.62vw, 24.2px) * var(--hero-scale, 1)); }
	.hero-title { font-size: clamp(30.8px, 7.7vw, 41.8px); line-height: 1.08; }
	.hero-tagline { font-size: calc(clamp(16.5px, 4.18vw, 20.9px) * var(--hero-scale, 1)); max-width: none; white-space: nowrap; margin-bottom: calc(12px * var(--hero-scale, 1)); }
	.hero-cta {
		min-width: 0;
		height: calc(40px * var(--hero-scale, 1));
		padding-inline: calc(18px * var(--hero-scale, 1));
		font-size: calc(13px * var(--hero-scale, 1));
	}
}

@media (max-width: 640px) {
	:root { --gutter: 16px; }
	.header-shell {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 8px;
	}
	.header-shell > .brand { grid-column: 1; }
	.header-shell > .header-tools { grid-column: 3; }
	.header-school-name {
		display: block;
		position: relative;
		grid-column: 2;
		align-self: center;
		min-width: 0;
		width: auto;
		z-index: 3;
		overflow: hidden;
		color: #fff;
		font-family: var(--display);
		font-size: clamp(11px, 3.685vw, 14.3px);
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1.2;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, 4px, 0);
		transition: opacity .38s ease, transform .42s cubic-bezier(.2,.75,.25,1), visibility .38s;
		pointer-events: none;
	}
	body.is-home-hero-passed .header-school-name {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}

	/* Header — compact, aligned */
	.header-shell { padding: 0 12px 0 14px; gap: 10px; }
	.brand-crest { width: 48px; height: 48px; margin-top: -6px; }
	.header-tools { gap: 4px; }
	.header-lang { gap: 0; padding: 2px; }
	.header-lang a { min-width: 0; height: 24px; padding: 0 7px; font-size: 10px; }
	.menu-toggle { width: 34px; height: 34px; }
	.menu-toggle svg.icon { width: 20px; height: 20px; }
	.search-toggle { width: 32px; height: 32px; }
	.search-toggle svg.icon { width: 17px; height: 17px; }

	/* Hero — fluid text that auto-fits inside the banner */
	.hero { height: 340px; min-height: 340px; }
	.hero-inner {
		padding-left: 8px !important;
		padding-right: 8px !important;
		padding-top: 10px;
		max-width: 100%;
		justify-content: flex-start;
	}
	.hero-copy { max-width: 100%; overflow: hidden; padding-left: 6px !important; }
	/* Faster entrance on phones: the desktop stagger (up to .8s delay + 1.1s)
	   reads as sluggish on a small screen where the hero is already in view. */
	.hero-copy > * { animation-duration: 2.0s; }
	.hero-kicker  { animation-delay: .32s; }
	.hero-title   { animation-delay: .72s; }
	.hero-tagline { animation-delay: 1.18s; }
	.hero-cta     { animation-delay: 1.62s; }
	.hero-kicker {
		font-size: calc(clamp(16px, 4.8vw, 20px) * var(--hero-scale, 1));
		margin-bottom: calc(1px * var(--hero-scale, 1));
	}
	.hero-title {
		font-size: clamp(26px, 8vw, 34px);
		line-height: 1.06;
		margin-bottom: calc(3px * var(--hero-scale, 1));
		letter-spacing: 0;
	}
	.hero-tagline {
		font-size: calc(clamp(11px, 3.45vw, 15px) * var(--hero-scale, 1));
		line-height: 1.35;
		max-width: none;
		white-space: nowrap;
		margin-bottom: calc(12px * var(--hero-scale, 1));
	}
	.hero-cta {
		min-width: 0;
		height: calc(38px * var(--hero-scale, 1));
		padding-inline: calc(16px * var(--hero-scale, 1));
		font-size: calc(12.5px * var(--hero-scale, 1));
		gap: calc(5px * var(--hero-scale, 1));
	}
	.hero-cta svg.icon { width: calc(13px * var(--hero-scale, 1)); height: calc(13px * var(--hero-scale, 1)); }
	.hero-controls { inset: 0; }
	.hero-arrow { width: 44px; height: 44px; }
	.hero-arrow::before { width: 22px; height: 22px; }
	.hero-arrow svg.icon { width: 10px; height: 10px; }
	.hero-prev { left: 10px; }
	.hero-next { right: 10px; }
	.hero-dots { bottom: 12px; }
	.hero-dot { width: 44px; height: 44px; }

	.info-grid, .affairs-grid { grid-template-columns: 1fr; grid-template-rows: none; }
	.about-card { grid-column: auto; height: auto; grid-template-columns: 1fr; }
	.about-photo { aspect-ratio: 16/9; }
	.about-photo::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .72) 86%, #ffffff 100%); }
	.glance-card, .principal-card { height: auto; }
	/* Phones: the principal's portrait becomes a compact round avatar */
	.principal-card.has-principal-photo { grid-template-columns: minmax(0, 1fr) 92px; }
	.principal-card.has-principal-photo .principal-photo {
		overflow: visible;
		background: transparent;
		align-items: flex-start;
		justify-content: center;
		padding: 14px 12px 0 0;
	}
	.principal-card.has-principal-photo .principal-photo::after { display: none; }
	.principal-card.has-principal-photo .principal-photo img {
		width: 72px;
		height: 72px;
		border-radius: 50%;
		border: 3px solid #FFFFFF;
		box-shadow: 0 6px 16px rgba(24, 58, 43, .18);
		object-position: center 20%;
	}
	.glance-card { min-height: 0; padding: 18px 14px 16px; }
	.glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; padding: 8px 0 2px; margin-top: 6px; }
	.glance-item { min-width: 0; min-height: clamp(90px, 23vw, 98px); gap: 6px; padding: 14px 8px; border-left: 0; }
	.glance-item:nth-child(even) { border-left: 1px solid rgba(46, 139, 87, .24); }
	.glance-item:nth-child(n+3) { border-top: 1px solid rgba(46, 139, 87, .2); }
	.glance-value { font-size: clamp(20px, 5vw, 25px); line-height: 1.1; }
	.glance-label { font-size: clamp(10px, 2.8vw, 12px); line-height: 1.25; letter-spacing: .35px; }
	.academics-panel { grid-column: auto; }
	.academic-grid { grid-template-columns: repeat(2, 1fr); }
	.academic-card { height: auto; min-height: clamp(88px, 23vw, 100px); padding: 14px 10px; }
	.academic-label { font-size: clamp(14px, 3.8vw, 16px); line-height: 1.28; }
	.news-panel, .events-panel { height: auto; }
	.hp-list { gap: 4px; }
	.feature-grid { grid-template-columns: 1fr; }
	.feature-card { min-height: 160px; height: 160px; }
	.footer-top { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px 12px; }
	.footer-crest-col { justify-content: center; }
	.footer-quicklinks a { border-right: 0; border-bottom: 1px solid rgba(214, 182, 60, .3); padding: 4px 8px; }
	.footer-bottom { padding: 8px 18px; }
	.field-row { grid-template-columns: 1fr; }
	.page-hero { padding: 24px 0; }
	.page-hero h1 { font-size: 26px; }
	.section { padding: 28px 0 22px; }
	.archive-toolbar { flex-direction: column; align-items: stretch; }
	.card-grid, .staff-grid { grid-template-columns: 1fr; }
}

/* Very small screens */
@media (max-width: 380px) {
	.header-shell { padding: 0 10px 0 12px; gap: 8px; }
	.brand-crest { width: 44px; height: 44px; margin-top: -5px; }
	.header-lang a { padding: 0 5px; font-size: 9.5px; height: 22px; }
	.hero { height: 320px; min-height: 320px; }
	.hero-kicker { font-size: calc(16.5px * var(--hero-scale, 1)); }
	.hero-title { font-size: 26.4px; }
	.hero-tagline { font-size: calc(clamp(11px, 3.74vw, 13.2px) * var(--hero-scale, 1)); max-width: none; }
	.hero-cta {
		height: calc(36px * var(--hero-scale, 1));
		padding-inline: calc(14px * var(--hero-scale, 1));
		font-size: calc(12px * var(--hero-scale, 1));
	}
}

/* News landing & calendar styling lives in news-page.css (loaded after this file). */



/* Contact page map */
.map-frame.has-map { display: block; padding: 0; overflow: hidden; }
.map-frame.has-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* When the mobile drawer is open, the floating crest must not sit on top of it */
body.nav-open .fly-crest { display: none !important; }
body.nav-open .nav-backdrop { z-index: 78; }
body.nav-open .site-nav { z-index: 80; }

/* Mobile: slower, softer section reveal as each block scrolls into view */
@media (max-width: 900px) {
	main#main-content :is(.home-row, .about-body, .about-intro-section, .about-bottom-grid, .about-detail-section, .page-body, .archive-body, .contact-body, .search-body, .calendar-body, .detail-body, .section, .topic-section, .related-news, .calendar-month, .timeline-item) {
		transform: translateY(22px);
		transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
		            transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
	}
}

/* Mobile drawer: smoother slide + soft wipe + stepped item entry */
@media (max-width: 1200px) {
	.site-nav {
		transform: translateX(100%);
		transition: transform .48s cubic-bezier(.22, 1, .36, 1), visibility .48s, box-shadow .48s;
	}
	.site-nav.is-open { transform: translateX(0); }
	.site-nav::before {
		content: "";
		position: absolute; inset: 0; z-index: 0; pointer-events: none;
		background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .16) 48%, transparent 68%);
		transform: translateX(-130%);
		opacity: 0;
	}
	.site-nav.is-open::before { animation: navWipe .95s cubic-bezier(.22, 1, .36, 1) .06s 1; }
	.site-nav.is-open .site-nav-head { animation: navHeadIn .42s cubic-bezier(.22, 1, .36, 1) both; }
	.site-nav.is-open > ul > li { animation: navItemIn .46s cubic-bezier(.22, 1, .36, 1) both; }
	.site-nav.is-open > ul > li:nth-child(1)  { animation-delay: .10s; }
	.site-nav.is-open > ul > li:nth-child(2)  { animation-delay: .14s; }
	.site-nav.is-open > ul > li:nth-child(3)  { animation-delay: .18s; }
	.site-nav.is-open > ul > li:nth-child(4)  { animation-delay: .22s; }
	.site-nav.is-open > ul > li:nth-child(5)  { animation-delay: .26s; }
	.site-nav.is-open > ul > li:nth-child(6)  { animation-delay: .30s; }
	.site-nav.is-open > ul > li:nth-child(7)  { animation-delay: .34s; }
	.site-nav.is-open > ul > li:nth-child(8)  { animation-delay: .38s; }
	.site-nav.is-open > ul > li:nth-child(9)  { animation-delay: .42s; }
	.site-nav.is-open > ul > li:nth-child(10) { animation-delay: .46s; }
	.site-nav.is-open > ul > li:nth-child(11) { animation-delay: .50s; }
	.nav-backdrop { transition: opacity .38s ease, visibility .38s; }
}
@keyframes navWipe {
	0%   { opacity: 0; transform: translateX(-130%); }
	22%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(130%); }
}
@keyframes navHeadIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}
@keyframes navItemIn {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.site-nav, .nav-backdrop { transition: none; }
	.site-nav::before, .site-nav.is-open .site-nav-head, .site-nav.is-open > ul > li { animation: none; }
}

/* School anthem (About page) */
.anthem-audio { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 16px; padding: 12px; background: var(--ivory, #FFFDF5); border: 1px solid #EFE7CE; border-radius: var(--radius, 8px); }
.anthem-audio audio { flex: 1 1 260px; height: 40px; min-width: 0; }
.anthem-text { font-family: var(--tamil, 'Noto Sans Tamil', var(--font)); font-size: 15px; line-height: 1.9; color: var(--ink, #183A2B); padding: 14px 16px; background: var(--ivory, #FFFDF5); border-left: 3px solid var(--gold, #D6B63C); border-radius: 0 6px 6px 0; }

/* Smaller featured images on selected About sections (motto, leadership, staff, facilities, custom topics) */
.featured-media--sm { width: 50%; margin-inline: auto; }
@media (max-width: 700px) { .featured-media--sm { width: 100%; } }

/* Vision & Mission + School Motto side by side */
.about-detail-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .about-detail-pair { grid-template-columns: 1fr; } }

/* Gallery (redesigned): album cards with full-bleed cover + overlay */
.gallery-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.album-card { position: relative; border: 1px solid #DCE9DE; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(24, 58, 43, .06); transition: transform .25s ease, box-shadow .25s ease; }
.album-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(24, 58, 43, .14); }
.album-card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sage); }
.album-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; filter: brightness(1.02); }
.album-card:hover .album-card-media img { transform: scale(1.08); filter: brightness(1.08); }
.album-card-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.72) 100%); transition: opacity .25s ease; }
.album-card:hover .album-card-scrim { opacity: .85; }
.album-count { position: absolute; top: 10px; right: 10px; bottom: auto; z-index: 2; background: rgba(255,255,255,.92); color: var(--green); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.album-card-title { position: absolute; left: 14px; right: 14px; bottom: 44px; z-index: 2; color: #fff; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.2; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.album-card-open { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); font-size: 12px; font-weight: 600; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.album-card:hover .album-card-open { opacity: 1; transform: translateY(0); }
.album-card .card-body { padding: 12px 14px 14px; }
.album-card .card-body p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Gallery topic filter tabs */
.filter-tabs { gap: 8px; margin-bottom: 18px; }
.filter-tab { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.filter-tab:hover { transform: translateY(-1px); }
.filter-tab.is-active, .filter-tab.is-current { box-shadow: 0 4px 12px rgba(23, 107, 58, .25); }

/* Gallery detail photos */
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery-item { transition: transform .25s ease, box-shadow .25s ease; }
.gallery-item:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(24, 58, 43, .16); }
.gallery-trigger { position: relative; }
.gallery-trigger::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.gallery-item:hover .gallery-trigger::after { opacity: 1; }
.gallery-item figcaption { position: absolute; left: 10px; bottom: 8px; right: 10px; z-index: 2; color: #fff; font-size: 12px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.6); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.gallery-item:hover figcaption { opacity: 1; }
.gallery-item .gallery-trigger svg.icon { }

/* Album detail hero */
.album-hero { position: relative; overflow: hidden; min-height: 260px; color: #fff; }
.album-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 6s ease; }
.album-hero:hover .album-hero-media { transform: scale(1.08); }
.album-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.78) 100%); }
.album-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; min-height: 260px; padding: 24px 0 28px; }
.album-hero-inner .breadcrumb a { color: rgba(255,255,255,.85); }
.album-hero-inner .breadcrumb li { color: rgba(255,255,255,.7); }
.album-hero-inner .eyebrow { color: var(--gold); }
.album-hero h1 { color: #fff; font-size: 34px; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.album-hero-desc { margin: 0; max-width: 60ch; color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.5; }
.album-hero-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); font-size: 12px; font-weight: 600; color: #fff; width: fit-content; }
@media (max-width: 700px) {
	.album-hero { min-height: 200px; }
	.album-hero-inner { min-height: 200px; padding: 16px 0 20px; }
	.album-hero h1 { font-size: 24px; }
}

/* Gallery root: bento photo grid with one featured (wide) topic */
.gallery-topic-section { margin-top: 8px; }
.gallery-topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-rows: 200px; }
.gallery-topic-card { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--sage); box-shadow: 0 2px 8px rgba(24, 58, 43, .08); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.gallery-topic-card:first-child { grid-column: span 2; grid-row: span 2; border-radius: 20px; }
.gallery-topic-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(24, 58, 43, .18); }
@media (max-width: 900px) { .gallery-topic-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } .gallery-topic-card:first-child { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 540px) { .gallery-topic-grid { grid-template-columns: 1fr; grid-auto-rows: 190px; } .gallery-topic-card:first-child { grid-column: auto; } }
.gallery-topic-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.gallery-topic-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; filter: brightness(1.02); }
.gallery-topic-card:hover .gallery-topic-media img { transform: scale(1.08); filter: brightness(1.08); }
.gallery-topic-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--green-2); }
.gallery-topic-placeholder svg.icon { width: 40px; height: 40px; opacity: .5; }
.gallery-topic-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.78) 100%); }
.gallery-topic-count { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(255,255,255,.92); color: var(--green); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.gallery-topic-title { position: absolute; left: 14px; right: 14px; bottom: 42px; z-index: 2; color: #fff; font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.gallery-topic-card:first-child .gallery-topic-title { font-size: 26px; bottom: 56px; }
.gallery-topic-card:first-child .gallery-topic-open { bottom: 16px; }
.gallery-topic-open { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); font-size: 12px; font-weight: 600; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.gallery-topic-card:hover .gallery-topic-open { opacity: 1; transform: translateY(0); }

/* Cover hero for gallery root */
.page-hero--cover { background-size: cover; background-position: center; position: relative; overflow: hidden; }
.page-hero--cover::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, rgba(23,107,58,.85) 0%, rgba(23,107,58,.55) 40%, rgba(0,0,0,.25) 100%); }
.page-hero--cover .wrap { position: relative; z-index: 1; }
.page-hero--cover .eyebrow, .page-hero--cover h1 { text-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Alumni page (redesigned) */
.alumni-topics { margin-top: 8px; }
.alumni-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.alumni-topic-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--sage); box-shadow: 0 2px 8px rgba(24, 58, 43, .08); transition: transform .3s ease, box-shadow .3s ease; }
.alumni-topic-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(24, 58, 43, .16); }
.alumni-topic-card .atc-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.alumni-topic-card .atc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; filter: brightness(1.02); }
.alumni-topic-card:hover .atc-media img { transform: scale(1.07); filter: brightness(1.07); }
.alumni-topic-card .atc-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--green-2); }
.alumni-topic-card .atc-placeholder svg.icon { width: 36px; height: 36px; opacity: .5; }
.alumni-topic-card .atc-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.72) 100%); }
.alumni-topic-card .atc-title { position: absolute; left: 12px; right: 12px; bottom: 38px; z-index: 2; color: #fff; font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.2; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.alumni-topic-card .atc-arrow { position: absolute; right: 12px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); color: #fff; transition: transform .25s ease; }
.alumni-topic-card:hover .atc-arrow { transform: translateX(3px); }

.alumni-stories { margin-top: 32px; }
.alumni-stories-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.alumni-stories-head h2 { margin: 0; }
.alumni-featured { display: grid; grid-template-columns: 40% 1fr; gap: 24px; align-items: center; background: #fff; border: 1px solid #DCE9DE; border-radius: 12px; overflow: hidden; padding: 20px; margin-bottom: 22px; box-shadow: 0 2px 10px rgba(24, 58, 43, .06); }
.alumni-featured-photo { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--sage); }
.alumni-featured-photo img { width: 100%; height: 100%; object-fit: cover; }
.alumni-featured-body h3 { margin: 0 0 8px; font-size: 22px; }
.alumni-featured-text { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.alumni-story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.alumni-story-card { background: #fff; border: 1px solid #DCE9DE; border-radius: 12px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.alumni-story-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(24, 58, 43, .14); }
.alumni-story-photo { margin: 0; aspect-ratio: 4/3; background: var(--sage); overflow: hidden; }
.alumni-story-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.alumni-story-card:hover .alumni-story-photo img { transform: scale(1.06); }
.alumni-story-body { padding: 12px 14px 14px; }
.alumni-story-body h3 { margin: 0 0 4px; font-size: 16px; }
.alumni-story-body p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.alumni-cta { margin-top: 32px; padding: 24px 28px; border-radius: 12px; background: linear-gradient(135deg, #176B3A 0%, #2E8B57 100%); color: #fff; }
.alumni-cta h3 { margin: 0 0 6px; color: #fff; font-size: 20px; }
.alumni-cta p { margin: 0 0 14px; color: rgba(255,255,255,.88); max-width: 60ch; }
.alumni-cta .button-green { background: #D6B63C; color: #183A2B; border-color: #D6B63C; }
.alumni-cta .button-green:hover { background: #CBAB2F; color: #183A2B; }

@media (max-width: 800px) {
	.alumni-featured { grid-template-columns: 1fr; }
	.alumni-featured-photo { max-width: 320px; }
}
@media (max-width: 600px) {
	.alumni-topic-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.alumni-story-grid { grid-template-columns: 1fr; }
}

/* Lightbox: thumbnail strip + slideshow + fade */
.lightbox-figure { transition: opacity .22s ease; }
.lightbox-figure.is-fading { opacity: 0; }
.lightbox-thumbs { position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; max-width: 90vw; overflow-x: auto; padding: 6px; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); border-radius: 10px; scrollbar-width: none; }
.lightbox-thumbs::-webkit-scrollbar { display: none; }
.lightbox-thumb { flex: 0 0 auto; width: 52px; height: 40px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.1); cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.lightbox-thumb:hover { transform: scale(1.05); }
.lightbox-thumb.is-active { border-color: var(--gold); }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-autoplay { position: absolute; bottom: 18px; right: 18px; width: auto; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.lightbox-autoplay:hover { background: rgba(255,255,255,.28); }
.lightbox-autoplay[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
@media (max-width: 700px) {
	.lightbox-thumbs { bottom: 76px; max-width: 94vw; }
	.lightbox-thumb { width: 42px; height: 32px; }
	.lightbox-autoplay { bottom: 12px; right: 12px; }
	.lightbox-prev, .lightbox-next { width: 40px; height: 56px; font-size: 20px; }
}

/* Immersive gallery viewer: cinematic stage, zoom tools and clear controls */
.lightbox {
	background: radial-gradient(ellipse at 50% 42%, rgba(31, 69, 49, .96), rgba(10, 24, 17, .985) 74%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	padding: 82px 82px 126px;
	overscroll-behavior: contain;
}
.lightbox-figure {
	position: relative;
	width: min(1100px, 84vw);
	max-width: 1100px;
	max-height: calc(100vh - 190px);
	justify-content: center;
	gap: 14px;
}
.lightbox-img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 250px);
	border-radius: 10px;
	background: #102017;
	box-shadow: 0 24px 90px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 255, 255, .1);
	transform-origin: center center;
	transition: opacity .28s ease, transform .22s ease, box-shadow .22s ease;
	will-change: transform, opacity;
	cursor: zoom-in;
	touch-action: none;
}
.lightbox-img.is-zoomed { cursor: grab; touch-action: none; }
.lightbox-img.is-dragging { cursor: grabbing; transition: none; }
.lightbox-figure.is-fading .lightbox-img { opacity: 0; transform: scale(.975); }
.lightbox-caption {
	max-width: min(72ch, 78vw);
	margin: 0;
	color: rgba(255, 255, 255, .9);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}
.lightbox-count {
	position: absolute;
	top: 14px;
	left: 14px;
	bottom: auto;
	transform: none;
	margin: 0;
	padding: 7px 11px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(10, 24, 17, .48);
	color: rgba(255, 255, 255, .9);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	backdrop-filter: blur(10px);
}
.lightbox-progress {
	position: absolute;
	left: 0;
	bottom: 36px;
	width: 100%;
	height: 2px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .2);
	overflow: hidden;
}
.lightbox-progress-bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--heritage-gold, #D6B63C);
	box-shadow: 0 0 12px rgba(214, 182, 60, .65);
	transition: width .4s cubic-bezier(.2, .7, .2, 1);
}
.lightbox-toolbar {
	position: absolute;
	top: 18px;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px;
	transform: translateX(-50%);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 999px;
	background: rgba(255, 255, 255, .09);
	backdrop-filter: blur(14px);
}
.lightbox .lightbox-toolbar .lightbox-tool {
	position: static;
	width: 38px;
	height: 36px;
	border-radius: 999px;
	background: transparent;
	font-size: 19px;
	font-weight: 500;
	line-height: 1;
}
.lightbox .lightbox-toolbar .lightbox-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.lightbox .lightbox-toolbar .lightbox-tool:disabled { opacity: .38; cursor: default; }
.lightbox .lightbox-toolbar .lightbox-tool[aria-expanded="true"] { background: rgba(214, 182, 60, .24); color: #F8E7A0; }
.lightbox-close { z-index: 7; top: 18px; right: 20px; background: rgba(255, 255, 255, .1); }
.lightbox-prev, .lightbox-next { z-index: 2; }
.lightbox-prev, .lightbox-next {
	width: 50px;
	height: 50px;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .09) !important;
	backdrop-filter: blur(10px);
	transition: background .2s ease, transform .2s ease, border-color .2s ease !important;
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(214, 182, 60, .92) !important; border-color: rgba(214, 182, 60, .9) !important; }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }
.lightbox-thumbs {
	position: absolute;
	bottom: 62px;
	left: 50%;
	width: max-content;
	max-width: min(82vw, 1040px);
	gap: 8px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	background: rgba(255, 255, 255, .075);
	box-shadow: 0 10px 35px rgba(0, 0, 0, .2);
	transform: translateX(-50%);
	backdrop-filter: blur(14px);
}
.lightbox .lightbox-thumbs .lightbox-thumb {
	position: relative;
	width: 56px;
	height: 42px;
	border: 2px solid transparent;
	border-radius: 7px;
	opacity: .62;
	transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox .lightbox-thumbs .lightbox-thumb:hover { opacity: 1; transform: translateY(-2px); }
.lightbox .lightbox-thumbs .lightbox-thumb.is-active { opacity: 1; border-color: var(--heritage-gold, #D6B63C); box-shadow: 0 0 0 2px rgba(214, 182, 60, .2); }
.lightbox-autoplay { bottom: 14px; right: 20px; width: auto; height: 36px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lightbox-autoplay[aria-pressed="true"] { background: var(--heritage-gold, #D6B63C); color: var(--deep-green-text, #183A2B); }
@media (max-width: 700px) {
	.lightbox { padding: 74px 14px 142px; }
	.lightbox-figure { width: 100%; max-height: calc(100dvh - 235px); }
	.lightbox-img { max-width: 100%; max-height: calc(100dvh - 290px); border-radius: 7px; }
	.lightbox-caption { font-size: 12px; }
	.lightbox-toolbar { top: 14px; left: 14px; transform: none; }
	.lightbox .lightbox-toolbar .lightbox-tool { width: 34px; height: 34px; }
	.lightbox-close { top: 14px; right: 14px; }
	.lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 17px; }
	.lightbox-prev { left: 10px; }
	.lightbox-next { right: 10px; }
	.lightbox-thumbs { bottom: 58px; max-width: calc(100vw - 24px); gap: 5px; padding: 6px; }
	.lightbox .lightbox-thumbs .lightbox-thumb { width: 42px; height: 34px; }
	.lightbox-autoplay { bottom: 12px; right: 12px; }
	.lightbox-progress { bottom: 35px; }
}
@media (prefers-reduced-motion: reduce) {
	.lightbox *, .lightbox *::before, .lightbox *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Gallery viewer pro controls and ambient photo stage */
.lightbox { isolation: isolate; }
.lightbox-ambient {
	position: absolute;
	inset: -8%;
	z-index: 0;
	background-position: center;
	background-size: cover;
	filter: blur(44px) saturate(1.25);
	opacity: .38;
	transform: scale(1.08);
	transition: background-image .4s ease, opacity .4s ease;
	pointer-events: none;
}
.lightbox-figure { z-index: 1; transition: width .35s ease, transform .35s ease; }
.lightbox-img.is-fill-mode { width: 100%; height: calc(100vh - 250px); object-fit: cover !important; }
.lightbox-img.is-low-res { filter: blur(.35px); transition: filter .12s ease, opacity .12s ease; }
.lightbox-toolbar { z-index: 5; max-width: calc(100vw - 110px); overflow-x: auto; scrollbar-width: none; }
.lightbox-toolbar::-webkit-scrollbar { display: none; }
.lightbox .lightbox-toolbar .lightbox-tool { flex: 0 0 38px; font-size: 17px; }
.lightbox-info {
	position: absolute;
	right: 22px;
	top: 82px;
	bottom: 126px;
	z-index: 4;
	width: 250px;
	padding: 20px 18px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	background: rgba(17, 39, 28, .68);
	color: rgba(255, 255, 255, .9);
	box-shadow: 0 18px 60px rgba(0, 0, 0, .2);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	animation: lightbox-panel-in .28s cubic-bezier(.2,.8,.2,1) both;
}
.lightbox-info[hidden] { display: none; }
.lightbox-info-kicker { margin: 0 0 10px; color: var(--heritage-gold, #D6B63C); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.lightbox-info-title { margin: 0 0 8px; color: #fff; font-family: var(--serif, Georgia, serif); font-size: 19px; line-height: 1.25; }
.lightbox-info-caption { margin: 0 0 22px; color: rgba(255, 255, 255, .7); font-size: 12px; line-height: 1.55; }
.lightbox-info dl { margin: 0; border-top: 1px solid rgba(255, 255, 255, .13); }
.lightbox-info dl div { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.lightbox-info dt { color: rgba(255, 255, 255, .53); font-size: 10px; }
.lightbox-info dd { overflow-wrap: anywhere; margin: 0; color: rgba(255, 255, 255, .92); font-size: 11px; }
.lightbox-shortcuts { margin: 20px 0 0; color: rgba(255, 255, 255, .48); font-size: 9px; line-height: 1.5; }
.lightbox.has-info .lightbox-figure { width: min(900px, calc(100vw - 390px)); }
.lightbox.has-info .lightbox-next { right: 286px; }
.lightbox.is-filmstrip-hidden .lightbox-thumbs { display: none; }
.lightbox.is-filmstrip-hidden .lightbox-figure { max-height: calc(100vh - 125px); }
.lightbox.is-filmstrip-hidden .lightbox-img { max-height: calc(100vh - 190px); }
.lightbox-playback {
	position: absolute;
	right: 20px;
	bottom: 13px;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 4px 5px 4px 11px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(12px);
}
.lightbox-speed-label { color: rgba(255, 255, 255, .63); font-size: 10px; }
.lightbox .lightbox-playback .lightbox-speed {
	width: auto;
	min-width: 62px;
	padding: 6px 5px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .9);
	font: inherit;
	font-size: 10px;
	cursor: pointer;
}
.lightbox-speed option { color: #183A2B; }
.lightbox .lightbox-playback .lightbox-autoplay { position: static; width: auto; height: 30px; padding: 0 12px; border: 0 !important; background: rgba(255,255,255,.14); font-size: 10px; }
.lightbox .lightbox-playback .lightbox-autoplay[aria-pressed="true"] { background: var(--heritage-gold, #D6B63C); color: var(--deep-green-text, #183A2B); }
@keyframes lightbox-panel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 700px) {
	.lightbox-toolbar { left: 12px; right: 62px; width: auto; max-width: none; justify-content: flex-start; gap: 3px; padding: 4px; }
	.lightbox .lightbox-toolbar .lightbox-tool { flex-basis: 34px; width: 34px; height: 34px; font-size: 15px; }
	.lightbox.has-info .lightbox-figure { width: 100%; }
	.lightbox.has-info .lightbox-next { right: 10px; }
	.lightbox-info { top: auto; right: 12px; bottom: 120px; left: 12px; width: auto; max-height: 108px; overflow-y: auto; padding: 12px 14px; border-radius: 12px; }
	.lightbox-info-kicker { margin-bottom: 5px; }
	.lightbox-info-title { margin-bottom: 4px; font-size: 15px; }
	.lightbox-info-caption { margin-bottom: 8px; font-size: 11px; }
	.lightbox-info dl { display: flex; gap: 18px; }
	.lightbox-info dl div { padding: 6px 0; border: 0; }
	.lightbox-playback { right: 12px; bottom: 10px; }
	.lightbox .lightbox-playback .lightbox-speed { min-width: 58px; }
	.lightbox-img.is-fill-mode { height: calc(100dvh - 290px); }
	.lightbox.is-filmstrip-hidden .lightbox-figure { max-height: calc(100dvh - 145px); }
	.lightbox.is-filmstrip-hidden .lightbox-img { max-height: calc(100dvh - 200px); }
}

/* Gallery landing intro: balanced photo-and-copy feature, not a full-width banner */
.gallery-intro-feature {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
	min-height: 248px;
	margin: 0 0 24px;
	border: 1px solid #DCE9DE;
	border-radius: 18px;
	background: linear-gradient(115deg, #FFFFFF 0%, #F6F8F0 100%);
	box-shadow: 0 12px 34px rgba(24, 58, 43, .075);
	overflow: hidden;
}
.gallery-intro-photo {
	position: relative;
	min-height: 248px;
	margin: 0;
	overflow: hidden;
	background: var(--soft-sage, #E8F1E8);
}
.gallery-intro-photo::after {
	position: absolute;
	inset: 0;
	content: '';
	background: linear-gradient(90deg, transparent 70%, rgba(24, 58, 43, .12));
	pointer-events: none;
}
.gallery-intro-photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 248px;
	object-fit: cover;
	object-position: center 43%;
	transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.gallery-intro-feature:hover .gallery-intro-photo img { transform: scale(1.035); filter: saturate(1.04); }
.gallery-intro-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(24px, 3.2vw, 42px);
}
.gallery-intro-body::before {
	width: 34px;
	height: 3px;
	margin-bottom: 15px;
	border-radius: 4px;
	background: var(--heritage-gold, #D6B63C);
	content: '';
}
.gallery-intro-eyebrow {
	margin-bottom: 8px;
	color: var(--primary-green, #176B3A);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.gallery-intro-copy { max-width: 43ch; }
.gallery-intro-copy p {
	margin: 0;
	color: var(--deep-green-text, #183A2B);
	font-family: var(--serif, Georgia, serif);
	font-size: clamp(17px, 1.65vw, 22px);
	font-weight: 500;
	line-height: 1.55;
	text-wrap: pretty;
}
.gallery-intro-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 9px 16px;
	border: 1px solid rgba(23, 107, 58, .18);
	border-radius: 999px;
	background: #E8F1E8;
	color: var(--primary-green, #176B3A);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gallery-intro-link span { font-size: 17px; line-height: 1; transition: transform .2s ease; }
.gallery-intro-link:hover {
	transform: translateY(-2px);
	background: var(--primary-green, #176B3A);
	box-shadow: 0 7px 16px rgba(23, 107, 58, .18);
	color: #fff;
}
.gallery-intro-link:hover span { transform: translateX(3px); }
.gallery-intro-link:focus-visible { outline: 2px solid var(--heritage-gold, #D6B63C); outline-offset: 3px; }
#gallery-topics { scroll-margin-top: 24px; }
@media (max-width: 800px) {
	.gallery-intro-feature { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 220px; }
	.gallery-intro-photo, .gallery-intro-photo img { min-height: 220px; }
	.gallery-intro-body { padding: 22px; }
}
@media (max-width: 600px) {
	.gallery-intro-feature { grid-template-columns: 1fr; min-height: 0; border-radius: 15px; }
	.gallery-intro-photo { min-height: 0; aspect-ratio: 16 / 9; }
	.gallery-intro-photo img { min-height: 0; aspect-ratio: 16 / 9; object-position: center 42%; }
	.gallery-intro-photo::after { background: linear-gradient(180deg, transparent 62%, rgba(24, 58, 43, .12)); }
	.gallery-intro-body { padding: 20px 21px 22px; }
	.gallery-intro-body::before { width: 28px; margin-bottom: 12px; }
	.gallery-intro-eyebrow { margin-bottom: 5px; font-size: 9px; }
	.gallery-intro-copy p { font-size: 17px; line-height: 1.5; }
	.gallery-intro-link { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.gallery-intro-photo img, .gallery-intro-link, .gallery-intro-link span { transition-duration: .01ms !important; }
}

/* Photo details: adjacent-image previews replace technical file information */
.lightbox-info-caption { margin-bottom: 12px; }
.lightbox-info dl { margin-bottom: 10px; }
.lightbox-info dl div { padding: 8px 0; }
.lightbox-neighbors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.lightbox .lightbox-neighbors .lightbox-neighbor {
	position: relative;
	display: flex;
	width: 100%;
	min-width: 0;
	height: auto;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 5px;
	padding: 7px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	background: rgba(255, 255, 255, .065);
	text-align: left;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox .lightbox-neighbors .lightbox-neighbor:hover {
	transform: translateY(-2px);
	border-color: rgba(214, 182, 60, .58);
	background: rgba(255, 255, 255, .12);
}
.lightbox-neighbor-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; color: rgba(255, 255, 255, .65); font-size: 9px; font-weight: 700; }
.lightbox-neighbor-image { display: block; width: 100%; height: 54px; border-radius: 6px; background: rgba(255, 255, 255, .08); object-fit: cover; }
.lightbox-neighbor-caption { overflow: hidden; color: rgba(255, 255, 255, .9); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-img.is-slide-forward { animation: lightbox-slide-forward .16s cubic-bezier(.2,.75,.25,1) both; }
.lightbox-img.is-slide-backward { animation: lightbox-slide-backward .16s cubic-bezier(.2,.75,.25,1) both; }
@keyframes lightbox-slide-forward {
	from { opacity: .48; transform: translate3d(34px,0,0) scale(.975); filter: blur(3px); }
	to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}
@keyframes lightbox-slide-backward {
	from { opacity: .48; transform: translate3d(-34px,0,0) scale(.975); filter: blur(3px); }
	to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}
@media (max-width: 700px) {
	.lightbox-info { bottom: 120px; max-height: 205px; padding: 8px 12px; }
	.lightbox-info dl { margin-bottom: 4px; }
	.lightbox-info dl div { padding: 5px 0; }
	.lightbox-neighbors { gap: 7px; margin-top: 7px; }
	.lightbox .lightbox-neighbors .lightbox-neighbor { gap: 4px; padding: 6px; }
	.lightbox-neighbor-image { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.lightbox-img.is-slide-forward, .lightbox-img.is-slide-backward { animation: none !important; }
}

/* Alumni pathways: a clear entry point, focused association action, and relevant subnav */
.alumni-intro-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px;
	margin: 0 0 28px;
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid #DCE9DE;
	border-left: 4px solid var(--heritage-gold, #D6B63C);
	border-radius: 14px;
	background: linear-gradient(120deg, #FFFFFF 0%, #F4F8F4 72%, #FFFDF5 100%);
	box-shadow: 0 10px 28px rgba(24,58,43,.055);
}
.alumni-intro-kicker { display: block; margin: 0 0 7px; color: var(--primary-green, #176B3A); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.alumni-intro-copy p { max-width: 64ch; margin: 0; color: var(--deep-green-text, #183A2B); font-family: var(--serif, Georgia, serif); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; text-wrap: pretty; }
.alumni-intro-action { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--primary-green, #176B3A); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 18px rgba(23,107,58,.14); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.alumni-intro-action:hover { transform: translateY(-2px); background: var(--secondary-green, #2E8B57); color: #fff; box-shadow: 0 12px 22px rgba(23,107,58,.2); }
.alumni-intro-action > svg.icon { width: 16px; height: 16px; }
.alumni-intro-action-icon { display: inline-flex; color: #F8E7A0; }
.alumni-intro-action-icon svg.icon { width: 18px; height: 18px; }
.alumni-section-heading { display: flex; flex-direction: column; gap: 4px; margin: 0 0 13px; }
.alumni-section-heading > span { color: #8A6D1A; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.alumni-section-heading h2 { margin: 0; color: #183A2B; font-size: clamp(20px, 2.1vw, 25px); }
.alumni-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.alumni-cta-kicker { display: block; margin: 0 0 5px; color: #F8E7A0; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.alumni-cta p { margin-bottom: 0; }
.alumni-cta .button { white-space: nowrap; }
.related-panel a.is-current { color: var(--primary-green, #176B3A); font-weight: 700; }
.related-panel a.is-current span:first-child { text-decoration: underline; text-decoration-color: var(--heritage-gold, #D6B63C); text-underline-offset: 4px; }

.alumni-association-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .75fr); align-items: start; gap: 22px; }
.alumni-association-copy { padding: clamp(18px, 2.5vw, 28px); border: 1px solid #DCE9DE; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(24,58,43,.05); }
.alumni-association-copy p { margin: 0 0 14px; color: #183A2B; font-size: 15px; line-height: 1.75; }
.alumni-association-copy p:last-child { margin-bottom: 0; }
.alumni-association-contact { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 12px; padding: 20px; border: 1px solid #DCE9DE; border-radius: 14px; background: linear-gradient(145deg, #E8F1E8, #FFFDF5); }
.alumni-association-contact-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #176B3A; color: #F8E7A0; }
.alumni-association-contact-icon svg.icon { width: 20px; height: 20px; }
.alumni-association-contact h2 { margin: 2px 0 6px; color: #183A2B; font-size: 16px; }
.alumni-association-contact p { margin: 0 0 14px; color: #4C6655; font-size: 12.5px; line-height: 1.55; }
.alumni-association-contact .button { min-height: 42px; padding-inline: 12px; font-size: 11.5px; white-space: normal; }
.alumni-association-contact .button svg.icon { width: 14px; height: 14px; flex: 0 0 auto; }

.alumni-more { margin-top: 30px; }
.alumni-more > h2 { margin: 0 0 14px; color: #183A2B; font-size: clamp(19px, 2vw, 23px); }
.alumni-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.alumni-more-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #DCE9DE; border-radius: 12px; background: #fff; color: #183A2B; text-decoration: none; box-shadow: 0 3px 12px rgba(24,58,43,.05); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease; }
.alumni-more-card:hover { transform: translateY(-4px); border-color: #B8D2BE; box-shadow: 0 14px 28px rgba(24,58,43,.12); }
.alumni-more-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sage, #E8F1E8); }
.alumni-more-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.alumni-more-card:hover .alumni-more-media img { transform: scale(1.06); }
.alumni-more-body { display: flex; padding: 13px 14px 14px; flex-direction: column; gap: 5px; }
.alumni-more-body strong { font-size: 14px; line-height: 1.3; }
.alumni-more-excerpt { color: #4C6655; font-size: 12px; line-height: 1.5; }
.alumni-more-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: #176B3A; font-size: 11px; font-weight: 700; }
@media (max-width: 900px) {
	.alumni-association-layout { grid-template-columns: minmax(0,1fr) minmax(210px,.7fr); gap: 16px; }
}
@media (max-width: 700px) {
	.alumni-more { margin-top: 24px; }
	.alumni-more-grid { grid-template-columns: minmax(0,1fr); gap: 11px; }
	.alumni-more-card { display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: stretch; }
	.alumni-more-media { height: 100%; min-height: 92px; aspect-ratio: auto; }
	.alumni-more-body { justify-content: center; padding: 11px 13px; }
	.alumni-more-excerpt { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	/* The cards below already provide alumni navigation on small screens. */
	.page-alumni-association .related-panel { display: none; }
}
@media (max-width: 700px) {
	.alumni-intro-panel { grid-template-columns: minmax(0,1fr); gap: 16px; margin-bottom: 22px; padding: 19px; }
	.alumni-intro-action { justify-self: stretch; justify-content: center; min-height: 46px; }
	.alumni-intro-copy p { font-size: 17px; }
	.alumni-section-heading { margin-bottom: 11px; }
	.alumni-cta { grid-template-columns: minmax(0,1fr); gap: 15px; padding: 20px; }
	.alumni-cta .button { justify-self: start; }
	.alumni-association-layout { grid-template-columns: minmax(0,1fr); gap: 14px; }
	.alumni-association-contact { grid-template-columns: 38px minmax(0,1fr); padding: 16px; }
	.alumni-association-contact-icon { width: 38px; height: 38px; }
}

/* Mobile homepage: calm, staggered arrival after the full-bleed hero.
   Keep movement small and animate only compositor-friendly properties. */
@media (max-width: 640px) {
	main#main-content .home-row {
		transform: translate3d(0, 14px, 0) scale(.997);
		transition: opacity .72s cubic-bezier(.22,.8,.2,1), transform .72s cubic-bezier(.22,.8,.2,1);
	}
	main#main-content .home-row.is-visible { transform: translate3d(0,0,0) scale(1); }
	main#main-content .home-row .info-grid > .home-card,
	main#main-content .home-row .affairs-grid > .panel,
	main#main-content .home-row .feature-grid > .feature-card {
		opacity: 0;
		transform: translate3d(0, 10px, 0) scale(.99);
		transition: opacity .62s cubic-bezier(.22,.8,.2,1), transform .72s cubic-bezier(.22,.8,.2,1);
	}
	main#main-content .home-row.is-visible .info-grid > .home-card,
	main#main-content .home-row.is-visible .affairs-grid > .panel,
	main#main-content .home-row.is-visible .feature-grid > .feature-card {
		opacity: 1;
		transform: translate3d(0,0,0) scale(1);
	}
	main#main-content .home-row.is-visible .info-grid > .home-card:nth-child(1),
	main#main-content .home-row.is-visible .affairs-grid > .panel:nth-child(1),
	main#main-content .home-row.is-visible .feature-grid > .feature-card:nth-child(1) { transition-delay: .03s; }
	main#main-content .home-row.is-visible .info-grid > .home-card:nth-child(2),
	main#main-content .home-row.is-visible .affairs-grid > .panel:nth-child(2),
	main#main-content .home-row.is-visible .feature-grid > .feature-card:nth-child(2) { transition-delay: .11s; }
	main#main-content .home-row.is-visible .info-grid > .home-card:nth-child(3),
	main#main-content .home-row.is-visible .affairs-grid > .panel:nth-child(3),
	main#main-content .home-row.is-visible .feature-grid > .feature-card:nth-child(3) { transition-delay: .19s; }
	main#main-content .home-row.is-visible .feature-grid > .feature-card:nth-child(4) { transition-delay: .27s; }

	/* A very slight photo settle adds depth without pulling the page around. */
	.about-photo img {
		transform: scale(1.035);
		transition: transform 1.15s cubic-bezier(.2,.7,.2,1);
	}
	.home-row.is-visible .about-photo img { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	main#main-content .home-row .info-grid > .home-card,
	main#main-content .home-row .affairs-grid > .panel,
	main#main-content .home-row .feature-grid > .feature-card,
	.about-photo img {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}