/* ==========================================================================
   VVKA 2026 — page modules
   Styles for the content components used by the History, Projects, Profiles,
   Organisation Structure and Shiksha pages. These classes are not covered by
   the base prototype stylesheet, so they are defined here and enqueued last.

   Naming note: the prototype mixes two section-head conventions (`.sectionhead`
   on the home page and `.section-head` on the inner pages). Both are handled.
   ========================================================================== */

/* --- Shared inner-page shells ------------------------------------------- */

.site-main > section,
.site-main > header.hero {
	display: block;
}

.intro,
.purpose,
.overview,
.forest,
.hostel,
.legacy,
.coverage {
	padding: 95px 0;
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 46px;
}

.section-head h2,
.section-title {
	font-family: "Playfair Display", serif;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	margin: 0;
}

.section-head p {
	max-width: 470px;
	color: var(--muted);
	margin: 0;
}

/* Two-column intro band used by most inner pages. */
.two,
.intro-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 80px;
	align-items: start;
}

.two h2,
.intro-grid h2 {
	font-family: "Playfair Display", serif;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	margin: 0;
}

.two p {
	margin: 0 0 18px;
}

.two p:last-child {
	margin-bottom: 0;
}

/* Quote block reused inside several inner sections. */
.two .quote,
.quote {
	font-size: 24px;
	line-height: 1.35;
	max-width: 640px;
	margin-top: 26px;
	padding-left: 22px;
	border-left: 3px solid var(--gold);
}

/* --- Hero meta strip (History) ------------------------------------------ */

.hero-meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: 55px;
	border-top: 1px solid rgba(24, 36, 31, 0.16);
}

.hero-meta > div {
	padding: 22px 20px 0 0;
	border-right: 1px solid rgba(24, 36, 31, 0.12);
}

.hero-meta > div:last-child {
	border-right: 0;
}

.hero-meta strong {
	display: block;
	font-family: "Playfair Display", serif;
	font-size: 34px;
	color: var(--forest);
	line-height: 1;
}

.hero-meta span {
	display: block;
	font-size: 12px;
	color: var(--muted);
	margin-top: 7px;
}

/* --- Timeline (History) -------------------------------------------------- */

.timeline-wrap {
	border-left: 1px solid #bcc9c0;
	margin-left: 6px;
}

.event {
	position: relative;
	padding: 0 0 46px 44px;
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 26px;
	align-items: start;
}

.event:last-child {
	padding-bottom: 0;
}

.event .year {
	font-family: "Playfair Display", serif;
	font-size: 22px;
	color: var(--gold);
	line-height: 1.2;
}

.event .dot {
	position: absolute;
	left: -6px;
	top: 7px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gold);
}

.event .dot::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px solid rgba(201, 154, 75, 0.35);
}

.event .card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 26px 28px;
	min-height: 0;
}

.event .card:hover {
	transform: none;
	box-shadow: 0 14px 34px rgba(16, 63, 49, 0.07);
}

.event .card h3 {
	font-family: "Playfair Display", serif;
	font-size: 25px;
	line-height: 1.12;
	margin: 0 0 12px;
}

.event .card p {
	font-size: 14px;
	color: var(--muted);
	margin: 0 0 12px;
}

.event .card p:last-child {
	margin-bottom: 0;
}

/* --- Legacy note (History) ----------------------------------------------- */

.legacy {
	background: var(--sand);
}

.legacy-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 80px;
	align-items: center;
}

.legacy-grid h2 {
	font-family: "Playfair Display", serif;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	margin: 0 0 20px;
}

.legacy-note {
	background: var(--forest);
	color: #fff;
	border-radius: 26px;
	padding: 38px;
}

.legacy-note .big {
	font-family: "Playfair Display", serif;
	font-size: 46px;
	line-height: 1;
	margin-bottom: 18px;
	color: var(--gold);
}

.legacy-note p {
	font-size: 14px;
	color: #c1d2c9;
	margin: 0 0 12px;
}

.legacy-note p:last-child {
	margin-bottom: 0;
}

/* --- Project index grid (Projects) --------------------------------------- */

.categories,
.people,
.work,
.sports,
.divisions,
.recognized,
.unrecognized,
.where,
.programs,
.library {
	padding: 95px 0;
}

.people,
.sports,
.library {
	background: var(--sand);
}

.wing-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
}

.wing {
	background: #fff;
	padding: 28px 24px 30px;
	transition: background 0.25s var(--ease);
}

.wing:hover {
	background: #f7faf7;
}

.wing .num {
	font-family: "Playfair Display", serif;
	font-size: 15px;
	color: var(--gold);
	margin-bottom: 14px;
}

.wing h3 {
	font-family: "Playfair Display", serif;
	font-size: 21px;
	line-height: 1.15;
	margin: 0 0 9px;
}

.wing p {
	font-size: 13px;
	color: var(--muted);
	margin: 0;
}

/* Tag list of communities. */
.people-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 80px;
	align-items: start;
}

.people-grid h2 {
	font-family: "Playfair Display", serif;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	margin: 0 0 18px;
}

.people-grid p {
	color: var(--muted);
	margin: 0;
}

.taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.taglist .tag {
	background: #fff;
	border: 1px solid #c8d3cb;
	border-radius: 100px;
	padding: 9px 15px;
	font-size: 12px;
	color: var(--forest);
}

/* Alternating label/copy blocks for each wing. */
.work-section {
	display: grid;
	grid-template-columns: 0.72fr 1.28fr;
	gap: 70px;
	padding: 48px 0;
	border-top: 1px solid var(--line);
}

.work-section:last-child {
	padding-bottom: 0;
}

.work-label h3 {
	font-family: "Playfair Display", serif;
	font-size: 32px;
	line-height: 1.08;
	margin: 0;
}

.work-copy p {
	font-size: 15px;
	line-height: 1.75;
	color: #4f5d55;
	margin: 0 0 16px;
}

.work-copy p:last-child {
	margin-bottom: 0;
}

.highlight {
	font-family: "Playfair Display", serif;
	font-size: 20px;
	line-height: 1.4;
	color: var(--forest);
	padding: 22px 0 22px 22px;
	border-left: 3px solid var(--gold);
	margin: 22px 0;
}

/* Achievements list. */
.achievements {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
	margin-top: 34px;
}

.achievement {
	background: #fff;
	padding: 24px 26px;
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 24px;
	align-items: baseline;
}

.achievement strong {
	font-family: "Playfair Display", serif;
	font-size: 21px;
	color: var(--forest);
}

.achievement span {
	font-size: 14px;
	color: var(--muted);
}

/* --- Profiles: division tables ------------------------------------------- */

.division-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

.division {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 30px;
}

.division h3 {
	font-family: "Playfair Display", serif;
	font-size: 27px;
	margin: 0 0 6px;
}

.division .total {
	font-size: 12px;
	color: var(--gold);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 4px;
}

.district {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(220, 227, 220, 0.6);
}

.district:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.district span {
	font-size: 15px;
}

.district strong {
	font-family: "Playfair Display", serif;
	font-size: 17px;
	color: var(--forest);
	white-space: nowrap;
}

/* --- Profiles: forest figures -------------------------------------------- */

.forest {
	background: var(--forest);
	color: #fff;
}

.forest-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 80px;
	align-items: start;
}

.forest h2 {
	font-family: "Playfair Display", serif;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	margin: 0 0 18px;
}

.forest p {
	color: #bfd0c7;
	font-size: 15px;
	line-height: 1.75;
	margin: 0 0 18px;
}

.forest-number {
	font-family: "Playfair Display", serif;
	font-size: 56px;
	line-height: 1;
	color: var(--gold);
	margin-bottom: 26px;
}

.forest-number span {
	display: block;
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	color: #bfd0c7;
	margin-top: 8px;
	letter-spacing: 0.03em;
}

/* --- Profiles: headline figures and data table --------------------------- */

.bigcards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-bottom: 46px;
}

.bigcard {
	background: var(--sand);
	border-radius: 22px;
	padding: 34px 30px;
}

.bigcard strong {
	display: block;
	font-family: "Playfair Display", serif;
	font-size: 50px;
	line-height: 1;
	color: var(--forest);
}

.bigcard span {
	display: block;
	font-size: 13px;
	color: var(--muted);
	margin-top: 12px;
	line-height: 1.5;
}

.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 560px;
}

.data-table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
	font-weight: 700;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.mini-table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
	font-weight: 700;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.data-table td {
	padding: 14px 18px;
	border-bottom: 1px solid rgba(220, 227, 220, 0.65);
	color: var(--ink);
}

.mini-table td {
	padding: 12px 18px;
	border-bottom: 1px solid rgba(220, 227, 220, 0.65);
	color: var(--ink);
}

.data-table tbody tr:last-child td,
.mini-table tbody tr:last-child td {
	border-bottom: 0;
}

.data-table .totalrow td,
.mini-table .totalrow td {
	background: var(--sand);
	font-weight: 700;
	color: var(--forest);
}

/* Three-column table, so it fits narrow viewports without a scroll container.
   The wide data-table keeps its own .table-wrap scroll. */
.mini-table {
	width: 100%;
	margin-top: 26px;
	border: 1px solid var(--line);
	border-radius: 18px;
	border-collapse: collapse;
}

/* --- Profiles: coverage bar ---------------------------------------------- */

.coverage-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

.coverage h2 {
	font-family: "Playfair Display", serif;
	font-size: clamp(30px, 3.8vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.04em;
	margin: 0 0 18px;
}

.coverage p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--muted);
	margin: 0 0 16px;
}

.bar {
	margin-top: 30px;
}

.bar-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 12px;
}

.bar-top strong {
	font-family: "Playfair Display", serif;
	font-size: 19px;
	color: var(--forest);
	white-space: nowrap;
}

.track {
	height: 10px;
	background: #e3eae4;
	border-radius: 100px;
	overflow: hidden;
}

.fill {
	height: 100%;
	background: var(--forest);
	border-radius: 100px;
}

.note {
	margin-top: 22px;
	font-family: "Playfair Display", serif;
	font-size: 19px;
	color: var(--forest);
	padding-left: 20px;
	border-left: 3px solid var(--gold);
}

/* --- Organisation chart --------------------------------------------------- */

/* The source wrapped the chart in <main class="structure">, which was removed
   along with the nested main element, so the wrapper spacing is applied to the
   chart container itself. */
.org {
	max-width: 940px;
	margin: 0 auto;
	text-align: center;
	padding: 95px 0;
}

.org .section-head {
	margin-bottom: 54px;
}

.level-president {
	display: flex;
	justify-content: center;
}

.person-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 22px 24px;
	min-height: 0;
}

.person-card.primary {
	background: var(--forest);
	border-color: var(--forest);
	padding: 28px 36px;
}

.person-card.primary .role {
	color: var(--gold);
}

.person-card.primary .name {
	font-size: 22px;
	color: #fff;
}

.person-card .role {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--gold);
	font-weight: 700;
	margin-bottom: 9px;
}

.person-card .name {
	font-family: "Playfair Display", serif;
	font-size: 19px;
	line-height: 1.2;
	color: var(--ink);
}

.person-card .names {
	display: grid;
	gap: 5px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ink);
}

/* Vertical drop from the President, then a horizontal rule over the board. */
.connector-main {
	width: 1px;
	height: 34px;
	background: var(--line);
	margin: 0 auto;
}

.board-line {
	height: 1px;
	background: var(--line);
	margin: 0 auto;
	position: relative;
}

.board-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	margin-top: 34px;
}

.board-item {
	display: flex;
}

.board-item .person-card {
	width: 100%;
}

.members {
	margin-top: 40px;
}

.member-card {
	background: var(--sand);
	border-radius: 20px;
	padding: 28px 30px;
	text-align: left;
}

.member-card .role {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--gold);
	font-weight: 700;
	margin-bottom: 14px;
}

.member-card .names {
	display: grid;
	gap: 8px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ink);
}

.member-card .names > div {
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(24, 36, 31, 0.1);
}

.member-card .names > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* --- Shiksha ------------------------------------------------------------- */

.where-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.place {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 28px 26px;
}

.place h3 {
	font-family: "Playfair Display", serif;
	font-size: 24px;
	margin: 0 0 10px;
}

.place p {
	font-size: 13px;
	color: var(--muted);
	margin: 0;
	line-height: 1.6;
}

.program-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.program {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.program:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.program .number {
	font-family: "Playfair Display", serif;
	font-size: 15px;
	color: var(--gold);
	margin-bottom: 16px;
}

.program h3 {
	font-family: "Playfair Display", serif;
	font-size: 24px;
	line-height: 1.14;
	margin: 0 0 12px;
}

.program p {
	font-size: 14px;
	color: var(--muted);
	margin: 0 0 20px;
	line-height: 1.65;
	flex: 1;
}

.program .tag {
	margin-top: auto;
	align-self: flex-start;
	border: 1px solid #c8d3cb;
	border-radius: 100px;
	padding: 7px 13px;
}

.hostel {
	background: var(--sand);
}

.hostel-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 80px;
	align-items: start;
}

.hostel h2 {
	font-family: "Playfair Display", serif;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	margin: 0;
}

.facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
	margin-top: 28px;
}

.fact {
	background: #fff;
	padding: 20px 22px;
}

.fact strong {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
	font-weight: 700;
	margin-bottom: 7px;
}

.fact span {
	font-family: "Playfair Display", serif;
	font-size: 18px;
	color: var(--forest);
	line-height: 1.3;
}

.library-box {
	background: var(--forest);
	color: #fff;
	border-radius: 28px;
	padding: 48px;
	max-width: 860px;
}

.library-box h2 {
	font-family: "Playfair Display", serif;
	font-size: clamp(30px, 3.8vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.04em;
	margin: 0 0 18px;
}

.library-box p {
	color: #bfd0c7;
	font-size: 15px;
	line-height: 1.75;
	margin: 0;
	max-width: 660px;
}

/* --- Shared utility blocks ------------------------------------------------ */

.notice {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 26px 28px;
	color: var(--muted);
	font-size: 15px;
	margin: 0;
}

.page-title {
	font-family: "Playfair Display", serif;
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.045em;
	margin: 0 0 22px;
}

.site-main {
	display: block;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
	.wing-grid,
	.program-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.board-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.where-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1000px) {
	.intro,
	.purpose,
	.overview,
	.forest,
	.hostel,
	.legacy,
	.coverage,
	.categories,
	.people,
	.work,
	.sports,
	.divisions,
	.recognized,
	.unrecognized,
	.where,
	.programs,
	.library {
		padding: 72px 0;
	}

	.two,
	.intro-grid,
	.legacy-grid,
	.people-grid,
	.forest-grid,
	.coverage-grid,
	.hostel-grid,
	.work-section {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.section-head {
		display: block;
		margin-bottom: 36px;
	}

	.section-head p {
		margin-top: 18px;
	}

	.hero-meta {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 0;
	}

	.hero-meta > div:nth-child(2n) {
		border-right: 0;
	}

	.division-grid,
	.bigcards {
		grid-template-columns: 1fr;
	}

	.achievement {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.event {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

@media (max-width: 620px) {
	.intro,
	.purpose,
	.overview,
	.forest,
	.hostel,
	.legacy,
	.coverage,
	.categories,
	.people,
	.work,
	.sports,
	.divisions,
	.recognized,
	.unrecognized,
	.where,
	.programs,
	.library {
		padding: 56px 0;
	}

	.wing-grid,
	.program-grid,
	.where-grid,
	.board-grid,
	.facts {
		grid-template-columns: 1fr;
	}

	.hero-meta {
		grid-template-columns: 1fr;
	}

	.hero-meta > div {
		border-right: 0;
		padding-top: 16px;
	}

	.event {
		padding-left: 28px;
	}

	.library-box,
	.legacy-note,
	.impactcaption {
		padding: 28px;
	}

	.forest-number {
		font-size: 44px;
	}

	.bigcard strong {
		font-size: 40px;
	}

	.library-box {
		padding: 30px 26px;
	}
}

/* --- Motion preference --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.program,
	.wing,
	.event .card {
		transition: none;
	}

	.program:hover {
		transform: none;
	}
}

/* ============================================================
   Hero images, photo grids, credits and empty states
   Added for the real Wikimedia Commons photography.
   ============================================================ */

/* --- page hero that shows the page's hero photograph --- */
.pagehero--media {
	position: relative;
	background-color: var(--forest);
	background-size: cover;
	background-position: center;
	border-bottom: 0;
}

.pagehero--media .container {
	position: relative;
	z-index: 2;
}

.pagehero--media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 44, 34, 0.72) 0%, rgba(10, 44, 34, 0.58) 55%, rgba(10, 44, 34, 0.78) 100%);
}

.pagehero--media h1,
.pagehero--media .pageintro,
.pagehero--media .crumb,
.pagehero--media .eyebrow {
	color: #fff;
}

.pagehero--media .pageintro {
	color: #dfeae3;
}

.pagehero--media .crumb {
	color: #b9cdc2;
}

.pagehero--media .eyebrow {
	color: var(--gold);
}

/* --- responsive photo grid (uses a post's own attachments) --- */
.photogrid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), 1fr);
	gap: 16px;
	margin-top: 38px;
}

.photoitem {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s, box-shadow 0.3s;
}

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

.photoitem a {
	display: block;
	line-height: 0;
	background: #e6ece7;
}

.photoitem-img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.photoitem figcaption {
	padding: 14px 16px 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--forest);
	line-height: 1.4;
}

.photoitem-credit {
	padding: 0 16px 14px;
	font-size: 10px;
	color: var(--muted);
	line-height: 1.4;
}

@media (max-width: 1000px) {
	.photogrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.photogrid {
		grid-template-columns: 1fr;
	}

	.photoitem-img {
		height: 220px;
	}
}

/* --- documentation cards (publications / reports) --- */
.doccards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 40px;
}

.doccard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 26px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.doccard .doctype {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 800;
	color: var(--gold);
}

.doccard h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 27px;
	line-height: 1.1;
	margin: 0;
}

.doccard p {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
}

.doccard .docmeta {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 11px;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.doccard .docstatus {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 100px;
	background: #eef3ef;
	color: var(--forest);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 1000px) {
	.doccards {
		grid-template-columns: 1fr;
	}
}

/* --- honest empty / not-yet-published state --- */
.emptystate {
	background: #fff;
	border: 1px dashed #c3d0c7;
	border-radius: 26px;
	padding: 46px 40px;
	text-align: center;
}

.emptystate .eyebrow {
	margin-bottom: 12px;
}

.emptystate h2 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 32px;
	line-height: 1.1;
	margin: 0 0 14px;
}

.emptystate p {
	color: var(--muted);
	max-width: 620px;
	margin: 0 auto 8px;
	font-size: 15px;
}

.emptystate .pillrow {
	justify-content: center;
}

.emptystate .btn {
	display: inline-block;
	margin-top: 22px;
}

/* --- image credits (Creative Commons attribution) --- */
.credits-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 30px;
	font-size: 13px;
}

.credits-table th {
	text-align: left;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--muted);
	font-weight: 800;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
}

.credits-table td {
	padding: 14px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	color: var(--ink);
}

.credits-table img {
	width: 84px;
	height: 60px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.credits-table .credit-name {
	color: var(--muted);
	font-size: 12px;
}

.table-wrap {
	overflow-x: auto;
}

@media (max-width: 620px) {
	.credits-table {
		min-width: 560px;
	}
}
/* --- gallery album cards --- */
.albumgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 40px;
}

.albumcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 26px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.3s, box-shadow 0.3s;
}

.albumcard:hover {
	transform: translateY(-7px);
	box-shadow: var(--shadow);
}

.albumimg {
	height: 200px;
	background-color: #dfe7e1;
	background-position: center;
	background-size: cover;
}

.albumbody {
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding-bottom: 60px;
}

.albumbody h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 24px;
	line-height: 1.1;
	margin: 0;
}

.albumbody p {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
}

.albumcount {
	margin-top: auto;
	padding-top: 14px;
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

.albumcard .arrow {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	color: var(--forest);
	background: #fff;
}

@media (max-width: 1000px) {
	.albumgrid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.albumgrid {
		grid-template-columns: 1fr;
	}
}
/* --- two-column content rows (ACF page sections) --- */
.clientcontent {
	max-width: 78ch;
}

.clientcontent p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink);
}

.clientcontent h2,
.clientcontent h3,
.clientcontent h4 {
	font-family: "Playfair Display", Georgia, serif;
	line-height: 1.2;
	margin: 26px 0 12px;
}

.clientcontent h2 {
	font-size: 30px;
}

.clientcontent h3 {
	font-size: 24px;
}

.clientcontent > *:first-child {
	margin-top: 0;
}

.clientcontent ul,
.clientcontent ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.clientcontent li {
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 8px;
}

.clientcontent img {
	max-width: 100%;
	height: auto;
	border-radius: 18px;
}

.clientcontent a:not(.btn) {
	color: var(--forest);
	font-weight: 600;
}

.herotag {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.35;
	color: var(--forest);
	margin: 0 0 18px;
	max-width: 26ch;
}

.row-section {
	padding: 70px 0;
}

.row {
	display: grid;
	gap: 54px;
	align-items: center;
}

.row--media-right .rowtext {
	order: 1;
}

.row--media-right .rowmedia {
	order: 2;
}

.row--media-left .rowmedia {
	order: 1;
}

.row--media-left .rowtext {
	order: 2;
}

.rowtext h2 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.15;
	margin: 6px 0 16px;
}

.rowtext p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--muted);
}

.rowtext p:last-child {
	margin-bottom: 0;
}

.rowtext ul {
	margin: 0 0 18px;
	padding-left: 20px;
}

.rowtext li {
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 8px;
}

.rowtext a:not(.btn) {
	color: var(--forest);
	font-weight: 600;
}

.rowmedia-img,
.rowmedia img {
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: 28px;
	display: block;
}

.rowmedia-fallback {
	height: 100%;
	min-height: 300px;
	max-height: 460px;
	border-radius: 28px;
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 55%),
		linear-gradient(140deg, var(--sand) 0%, var(--forest2) 100%);
}

/* --- committee / people cards --- */
.people {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 34px;
}

.person {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.person-role {
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gold);
}

.person-name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 20px;
	line-height: 1.2;
}

.person-blurb {
	font-size: 14px;
	color: var(--muted);
}

@media (max-width: 1100px) {
	.people {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.row {
		gap: 30px;
	}

	.row--media-right .rowtext,
	.row--media-left .rowtext {
		order: 1;
	}

	.row--media-right .rowmedia,
	.row--media-left .rowmedia {
		order: 2;
	}

	.people {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.people {
		grid-template-columns: 1fr;
	}
}
/* --- news list --- */
.newslist {
	display: grid;
	gap: 26px;
}

.newsitem {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 28px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 22px;
}

.newsthumb img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

.newsbody h2 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 25px;
	line-height: 1.2;
	margin: 6px 0 10px;
}

.newsbody h2 a {
	color: var(--forest);
}

.newsexcerpt {
	font-size: 16px;
	color: var(--muted);
	margin-bottom: 12px;
}

.newsbody .arrow {
	font-weight: 700;
	color: var(--forest);
	font-size: 15px;
}

/* --- image credits --- */
.creditlist {
	display: grid;
	gap: 20px;
}

.credit {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 26px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 22px;
}

.creditthumb img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}

.creditbody h2 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 21px;
	line-height: 1.25;
	margin: 0 0 14px;
}

.creditmeta {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 8px 18px;
	margin: 0;
	font-size: 15px;
}

.creditmeta dt {
	font-weight: 700;
	color: var(--gold);
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding-top: 2px;
}

.creditmeta dd {
	margin: 0;
	color: var(--ink);
}

.creditmeta a {
	color: var(--forest);
	font-weight: 600;
	word-break: break-word;
}

@media (max-width: 800px) {
	.newsitem,
	.credit {
		grid-template-columns: 1fr;
	}

	.creditmeta {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.creditmeta dd {
		margin-bottom: 10px;
	}
}