/* =========================================================================
   WSSB Society — Pixel Suggest
   Design language: the herbarium sheet. Hairline rules, mono specimen tags,
   a low-contrast serif for voice, and colour taken from the society emblem.

   1.  Tokens
   2.  Base and primitives
   3.  Header, navigation, footer
   4.  Page furniture and prose
   5.  Bands and section heads
   6.  Home — hero and specimen label
   7.  Home — yield loss
   8.  Objectives
   9.  People
   10. Conferences and programme
   11. Awards
   12. Notices
   13. Directory, tables and pagination
   14. Journal
   15. Join and contact
   16. Utilities, motion and print
   ====================================================================== */

/* ============================================================ 1. Tokens */

:root {
	/* Emblem palette */
	--wssb-ink: #12271c;
	--wssb-ink-soft: #2c4237;
	--wssb-green: #1b6b3a;
	--wssb-green-deep: #0f4626;
	--wssb-green-dark: #0a3520;
	--wssb-green-tint: #e8f1eb;
	--wssb-sky: #c0e8f2;
	--wssb-sky-pale: #e9f5f9;
	--wssb-paper: #f4f6f4;
	--wssb-paper-warm: #faf9f5;
	--wssb-seed: #9c8329;
	--wssb-seed-ink: #6f5c14;   /* AA-safe seed for text and small marks */
	--wssb-crimson: #b0231c;
	--wssb-crimson-ink: #97180f; /* AA-safe crimson for small labels */
	--wssb-rule: #d5ded7;
	--wssb-rule-soft: #e6ece7;
	--wssb-muted: #55675b;
	--wssb-white: #fff;

	/* Dark-band foregrounds */
	--wssb-on-dark: rgba(255, 255, 255, 0.92);
	--wssb-on-dark-dim: rgba(255, 255, 255, 0.66);
	--wssb-on-dark-rule: rgba(255, 255, 255, 0.18);

	/* Type */
	--wssb-serif: "Source Serif 4", "Noto Serif Bengali", Georgia, "Times New Roman", serif;
	--wssb-sans: "IBM Plex Sans", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wssb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Fluid scale. The mono label floor is 0.78125rem — never smaller. */
	--wssb-t-label: 0.78125rem;
	--wssb-t-xs: 0.84375rem;
	--wssb-t-sm: 0.90625rem;
	--wssb-t-nav: 0.9375rem;
	--wssb-t-base: 1.03125rem;
	--wssb-t-md: 1.09375rem;
	--wssb-t-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
	--wssb-t-xl: clamp(1.25rem, 0.7vw + 1.09rem, 1.5rem);
	--wssb-t-2xl: clamp(1.5rem, 1.4vw + 1.19rem, 2rem);
	--wssb-t-3xl: clamp(1.875rem, 2.2vw + 1.38rem, 2.75rem);
	--wssb-t-4xl: clamp(2.25rem, 3.6vw + 1.44rem, 3.75rem);

	/* Space */
	--wssb-s1: 0.25rem;
	--wssb-s2: 0.5rem;
	--wssb-s3: 0.75rem;
	--wssb-s4: 1rem;
	--wssb-s5: 1.5rem;
	--wssb-s6: 2rem;
	--wssb-s7: 3rem;
	--wssb-s8: 4rem;
	--wssb-band-y: clamp(3.5rem, 6vw, 6rem);

	/* Frame */
	--wssb-wrap: 1200px;
	--wssb-wrap-narrow: 900px;
	--wssb-measure: 68ch;
	--wssb-gut: clamp(1.25rem, 4vw, 3rem);
	--wssb-r: 3px;
	--wssb-r-sm: 2px;

	--wssb-shadow-sm: 0 1px 2px rgba(18, 39, 28, 0.06), 0 1px 1px rgba(18, 39, 28, 0.04);
	--wssb-shadow-md: 0 4px 16px -4px rgba(18, 39, 28, 0.12), 0 2px 4px rgba(18, 39, 28, 0.05);
	--wssb-shadow-lg: 0 18px 44px -18px rgba(18, 39, 28, 0.28), 0 4px 12px rgba(18, 39, 28, 0.06);

	--wssb-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* =============================================== 2. Base and primitives */

/* A minimal reset. The theme must not depend on the parent theme having set
   these, because the two stylesheets can load in either order. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Long institute names and email addresses must not push a card open. */
.wssb-person,
.wssb-awards__item,
.wssb-contact__card,
.wssb-objectives__item {
	overflow-wrap: break-word;
}

.wssb-wrap {
	max-width: var(--wssb-wrap);
	margin-inline: auto;
	padding-inline: var(--wssb-gut);
}

.wssb-wrap--narrow {
	max-width: var(--wssb-wrap-narrow);
}

.wssb-measure {
	max-width: var(--wssb-measure);
}

/* Section eyebrow: a mono specimen tag with a rule running to the margin. */
.wssb-eyebrow {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin: 0 0 var(--wssb-s4);
	display: flex;
	align-items: center;
	gap: 0.7rem;
	line-height: 1.4;
}

.wssb-eyebrow::after {
	content: "";
	flex: 1 1 2rem;
	height: 1px;
	background: var(--wssb-rule);
}

.wssb-eyebrow__i {
	color: var(--wssb-crimson-ink);
	font-weight: 500;
}

/* Buttons */
.wssb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--wssb-sans);
	font-size: var(--wssb-t-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	padding: 0.85em 1.6em;
	min-height: 44px;
	border: 1px solid var(--wssb-green);
	border-radius: var(--wssb-r);
	background: var(--wssb-green);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s var(--wssb-ease), border-color 0.18s var(--wssb-ease),
		color 0.18s var(--wssb-ease), box-shadow 0.18s var(--wssb-ease), transform 0.18s var(--wssb-ease);
}

.wssb-btn:hover {
	background: var(--wssb-green-deep);
	border-color: var(--wssb-green-deep);
	color: #fff;
	box-shadow: var(--wssb-shadow-md);
	transform: translateY(-1px);
}

.wssb-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.wssb-btn--ghost {
	background: transparent;
	color: var(--wssb-green-deep);
	border-color: var(--wssb-rule);
}

.wssb-btn--ghost:hover {
	background: var(--wssb-green-tint);
	border-color: var(--wssb-green);
	color: var(--wssb-green-deep);
	box-shadow: none;
}

.wssb-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--wssb-green-deep);
}

.wssb-btn--light:hover {
	background: var(--wssb-sky);
	border-color: var(--wssb-sky);
	color: var(--wssb-green-dark);
}

.wssb-btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.wssb-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
	box-shadow: none;
}

.wssb-btn--sm {
	font-size: var(--wssb-t-xs);
	padding: 0.6em 1.1em;
	min-height: 38px;
}

.wssb-btn__i {
	flex: none;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Specimen tag */
.wssb-tag {
	display: inline-block;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wssb-crimson-ink);
	background: rgba(176, 35, 28, 0.06);
	border: 1px solid rgba(176, 35, 28, 0.25);
	border-radius: var(--wssb-r-sm);
	padding: 0.15em 0.5em;
	white-space: nowrap;
}

.wssb-tag--seed {
	color: var(--wssb-seed-ink);
	background: rgba(156, 131, 41, 0.08);
	border-color: rgba(156, 131, 41, 0.3);
}

.wssb-tag--quiet {
	color: var(--wssb-muted);
	background: var(--wssb-paper);
	border-color: var(--wssb-rule);
}

/* Source note under data sections */
.wssb-source {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-xs);
	line-height: 1.65;
	color: var(--wssb-muted);
	margin-top: var(--wssb-s6);
	padding-top: var(--wssb-s3);
	border-top: 1px solid var(--wssb-rule-soft);
	max-width: 78ch;
}

.wssb-band--dark .wssb-source {
	color: var(--wssb-on-dark-dim);
	border-top-color: var(--wssb-on-dark-rule);
}

/* Empty state */
.wssb-empty {
	font-family: var(--wssb-sans);
	font-size: var(--wssb-t-sm);
	line-height: 1.6;
	color: var(--wssb-muted);
	background: var(--wssb-paper);
	border: 1px dashed var(--wssb-rule);
	border-radius: var(--wssb-r);
	padding: var(--wssb-s5);
	margin: 0;
}

/* Inline "more" link with an arrow that travels on hover */
.wssb-more {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wssb-green-deep);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 0.25em;
	border-bottom: 1px solid var(--wssb-rule);
	transition: border-color 0.18s var(--wssb-ease), color 0.18s var(--wssb-ease);
}

.wssb-more::after {
	content: "→";
	transition: transform 0.18s var(--wssb-ease);
}

.wssb-more:hover {
	border-bottom-color: var(--wssb-green);
	color: var(--wssb-green);
}

.wssb-more:hover::after {
	transform: translateX(3px);
}

/* Data figures line up in columns */
.wssb-num {
	font-family: var(--wssb-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ======================================== 3. Header, navigation, footer */

/* --- Utility bar. One line, always. It carries the things people look for
   before they look at the menu, and it steps aside entirely on a phone. --- */

.wssb-topbar {
	background: var(--wssb-green-dark);
	color: var(--wssb-on-dark-dim);
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.03em;
}

.wssb-topbar__inner {
	max-width: var(--wssb-wrap);
	margin-inline: auto;
	padding-inline: var(--wssb-gut);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wssb-s5);
	min-height: 38px;
}

/* Truncate rather than wrap: a wrapped utility bar is what makes a header
   look broken at in-between widths. */
.wssb-topbar__note {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wssb-topbar__nav {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex: none;
	white-space: nowrap;
}

.wssb-topbar a {
	color: var(--wssb-sky);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: border-color 0.16s var(--wssb-ease);
}

.wssb-topbar a:hover {
	border-bottom-color: currentColor;
}

.wssb-topbar__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-left: 1.1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.wssb-topbar__mail:hover {
	border-bottom-color: transparent;
}

.wssb-topbar__mail span {
	border-bottom: 1px solid transparent;
}

.wssb-topbar__mail:hover span {
	border-bottom-color: currentColor;
}

/* --- Main header row --- */

.wssb-header {
	border-bottom: 1px solid var(--wssb-rule);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	position: sticky;
	top: 0;
	z-index: 60;
	transition: box-shadow 0.2s var(--wssb-ease);
}

.wssb-header.is-stuck {
	box-shadow: var(--wssb-shadow-md);
}

.wssb-header__inner {
	max-width: var(--wssb-wrap);
	margin-inline: auto;
	padding: 0.6rem var(--wssb-gut);
	display: flex;
	align-items: center;
	gap: var(--wssb-s5);
	min-height: 76px;
}

.wssb-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
	flex: none;
}

.wssb-brand img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	flex: none;
}

/* Two deliberate lines rather than a ragged wrap: the name never breaks
   anywhere except at the point the markup chooses. */
.wssb-brand__name {
	font-family: var(--wssb-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--wssb-ink);
	white-space: nowrap;
}

.wssb-brand__name span {
	display: block;
}

/* --- Actions on the right --- */

.wssb-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
	margin-left: auto;
}

.wssb-iconbtn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--wssb-r);
	color: var(--wssb-ink);
	cursor: pointer;
	transition: background-color 0.16s var(--wssb-ease), border-color 0.16s var(--wssb-ease),
		color 0.16s var(--wssb-ease);
}

.wssb-iconbtn:hover {
	background: var(--wssb-green-tint);
	border-color: var(--wssb-rule);
	color: var(--wssb-green-deep);
}

.wssb-search-toggle[aria-expanded="true"] {
	background: var(--wssb-green);
	border-color: var(--wssb-green);
	color: #fff;
}

/* --- The search drawer --- */

.wssb-search {
	border-top: 1px solid var(--wssb-rule);
	background: var(--wssb-paper);
}

.wssb-search[hidden] {
	display: none;
}

.wssb-search__inner {
	max-width: var(--wssb-wrap);
	margin-inline: auto;
	padding: var(--wssb-s4) var(--wssb-gut);
}

.wssb-searchbox {
	display: flex;
	align-items: center;
	gap: var(--wssb-s2);
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	padding: 0.35rem 0.35rem 0.35rem 0.85rem;
}

.wssb-searchbox > .wssb-i {
	color: var(--wssb-muted);
	flex: none;
}

.wssb-searchbox input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--wssb-sans);
	font-size: var(--wssb-t-base);
	color: var(--wssb-ink);
	padding: 0.6rem 0;
}

.wssb-searchbox input[type="search"]:focus {
	outline: none;
}

.wssb-searchbox:focus-within {
	border-color: var(--wssb-green);
	box-shadow: 0 0 0 3px rgba(27, 107, 58, 0.12);
}

/* --- Footer --- */

.wssb-footer {
	background: var(--wssb-ink);
	color: var(--wssb-on-dark-dim);
	font-size: var(--wssb-t-sm);
	/* The page runs at 1.7 for reading. A footer is a set of labels, not
	   prose, and at 1.7 the columns opened up into ladders. */
	line-height: 1.5;
}

/* The footer is rendered inside the site's block layout, which puts
   margin-block-start on flow children from --wp--style--block-gap (1.25rem
   here). That is right for an article and wrong for a column of links: it was
   adding twenty pixels between every one of them, on top of the line box, and
   is why the columns read as ladders on the live site and not in the preview,
   where no block layout exists. Everything vertical in here is reset, and the
   rhythm is then set deliberately below. */
body .wssb-footer ul,
body .wssb-footer ol,
body .wssb-footer li,
body .wssb-footer p,
body .wssb-footer h2,
body .wssb-footer div {
	margin-block: 0;
}

body .wssb-footer li + li,
body .wssb-footer p + p {
	margin-block-start: 0;
}

/* Re-stated at the raised specificity, or the reset above would swallow the
   gap under each column heading. */
body .wssb-footer h2 {
	margin: 0 0 var(--wssb-s3);
}

/* The link rhythm, set here and nowhere else: a 29px pitch from a 1.45 line
   box and 0.15rem of padding either side. Written at a specificity nothing in
   the parent theme or in WordPress's generated styles reaches, because this is
   the row that has been reported twice. */
body .wssb-footer .wssb-footer__col ul {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .wssb-footer .wssb-footer__col li {
	margin: 0;
	padding: 0;
	line-height: 1.45;
}

body .wssb-footer .wssb-footer__col li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding-block: 0.15rem;
	line-height: 1.45;
}

.wssb-footer__top {
	max-width: var(--wssb-wrap);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--wssb-gut) var(--wssb-s5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wssb-s5);
	flex-wrap: wrap;
	border-bottom: 1px solid var(--wssb-on-dark-rule);
}

.wssb-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--wssb-s3);
	line-height: 1.25;
	text-decoration: none;
	border-bottom: 0;
	min-width: 0;
}

.wssb-footer__brand img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: #fff;
	border-radius: 50%;
	padding: 4px;
	flex: none;
}

.wssb-footer__title {
	display: block;
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-lg);
	font-weight: 600;
	color: #fff;
	line-height: 1.25;
}

.wssb-footer__estd {
	display: block;
	margin-top: 0.2rem;
	line-height: 1.3;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-on-dark-dim);
}

.wssb-footer__grid {
	max-width: var(--wssb-wrap);
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3rem) var(--wssb-gut);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr);
	gap: var(--wssb-s5);
}

.wssb-footer h2 {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wssb-sky);
	margin: 0 0 var(--wssb-s3);
}

.wssb-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.2rem;
}

.wssb-footer li {
	line-height: 1.45;
}

.wssb-footer a {
	color: var(--wssb-on-dark-dim);
	text-decoration: none;
	transition: color 0.16s var(--wssb-ease);
}

.wssb-footer__col a {
	padding-block: 0.15rem;
}

.wssb-footer a:hover {
	color: #fff;
}

.wssb-footer__col a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.wssb-footer__col a .wssb-i {
	opacity: 0.6;
}

.wssb-footer p {
	margin: 0;
	line-height: 1.45;
}

.wssb-footer__contact {
	display: grid;
	align-content: start;
	gap: 0;
}

.wssb-footer p.wssb-footer__row {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin-bottom: 0.6rem;
}

.wssb-footer__row .wssb-i {
	color: var(--wssb-sky);
	margin-top: 0.2em;
	opacity: 0.85;
	flex: none;
}

.wssb-footer__row a {
	overflow-wrap: anywhere;
}

.wssb-footer__row--note {
	margin-top: 0.25rem;
	padding-top: var(--wssb-s4);
	border-top: 1px solid var(--wssb-on-dark-rule);
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	line-height: 1.6;
}

.wssb-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex: none;
}

.wssb-footer__social .wssb-social__link {
	width: 40px;
	height: 40px;
	border: 1px solid var(--wssb-on-dark-rule);
	color: var(--wssb-on-dark-dim);
}

.wssb-footer__social .wssb-social__link:hover {
	background: var(--wssb-green);
	border-color: var(--wssb-green);
	color: #fff;
}

.wssb-footer__bar {
	border-top: 1px solid var(--wssb-on-dark-rule);
	background: rgba(0, 0, 0, 0.18);
}

.wssb-footer__bar-inner {
	max-width: var(--wssb-wrap);
	margin-inline: auto;
	padding: 1.1rem var(--wssb-gut);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wssb-s4) var(--wssb-s5);
	flex-wrap: wrap;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.04em;
	color: var(--wssb-on-dark-dim);
}

.wssb-footer__bar-links {
	display: flex;
	gap: var(--wssb-s4);
	flex-wrap: wrap;
}

.wssb-nav {
	margin-left: auto;
}

.wssb-nav ul {
	list-style: none;
	display: flex;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
	align-items: center;
}

.wssb-nav li {
	position: relative;
}

.wssb-nav ul a {
	display: block;
	position: relative;
	font-family: var(--wssb-sans);
	font-size: var(--wssb-t-nav);
	font-weight: 500;
	color: var(--wssb-ink);
	text-decoration: none;
	padding: 0.65rem 0.5rem;
	border-radius: var(--wssb-r-sm);
	white-space: nowrap;
	transition: color 0.16s var(--wssb-ease), background-color 0.16s var(--wssb-ease);
}

/* Underline indicator grows from the centre */
.wssb-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0.55rem;
	right: 0.55rem;
	bottom: 0.3rem;
	height: 2px;
	background: var(--wssb-green);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s var(--wssb-ease);
}

.wssb-nav > ul > li > a:hover::after,
.wssb-nav > ul > li.current-menu-item > a::after,
.wssb-nav > ul > li.current-menu-ancestor > a::after,
.wssb-nav > ul > li.current-menu-parent > a::after {
	transform: scaleX(1);
}

.wssb-nav ul a:hover,
.wssb-nav .current-menu-item > a,
.wssb-nav .current-menu-ancestor > a {
	color: var(--wssb-green-deep);
}

/* Dropdown */
.wssb-nav ul .wssb-nav__has-children > a {
	padding-right: 1.65rem;
}

.wssb-nav__toggle {
	position: absolute;
	top: 50%;
	right: 0.15rem;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wssb-muted);
	cursor: pointer;
	border-radius: var(--wssb-r-sm);
}

.wssb-nav__toggle svg {
	width: 10px;
	height: 10px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s var(--wssb-ease);
}

.wssb-nav__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.wssb-nav .sub-menu {
	position: absolute;
	top: calc(100% - 0.25rem);
	left: 0;
	min-width: 250px;
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-top: 2px solid var(--wssb-green);
	border-radius: var(--wssb-r);
	box-shadow: var(--wssb-shadow-lg);
	padding: 0.4rem;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	display: none;
	z-index: 30;
}

.wssb-nav li:hover > .sub-menu,
.wssb-nav li:focus-within > .sub-menu,
.wssb-nav .wssb-nav__toggle[aria-expanded="true"] + .sub-menu,
.wssb-nav li > .sub-menu.is-open {
	display: flex;
}

.wssb-nav .sub-menu a {
	font-size: var(--wssb-t-xs);
	font-weight: 400;
	padding: 0.6rem 0.7rem;
	white-space: normal;
	line-height: 1.4;
}

.wssb-nav .sub-menu a:hover {
	background: var(--wssb-green-tint);
}

.wssb-header__cta {
	flex: none;
}

.wssb-burger {
	display: none;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	padding: 0.5rem 0.75rem;
	min-height: 44px;
	cursor: pointer;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-ink);
}

.wssb-burger__bars {
	position: relative;
	width: 16px;
	height: 12px;
	flex: none;
}

.wssb-burger__bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.22s var(--wssb-ease), opacity 0.15s linear;
}

.wssb-burger__bars span:nth-child(1) { top: 0; }
.wssb-burger__bars span:nth-child(2) { top: 5px; }
.wssb-burger__bars span:nth-child(3) { top: 10px; }

.wssb-burger[aria-expanded="true"] .wssb-burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.wssb-burger[aria-expanded="true"] .wssb-burger__bars span:nth-child(2) { opacity: 0; }
.wssb-burger[aria-expanded="true"] .wssb-burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ========================================= 4. Page furniture and prose */

.wssb-pagehead {
	position: relative;
	background: var(--wssb-paper);
	border-bottom: 1px solid var(--wssb-rule);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
}

/* Faint herbarium ruling behind the title */
.wssb-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(27, 107, 58, 0.05) 0,
		rgba(27, 107, 58, 0.05) 1px,
		transparent 1px,
		transparent 22px
	);
	pointer-events: none;
}

.wssb-pagehead__inner {
	position: relative;
	max-width: var(--wssb-wrap);
	margin-inline: auto;
	padding-inline: var(--wssb-gut);
}

.wssb-pagehead h1 {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-3xl);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
	color: var(--wssb-ink);
}

.wssb-pagehead__lede {
	max-width: 60ch;
	margin: var(--wssb-s4) 0 0;
	font-size: var(--wssb-t-md);
	color: var(--wssb-muted);
	line-height: 1.6;
}

.wssb-crumbs {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin: 0 0 var(--wssb-s3);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.wssb-crumbs a {
	color: var(--wssb-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wssb-crumbs a:hover {
	color: var(--wssb-green);
	border-bottom-color: currentColor;
}

.wssb-crumbs__sep {
	color: var(--wssb-rule);
}

.wssb-prose {
	max-width: calc(var(--wssb-measure) + var(--wssb-gut) * 2);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--wssb-gut);
	font-size: var(--wssb-t-md);
	line-height: 1.7;
}

.wssb-prose--wide {
	max-width: var(--wssb-wrap);
}

.wssb-prose > * + * {
	margin-top: 1.25rem;
}

/* A section heading first in the content must not add its stacking margin. */
.wssb-prose > :first-child {
	margin-top: 0;
}

/* Hold editor text to a readable measure — but never the theme's own lists,
   which are layouts, not paragraphs. */
.wssb-prose > :is(p, ul, ol):not([class*="wssb-"]) {
	max-width: var(--wssb-measure);
}

/* Editor headings only. The :not() guard keeps these away from headings that
   belong to a theme component — a committee card, a notice, an award year —
   which carry their own wssb- class and their own type. */
.wssb-prose :is(h2):not([class*="wssb-"]) {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-2xl);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-bottom: var(--wssb-s3);
	border-bottom: 1px solid var(--wssb-rule);
	color: var(--wssb-ink);
}

.wssb-prose :is(h3):not([class*="wssb-"]) {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-xl);
	font-weight: 600;
	margin-top: var(--wssb-s6);
	color: var(--wssb-ink);
}

.wssb-prose :is(h4):not([class*="wssb-"]) {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin-top: var(--wssb-s6);
}

.wssb-prose ul,
.wssb-prose ol {
	padding-left: 1.35rem;
}

.wssb-prose li + li {
	margin-top: 0.4rem;
}

.wssb-prose li::marker {
	color: var(--wssb-green);
}

.wssb-prose blockquote {
	border-left: 3px solid var(--wssb-green);
	background: var(--wssb-paper);
	padding: var(--wssb-s4) var(--wssb-s5);
	margin-left: 0;
	border-radius: 0 var(--wssb-r) var(--wssb-r) 0;
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-lg);
	font-style: italic;
	color: var(--wssb-ink-soft);
}

.wssb-prose blockquote p:last-child {
	margin-bottom: 0;
}

.wssb-prose img {
	border-radius: var(--wssb-r);
}

/* A callout for the placeholders the society still has to supply */
.wssb-note {
	border: 1px solid var(--wssb-rule);
	border-left: 3px solid var(--wssb-seed);
	background: var(--wssb-paper-warm);
	border-radius: 0 var(--wssb-r) var(--wssb-r) 0;
	padding: var(--wssb-s4) var(--wssb-s5);
	font-size: var(--wssb-t-sm);
	line-height: 1.6;
	color: var(--wssb-ink-soft);
}

.wssb-note strong {
	color: var(--wssb-seed-ink);
}

/* ============================================ 5. Bands and section heads */

.wssb-band {
	padding-block: var(--wssb-band-y);
	position: relative;
}

/* One hairline only where two same-coloured bands meet. */
.wssb-band + .wssb-band {
	border-top: 1px solid var(--wssb-rule);
}

.wssb-band + .wssb-band--pale,
.wssb-band + .wssb-band--dark,
.wssb-band + .wssb-band--sky,
.wssb-band + .wssb-band--join,
.wssb-band--pale + .wssb-band,
.wssb-band--dark + .wssb-band,
.wssb-band--sky + .wssb-band,
.wssb-band--join + .wssb-band {
	border-top-color: transparent;
}

.wssb-band--pale {
	background: var(--wssb-paper);
}

.wssb-band--sky {
	background: var(--wssb-sky-pale);
}

.wssb-band--dark {
	background: var(--wssb-green-deep);
	color: var(--wssb-on-dark);
}

.wssb-band--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255, 255, 255, 0.045) 0,
		rgba(255, 255, 255, 0.045) 1px,
		transparent 1px,
		transparent 24px
	);
	pointer-events: none;
}

.wssb-band--dark > * {
	position: relative;
}

.wssb-band--dark .wssb-eyebrow {
	color: var(--wssb-sky);
}

.wssb-band--dark .wssb-eyebrow::after {
	background: var(--wssb-on-dark-rule);
}

.wssb-band--dark .wssb-band__title {
	color: #fff;
}

.wssb-band--dark .wssb-band__lede {
	color: var(--wssb-on-dark-dim);
}

.wssb-band--join {
	background: var(--wssb-sky-pale);
}

.wssb-band__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-2xl);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.018em;
	margin: 0 0 var(--wssb-s3);
	color: var(--wssb-ink);
	text-wrap: balance;
}

.wssb-band__lede {
	max-width: 62ch;
	font-size: var(--wssb-t-md);
	line-height: 1.65;
	color: var(--wssb-muted);
	margin: 0 0 var(--wssb-s6);
}

.wssb-band__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wssb-s5);
	margin-bottom: var(--wssb-s6);
	flex-wrap: wrap;
}

.wssb-band__head .wssb-band__title,
.wssb-band__head .wssb-band__lede {
	margin-bottom: 0;
}

.wssb-band__head .wssb-eyebrow {
	margin-bottom: var(--wssb-s3);
}

/* ============================== 6. Home — hero and the specimen label */

.wssb-hero {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
	background:
		radial-gradient(120% 90% at 88% 0%, rgba(192, 232, 242, 0.55) 0%, rgba(192, 232, 242, 0) 60%),
		linear-gradient(180deg, var(--wssb-sky-pale) 0%, #fff 72%);
	overflow: hidden;
}

/* Herbarium ruling, fading out down the sheet */
.wssb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(27, 107, 58, 0.05) 0,
		rgba(27, 107, 58, 0.05) 1px,
		transparent 1px,
		transparent 26px
	);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
	pointer-events: none;
}

.wssb-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.wssb-hero__text {
	min-width: 0;
}

.wssb-hero__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-4xl);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.028em;
	margin: 0 0 var(--wssb-s5);
	color: var(--wssb-ink);
	text-wrap: balance;
	max-width: 15ch;
}

.wssb-hero__title em {
	font-style: italic;
	font-weight: 500;
	color: var(--wssb-green);
}

.wssb-hero__lede {
	max-width: 52ch;
	font-size: var(--wssb-t-lg);
	line-height: 1.6;
	color: var(--wssb-ink-soft);
	margin: 0 0 var(--wssb-s6);
}

.wssb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wssb-s3);
	margin: 0 0 var(--wssb-s6);
}

/* Small proof row under the buttons */
.wssb-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wssb-s5) var(--wssb-s6);
	margin: 0;
	padding-top: var(--wssb-s5);
	border-top: 1px solid var(--wssb-rule);
	list-style: none;
}

.wssb-hero__proof li {
	display: grid;
	gap: 0.2rem;
}

.wssb-hero__proof b {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-xl);
	font-weight: 600;
	line-height: 1;
	color: var(--wssb-green-deep);
	font-variant-numeric: tabular-nums;
}

.wssb-hero__proof span {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-muted);
}

/* --- The specimen label: the signature element --- */

.wssb-specimen {
	margin: 0;
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	box-shadow: var(--wssb-shadow-lg);
	padding: 1rem 1rem 0;
	max-width: 440px;
	width: 100%;
	justify-self: end;
	position: relative;
}

/* The pin at the corner of a mounted sheet */
.wssb-specimen::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 62px;
	height: 14px;
	background: rgba(156, 131, 41, 0.22);
	border: 1px solid rgba(156, 131, 41, 0.35);
	border-radius: 1px;
}

.wssb-specimen__plate {
	background:
		repeating-linear-gradient(
			0deg,
			var(--wssb-sky-pale) 0,
			var(--wssb-sky-pale) 15px,
			#fff 15px,
			#fff 16px
		);
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r-sm);
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 3vw, 2.25rem) var(--wssb-s4);
}

.wssb-specimen__plate img {
	width: 200px;
	height: auto;
	max-width: 100%;
	mix-blend-mode: multiply;
}

.wssb-specimen__label {
	padding: var(--wssb-s4) 0 var(--wssb-s5);
}

.wssb-specimen__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wssb-s3);
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wssb-crimson-ink);
	padding-bottom: var(--wssb-s3);
	border-bottom: 1px solid var(--wssb-rule);
	margin-bottom: var(--wssb-s2);
}

.wssb-specimen__head span:last-child {
	color: var(--wssb-muted);
	letter-spacing: 0.08em;
}

.wssb-specimen__label dl {
	margin: 0;
}

.wssb-specimen__label dl > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wssb-s4);
	padding: 0.5rem 0;
	border-bottom: 1px dotted var(--wssb-rule);
}

.wssb-specimen__label dl > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.wssb-specimen__label dt {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin: 0;
}

.wssb-specimen__label dd {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-xs);
	font-weight: 500;
	color: var(--wssb-ink);
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ==================================================== 7. Home — yield loss */

.wssb-loss {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	max-width: 1000px;
}

.wssb-loss__head {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.55rem;
	flex-wrap: wrap;
}

.wssb-loss__crop {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-xl);
	font-weight: 600;
	color: var(--wssb-ink);
	margin: 0;
	line-height: 1.2;
}

.wssb-loss__latin {
	font-family: var(--wssb-serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wssb-t-base);
	color: var(--wssb-muted);
	margin-left: 0.4rem;
}

.wssb-loss__figure {
	margin: 0 0 0 auto;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-lg);
	font-weight: 500;
	color: var(--wssb-crimson-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wssb-loss__figure small {
	font-size: var(--wssb-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin-left: 0.4rem;
}

.wssb-loss__track {
	position: relative;
	display: flex;
	height: 34px;
	background: var(--wssb-white);
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r-sm);
	overflow: hidden;
}

.wssb-loss__kept {
	flex: none;
	width: calc(100% - var(--wssb-lost, 0%));
	background: var(--wssb-green);
	position: relative;
}

.wssb-loss__lost {
	flex: none;
	width: var(--wssb-lost, 0%);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(176, 35, 28, 0.9) 0,
		rgba(176, 35, 28, 0.9) 5px,
		rgba(176, 35, 28, 0.16) 5px,
		rgba(176, 35, 28, 0.16) 10px
	);
	border-left: 1px solid var(--wssb-green-deep);
}

/* The bars are drawn at their true value by default, so the chart is never
   wrong when JavaScript, IntersectionObserver or the animation fails. The
   sweep is an enhancement: the script marks the list, which resets the bars
   to zero, and then reveals each one as it scrolls into view. */
.wssb-loss__track {
	--wssb-lost-shown: var(--wssb-lost, 0%);
}

.wssb-loss__lost {
	width: var(--wssb-lost-shown);
	transition: width 1s var(--wssb-ease);
}

.wssb-loss__kept {
	width: calc(100% - var(--wssb-lost-shown));
	transition: width 1s var(--wssb-ease);
}

.wssb-loss--animate .wssb-loss__track {
	--wssb-lost-shown: 0%;
}

.wssb-loss--animate .wssb-loss__track.is-shown {
	--wssb-lost-shown: var(--wssb-lost, 0%);
}

/* Percentage scale under the last bar */
.wssb-loss__scale {
	display: flex;
	justify-content: space-between;
	margin: var(--wssb-s3) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	color: var(--wssb-muted);
	max-width: 1000px;
	border-top: 1px solid var(--wssb-rule);
	padding-top: 0.4rem;
}

.wssb-loss__key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wssb-s5);
	margin: var(--wssb-s5) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.04em;
	color: var(--wssb-muted);
}

.wssb-loss__key li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.wssb-loss__swatch {
	width: 22px;
	height: 12px;
	flex: none;
	border: 1px solid var(--wssb-rule);
	border-radius: 1px;
	background: var(--wssb-green);
}

.wssb-loss__swatch--lost {
	background-color: #fff;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(176, 35, 28, 0.9) 0,
		rgba(176, 35, 28, 0.9) 5px,
		rgba(176, 35, 28, 0.16) 5px,
		rgba(176, 35, 28, 0.16) 10px
	);
}

/* ============================================================ 8. Objectives */

.wssb-objectives {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: var(--wssb-s4);
	margin-block: var(--wssb-s6);
	list-style: none;
	padding: 0;
}

.wssb-objectives__item {
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	padding: var(--wssb-s5);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wssb-s4);
	align-items: start;
	transition: border-color 0.18s var(--wssb-ease), box-shadow 0.18s var(--wssb-ease);
}

.wssb-objectives__item:hover {
	border-color: var(--wssb-green);
	box-shadow: var(--wssb-shadow-sm);
}

.wssb-objectives__i {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-xl);
	font-weight: 500;
	font-style: italic;
	color: var(--wssb-seed-ink);
	line-height: 1;
	flex: none;
	min-width: 1.6em;
	padding-bottom: 0.2rem;
	border-bottom: 2px solid rgba(156, 131, 41, 0.3);
}

.wssb-objectives__item p {
	margin: 0;
	font-size: var(--wssb-t-base);
	line-height: 1.6;
	color: var(--wssb-ink-soft);
}

/* =============================================================== 9. People */

.wssb-committee__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: var(--wssb-s4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wssb-committee__sub {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-xl);
	font-weight: 600;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 var(--wssb-s5);
	padding-bottom: var(--wssb-s3);
	border-bottom: 2px solid var(--wssb-ink);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wssb-s4);
	flex-wrap: wrap;
}

.wssb-committee__sub small {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-muted);
}

.wssb-person {
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	padding: var(--wssb-s4);
	display: flex;
	flex-direction: column;
	gap: var(--wssb-s4);
	transition: border-color 0.18s var(--wssb-ease), box-shadow 0.18s var(--wssb-ease),
		transform 0.18s var(--wssb-ease);
}

.wssb-person:hover {
	border-color: var(--wssb-green);
	box-shadow: var(--wssb-shadow-md);
	transform: translateY(-2px);
}

.wssb-person__photo {
	aspect-ratio: 4 / 5;
	background:
		repeating-linear-gradient(
			0deg,
			var(--wssb-sky-pale) 0,
			var(--wssb-sky-pale) 13px,
			#fff 13px,
			#fff 14px
		);
	border: 1px solid var(--wssb-rule-soft);
	border-radius: var(--wssb-r-sm);
	display: grid;
	place-items: center;
	overflow: hidden;
	position: relative;
}

.wssb-person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wssb-person__initials {
	font-family: var(--wssb-serif);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wssb-green);
	opacity: 0.42;
	padding: 0.35em 0.55em;
	border: 1px solid rgba(27, 107, 58, 0.22);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	line-height: 1;
}

.wssb-person__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1;
}

.wssb-person__position {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-crimson-ink);
	margin: 0 0 0.15rem;
	line-height: 1.4;
}

.wssb-person__name {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-md);
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	color: var(--wssb-ink);
	text-wrap: balance;
}

.wssb-person__org {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.05em;
	color: var(--wssb-muted);
	margin: 0;
}

.wssb-person__email {
	margin: auto 0 0;
	padding-top: var(--wssb-s2);
	font-size: var(--wssb-t-label);
	overflow-wrap: anywhere;
}

.wssb-person__email a {
	color: var(--wssb-green-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--wssb-rule);
	padding-bottom: 1px;
}

.wssb-person__email a:hover {
	border-bottom-color: var(--wssb-green);
}

/* Office bearers before any portrait has been uploaded: no empty plates, but
   still clearly the leadership — a green rule at the head of every card. */
.wssb-committee__grid--flat {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

.wssb-committee__grid--flat .wssb-person {
	border-top: 2px solid var(--wssb-green);
	padding: var(--wssb-s5) var(--wssb-s4) var(--wssb-s4);
	gap: 0;
}

.wssb-committee__grid--flat .wssb-person__name {
	font-size: var(--wssb-t-lg);
}

.wssb-committee__grid--flat .wssb-person__email {
	margin-top: var(--wssb-s3);
	padding-top: var(--wssb-s3);
	border-top: 1px solid var(--wssb-rule-soft);
}

/* Compact variant: the ordinary members, and every historic term */
.wssb-committee__grid--tight {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
	gap: 0;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	overflow: hidden;
	background: #fff;
}

.wssb-committee__grid--tight .wssb-person {
	border: 0;
	border-bottom: 1px solid var(--wssb-rule-soft);
	border-radius: 0;
	padding: var(--wssb-s4);
	gap: 0;
}

.wssb-committee__grid--tight .wssb-person:hover {
	transform: none;
	box-shadow: none;
	background: var(--wssb-paper);
	border-color: var(--wssb-rule-soft);
}

.wssb-committee__grid--tight .wssb-person__photo {
	display: none;
}

.wssb-committee__grid--tight .wssb-person__email {
	margin-top: 0.35rem;
	padding-top: 0;
}

/* ============================================= 10. Conferences, programme */

.wssb-confs {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wssb-rule);
}

.wssb-confs__item {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) minmax(0, 300px);
	gap: var(--wssb-s5);
	padding: var(--wssb-s5) var(--wssb-s4);
	margin-inline: calc(var(--wssb-s4) * -1);
	border-bottom: 1px solid var(--wssb-rule);
	align-items: start;
	transition: background-color 0.18s var(--wssb-ease);
}

.wssb-confs__item:hover {
	background: var(--wssb-paper);
}

.wssb-confs__roman {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-2xl);
	font-weight: 500;
	color: var(--wssb-seed-ink);
	letter-spacing: 0.02em;
	line-height: 1;
	padding-top: 0.35rem;
}

.wssb-confs__meta {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin: 0 0 0.45rem;
	flex-wrap: wrap;
}

.wssb-confs__year {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-sm);
	font-weight: 500;
	color: var(--wssb-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.wssb-confs__theme {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-lg);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: var(--wssb-ink);
	text-wrap: balance;
}

.wssb-confs__side {
	display: grid;
	gap: 0.5rem;
	justify-items: start;
	padding-top: 0.15rem;
}

.wssb-confs__venue {
	font-size: var(--wssb-t-sm);
	line-height: 1.5;
	color: var(--wssb-muted);
	margin: 0;
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.wssb-confs__venue svg {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 0.2em;
	fill: none;
	stroke: var(--wssb-green);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wssb-confs__link {
	margin: 0;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
}

/* The current conference is marked on the record */
.wssb-confs__item--current {
	background: var(--wssb-sky-pale);
	box-shadow: inset 3px 0 0 var(--wssb-green);
}

.wssb-confs__item--current:hover {
	background: var(--wssb-sky-pale);
}

/* Featured conference band */
.wssb-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.wssb-feature__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-3xl);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.022em;
	margin: 0 0 var(--wssb-s5);
	max-width: 18ch;
	color: #fff;
	text-wrap: balance;
}

.wssb-feature__lede {
	max-width: 54ch;
	color: var(--wssb-on-dark-dim);
	margin: 0 0 var(--wssb-s6);
	font-size: var(--wssb-t-md);
	line-height: 1.65;
}

.wssb-feature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wssb-s3);
	margin: 0;
}

/* The facts sit on a light card so the dark band gains a focal point */
.wssb-feature__card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--wssb-on-dark-rule);
	border-radius: var(--wssb-r);
	padding: var(--wssb-s5);
	backdrop-filter: blur(2px);
}

.wssb-feature__facts {
	display: grid;
	gap: var(--wssb-s4);
	margin: 0;
}

.wssb-feature__facts > div {
	display: grid;
	gap: 0.25rem;
	padding-bottom: var(--wssb-s4);
	border-bottom: 1px solid var(--wssb-on-dark-rule);
}

.wssb-feature__facts > div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.wssb-feature__facts dt {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wssb-sky);
	margin: 0;
}

.wssb-feature__facts dd {
	margin: 0;
	font-size: var(--wssb-t-sm);
	line-height: 1.5;
	color: #fff;
}

/* Programme */
.wssb-programme {
	border-top: 1px solid var(--wssb-rule);
	max-width: 940px;
}

.wssb-programme__row {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: var(--wssb-s5);
	padding: var(--wssb-s4) var(--wssb-s3);
	margin-inline: calc(var(--wssb-s3) * -1);
	border-bottom: 1px solid var(--wssb-rule-soft);
	align-items: baseline;
}

.wssb-programme__row:hover {
	background: var(--wssb-paper);
}

/* Rows with a named speaker carry more weight than the housekeeping rows */
.wssb-programme__row--speaker {
	border-bottom-color: var(--wssb-rule);
}

.wssb-programme__time {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-xs);
	color: var(--wssb-green-deep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.wssb-programme__item {
	margin: 0;
	font-size: var(--wssb-t-base);
	font-weight: 500;
	color: var(--wssb-ink);
}

.wssb-programme__who {
	margin: 0.2rem 0 0;
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-base);
	font-weight: 600;
	color: var(--wssb-green-deep);
}

.wssb-programme__aff {
	margin: 0.1rem 0 0;
	font-size: var(--wssb-t-xs);
	color: var(--wssb-muted);
	line-height: 1.5;
}

/* ============================================================= 11. Awards */

.wssb-awards {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
}

.wssb-awards__year {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--wssb-s5);
	align-items: start;
}

.wssb-awards__heading {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-2xl);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wssb-seed-ink);
	margin: 0;
	padding-top: 0.35rem;
	position: sticky;
	top: 110px;
	font-variant-numeric: tabular-nums;
}

.wssb-awards__heading--undated {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wssb-muted);
	padding-top: 0.75rem;
}

.wssb-awards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--wssb-s4);
}

.wssb-awards__item {
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-top: 2px solid var(--wssb-seed);
	border-radius: var(--wssb-r);
	padding: var(--wssb-s4) var(--wssb-s5);
	transition: box-shadow 0.18s var(--wssb-ease), transform 0.18s var(--wssb-ease);
}

.wssb-awards__item:hover {
	box-shadow: var(--wssb-shadow-md);
	transform: translateY(-2px);
}

.wssb-awards__name {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-md);
	font-weight: 600;
	margin: 0 0 0.35rem;
	line-height: 1.3;
	color: var(--wssb-ink);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.wssb-awards__org {
	margin: 0;
	font-size: var(--wssb-t-xs);
	line-height: 1.55;
	color: var(--wssb-muted);
}

/* ============================================================ 12. Notices */

.wssb-notices {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wssb-rule);
}

.wssb-notices__item {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) auto;
	gap: var(--wssb-s5);
	padding: var(--wssb-s5) var(--wssb-s3);
	margin-inline: calc(var(--wssb-s3) * -1);
	border-bottom: 1px solid var(--wssb-rule);
	align-items: start;
	transition: background-color 0.18s var(--wssb-ease);
}

.wssb-notices__item:hover {
	background: var(--wssb-paper);
}

.wssb-notices__date {
	text-align: center;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	padding: 0.45rem 0.25rem 0.4rem;
	align-self: start;
	background: #fff;
	flex: none;
}

.wssb-notices__day {
	display: block;
	font-family: var(--wssb-mono);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1;
	color: var(--wssb-green-deep);
	font-variant-numeric: tabular-nums;
}

.wssb-notices__mon {
	display: block;
	font-family: var(--wssb-mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin-top: 0.3rem;
}

.wssb-notices__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-lg);
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.35rem;
	text-wrap: balance;
}

.wssb-notices__title a {
	color: var(--wssb-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--wssb-green), var(--wssb-green));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.25s var(--wssb-ease), color 0.18s var(--wssb-ease);
}

.wssb-notices__title a:hover {
	background-size: 100% 1px;
	color: var(--wssb-green-deep);
}

.wssb-notices__excerpt {
	margin: 0;
	font-size: var(--wssb-t-sm);
	color: var(--wssb-muted);
	line-height: 1.6;
	max-width: 70ch;
}

.wssb-notices__file {
	margin: 0.6rem 0 0;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
}

.wssb-notices__file a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wssb-green-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--wssb-rule);
	padding-bottom: 1px;
}

.wssb-notices__file a:hover {
	border-bottom-color: var(--wssb-green);
}

.wssb-notices__file svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wssb-notices__pin {
	align-self: start;
	margin-top: 0.15rem;
}

.wssb-notices--compact .wssb-notices__item {
	padding-block: var(--wssb-s3);
}

.wssb-notices--compact .wssb-notices__title {
	font-size: var(--wssb-t-base);
}

/* ============================= 13. Directory, tables and pagination */

.wssb-directory__search {
	display: flex;
	gap: var(--wssb-s2);
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: var(--wssb-s5);
	padding: var(--wssb-s4);
	background: var(--wssb-paper);
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
}

.wssb-directory__search input[type="search"],
.wssb-searchform input[type="search"] {
	flex: 1 1 280px;
	font-family: var(--wssb-sans);
	font-size: var(--wssb-t-base);
	padding: 0.7rem 0.9rem;
	min-height: 44px;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	background: #fff;
	color: var(--wssb-ink);
}

.wssb-directory__search input[type="search"]::placeholder,
.wssb-searchform input[type="search"]::placeholder {
	color: var(--wssb-muted);
	opacity: 1;
}

.wssb-directory__search input[type="search"]:focus,
.wssb-searchform input[type="search"]:focus {
	outline: 2px solid var(--wssb-green);
	outline-offset: 1px;
	border-color: var(--wssb-green);
}

.wssb-searchform {
	display: flex;
	gap: var(--wssb-s2);
	flex-wrap: wrap;
	max-width: 560px;
}

.wssb-directory__clear {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	color: var(--wssb-muted);
	padding: 0.5rem;
}

.wssb-directory__count {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin: 0 0 var(--wssb-s3);
}

.wssb-pager {
	margin-top: var(--wssb-s6);
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-xs);
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	align-items: center;
}

.wssb-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	text-decoration: none;
	color: var(--wssb-ink);
	background: #fff;
	transition: border-color 0.16s var(--wssb-ease), background-color 0.16s var(--wssb-ease);
}

.wssb-pager a.page-numbers:hover {
	border-color: var(--wssb-green);
	background: var(--wssb-green-tint);
}

.wssb-pager .page-numbers.current {
	background: var(--wssb-green);
	border-color: var(--wssb-green);
	color: #fff;
	font-weight: 500;
}

.wssb-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 0;
}

/* Tables */
.wssb-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.wssb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wssb-t-sm);
	background: #fff;
	min-width: 560px;
}

.wssb-table caption {
	text-align: left;
	padding: var(--wssb-s3) var(--wssb-s4);
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	color: var(--wssb-muted);
}

.wssb-table th,
.wssb-table td {
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--wssb-rule-soft);
	vertical-align: top;
	line-height: 1.5;
}

.wssb-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	background: var(--wssb-paper);
	white-space: nowrap;
	border-bottom: 1px solid var(--wssb-rule);
}

.wssb-table tbody th {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-base);
	font-weight: 600;
	color: var(--wssb-ink);
}

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

.wssb-table tbody tr:hover {
	background: var(--wssb-sky-pale);
}

.wssb-td-num {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-xs);
	font-variant-numeric: tabular-nums;
	color: var(--wssb-muted);
	white-space: nowrap;
}

/* ============================================================ 14. Journal */

.wssb-journal {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* A plausible journal cover, built from the society's own palette */
.wssb-journal__cover {
	aspect-ratio: 3 / 4;
	background:
		radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(165deg, var(--wssb-green-deep) 0%, var(--wssb-green-dark) 100%);
	border: 1px solid var(--wssb-green-dark);
	border-radius: 2px 5px 5px 2px;
	box-shadow: var(--wssb-shadow-lg);
	padding: var(--wssb-s5) var(--wssb-s5) var(--wssb-s5) calc(var(--wssb-s5) + 14px);
	display: flex;
	flex-direction: column;
	gap: var(--wssb-s2);
	color: #fff;
	position: relative;
	overflow: hidden;
}

/* The spine */
.wssb-journal__cover::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 16px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.08));
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Herbarium ruling on the cover */
.wssb-journal__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255, 255, 255, 0.05) 0,
		rgba(255, 255, 255, 0.05) 1px,
		transparent 1px,
		transparent 20px
	);
	pointer-events: none;
}

.wssb-journal__rule {
	height: 2px;
	background: var(--wssb-sky);
	opacity: 0.75;
	margin-bottom: var(--wssb-s2);
}

.wssb-journal__spine {
	font-family: var(--wssb-mono);
	font-size: 1.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--wssb-sky);
	line-height: 1;
}

.wssb-journal__issn {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.72);
}

.wssb-journal__name {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-lg);
	font-weight: 600;
	line-height: 1.25;
	margin-top: auto;
	color: #fff;
}

.wssb-journal__organ {
	font-size: var(--wssb-t-label);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.wssb-journal__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-2xl);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.018em;
	margin: 0 0 var(--wssb-s3);
	text-wrap: balance;
}

.wssb-journal__text p {
	max-width: 56ch;
	color: var(--wssb-muted);
	font-size: var(--wssb-t-md);
	line-height: 1.65;
}

.wssb-journal__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wssb-s5);
	margin: var(--wssb-s5) 0 0;
	padding: var(--wssb-s4) 0 0;
	border-top: 1px solid var(--wssb-rule);
	list-style: none;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wssb-muted);
}

.wssb-journal__actions {
	display: flex;
	gap: var(--wssb-s3);
	flex-wrap: wrap;
	margin-top: var(--wssb-s5);
}

/* ==================================================== 15. Join and contact */

.wssb-join {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wssb-s6);
	align-items: center;
}

.wssb-join__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-2xl);
	font-weight: 600;
	letter-spacing: -0.018em;
	margin: 0 0 var(--wssb-s3);
	color: var(--wssb-ink);
}

.wssb-join p {
	margin: 0;
	max-width: 60ch;
	color: var(--wssb-ink-soft);
	font-size: var(--wssb-t-md);
	line-height: 1.65;
}

.wssb-join__action {
	margin: 0;
	display: flex;
	gap: var(--wssb-s3);
	flex-wrap: wrap;
}

.wssb-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--wssb-s4);
	margin-block: var(--wssb-s6);
}

.wssb-contact__card {
	border: 1px solid var(--wssb-rule);
	border-top: 3px solid var(--wssb-green);
	border-radius: var(--wssb-r);
	padding: var(--wssb-s5);
	background: #fff;
	transition: box-shadow 0.18s var(--wssb-ease);
}

.wssb-contact__card:hover {
	box-shadow: var(--wssb-shadow-md);
}

.wssb-contact__label {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin: 0 0 var(--wssb-s4);
	padding-bottom: var(--wssb-s2);
	border-bottom: 1px solid var(--wssb-rule-soft);
}

.wssb-contact__card p {
	margin: 0 0 0.55rem;
	font-size: var(--wssb-t-sm);
	line-height: 1.6;
}

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

.wssb-contact__card a {
	color: var(--wssb-green-deep);
	overflow-wrap: anywhere;
}

/* =========================== 16. Utilities, motion, screens and print */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* A ring for keyboard users only.
   :focus-visible alone is not quite enough: Safari still moves focus to a
   clicked link or button, and some browsers keep a default ring on :focus,
   so the pointer case is switched off explicitly. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wssb-green);
	outline-offset: 2px;
	border-radius: var(--wssb-r-sm);
}

/* Clicking a card, a tab or a summary must not leave a box behind either. */
:where(a, button, summary, label, [tabindex]) {
	-webkit-tap-highlight-color: transparent;
}

.wssb-nav ul a:focus:not(:focus-visible),
.wssb-nav__toggle:focus:not(:focus-visible),
.wssb-burger:focus:not(:focus-visible),
.wssb-search-toggle:focus:not(:focus-visible),
.wssb-btn:focus:not(:focus-visible),
.wssb-more:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.wssb-band--dark :where(a, button):focus-visible,
.wssb-footer :where(a, button):focus-visible,
.wssb-topbar :where(a, button):focus-visible {
	outline-color: var(--wssb-sky);
}

.wssb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--wssb-green-deep);
	color: #fff;
	padding: 0.85rem 1.35rem;
	font-family: var(--wssb-sans);
	font-size: var(--wssb-t-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--wssb-r) 0;
}

.wssb-skip:focus {
	left: 0;
}

/* Prevent the sticky header from covering in-page anchors */
[id] {
	scroll-margin-top: 110px;
}

/* --- Screens --- */

@media (max-width: 1080px) {
	.wssb-confs__item {
		grid-template-columns: 62px minmax(0, 1fr);
	}

	.wssb-confs__side {
		grid-column: 2;
	}

	.wssb-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wssb-footer__grid > .wssb-footer__contact {
		grid-column: span 3;
		border-top: 1px solid var(--wssb-on-dark-rule);
		padding-top: var(--wssb-s5);
	}
}

@media (max-width: 980px) {
	/* minmax(0, 1fr), not 1fr: a bare 1fr takes its minimum from the content,
	   so a single child that cannot wrap drags the column past the viewport. */
	.wssb-hero__grid,
	.wssb-journal,
	.wssb-join,
	.wssb-feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.wssb-specimen {
		justify-self: start;
		max-width: 420px;
	}

	.wssb-journal__cover {
		max-width: 240px;
	}

	.wssb-awards__year {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wssb-s4);
	}

	.wssb-awards__heading {
		position: static;
		padding-bottom: var(--wssb-s2);
		border-bottom: 2px solid rgba(156, 131, 41, 0.35);
	}
}

/* --- Compact navigation ------------------------------------------------
   The switch to the drawer is decided by measurement, not by a fixed
   breakpoint: the script compares the brand, the menu and the actions
   against the room available and adds .wssb-nav-compact to <html> when
   they no longer fit. That way the header cannot be broken by adding a
   menu item, which a fixed breakpoint could never survive. An inline
   snippet in the head sets the same class from the viewport width before
   first paint, so a phone never flashes the desktop bar. */

.wssb-nav-compact .wssb-burger {
	display: inline-flex;
}

.wssb-nav-compact .wssb-header__cta {
	display: none;
}

/* On a phone the drawer carries its own search field, so a second search
   button in the bar is redundant — and at 320px it left the burger six pixels
   from the edge of the screen. It comes back only where there is room for it:
   a compact bar on a tablet or a laptop, where a lone burger at the end of a
   wide row reads as a header that failed to load. */
.wssb-nav-compact .wssb-search-toggle {
	display: none;
}

@media (min-width: 700px) {
	.wssb-nav-compact .wssb-search-toggle {
		display: grid;
	}

	/* The compact bar is wide and mostly empty here. Pulling the height in and
	   letting the brand take the space stops it looking like a mistake. */
	.wssb-nav-compact .wssb-header__inner {
		min-height: 64px;
	}

	.wssb-nav-compact .wssb-brand {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Absolute, not fixed: the header sets a backdrop-filter, which makes it
   the containing block for fixed descendants — a fixed drawer would be
   trapped inside the header box. Absolute against the sticky header gives
   the same full-height panel without that trap. */
.wssb-nav-compact .wssb-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--wssb-rule);
	box-shadow: var(--wssb-shadow-lg);
	padding: var(--wssb-s5) var(--wssb-gut) var(--wssb-s7);
	height: calc(100dvh - 100%);
	max-height: calc(100vh - 100%);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wssb-nav-compact .wssb-nav.is-open {
	display: block;
	animation: wssb-drop 0.22s var(--wssb-ease);
}

.wssb-nav-compact .wssb-nav__search,
.wssb-nav-compact .wssb-nav__foot {
	display: block;
}

.wssb-nav-compact .wssb-nav__foot {
	display: grid;
}

.wssb-nav-compact .wssb-nav ul {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.wssb-nav-compact .wssb-nav > ul > li {
	border-bottom: 1px solid var(--wssb-rule-soft);
}

/* The drawer footer draws its own rule; two in a row reads as a mistake. */
.wssb-nav-compact .wssb-nav > ul > li:last-child {
	border-bottom: 0;
}

.wssb-nav-compact .wssb-nav ul a {
	padding: 0.85rem 0;
	font-size: var(--wssb-t-md);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.wssb-nav-compact .wssb-nav > ul > li > a::after {
	display: none;
}

/* Align the toggle with the link row, not the middle of an open submenu. */
.wssb-nav-compact .wssb-nav__toggle {
	top: 0;
	right: 0;
	transform: none;
	width: 48px;
	height: 52px;
}

.wssb-nav-compact .wssb-nav__toggle svg {
	width: 12px;
	height: 12px;
}

/* In the drawer a dropdown is opened by its button, never by hover. */
html.wssb-nav-compact .wssb-nav .sub-menu,
html.wssb-nav-compact .wssb-nav .sub-menu:has(.wssb-nav__item--described) {
	position: static;
	display: none;
	border: 0;
	border-left: 2px solid var(--wssb-rule);
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 var(--wssb-s3) var(--wssb-s4);
	min-width: 0;
}

.wssb-nav-compact .wssb-nav li:hover > .sub-menu,
.wssb-nav-compact .wssb-nav li:focus-within > .sub-menu {
	display: none;
}

.wssb-nav-compact .wssb-nav .wssb-nav__toggle[aria-expanded="true"] + .sub-menu,
.wssb-nav-compact .wssb-nav .sub-menu.is-open {
	display: flex;
}

/* A described link is two stacked lines, so it must not be laid out as a
   flex row — that makes its minimum width the label plus the description
   side by side, which is wider than a phone. */
.wssb-nav-compact .wssb-nav .sub-menu a {
	display: block;
	padding: 0.6rem 0;
	font-size: var(--wssb-t-sm);
}

/* Without JavaScript there is no toggle to press, so the menu is simply
   laid out under the header and stays open. */
.no-js .wssb-nav {
	position: static;
	display: block;
	height: auto;
	max-height: none;
	box-shadow: none;
	padding-inline: 0;
}

.no-js .wssb-burger,
.no-js .wssb-search-toggle {
	display: none;
}

/* On a narrow screen that open menu has to stack, or it runs off the side. */
@media (max-width: 1080px) {
	.no-js .wssb-header__inner {
		flex-wrap: wrap;
	}

	.no-js .wssb-nav {
		flex: 1 1 100%;
		min-width: 0;
		margin-left: 0;
		border-top: 1px solid var(--wssb-rule-soft);
		padding-block: var(--wssb-s3);
	}

	.no-js .wssb-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.no-js .wssb-nav > ul > li {
		border-bottom: 1px solid var(--wssb-rule-soft);
	}

	.no-js .wssb-nav > ul > li > a {
		padding: 0.7rem 0;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.no-js .wssb-nav .sub-menu a {
		display: block;
		padding: 0.6rem 0;
		font-size: var(--wssb-t-sm);
	}

	html.no-js .wssb-nav .sub-menu,
	html.no-js .wssb-nav .sub-menu:has(.wssb-nav__item--described) {
		position: static;
		display: flex;
		border: 0;
		border-left: 2px solid var(--wssb-rule);
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 var(--wssb-s3) var(--wssb-s4);
		min-width: 0;
	}

	.no-js .wssb-nav__search,
	.no-js .wssb-nav__foot {
		display: none;
	}
}

@keyframes wssb-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
	.wssb-topbar__inner {
		justify-content: center;
		text-align: center;
	}

	.wssb-topbar__links {
		justify-content: center;
	}

		.wssb-notices__item {
		grid-template-columns: 58px minmax(0, 1fr);
		gap: var(--wssb-s4);
	}

	.wssb-notices__pin {
		grid-column: 2;
		justify-self: start;
	}

	.wssb-programme__row {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.wssb-confs__item {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: var(--wssb-s4);
	}

	.wssb-confs__roman {
		font-size: var(--wssb-t-xl);
	}

	.wssb-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wssb-footer__grid > .wssb-footer__contact {
		grid-column: span 2;
	}

	.wssb-loss__figure {
		margin-left: 0;
	}

	.wssb-hero__proof {
		gap: var(--wssb-s4) var(--wssb-s5);
	}

	/* A single rule under a wrapped eyebrow reads better than a stub beside it. */
	.wssb-eyebrow {
		display: block;
		padding-bottom: var(--wssb-s2);
		border-bottom: 1px solid var(--wssb-rule);
	}

	.wssb-eyebrow::after {
		display: none;
	}

	.wssb-band--dark .wssb-eyebrow {
		border-bottom-color: var(--wssb-on-dark-rule);
	}
}

@media (max-width: 560px) {
	/* A long kind label — "2nd International Conference" — must be allowed to
	   wrap on a handset rather than push the page sideways. */
	.wssb-tag {
		white-space: normal;
	}
}

@media (max-width: 400px) {
	/* Below the narrowest common handset the brand and the burger label
	   cannot both fit; the icon carries the button on its own. */
	.wssb-burger__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wssb-burger {
		padding: 0.5rem 0.65rem;
	}

	.wssb-brand__name {
		max-width: 9.5em;
	}
}

@media (max-width: 520px) {
	.wssb-brand img {
		width: 44px;
		height: 44px;
	}

	.wssb-brand__name {
		font-size: 0.875rem;
		max-width: 11.5em;
	}

	.wssb-hero__proof {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.wssb-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wssb-footer__grid > * {
		grid-column: 1 !important;
	}

	.wssb-committee__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Motion --- */

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

	.wssb-loss__track {
		--wssb-lost-shown: var(--wssb-lost, 0%);
	}

	.wssb-btn:hover,
	.wssb-person:hover,
	.wssb-awards__item:hover {
		transform: none;
	}
}

/* Bars stay drawn when JavaScript never runs */
@media (scripting: none) {
	.wssb-loss__track {
		--wssb-lost-shown: var(--wssb-lost, 0%);
	}
}

.no-js .wssb-loss__track {
	--wssb-lost-shown: var(--wssb-lost, 0%);
}

/* --- Print --- */

@media print {
	.wssb-topbar,
	.wssb-nav,
	.wssb-burger,
	.wssb-header__cta,
	.wssb-footer__bar,
	.wssb-band--join,
	.wssb-skip,
	.wssb-pager,
	.wssb-directory__search {
		display: none !important;
	}

	.wssb-header {
		position: static;
		box-shadow: none;
		backdrop-filter: none;
	}

	.wssb-band {
		padding-block: 1rem;
		break-inside: avoid;
	}

	.wssb-band--dark,
	.wssb-journal__cover {
		background: none !important;
		color: #000 !important;
		border: 1px solid #999;
	}

	.wssb-band--dark .wssb-feature__title,
	.wssb-band--dark .wssb-feature__facts dd {
		color: #000 !important;
	}

	.wssb-person,
	.wssb-awards__item,
	.wssb-confs__item,
	.wssb-notices__item {
		break-inside: avoid;
	}

	.wssb-loss__track {
		--wssb-lost-shown: var(--wssb-lost, 0%);
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-family: var(--wssb-mono);
		font-size: 0.7em;
		color: #555;
	}
}

/* =========================================================================
   17. Rich layer — icons, medallions and the institutional sections
   ====================================================================== */

/* ------------------------------------------------------------------ Icons */

.wssb-i {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

.wssb-i--xs { width: 13px; height: 13px; stroke-width: 1.8; }
.wssb-i--sm { width: 16px; height: 16px; stroke-width: 1.7; }
.wssb-i--lg { width: 30px; height: 30px; stroke-width: 1.4; }

/* A ringed icon plate. The society's mark is a disc, so the medallion is
   the emblem's own geometry rather than a generic rounded square. */
.wssb-medallion {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 50%;
	color: var(--wssb-green-deep);
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
		var(--wssb-green-tint);
	border: 1px solid rgba(27, 107, 58, 0.22);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.7);
	transition: transform 0.25s var(--wssb-ease), border-color 0.25s var(--wssb-ease),
		background-color 0.25s var(--wssb-ease);
}

.wssb-medallion--sm {
	width: 44px;
	height: 44px;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7);
}

.wssb-medallion--sm .wssb-i { width: 20px; height: 20px; }

.wssb-band--dark .wssb-medallion {
	color: var(--wssb-sky);
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--wssb-on-dark-rule);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.05);
}

/* --------------------------------------------------------- Band variants */

.wssb-band--tight {
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.wssb-band__head--split {
	align-items: flex-end;
}

.wssb-band__head--stack {
	display: block;
}

.wssb-band__head-text {
	min-width: 0;
	flex: 1 1 32ch;
}

/* The zero-margin rule above collapses the gap between a title and its lede
   when both sit inside a band head; restore it here. */
.wssb-band__head-text .wssb-band__title {
	margin-bottom: var(--wssb-s3);
}

.wssb-band__head-text .wssb-band__lede {
	margin-bottom: 0;
}

.wssb-band__head--stack .wssb-band__head-text {
	max-width: 68ch;
}

/* Buttons gained a large size for the hero */
.wssb-btn--lg {
	font-size: var(--wssb-t-base);
	padding: 1em 1.8em;
	min-height: 52px;
}

/* ------------------------------------------------------------------ Hero */

.wssb-hero {
	background:
		radial-gradient(90% 70% at 78% -10%, rgba(192, 232, 242, 0.75) 0%, rgba(192, 232, 242, 0) 62%),
		radial-gradient(70% 60% at 4% 8%, rgba(27, 107, 58, 0.09) 0%, rgba(27, 107, 58, 0) 60%),
		linear-gradient(180deg, var(--wssb-sky-pale) 0%, #fff 74%);
}

/* A ghosted seedhead drawn behind the plate — the emblem's own subject,
   at a scale you only notice once. */
.wssb-hero__art {
	position: absolute;
	right: -7%;
	bottom: -26%;
	width: min(48%, 580px);
	color: rgba(27, 107, 58, 0.085);
	pointer-events: none;
	z-index: 0;
}

.wssb-hero__art svg { width: 100%; height: auto; display: block; }

.wssb-hero__grid { z-index: 1; }

/* Announcement pill */
.wssb-flash {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	max-width: 100%;
	margin: 0 0 var(--wssb-s5);
	padding: 0.4rem 0.9rem 0.4rem 0.4rem;
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: 100px;
	box-shadow: var(--wssb-shadow-sm);
	text-decoration: none;
	color: var(--wssb-ink);
	font-size: var(--wssb-t-sm);
	transition: border-color 0.2s var(--wssb-ease), box-shadow 0.2s var(--wssb-ease);
}

.wssb-flash:hover {
	border-color: var(--wssb-green);
	box-shadow: var(--wssb-shadow-md);
}

.wssb-flash__tag {
	flex: none;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wssb-green);
	border-radius: 100px;
	padding: 0.35em 0.8em;
}

.wssb-flash__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The pill itself must be able to shrink, or the ellipsis above never has a
   constraint to work against. */
.wssb-flash {
	max-width: 100%;
	min-width: 0;
}

.wssb-flash .wssb-i {
	color: var(--wssb-green);
	transition: transform 0.2s var(--wssb-ease);
}

.wssb-flash:hover .wssb-i { transform: translateX(3px); }

.wssb-hero__proof b { font-size: var(--wssb-t-2xl); }

/* ------------------------------------------------------------ Stats band */

.wssb-stats-band {
	background:
		radial-gradient(80% 120% at 12% 0%, rgba(192, 232, 242, 0.14) 0%, rgba(192, 232, 242, 0) 55%),
		var(--wssb-green-deep);
}

.wssb-stats {
	display: grid;
	/* Six tiles, so the column count is fixed rather than auto-fit: an
	   auto-fitted row leaves a hole whenever six does not divide by it. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--wssb-on-dark-rule);
	border: 1px solid var(--wssb-on-dark-rule);
	border-radius: var(--wssb-r);
	overflow: hidden;
}

/* Empty tracks are impossible here: the tiles are opaque and the grid is
   filled by a fixed six-item set. */
.wssb-stat {
	background: var(--wssb-green-deep);
	padding: var(--wssb-s5) var(--wssb-s4);
	display: grid;
	gap: 0.3rem;
	justify-items: start;
	transition: background-color 0.25s var(--wssb-ease);
}

.wssb-stat:hover { background: var(--wssb-green-dark); }

.wssb-stat__i {
	color: var(--wssb-sky);
	margin-bottom: 0.35rem;
	opacity: 0.9;
}

.wssb-stat__n {
	font-family: var(--wssb-serif);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.wssb-stat__l {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wssb-sky);
}

.wssb-stat__note {
	font-size: var(--wssb-t-xs);
	line-height: 1.5;
	color: var(--wssb-on-dark-dim);
	margin-top: 0.25rem;
}

.wssb-stats__foot {
	margin: var(--wssb-s5) 0 0;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.04em;
	color: var(--wssb-on-dark-dim);
}

.wssb-stats__foot a { color: var(--wssb-sky); }

/* ----------------------------------------------------------- Focus cards */

.wssb-focus {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--wssb-s4);
}

.wssb-focus__card {
	position: relative;
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	padding: var(--wssb-s5);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	overflow: hidden;
	transition: border-color 0.22s var(--wssb-ease), box-shadow 0.22s var(--wssb-ease),
		transform 0.22s var(--wssb-ease);
}

/* A green rule that draws itself in on hover */
.wssb-focus__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--wssb-green), var(--wssb-sky));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--wssb-ease);
}

.wssb-focus__card:hover {
	border-color: var(--wssb-green);
	box-shadow: var(--wssb-shadow-md);
	transform: translateY(-3px);
}

.wssb-focus__card:hover::before { transform: scaleX(1); }
.wssb-focus__card:hover .wssb-medallion { transform: scale(1.06); }

.wssb-focus .wssb-medallion { margin-bottom: var(--wssb-s3); }

.wssb-focus__kind {
	margin: 0;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wssb-crimson-ink);
}

.wssb-focus__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-lg);
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	color: var(--wssb-ink);
	text-wrap: balance;
}

.wssb-focus__text {
	margin: 0;
	font-size: var(--wssb-t-sm);
	line-height: 1.6;
	color: var(--wssb-muted);
}

.wssb-focus__link {
	margin-top: auto;
	padding-top: var(--wssb-s4);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wssb-green-deep);
	text-decoration: none;
}

.wssb-focus__link .wssb-i { transition: transform 0.2s var(--wssb-ease); }
.wssb-focus__link:hover .wssb-i { transform: translateX(3px); }

/* ------------------------------------------------------- President's band */

.wssb-president-band {
	background:
		linear-gradient(180deg, #fff 0%, var(--wssb-paper) 100%);
}

.wssb-president {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.wssb-portrait { margin: 0; }

.wssb-portrait__plate {
	aspect-ratio: 4 / 5;
	background:
		repeating-linear-gradient(0deg, var(--wssb-sky-pale) 0, var(--wssb-sky-pale) 15px, #fff 15px, #fff 16px);
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	box-shadow: var(--wssb-shadow-lg);
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 10px;
}

.wssb-portrait__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}

/* With no photograph, a square plate carrying a monogram in the emblem's
   own ring reads as a considered placeholder rather than a missing image. */
.wssb-portrait__plate--empty {
	aspect-ratio: 1 / 1;
	max-width: 260px;
	position: relative;
}

.wssb-portrait__plate--empty::after {
	content: "";
	position: absolute;
	inset: 12%;
	border: 1px dashed rgba(27, 107, 58, 0.18);
	border-radius: 50%;
	pointer-events: none;
}

.wssb-portrait__initials {
	position: relative;
	display: grid;
	place-items: center;
	width: 6.2rem;
	height: 6.2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(27, 107, 58, 0.22);
	font-family: var(--wssb-serif);
	font-size: 2.5rem;
	font-weight: 500;
	color: var(--wssb-green);
	opacity: 0.75;
	letter-spacing: 0.04em;
	line-height: 1;
}

.wssb-portrait__plate--empty + figcaption {
	max-width: 260px;
}

.wssb-portrait figcaption {
	display: grid;
	gap: 0.2rem;
	margin-top: var(--wssb-s4);
	padding-top: var(--wssb-s3);
	border-top: 2px solid var(--wssb-green);
}

.wssb-portrait figcaption strong {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-md);
	font-weight: 600;
	color: var(--wssb-ink);
}

.wssb-portrait figcaption span {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	letter-spacing: 0.06em;
	color: var(--wssb-muted);
	line-height: 1.5;
}

.wssb-president__text { position: relative; }

/* The mark hangs into the margin at wide widths, the way a pull quote does
   in print, and tucks back inline when there is no room. */
.wssb-quote-mark {
	display: block;
	color: var(--wssb-sky);
	margin-bottom: var(--wssb-s2);
}

.wssb-quote-mark .wssb-i { width: 52px; height: 52px; stroke-width: 1.2; }

@media (min-width: 1180px) {
	.wssb-quote-mark {
		position: absolute;
		left: -4.25rem;
		top: 2.6rem;
		margin: 0;
	}
}

.wssb-president__text p {
	max-width: 62ch;
	color: var(--wssb-ink-soft);
	margin: 0 0 var(--wssb-s4);
	line-height: 1.7;
}

.wssb-president__lead {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-xl);
	line-height: 1.45;
	color: var(--wssb-ink);
}

.wssb-president__sign {
	display: grid;
	gap: 0.15rem;
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-md);
	font-weight: 600;
	font-style: italic;
	color: var(--wssb-green-deep);
	padding-top: var(--wssb-s4);
	border-top: 1px solid var(--wssb-rule);
	max-width: 40ch;
}

.wssb-president__sign span {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--wssb-muted);
}

/* ---------------------------------------------------------------- Events */

.wssb-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: var(--wssb-s4);
}

.wssb-event {
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	padding: var(--wssb-s5) var(--wssb-s4);
	display: grid;
	gap: var(--wssb-s4);
	transition: box-shadow 0.22s var(--wssb-ease), transform 0.22s var(--wssb-ease),
		border-color 0.22s var(--wssb-ease);
}

.wssb-event:hover {
	border-color: var(--wssb-green);
	box-shadow: var(--wssb-shadow-md);
	transform: translateY(-3px);
}

/* A torn-off calendar leaf */
.wssb-event__date {
	justify-self: start;
	display: grid;
	justify-items: center;
	min-width: 74px;
	padding: 0.5rem 0.7rem 0.6rem;
	background: var(--wssb-green-deep);
	color: #fff;
	border-radius: var(--wssb-r);
	position: relative;
	box-shadow: var(--wssb-shadow-sm);
}

.wssb-event__date::before {
	content: "";
	position: absolute;
	inset: 0.28rem 0.5rem auto;
	height: 2px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 2px;
}

.wssb-event__d {
	font-family: var(--wssb-serif);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.1;
	margin-top: 0.4rem;
	font-variant-numeric: tabular-nums;
}

.wssb-event__m {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wssb-sky);
}

.wssb-event__y {
	font-family: var(--wssb-mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.6);
}

.wssb-event__body { display: grid; gap: 0.4rem; align-content: start; }

.wssb-event__body .wssb-tag { justify-self: start; }

.wssb-event__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-lg);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	text-wrap: balance;
}

.wssb-event__title a {
	color: var(--wssb-ink);
	text-decoration: none;
}

.wssb-event__title a:hover { color: var(--wssb-green-deep); }

.wssb-event__note {
	margin: 0;
	font-size: var(--wssb-t-sm);
	line-height: 1.55;
	color: var(--wssb-muted);
}

.wssb-event__venue {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0.2rem 0 0;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	line-height: 1.5;
	color: var(--wssb-muted);
}

.wssb-event__venue .wssb-i { color: var(--wssb-green); margin-top: 0.15em; }

/* ------------------------------------------------------- Research figures */

.wssb-research-band {
	background:
		linear-gradient(180deg, var(--wssb-paper) 0%, #fff 60%);
}

.wssb-research {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.wssb-research .wssb-band__head { margin-bottom: var(--wssb-s5); }

.wssb-research__actions {
	display: flex;
	gap: var(--wssb-s3);
	flex-wrap: wrap;
	margin: 0;
}

.wssb-figures {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	box-shadow: var(--wssb-shadow-md);
	overflow: hidden;
}

.wssb-figure {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 0 var(--wssb-s4);
	padding: var(--wssb-s5) var(--wssb-s5);
	border-bottom: 1px solid var(--wssb-rule-soft);
	transition: background-color 0.2s var(--wssb-ease);
}

.wssb-figure:last-child { border-bottom: 0; }
.wssb-figure:hover { background: var(--wssb-paper); }

.wssb-figure b {
	grid-row: span 2;
	font-family: var(--wssb-serif);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1;
	color: var(--wssb-green);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	text-align: right;
}

.wssb-figure__l {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-md);
	font-weight: 600;
	color: var(--wssb-ink);
}

.wssb-figure__n {
	font-size: var(--wssb-t-xs);
	line-height: 1.5;
	color: var(--wssb-muted);
	margin-top: 0.2rem;
}

/* --------------------------------------------------------- Institutions */

.wssb-inst-band {
	background: var(--wssb-paper);
	border-top: 1px solid var(--wssb-rule);
	border-bottom: 1px solid var(--wssb-rule);
}

.wssb-inst__lead {
	margin: 0 0 var(--wssb-s5);
	text-align: center;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wssb-muted);
}

.wssb-inst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wssb-s3);
}

.wssb-inst__item {
	display: grid;
	gap: 0.15rem;
	justify-items: center;
	align-content: start;
	padding: 0.7rem 1.1rem;
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	min-width: 96px;
	transition: border-color 0.2s var(--wssb-ease), box-shadow 0.2s var(--wssb-ease),
		transform 0.2s var(--wssb-ease);
}

.wssb-inst__item:hover {
	border-color: var(--wssb-green);
	box-shadow: var(--wssb-shadow-sm);
	transform: translateY(-2px);
}

.wssb-inst__code {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-base);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wssb-green-deep);
}

.wssb-inst__name {
	font-size: 0.6875rem;
	line-height: 1.35;
	color: var(--wssb-muted);
	text-align: center;
	max-width: 15ch;
	display: none;
}

@media (min-width: 720px) {
	.wssb-inst__name { display: block; }
}

/* ----------------------------------------------------------- Quick links */

.wssb-quick {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--wssb-s3);
}

.wssb-quick__item {
	display: flex;
	align-items: center;
	gap: var(--wssb-s4);
	height: 100%;
	padding: var(--wssb-s4);
	background: #fff;
	border: 1px solid var(--wssb-rule);
	border-radius: var(--wssb-r);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s var(--wssb-ease), box-shadow 0.2s var(--wssb-ease),
		transform 0.2s var(--wssb-ease);
}

.wssb-quick__item:hover {
	border-color: var(--wssb-green);
	box-shadow: var(--wssb-shadow-md);
	transform: translateY(-2px);
}

.wssb-quick__item:hover .wssb-medallion {
	background: var(--wssb-green);
	color: #fff;
	border-color: var(--wssb-green);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.wssb-quick__text { display: grid; gap: 0.1rem; min-width: 0; }

.wssb-quick__text strong {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-md);
	font-weight: 600;
	color: var(--wssb-ink);
}

.wssb-quick__text strong .wssb-i { color: var(--wssb-muted); }

.wssb-quick__text span {
	font-size: var(--wssb-t-xs);
	color: var(--wssb-muted);
	line-height: 1.5;
}

/* ------------------------------------------------------------- Subscribe */

.wssb-subscribe-band {
	padding-block: clamp(2.75rem, 5vw, 4rem);
	background:
		radial-gradient(70% 140% at 88% 50%, rgba(192, 232, 242, 0.16) 0%, rgba(192, 232, 242, 0) 60%),
		var(--wssb-ink);
}

.wssb-subscribe {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: var(--wssb-s6);
	align-items: center;
}

.wssb-subscribe__title {
	font-family: var(--wssb-serif);
	font-size: var(--wssb-t-2xl);
	font-weight: 600;
	letter-spacing: -0.018em;
	margin: 0 0 0.5rem;
	color: #fff;
	text-wrap: balance;
}

.wssb-subscribe__text p {
	margin: 0;
	max-width: 56ch;
	color: var(--wssb-on-dark-dim);
	font-size: var(--wssb-t-sm);
	line-height: 1.65;
}

.wssb-subscribe__form {
	display: flex;
	gap: var(--wssb-s2);
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
}

@media (max-width: 980px) {
	.wssb-subscribe__form { justify-content: flex-start; }
}

.wssb-subscribe__form input[type="email"] {
	flex: 1 1 220px;
	min-height: 52px;
	padding: 0.75rem 1rem;
	font-family: var(--wssb-sans);
	font-size: var(--wssb-t-base);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--wssb-on-dark-rule);
	border-radius: var(--wssb-r);
}

.wssb-subscribe__form input[type="email"]::placeholder { color: var(--wssb-on-dark-dim); }

.wssb-subscribe__form input[type="email"]:focus {
	outline: 2px solid var(--wssb-sky);
	outline-offset: 1px;
	border-color: var(--wssb-sky);
}

/* --------------------------------------------------- Header enrichment */

.wssb-topbar__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.wssb-social {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
}

.wssb-social__link {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border-bottom: 0 !important;
	transition: background-color 0.2s var(--wssb-ease), color 0.2s var(--wssb-ease);
}

.wssb-topbar__social .wssb-social__link:hover { background: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------- Footer enrichment */

/* ------------------------------------------- Dropdowns with descriptions */

/* A dropdown that carries descriptions is wider and set as two lines per
   item: the label, then what is behind it. The description comes from the
   menu item's own Description field. */
/* Only the horizontal bar's panel is widened, and only where a horizontal bar
   is possible at all — a stacked menu must stay inside its column. */
@media (min-width: 1081px) {
	html:not(.wssb-nav-compact) .wssb-nav .sub-menu:has(.wssb-nav__item--described) {
		min-width: 330px;
	}
}

.wssb-nav__label {
	display: block;
	font-weight: 500;
	color: var(--wssb-ink);
}

.wssb-nav__desc {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--wssb-muted);
}

.wssb-nav .sub-menu a:hover .wssb-nav__label {
	color: var(--wssb-green-deep);
}

.wssb-nav .sub-menu .wssb-nav__item--described a {
	padding: 0.65rem 0.7rem;
}

/* The top level never shows a description, even if one is set. */
.wssb-nav > ul > li > a > .wssb-nav__desc {
	display: none;
}

/* ------------------------------------------------------------- Mega menu */

/* A wide dropdown with two columns once a section has enough children to
   need them. Applied by the script, which counts the items. */
.wssb-nav .sub-menu.wssb-mega {
	display: none;
	min-width: 470px;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--wssb-s3);
	padding: var(--wssb-s3);
}

.wssb-nav li:hover > .sub-menu.wssb-mega,
.wssb-nav li:focus-within > .sub-menu.wssb-mega,
.wssb-nav .wssb-nav__toggle[aria-expanded="true"] + .sub-menu.wssb-mega,
.wssb-nav .sub-menu.wssb-mega.is-open {
	display: grid;
}

/* Keep a wide panel inside the viewport near the right edge */
.wssb-nav > ul > li:nth-last-child(-n + 3) .sub-menu {
	left: auto;
	right: 0;
}

/* --- Tier two: the tight bar ---------------------------------------------

   The header has three states, not two. Between the roomy bar and the drawer
   there is a tightened bar, and the script chooses it by measuring rather than
   at a fixed width: whenever the full-size row would not fit, this comes on
   first, and only if it still will not fit does the drawer take over.

   This used to be a 1081–1280px media query. That assumed the row was only
   ever short of space in that band, which was true of the menu it was tuned
   to. A 1366px laptop with the installed nine-item menu needed 1080 of the
   1104 pixels available — twenty-four pixels of margin — so a slightly wider
   font on Windows, or one more menu item, tipped it straight past the
   tightening it never reached and into the drawer. Which is the burger in the
   middle of an empty white bar that was reported.

   Keyed on a class, the same rules now apply at any width, so a longer menu
   reaches them sooner and nothing has to be re-tuned by hand. */

.wssb-nav-tight .wssb-header__inner {
	gap: var(--wssb-s4);
	padding-inline: clamp(1rem, 2.4vw, 2rem);
}

.wssb-nav-tight .wssb-brand {
	gap: 0.55rem;
}

.wssb-nav-tight .wssb-brand img {
	width: 44px;
	height: 44px;
}

.wssb-nav-tight .wssb-brand__name {
	font-size: 0.9375rem;
}

.wssb-nav-tight .wssb-nav ul a {
	padding: 0.6rem 0.4rem;
	font-size: var(--wssb-t-sm);
}

.wssb-nav-tight .wssb-nav ul .wssb-nav__has-children > a {
	padding-right: 1.45rem;
}

.wssb-nav-tight .wssb-nav > ul > li > a::after {
	left: 0.4rem;
	right: 0.4rem;
}

.wssb-nav-tight .wssb-nav__toggle {
	right: 0.1rem;
}

.wssb-nav-tight .wssb-header__cta .wssb-btn {
	font-size: var(--wssb-t-xs);
	padding: 0.7em 1.1em;
}

/* Without scripting there is no measuring, so the tightening falls back to the
   width band it used to be. Below 1081 the no-JS menu stacks anyway. */
@media (min-width: 1081px) and (max-width: 1300px) {
	.no-js .wssb-header__inner { gap: var(--wssb-s4); }
	.no-js .wssb-nav ul a { padding: 0.6rem 0.4rem; font-size: var(--wssb-t-sm); }
	.no-js .wssb-brand img { width: 44px; height: 44px; }
	.no-js .wssb-brand__name { font-size: 0.9375rem; }
}

/* --------------------------------------------------------- Scroll reveal */

/* Visible by default. The script adds .wssb-anim to the document only once it
   is certain it can finish the job, so no failure can leave a section blank —
   the same rule the yield bars follow. */
.wssb-reveal {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--wssb-ease), transform 0.6s var(--wssb-ease);
}

.wssb-anim .wssb-reveal {
	opacity: 0;
	transform: translateY(14px);
}

.wssb-anim .wssb-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wssb-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------- Screens */

@media (max-width: 760px) {
	.wssb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
	.wssb-stats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
}

@media (max-width: 980px) {
	.wssb-president,
	.wssb-research,
	.wssb-subscribe {
		grid-template-columns: minmax(0, 1fr);
	}

	.wssb-portrait { max-width: 300px; }
	.wssb-hero__art { opacity: 0.55; width: 60%; }
}

@media (max-width: 720px) {

	.wssb-nav .sub-menu.wssb-mega {
		min-width: 0;
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.wssb-figure { grid-template-columns: 4rem minmax(0, 1fr); padding: var(--wssb-s4); }
	.wssb-hero__art { display: none; }
}

@media print {
	.wssb-stats-band,
	.wssb-subscribe-band,
	.wssb-inst-band,
	.wssb-hero__art,
	.wssb-flash {
		display: none !important;
	}
}

/* =========================================================================
   18. Header and footer, responsive
   ====================================================================== */

/* The search box only appears inside the drawer, where the header has no
   room for a toggle. */
.wssb-nav__search {
	display: none;
	margin-bottom: var(--wssb-s4);
	padding-bottom: var(--wssb-s4);
	border-bottom: 1px solid var(--wssb-rule);
}

/* The drawer footer: the call to action and the address, at the end of the
   mobile menu where most association sites put them. */
.wssb-nav__foot {
	display: none;
	gap: var(--wssb-s3);
	margin-top: var(--wssb-s5);
	padding-top: var(--wssb-s5);
	border-top: 1px solid var(--wssb-rule);
}

.wssb-nav__foot .wssb-btn {
	width: 100%;
}

.wssb-nav__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	color: var(--wssb-muted);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.wssb-nav__mail .wssb-i { color: var(--wssb-green); }

/* --- Widths --- */

/* Below this the utility bar has nothing left to say that the menu and the
   footer do not, so it steps aside rather than wrapping. */
@media (max-width: 900px) {
	.wssb-topbar {
		display: none;
	}
}

/* Between the drawer breakpoint and a comfortable desktop the bar is tight:
   trim the utility links first, then the brand's second line. */
@media (max-width: 1180px) {
	.wssb-topbar__note {
		display: none;
	}

	.wssb-topbar__inner {
		justify-content: flex-end;
	}
}

@media (min-width: 1081px) and (max-width: 1360px) {
	.wssb-header__inner {
		gap: var(--wssb-s3);
		padding-inline: 1.5rem;
	}

	.wssb-brand img {
		width: 44px;
		height: 44px;
	}

	.wssb-brand__name {
		font-size: 0.9375rem;
	}

	.wssb-nav ul a {
		padding: 0.55rem 0.42rem;
		font-size: 0.8125rem;
	}

	.wssb-nav > ul > li > a::after {
		left: 0.42rem;
		right: 0.42rem;
	}

	.wssb-nav ul .wssb-nav__has-children > a {
		padding-right: 1.55rem;
	}

}

@media (max-width: 1080px) {
	.wssb-header__inner {
		min-height: 68px;
	}
}

@media (max-width: 620px) {
	.wssb-header__inner {
		min-height: 62px;
		gap: var(--wssb-s3);
	}

	.wssb-brand img {
		width: 42px;
		height: 42px;
	}

	.wssb-brand__name {
		font-size: 0.875rem;
	}

	.wssb-search__inner {
		padding-inline: var(--wssb-gut);
	}

	.wssb-search form {
		flex-wrap: wrap;
		padding: 0.5rem;
	}

	.wssb-searchbox > .wssb-i {
		display: none;
	}

	.wssb-searchbox input[type="search"] {
		flex: 1 1 100%;
		padding-inline: 0.5rem;
	}

	.wssb-search .wssb-btn {
		width: 100%;
	}
}

/* --- Footer --- */

@media (max-width: 1080px) {
	.wssb-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wssb-footer__grid > .wssb-footer__contact {
		grid-column: span 3;
		border-top: 1px solid var(--wssb-on-dark-rule);
		padding-top: var(--wssb-s5);
	}
}

@media (max-width: 760px) {
	.wssb-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wssb-footer__grid > .wssb-footer__contact {
		grid-column: span 2;
	}

	.wssb-footer__top {
		justify-content: flex-start;
	}
}

@media (max-width: 480px) {
	.wssb-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wssb-footer__grid > * {
		grid-column: 1 !important;
	}

	.wssb-footer__bar-inner {
		justify-content: flex-start;
	}
}

@media print {
	.wssb-search,
	.wssb-header__actions,
	.wssb-topbar {
		display: none !important;
	}
}

/* The membership button lives in the utility bar, the way an association site
   puts "Pay dues" there — it keeps the main row for the brand and the menu,
   which is what ran out of space. */
.wssb-topbar__cta {
	display: inline-flex;
	align-items: center;
	margin-left: 0.5rem;
	padding: 0.4em 0.95em;
	background: var(--wssb-green);
	border: 1px solid var(--wssb-green);
	border-radius: var(--wssb-r-sm);
	color: #fff !important;
	font-weight: 500;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: background-color 0.16s var(--wssb-ease), border-color 0.16s var(--wssb-ease);
}

.wssb-topbar__cta:hover {
	background: var(--wssb-sky);
	border-color: var(--wssb-sky);
	color: var(--wssb-green-dark) !important;
	border-bottom-color: var(--wssb-sky);
}

/* The header keeps its own button as well, but only while there is room for
   it; the fitting script hides it with the rest of the desktop bar. */
@media (max-width: 1180px) {
	.wssb-topbar__cta {
		margin-left: 0.35rem;
	}
}

/* =========================================================================
   19. The Events page
   The diary reuses the home page event list, without the coloured band
   around it, and separates what is coming from what has been.
   ====================================================================== */

.wssb-diary {
	margin-block: var(--wssb-s5);
}

.wssb-diary__head {
	font-family: var(--wssb-mono);
	font-size: var(--wssb-t-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wssb-muted);
	margin: 0 0 var(--wssb-s4);
	padding-bottom: var(--wssb-s2);
	border-bottom: 1px solid var(--wssb-rule);
}

.wssb-diary__head + .wssb-events {
	margin-bottom: var(--wssb-s7);
}

.wssb-diary .wssb-events:last-child {
	margin-bottom: 0;
}

.wssb-diary__empty {
	color: var(--wssb-muted);
	margin: 0 0 var(--wssb-s7);
}

/* Everything already held is quieter than what is still to come. */
.wssb-diary__head + .wssb-events .wssb-event__date {
	opacity: 1;
}

.wssb-diary > .wssb-diary__head:nth-of-type(2) ~ .wssb-events .wssb-event__date {
	opacity: 0.7;
}