/* ==========================================================================
   NCV Västerbotten — main stylesheet
   Palette: pine (boreal forest), Nigeria green, Sweden blue, one touch of Sweden yellow.
   Type: Big Shoulders Display (headings) + Familjen Grotesk (text). Self-hosted, SIL OFL.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/big-shoulders-display-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/big-shoulders-display-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/familjen-grotesk-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/familjen-grotesk-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Familjen Grotesk"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/familjen-grotesk-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/familjen-grotesk-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/familjen-grotesk-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/familjen-grotesk-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/familjen-grotesk-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/familjen-grotesk-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
	--snow: #F5F8F7;
	--white: #FFFFFF;
	--pine: #0F2E22;
	--pine-soft: #3F5A4E;
	--birch: #D6DFDA;
	--green: #008751;
	--green-dark: #006B40;
	--blue: #005B99;
	--yellow: #FECC02;
	--error: #B42318;

	--display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
	--text: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: clamp(1.25rem, 4vw, 3rem);
	--band: clamp(4rem, 9vw, 7.5rem);
	--radius: 10px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
	margin: 0;
	background: var(--snow);
	color: var(--pine);
	font-family: var(--text);
	font-size: 1.125rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { color: var(--pine); }
h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.005em;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h3, h4 { font-weight: 700; line-height: 1.05; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.site-main:focus { outline: none; }

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--pine); color: var(--snow); padding: .75rem 1rem; border-radius: 6px;
	font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--snow); }

/* Containers set only inline padding; bands set only block padding. */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1440px; }

/* ---------- Buttons & links ---------- */
.button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 3rem; padding: .7rem 1.5rem;
	border: 2px solid transparent; border-radius: 999px;
	font-family: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.button--primary { background: var(--green); color: var(--white); }
.button--primary:hover { background: var(--green-dark); color: var(--white); }
.button--ghost { border-color: var(--pine); color: var(--pine); background: transparent; }
.button--ghost:hover { background: var(--pine); color: var(--snow); }
.button--light { background: var(--snow); color: var(--pine); }
.button--light:hover { background: var(--white); color: var(--pine); }
.button--outline-light { border-color: rgba(245,248,247,.7); color: var(--snow); }
.button--outline-light:hover { border-color: var(--snow); background: rgba(245,248,247,.08); color: var(--snow); }

.text-link { font-weight: 600; color: var(--blue); text-decoration-thickness: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Header ---------- */
.site-header { background: var(--snow); border-bottom: 1px solid var(--birch); position: relative; z-index: 20; }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 5.5rem; }
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--pine); min-width: 0; margin-right: auto; }
.brand__logo { width: 3.5rem; height: 3.5rem; flex: none; object-fit: contain; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1; max-width: 12ch; }
.brand:hover { color: var(--pine); }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.site-nav__list a {
	color: var(--pine); font-weight: 600; font-size: 1rem; text-decoration: none;
	padding-block: .35rem; border-bottom: 2px solid transparent;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_parent > a { border-bottom-color: var(--green); }
.site-nav__list .sub-menu { display: none; }
.site-nav__cta { min-height: 2.75rem; padding: .55rem 1.25rem; }

.nav-toggle {
	display: none; align-items: center; gap: .6rem;
	background: none; border: 2px solid var(--pine); border-radius: 999px;
	color: var(--pine); font: 600 .95rem/1 var(--text); padding: .6rem 1rem; cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
	display: block; width: 16px; height: 2px; background: currentColor; position: relative; transition: transform .2s ease;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
	.site-header__inner { min-height: 4.5rem; gap: 1rem; }
	.brand__logo { width: 2.75rem; height: 2.75rem; }
	.brand__name { font-size: 1.15rem; }
	.nav-toggle { display: inline-flex; flex: none; }
	.js .site-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--snow); border-bottom: 1px solid var(--birch);
		padding: .5rem var(--gutter) 1.5rem;
		box-shadow: 0 12px 24px -16px rgba(15,46,34,.35);
	}
	.js .site-nav.is-open { display: flex; }
	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--birch); font-size: 1.125rem; }
	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current_page_item > a { border-bottom-color: var(--birch); color: var(--green); }
	.site-nav__cta { margin-top: 1.25rem; }
	/* Without JS the menu simply sits under the header row. */
	html:not(.js) .site-header__inner { flex-wrap: wrap; }
	html:not(.js) .nav-toggle { display: none; }
	html:not(.js) .site-nav { width: 100%; flex-wrap: wrap; padding-bottom: 1rem; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.hero__title { font-size: clamp(3.25rem, 9.5vw, 8.25rem); line-height: .88; max-width: 12ch; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.hero__text { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; margin: 0 0 1.75rem; color: var(--pine-soft); max-width: 34rem; }

/* With a banner or photo. Two layouts, chosen in Customize → Featured event → Banner layout. */
.hero--media .hero__grid { display: grid; gap: 2.5rem clamp(2rem, 5vw, 4rem); }
.hero--media .hero__title { font-size: clamp(2.75rem, 5.4vw, 5rem); line-height: .9; }
.hero__media { grid-area: media; }
.hero__copy  { grid-area: copy; }
.hero__event { grid-area: event; }
.hero__event .event { margin-top: 0; }

/* Full width: banner across the top, text and event details underneath. */
.hero--top .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "media media" "copy event"; align-items: start; }
.hero--top.hero--no-event .hero__grid { grid-template-areas: "media media" "copy copy"; }
.hero--top.hero--no-image .hero__grid { grid-template-areas: "copy event"; }
.hero--top .hero__media { margin-bottom: .5rem; }
.hero--top .hero__title { max-width: 15ch; }

/* Side by side: text left, banner and event details right. */
.hero--side .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy media" "copy event"; row-gap: 1.25rem; align-items: center; }
.hero--side.hero--no-event .hero__grid { grid-template-areas: "copy media"; }
.hero--side.hero--no-image .hero__grid { grid-template-areas: "copy event"; }
.hero--side .hero__media { align-self: end; }
.hero--side .hero__event { align-self: start; }

@media (max-width: 900px) {
	.hero--media .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
	.hero--top .hero__grid { grid-template-areas: "media" "copy" "event"; }
	.hero--side .hero__grid { grid-template-areas: "copy" "media" "event"; }
	.hero--top.hero--no-event .hero__grid { grid-template-areas: "media" "copy"; }
	.hero--side.hero--no-event .hero__grid { grid-template-areas: "copy" "media"; }
	.hero--media.hero--no-image .hero__grid { grid-template-areas: "copy" "event"; }
}

.hero__media { margin: 0; }
.hero__media a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(15,46,34,.08), 0 18px 40px -24px rgba(15,46,34,.45); }
.hero__media img { width: 100%; height: auto; }
.hero__media a:hover img { opacity: .96; }
.hero__media figcaption { font-size: .875rem; color: var(--pine-soft); margin-top: .5rem; }

/* Event facts under the banner: real text, so dates and venue are readable, searchable and screen-reader friendly. */
.event { margin-top: 1.25rem; padding: 1.25rem 1.4rem; background: var(--white); border: 1px solid var(--birch); border-radius: var(--radius); }
.event__title { font-size: 1.75rem; margin: 0 0 .9rem; }
.event__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.event__facts dt { font-size: .8125rem; font-weight: 600; color: var(--pine-soft); }
.event__facts dd { margin: .1rem 0 0; font-size: 1rem; line-height: 1.45; font-weight: 600; }
.event__facts dd span { display: block; font-weight: 400; color: var(--pine-soft); }
.event__facts a { font-weight: 600; }
@media (max-width: 480px) { .event__facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Bands ---------- */
.band { padding-block: var(--band); }
.band--welcome, .band--honourees { background: var(--white); }
.band--mission, .band--news, .band--page { background: var(--snow); }
.band--closing { background: var(--pine); color: var(--snow); }

.band__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.band__head h2, .split__head, .closing h2 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); }
.band__head p { font-size: 1.2rem; color: var(--pine-soft); margin: 0; }
.band__more { margin: 2.5rem 0 0; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.split__head { margin: 0; }
@media (min-width: 901px) { .split__head { position: sticky; top: 2rem; } }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

.lede { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.5; }

/* Mission */
.pillars { list-style: none; margin: 0; padding: 0; }
.pillar { border-top: 2px solid var(--pine); padding-top: 1.25rem; }
.pillar + .pillar { margin-top: 2.75rem; }
.pillar__title { font-size: clamp(1.75rem, 2.8vw, 2.25rem); margin-bottom: .4em; }
.pillar p { margin: 0; max-width: 34rem; color: var(--pine-soft); }

/* Honourees on the home page */
.honouree-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.honouree-tile a { display: block; text-decoration: none; color: var(--pine); }
.honouree-tile__name { display: block; font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1; margin-top: .9rem; }
.honouree-tile__rec { display: block; font-size: .95rem; line-height: 1.4; color: var(--pine-soft); margin-top: .4rem; }
.honouree-tile a:hover .honouree-tile__name { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: .15em; }
@media (max-width: 1000px) {
	.honouree-row {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 42%);
		overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem;
		margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
	}
	.honouree-tile { scroll-snap-align: start; }
}
@media (max-width: 520px) { .honouree-row { grid-auto-columns: 68%; } }

.portrait { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--birch); border-radius: 4px; margin: 0; }
.portrait img, .portrait__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.portrait__initial { display: grid; place-items: center; height: 100%; font: 800 4rem/1 var(--display); color: var(--pine-soft); }

/* Closing */
.closing { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem clamp(2rem, 7vw, 7rem); align-items: start; }
.closing__main p { font-size: 1.25rem; line-height: 1.5; max-width: 34rem; color: rgba(245,248,247,.88); margin-bottom: 2rem; }
.closing__contact h3 { font-size: 1.75rem; margin-bottom: 1rem; }
.band--closing a:not(.button) { color: var(--snow); }
.band--closing :focus-visible { outline-color: var(--yellow); }
@media (max-width: 900px) { .closing { grid-template-columns: minmax(0, 1fr); } }

.contact-list { margin: 0; }
.contact-list > div + div { margin-top: 1.1rem; }
.contact-list dt { font-size: .875rem; font-weight: 600; opacity: .72; margin-bottom: .15rem; }
.contact-list dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }

/* News */
.news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 3vw, 2.5rem); }
.news-item__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--birch); margin-bottom: 1rem; }
.news-item__media img { width: 100%; height: 100%; object-fit: cover; }
.news-item__title { font-size: 1.75rem; margin-bottom: .4em; }
.news-item__title a { color: var(--pine); text-decoration: none; }
.news-item__title a:hover { text-decoration: underline; text-decoration-color: var(--green); }
.news-item p { color: var(--pine-soft); font-size: 1rem; margin: 0; }
.entry-meta { font-size: .9rem; font-weight: 600; color: var(--pine-soft); margin: 0 0 .5rem; }
.news-list--stacked { grid-template-columns: minmax(0, 1fr); max-width: 56rem; gap: 0; }
.news-list--stacked .news-item { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; padding-block: 2rem; border-top: 1px solid var(--birch); }
.news-list--stacked .news-item:not(:has(.news-item__media)) { grid-template-columns: minmax(0, 1fr); }
.news-list--stacked .news-item__media { margin: 0; }
@media (max-width: 900px) { .news-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .news-list--stacked .news-item { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* ---------- Inner pages ---------- */
.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head__title { font-size: clamp(3rem, 8vw, 6rem); line-height: .9; margin: 0; max-width: 14ch; }
.page-head__title--post { font-size: clamp(2.5rem, 6vw, 4.5rem); max-width: 18ch; }
.page-head__intro { font-size: 1.25rem; line-height: 1.5; color: var(--pine-soft); max-width: 40rem; margin: 1.25rem 0 0; }
.page-media { margin-bottom: 2.5rem; }
.page-media img { width: 100%; border-radius: 4px; }
.page-body { padding-bottom: var(--band); }
.page-body--list { padding-top: 1rem; }

.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.1em; }
.prose > * { margin-bottom: 0; }
.prose h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-top: 2em; margin-bottom: 0; }
.prose h3 { font-size: 1.75rem; margin-top: 1.75em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .6em; }
.prose li::marker { color: var(--green); }
.prose blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 4px solid var(--green); font-size: 1.25rem; }
.prose img { border-radius: 4px; }
.prose .alignwide { max-width: min(64rem, 100vw - 2 * var(--gutter)); }
.prose figcaption, .wp-caption-text { font-size: .9rem; color: var(--pine-soft); margin-top: .5rem; }
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-block-button__link { border-radius: 999px; background: var(--green); color: var(--white); font-weight: 600; padding: .75rem 1.5rem; text-decoration: none; }

.empty { max-width: 40rem; padding: 2rem 0; font-size: 1.15rem; }

/* Honourees archive */
.roll { list-style: none; margin: 0; padding: 0; }
.roll__item { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--birch); align-items: start; }
.roll__name { font-size: clamp(2.25rem, 4.5vw, 3.5rem); margin-bottom: .25em; }
.roll__name a { color: var(--pine); text-decoration: none; }
.roll__name a:hover { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 3px; }
.roll__rec { font-weight: 600; color: var(--blue); font-size: 1.15rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.roll__year { background: var(--yellow); color: var(--pine); font-size: .875rem; padding: .15rem .6rem; border-radius: 999px; }
.roll__excerpt { max-width: 38rem; color: var(--pine-soft); }
@media (max-width: 640px) {
	.roll__item { grid-template-columns: minmax(0, 1fr); }
	.roll__portrait { max-width: 14rem; }
}

/* Single honouree */
.honouree__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); padding-block: clamp(2.5rem, 6vw, 5rem) var(--band); align-items: start; }
@media (min-width: 901px) { .honouree__aside { position: sticky; top: 2rem; } }
.portrait--large { border-radius: 6px; }
.honouree__back { margin-bottom: 1.5rem; font-size: 1rem; font-weight: 600; }
.honouree__back a { color: var(--pine-soft); }
.honouree__name { font-size: clamp(3rem, 7vw, 5.5rem); line-height: .9; margin-bottom: .3em; }
.honouree__rec { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; color: var(--blue); margin-bottom: .5rem; }
.honouree__year { font-weight: 600; margin-bottom: 0; }
.honouree__year::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--yellow); margin-right: .5em; vertical-align: .02em; box-shadow: 0 0 0 2px var(--pine); }
.honouree__bio { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--birch); }
.honouree-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 2px solid var(--pine); max-width: 42rem; }
.honouree-nav__link { display: block; text-decoration: none; color: var(--pine); }
.honouree-nav__link--next { text-align: right; grid-column: 2; }
.honouree-nav__label { display: block; font-size: .9rem; font-weight: 600; color: var(--pine-soft); }
.honouree-nav__name { display: block; font: 700 1.6rem/1.05 var(--display); margin-top: .2rem; }
.honouree-nav__link:hover .honouree-nav__name { text-decoration: underline; text-decoration-color: var(--green); }
@media (max-width: 900px) {
	.honouree__grid { grid-template-columns: minmax(0, 1fr); }
	.honouree__aside { max-width: 22rem; }
}

/* Post navigation */
.post-navigation { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--pine); max-width: 42rem; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.post-navigation .nav-next { text-align: right; grid-column: 2; }
.post-navigation a { color: var(--pine); text-decoration: none; font-weight: 600; }
.post-nav__label { display: block; font-size: .875rem; color: var(--pine-soft); }

.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers { display: inline-flex; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0 .9rem; border: 2px solid var(--birch); border-radius: 999px; color: var(--pine); text-decoration: none; font-weight: 600; }
.pagination .page-numbers.current { background: var(--pine); border-color: var(--pine); color: var(--snow); }

/* ---------- Join page & form ---------- */
.join { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); padding-bottom: var(--band); align-items: start; }
.join__intro .prose { font-size: 1.2rem; }
.join__contact { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--pine); }
.join__contact-title { font-size: 1.75rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .join { grid-template-columns: minmax(0, 1fr); } .join__form { order: -1; } }

.join-form { background: var(--white); border: 1px solid var(--birch); border-radius: var(--radius); padding: clamp(1.25rem, 3.5vw, 2.5rem); scroll-margin-top: 1.5rem; }
.join-form form { margin: 0; }
.field { margin: 0 0 1.35rem; border: 0; padding: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.field > label, .field legend { display: block; font-weight: 600; font-size: 1rem; margin-bottom: .4rem; padding: 0; }
.field__opt { font-weight: 400; color: var(--pine-soft); font-size: .9rem; }
.join-form input[type="text"], .join-form input[type="email"], .join-form input[type="tel"], .join-form textarea,
.search-form .search-field, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; font: inherit; font-size: 1.05rem; color: var(--pine);
	background: var(--white); border: 1.5px solid #8FA39A; border-radius: 8px;
	padding: .75rem .9rem; min-height: 3rem; appearance: none;
}
.join-form textarea { min-height: 8rem; resize: vertical; }
.join-form input:focus-visible, .join-form textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.join-form [aria-invalid="true"] { border-color: var(--error); }
.join-form fieldset[aria-invalid="true"] legend { color: var(--error); }
.join-form ::placeholder { color: #6D8177; }

.field--choices { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.field--choices legend { grid-column: 1 / -1; float: left; width: 100%; }
.field--choices .field__error { grid-column: 1 / -1; }
@media (max-width: 560px) { .field--choices { grid-template-columns: minmax(0, 1fr); } }
.choice { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; line-height: 1.4; cursor: pointer; }
.field--choices .choice { border: 1.5px solid var(--birch); border-radius: 8px; padding: .8rem .9rem; align-items: center; }
.field--choices .choice:has(input:checked) { border-color: var(--green); background: #EEF7F2; }
.choice input { accent-color: var(--green); width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; flex: none; }
.field--consent .choice { font-size: .95rem; color: var(--pine-soft); }
.field__error { color: var(--error); font-weight: 600; font-size: .95rem; margin: .4rem 0 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.notice p:last-child { margin: 0; }
.notice:focus { outline: none; }
.notice--ok { background: #EEF7F2; border-left: 5px solid var(--green); margin: 0; padding: 1.5rem; }
.notice__title { font-size: 2.25rem; margin-bottom: .25em; }
.notice--error { background: #FDF0EE; border-left: 5px solid var(--error); font-weight: 600; }

/* Search form */
.search-form { display: flex; gap: .5rem; max-width: 32rem; margin-bottom: 1.5rem; }
.search-form label { flex: 1; }
.search-form .search-submit { background: var(--pine); color: var(--snow); border: 0; border-radius: 999px; padding: 0 1.25rem; font: 600 1rem var(--text); cursor: pointer; }

/* Comments */
.comments { margin-top: 3.5rem; max-width: 42rem; }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 1.5rem; }
.comment-body { border-top: 1px solid var(--birch); padding-block: 1.25rem; }
.comment-meta { font-size: .9rem; }
.comment-form .submit { background: var(--green); color: var(--white); border: 0; border-radius: 999px; padding: .8rem 1.5rem; font: 600 1rem var(--text); cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: var(--pine); color: rgba(245,248,247,.9); font-size: 1rem; }
.site-footer a { color: var(--snow); }
.site-footer :focus-visible { outline-color: var(--yellow); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 2.5rem; padding-block: 3.5rem 2.5rem; border-top: 1px solid rgba(245,248,247,.14); }
.site-footer__brand { display: flex; gap: 1.1rem; align-items: flex-start; }
.site-footer__logo { width: 5.5rem; height: 5.5rem; flex: none; object-fit: contain; }
.site-footer__name { font: 800 1.6rem/1 var(--display); color: var(--snow); margin: .3rem 0 .5rem; max-width: 14ch; }
.site-footer__motto { margin: 0; }
.site-footer__est { margin: .25rem 0 0; opacity: .7; font-size: .9rem; }
.footer-menu, .social-links { list-style: none; margin: 0; padding: 0; }
.footer-menu li + li, .social-links li + li { margin-top: .5rem; }
.footer-menu a, .social-links a { text-decoration: none; font-weight: 600; }
.footer-menu a:hover, .social-links a:hover { text-decoration: underline; }
.social-links { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(245,248,247,.14); }
.site-footer__base { padding-block: 1.25rem 2rem; font-size: .875rem; opacity: .7; }
.site-footer__base p { margin: 0; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Mobile tab bar (app-style bottom menu) ---------- */
.tabbar { display: none; }
@media (max-width: 900px) {
	body.has-tabbar { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
	.tabbar-covers-menu .nav-toggle,
	.js .tabbar-covers-menu .site-nav { display: none !important; }

	.has-tabbar .tabbar {
		display: block;
		position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
		padding: 0 max(.75rem, env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
		pointer-events: none;
		transition: transform .25s ease;
	}
	.tabbar__list {
		pointer-events: auto;
		list-style: none; margin: 0 auto; padding: .35rem;
		max-width: 30rem;
		display: grid; grid-template-columns: repeat(var(--tabs, 5), minmax(0, 1fr)); align-items: end;
		background: rgba(255, 255, 255, .92);
		-webkit-backdrop-filter: saturate(1.6) blur(18px);
		backdrop-filter: saturate(1.6) blur(18px);
		border: 1px solid rgba(15, 46, 34, .08);
		border-radius: 24px;
		box-shadow: 0 12px 32px -12px rgba(15, 46, 34, .4), 0 2px 6px rgba(15, 46, 34, .06);
	}
	.tabbar__link {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
		min-height: 3.5rem; padding: .3rem .1rem .25rem;
		color: var(--pine-soft); text-decoration: none;
		font-size: .75rem; font-weight: 600; line-height: 1.1; letter-spacing: .005em;
		-webkit-tap-highlight-color: transparent;
		border-radius: 18px;
	}
	.tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tabbar__icon-wrap {
		display: grid; place-items: center;
		width: 3.25rem; height: 1.85rem; border-radius: 999px;
		transition: background-color .2s ease, color .2s ease, transform .15s ease;
	}
	.tabbar__icon { width: 22px; height: 22px; }
	.tabbar__link:hover { color: var(--pine); }
	.tabbar__link:active .tabbar__icon-wrap { transform: scale(.92); }
	.tabbar__link[aria-current="page"] { color: var(--pine); }
	.tabbar__link[aria-current="page"] .tabbar__icon-wrap { background: #E1F0E8; color: var(--green-dark); }
	.tabbar__link:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

	/* Raised centre action (Join). */
	.tabbar__item--primary .tabbar__link { color: var(--pine); }
	.tabbar__item--primary .tabbar__icon-wrap,
	.tabbar__item--primary .tabbar__link[aria-current="page"] .tabbar__icon-wrap {
		width: 3.4rem; height: 3.4rem; margin-top: -1.55rem;
		background: var(--green); color: var(--white);
		box-shadow: 0 0 0 5px var(--white), 0 10px 20px -6px rgba(0, 107, 64, .65);
	}
	.tabbar__item--primary .tabbar__icon { width: 26px; height: 26px; stroke-width: 2.25; }
	.tabbar__item--primary .tabbar__link:active .tabbar__icon-wrap { transform: scale(.94); }

	/* Get out of the way while typing (mobile keyboards). */
	.is-typing .tabbar { transform: translateY(calc(100% + 1rem)); }
}
@media (max-width: 360px) {
	.tabbar__link { font-size: .6875rem; }
	.tabbar__icon-wrap { width: 2.75rem; }
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
	.site-header, .site-footer, .band--closing, .actions, .tabbar { display: none !important; }
	body { background: #fff; }
}