@charset "utf-8";
/* ==========================================================================
   Clean Rural Elections 2027 — ICAC dedicated website
   Design system derived from the ADU key visual (8317_REE_website).
   Self-contained: no framework dependency.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
	/* Palette sampled from the key visual and the ICAC title lockup */
	--green: #006f33;			/* brand green, taken from the brush title  */
	--green-deep: #004a21;
	--green-ink: #013317;
	--green-soft: #e4f0e5;
	--green-leaf: #4e8f4b;

	--teal: #2e90a8;			/* the harbour water                        */
	--teal-deep: #1d6a80;
	--teal-soft: #e0f0f5;

	--sky: #d8edf6;

	/* The fruit, taken a shade deeper than the artwork so that it clears
	   WCAG AA as small text on white (link hover, badges). */
	--pomegranate: #b53a1e;
	--pomegranate-soft: #fceee8;

	--ink: #1d2b22;
	--ink-muted: #4f6257;
	--line: rgba(0, 111, 51, .16);

	--paper-tint: #f6faf6;

	/* Typography — fluid, driven by a single root scale */
	--scale: 1.1;
	--fs-base: calc(1rem * var(--scale));
	--fs-sm: calc(.875rem * var(--scale));
	--fs-lg: calc(1.125rem * var(--scale));

	--font-sans: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans TC",
		"PingFang TC", "Microsoft JhengHei", sans-serif;
	--font-serif: Georgia, "Times New Roman", "Noto Serif TC",
		"PingFang TC", "Microsoft JhengHei", serif;

	/* Geometry */
	--radius-sm: 8px;
	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	--shell: 1180px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--header-h: 68px;

	--shadow-sm: 0 1px 2px rgba(1, 51, 23, .06), 0 2px 8px rgba(1, 51, 23, .06);
	--shadow: 0 2px 4px rgba(1, 51, 23, .05), 0 12px 28px rgba(1, 51, 23, .10);
	--shadow-lg: 0 4px 10px rgba(1, 51, 23, .07), 0 24px 56px rgba(1, 51, 23, .16);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* Same Unicode punctuation (，、。．（） etc.) sits bottom-left / full-height
   in Mainland SC fonts and centred in HK/TW fonts. Pin those code points to
   JhengHei / PingFang HK / Noto Sans HK so 简 pages match 繁. */
@font-face {
	font-family: "RRE CJK Punct";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: local("Microsoft JhengHei"),
	     local("Microsoft JhengHei UI"),
	     local("PingFang HK"),
	     local("PingFang TC"),
	     url("../fonts/noto-sans-hk-punct.woff2") format("woff2");
	unicode-range: U+00B7, U+2013-2014, U+2026, U+2027, U+3000-3011, U+3014-3015,
		U+301C, U+FF01, U+FF08-FF09, U+FF0C, U+FF0E, U+FF1A-FF1B, U+FF1F,
		U+FF3B, U+FF3D, U+FF5B, U+FF5D-FF5E;
}

/* Traditional Chinese — CJK first so Segoe UI → YaHei linking cannot steal
   punctuation (and body glyphs) into bottom-left SC metrics. */
html:lang(zh-Hant) {
	--font-sans: "RRE CJK Punct", "Microsoft JhengHei", "PingFang HK", "PingFang TC",
		"Noto Sans HK", "Noto Sans TC", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-serif: "RRE CJK Punct", "Noto Serif TC", "PingFang TC", "Microsoft JhengHei",
		Georgia, "Times New Roman", serif;
}

/* Simplified Chinese still needs SC body fonts for simplified glyphs; punctuation
   comes from RRE CJK Punct (centred) via unicode-range above.
   Fullwidth （） in the same face still follow OpenType locl: zh-Hans pulls the
   tall Western forms, zh-Hant/HK the centred forms used on 繁 pages. Force the
   latter for shaping only — html lang stays zh-Hans for content/accessibility. */
html:lang(zh-Hans) {
	--font-sans: "RRE CJK Punct", "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
		"Hiragino Sans GB", "Noto Sans CJK SC", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-serif: "RRE CJK Punct", "Noto Serif SC", "PingFang SC", "Microsoft YaHei",
		Georgia, "Times New Roman", serif;
	-webkit-locale: "zh-Hant";
	font-language-override: "ZHH";
}

html[data-fontsize="large"]   { --scale: 1.25; }
html[data-fontsize="largest"] { --scale: 1.42; }

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--ink);
	background: var(--paper-tint);
	overflow-x: hidden;
}

/* A soft paper wash over the artwork, so pages stay tied to the key visual
   without bleaching out to flat white. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(246, 250, 246, .9) 0%, rgba(251, 250, 238, .92) 42%, rgba(232, 242, 236, .94) 100%),
		url("../img/2027/kv-backdrop.jpg") center top / cover no-repeat;
	pointer-events: none;
}

img { max-width: 100%; height: auto; border: 0; }
svg { display: block; }

a {
	color: var(--green);
	text-decoration: none;
}
a:hover, a:focus-visible { color: var(--pomegranate); }
@media (min-width: 721px) {
	a[href^="tel:"] { cursor: default; }
	.contact a[href^="tel:"]:hover,
	.contact a[href^="tel:"]:focus-visible { color: var(--green); }
}

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

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.3;
	color: var(--green-ink);
	margin: 0 0 .6em;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--green-deep); }

hr {
	border: 0;
	height: 1px;
	background: var(--line);
	margin: 2.5rem 0;
}

.nowrap { white-space: nowrap; }
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------ skip link -- */
.skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -140%);
	z-index: 200;
	padding: .7rem 1.4rem;
	background: var(--green);
	color: #fff;
	font-weight: 700;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	text-decoration: none;
	transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ---------------------------------------------------------------- shell -- */
.shell {
	width: min(100% - (var(--gutter) * 2), var(--shell));
	margin-inline: auto;
}
.shell--narrow { --shell: 900px; }

/* --------------------------------------------------------------- header -- */
.site-header {
	/* Wider than the content shell so the seven full-length menu labels fit. */
	--shell: 1340px;
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--header-h);
	width: min(100% - (var(--gutter) * 2), var(--shell));
	margin-inline: auto;
}

.brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: auto;
}
.brand__lockup {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.brand img {
	height: clamp(30px, 3.4vw, 38px);
	width: auto;
}

/* ----------------------------------------------------------- navigation -- */
.nav {
	display: flex;
	align-items: center;
	gap: .15rem;
}
.nav a {
	position: relative;
	display: block;
	padding: .55rem .72rem;
	border-radius: var(--radius-sm);
	font-size: calc(.92rem * var(--scale));
	font-weight: 600;
	line-height: 1.25;
	color: var(--green-ink);
	text-decoration: none;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav a::after {
	content: "";
	position: absolute;
	left: .72rem;
	right: .72rem;
	bottom: .28rem;
	height: 2px;
	border-radius: 2px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--ease);
}
.nav a:hover { background: var(--green-soft); color: var(--green-deep); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--green); }

.nav__break::before { content: " "; }

/* English labels are much longer than Chinese. Stack each item on its
   designed break, a little smaller, with clearer gaps. */
html:lang(en) .site-header { --shell: 1480px; }
html:lang(en) .brand img { height: 34px; }
html:lang(en) .nav { gap: .15rem .4rem; }
html:lang(en) .nav a {
	padding: .4rem .3rem .5rem;
	font-size: calc(.9rem * var(--scale));
	line-height: 1.2;
	text-align: center;
}
html:lang(en) .nav__break { display: block; }
html:lang(en) .nav__break::before { content: none; }
html:lang(en) .nav a::after { left: .45rem; right: .45rem; bottom: .22rem; }

.header__tools { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: 40px;
	height: 40px;
	padding: 0 .7rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--green-ink);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); }
.icon-btn[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nav-toggle { display: none; }

/* --------------------------------------------------------- tools popup --- */
.popover {
	position: absolute;
	right: var(--gutter);
	top: calc(var(--header-h) - 4px);
	width: min(300px, calc(100vw - 2rem));
	padding: 1.1rem 1.2rem 1.2rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	z-index: 120;
}
.popover[hidden] { display: none; }
.popover__label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-muted);
	margin-bottom: .5rem;
}
.popover__label + .segmented { margin-bottom: 1.1rem; }
.popover__label + .segmented:last-child { margin-bottom: 0; }

.segmented {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 4px;
	padding: 4px;
	background: var(--green-soft);
	border-radius: var(--radius-pill);
}
.segmented button {
	padding: .45rem .3rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--green-deep);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 700;
	cursor: pointer;
	transition: background-color .18s var(--ease), color .18s var(--ease);
}
.segmented button:hover { background: rgba(255, 255, 255, .7); }
.segmented button[aria-pressed="true"] {
	background: var(--green);
	color: #fff;
	box-shadow: var(--shadow-sm);
}
.segmented button .a-sm { font-size: .78em; }
.segmented button .a-lg { font-size: 1.22em; }

/* ------------------------------------------------------- mobile drawer --- */
.drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 130;
	background: rgba(1, 51, 23, .45);
	opacity: 0;
	visibility: hidden;
	/* Flip visibility instantly on open and only after the fade on close, so
	   the panel is focusable the moment it is shown. */
	transition: opacity .3s var(--ease), visibility 0s .3s;
}
.drawer-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s var(--ease), visibility 0s 0s;
}

.drawer {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 140;
	width: min(320px, 84vw);
	padding: 1.25rem 1.1rem 2rem;
	background: #fff;
	box-shadow: var(--shadow-lg);
	transform: translateX(-100%);
	transition: transform .3s var(--ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.drawer.is-open { transform: none; }
.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding-bottom: 1rem;
	margin-bottom: .75rem;
	border-bottom: 1px solid var(--line);
}
/* The lockup is a wide artwork. Let it shrink beside the close button
   instead of keeping its full width and painting over the ×. */
.drawer__head .brand__lockup {
	flex: 1 1 auto;
	min-width: 0;
}
.drawer__head .brand__lockup img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 34px;
	object-fit: contain;
	object-position: left center;
}
.drawer__head .icon-btn { flex: 0 0 auto; }
.drawer nav { display: flex; flex-direction: column; gap: .15rem; }
.drawer nav a {
	padding: .8rem .85rem;
	border-radius: var(--radius-sm);
	color: var(--green-ink);
	font-weight: 600;
	text-decoration: none;
}
.drawer nav a:hover { background: var(--green-soft); }
.drawer nav a[aria-current="page"] {
	background: var(--green);
	color: #fff;
}

@media (max-width: 1199px) {
	.site-header__bar > .nav { display: none; }
	.nav-toggle { display: inline-flex; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: clamp(360px, 54vw, 640px);
	padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3.5rem, 9vw, 6.5rem);
	overflow: hidden;
	background: var(--sky);
}
.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
}
/* A light wash at the top and bottom only, so the title sits on the painting. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .34) 100%);
}
.hero__inner { text-align: center; }

.hero__title {
	--title-w: min(1120px, 86vw);
	width: fit-content;
	margin: 0 auto clamp(1rem, 2.5vw, 1.6rem);
}
html:lang(en) .hero__title { --title-w: min(1120px, 86vw); }
.hero__lockup {
	display: block;
	width: var(--title-w);
	height: auto;
}
/* Torn watercolour-paper edge between the hero and the page body. */
.hero__edge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 1;
	width: 100%;
	height: clamp(38px, 5vw, 72px);
	fill: var(--paper-tint);
}

/* ------------------------------------------------------------ page head -- */
.page-head {
	--edge-h: clamp(30px, 4vw, 54px);
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(168px, 18vw, 240px);
	padding: 1.25rem 0 calc(var(--edge-h) + .6rem);
	overflow: hidden;
	background: var(--sky);
}
.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.page-head__media img.page-head__art { object-position: center; }
.page-head .shell { position: relative; z-index: 1; }
.page-head h1 {
	display: inline-block;
	position: relative;
	max-width: 100%;
	margin: 0;
	padding: .12em .4em;
	font-family: var(--font-serif);
	font-size: clamp(1.85rem, 4vw, 2.7rem);
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 2px rgba(1, 51, 23, .55);
}
.page-head h1::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: .35em;
	background: rgba(1, 51, 23, .28);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.page-head__edge {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	width: 100%;
	height: var(--edge-h);
	fill: var(--paper-tint);
}

/* -------------------------------------------------------------- sections -- */
.section {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	background:
		radial-gradient(70% 55% at 8% 0%, rgba(228, 240, 229, .55), transparent 60%),
		radial-gradient(65% 50% at 96% 100%, rgba(224, 240, 245, .45), transparent 58%),
		linear-gradient(180deg, rgba(246, 250, 246, .55), rgba(251, 250, 238, .35) 55%, rgba(232, 242, 236, .4));
}
.section--tint {
	background:
		radial-gradient(75% 60% at 12% 0%, rgba(228, 240, 229, .72), transparent 62%),
		radial-gradient(60% 45% at 90% 100%, rgba(224, 240, 245, .5), transparent 55%),
		linear-gradient(180deg, rgba(228, 240, 229, .7), rgba(246, 250, 246, .35) 70%, transparent);
}
.section__intro { font-size: var(--fs-lg); }

/* Card body copy matches the lead intro — same size and measure, so a
   section__intro and the plain <p> under it line up instead of stepping down. */
.card > p,
.card .media-row > div > p {
	font-size: var(--fs-lg);
}

/* Body copy fills the card in every language, so an English paragraph ends
   on the same right edge as the Chinese one. */
.section__intro, .card p, .card li { max-width: none; }
html:lang(en) .section__intro,
html:lang(en) .card p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
}
html:lang(zh) .section__intro,
html:lang(zh) .card p {
	text-align: justify;
	text-justify: inter-character;
}

.card .contact p,
html:lang(en) .card .contact p,
html:lang(zh) .card .contact p {
	font-size: inherit;
	max-width: none;
	text-align: start;
}
.card .assurance p,
html:lang(en) .card .assurance p,
html:lang(zh) .card .assurance p {
	max-width: none;
	text-align: center;
}

/* Section heading with a hand-painted brush underline. */
.brush-head {
	position: relative;
	display: inline-block;
	margin-bottom: 1.6rem;
	padding-bottom: .55rem;
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
}
.brush-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	min-width: 88px;
	height: 9px;
	background: var(--green);
	opacity: .85;
	/* An irregular, dry-brush stroke rather than a ruled line. */
	clip-path: polygon(0 42%, 4% 18%, 12% 46%, 22% 20%, 33% 48%, 46% 22%,
		58% 50%, 70% 24%, 82% 52%, 92% 26%, 100% 44%, 100% 82%, 88% 62%,
		76% 88%, 63% 60%, 50% 86%, 37% 58%, 25% 84%, 14% 56%, 5% 80%, 0 60%);
}
.brush-head--teal::after { background: var(--teal); }
/* This English heading is one line on a wide screen. */
@media (min-width: 960px) {
	html:lang(en) .brush-head--fit {
		white-space: nowrap;
		font-size: 1.5rem;
	}
}

.sub-head {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 2.4rem 0 1rem;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	color: var(--green-deep);
}
/* A single painted leaf marks each sub-heading. */
.sub-head::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border-radius: 2px 100% 2px 100%;
	background: linear-gradient(135deg, var(--green-leaf), var(--green));
	transform: rotate(-8deg);
}
.sub-head:first-child { margin-top: 0; }

/* ----------------------------------------------------------------- cards -- */
/* Watercolour paper: a painted wash along the top edge and faint colour
   blooms in the corners, like a sheet pinned to a village notice board. */
.card {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3.2vw, 2.25rem) clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2rem);
	background:
		radial-gradient(55% 60% at 100% 0%, rgba(78, 143, 75, .09), transparent 70%),
		radial-gradient(45% 50% at 0% 100%, rgba(46, 144, 168, .07), transparent 70%),
		linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(251, 250, 238, .92));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 7px;
	background: linear-gradient(90deg, var(--green-leaf), var(--green) 45%, var(--teal) 100%);
	opacity: .8;
	clip-path: polygon(0 0, 100% 0, 100% 55%, 93% 85%, 84% 50%, 74% 90%, 63% 55%,
		52% 95%, 41% 60%, 30% 92%, 19% 52%, 9% 88%, 0 60%);
}
.card + .card, .card + .hotline, .card + .brush-head { margin-top: 1.75rem; }
.grid > .card + .card { margin-top: 0; }
.section--tint .card::before { background: linear-gradient(90deg, var(--teal), var(--teal-deep) 50%, var(--green)); }

.grid {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.75rem);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .grid--2 { grid-template-columns: 1fr; } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Home quick-navigation tiles: watercolour postcards. Each shows the same
   painting as the header of the page it opens, so the view carries through. */
.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	color: var(--green-ink);
	text-decoration: none;
	overflow: hidden;
	transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.tile:hover, .tile:focus-visible {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
	border-color: rgba(0, 111, 51, .4);
	color: var(--green-deep);
}

.tile__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: var(--sky);
}
.tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.tile:hover .tile__media img { transform: scale(1.06); }
.tile__edge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 18px;
	fill: #fff;
}

.tile__body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
	padding: 0 1.4rem 1.35rem;
}
.tile__icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	margin-top: -30px;
	margin-bottom: .2rem;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
	color: var(--green);
	transition: background-color .25s var(--ease), color .25s var(--ease);
}
.tile__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile:hover .tile__icon { background: var(--green); color: #fff; }

.tile__title { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; line-height: 1.35; }
.tile__text { font-size: var(--fs-sm); color: var(--ink-muted); }

/* -------------------------------------------------------- photo frames --- */
/* Matches the "photo frame" treatment in the print collateral: a white mat,
   a soft watercolour paper edge and a gentle lift on hover. */
.frame {
	display: inline-block;
	max-width: 100%;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	line-height: 0;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.frame img { border-radius: calc(var(--radius) - 8px); }
a.frame:hover, a.frame:focus-visible { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow); }

.media-row__media .frame {
	display: block;
	width: 220px;
	height: 300px;
	aspect-ratio: auto;
	transform: none;
}
.media-row__media .frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.media-row--reverse .media-row__media .frame { transform: none; }
.media-row__media a.frame:hover, .media-row__media a.frame:focus-visible {
	transform: translateY(-4px);
}
/* Landscape leaflets keep the shared 220×300 frame. Zoom past the
   empty side margins so both pages are larger. The JPEG is unchanged. */
.media-row--leaflet .media-row__media .frame {
	overflow: hidden;
}
.media-row--leaflet .media-row__media .frame img {
	transform: scale(1.54);
}

/* The eight cartoon posters, shown as one thumbnail. The source is 1024px
   wide, so it must not be stretched to the full column. The frame opens the PDF. */
.cartoon-strip {
	width: min(100%, 720px);
	max-width: 720px;
	margin-inline: auto;
}
.cartoon-strip .frame {
	display: block;
	width: 100%;
}
.cartoon-strip .frame img {
	width: 100%;
	height: auto;
	display: block;
}
.cartoon-strip a.frame:hover,
.cartoon-strip a.frame:focus-visible {
	transform: none;
	box-shadow: none;
}

.figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	margin: 0;
	text-align: center;
}
/* Side-by-side figures (e.g. game sets) share one frame height. */
.grid .figure {
	align-items: center;
	width: 100%;
	max-width: none;
	height: 100%;
	margin-inline: auto;
}
.grid .figure .frame {
	display: block;
	width: 220px;
	height: 300px;
	max-width: none;
	aspect-ratio: auto;
}
.grid .figure .frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.grid .figure figcaption {
	white-space: nowrap;
}
.figure figcaption {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--green-deep);
	line-height: 1.5;
}

/* Briefing-session photos: landscape, side by side. */
.briefing-photos {
	margin-top: 1.5rem;
}
.briefing-photos .frame {
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	overflow: hidden;
}
.briefing-photos .frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius);
}
.briefing-photos a.frame:hover,
.briefing-photos a.frame:focus-visible {
	transform: translateY(-3px);
}
.figure figcaption .figure__desc {
	display: block;
	font-weight: 400;
	color: var(--ink-muted);
}

/* A media row: artwork on one side, copy on the other. */
.media-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	align-items: start;
}
.media-row--reverse { grid-template-columns: 220px 1fr; }
.media-row--reverse .media-row__media { order: -1; }
/* Same 220×300 frame as the other thumbnails. The poster file is a
   wide JPEG with the portrait artwork inset, so zoom to that artwork.
   The file itself is not resized. */
.media-row--poster .media-row__media .frame {
	overflow: hidden;
}
.media-row--poster .media-row__media .frame img {
	object-fit: cover;
	object-position: 51% 50%;
	transform: scale(1.22);
}
/* Enquiries "Reports" photo: no tilt, larger and clearly landscape. */
.media-row--plain { grid-template-columns: minmax(240px, 340px) 1fr; }
.media-row--plain.media-row--reverse { grid-template-columns: minmax(240px, 340px) 1fr; }
.media-row--plain .frame,
.media-row--plain.media-row--reverse .media-row__media .frame {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	background: transparent;
	transform: none;
}
.media-row--plain .frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius);
}
.media-row--plain a.frame:hover,
.media-row--plain a.frame:focus-visible,
.media-row--plain.media-row--reverse .media-row__media a.frame:hover,
.media-row--plain.media-row--reverse .media-row__media a.frame:focus-visible {
	transform: translateY(-3px);
}
@media (max-width: 720px) {
	.media-row,
	.media-row--reverse,
	.media-row--plain,
	.media-row--plain.media-row--reverse { grid-template-columns: 1fr; }
	.media-row--reverse .media-row__media { order: -1; }
	.media-row__media {
		display: flex;
		justify-content: center;
		justify-self: center;
	}
	.media-row--plain .media-row__media { max-width: none; width: 100%; }
	.audio-card audio,
	.audio-card .btn { flex: 1 1 100%; max-width: none; }
}

/* --------------------------------------------------------------- buttons -- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .68rem 1.35rem;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--green);
	color: #fff;
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease),
		border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover, .btn:focus-visible {
	background: var(--green-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.btn--outline { background: #fff; border-color: var(--green); color: var(--green-deep); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--green); color: #fff; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.1rem;
}
.btn-row--center { justify-content: center; }

/* ------------------------------------------------------------ link list --- */
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.link-list a {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .9rem 1.1rem;
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--green);
	border-radius: var(--radius-sm);
	color: var(--green-ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s var(--ease), transform .2s var(--ease), border-left-color .2s var(--ease);
}
.link-list a:hover {
	background: var(--green-soft);
	border-left-color: var(--pomegranate);
	transform: translateX(3px);
	color: var(--green-deep);
}
.link-list svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--green); }
.link-list span { flex: 1; }

/* Related links as a row of cards, lined up with the tiles above. */
.link-list--cards {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(.8rem, 2vw, 1.25rem);
}
.link-list--cards a {
	height: 100%;
	padding: 1.1rem 1.25rem;
	border-left: 1px solid var(--line);
	border-top: 4px solid var(--teal);
	border-radius: var(--radius);
	line-height: 1.5;
	box-shadow: var(--shadow-sm);
}
.link-list--cards a:hover {
	border-left-color: var(--line);
	border-top-color: var(--pomegranate);
	transform: translateY(-3px);
}
.link-list--cards svg { align-self: flex-start; margin-top: .15rem; color: var(--teal-deep); }
/* Keep the quoted site name on one line on desktop. Narrow screens may wrap it. */
@media (min-width: 1100px) {
	html:lang(en) .link-list--cards .link-phrase { white-space: nowrap; }
}

/* --------------------------------------------------------- numbered list -- */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.steps li {
	counter-increment: step;
	position: relative;
	padding: .2rem 0 .2rem 3rem;
}
.steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: .2rem;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	/* A hand-painted dab of ink rather than a perfect circle. */
	border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%;
	background: radial-gradient(circle at 34% 30%, var(--green-leaf), var(--green) 72%);
	box-shadow: 0 0 0 3px var(--green-soft);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1;
}

/* -------------------------------------------------------- contact blocks -- */
.contact {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.15rem 1.3rem;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 4px solid var(--teal);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	height: 100%;
}
.contact__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--teal-soft);
	border: 1px solid rgba(46, 144, 168, .25);
	color: var(--teal-deep);
}
.contact__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact__label {
	display: block;
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--ink-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}
/* External office links in contact cards: blue so they read as hyperlinks. */
.contact a:not([href^="tel:"]) {
	color: #0066cc;
	font-weight: 700;
}
.contact a:not([href^="tel:"]):hover,
.contact a:not([href^="tel:"]):focus-visible {
	color: var(--pomegranate);
}
@media (min-width: 1100px) {
	html:lang(en) .card--reports {
		width: min(1480px, calc(100vw - 2.5rem));
		max-width: none;
		left: 50%;
		transform: translateX(-50%);
	}
	html:lang(en) .reports-grid {
		grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
	}
	html:lang(en) .hotline-name { white-space: nowrap; }
	html:lang(en) .hours-line {
		white-space: nowrap;
		font-size: .9em;
	}
}

/* ------------------------------------------------------- hotline panel -- */
/* Village notice board: harbour watercolour behind white paper call cards. */
.hotline {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	align-items: center;
	padding: clamp(1.5rem, 3.4vw, 2.6rem) clamp(1.3rem, 3vw, 2.2rem)
	         clamp(2.1rem, 4.5vw, 3rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, rgba(251, 250, 230, .94), rgba(224, 240, 245, .92) 55%, rgba(228, 240, 229, .94));
	color: var(--green-ink);
	box-shadow: var(--shadow);
}
.hotline--plain { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
.hotline--plain > .section__intro { margin: 0; }
.hotline--cards { grid-template-columns: 1fr; }
.hotline--cards .hotline__cards { gap: clamp(1rem, 2.4vw, 1.4rem); }
.hotline--cards .hotline-card {
	padding: clamp(1.35rem, 2.8vw, 1.75rem) clamp(1.4rem, 3vw, 1.85rem)
	         clamp(1.45rem, 3vw, 1.85rem) clamp(1.5rem, 3.2vw, 2rem);
	min-height: 100%;
}
.hotline--cards .hotline-card__number { font-size: clamp(1.55rem, 2.8vw, 1.95rem); }
@media (max-width: 980px) { .hotline { grid-template-columns: 1fr; } }

.hotline__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}
.hotline__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	opacity: .72;
	filter: blur(1.5px);
}
.hotline__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 38%, rgba(255, 255, 255, .08) 100%);
}
.hotline__edge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 1;
	width: 100%;
	height: clamp(28px, 3.5vw, 42px);
	fill: var(--paper-tint);
	pointer-events: none;
}
/* Inside a card the edge would be painted in the wrong colour. */
.card .hotline__edge { display: none; }
.card .hotline { padding-bottom: clamp(1.5rem, 3.4vw, 2.6rem); box-shadow: none; }

.hotline__intro {
	position: relative;
	z-index: 2;
	padding: .15rem 0;
}
.hotline__intro::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -.85rem -1.1rem -.95rem -.35rem;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .82);
	filter: blur(10px);
}
.hotline__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: .7rem;
	padding: .28rem .9rem .28rem .65rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .85);
	border: 1px solid rgba(0, 111, 51, .22);
	color: var(--green-deep);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: var(--shadow-sm);
}
.hotline__eyebrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hotline__title {
	margin: 0 0 .55rem;
	font-family: var(--font-serif);
	font-size: clamp(1.35rem, 2.6vw, 1.95rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--green-ink);
	text-shadow: 0 1px 8px rgba(255, 255, 255, .9);
}
.hotline__lead {
	margin: 0;
	max-width: 36em;
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--ink);
}

.hotline__cards {
	position: relative;
	z-index: 2;
	display: grid;
	gap: .9rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hotline__cards:has(> :only-child) {
	grid-template-columns: minmax(0, 28rem);
	justify-content: end;
}
@media (max-width: 720px) {
	.hotline__cards,
	.hotline__cards:has(> :only-child) { grid-template-columns: 1fr; }
}

.hotline-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding: 1.15rem 1.25rem 1.25rem 1.4rem;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--line);
	border-top: 4px solid var(--accent);
	color: var(--green-ink);
	text-decoration: none;
	overflow: hidden;
	min-height: min-content;
	box-shadow: var(--shadow-sm);
	transition: background-color .25s var(--ease), border-color .25s var(--ease),
		transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hotline-card::before { display: none; }
.hotline-card--enquiry { --accent: var(--green); --ink: var(--green-deep); }
.hotline-card--report { --accent: var(--pomegranate); --ink: #8a2c16; }

.hotline-card:hover, .hotline-card:focus-visible {
	background: #fff;
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	color: var(--green-ink);
}

.hotline-card__top { display: flex; align-items: center; gap: .65rem; }
/* Keep the label clear of the badge sitting in the top-right corner. */
.hotline-card--badged .hotline-card__top { padding-right: 4.5rem; }
.hotline-card__label {
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	color: var(--ink);
}
.hotline-card__number {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: clamp(1.45rem, 2.9vw, 1.95rem);
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--green-ink);
}
.hotline-card__number svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .65; color: var(--accent); }

.hotline-card__meta {
	display: flex;
	align-items: flex-start;
	gap: .45rem;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--ink-muted);
}
.hotline-card__meta svg { width: 15px; height: 15px; margin-top: .28rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }

.hotline-card__cta {
	display: none;
	margin-top: auto;
	flex-shrink: 0;
	padding-top: .35rem;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink);
}
@media (max-width: 720px) {
	.hotline-card__cta {
		display: block;
		margin-top: .7rem;
	}
}
.hotline-card__cta::after { content: " \2192"; display: inline-block; transition: margin-left .2s var(--ease); }
.hotline-card:hover .hotline-card__cta::after { margin-left: .3rem; }

.hotline-card__badge {
	position: absolute;
	top: .95rem;
	right: 1rem;
	padding: .22rem .7rem;
	border-radius: var(--radius-pill);
	background: var(--pomegranate);
	color: #fff;
	font-size: calc(.72rem * var(--scale));
	font-weight: 800;
	letter-spacing: .03em;
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
}

/* Confidentiality assurance under the reporting channels. */
.assurance {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.35rem 1.5rem;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(ellipse 80% 120% at 10% 0%, rgba(255, 255, 255, .5), transparent 55%),
		linear-gradient(135deg, var(--pomegranate-soft), #fff 42%, #f8e4dc);
	border: 1px solid rgba(181, 58, 30, .28);
	box-shadow: var(--shadow-sm);
	color: #8a2c16;
	text-align: center;
}
.assurance svg {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	padding: .55rem;
	border-radius: 50%;
	background: var(--pomegranate);
	color: #fff;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	box-shadow: 0 4px 12px rgba(181, 58, 30, .3);
}
.assurance p {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.55rem, 3.2vw, 2rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .02em;
	max-width: none;
}
@media (min-width: 721px) {
	.assurance .br-mobile { display: none; }
}
.assurance strong {
	color: var(--pomegranate);
	font-weight: 700;
}
.badge-soon {
	display: inline-block;
	margin-left: .5rem;
	padding: .15rem .6rem;
	border-radius: var(--radius-pill);
	background: var(--pomegranate);
	color: #fff;
	font-size: calc(.72rem * var(--scale));
	font-weight: 700;
	letter-spacing: .03em;
	vertical-align: middle;
	white-space: nowrap;
}

/* --------------------------------------------------------------- videos -- */
.video-block { margin-top: 1.15rem; }
.video-block:first-of-type { margin-top: 0; }
.video-block .sub-head { margin-top: 0; }
.video-block__title {
	display: inline-block;
	margin: 0 0 .9rem;
	padding: .45rem .95rem .55rem;
	border-radius: var(--radius);
	border-bottom: 3px solid var(--green-leaf);
	background:
		linear-gradient(135deg, rgba(224, 240, 229, .92), rgba(251, 250, 230, .88) 55%, rgba(224, 240, 245, .9));
	box-shadow: inset 0 0 0 1px rgba(0, 111, 51, .08);
	font-family: var(--font-serif);
	font-size: clamp(1.08rem, 2vw, 1.28rem);
	font-weight: 700;
	color: var(--green-ink);
	line-height: 1.4;
}
.video {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 56rem;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	background: #0b1a12;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--line);
}
.video iframe,
.video video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}
.video video { object-fit: contain; }

/* ------------------------------------------------------------- audio row -- */
.audio-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.audio-card__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green);
}
.audio-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.audio-card__title { flex: 1 1 12rem; font-size: var(--fs-lg); font-weight: 700; color: var(--green-ink); }
.audio-card audio { width: 100%; max-width: 320px; height: 40px; }

/* ----------------------------------------------------------------- notes -- */
.notes {
	font-size: var(--fs-sm);
	line-height: 1.8;
	color: var(--ink-muted);
	padding: 1.25rem 1.4rem;
	background: rgba(255, 255, 255, .7);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
}
.notes p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	padding: 1.6rem 0 1.25rem;
	background: #fff;
	border-top: 1px solid var(--line);
	color: var(--ink-muted);
	font-size: var(--fs-sm);
	line-height: 1.7;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--green-deep); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--pomegranate); text-decoration: underline; }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
}
.site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
.site-footer__meta img { display: block; width: auto; height: 31px; }

@media (max-width: 720px) {
	.site-footer { padding: 1.75rem 0 1.4rem; }
	.site-footer__bottom {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	.site-footer__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: .85rem;
	}
	.site-footer__meta a:last-child { align-self: center; }
}

/* ------------------------------------------------------------- lightbox -- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(1, 51, 23, .88);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--ease), visibility 0s .25s;
}
.lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s var(--ease), visibility 0s 0s;
}
.lightbox img {
	max-width: 100%;
	max-height: 86vh;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	background: #fff;
}
.lightbox__close {
	position: absolute;
	top: clamp(.75rem, 3vw, 1.5rem);
	right: clamp(.75rem, 3vw, 1.5rem);
	width: 46px; height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--green-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.lightbox__close:hover { background: #fff; }
.lightbox__caption {
	position: absolute;
	left: 0; right: 0;
	bottom: clamp(.5rem, 2vw, 1.25rem);
	text-align: center;
	color: #fff;
	font-size: var(--fs-sm);
	padding: 0 1rem;
}

/* ------------------------------------------------------------- utilities -- */
.stack > * + * { margin-top: 1.1rem; }

/* ----------------------------------------------------------- preferences -- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media (prefers-contrast: more) {
	:root { --line: rgba(0, 111, 51, .45); --ink-muted: #33443a; }
	.hero__media::after { background: rgba(255, 255, 255, .8); }
}

/* ---------------------------------------------------------------- print -- */
@media print {
	.site-header, .drawer, .drawer-backdrop, .popover, .hero__media,
	.page-head__media, .lightbox, .btn-row, .skip-link,
	.hotline__media, .hotline__edge, .hotline-card__cta { display: none !important; }
	body { background: #fff; color: #000; }
	body::before { display: none; }
	.hero, .page-head { background: #fff; min-height: 0; padding: 1rem 0; }
	.page-head h1 { color: #000; text-shadow: none; }
	.page-head h1::before { display: none; }
	.card, .tile, .contact, .frame { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
	.hotline, .hotline-card, .hotline-card__badge {
		background: #fff !important;
		color: #000 !important;
		border: 1px solid #ccc;
		box-shadow: none;
		break-inside: avoid;
	}
	.site-footer { background: #fff; color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}