@charset "utf-8";
/* ==========================================================================
   SEM – Institute for Climate Change
   Responsive, accessible stylesheet (replaces climate-change.css).
   Mobile-first: base styles are for small screens, wider layouts are
   added in the media queries further down.
   ========================================================================== */

:root {
	--cyan: #00ffff;
	--blue: #0000ff;
	--text: #333333;
	--muted: #555555;
	--link: #00706f;          /* teal, 5.1:1 on #eee, 5.8:1 on white */
	--link-hover: #990000;
	--nav-bg: #b8c0cf;
	--nav-bg-active: #56637a; /* 6:1 with white text */
	--nav-border: #666666;
	--panel: #eeeeee;
	--panel-border: #999999;
	--focus: #990000;
	--gutter: 1rem;
}

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

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

body {
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	color: var(--text);
	background: var(--cyan) url(../images/bg.jpg) repeat-x fixed;
	overflow-wrap: break-word;
}

img,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
	border: 0;
	vertical-align: middle;
}

h1, h2, h3, h4 {
	line-height: 1.25;
	margin: 0 0 0.75rem;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1rem; }

p, ul, ol, dl, figure {
	margin: 0 0 1rem;
}

ul, ol {
	padding-left: 1.75rem;
}

li + li {
	margin-top: 0.35rem;
}

a:link,
a:visited {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover,
a:active {
	color: var(--link-hover);
	text-decoration: none;
}

/* Clearly visible keyboard focus everywhere (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

#main:focus {
	outline: none;
}

/* Text that is read by screen readers but not shown */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
	position: absolute;
	left: 0.5rem;
	top: -10rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: #ffffff;
	color: #000000 !important;
	font-weight: bold;
	border: 3px solid var(--focus);
}

.skip-link:focus {
	top: 0.5rem;
}

/* ---------- Page frame ---------- */
.container {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
}

/* Header / banner */
.site-header {
	padding: 0.5rem var(--gutter);
}

.site-logo,
.site-logo:link,
.site-logo:visited {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--blue);
	text-decoration: none;
}

.site-logo img {
	width: 60px;
	flex-shrink: 0;
}

.site-name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(1.1rem, 4.5vw, 2rem);
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.2;
	text-shadow: 1px 1px 6px var(--cyan);
}

.site-logo:hover .site-name {
	text-decoration: underline;
}

/* ---------- Main navigation ---------- */
.site-nav {
	background: var(--cyan);
}

.nav-toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 48px;
	padding: 0.5rem var(--gutter);
	font: inherit;
	font-weight: bold;
	color: #000000;
	background: var(--nav-bg);
	border: 0;
	border-top: 1px solid var(--nav-border);
	border-bottom: 1px solid var(--nav-border);
	cursor: pointer;
}

.nav-toggle:focus-visible {
	outline-offset: -4px;
}

/* Hamburger / close icon drawn with CSS */
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s;
}

.nav-toggle-icon {
	position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* When JavaScript runs, the menu is collapsed until opened */
.js .nav-toggle[aria-expanded="false"] + .nav {
	display: none;
}

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

ul.nav li {
	margin: 0;
	border-bottom: 1px solid var(--nav-border);
}

ul.nav a,
ul.nav a:link,
ul.nav a:visited {
	display: block;
	min-height: 44px;        /* comfortable touch target */
	padding: 0.6rem var(--gutter);
	color: #000000;
	background: var(--nav-bg);
	text-decoration: none;
	line-height: 1.3;
}

ul.nav a:hover,
ul.nav a:focus-visible,
ul.nav a[aria-current="page"] {
	color: #ffffff;
	background: var(--nav-bg-active);
}

ul.nav a:focus-visible {
	outline-offset: -4px;
	outline-color: #ffffff;
	box-shadow: inset 0 0 0 6px var(--focus);
}

/* Current page: not shown by colour alone */
ul.nav a[aria-current="page"] {
	font-weight: bold;
	border-left: 6px solid var(--blue);
	padding-left: calc(var(--gutter) - 6px);
}

/* ---------- Content area ---------- */
.content {
	display: block;
	padding: 1.25rem var(--gutter) 1.5rem;
	background: #ffffff;
}

.content > :last-child {
	margin-bottom: 0;
}

.page-logo {
	text-align: center;
	margin-bottom: 1rem;
}

.page-title {
	text-align: center;
}

.center { text-align: center; }

.big {
	font-size: 1.2em;
	font-weight: bold;
}

.sml,
small {
	font-size: 0.85rem;     /* was 0.7em (≈11px) – too small to read */
}

.lead {
	font-size: 1.15rem;
}

.note {
	font-size: 0.85rem;
	color: var(--muted);
}

/* Decorative images that sit beside text on wide screens */
.float-right {
	display: block;
	margin: 0 auto 1rem;
}

/* ---------- Footer ---------- */
.site-footer {
	padding: 1rem var(--gutter);
	font-size: 0.85rem;
	text-align: center;
	background: #ffffff;
	border-top: 1px solid #dddddd;
}

.site-footer p {
	margin: 0.25rem 0;
}

/* ---------- Home page ---------- */
.history-link {
	margin: 0 auto 2rem;
	text-align: center;
}

.history-link a,
.history-link a:link,
.history-link a:visited {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	padding: 0.25rem 0.5rem;
	font-size: 1.15rem;
	font-weight: bold;
	color: var(--text);
	text-decoration: none;
}

.history-link a:hover span {
	color: var(--link-hover);
	text-decoration: underline;
}

@media (max-width: 39.99em) {
	.history-link a { flex-direction: column; }
	.history-link img { order: -1; }
}

.welcome {
	text-align: center;
}

.welcome h1 {
	font-size: 1.3rem;
	margin-bottom: 0.25rem;
}

.welcome .and {
	margin: 0.5rem 0;
}

.honours {
	list-style: none;
	padding: 0;
	margin: 0 auto 1.5rem;
	max-width: 46rem;
	text-align: center;
}

.honours li + li {
	margin-top: 0.3rem;
}

.portrait {
	text-align: center;
	margin-bottom: 2rem;
}

.home-columns {
	display: grid;
	gap: 1.5rem;
}

.mottos p {
	font-size: 1.15rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.photo {
	margin: 0 0 1rem;
	text-align: center;
}

.photo figcaption,
figure figcaption {
	font-style: italic;
	font-size: 0.9rem;
	margin-top: 0.4rem;
}

.video {
	position: relative;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 4 / 3;
	margin: 0 auto;
}

.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Book / document cards ---------- */
.book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: 0.6rem;
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.book-grid > li {
	margin: 0;
}

.book {
	height: 100%;
	padding: 0.75rem 0.6rem;
	text-align: center;
	background: var(--panel);
	border: 1px solid var(--panel-border);
}

.book h3 {
	font-size: 1rem;
	margin-bottom: 0.5rem;
}

.book p {
	margin-bottom: 0.6rem;
}

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

.book .cover {
	margin: 0.5rem 0;
}

.book .cover img {
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.downloads {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
}

.downloads li + li {
	margin-top: 0.25rem;
}

/* Two-wide variant used on the home page */
.book-grid.two {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}

/* ---------- Profile: awards gallery ---------- */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.gallery > li {
	margin: 0;
	padding: 0.6rem 0.4rem;
	text-align: center;
	font-size: 0.85rem;
	background: var(--panel);
	border: 1px solid var(--panel-border);
}

.gallery figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	height: 100%;
	justify-content: flex-end;
}

.gallery figcaption {
	font-style: normal;
	font-size: 0.85rem;
	margin: 0;
}

.membership {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-weight: bold;
}

/* ---------- Library page ---------- */
.library-section {
	margin-bottom: 1rem;
}

.library-section > h2 {
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--panel-border);
}

.diogenes {
	display: grid;
	gap: 0.75rem;
	align-items: end;
	margin-bottom: 1.5rem;
}

.diogenes figcaption {
	font-size: 0.85rem;
	font-style: normal;
}

.barrels {
	margin: 0 0 2rem;
	padding: 1rem 0.5rem;
	text-align: center;
	border: 2px solid var(--panel-border);
}

.barrels h3 {
	font-size: 1rem;
}

.barrel-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 0.25rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

.barrel-list li {
	margin: 0;
}

.barrel-list a,
.barrel-list a:link,
.barrel-list a:visited {
	display: block;
	width: 135px;
	height: 140px;
	padding-left: 7px;
	color: #000000;
	text-decoration: none;
	text-align: center;
	font: bold 35px/140px Arial, Helvetica, sans-serif;
	background: url(../images/vrh-soda.png) no-repeat -3px 0;
}

.barrel-list a:hover,
.barrel-list a:focus-visible {
	background-position: -283px 0;
	color: #333333;
	text-decoration: underline;
}

.barrel-list a .part {
	font-size: 0.85rem;
}

/* ---------- Location page ---------- */
.big-claim {
	text-align: center;
	font-size: clamp(1.3rem, 4vw, 1.9rem);
	margin-bottom: 0.5rem;
}

/* ---------- Lightbox (accessible image viewer, see js/site.js) ---------- */
.lightbox {
	width: min(96vw, 1100px);
	max-height: 96vh;
	padding: 0;
	border: 0;
	background: #ffffff;
	color: var(--text);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

.lightbox-inner {
	display: flex;
	flex-direction: column;
	max-height: 96vh;
}

.lightbox-figure {
	margin: 0;
	padding: 0.75rem 0.75rem 0;
	overflow: auto;
	text-align: center;
}

.lightbox-figure img {
	max-height: calc(96vh - 9rem);
	width: auto;
}

.lightbox-figure figcaption {
	font-style: normal;
	margin-top: 0.5rem;
}

.lightbox-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem;
}

.lightbox-bar .counter {
	font-size: 0.9rem;
	color: var(--muted);
}

.lightbox button {
	min-width: 44px;
	min-height: 44px;
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-weight: bold;
	color: #ffffff;
	background: var(--nav-bg-active);
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
}

.lightbox button:hover {
	background: #000000;
}

.lightbox button[hidden] {
	display: none;
}

/* ==========================================================================
   Tablet and up
   ========================================================================== */
@media (min-width: 40em) {
	:root { --gutter: 1.5rem; }

	.site-logo img { width: 80px; }

	.float-right {
		float: right;
		margin: 0 0 1rem 1rem;
	}

	.diogenes {
		grid-template-columns: minmax(0, 500px) 1fr;
	}
}

/* ==========================================================================
   Desktop: sidebar layout like the original design
   ========================================================================== */
@media (min-width: 56em) {
	:root { --gutter: 1rem; }

	.container {
		display: grid;
		grid-template-columns: 20% minmax(0, 1fr);
		grid-template-areas:
			"header header"
			"nav    main"
			"nav    footer";
		grid-template-rows: auto 1fr auto;
		width: 96%;
		padding-bottom: 15px;
	}

	.site-header { grid-area: header; padding: 0; }
	.site-nav    { grid-area: nav; align-self: start; padding-bottom: 10px; }
	.content     { grid-area: main; padding: 1rem 1.5rem 1.5rem; }
	.site-footer { grid-area: footer; }

	.site-logo,
	.site-logo:link,
	.site-logo:visited {
		display: grid;
		grid-template-columns: 20% 1fr;
		gap: 0;
	}

	.site-logo img {
		width: 97px;
		justify-self: center;
	}

	.site-name {
		text-align: center;
		font-size: 2rem;
	}

	/* The menu is always open on large screens */
	.nav-toggle { display: none !important; }
	.js .nav-toggle[aria-expanded="false"] + .nav { display: block; }

	.home-columns {
		grid-template-columns: minmax(0, 1fr) 420px;
		align-items: start;
	}
}

@media (min-width: 80em) {
	.container { width: 80%; }
}

/* ---------- User preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	ul.nav a[aria-current="page"] { border-left-color: Highlight; }
	.barrel-list a { forced-color-adjust: none; color: #000; background-color: #fff; }
}

@media print {
	body { background: #ffffff; }
	.site-nav, .skip-link, .video { display: none; }
	.container { display: block; width: auto; }
}
.spaced > li + li { margin-top: 1rem; }
.content h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.content .library-section > h2,
.content .book-grid + h2 { margin-top: 1.5rem; }

/* Library: "On this page" jump links */
.toc {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--panel);
	border: 1px solid var(--panel-border);
}
.content .toc-title { font-size: 1rem; margin: 0 0 0.5rem; }
.toc ul { margin: 0; padding-left: 1.25rem; }
.toc li + li { margin-top: 0.2rem; }
.library-section { scroll-margin-top: 1rem; }
.page-title .sub { display: block; font-size: 0.75em; margin-top: 0.25rem; }

/* ==========================================================================
   Accessibility settings menu (button in the header)
   ========================================================================== */
.site-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.site-header .site-logo {
	flex: 1 1 auto;
	min-width: 0;
}

.a11y {
	position: relative;
	flex: 0 0 auto;
}

.a11y-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0.4rem 0.7rem;
	font: inherit;
	font-size: 0.9rem;
	font-weight: bold;
	color: #ffffff;
	background: var(--nav-bg-active);
	border: 2px solid var(--nav-bg-active);
	border-radius: 22px;
	cursor: pointer;
}

.a11y-toggle:hover,
.a11y-toggle[aria-expanded="true"] {
	background: #000000;
	border-color: #000000;
}

.a11y-icon {
	flex-shrink: 0;
}

/* On very narrow screens show only the icon (the name stays for screen readers) */
@media (max-width: 29.99em) {
	.a11y-toggle-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.a11y-toggle { padding: 0.4rem; }
}

.a11y-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.4rem);
	z-index: 60;
	width: min(22rem, calc(100vw - 1.5rem));
	max-height: calc(100vh - 7rem);
	overflow-y: auto;
	padding: 1rem;
	font-size: 1rem;
	font-style: normal;
	text-align: left;
	color: #222222;
	background: #ffffff;
	border: 2px solid #222222;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.a11y-panel[hidden] {
	display: none;
}

.a11y-title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	font-weight: bold;
}

.a11y-panel fieldset {
	margin: 0 0 0.9rem;
	padding: 0.5rem 0.75rem 0.6rem;
	border: 1px solid #888888;
	border-radius: 4px;
}

.a11y-panel legend {
	padding: 0 0.3rem;
	font-weight: bold;
}

.a11y-panel label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.35rem 0;
	cursor: pointer;
	line-height: 1.35;
}

.a11y-panel input {
	width: 1.2rem;
	height: 1.2rem;
	margin: 0.05rem 0 0;
	flex-shrink: 0;
	accent-color: var(--nav-bg-active);
}

.a11y-size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.a11y-size output {
	min-width: 4ch;
	text-align: center;
	font-weight: bold;
}

.a11y-panel button {
	min-width: 44px;
	min-height: 44px;
	padding: 0.35rem 0.9rem;
	font: inherit;
	font-weight: bold;
	color: #ffffff;
	background: var(--nav-bg-active);
	border: 2px solid var(--nav-bg-active);
	border-radius: 4px;
	cursor: pointer;
}

.a11y-panel button:hover {
	background: #000000;
	border-color: #000000;
}

.a11y-panel button:disabled {
	color: #444444;
	background: #dddddd;
	border-color: #999999;
	cursor: not-allowed;
}

.a11y-size button {
	font-size: 1.15rem;
	padding: 0.2rem 0.9rem;
}

.a11y-actions {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
}

.a11y-actions .a11y-reset {
	color: #222222;
	background: #ffffff;
	border-color: #222222;
}

.a11y-actions .a11y-reset:hover {
	color: #ffffff;
}

@media (min-width: 56em) {
	.site-header { align-items: flex-start; }
	.a11y { margin-top: 0.5rem; }
	.site-logo,
	.site-logo:link,
	.site-logo:visited { grid-template-columns: minmax(97px, 20.5%) 1fr; }

	/* Large text (150 %+): menu becomes a full-width bar above the content */
	[data-large] .container {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "header" "nav" "main" "footer";
		grid-template-rows: auto auto 1fr auto;
	}
	[data-large] ul.nav {
		display: flex !important;
		flex-wrap: wrap;
		border-top: 0;
		border-left: 1px solid var(--nav-border);
	}
	[data-large] ul.nav li {
		flex: 1 1 auto;
		border-top: 1px solid var(--nav-border);
		border-right: 1px solid var(--nav-border);
	}
	[data-large] ul.nav a { text-align: center; }
	[data-large] .site-logo,
	[data-large] .site-logo:link,
	[data-large] .site-logo:visited { display: flex; gap: 1rem; }
	[data-large] .site-name { text-align: left; }
}

ul.nav a { overflow-wrap: normal; }

/* ---------- Setting: underline all links ---------- */
[data-underline] a,
[data-underline] a:link,
[data-underline] a:visited,
[data-underline] ul.nav a,
[data-underline] .site-name,
[data-underline] .history-link span,
[data-underline] .barrel-list a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.18em;
}

/* ---------- Setting: more text spacing (WCAG 1.4.12 values) ---------- */
[data-spacing] body {
	line-height: 1.8;
	letter-spacing: 0.12em;
	word-spacing: 0.16em;
}

[data-spacing] p,
[data-spacing] li {
	margin-bottom: 1.5em;
}

[data-spacing] .honours li + li,
[data-spacing] ul.nav li + li {
	margin-top: 0;
}

[data-spacing] .barrel-list a {
	letter-spacing: 0;
}

/* ---------- Colour scheme: greyscale ---------- */
[data-theme="gray"] body {
	filter: grayscale(1);
}

/* ---------- Colour scheme: high contrast (yellow on black) ---------- */
[data-theme="contrast"] {
	--text: #ffffff;
	--muted: #ffffff;
	--link: #ffff00;
	--link-hover: #00ffff;
	--focus: #00ffff;
	--panel: #000000;
	--panel-border: #ffffff;
	--nav-border: #ffffff;
	color-scheme: dark;
}

[data-theme="contrast"] body,
[data-theme="contrast"] .content,
[data-theme="contrast"] .site-footer,
[data-theme="contrast"] .site-nav {
	color: #ffffff;
	background: #000000;
}

[data-theme="contrast"] .site-footer {
	border-top-color: #ffffff;
}

[data-theme="contrast"] .site-logo,
[data-theme="contrast"] .site-logo:link,
[data-theme="contrast"] .site-logo:visited {
	color: #ffff00;
}

[data-theme="contrast"] .site-name {
	text-shadow: none;
}

[data-theme="contrast"] .site-logo img,
[data-theme="contrast"] .page-logo img,
[data-theme="contrast"] .history-link img {
	background: #ffffff;
	border-radius: 6px;
}

[data-theme="contrast"] .history-link a,
[data-theme="contrast"] .history-link a:link,
[data-theme="contrast"] .history-link a:visited {
	color: #ffff00;
}

[data-theme="contrast"] ul.nav a,
[data-theme="contrast"] ul.nav a:link,
[data-theme="contrast"] ul.nav a:visited,
[data-theme="contrast"] .nav-toggle {
	color: #ffffff;
	background: #000000;
	border-color: #ffffff;
}

[data-theme="contrast"] ul.nav a:hover,
[data-theme="contrast"] ul.nav a:focus-visible,
[data-theme="contrast"] ul.nav a[aria-current="page"] {
	color: #000000;
	background: #ffff00;
	border-left-color: #00ffff;
}

[data-theme="contrast"] ul.nav a:focus-visible {
	outline-color: #000000;
	box-shadow: inset 0 0 0 6px #00ffff;
}

[data-theme="contrast"] .book .cover img {
	box-shadow: 0 0 0 1px #ffffff;
}

[data-theme="contrast"] .barrel-list a {
	background-color: #ffffff;
	border-radius: 8px;
	margin: 0.15rem;
}

[data-theme="contrast"] .skip-link {
	color: #000000 !important;
	background: #ffff00;
	border-color: #00ffff;
}

[data-theme="contrast"] .a11y-toggle,
[data-theme="contrast"] .a11y-panel button,
[data-theme="contrast"] .lightbox button {
	color: #000000;
	background: #ffff00;
	border-color: #ffff00;
}

[data-theme="contrast"] .a11y-toggle:hover,
[data-theme="contrast"] .a11y-toggle[aria-expanded="true"],
[data-theme="contrast"] .a11y-panel button:hover,
[data-theme="contrast"] .lightbox button:hover {
	color: #000000;
	background: #00ffff;
	border-color: #00ffff;
}

[data-theme="contrast"] .a11y-panel button:disabled {
	color: #bbbbbb;
	background: #000000;
	border-color: #bbbbbb;
}

[data-theme="contrast"] .a11y-actions .a11y-reset {
	color: #ffff00;
	background: #000000;
	border-color: #ffff00;
}

[data-theme="contrast"] .a11y-panel,
[data-theme="contrast"] .lightbox {
	color: #ffffff;
	background: #000000;
	border-color: #ffffff;
}

[data-theme="contrast"] .a11y-panel fieldset {
	border-color: #ffffff;
}

[data-theme="contrast"] .a11y-panel input {
	accent-color: #ffff00;
}

/* ---------- Colour scheme: black on white ---------- */
[data-theme="light"] {
	--text: #000000;
	--muted: #000000;
	--link: #0000cc;
	--link-hover: #990000;
	--panel: #ffffff;
	--panel-border: #000000;
	--nav-border: #000000;
}

[data-theme="light"] body,
[data-theme="light"] .site-nav {
	color: #000000;
	background: #ffffff;
}

[data-theme="light"] .site-footer {
	border-top-color: #000000;
}

[data-theme="light"] a:visited {
	color: #551a8b;
}

[data-theme="light"] .site-logo,
[data-theme="light"] .site-logo:link,
[data-theme="light"] .site-logo:visited {
	color: #000080;
}

[data-theme="light"] .site-name {
	text-shadow: none;
}

[data-theme="light"] ul.nav a,
[data-theme="light"] ul.nav a:link,
[data-theme="light"] ul.nav a:visited,
[data-theme="light"] .nav-toggle {
	color: #000000;
	background: #ffffff;
}

[data-theme="light"] ul.nav a:hover,
[data-theme="light"] ul.nav a:focus-visible,
[data-theme="light"] ul.nav a[aria-current="page"] {
	color: #ffffff;
	background: #000000;
	border-left-color: #000000;
}

[data-theme="light"] .barrels {
	border-color: #000000;
}

.membership { flex-wrap: wrap; }
.membership span { min-width: 0; flex: 1 1 10rem; }