/* After Grade 12 : Campus Green */

:root {
	--bg: #F5F3EC;
	--surface: #FFFFFF;
	--ink: #16211C;
	--accent: #0F3A2E;
	--accent-ink: #FFFFFF;
	--accent-soft: #E6EDE9;
	--highlight: #E39A2B;
	--muted: #4F5D55;
	--line: #DDD9CC;
	--r-sm: 10px;
	--r-md: 14px;
	--r-pill: 999px;
	--s-xs: 6px;
	--s-sm: 12px;
	--s-md: 24px;
	--s-lg: 48px;
	--s-xl: 88px;
	--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
	--container: 1200px;
	--gutter: 20px;
	--shadow-header: 0 6px 24px rgba(15, 58, 46, 0.10);
}

/* Neutralise user agent defaults at zero specificity so component rules always win. */
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd) {
	margin: 0;
}
:where(ul, ol) {
	padding: 0;
	list-style: none;
}
:where(img, svg) {
	display: block;
	max-width: 100%;
}
:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

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

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

body.ag-body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.ag-body h1,
body.ag-body h2,
body.ag-body h3,
body.ag-body h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

body.ag-body h1 { font-size: clamp(2.35rem, 1.4rem + 3.6vw, 4.1rem); line-height: 1.03; }
body.ag-body h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); line-height: 1.08; }
body.ag-body h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.15; }
body.ag-body h4 { font-size: 1.0625rem; line-height: 1.25; }

a {
	color: var(--accent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.ag-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--accent);
	color: var(--accent-ink);
	padding: 12px 18px;
	z-index: 200;
	border-radius: 0 0 var(--r-sm) 0;
}
.ag-skip:focus { left: 0; }

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

/* One shared container. Every section aligns to this left edge. */
.ag-wrap {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
}

.ag-section { padding-block: clamp(56px, 7vw, var(--s-xl)); }
.ag-section--tight { padding-block: clamp(40px, 5vw, 64px); }

.ag-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--s-sm);
}

.ag-lede {
	font-size: 1.125rem;
	color: var(--muted);
	max-width: 62ch;
}

.ag-measure { max-width: 66ch; }

/* Buttons */
.ag-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.ag-btn:hover { background: #0B2C23; color: var(--accent-ink); }
.ag-btn:active { transform: translateY(1px); }

.ag-btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.ag-btn--ghost:hover { background: var(--ink); color: var(--bg); }

.ag-btn--onforest {
	background: var(--bg);
	color: var(--accent);
}
.ag-btn--onforest:hover { background: #FFFFFF; color: var(--accent); }

/* Chips */
.ag-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ag-chip:hover { border-color: var(--accent); color: var(--accent); }
.ag-chip[aria-current="true"],
.ag-chip.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.ag-chip--date {
	background: var(--highlight);
	border-color: var(--highlight);
	color: var(--ink);
	font-weight: 600;
}
.ag-chip--quiet {
	border-color: var(--line);
	color: var(--muted);
}

.ag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Header */
.ag-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.2s ease;
}
.ag-header.is-stuck { box-shadow: var(--shadow-header); }

.ag-header__inner {
	display: flex;
	align-items: center;
	gap: var(--s-md);
	min-height: 72px;
}

.ag-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.03em;
	color: var(--ink);
	text-decoration: none;
	flex: 0 0 auto;
}
.ag-brand b { color: var(--accent); font-weight: 800; }

.ag-nav { margin-left: auto; }
.ag-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
}
.ag-nav__item { position: relative; }

.ag-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 13px;
	border-radius: var(--r-pill);
	color: var(--ink);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
}
.ag-nav__link:hover { background: var(--accent-soft); color: var(--accent); }
.ag-nav__link[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.ag-nav__caret { width: 9px; height: 9px; flex: 0 0 auto; }

.ag-nav__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 262px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 8px;
	box-shadow: 0 14px 34px rgba(15, 58, 46, 0.13);
	display: none;
}
.ag-nav__item.is-open .ag-nav__panel { display: block; }

.ag-nav__panel a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	color: var(--ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
}
.ag-nav__panel a:hover { background: var(--accent-soft); color: var(--accent); }
.ag-nav__panel small {
	display: block;
	color: var(--muted);
	font-weight: 400;
	font-size: 0.8125rem;
}

.ag-header__cta { flex: 0 0 auto; padding: 10px 20px; font-size: 0.9375rem; }

.ag-burger {
	display: none;
	margin-left: auto;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: transparent;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
}

/* Hero */
.ag-hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); }
.ag-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.ag-hero__title { margin-bottom: 18px; }
.ag-hero__title i {
	font-style: normal;
	color: var(--accent);
}
.ag-hero__sub {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	color: var(--muted);
	max-width: 46ch;
	margin-bottom: 28px;
}
.ag-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ag-panel {
	background: var(--accent);
	color: var(--bg);
	border-radius: var(--r-md);
	padding: clamp(24px, 3vw, 34px);
}
.ag-panel h2, .ag-panel h3 { color: #FFFFFF; }
.ag-panel__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(245, 243, 236, 0.72);
	margin-bottom: 18px;
}

.ag-count {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid rgba(245, 243, 236, 0.22);
	color: var(--bg);
	text-decoration: none;
}
.ag-count:last-child { border-bottom: 1px solid rgba(245, 243, 236, 0.22); }
.ag-count__n {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
	line-height: 1;
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
	min-width: 2.2ch;
}
.ag-count__label { font-weight: 600; color: #FFFFFF; }
.ag-count__go { color: rgba(245, 243, 236, 0.72); font-size: 1.25rem; line-height: 1; }
.ag-count:hover .ag-count__go { color: #FFFFFF; }

/* Browse rail: the eight sections, as a list */
.ag-browse__grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
.ag-browse__list {
	border-top: 1px solid var(--line);
}
.ag-browse__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 4px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	transition: padding-left 0.16s ease, color 0.16s ease;
}
.ag-browse__item:hover { color: var(--accent); padding-left: 12px; }
.ag-browse__meta {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--muted);
	white-space: nowrap;
}

/* Full bleed band */
.ag-band {
	background: var(--accent);
	color: var(--bg);
}
.ag-band__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.ag-band h2 { color: #FFFFFF; margin-bottom: 14px; }
.ag-band p { color: rgba(245, 243, 236, 0.86); max-width: 52ch; }
.ag-band__dates {
	display: grid;
	gap: 10px;
}
.ag-daterow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: rgba(245, 243, 236, 0.08);
	border: 1px solid rgba(245, 243, 236, 0.18);
	border-radius: var(--r-md);
	padding: 14px 16px;
	color: var(--bg);
	text-decoration: none;
}
.ag-daterow:hover { background: rgba(245, 243, 236, 0.14); color: var(--bg); }
.ag-daterow strong { font-family: var(--font-display); font-weight: 700; color: #FFFFFF; }

/* Asymmetric two up */
.ag-split {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: clamp(20px, 2.5vw, 32px);
	align-items: stretch;
}
.ag-feature {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 0.16s ease;
}
.ag-feature:hover { border-color: var(--accent); }
.ag-feature p { color: var(--muted); }
.ag-feature__go { margin-top: auto; color: var(--accent); font-weight: 600; }
.ag-feature--art {
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(227, 154, 43, 0.30) 0%, rgba(227, 154, 43, 0) 60%),
		linear-gradient(200deg, #14483A 0%, #0F3A2E 55%, #0B2C23 100%);
	border-color: transparent;
	color: var(--bg);
}
.ag-feature--art h3 { color: #FFFFFF; }
.ag-feature--art p { color: rgba(245, 243, 236, 0.84); }
.ag-feature--art .ag-feature__go { color: var(--highlight); }

/* Field cloud */
.ag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-cloud .ag-chip { font-size: 0.9375rem; padding: 9px 16px; background: var(--surface); }

/* Province columns */
.ag-provinces {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 clamp(20px, 3vw, 48px);
}
.ag-province {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
}
.ag-province:hover { color: var(--accent); }
.ag-province span { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* Page head */
.ag-pagehead {
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(20px, 2.5vw, 32px);
	border-bottom: 1px solid var(--line);
}
.ag-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--muted);
	margin-bottom: 14px;
}
.ag-crumbs a { color: var(--muted); text-decoration: none; }
.ag-crumbs a:hover { color: var(--accent); text-decoration: underline; }

/* Directory */
.ag-dir {
	display: grid;
	grid-template-columns: 246px 1fr;
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
	padding-block: clamp(28px, 3.5vw, 48px);
}
.ag-filters {
	position: sticky;
	top: 92px;
	display: grid;
	gap: var(--s-md);
}
.ag-filters__group h4 {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}
.ag-filters__group .ag-chips { flex-direction: column; align-items: flex-start; }
.ag-filters__group .ag-chip { width: 100%; justify-content: space-between; }

.ag-search {
	display: flex;
	gap: 8px;
	margin-bottom: var(--s-md);
}
.ag-search input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
}
.ag-search input::placeholder { color: var(--muted); }
.ag-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.ag-resultcount {
	font-size: 0.9375rem;
	color: var(--muted);
	margin-bottom: 14px;
}

.ag-rows { border-top: 1px solid var(--line); }
.ag-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 20px;
	align-items: center;
	padding: 18px 4px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: var(--ink);
	transition: padding-left 0.16s ease;
}
.ag-row:hover { padding-left: 10px; }
.ag-row__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.2;
}
.ag-row:hover .ag-row__name { color: var(--accent); }
.ag-row__meta {
	font-size: 0.875rem;
	color: var(--muted);
	margin-top: 3px;
}
.ag-row__aside { display: flex; align-items: center; gap: 8px; }

.ag-empty {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: clamp(28px, 4vw, 48px);
	text-align: left;
}
.ag-empty h3 { margin-bottom: 8px; }
.ag-empty p { color: var(--muted); margin-bottom: 18px; max-width: 52ch; }

.ag-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--s-md);
}
.ag-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
}
.ag-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.ag-pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* Single */
.ag-single {
	display: grid;
	grid-template-columns: 1fr 330px;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
	padding-block: clamp(32px, 4vw, 56px);
}
.ag-prose { max-width: 66ch; }
.ag-prose > * + * { margin-top: 1.1em; }
.ag-prose h2 { margin-top: 1.6em; }
.ag-prose h3 { margin-top: 1.4em; }
.ag-prose ul { list-style: disc; padding-left: 1.2em; }
.ag-prose ul li + li { margin-top: 0.4em; }
.ag-prose a { color: var(--accent); }

.ag-facts {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s-md);
	position: sticky;
	top: 92px;
}
.ag-facts h3 { font-size: 1.0625rem; margin-bottom: 14px; }
.ag-facts dl { display: grid; gap: 0; }
.ag-facts dt {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 14px;
}
.ag-facts dd { margin: 3px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.ag-facts dd a { overflow-wrap: anywhere; }
.ag-facts .ag-btn { width: 100%; justify-content: center; margin-top: 20px; }

.ag-note {
	margin-top: var(--s-md);
	padding: 14px 16px;
	border-left: 3px solid var(--highlight);
	background: var(--surface);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

/* Application windows table */
.ag-apps { display: grid; gap: 10px; }
.ag-approw {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 14px 18px;
	text-decoration: none;
	color: var(--ink);
}
.ag-approw:hover { border-color: var(--accent); }
.ag-approw__name { font-family: var(--font-display); font-weight: 700; }
.ag-approw__type { font-size: 0.8125rem; color: var(--muted); }

/* Footer */
.ag-footer {
	background: var(--ink);
	color: rgba(245, 243, 236, 0.78);
	padding-block: clamp(48px, 6vw, 72px) 32px;
	margin-top: clamp(48px, 6vw, 88px);
}
.ag-footer a { color: rgba(245, 243, 236, 0.78); text-decoration: none; }
.ag-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.ag-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	padding-bottom: 36px;
	border-bottom: 1px solid rgba(245, 243, 236, 0.18);
}
.ag-footer h4 {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(245, 243, 236, 0.55);
	margin-bottom: 14px;
}
.ag-footer li + li { margin-top: 9px; }
.ag-footer__brand {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: #FFFFFF;
	letter-spacing: -0.03em;
	margin-bottom: 12px;
	display: inline-block;
	text-decoration: none;
}
.ag-footer__brand b { color: var(--highlight); }
.ag-footer__blurb { max-width: 40ch; font-size: 0.9375rem; }
.ag-footer__base {
	padding-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	font-size: 0.875rem;
	color: rgba(245, 243, 236, 0.55);
}

/* Reveal on scroll, degrades to visible without JS */
.js .ag-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.js .ag-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .ag-reveal { opacity: 1; transform: none; transition: none; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Responsive. Every multi column layout collapses to one column at 900px. */
@media (max-width: 1080px) {
	.ag-nav__link { padding: 9px 10px; font-size: 0.9rem; }
	.ag-dir { grid-template-columns: 210px 1fr; }
	.ag-single { grid-template-columns: 1fr 300px; }
}

@media (max-width: 920px) {
	.ag-nav, .ag-header__cta { display: none; }
	.ag-burger { display: inline-flex; }
	.ag-header.is-open .ag-nav {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		padding: 12px var(--gutter) 20px;
		box-shadow: var(--shadow-header);
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	.ag-header.is-open .ag-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.ag-header.is-open .ag-nav__link { width: 100%; justify-content: space-between; font-size: 1.0625rem; padding: 12px; }
	.ag-header.is-open .ag-nav__panel {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0 0 8px 12px;
		min-width: 0;
	}
	.ag-header.is-open .ag-nav__caret { display: none; }
}

@media (max-width: 900px) {
	.ag-hero__grid,
	.ag-browse__grid,
	.ag-band__grid,
	.ag-split,
	.ag-dir,
	.ag-single,
	.ag-footer__grid {
		grid-template-columns: 1fr;
	}
	.ag-provinces { grid-template-columns: repeat(2, 1fr); }
	.ag-filters { position: static; }
	.ag-filters__group .ag-chips { flex-direction: row; align-items: center; }
	.ag-filters__group .ag-chip { width: auto; }
	.ag-facts { position: static; }
	.ag-hero__grid { gap: 36px; }
}

@media (max-width: 720px) {
	.ag-filters__group .ag-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}
	.ag-provinces { grid-template-columns: 1fr; }
	.ag-row { grid-template-columns: 1fr; }
	.ag-row__aside { justify-content: flex-start; }
	.ag-approw { grid-template-columns: 1fr; gap: 8px; }
	.ag-count { grid-template-columns: auto 1fr; }
	.ag-count__go { display: none; }
}

/* Artwork.
   The illustrations are vector compositions rather than photographs, so they are
   never cropped: a contained fit sits on a ground that matches the artwork's own
   background, which makes the letterboxing invisible. */
.ag-pagehead--art > .ag-wrap {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.ag-pagehead__art {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

.ag-feature { --feature-pad: clamp(24px, 3vw, 40px); }
.ag-feature__media {
	display: block;
	width: calc(100% + (var(--feature-pad) * 2));
	margin: calc(var(--feature-pad) * -1) calc(var(--feature-pad) * -1) 8px;
	border-radius: var(--r-md) var(--r-md) 0 0;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: var(--art-bg, var(--accent));
}

.ag-facts__art {
	display: block;
	width: calc(100% + (var(--s-md) * 2));
	margin: calc(var(--s-md) * -1) calc(var(--s-md) * -1) var(--s-md);
	border-radius: var(--r-md) var(--r-md) 0 0;
	height: auto;
}

@media (max-width: 900px) {
	.ag-pagehead--art > .ag-wrap { grid-template-columns: 1fr; }
	.ag-pagehead__art { max-width: 300px; }
}